lab8
TRANSCRIPT
![Page 1: Lab8](https://reader038.vdocuments.net/reader038/viewer/2022100600/55629b9ed8b42a802b8b45b4/html5/thumbnails/1.jpg)
+
LAB#8 Page Layouts (Flexible and Fixed Layout)322432 Web design technology Computer Science Khon Kaen University
![Page 2: Lab8](https://reader038.vdocuments.net/reader038/viewer/2022100600/55629b9ed8b42a802b8b45b4/html5/thumbnails/2.jpg)
![Page 3: Lab8](https://reader038.vdocuments.net/reader038/viewer/2022100600/55629b9ed8b42a802b8b45b4/html5/thumbnails/3.jpg)
+ Layouts
Page Header
Page Body
Page Footer
{{
{
![Page 4: Lab8](https://reader038.vdocuments.net/reader038/viewer/2022100600/55629b9ed8b42a802b8b45b4/html5/thumbnails/4.jpg)
+ Layouts – Using <table> vs <div>
![Page 5: Lab8](https://reader038.vdocuments.net/reader038/viewer/2022100600/55629b9ed8b42a802b8b45b4/html5/thumbnails/5.jpg)
+ 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>
![Page 6: Lab8](https://reader038.vdocuments.net/reader038/viewer/2022100600/55629b9ed8b42a802b8b45b4/html5/thumbnails/6.jpg)
+ Layouts - Using <div> Elements
![Page 7: Lab8](https://reader038.vdocuments.net/reader038/viewer/2022100600/55629b9ed8b42a802b8b45b4/html5/thumbnails/7.jpg)
+ 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
![Page 8: Lab8](https://reader038.vdocuments.net/reader038/viewer/2022100600/55629b9ed8b42a802b8b45b4/html5/thumbnails/8.jpg)
+ Classificationfloat - ใชก้าํหนดการจดัวางรปูภาพ หรอืวตัถุทีต่อ้งการวา่จะใหว้างอยูด่า้นไหน ของขอ้ความ
ex. float:left ,right, none
display - ใชก้าํหนดรปูแบบการแสดงของวตัถุ
none ไมแ่สดงวตัถุนัน้
block แสดงเป็น block โดยขึน้บรรทดัใหมก่อ่น
inline เป็นคา่ Default โดย element จะ◌ี◌่แสดงแบบ inline ไมม่กีารขึน้บรรทดัใหม่
![Page 9: Lab8](https://reader038.vdocuments.net/reader038/viewer/2022100600/55629b9ed8b42a802b8b45b4/html5/thumbnails/9.jpg)
+ Classification (Cont.)
clear ใชย้กเลกิการจดัวางวตัถุกบัขอ้ความ left
right
both
none
visibility กาํหนดใหม้กีารแสดง
หรอืซ่อน วตัถุและขอ้ความทีต่อ้งการ visible
hidden
collapse
![Page 10: Lab8](https://reader038.vdocuments.net/reader038/viewer/2022100600/55629b9ed8b42a802b8b45b4/html5/thumbnails/10.jpg)
+ 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
![Page 11: Lab8](https://reader038.vdocuments.net/reader038/viewer/2022100600/55629b9ed8b42a802b8b45b4/html5/thumbnails/11.jpg)
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>
![Page 12: Lab8](https://reader038.vdocuments.net/reader038/viewer/2022100600/55629b9ed8b42a802b8b45b4/html5/thumbnails/12.jpg)
Try
![Page 13: Lab8](https://reader038.vdocuments.net/reader038/viewer/2022100600/55629b9ed8b42a802b8b45b4/html5/thumbnails/13.jpg)
+ คาํสัง่
กาํหนดขอ้มลูมาให ้เน้ือหาม ี4 หน้า ใหน้กัศกึษาจดัขอ้มลู
ลงหน้าเอกสาร จดั page layout
ใชเ้ทคนิค css ทีเ่รยีนมา จดัรปูแบบ layout นําเสนอขอ้มลูใหส้วยงาม
โดยใหม้ลีิง้คเ์ชื่อมโยงกนัอยา่งน้อย 2 เพจ