Grid 960 គឺជា CSS Framework ដែលអ្នករចនាវែបសាអាជីព ប្រើប្រាស់ដើម្បីបង្កើត layout វែបសាយ។ ថ្ងៃនេះ ខ្ញុំសូមបង្ហាញពីការប្រើ Grid 960 ដើម្បីបង្កើត Layout សាមញ្ញមួយ។
នេះ គឺជា គ្រោង នៃ layout ដែល ខ្ញុំ នឹង បង្កើត ខាង ក្រោមនេះ
យើងអាចរចនា layout របស់វែបសាយដែលមានបណ្ដោយ 960px រួមទាំងចន្លោះទទេសងខាង(margin left and righ 10px) 10pxៗ យើងមានជម្រើសបីក្នុងបង្កើត layout នេះ គឺជ្រើសយក grid 12 columns មានប្រវែង layout សរុប 940px ហើយ column និមួយៗមានប្រវែង 60px រួមទាំងចន្លោះទទេសងខាង 10 px។ តែបើយើងយក 16 columnsមានប្រវែង layout សរុប 940px ហើយ column និមួយៗរបស់វាមានប្រវែង 40px និង ចន្លោះទទេសងខាង 10px។ ចំណែកជម្រើសចុងក្រោយគឺ 24 columns មានប្រវែង layout សរុប 950px ហើយ column និមួយមានប្រវែង 30px និងចន្លោះទទេសងខាង 5px ជម្រើសចុងក្រោយនេះទើបនឹងបញ្ចូលក្នុង Grid 960។
ជាដំបូងត្រូវទាញយក Grid 960 ជាមុនសិនសូមទាញយកពីវែបសាយនេះ http://960.gs/ ។ បន្ទាប់ពីទាញយករួចហើយសូមពន្លាឯកសារបង្រួមនោះ បន្ទាប់ពីពន្លាអ្នកនឹងឃើញ Folders និង files ជាច្រើននៅក្នុងនោះ។
សូមចូលទៅកាន់ ថត(folder) code > css រួចហើយសូមចម្លង (copy) reset.css និង 960.css យកទៅដាក់ក្នុង Project ថត css ដែលត្រូវ Grid 960។
របៀបដាក់បញ្ចូល Style របស់ Grid 960
<link rel="stylesheet" href="css/reset.css" /> <link rel="stylesheet" href="css/960.css" />
កូដខាងលើត្រូវដាក់នៅចន្លោះ tagហើយដាក់ reset.css មុន 960.css ដើម្បីអោយធ្វើការ reset browser ជាមុនសិន។
ចំណាំ៖ ប្រសិនអ្នកចង់ប្រើ Grid 24 columns ត្រូវប្រើកូដខាងក្រោម ព្រោះ 960.css មានតែ Grid 12 columns និង Grid 16 columns។
<link rel="stylesheet" href="css/reset.css" /> <link rel="stylesheet" href="css/960_24_col.css" />
របៀបប្រើប្រាស់
ក្នុងការប្រើប្រាស់អ្នកត្រូវជ្រើសរើសយក ប្រភេទ Grid ណាមួយមកប្រើក្នុងចំណោម Grid ទាំងបីប្រភេទនេះ 12 columns, 16 columns និង 24 column។ បើអ្នកសម្រេចប្រើ Grid 12 columnsអញ្ចឹងកូដ ត្រូវដាក់នៅចន្លោះ class ” container_12 ” ចំនែក grid 16 columns និង grid 24 columns គឺដូចគ្នាផងដែរ ត្រូវដាក់នៅចន្លោះ class “container_16″ សម្រាប់ grid 16 columns និង “container_24″ សម្រាប់ grid 24 columns។
ឧទាហរណ៍៖ Grid 12 columns
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Grid 960 CSS Framework</title>
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/960.css" />
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<div id="wrapper" class="container_12">
<div id="header" class="grid_12">
<h1><a href="a">LOGO</h1></a>
<ul id="top_menu">
<li><a href="#">HOME</a></li>
<li><a href="#">SERVICE</a></li>
<li><a href="#">CONTACT US</a></li>
</ul>
</div>
<div class="clear"> </div><!---->
<div class="grid_12">
<ul id="nav">
<li><a href="#">Local News</a></li>
<li><a href="#">Global News</a></li>
<li><a href="#">Business</a></li>
<li><a href="#">Sport</a></li>
</ul>
</div>
<div class="clear"> </div>
<div id="main" class="grid_9">
<div id="slidshow">slidshow
</div>
<div id="sub_main">
<div id="sub_left">
sub left
</div>
<div id="sub_right">
sub right
</div>
</div>
</div><!--main -->
<div id="sidebar" class="grid_3">
sidebar
</div>
<div> </div>
<div id="footer" class="grid_12">
<p>Copyright © 2011 by <a href="http://kooms.info">Kooms.info</a></p>
</div>
</div><!--container12-->
</body>
</html>
<div class=”container_12″ id=”wrapper”> គឺជា container នៃ layout ទាំងមូលរបស់ ទំព័រមួយនេះ។ នៅក្នុង container_12 យើងអាចប្រើ class .grid_1, .grid_2, grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11 និង .grid_12 ឬធ្វើយ៉ាងណាអោយ columns របស់យើងបូកចេញ ១២។ ឧទាហរណ៍៖ ខ្ញុំប្រើ grid_8 អញ្ចឹង grid បន្ទាប់ទៀតគឺ grid_4។ ពេលញ្ចប់មួយ row របស់ Grid យើងត្រូវ clear វាម្ដងដោយប្រើកូដនេះ <div class=”clear”></div>។
សូមមើលគំរួ ទាញយក និង ទាញយកទីនេះ មើលឧទាហរណ៍
