Templates by BIGtheme NET
หน้าแรก / การสร้างเว็บไซต์ / 3. ออกแบบเว็บไซต์ / 3.3.1 ส่วนประกอบของหน้าเว็บเพจ

3.3.1 ส่วนประกอบของหน้าเว็บเพจ



ในหัวข้อก่อนหน้านี้เราได้ศึกษาเรื่องการออกแบบเว็บไซต์ (Site Design) ซึ่งเป็นภาพรวมไปแล้ว ได้แก่
3.1 การออกแบบโครงสร้างเว็บไซต์ (Site Structure Design)
3.2 การออกแบบระบบเนวิเกชั่น (Site Navigation Design)

.

ในหัวข้อนี้เราจะได้ศึกษาในรายละเอียดการออกแบบหน้าเว็บเพจ (Page Design) ซึ่งเป็นส่วนประกอบของเว็บไซต์กันค่ะ

3.3 การออกแบบเว็บเพจ (Page Design)

ส่วนประกอบของหน้าเว็บเพจ

แบ่งออกเป็น 3 ส่วนหลักๆ คือ

1. ส่วนหัวของหน้า (Page Header)

เป็นส่วนที่อยู่ตอนบนสุดของหน้า และเป็นส่วนที่สำคัญที่สุดของหน้า เพราะเป็นส่วนที่ดึงดูดผู้ชมให้ติดตามเนื้อหาภายในเว็บไซต์  มักใส่ภาพกราฟฟิกเพื่อสร้างความประทับใจ   ส่วนใหญ่ประกอบด้วย

  • โลโก้ (Logo) เป็นสิ่งที่เว็บไซต์ควรมี เป็นตัวแทนของเว็บไซต์ได้เป็นอย่างดี และยังทำให้เว็บน่าเชื่อถือ
  • ชื่อเว็บไซต์
  • เมนูหลักหรือลิงค์ (Navigation Bar) เป็นจุดเชื่อมโยงไปสู่เนื้อหาของเว็บไซต์

.

2.ส่วนของเนื้อหา (Page Body)

เป็นส่วนที่อยู่ตอนกลางของหน้า ใช้แสดงข้อมูลเนื้อหาของเว็บไซต์  ซึ่งประกอบด้วยข้อความ, ตารางข้อมูล ภาพกราฟิก วีดีโอ และอื่นๆ    และอาจมีเมนูหลัก หรือเมนูเฉพาะกลุ่มวางอยู่ในส่วนนี้ด้วย

สำหรับส่วนเนื้อหาควรแสดงใจความสำคัญที่เป็นหัวเรื่องไว้บนสุด ข้อมูลมีความกระชับ ใช้รูปแบบตัวอักษรที่อ่านง่าย และจัด Layout ให้เหมาะสมและเป็นระเบียบ

.

3. ส่วนท้ายของหน้า (Page Footer)

เป็นส่วนที่อยู่ด้านล่างสุดของหน้า จะมีหรือไม่มีก็ได้  มักวางระบบนำทางที่เป็นลิงค์ข้อความง่าย ๆ และอาจแสดงข้อมูลเพิ่มเติมเกี่ยวกับเนื้อหาภายในเว็บไซต์ เช่น เจ้าของเว็บไซต์, ข้อความแสดงลิขสิทธิ์, วิธีการติดต่อกับผู้ดูแลเว็บไซต์, คำแนะนำการใช้เว็บไซต์ เป็นต้น

.

โดยปกติส่วนหัวและส่วนท้ายมักแสดงเหมือนกันในทุกหน้าของเว็บเพจ

.

ตัวอย่าง แสดงส่วนประกอบของหน้าเว็บเพจ (trendypet.com)

page structure example

Next 3.3.2 โครงสร้างและรูปแบบของเว็บเพจ »

คุณอาจสนใจเรื่องนี้

แนวทางการดีไซน์บล็อกยุคใหม่ (ตอน2)

6. ส่วนแสดงความคิดเห็น(Comments) ส่วนความคิดเห็น เป็นบริเวณที่มีการถกกันเกี่ยวกับบทความจากผู้อ่าน/ผู้เยี่ยมชม หน้าที่ของผู้ออกแบบ จะต้องออกแบบให้บริเวณนี้ดูเป็นการสนทนากัน ด้วยการแยกแต่ละความคิดเห็นออกจากกัน อาจจะด้วยการกำหนดหมายเลขให้แต่ละความคิดเห็น วิธีนี้ยังช่วยให้ง่ายต่อการอ้างอิงความคิดเห็นต่าง ๆ อีกประการ คือแยกความคิดเห็นของเจ้าของบทความ ให้ต่างจากความคิดเห็นทั่วไป เพื่อเอาไว้คั่นว่าได้ตอบความเห็นของผู้อ่านถึงไหนแล้ว หรือ ...

10 ความคิดเห็น

  1. ข้อมูลเยี่ยมครับ

  2. เยี่ยมมัก ๆ
    ขอบคุณครับที่ทำไห้ผมมีงานส่งครับ

  3. อยากมีเว็ปเป็นของตัวเอง ลองทำแล้วก็ยังไม่ได้ :เศร้าจาย: ตอนนี้คิดว่าไม่ทำแล้วค่ะจ้างเขาดีก่า :เหอๆ:
    แวะมาอ่านที่นี่ได้ข้อมูลดีๆเยอะเลย ขอบคุณค่ะ

  4. น่ารัก

    แล้วถ้าเราทำเว้บส่วนตัวละคะ หน้าต่อไปที่เราจะลิงค์ต้องมีส่วนหัวด้วยใช่มั๊ยคะ

  5. ถ้าส่วน header ที่เป็นเมนูหลักเหมือนๆ กันในแต่ละหน้า จะทำให้ผู้ใช้คุ้นเคยกับการใช้งานเว็บได้ง่ายค่ะ ^^

  6. :เป้าหมาย: ข้อมูล!!! ขอบคุณพี่มากๆนะคะที่เอาข้อมูลที่มาบอกอ่ะ :เยี่ยม:

    เพราะพี่เอามาลงเค้าเลยมีการบ้านส่งครู ขอบคุณม้ากกกมากก :รักนะ:

    งั้นเค้าไปและ ขอบคุณอีกรอบข้อมูลพี่ยอดมากกกค่ะ อิอิ :บ๊ายบาย:

  7. ห้าๆๆ ยินดีค่ะ

  8. ดีมากมายๆๆๆๆๆ

  9. :เป้าหมาย

  10. ขอบคุณมากๆน๊าคะ ที่ทำให้เข้าใจอย่างถูกต้อง :อืม::ไม่น่าเลย::please::OK::ระรื่น::เป้าหมาย::เยี่ยม::รักนะ::หมาน้อย::ซีด::OK::บ๊ายบาย:

Leave a Reply

Your email address will not be published. Required fields are marked *