ผมจะยกตัวอย่าง HTML จากแม่แบบ minima (แม่แบบดั้งเดิมของ blogger)อย่างคร่าวๆนะครับ
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- strict.dtd">
<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<b:include data='blog' name='all-head- content'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[/*
#body {
............
............
............
}
#outer-wrapper {
............
............
............
}
#header-wrapper {
............
............
............
}
#main-wrapper {
............
............
............
}
#sidebar-wrapper {
............
............
............
}
#footer-wrapper {
............
............
............
}
]]></b:skin>
</head>
<body>
<div id='outer-wrapper'>
</div>
<div id='header-wrapper'>
</div>
<div id='content-wrapper'>
</div>
<div id='main-wrapper'>
</div>
<div id='sidebar-wrapper'>
</div>
<div id='footer-wrapper'>
</div>
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- strict.dtd">
<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<b:include data='blog' name='all-head- content'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[/*
#body {
............
............
............
}
#outer-wrapper {
............
............
............
}
#header-wrapper {
............
............
............
}
#main-wrapper {
............
............
............
}
#sidebar-wrapper {
............
............
............
}
#footer-wrapper {
............
............
............
}
]]></b:skin>
</head>
<body>
<div id='outer-wrapper'>
</div>
<div id='header-wrapper'>
</div>
<div id='content-wrapper'>
</div>
<div id='main-wrapper'>
</div>
<div id='sidebar-wrapper'>
</div>
<div id='footer-wrapper'>
</div>
</div>
</body>
</html>
อธิบายโค้ดทีละส่วน
- #body เป็นส่วนรอบนอกหน้าเว็บครับ ตัวอย่าง
#body {
background:#FFFFFF;
margin:0;
............
............
............
}
background:#FFFFFF;
margin:0;
............
............
............
}
- #outer-wrapper เป็นโค้ดที่กำหนดแม่แบบทั้งหมด
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
............
............
............
}
width: 660px;
margin:0 auto;
padding:10px;
............
............
............
}
- #header-wrapper คือโค้ดที่กำหนดส่วนหัว
#header-wrapper {
width:660px;
margin:0 auto 10px;
............
............
............
}
width:660px;
margin:0 auto 10px;
............
............
............
}
ถึงตรงนี้แล้วจากโค้ดของแม่แบบนี้จะสังเกตุได้ว่าขนาดของ outer และ header จะมีขนาดเท่ากันคือ 660px; (width:660px; คือ กว้าง 660 พิกเซลนั่นเอง)
ต่อไปอยากให้สังเกตุขนาดของข้อ 4 และ ข้อ 5 ครับ
- #main-wrapper คือโค้ดที่กำหนดพื้นของ พื้นที่บทความ และกล่องแสดงความคิดเห็น ตรงนี้จะต้องมีขนาดเล็กกว่า outer-wrapper เพราะต้องเหลือพื้นที่ให้ไซด์บาร์ด้วยครับ
#main-wrapper {
width: 410px;
float: left;
............
............
............
}
width: 410px;
float: left;
............
............
............
}
คำว่า float ก็คือตัวบอกตำแหน่งครับ ข้างบนนี้คือ float: left; คือด้านซ้าย หรือจะใช้คำว่า $startSide; ก็ได้ มันเหมือนกันครับ แต่ถ้าหากอยากให้มันอยู่ด้านขวามือก็เปลี่ยนเป็น Right; หรือ $endSide (อย่าลืมต้องเปลี่ยน float ของ ไซต์บาร์ด้วยครับ)
- #sidebar-wrapper คือโค้ดที่กำหนดไซต์บาร์ ไซต์บาร์บางแม่แบบจะมีมากกว่าหนึ่งอาจจะอยู่ด้านซ้ายและด้านขวาอีกอันหนึ่ง แต่ถ้ามีอันเดียวส่วนใหญ่จะอยู่ด้านขวามือ
#sidebar-wrapper {
width: 220px;
float: Right;
............
............
............
}
width: 220px;
float: Right;
............
............
............
}
จะเห็นได้ว่าขนาดของ main (ในข้อ 4) คือ 410px และขนาดของ sidebar คือ 220px เมื่อนำมารวมกันแล้ว เท่ากับ 630 (410+220=630px) ทั้งๆที่ขนาดของ outer (ข้อ 2) คือ 660px
อีก 30px มันหายไปไหน??
คำตอบคือมันเป็นค่าความกว้าง ของ margin และ padding ครับ และในบางแม่แบบ จะมี Border อีกด้วย
ดูเรื่อง margin padding และ Border เพิ่มเติม ที่นี่
- #footer-wrapper คือโค้ดที่กำหนดส่วนล่างสุดของหน้าบล็อก หรือเรียกกันว่า footer นั่นเอง
#footer-wrapper {
width:660px;
margin:0 auto;
padding-top:15px;
............
............
............
}
width:660px;
margin:0 auto;
padding-top:15px;
............
............
............
}
และสุดท้ายคือ
- <body> เป็นโค้ดที่ครอบคลุมโค้ดของส่วนต่างๆของบล็อก ครอบคลุดโค้ดที่ผมยกตัวอย่างมาด้านบนทั้งหมดเลยครับ
<bodya>
<div id='outer-wrapper'a>
</diva>
<div id='header-wrapper'a>
</diva>
<div id='content-wrapper'a>
</diva>
<div id='main-wrapper'a>
</diva>
<div id='sidebar-wrapper'a>
</diva>
<div id='footer-wrapper'a>
</diva>
</diva>
<div id='outer-wrapper'a>
</diva>
<div id='header-wrapper'a>
</diva>
<div id='content-wrapper'a>
</diva>
<div id='main-wrapper'a>
</diva>
<div id='sidebar-wrapper'a>
</diva>
<div id='footer-wrapper'a>
</diva>
</diva>
ขอบคุณครับ เหมาะสำหรับผู้เรียนรู้ด้วยตัวเองเป็นอย่างดี
thanks
อยากได้ template แบบนี้จังเลย