Categories
General

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

មាតិកា

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

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 យកមកប្រើ

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

យើងនឹងទទួលបាននូវកូដទាំងស្រុងដូចខាងក្រោម

6. ឯកសារយោង

By sysomeho

Ho Sysome obtains B.S. degree in Computer Science from Phnom Penh Internation University (PPIU) in 2013 and currently studying Master of Science in IT (MSIT) at Asia Euro University (AEU). He worked as an IT Officer at Microfinance Institute and Bank in Phnom Penh. He is familar in programming language such as VB.NET, Java (Java2EE, Spring), Codeigniter, Laravel, mysql, sql server and so on. He enjoys sharing knowledges, learns from other, and develop himself.
Find him on Facebook: Spy Ro, Linkedin: Sysome HO.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.