CSS Page Layout

CSS Page Layout មានពីរប្រភេទគឺ absolute positioning និងfloat។ Absolute Positioning គឺជាការដាក់ element មួយ

អោយនៅទីតាំងណាមួយនៃ Page តាមរយៈការកំណត់ចំនួន pixel។ 

Type of Web Page Layout

Fixed Width 

គឺជាការកំណត់នូវទទឹងជាក់លាក់របស់ Page ទោះបីជាទំហំរបស់ browser ប្រែប្រួលយ៉ាងណា ក៏អ្វីៗដែលមាន

ក្នុង Page មិនរីករួមទៅតាមការប្រែប្រួលនោះទេ។ 

ចំពោះទំហំ Screen 800x600 គេតែងជ្រើសយកទំហំរបស់ Page 760px ដើម្បីបន្សល់កន្លែងទំនេរខ្លះសំរាប់ scroll bar និងផ្នែកផ្សេងៗនៃ Browser 

ចំពោះទំហំ Screen 1024x768 គេតែងជ្រើសយក 950px។

Liquid 

គឺជាការរចនាអោយប្រែប្រួលទៅតាមទំហំរបស់ browser វានឹងចង្រ្អៀតឬទូលាយអាស្រ័យទៅតាមទំហំរបស់

browser។

Elastic 

គឺជាការរចនាដែលកំណត់ទំហំរបស់ page ទៅតាមទំហំរបស់អក្សរដោយប្រើប្រាស់em សំរាប់កំណត់។ ដូច្នេះ

ពេលដែល user ពង្រីកអក្សរនៅលើ browser នោះទំហំ container នឹងប្រែប្រួលទៅតាម ទំហំរបស់អក្សរបានយ៉ាងល្អ។

Step to Create Page Layout

១»ដាក់រាល់ Page Content ក្នុង wrapper <div>

បង្កើតនូវ container សំរាប់ការកំណត់ទទឹងជាក់លាក់មួយ សំរាប់ដាក់រាល់ cotent នៅលើ page

 និងផ្តល់ភាពងាយស្រួល មិនចំបាច់កំណត់ទំហំ banner, column, footer។

២. កំណត់ទទឹងនៃ wrapper <div>

បង្កើត style សំរាប់ wrapper <div> ដើម្បីកំណត់ទទឹងរបស់វា

 ៣. ដាក់ column នីមួយៗក្នុង <div> tag ដោយកំណត់ id និង class attribute:

៤. កំណត់Float នៃ divs សំរាប់ column នីមួយៗ

ដាក់ left sidebar និង main content ក្នុង div មួយ ហើយ float left, ក្នុង div នោះ។ div របស់ left sidebar ត្រូវ float left និង main content ត្រូវ float right។ ចំនែកឯ right side bar ត្រូវ float right.

 ៥. កំណត់ width នៃ column នីមួយៗ

ជាទូទៅយើងគួរតែកំណត់ width នៃ float element។ ដោយពឹងផ្អែកលើការរចនារបស់អ្នក អ្នកអាចបន្ថែម padding,

margin និង border។

ចាំថា width សរុបរបស់ column នីមួយៗគឺបានមកពីការបូកបញ្ចូលគ្នារវាង left and right margin, padding, និង

border 

៦. បន្ថែម left margin ទៅកាន់ main column

៧.  កំណត់ left margin របស់ left_sidebar : -587px;