การจัด Layout ด้วย CSS (Div)
แบ่งเป็น 4 แบบ คือ
1. Fixed Layout
จะกำหนดขนาดความกว้าง และตำแหน่งของส่วนต่างๆ เป็น pixel ทำให้กำหนดขนาด และตำแหน่งของส่วนต่างๆ ได้ตามต้องการ ไม่ผิดเพี้ยนไปตามขนาดหน้าจอ และเมื่อย่อขยายหน้าต่างเว็บเบราเซอร์ (IE, Firefox) แล้ว ตำแหน่งของส่วนต่างๆในหน้าเว็บจะยังคงเดิม ถ้าเราย่อขนาดเบราเซอร์ลงจะเกิดเป็น scrollbar เพื่อเลื่อนดูเนื้อหาที่มองไม่เห็น แต่มีข้อเสียคือไม่สามารถใช้พื้นที่หน้าจอได้อย่างเต็มที่
จะกำหนดขนาดความกว้าง และตำแหน่งของส่วนต่างๆ เป็น pixel ทำให้กำหนดขนาด และตำแหน่งของส่วนต่างๆ ได้ตามต้องการ ไม่ผิดเพี้ยนไปตามขนาดหน้าจอ และเมื่อย่อขยายหน้าต่างเว็บเบราเซอร์ (IE, Firefox) แล้ว ตำแหน่งของส่วนต่างๆในหน้าเว็บจะยังคงเดิม ถ้าเราย่อขนาดเบราเซอร์ลงจะเกิดเป็น scrollbar เพื่อเลื่อนดูเนื้อหาที่มองไม่เห็น แต่มีข้อเสียคือไม่สามารถใช้พื้นที่หน้าจอได้อย่างเต็มที่
เนื่องจากผู้ใช้แต่ละคนมีการกำหนดความละเอียดของหน้าจอแตกต่างกันไป เช่น 800x600, 1024x780 (มีผู้ใช้มากที่สุด), 1280x800, 1280x960, 1280x1024 pixel
เว็บส่วนใหญ่จะออกแบบเพื่อรองรับความละเอียดหน้าจอที่ 800x600 เป็นหลัก โดยกำหนดความกว้างของเนื้อหาอยู่ที่ 780 pixel และจะจัดวางเนื้อหาอยู่กึ่งกลางหน้าจอ ทำให้ ผู้ใช้งานที่ความละเอียดหน้าจอ 800x600 จะเห็นหน้าเว็บเพจเต็มพอดี ส่วนผู้ที่ใช้ความละเอียดหน้าจอ 1024x780 จะเห็นเนื้อหาอยู่กึ่งกลางหน้าจอ พื้นที่ด้านข้างที่เหลือจะเป็นพื้นหลังที่เป็นสีหรือรูปภาพ
แต่ถ้าเราออกแบบให้ผู้ที่ใช้ความละเอียดหน้าจอ 1024x780 มองเห็นหน้าเว็บเต็มพอดี เมื่อผู้ที่ใช้ความละเอียดหน้าจอ 800x600 ดูหน้าเว็บ หน้าเว็บจะเกินหน้าจอ เกิดเป็น scrollbar แนวนอน ต้องเลื่อนไปทางขวาจึงจะมองเนื้อหาทั้งหมดได้ แต่ปัจจุบัน (2009) ส่วนใหญ่มากกว่า 60% แล้วผู้ใช้จะใช้ความละเอียดหน้าจอที่ 1024x780
2. Liquid Layout
จะกำหนดขนาดความกว้างของส่วนต่างๆ เป็นเปอร์เซ็นต์ เมื่อเราย่อหรือขยายขนาดของเว็บเบราเซอร์ ขนาดของส่วนต่างๆ จะย่อขยายตาม
จะกำหนดขนาดความกว้างของส่วนต่างๆ เป็นเปอร์เซ็นต์ เมื่อเราย่อหรือขยายขนาดของเว็บเบราเซอร์ ขนาดของส่วนต่างๆ จะย่อขยายตาม
ข้อดี คือ ทำให้ได้ใช้พื้นที่ในหน้าจอได้อย่างมีประสิทธิภาพ และทำให้แสดงผลบนอุปกรณ์อื่นๆ เช่น มือถือ ได้ดี
ข้อเสีย คือ การจัดวางองค์ประกอบต่างๆ นั้นทำได้ค่อนข้างยาก เพราะขนาดไม่แน่นอน
3. Elastic Layout
จะกำหนดขนาดของส่วนต่าง ๆ เป็น em ทำให้ส่วนต่างๆ ย่อหรือขยาย ตามการกำหนดค่า Text size ของเบราเซอร์
จะกำหนดขนาดของส่วนต่าง ๆ เป็น em ทำให้ส่วนต่างๆ ย่อหรือขยาย ตามการกำหนดค่า Text size ของเบราเซอร์
ข้อดี คือ เมื่อเพิ่มหรือลดขนาดของตัวอักษรแล้ว ยังสามารถคงรูปแบบการจัดวางส่วนต่างๆ ไว้ได้อย่างดี
ข้อเสีย คือ การจัดทำยุ่งยาก
4. Hybrid Layout
เป็นการใช้แบบต่างๆ มาผสมกัน เช่น Sidebar ด้านข้าง ทั้ง 2 ด้านเป็น Elastic Layout ส่วนเนื้อหาเป็น Liquid Layout เป็นต้น
เป็นการใช้แบบต่างๆ มาผสมกัน เช่น Sidebar ด้านข้าง ทั้ง 2 ด้านเป็น Elastic Layout ส่วนเนื้อหาเป็น Liquid Layout เป็นต้น
เมื่อเข้าใจเรื่องการจัดวาง Layout แบบต่างๆ แล้ว ทีนี้มาดูการเขียน code กันต่อค่ะ วิธีการไม่ยากแค่เพียงใช้โปรแกรม Dreamweaver เท่านั้น เวลาที่เรา New เอกสารใหม่ขึ้นมา จะมีให้เราเลือกว่าอยากจะได้ Layout แบบไหน จะแบ่งกี่คอลัมน์ ต้องการส่วน Header และ Footer หรือไม่ และเลือกได้ว่าจะให้ส่วน style sheet ฝังอยู่ในหน้าเอกสารนั้นเลย (Add to Head) หรือว่าแยกเป็นอีกไฟล์ต่างหาก (Create New File) หรือจะให้ใส่ style sheet รวมไปในไฟล์ style sheet ที่เรามีอยู่แล้ว (Link to Existing File) ก็ได้ค่ะ
ExampleFixed Layout
thrColFixHdr.cssbody {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #666666;
margin: 0;
padding: 0;
text-align: center;
color: #000000;
}
/* ส่วน Page Header */
.thrColFixHdr #header {
background: #DDDDDD;
padding: 0 10px 0 20px;
}
/* ส่วน Page Body ที่บรรจุเนื้อหา */
.thrColFixHdr #container {
width: 780px;
background: #FFFFFF;
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
border: 1px solid #000000;
text-align: left; /* this overrides the text-align: center on the body element. */
}
/* ส่วน คอลัมน์ด้านซ้าย */
.thrColFixHdr #sidebar1 {
float: left;
width: 150px;
background: #EBEBEB;
padding: 15px 10px 15px 20px;
}
/* ส่วน คอลัมน์ด้านขวา */
.thrColFixHdr #sidebar2 {
float: right;
width: 160px;
background: #EBEBEB;
padding: 15px 10px 15px 20px;
}
/* ส่วนเนื้อหา อยู่ระหว่าง sidebar */
.thrColFixHdr #mainContent {
margin: 0 200px;
padding: 0 10px;
}
/* ส่วน Page Footer */
.thrColFixHdr #footer {
padding: 0 10px 0 20px;
background:#DDDDDD;
}
.clearfloat {
clear:both;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="thrColFixHdr.css" rel="stylesheet" type="text/css">
</head>
<body class="thrColFixHdr">
<div id="container">
<div id="header">
<h1>Header</h1>
<!-- end #header --></div>
<div id="sidebar1">
<h3>Sidebar1 Content</h3>
<p>The background color on this div will only show for the length of the content. If you'd like a dividing line instead, place a border on the left side of the #mainContent div if it will always contain more content. </p>
<!-- end #sidebar1 --></div>
<div id="sidebar2">
<h3>Sidebar2 Content</h3>
<p>The background color on this div will only show for the length of the content. If you'd like a dividing line instead, place a border on the right side of the #mainContent div if it will always contain more content. </p>
<!-- end #sidebar2 --></div>
<div id="mainContent">
<h1> การจัด Layout </h1>
<p>ในหน้าเว็บเพจหนึ่งประกอบไปด้วยส่วนหัวเว็บ (Page Header), ส่วนเนื้อหา และการเชื่อมโยง (Page Body), และส่วนท้าย (Page Footer) จัดสรรพื้นที่ของหน้าเว็บเพจเพื่อแสดงส่วนประกอบเหล่านี้ ทำได้หลายรูปแบบ เช่น แบ่งแบบอิสระ แบ่งแบบ 2 คอลัมน์ และ 3 คอลัมน์ </p>
<p> ในการลงมือเขียนเว็บเพจ ปัจจุบันนิยมใช้ Div ในการจัด Layout มี 3 รูปแบบดังนี้</p>
<h2>1. Fixed Layout </h2>
<p>จะกำหนดขนาดความกว้าง และตำแหน่งของส่วนต่างๆ เป็น pixel ทำให้กำหนดขนาด และตำแหน่งของส่วนต่างๆ ได้ตามต้องการ ไม่ผิดเพี้ยนไปตามขนาดหน้าจอ และเมื่อย่อขยายหน้าต่างเว็บเบราเซอร์ (IE, Firefox) แล้ว ตำแหน่งของส่วนต่างๆในหน้าเว็บจะยังคงเดิม </p>
<h2>2. Liquid Layout</h2>
<p>จะกำหนดขนาดความกว้างของส่วนต่างๆ เป็นเปอร์เซ็นต์ เมื่อเราย่อหรือขยายขนาดของเว็บเบราเซอร์ ขนาดของส่วนต่างๆ จะย่อขยายตาม</p>
<h2>3. Elastic Layout</h2>
<p>จะกำหนดขนาดของส่วนต่าง ๆ เป็น em ทำให้ส่วนต่างๆ ย่อหรือขยาย ตามการกำหนดค่า Text size ของเบราเซอร์ เมื่อเพิ่มหรือลดขนาดของตัวอักษรแล้ว ยังสามารถคงรูปแบบการจัดวางส่วนต่างๆ ไว้ได้อย่างดี</p>
<!-- end #mainContent --></div>
<br class="clearfloat" />
<div id="footer">
<p>Footer<br/><br /></p>
<!-- end #footer --></div>
<!-- end #container --></div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="thrColFixHdr.css" rel="stylesheet" type="text/css">
</head>
<body class="thrColFixHdr">
<div id="container">
<div id="header">
<h1>Header</h1>
<!-- end #header --></div>
<div id="sidebar1">
<h3>Sidebar1 Content</h3>
<p>The background color on this div will only show for the length of the content. If you'd like a dividing line instead, place a border on the left side of the #mainContent div if it will always contain more content. </p>
<!-- end #sidebar1 --></div>
<div id="sidebar2">
<h3>Sidebar2 Content</h3>
<p>The background color on this div will only show for the length of the content. If you'd like a dividing line instead, place a border on the right side of the #mainContent div if it will always contain more content. </p>
<!-- end #sidebar2 --></div>
<div id="mainContent">
<h1> การจัด Layout </h1>
<p>ในหน้าเว็บเพจหนึ่งประกอบไปด้วยส่วนหัวเว็บ (Page Header), ส่วนเนื้อหา และการเชื่อมโยง (Page Body), และส่วนท้าย (Page Footer) จัดสรรพื้นที่ของหน้าเว็บเพจเพื่อแสดงส่วนประกอบเหล่านี้ ทำได้หลายรูปแบบ เช่น แบ่งแบบอิสระ แบ่งแบบ 2 คอลัมน์ และ 3 คอลัมน์ </p>
<p> ในการลงมือเขียนเว็บเพจ ปัจจุบันนิยมใช้ Div ในการจัด Layout มี 3 รูปแบบดังนี้</p>
<h2>1. Fixed Layout </h2>
<p>จะกำหนดขนาดความกว้าง และตำแหน่งของส่วนต่างๆ เป็น pixel ทำให้กำหนดขนาด และตำแหน่งของส่วนต่างๆ ได้ตามต้องการ ไม่ผิดเพี้ยนไปตามขนาดหน้าจอ และเมื่อย่อขยายหน้าต่างเว็บเบราเซอร์ (IE, Firefox) แล้ว ตำแหน่งของส่วนต่างๆในหน้าเว็บจะยังคงเดิม </p>
<h2>2. Liquid Layout</h2>
<p>จะกำหนดขนาดความกว้างของส่วนต่างๆ เป็นเปอร์เซ็นต์ เมื่อเราย่อหรือขยายขนาดของเว็บเบราเซอร์ ขนาดของส่วนต่างๆ จะย่อขยายตาม</p>
<h2>3. Elastic Layout</h2>
<p>จะกำหนดขนาดของส่วนต่าง ๆ เป็น em ทำให้ส่วนต่างๆ ย่อหรือขยาย ตามการกำหนดค่า Text size ของเบราเซอร์ เมื่อเพิ่มหรือลดขนาดของตัวอักษรแล้ว ยังสามารถคงรูปแบบการจัดวางส่วนต่างๆ ไว้ได้อย่างดี</p>
<!-- end #mainContent --></div>
<br class="clearfloat" />
<div id="footer">
<p>Footer<br/><br /></p>
<!-- end #footer --></div>
<!-- end #container --></div>
</body>
</html>
แบบ Fixed Layout นี้ สังเกตได้ว่า เวลาย่อขยายหน้าต่างเบราเซอร์จะไม่มีผลต่อการจัดวางส่วนประกอบต่างๆ แต่จะเกิดเป็น scroll bar แทน
ส่วนการจัด Layout แบบอื่นๆ ลองดูจากไฟล์เหล่านี้ หรือลองเล่นดูในโปรแกรม Dreamweaver ได้ค่ะ
