การออกแบบโครงสร้างเว็บไซต์ (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/

20 ความเห็น (+add yours?)

  1. อัครเดช พรหมช่วย
    พ.ย. 01, 2011 @ 13:41:39

    ผมได้เข้ามาอ่านแล้วอย่างเป็นทางการ

    ตอบกลับ

  2. จักรพงศ์ บุญทัน
    พ.ย. 01, 2011 @ 13:41:51

    ผมได้เข้ามาอ่านเว็บไซต์นี้แล้ว

    ตอบกลับ

  3. สมชาย คำภูมี
    พ.ย. 01, 2011 @ 13:42:20

    ผมเข้ามาดูเว็ปไซท์นี่แล้ว คัป !

    ตอบกลับ

  4. มงคลชัย เพฤงบุญ สุ
    พ.ย. 01, 2011 @ 13:46:11

    น่าสนใจมากครับ ขอบคุณ^^

    ตอบกลับ

  5. วทันยา ดวงขันเพ็ชร
    พ.ย. 01, 2011 @ 13:47:10

    ได้เข้ามาอ่านเเล้ว ค่ะ

    ตอบกลับ

  6. ธันย์ชนก อินทะสร้อย
    พ.ย. 01, 2011 @ 13:48:44

    ได้เข้ามาอ่านแล้ววววว

    ตอบกลับ

  7. มงคลชัย เพ็งบุญ
    พ.ย. 01, 2011 @ 13:50:07

    มีสาระที่น่าสนใจมากครับ ขอบคุณครับ

    ตอบกลับ

  8. วรรณิฐา พัฒนศิริ
    พ.ย. 01, 2011 @ 13:52:27

    นู๋ได้เข้ามาอ่านแร่วก็ได้ความรู้เยอะที่ได้เกียวกับการใช้โปรแกรมคอมพิวเตอร์ได้ประกอบเป็น3ส่วนได้แก่1.ส่วนหัวของหน้าว 2.ส่วนของเนื้อหา 3.ส่วนท้ายของหน้าขอบคุนคร๊าที่ได้หัยนู๋มีโอกาศได้เข้ามาอ่านเว็ปนี้

    ตอบกลับ

  9. สุวิทย์ สุขเจริญ
    พ.ย. 01, 2011 @ 13:54:34

    มีเนือหาสาระที่น่าสนใจมากครับ ขอบคุณ ^_^

    ตอบกลับ

  10. warin namson
    พ.ย. 01, 2011 @ 13:55:01

    ขอขอบพระคุณอย่างยิ่ง

    ตอบกลับ

  11. พงษ์ทวี
    พ.ย. 01, 2011 @ 13:58:04

    ผมอ่านเเร้วครับ ดีมากๆ..

    ตอบกลับ

  12. วิภาดา
    พ.ย. 01, 2011 @ 13:59:31

    อ่านแล้วค่ะ

    ตอบกลับ

  13. warin namson
    พ.ย. 01, 2011 @ 14:03:52

    감사합니다.

    소녀

    Sukanya.

    ตอบกลับ

  14. นาวิน ไชสิงห์
    พ.ย. 01, 2011 @ 14:05:50

    มีเนื้อหาสาระดีมาก ๆ ๆ เน้อ ☺

    ตอบกลับ

  15. Atcharapan Samalee
    พ.ย. 01, 2011 @ 14:12:27

    ลงชื่อเข้าใช้แล้วค้ะ”

    ตอบกลับ

  16. เด็กหญิงแก้วกมล ชัยธงรัตน์
    พ.ย. 01, 2011 @ 14:14:59

    ได้ความรู้หลายอย่างเลยค่ะ
    สิ่งไหนที่ไม่รู้ก้อด่ายรู้อ่ะ

    ตอบกลับ

  17. ด.ญ พิมพ์ตะวัน จิตรสะคม ด.ญ ลลิตา นำผล
    พ.ย. 01, 2011 @ 14:17:58

    ได้ความรู้เพิ่มขึ้น
    ได้สาระดีๆมากมายเลยค่ะ

    ตอบกลับ

  18. เด็กหญิงแก้วกมล ชัยธงรัตน์
    พ.ย. 01, 2011 @ 14:18:45

    มีสาระมากเลยค่ะ
    ได้ความรู้ด้วย

    ตอบกลับ

  19. เด็กหญิงแก้วกมล ชัยธงรัตน์
    พ.ย. 01, 2011 @ 14:19:47

    ☺☻♥♦♣♠•◘○–◙♠ix‚*

    ตอบกลับ

  20. phanya nilratkham
    พ.ย. 08, 2011 @ 17:17:08

    MyWebM3_06 ทำเรื่อง บัวหลวง คับ

    ( ปัญญา นิลรัตคำ )

    ตอบกลับ

ใส่ความเห็น

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / เปลี่ยนแปลง )

Twitter picture

You are commenting using your Twitter account. Log Out / เปลี่ยนแปลง )

Facebook photo

You are commenting using your Facebook account. Log Out / เปลี่ยนแปลง )

Google+ photo

You are commenting using your Google+ account. Log Out / เปลี่ยนแปลง )

Connecting to %s

%d bloggers like this: