การจดัวาง Layout เวบ็ไซต์

ความสาํคญัของการจดัวาง Layout เวบ็ไซต์

การจดัวาง Layout สาํหรบัเวบ็ไซต์เป็นรปูแบบการ

กาํหนดโครงสร้างของเวบ็เพจท่ีผู้พฒันาเวบ็ไซต์ต้องให้

ความสําคัญ เ น่ืองจากการกําหนดโครงสร้างการ

แสดงผลเวบ็เพจท่ีดี มีสดัส่วน จะทาํให้เวบ็เพจมีระเบียบ

สวยงาม น่าสนใจ และการใช้งานเป็นไปได้ง่ายและ

สะดวก

ประเภทของ Layout เวบ็ไซต์

การกาํหนดรปูแบบ Layout สามารถกระทาํได้หลาย

รปูแบบ แต่ท่ีนิยมใช้งานมีเพียง 3 รปูแบบ ดงัน้ี

1. Fixed Layout

2. Liquid Layout

3. Elastic Layout

ท่ีมา : ประเวศน์ วงษ์คาํชยั และพรพิมล หมุนสนิท

Fixed Layout

เป็นรูปแบบการกาํหนดโครงสร้างการแสดงผลเว็บ

เพจแบบตายตัว โดยการกําหนดค่าของหน่วยต่างๆ

ไปภายในแทก็ HTML หรือสไตลชี์ทแบบ Pixel เช่น ความ

กว้างของหน้าจอเวบ็เพจ

Fixed Layout

ข้อเสีย

เม่ือนําเวบ็เพจไปเปิดบนหน้าจอท่ีมีความละเอียด

ต่างกนัจะทาํให้เกิดพืน้ท่ีว่างท่ีไม่ได้ถกูใช้งาน แต่ถ้า

ขนาดของหน้าจอท่ีมีความละเอียดน้อยเกินไปจะทาํให้

ลาํบากต่อการอ่านข้อมลูเน่ืองจากไม่สามารถแสดง

ข้อมลูได้ทัง้หมด ต้องอาศยั Scroll Bar

Fixed Layout

ข้อดี

ข้อมลูภายในเวบ็เพจจะไม่มีการเปล่ียนแปลงถึงแม้

จะเปิดบนหน้าจอท่ีความละเอียดต่างกนั

Liquid Layout

เป็นการกําหนดโครงสร้างการแสดงผลเว็บเพจให้

สามารถเปล่ียนแปลงได้ตามความละเอียดของจอภาพ

โดยการกาํหนดค่าของหน่วยต่างๆ เป็น % ซ่ึงจะช่วยให้

เน้ือหาในแต่ละส่วนเกิดการเปล่ียนแปลงตามความ

ละเอียดของจอภาพ

Liquid Layout

ข้อดี

เวบ็เพจมีความยืดหยุ่นสงู เน่ืองจากเวบ็เพจ

สามารถเปล่ียนแปลงขนาดโครงสร้างได้ตามความ

ละเอียดของจอภาพ

Liquid Layout

ข้อเสีย

เม่ือมีการลดขนาดของเวบ็บราวเซอรใ์ห้เลก็ลง

จะทาํให้ข้อมลูถกูบบีให้รปูแบบผิดไปจากเดิม ข้อมลูท่ี

ถกูบบีอดัเข้ามาจะเล่ือนไปแสดงในตาํแหน่งข้างล่าง

แทน ทาํให้เวบ็เพจเสียรปูแบบในการแสดงผล

Elastic Layout

มีลกัษณะคล้ายกบัแบบ Fixed Layout คือ โครงสร้าง

จ ะ ไ ม่ เ ป ล่ี ย น แ ป ล ง ต า ม ข น า ด บ ร า ว เ ซ อ ร์ แ ต่ จ ะ

เปล่ียนแปลงตามขนาดของตวัอกัษรท่ีกาํหนดให้กบัเวบ็

เพจ คือ เม่ือมีการเปล่ียนแปลงขนาดของตวัอกัษรใหม่จะ

ทาํให้โครงสร้างของเวบ็เพจเปล่ียนแปลงตามไปด้วย

รปูแบบของการกาํหนด Layout

การกาํหนด Layout บนเวบ็เพจทัว่ไปอย่างน้อยต้อง

มี 2 คอลมัน์ หรือมากกว่าน้ี ขึ้นอยู่กบัเน้ือหาและความ

ต้องการของผูใ้ช้

อย่างไรกต็าม การสร้างคอลมัน์ในเวบ็เพจจะต้องมี

ส่วนหวัและส่วนท้ายของเวบ็เพจเสมอ

รปูแบบของการกาํหนด Layout

เครื่องมือสาํหรบัสร้าง Layout

1. การจดัวาง Layout ด้วยตาราง

ผู้พัฒนาเว็บไซต์มักเลือกตารางในการกําหนด

โครงสร้างของเวบ็เพจ แบ่งขอบเขตของบริเวณหน้าเวบ็

เพจให้เป็นสดัส่วน

1. การจดัวาง Layout ด้วยตาราง

โดยตารางช่วยจดัรปูแบบโครงสร้างหน้าเวบ็เพจได้ ดงัน้ี

ใส่ตวัอกัษรหรือกราฟิกในตาํแหน่งท่ีต้องการ

กาํหนดความยาวของบรรทดัให้เหมาะสม

จดัระเบียบองคป์ระกอบต่างๆ ในหน้าเวบ็เพจ

รวมภาพกราฟิกหลายรปูให้ติดกนั

สร้างพืน้ท่ีว่าง

เครื่องมือสาํหรบัสร้าง Layout

2. การจดัวาง Layout ด้วยเฟรม

โครงสร้างแบบเฟรมเป็นการรวมเว็บเพจหลายๆ

หน้า ให้อยู่ภายใต้หน้าต่างบราวเซอรเ์ดียวกนั

โดยมีหน้าเฟรมหลกัในการควบคุมพื้นท่ีและการ

ปรากฏของแต่ละเวบ็เพจ

2. การจดัวาง Layout ด้วยเฟรม

ปัจจบุนัไม่นิยมใช้เฟรมในการกาํหนดโครงสร้างของ

เวบ็ไซตแ์ต่นิยมใช้ตารางแทน

แต่หากจะใช้เฟรม กค็วรออกแบบเพ่ือให้เกิดปัญหา

น้อยท่ีสุด เช่น การสร้างระบบเนวิเกชัน่ท่ีผู้ใช้สามารถ

มองเห็นรายการได้ทัง้หมดได้ โดยไม่ต้องเล่ือนหน้า

ขยายเฟรมให้แสดงเน้ือหาให้มากท่ีสดุ

3. การจดัวาง Layout ด้วยสไตลชี์ท (CSS)

สไตลชี์ทเป็นเทคโนโลยีหน่ึงท่ีปัจจบุนันิยมนํามาช่วย

ในการจดัรูปแบบและการควบคุมการแสดงผลของเว็บ

เพจ เช่น รปูแบบตวัอกัษร สี

การแก้ไข CSS สามารถทําได้ง่าย และสามารถ

เรียกใช้รูปแบบท่ีกําหนดไว้ใน CSS ได้หลากหลาย

รปูแบบ ซ่ึงจาํทาํให้เกิดรปูแบบท่ีแน่นอนเป็นระเบยีบ

Web Page

Web Page

CSS

กาํหนดรูปแบบการ

แสดงผลดว้ยสไตลชี์ท