[ตอนที่ 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 ทั้งสองแบบ ซึ่งในตอนใช้จริงให้เลือกวิธีที่เหมาะสมด้วยตัวเอง)
เสร็จแล้วลองเรียกหน้าเว็บอีกครั้ง ดูผลงาน
ปิดท้ายด้วยคลิปบรรยายเวอร์คช้อปนี้อีกครั้งนะครับ
0SHAREFacebookLINE it!

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

^