+

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

+ Layouts

Page Header

Page Body

Page Footer

{{

{

+ Layouts – Using <table> vs <div>

+ 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>

+ Layouts - Using <div> Elements

+ 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 Layout3. Elastic Layout4. Hybrid Layout

+ Classificationfloat - ใชก้าํหนดการจดัวางรปูภาพ หรอืวตัถุทีต่อ้งการวา่จะใหว้างอยูด่า้นไหน ของขอ้ความ

ex. float:left ,right, none

display - ใชก้าํหนดรปูแบบการแสดงของวตัถุ

none ไมแ่สดงวตัถุนัน้

block แสดงเป็น block โดยขึน้บรรทดัใหมก่อ่น

inline เป็นคา่ Default โดย element จะ◌ี◌่แสดงแบบ inline ไมม่กีารขึน้บรรทดัใหม่

+ Classification (Cont.)

clear ใชย้กเลกิการจดัวางวตัถุกบัขอ้ความ left

right

both

none

visibility กาํหนดใหม้กีารแสดง

หรอืซ่อน วตัถุและขอ้ความทีต่อ้งการ visible

hidden

collapse

+ CSS Dimension Properties

height: width:

max-height:max-width:

min-hight:min-width:

autolength%inherit

nonelength%inherit

length%inherit

Example.Creative Design Layouts: Getting Out Of The Box

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>

Try

+ คาํสัง่

กาํหนดขอ้มลูมาให ้เน้ือหาม ี4 หน้า ใหน้กัศกึษาจดัขอ้มลู

ลงหน้าเอกสาร จดั page layout

ใชเ้ทคนิค css ทีเ่รยีนมา จดัรปูแบบ layout นําเสนอขอ้มลูใหส้วยงาม

โดยใหม้ลีิง้คเ์ชื่อมโยงกนัอยา่งน้อย 2 เพจ