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