α‘ားαုံးααၤαာαါαα္α်ာ..။ α‘ေαΎαာα္းα‘ေαΎαာα္းα‘α်ိဳးα်ိဳးေαΎαာα့္ αုိαα
္α‘αα
္ေαြ ααα္ႏုိα္αဲ့α‘αြα္ αာαα္αΎααူ αိα္ေαြα‘ေαါα္းα‘ား α‘αြα္αဲ α‘ားαာαိαါαα္αα္α်ာ..။ α‘αုαα္း αα‘ားαဲ့αΎαားααဲ ေαာα္းαုိαားαဲ့αူα်ားα‘αြα္ αေαာ့αွာ width αုိ αိαိαုိααုိααုိ α်ဲαႏုိα္/α်ံဳαႏုိα္ေα‘ာα္ αီαုိαα
္ေαးαုိ ေαးαားαုိα္ααါαα္။ αိαိαားαα္ααုိ αα္ျααားျαα္းျαα
္αဲ့α‘αြα္ α‘ားαα္းα်ိဳααြα္းα်α္α်ားαွိαါα αားαα္αြα့္αႊα္ေαးαΎααါαုိα α₯ီးα
ြာေαာα္းαα္α‘α္αါαα္။ αုိα‘α္α်α္α်ားαွိαဲ့αα္αα္း ျαα့္α
ြα္ေαးαΎαေα
αုိαါαα္။
αေαာ့αဲα width αုိα်ဲαျαα္း/α်ံဳαျαα္းျαဳαုα္αုိαα‘αြα္ αူααဲα α‘ေျααံαေαာααားေαးαုိေαာ့ αိαုိααုိα‘α္αါαα္။ αါαွαာ αိαိααα္ ျαα္αα္αဲ့α‘αါ αားαα္αြα္αွာျαα
္αါαα္။ αါေαΎαာα့္ Template αုိ α‘αΎαα္းα်α₯္းα‘ားျαα့္ header-wrapper ၊ outer-wrapper αဲα footer αုိαΏαီး (α)αုိα္း αုိα္းျαားαားေαΎαာα္းαုိ αိαားααါ့αα္။ α‘ဲαီ (α)αုိα္းα
αုံးαဲα width ေαြααα္း αူαီေαααါ့αα္။ α₯ααာ.. header-wrapper αဲα width α 980px αုိαα္ outer-wrapper αဲα footer αုိααဲα width ေαြααα္း 980px α
ီαဲ αွိαΎαααါαα့္။ αါαွαာ α‘α်ိဳးαီαွααဲ့ Template αα
္αု ျαα
္αါαိα့္αα္။
header-wrapper = outer-warpper = footer
α‘ဲαီ α‘αုိα္းααီး(α)αုိα္းα‘αα္ outer-wrapper α‘ေαΎαာα္းαုိ αα္ေျαာαါ့αα္။ outer-warpper αုိαာαေαာ့ main-wrapper αဲα sidebar-wrapper ႏွα
္αုαုိ ေαါα္းαားαာαဲျαα
္αါαα္။ αေαာαေαာ့ outer-wrapper αဲα width αာ main-wrapper αဲα sidebar-wrapper ႏွα
္αုေαါα္းαာαဲα αီαါαα္။
α₯ααာ...
outer-wrapper = 980px αုိαါα..
main-wrapper + sidebar-wrapper = 980px ျαα
္ααါαα္။
outer-wrapper = main-wrapper + sidebar-wrapper (sidebar αα
္αုαာαါαα့္ template α်ားα‘αြα္)
outer-wrapper = main-wrapper + right-sidebar-wrapper + left-sidebar-wrapper (sidebar ႏွα
္αုαါαα့္ template α်ားα‘αြα္)
αါေααα့္ main-wrapper αဲα sidebar-wrapper ႏွα
္αုα‘αΎαားαွာေαာ့ margin ေαာ့αားေαးααါαα္။ αα
္αုαဲααα
္αု αိα
α္ေααα္ αΎαα့္ααာαα္း α‘αα္ေျααွာααုα္αါαူး.။ αါေαΎαာα့္ margin α‘αြα္ 30px, 40px.. α
αα္ျαα့္ αားေαးααါαα္။ ေα‘ာα္αွာ ေαးαားαဲ့ ααူαာαုံေαးေαြαုိαΎαα့္αΎααါαα္α်ာ..။
α‘ေααααုံေαြαုိαΎαα့္αα္αုိαα္...
Sidebar αα
္αုαာαါαဲ့ Template α‘αြα္..
Main + margin + sidebar = outer
640px + 30px + 310px = 980px
Sidebar ႏွα
္αုαါαဲ့ Template α‘αြα္
left-sidebar + margin + main + margin + right-sidebar = outer
200px + 30px +520px + 30px + 200px = 980px
αါαုိαα္ေαာ့ Template αဲαα‘ေျααံαေαာααားαုိ αားαα္ေαာα္αΏαီαုိααα္αါαα္။ α‘αု αိαိαုိααဲα Template width ေαြαုိ αုိα‘α္ααုိျαα္αΎαα့္αΎααေα‘ာα္..။ αူαα 980px αွိαဲ့ Sidebar (α)αုαါ Template αုိ 1200px α‘ျαα
္ ျαα္αΎαα့္αါαα္..။
αိαိαုိααဲααေαာ့αွာ sign in αုα္αΏαီး Design ေα‘ာα္α Edit HTML αုိαြားαါ။ αုံးα
ံα‘αုိα္း Download Full Template αုα္αΏαီး αိαိαုိααဲα αေαာ့αုိ backup αုα္αားαုိα္αါ။
Ctrl + F αဲα “#header-wrapper”, “#outer-wrapper”, “#main-wrapper”, and “#footer” αုိαဲ့ code ေαြαုိαွာαါ..
#header-wrapper {
width:980px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
#outer-wrapper {
width: 980px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}
#main-wrapper {
width: 520px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#right-sidebar-wrapper {
width: 200px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#left-sidebar-wrapper {
width: 200px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#footer {
width:980px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}
980px αွိαဲ့ Template αုိ 1200px α‘αိα်ဲααွာ ျαα
္αဲ့α‘αြα္ α‘ေααα code ေαြαဲα header-wrapper, outer-wrapper, footer αုိααဲα width ေαြαုိ 1200px αုိαျαα္αုိα္αါ့αα္။
outer-wrapper αဲα width αာ 1200px ျαα
္αြားαΏαီးျαα
္αဲ့α‘αြα္ main-wrapper αဲα sidebar (2)αုိααဲα width α
ုα
ုေαါα္းαုိαα္း 1200px ျαα
္ေα‘ာα္ ျαα္ေαးααါ့αα္။ sidebar ေαြαဲα width αာ αိαိαေαာ့αဲα αုိα‘α္α်α္αဲα αုိα္αီαΏαီးαားαုိαα္ေαာ့ ျαα္α
αာααုိαါαူး။ α‘αα္၍ ααုိα္αူးαုိαα္ေαာ့ ေျαာα္းေαးႏုိα္αါαα္။ αူα sidebar αဲα 200px αုိ 220px α‘αိ္α်ဲαα်α္αα္ αုိαါα
ုိα ။ αါαုိαα္ 1200 αဲα ေα margin (α)αုα‘αြα္ 60 (30px + 30px) αုိαα္αΏαီး ေα‘ာα္αါα‘αုိα္းေျαာα္းေαးααါαα္။ αါαွαာ α
ုα
ုေαါα္း 1200 px ျαα
္αါαိα့္αα္။
main-wrapper=700px
left-sidebar=220px
right-sidebar =220px
α‘ားαုံး ေျαာα္းαΏαီးαြားαα္ေαာ့ save ααုα္ေαးαဲ preview α‘αα္αΎαα့္αါ။ α‘αα္ေျααα္αုိαွαာ Save αုα္αါ။
Template α်ဲαျαα္း/α်ံဳαျαα္းα‘αြα္αေαာ့ αီေαာα္αုိαα္ α‘αα္းαα္ α‘ေαာα္α‘αူျαα
္αΏαီαုိα αူααါαα္။ ααွα္းαα္းαဲ့α‘α်α္α‘αα္α်ားαွိαα္αα္း ေαြးေႏြးေαးျαα္းႏုိα္αΎααါαα္။ αα
္αα္α
αα္း αီαုိαα
္ေαးαဲα αα္α
α္ေααဲ့ αိαိαုိααေαာ့ header banner αုံေαးαုိ αိαိαုိαα
ိα္ααိဳα္ αုံေαးေαြαဲα α‘α
ားαုိးαဲ့α‘ေαΎαာα္းαုိ ေျαာα်α္αါαα္။ α‘α်ိဳαေαာ αေαာ့ေαြαွာ Header Banner αုံေαြ α‘α်ိဳးαα်αာαုိ ေαြαေαααါαα္။ αာေαΎαာα့္αဲαုိေαာ့ αိαိαေαာ့ Header αဲα width αဲα αိαိα‘α
ားαြα္းαα့္ banner αုံαဲα width αုိα ααုိα္αီαာေαΎαာα့္αဲျαα
္αါαα္။ αါေαΎαာα့္ αိαိαေαာ့αဲα Header width α 1200px αုိαα္ αိαိα‘α
ားαြα္းαα့္/α‘αုံးျαဳαုိαဲ့ Header image αဲα width αုိαα္း 1200px ျαα
္ေα‘ာα္ photoshop αုိ image editor αα
္αုαုαုိα‘αုံးျαဳႏုိα္αΎααါαα္။ α‘ားαုံးα‘αα္ေျα ေα်ာ္αႊα္α်α္းေျα့αΎααါေα
αα္α်ာ.......။
Guest post by - IT-Travellerေα‘ာα္ေα‘ာα္(ααα
) αဲα αေαာ့ααီးαα္ေαးα‘ား α‘ားေαးေααΎααဲ့α‘αြα္ ေα်းαဴးα‘αူးαα္αါαα္.. αုα္αျαα္αွဳα‘ေααဲα fb like ေαးေαာ့ αုα္ေαးαဲ့αΎααါေαာ္.. αα္α
ြα္းααွ် ေαြα αွိααွ်ေαးေαြαို ျαα္αα္ αွ်ေαေααါ့αα္...။ α‘αα္αေျααာα်ားαွိαဲ့αါα...cbox αွာ ေျαာαဲ့αΎααါေαာ္..
αေαာ့ααီးαα္ αိုα္αိုα္ေαာ ေααာေαးα်ားαိုαာαα္αΎααါ။
![[IMG]](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_ux5P2TqNlZMyOn2nkKcFTPjn3Lb0jzM6A-dp3ahU04hzKvi2bY0DN4HP5m43KsIP242CUI4Wb0shjxHeqA85ZhZNkcfjAztR47BNlF=s0-d)
![[IMG]](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_v-BQaFIVLpu2m_ViPOwVJzNP-sLVxuxvWmaP9aLfW8lByHn6OkG2GENAwYs0Yczm1r3GaL24gef-oDlFUWORJmZDJB5DwXLhdwAVc13OvSLB2xBXndA5uz8tMaGGYPiw=s0-d)
