การออกแบบโครงสร้างเว็บไซต์ (Site Structure Design)
การออกแบบโครงสร้างเว็บไซต์ (Site Structure Design)
ส่วนประกอบของหน้าเว็บเพจ แบ่งออกเป็น 3 ส่วนหลักๆ คือ
1. ส่วนหัวของหน้า (Page Header)
เป็นส่วนที่อยู่ตอนบนสุดของหน้า และเป็นส่วนที่สำคัญที่สุดของหน้า เพราะเป็นส่วนที่ดึงดูดผู้ชมให้ติดตามเนื้อหาภายในเว็บไซต์ มักใส่ภาพกราฟฟิกเพื่อสร้างความประทับใจ ส่วนใหญ่ประกอบด้วย
- โลโก้ (Logo) เป็นสิ่งที่เว็บไซต์ควรมี เป็นตัวแทนของเว็บไซต์ได้เป็นอย่างดี และยังทำให้เว็บน่าเชื่อถือ
- ชื่อเว็บไซต์
- เมนูหลักหรือลิงค์ (Navigation Bar) เป็นจุดเชื่อมโยงไปสู่เนื้อหาของเว็บไซต์
2.ส่วนของเนื้อหา (Page Body)
เป็นส่วนที่อยู่ตอนกลางของหน้า ใช้แสดงข้อมูลเนื้อหาของเว็บไซต์ ซึ่งประกอบด้วยข้อความ, ตารางข้อมูล ภาพกราฟิก วีดีโอ และอื่นๆ และอาจมีเมนูหลัก หรือเมนูเฉพาะกลุ่มวางอยู่ในส่วนนี้ด้วย
สำหรับส่วนเนื้อหาควรแสดงใจความสำคัญที่เป็นหัวเรื่องไว้บนสุด ข้อมูลมีความกระชับ ใช้รูปแบบตัวอักษรที่อ่านง่าย และจัด Layout ให้เหมาะสมและเป็นระเบียบ
3. ส่วนท้ายของหน้า (Page Footer)
เป็นส่วนที่อยู่ด้านล่างสุดของหน้า จะมีหรือไม่มีก็ได้ มักวางระบบนำทางที่เป็นลิงค์ข้อความง่าย ๆ และอาจแสดงข้อมูลเพิ่มเติมเกี่ยวกับเนื้อหาภายในเว็บไซต์ เช่น เจ้าของเว็บไซต์, ข้อความแสดงลิขสิทธิ์, วิธีการติดต่อกับผู้ดูแลเว็บไซต์, คำแนะนำการใช้เว็บไซต์ เป็นต้น
โดยปกติส่วนหัวและส่วนท้ายมักแสดงเหมือนกันในทุกหน้าของเว็บเพจ
.ตัวอย่าง แสดงส่วนประกอบของหน้าเว็บเพจ (trendypet.com)
โครงสร้างและรูปแบบของเว็บเพจ
ในหน้าเว็บเพจหนึ่งๆ ประกอบไปด้วยส่วนหัวของหน้า (Page Header), ส่วนเนื้อหา และการเชื่อมโยง (Page Body) และส่วนท้ายของหน้า (Page Footer)
ในเว็บไซต์หนึ่งๆ อาจมีโครงสร้างหน้าเว็บเพจหลายๆ แบบก็ได้ แต่จะต้องมีเอกลักษณ์ และลักษณะที่ใกล้เคียงกัน จะต้องจัดองค์ประกอบของหน้าเว็บเพจให้เหมาะสม ได้แก่ เนื้อหา กราฟฟิก โลโก้ ระบบเนวิเกชั่น ป้ายโฆษณา และอื่นๆ
การแบ่งพื้นที่ของหน้าเว็บเพจเพื่อแสดงส่วนประกอบต่างๆ
ทำได้หลายรูปแบบ เช่น
แบ่งแบบอิสระ
ตัวอย่างเว็บไซต์
.แบ่ง 2 ส่วน
แบ่ง 3 ส่วน จะมีส่วน Footer หรือไม่ก็ได้
ส่วนเนื้อหายังสามารถแบ่งสัดส่วนเพื่อแสดงเนื้อหาต่างๆ ได้อีก
ตัวอย่างเว็บไซต์
แหล่งศึกษาข้อมูลเพิ่มเติม
http://www.chaiwbi.com/0drem/web_children/index.html
http://www.enjoyday.net/good-page-design.html
ตัวอย่างผลงานนักเรียน
http://www.krudung.com/pb/index.php/component/option,com_aiportfolio/Itemid,136/view,aiportfolio/
KruO@H OnLinE 
พ.ย. 01, 2011 @ 13:41:39
ผมได้เข้ามาอ่านแล้วอย่างเป็นทางการ
พ.ย. 01, 2011 @ 13:41:51
ผมได้เข้ามาอ่านเว็บไซต์นี้แล้ว
พ.ย. 01, 2011 @ 13:42:20
ผมเข้ามาดูเว็ปไซท์นี่แล้ว คัป !
พ.ย. 01, 2011 @ 13:46:11
น่าสนใจมากครับ ขอบคุณ^^
พ.ย. 01, 2011 @ 13:47:10
ได้เข้ามาอ่านเเล้ว ค่ะ
พ.ย. 01, 2011 @ 13:48:44
ได้เข้ามาอ่านแล้ววววว
พ.ย. 01, 2011 @ 13:50:07
มีสาระที่น่าสนใจมากครับ ขอบคุณครับ
พ.ย. 01, 2011 @ 13:52:27
นู๋ได้เข้ามาอ่านแร่วก็ได้ความรู้เยอะที่ได้เกียวกับการใช้โปรแกรมคอมพิวเตอร์ได้ประกอบเป็น3ส่วนได้แก่1.ส่วนหัวของหน้าว 2.ส่วนของเนื้อหา 3.ส่วนท้ายของหน้าขอบคุนคร๊าที่ได้หัยนู๋มีโอกาศได้เข้ามาอ่านเว็ปนี้
พ.ย. 01, 2011 @ 13:54:34
มีเนือหาสาระที่น่าสนใจมากครับ ขอบคุณ ^_^
พ.ย. 01, 2011 @ 13:55:01
ขอขอบพระคุณอย่างยิ่ง
พ.ย. 01, 2011 @ 13:58:04
ผมอ่านเเร้วครับ ดีมากๆ..
พ.ย. 01, 2011 @ 13:59:31
อ่านแล้วค่ะ
พ.ย. 01, 2011 @ 14:03:52
감사합니다.
소녀
Sukanya.
พ.ย. 01, 2011 @ 14:05:50
มีเนื้อหาสาระดีมาก ๆ ๆ เน้อ ☺
พ.ย. 01, 2011 @ 14:12:27
ลงชื่อเข้าใช้แล้วค้ะ”
พ.ย. 01, 2011 @ 14:14:59
ได้ความรู้หลายอย่างเลยค่ะ
สิ่งไหนที่ไม่รู้ก้อด่ายรู้อ่ะ
พ.ย. 01, 2011 @ 14:17:58
ได้ความรู้เพิ่มขึ้น
ได้สาระดีๆมากมายเลยค่ะ
พ.ย. 01, 2011 @ 14:18:45
มีสาระมากเลยค่ะ
ได้ความรู้ด้วย
พ.ย. 01, 2011 @ 14:19:47
☺☻♥♦♣♠•◘○–◙♠ix*
พ.ย. 08, 2011 @ 17:17:08
MyWebM3_06 ทำเรื่อง บัวหลวง คับ
( ปัญญา นิลรัตคำ )