Basic Layout with CSS
26 Dec 2011
ชนิดของ Layout
หลังจากที่เรียนรู้พร็อพเพอรตี้ต่างๆที่สามารถนำมาใช้กับการจัดเลย์เอาท์แล้ว ก็ได้เวลาประยุกต์ทำเลย์เอาท์กันจริงๆเสียที โดยผมขอเริ่มต้นด้วยชนิดของเลย์เอาท์ก่อน เลย์เอาท์มีกี่ชนิดนั้นจริงๆแล้วก็มิได้มีใครกำหนดไว้ เพราะสุดแท้แล้วแต่ใครจะจินตนาการและประยุกต์ได้ แต่ก็มีอยู่สองชนิดหลักๆที่ต้องพิจารณาตัดสินใจก่อนลงมือจัดเลย์เอาท์คือ
- Fixed-Width และ
- Liquid
แบบ Fixed-Width นั้นก็ตรงตามชื่อเลย คือมีการกำหนดความกว้างที่แน่นอนตายตัว หากหน้าจอ (Resolution) ใครเล็กมีความกว้างไม่พอแสดงผลก็ต้องเลื่อนสกอลบาร์เอา ในทางกลับกันหากเราออกแบบไว้เล็กแต่จอแสดงผลใหญ่กว่า ก็จะเหลือพื้นที่ว่างๆทางซ้ายบ้างขวาบ้างตามแต่การออกแบบ ฟังดูอาจรู้สึกไม่ค่อยจะดีกับการจัดเลย์เอาท์แบบ Fixed-Width แต่ข้อดีก็มีนะครับคือเราสามารถกำหนดองค์ประกอบที่แน่นอนภายในเว็บเพจได้
Liquidแบบ Liquid หรือเรียกได้อีกอย่างคือแบบ Fluid เป็นการออกแบบให้ความกว้างยืดหดได้ตามขนาดของเบราว์เซอร์ (ขนาดจอ) หากจอใครใหญ่ก็สามารถแสดงผลได้มากในหนึ่งบรรทัด หากจอใครเล็กการแสดงผลก็น้อยลงไปในหนึ่งบรรทัด ซึ่งถ้าแสดงไม่พอก็ขึ้นบรรทัดใหม่นั่นเอง ฟังดูดีนะครับกับแบบ Liquid แต่ก็มีข้อเสียคือเลย์เอาท์ที่เราจัดแล้วว่าสวย บางทีมันอาจเลื่อนไปมาไม่เป็นไปตามที่เราคิดก็ได้ เช่นเมนูแบบแถวเดียวตามแนวนอนอาจขึ้นบรรทัดใหม่ในบางขนาดของหน้าจอ อย่าลืมนะครับว่าแม้แต่ขนาดฟอนต์ก็มีผลต่อเลย์เอาท์ แต่ละเครื่องก็เซ็ทฟอนต์ไม่เหมือนกัน
นอกจากแบบ Fixed และ Liquid แล้วเรายังต้องวางแผนอีกว่าจะจัดแบ่งเลย์เอาท์เป็นกี่คอลัมน์ดี สองคอลัมน์สามคอลัมน์? ในหัวข้อถัดไปผมจะแสดงตัวอย่างแบบต่างๆให้ดูนะครับ
ตัวอย่าง Classic Layouts
ในหัวข้อนี้เราจะมาดูตัวอย่างการจัดเลย์เอาท์กัน โดยผมจะใช้ตัวอย่างการจัดเลย์เอาท์แบบง่ายๆหรือแบบคลาสิก เพื่อให้ง่ายต่อการเรียนรู้เบื้องต้น ผมจะเน้นเอาแต่โครงสร้างเป็นหลัก ส่วนรายละเอียดความสวยงามก็ไปตกแต่งเพิ่มเติมกันเอาเองภายหลังนะครับ โดยเลย์เอาท์ที่จะทำกันก็เป็นดังที่แสดงในรูปที่ 13 คือประกอบไปด้วยส่วนต่างๆดังนี้
- Masthead (หรือ Header)
- Sidebar (หรือ Navigator)
- Content
- Footer
ตัวอย่างนี้เป็นเลย์เอาท์แบบสองคอลัมน์ ซึ่งการเขียนโค้ด CSS ก็ทำได้หลากหลายรูปแบบนะครับขึ้นอยู่กับชนิดของเลย์เอาท์และพร็อพเพอร์ตี้ที่เลือกใช้ ในที่นี้ผมจะแสดงให้ดูหลายๆรูปแบบนะครับ ซึ่งประกอบไปด้วยรูปแบบดังต่อไปนี้
- Fluid Floated Sidebar Only
- Fluid Floated Sidebar + Floated Content
- Fluid Floated Sidebar + Margined Content
- Fixed Floated Sidebar + Margined Content
สามรูปแบบแรกเป็นเลย์เอาท์ชนิด Fluid คือความกว้างของทั้งสองคอลัมน์จะยืดหดได้ รูปแบบสุดท้ายรูปแบบที่ 4 เป็นแบบ Fixed ความกว้างของทั้งสองคอลัมน์ โดยที่ทั้งหมดจะใช้พร็อพเพอร์ตี้ float และ clear (ไม่ได้ใช้ position)
ทีนี้เรามาเตรียมโค้ด HTML กันเพื่อใช้กับการจัดเลย์เอาท์รูปแบบต่างๆดังต่อไปนี้
<html>
<head>
<title></title>
</head>
<body>
<div id="masthead">
<h1>Logo</h1>
</div>
<div id="sidebar">
<h3>Sidebar</h3>
<ul>
<li>Menu1</li>
<li>Menu2</li>
<li>Menu3</li>
</ul>
</div>
<div id="content">
<h3>Content</h3>
<p>
Linux refers to the family of Unix-like computer operating systems usingthe Linux kernel. Linux can be installed on a wide variety of computer hardware, ranging from mobile phones, tablet computers and video game consoles, to mainframes and supercomputers. Linux is a leading server operating system, and runs the 10 fastest supercomputers in the
world. . .[from wikipedia]. . .
</p>
</div>
<div id="footer">
<h3>Footer</h3>
</div>
</body>
</html>
ในส่วนของเนื้อหาจะพิมพ์อะไรลงไปก็ได้ และเมื่อเรารันดูในเบราว์เซอร์ก็จะได้ผลลัพธ์ตามรูปที่ 14 ซึ่งเป็นการเรียงตามกันลงมาของส่วนต่างๆ เอาหล่ะพร็อมแล้วก็ลุยกันเลย
Fluid Floated Sidebar Only
รูปแบบนี้เป็นการ Float คอลัมน์ Sidebar เท่านั้น และให้คอลัมน์ Content ห้อหุ้มไว้ โค้ด CSS เขียนได้ดังนี้
body {
margin: 10px;
}
#masthead {
padding: 10px;
border: 1px solid #000;
background-color: #DDD;
}
#sidebar {
float: left;
padding: 10px;
border: 1px solid #000;
}
#content {
padding: 10px;
border: 1px solid #000;
}
#footer {
padding: 10px;
border: 1px solid #000;
background-color: #DDD;
}
ผลลัพธ์ที่ได้ก็ดังที่ปรากฏในรูปที่ 15 จะสังเกตได้ว่าเราใช้เพียงพร็อพเพอร์ตี้ float กับ Sidebar เท่านั้น Footer ไม่ต้อง Clear เพราะไม่ได้ Float คอลัมน์ Content
Fluid Floated Sidebar + Floated Content
จะเห็นได้ว่ารูปแบบที่ผ่านมาคอลัมน์ Content นั้นห่อหุ้มคอลัมน์ Sidebar อยู่ ถ้าอยากให้คอลัมน์ Content แยกออกมาอยู่ทางขวามือเป็นสัดส่วนของมันเอง เราจะต้องทำการ Float คอลัมน์ Content ด้วย โดยครั้งนี้เราต้องแบ่งสัดส่วน (%) ความกว้างให้กับแต่ละคอลัมน์ ซึ่งผมจะใช้สัดส่วน 25% คอลัมน์ Sidebar และ 70% คอลัมน์ Content อีก 5% ที่หายไปเป็นพื้นที่เผื่อเอาไว้สำหรับพวก Margin และเราจะต้องทำการ Clear ให้กับคอลัมน์ Footer ด้วย ดังนั้นจึงได้โค้ด CSS ดังต่อไปนี้
body {
margin: 10px;
}
#masthead {
padding: 10px;
border: 1px solid #000;
background-color: #DDD;
}
#sidebar {
padding: 10px;
float: left;
width: 25%;
border: 1px solid #000;
}
#content {
padding: 10px;
float: right;
width: 70%;
border: 1px solid #000;
}
#footer {
clear: both;
padding: 10px;
border: 1px solid #000;
background-color: #DDD;
}
ผลลัพธ์ของการรันตัวอย่างข้างต้นก็จะได้ดังรูปที่ 16 หากเราลองทำการหดความกว้างของเบราว์เซอร์ลง จนไม่สามารถแสดงผลทั้งสองคอลัมน์ได้เบราว์เซอร์ก็จะแสดงคอลัมน์ Content ใต้คอลัมน์ Sidebar
Fluid Floated Sidebar + Margined Content
รูปแบบที่ 3 ที่จะแสดงนี้จะใช้เทคนิคการกำหนด Margin ให้กับคอลัมน์ Content แทน เพื่อแก้ปัญหาการหดขนาดของเบราว์เซอร์จากตัวอย่างที่ผ่านมา ดังนั้นคอลัมน์ Content จึงถูกกำหนดให้มี Margin (margin-left) ห่างออกมาจากทางซ้ายมือ 30% ที่เป็น 30% เพราะเผื่อพื้นที่ไว้ 5% ส่วนคอลัมน์ Sidebar และ Footer ก็ยังคงเหมือนเดิมไม่เปลี่ยนแปลง จึงได้โค้ด CSS ดังต่อไปนี้
body {
margin: 10px;
}
#masthead {
padding: 10px;
border: 1px solid #000;
background-color: #DDD;
}
#sidebar {
padding: 10px;
float: left;
width: 25%;
border: 1px solid #000;
}
#content {
padding: 10px;
margin-left: 30%;
border: 1px solid #000;
}
#footer {
clear: both;
padding: 10px;
border: 1px solid #000;
background-color: #DDD;
}
Fixed Floated Sidebar + Margined Content
สามรูปแบบที่ผ่านมาเป็นเลย์เอาท์แบบ Fluid ทีนี้ลองมาดูแบบ Fixed ความกว้างในรูปแบบสุดท้ายกันบ้าง หลักการก็คือกำหนดความกว้างที่แน่นอนของเว็บเพจ โดยการกำหนดพร็อพเพอร์ตี้ width ให้กับแท็ก <body> ในที่นี้ผมกำหนดให้เป็น 760 พิกเซล คอลัมน์ Sidebar กำหนดความกว้างไว้ที่ 200 พิกเซล (ถ้าเป็นแบบ Fluid จะใช้เป็น %) คอลัมน์ Content กำหนดพร็อพเพอร์ตี้ margin-left ไว้ที่ 242 พิกเซลคือเส้นขอบ Content ห่างจากด้านซ้ายมือมา 242 พิกเซล และด้านขวา margin-right ให้เป็น 0 พิกเซล สุดท้ายคอลัมน์ Footer ก็ให้ Clear เหมือนเดิม (มี Float ก็มักจะมี Clear เสมอ) โค้ด CSS ที่ได้ก็จะเป็นดังต่อไปนี้
body {
margin: 10px auto auto auto;
width: 760px;
border: 1px solid #00F;
}
#masthead {
padding: 10px;
border: 1px solid #000;
background-color: #DDD;
}
#sidebar {
float: left;
width: 200px;
padding: 10px;
border: 1px solid #000;
}
#content {
margin-left: 242px;
margin-right: 0px;
padding: 10px;
border: 1px solid #000;
}
#footer {
clear: both;
padding: 10px;
border: 1px solid #000;
background-color: #DDD;
}
ตัวอย่างข้างต้นเมื่อรันแล้วก็จะได้ผลลัพธ์ดังแสดงในรูปที่ 18 จะเห็นได้ว่าเว็บเพจมีความกว้างที่ Fixed ไว้ ไม่ว่าจะหดขนาดเบราว์เซอร์อย่างไรเว็บเพจก็จะแสดงเหมือนเดิม และที่เว็บเพจถูกแสดงตรงกลางได้ก็เพราะว่า เรากำหนดให้ Margin ของ Body ทางด้านซ้ายและขวามือเป็น Auto นั่นเอง
body {
margin: 10px auto auto auto;
. . .
}
What's next
จบแล้วนะครับสำหรับบทความนี้ซึ่งเป็นบทความที่ยาวพอสมควร ก็หวังว่าคุณคงได้ไอเดียไปประยุกต์ใช้กับเว็บเพจของตนเอง หรือหากใช้ CMS สำเร็จรูปก็จะสามารถอ่านโค้ดและดัดแปลงรูปแบบได้ตามที่ต้องการ สร้างเว็บเพจแล้วได้หน้าตาเป็นอย่างไรส่งลิงค์มาให้ดูกันบ้างก็ได้ครับ :)
