ការសិក្សាពីរបៀបបង្កើត Layout ក្នុង CSS

មាតិកា

សេចក្តីផ្តើម
គោលបំណង
តម្រូវការ
ការប្រើប្រាស់ Bootstrap
របៀបបង្កើត Grid Layout
ឯកសារយោង

1. សេចក្តីផ្តើម

CSS មកពីពាក្យថា Cascading Style Sheets។ វាមានសារៈសំខាន់ក្នុងការរចនាគេហៈទំព័រ ធ្វើអោយវេបសាយរបស់យើង មានសោភ័ណ្ឌភាពស្រស់ស្អាតនិងគួរអោយទាក់ទាញ។ គួរកត់សម្គាល់ផងដែរ លោកអ្នកអាចធ្វើការបង្កើត website template តាមរបៀបផ្សេងៗពីគ្នា ដូចជាប្រើប្រាស់ CSS code ទាំងស្រុង ឬក៏ប្រើប្រាស់ HTML យកមក design ហើយនិងប្រើប្រាស់ Bootstrap ដែលជាការពេញនិយមសម្រាប់ធ្វើវេបសាយលក្ខណៈ responsive ទៅតាមdevices ផ្សេងៗជាដើម។ ក្នុង Tutorial នេះដែរ ខ្ញុំនឹងធ្វើការបង្កើត Layout ឬក៏ Template ដោយប្រើប្រាស់នូវ Bootstrap ជាមួយ CSS យកបង្ហាញ។

2. គោលបំណង

ក្រោយពីសិក្សាតាម Tutorial នេះ លោកអ្នកនឹងយល់អំពី

មូលដ្ឋានគ្រឹះក្នុងការប្រើប្រាស់ css
មូលដ្ឋានគ្រឹះក្នុងការប្រើប្រាស់ bootstrap
យល់ដឹងអំពីការប្រើប្រាស់ CDN របស់ Bootstrap រួមនិងការ download package របស់វា
ចេះពីរបៀប copy និង paste class នៃ bootstrap ពីវេបសាយរបស់ bootstrap ដោយមិនចាំបាច់ចាំកូដ
របៀប customize layout ដោយខ្លួនឯង

3. តម្រូវការ

ដើម្បីអាចអនុវត្តន៍ បានយើងត្រូវមាន

Text Editor (IDE) សម្រាប់សរសេរកូដ ដូចជា (php storm, sublime, notepad, notepad++, eclipse, Microsoft Visual Studio, …)
ក្នុង Tutorial នេះ សូមលើកយក Sublime មកសរសេរកូដ

4. ការប្រើប្រាស់ Bootstrap

ដើម្បីអាចប្រើប្រាស់ class របស់ Bootstrap បាន យើងត្រូវមាន package របស់វាជាមុនសិន។ ចំពោះរបៀបទាញយក package មកប្រើ លោកអ្នកអាចមានវិធី២យ៉ាង៖

វិធីទី១៖ ការប្រើប្រាស់ CDN របស់ Bootstrap ដោយផ្ទាល់តែម្តង
- ចូលទៅកាន់វេបសាយ https://getbootstrap.com/docs/1/getting-started/download/
- Copy និង paste វាចូលទៅក្នុង HTML កូដរបស់យើង
- ប្រសិនបើយើងត្រូវការប្រើប្រាស់ jquery ឬក៏ javascript សូមធ្វើការ copy កូដខាងក្រោម
- ចំណាំ៖ រាល់ពេលដែលលោកអ្នកប្រើប្រាស់ CDN សូមត្រូវ connect ជាមួយ internet
- ក្រោយពីយើងបាន add CDN រួចហើយ យើងនឹងទទួលបានដូចរូប
វិធីទី២៖ ការ download package របស់ bootstrap យកមកប្រើ
- ចូលទៅកាន់វេបសាយ https://getbootstrap.com/docs/1/getting-started/download/
- Click លើប៊ូតុង Download
- សូមធ្វើការសរសេរកូដដើម្បី link Package ដែលទើបតែ download រួច

5. របៀបបង្កើត Grid Layout

ក្នុងនោះដែរ ខ្ញុំនឹងបង្ហាញពីរបៀបបង្កើត layout ដូចរូបខាងក្រោម៖

ខាងក្រោមនេះនឹងបកស្រាយពីរបៀបសេរសេរកូដនិង copy កូដ Bootstrap

សូមធ្វើការបើកវេបសាយ https://www.w3schools.com/bootstrap/default.asp ជាមុនសិន ដើម្បីធ្វើការ copy យកកូដ

ជំហ៊ានទី១៖ copy CDN ដាក់ក្នុង <head>…</head>
ជំហ៊ានទី២៖ add code សម្រាប់ menu
- ចុចលើ BS Navbar
- ជ្រើសរើសប្រភេទ menuដែលអ្នកត្រូវការ
- សូមធ្វើcode សម្រាប់ Menu ដូចរូប
  - Header menu
ជំហ៊ានទី៣៖ add code សម្រាប់ Left Navbar
- Left Navbar
ជំហ៊ានទី៤៖ add code សម្រាប់ Right Navbar
- Right Navbar
ជំហ៊ានទី៥៖ add code សម្រាប់ Content
- Content
ជំហ៊ានទី៦៖ add code សម្រាប់ Footer
- Footer