[ตอนที่ 6] เวิร์คช้อปการสร้างเว็บไซต์อย่างง่ายด้วยคชสาร

ตอนนี้จะเป็นตอนสุดท้ายของเวิร์คช้อปนี้แล้วนะครับ ซึ่งจากที่ทำมามันก็เป็นเว็บไซต์ที่ครบถ้วนแล้ว ขั้นตอนสุดท้ายนี่ก็จะป็นการตกแต่งให้เว็บไซต์ของเราสวยงามขึ้น
  • ก่อนที่เราจะตกแต่งเว็บไซต์ให้สวยงาม เราจะทำการแก้ไข HTML เพื่อให้สามารถแสดงผลโครงร่างเป็นเว็บไซต์ก่อน ซึ่งการกำหนดค่า class ต่างๆตามตัวอย่างนี้เป็นการกำหนดค่าตามคำสั่งของ GCSS
    <!DOCTYPE html>
    <html>
      <head>
        <title>{TITLE}</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="{WEBURL}js/gajax.js"></script>
        <script src="{WEBURL}js/ddmenu.js"></script>
        <link href="{WEBURL}skin/default/style.css" rel="stylesheet">
      </head>
      <body class="responsive">
        <div class="gcss-wrapper">
          <header class="header">
            <h1>{WEBTITLE}</h1>
            <nav id=topmenu class="topmenu responsive"><ul>{TOPMENU}</ul></nav>
          </header>
          <main class="content">{CONTENT}</main>
          <footer class="footer">
            <p>Copyright @ kotchasan</p>
          </footer>
        </div>
        <script>
          new GDDMenu('topmenu');
        </script>

      </body>
    </html>
  • เสร็จแล้วให้สร้างไฟล์ CSS ของ template โดยทำการสร้างไฟล์ skin/default/style.css โดยที่ไฟล์นี้เราจะใช้เขียนคำสั่ง CSS เพื่อใช้กับ Template นี้เท่านั้น (ผมไม่แนะนำให้แก้ไข GCSS โดยตรงเนื่องจากคำสั่งของ GCSS อาจจะใช้ร่วมกับส่วนอื่นๆด้วย) สร้างเสร็จแล้วให้ใส่โค้ดตามนี้
    header {
      background-color: #03A9F4;
      margin-bottom: 10px;
    }
    header h1 {
      padding: 20px 10px;
      color: #FFF;
      text-shadow: -1px -1px 0 rgba(0,0,0,0.2);
    }
    .topmenu {
      background-color: rgba(0,0,0,0.04);
      padding: 5px;
    }
    .topmenu > ul > li > a {
      color: #FFF;
    }
    .topmenu > ul > li.select > a {
      background-color: rgba(0,0,0,0.1);
    }
    .topmenu > ul > li:hover > a {
      background-color: rgba(0,0,0,0.2);
    }
    .footer {
      border-top: 3px solid #DDD;
      background-color: #EEE;
      text-align: center;
      margin-top: 10px;
      padding: 20px 10px;
      color: #666;
    }
  • สุดท้ายให้เราเพิ่มคำสั่ง เรียกใช้ style.css ลงใน index.html ซึ่งวิธีใส่จะเหมือนการแทรก Javascript นะครับ (ผมได้แสดงให้เห็นถึงวิธีการใส่ CSS และ Javascript ทั้งสองแบบ ซึ่งในตอนใช้จริงให้เลือกวิธีที่เหมาะสมด้วยตัวเอง)
เสร็จแล้วลองเรียกหน้าเว็บอีกครั้ง ดูผลงาน
ปิดท้ายด้วยคลิปบรรยายเวอร์คช้อปนี้อีกครั้งนะครับ

เรื่องที่เกี่ยวข้อง

^