การกำหนด Layout ของเพจ
1.เนื่องจากเว็บมันแบ่งกรอบออกเป็น 3 ส่วน คือ ซ้าย ตรงกลาง และ ขวา ถ้าผมใช้ div แต่ละส่วนมันจะมีความสูงเป็นอิสระต่อกัน ซึ่งผมต้องการให้ทั้ง 3 ส่วน สูงเท่ากันเสมอ (ไม่รู้วิธีกำหนด) ทำให้ผมต้องกลับมาใช้ตาราง 1 แถว 3 คอลั่มน์ แทน
2.ตาราง จะทำให้เว็บต้องรอโหลดเนื้อหาภายในตารางให้สมบูรณ์ก่อนถึงจะแสดงผล ซึ่งเป็นข้อดีที่ผมต้องการ เนื่องจากเว็บผมเป็น AJAX ดังนั้นข้อมูลที่ผมต้องรอโหลดในเบื้องต้นจะไม่มากนัก ทำให้ผมสามารถแสดงผลได้สำเร็จภายในคราวเดียว (ผมไม่ค่อยชอบเว็บที่ค่อยๆโหลดมาแสดงทีละนิด เนื่องจากมันทำให้ดูเหมือนว่า เว็บช้า)
<table id="maintable" cellpadding="0" cellspacing="0"><tr>
<td id="ltd"></td>
<td id="mtd">
<table id="subtable" cellpadding="0" cellspacing="0">
<!--Logo-->
<tr><td id="logo"><img src="../images/logo.gif" alt="g-O-r-a-g-o-d.com" /></td></tr>
<!--เนื้อหาของเพจ-->
<tr><td id="content">
content
</td></tr>
<!--ส่วนล่าง-->
<tr><td id="footer">
footer
</td></tr>
</table>
</td>
<td id="rtd"></td>
</tr></table>ลองมาดูการกำหนด CSS ให้กับส่วนต่างๆกัน
* { /* รีเซ็ต padding และ margin ทั้งหมด */
padding:0;
margin:0;
}
body { /* กำหนดพื้นหลังให้กับเว็บเพจ */
background-color:white;
background-image:url(../images/f_bkg.jpg);
}
#maintable { /* กำหนดความกว้างของตารางหลักให้เต็มเพจเสมอ */
width:100%;
}
#subtable { /* กำหนดความกว้างของตารางรองให้เต็มเพจเสมอเช่นกัน */
width:100%;
}
#logo { /* พื้นที่แสดง logo */
background-image:url(../images/logo_bkg.gif); /* กำหนดพื้นหลังให้เป็นรูปส่วนที่ซ้ำกัน(ภาพพื้นของ logo) */
text-align:left; /* เพื่อให้ logo ชิดซ้ายเสมอ */
}
#ltd { /* พื้นที่ขอบด้านซ้ายมือที่เป็นเงา สีดำ */
background-image:url(../images/l.gif);
width:12px;
}
#mtd { /* พื้นที่ตรงกลางสำหรับเนื้อหา */
width:auto;
}
#rtd { /* พื้นที่ขอบด้านขวามือที่เป็นเงา สีดำ */
background-image:url(../images/r.gif);
width:12px;
}
#footer { /* ส่วน footer */
background-image:url(../images/bottom.gif);
background-repeat:repeat-x;
text-align:center;
}ทำไมผมต้องใช้ตารางถึง 2 ชั้น ตารางแรก (maintable) จะประกอบด้วย ตาราง 1 แถว 3 คอลัมน์ คือ เงาด้านซ้าย เงาด้านขวา และพื้นที่ตรงกลาง ซึ้งพื้นที่ตรงกลางนี้จะมีตารางอีกตารางอยู่ภายใน (subtable) ซึ่งตารางนี้จะแบ่งเป็น 1 คอลัมน์ 3 แถว ครับ โดยแถวแรกจะเป็น logo แถว 2 จะเป็นเนื้อหา และ แถว 3 เป็น footer ครับ
ลองดูเทคนิคที่ผมใช้กับ logo ครับ ผมกำหนดให้พื้นที่ส่วนนั้นมีพื้นหลังเป็นรูปพื้นหลังของ logo ครับ แล้วผมก็ทำ logo แค่ส่วนที่พอดีกับตัวอักษร(ดูจาก logo หน้าเว็บเลย) โดยที่ไม่ต้องทำให้มีขนาดใหญ่ตามจอภาพ แล้วก็จัดให้ logo ชิดซ้ายเสมอ ทีนี้ไม่ว่า จะมีใครเข้าเว็บด้วยขนาดจอเท่าไรก็ตาม ทุกคนจะเห็นว่า logo เต็มจอเสมอ
ตัวอย่าง