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