1. +
LAB#8 Page Layouts
(Flexible and Fixed Layout)
322432 Web design technology Computer Science Khon Kaen University

3. +
Layouts
Page Header
Page Body
Page Footer
{
{
{

4. +
Layouts – Using <table> vs <div>

5. +
Layouts - Using <table>
Ex. การจัด Layout Page ด้วย Table แบบแบ่งเป็น 2 คอลัมน์
<table style="width:100%"><tr><td colspan="2" style="background-color:#600;
color:#fff"><h1>Header</h1></td></tr><tr valign="top"><td style="background-color:#FF0080;
width:20%;text-align:top; "><b>Navigation</b></td><td style="height:200px; text-
align:top;">Content</td></tr><tr><td colspan="2" style="background-color:#600; text-align:center;
color:#fff">Footer</td></tr> </table>

6. +
Layouts - Using <div> Elements

7. +
Layouts - Using <div> Elements
กําหนดขนาดความกว้าง และตําแหน่งของส่วนต่างๆ เป็น pixel
800x600, 1024x780 (มีผู้ใช้มากที่สุด), 1280x800, 1280x960,
1280x1024 pixel
% ขยายตามขนาดบราวเซอร์
ข้อดี คือ ทําให้ได้ใช้พื้นที่ในหน้าจอได้อย่างมีประสิทธิภาพ
ข้อเสีย คือ การจัดวางองค์ประกอบต่างๆ นั้นทําได้ค่อนข้างยาก เพราะขนาด
ไม่แน่นอน
จะกําหนดขนาดของส่วนต่าง ๆ เป็น em ทําให้ส่วนต่างๆ ย่อ
หรือขยาย ตามการกําหนดค่า Text size ของเบราเซอร์
เป็นการใช้แบบต่างๆ มาผสมกัน
เช่น Sidebar ด้านข้าง ทั้ง 2 ด้าน
เป็น Elastic Layout ส่วนเนื้อหา
เป็น Liquid Layout
1. Fixed Layout
2. Liquid Layout
3. Elastic Layout
4. Hybrid Layout

8. +
Classification
float - ใช้กําหนดการจัดวางรูปภาพ หรือวัตถุที่ต้องการว่าจะให้วางอยู่ด้านไหน ของข้อความ
ex. float:left ,right, none
display - ใช้กําหนดรูปแบบการแสดงของวัตถุ
none ไม่แสดงวัตถุนั้น
block แสดงเป็น block โดยขึ้นบรรทัดใหม่ก่อน
inline เป็นค่า Default โดย element จะ◌ี◌่แสดงแบบ inline ไม่มีการขึ้นบรรทัดใหม่

9. +
Classification (Cont.)
clear ใช้ยกเลิกการจัดวางวัตถุกับข้อความ left
right
both
none
visibility กําหนดให้มีการแสดง
หรือซ่อน วัตถุและข้อความที่ต้องการ visible
hidden
collapse

10. +
CSS Dimension Properties
height:
width:
max-height:
max-width:
min-hight:
min-width:
auto
length
%
inherit
none
length
%
inherit
length
%
inherit
Example.
Creative Design
Layouts: Getting Out
Of The Box

11. Example
<div id="container" style="width:500px”>
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Main Title of Web Page</h1></div>
<div id="menu" style="background-color:#FFD700;
height:200px;width:100px;float:left;">
<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript</div>
<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
Content goes here</div>
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
Copyright © W3Schools.com</div>
</div>

12. Try

13. +คําสั่ง
กําหนดข้อมูลมาให้ เนื้อหามี 4 หน้า ให้นักศึกษาจัดข้อมูล
ลงหน้าเอกสาร จัด page layout
ใช้เทคนิค css ที่เรียนมา จัดรูปแบบ layout นําเสนอข้อมูลให้สวยงาม
โดยให้มีลิ้งค์เชื่อมโยงกันอย่างน้อย 2 เพจ