3. 1.โลโก้ ( LOGO)
็
สิ่ งสาคัญที่จะช่วยให้ผเู ้ ข้าเว็บจดจาเว็บไซต์ของเราได้กคือ “โลโก้” นอกจากนี้เเล้ว
โลโก้ยงช่วยให้เว็บไซต์ของเราดูมีเอกลักษณ์อีกด้วย โดยเรานิยมวางตาเเหน่งโลโก้ไว้ที่มุม
ั
บนซ้ายเพราะเป็ นจุดที่สามารถสังเกตุได้ง่าย ซึ่ งจากการวิจยพบว่าวางตาเเหน่งโลโก้ที่มุมบน
ั
ซ้ายนั้นช่วยให้ผชมสามารถจดจาเว็บไซต์ของเราได้ถึง 84% เลยที่เดียว
ู้
คุณค่าของการวางตาแหน่งโลโก้
บนซ้าย (Upper Left) = 84%
บนขวา (Upper Right) = 6%
บนกลาง (Upper Center) = 6%
ที่อื่น ๆ (Other Position) = 4%
่
จะสังเกตได้วาการออกแบบโลโก้ของเเต่ละเว็บไซต์น้ นจะไม่ซบซ้อนมากนั้น แต่จะเน้นไป
ั ั
ในทางด้านการออกแบบให้เรี ยบง่ายและสามารถอ่านชื่อเว็บไซต์ได้ชดเจนมากกว่า เนื่องจาก
ั
ใช้ภาพโลโก้ที่ซบซ้อนอาจส่ งผลให้ผเู ้ ข้าชมไม่สามารถจดจาชื่อเว็บไซต์ของเราได้นนเอง
ั ั่

4. 2.เมนูหลัก (LINK MENU)
เมนูหลักเป็ นจุดเชื่อมโยงสิ่ งสาคัญ ๆ ที่รวบรวมไว้ในรู ปแบบ
ของเมนูปุ่มหรื อข้อความ โดยผูเ้ ข้าชมจะสามารถรับรู ้ได้วา ่
ภายในเว็บไซต์น้ ีมีเรื่ องราวที่น่าสนใจอย่างไรบ้าง เช่น News
(ข่าวใหม่ ๆ) ,Shopping และLink (เชื่อมโยงเว็บที่เกี่ยวข้อง) เป็ น
ั
ต้น รู ปแบบของเมนูหลักที่นิยมใช้กนมักเป็ นเมนูแบบแนวตั้ง
และเมนูแบบแนวนอนตามลาดับ

5. 3.โฆษณา (BANNER)
โฆษณานั้นเป็ นส่ วนที่สาคัญอีกเช่นเดียวกัน เพราะเว็บไซต์ที่มีโฆษณา
จะช่วยส่ งเสริ มภาพลักษณ์ ความน่าเชื่อถือ และช่วยกระตุนความสนใจ
้
เพราะมักมีการใช้ภาพเคลื่อนไหว (Gif animation) ประกอบซึ่งจะทาให้
เว็บไซต์ของเราดูตื่นตาตื่นใจมากยิงขึ้น จากการวิจยพบว่า
่ ั
ภาพเคลื่อนไหวยังช่วยให้เว็บไซต์ของเราดูน่าสนใจมากยิงขึ้น 30% เลย
่
ที่เดียว นอกจากนี้แล้วยังสามารถเเสดงถึงความนิยมของผูเ้ ข้าชมได้อีก
็
ด้วย แต่กไม่ควรให้มีโฆษณามากเกินไปและควรจัดวางตาเเหน่งให้
เหมาะสมด้วย

6. 4.ภาพประกอบเเละเนือหา (CONTENT)
้
เนื้อหาสาระที่น่ารู้เป็ นส่ วนสาคัญอย่างยิงที่จะทาให้ผเู้ ข้าชมอยากจะเข้า
่
เยียมชมเว็บไซต์ของเรามากขึ้นเเละใช้บริ การอย่างสม่าเสมอ เราจึงควร
่
อัพเดตเนื้อหาให้ใหม่สด มีรูปเเบบการจัดวางที่อ่านง่าย เนื้อหาไม่ยาว
หรื อสั้นจนเกินไป นอกจากนี้หากเราใช้ภาพประกอบที่สวยงามก็จะ
ช่วยให้เนื้อหาดูดึงดุดใจมากยิงขึ้น ซึ่งการใช้ภาพประกอบที่สวยงาม
่
และฟอนต์ที่อ่านง่ายจะช่วยให้เนื้อหาของเราน่าสนใจเพิ่มมากยิงขึ้นถึง่
40-45% การเเบ่งพื้นที่การใช้งานในหน้าโฮมเพจ

7. ขั้นตอนในการสร้ างโฮมเพจ

8. 1.ขอพืนที่โฮมเพจจาก WEB HOSTING
้
ในการขอพื้นที่โฮมเพจเราจะต้องเลือก Web Hosting
เสี ยก่อน โดยการเปรี ยบเทียบข้อดีขอเสี ยต่าง ๆ รวมถึงขนาด
้
ของพื้นที่ให้บริ การด้วย จากนั้นจึงลงทะเบียนขอพื้นที่โฮมเพจ
(ผูอ่านควรคิดลักษณะและชื่อโฮมเพจที่ตองการสร้างไว้ในใจ
้ ้
เสี ยก่อนเพื่อให้ลกษณะของโฮมเพจและชื่อที่ต้ งสัมพันธ์กน)
ั ั ั

9. 2.กาหนดลักษณะของโฮมเพจ
เมื่อเราขอพื้นที่โฮมเพจแล้ว ขั้นตอนต่อไปคือ การกาหนด
ลักษณะโฮมเพจของเรา โดยในตอนนี้เราต้องคิดและตัดสิ นใจว่าเราจะ
สร้างโฮมเพจเกี่ยวกับอะไรดี มีลกษณะโทนสี อะไร และใครจะเข้ามา
ั
เยียมชมในโฮมเพจของเราบ้าง เมื่อตัดสิ นใจได้แล้วก็จะเข้าสู่ ข้ นตอน
่ ั
ต่อไป

10. 3.ออกแบบหน้ าโฮมเพจด้ วย PHOTOSHOP
ในขั้นตอนนี้เราจะต้องมีภาพของหน้าโฮมเพจลาง ๆ ไว้ในใจ
แล้วว่าจะมีลกษณะอย่างไร มีส่วนประกอบอะไรบ้าง จากนั้นเราจึงมา
ั
เริ่ มต้นออกแบบและสร้างส่ วนประกอบต่าง ๆ ในหน้าโฮมเพจ ซึ่ง
ผูเ้ ขียนจะได้อธิบายรายละเอียดเพิ่มเติมในตอนต่อไป

11. 4.สร้ างโฮมเพจให้ สมบูรณ์ ด้วย DREAMWEAVER MX
เมื่อเราได้ออกแบบส่ วนประกอบต่าง ๆ ของหน้าโฮมเพจด้วย
โปรแกรม Photoshop เสร็ จเรี ยบร้อยแล้ว ต่อไปเราจะเข้าสู่การสร้าง
โฮมเพจด้วยโปรแกรม Dreamweaver MX เพื่อให้ได้โฮมเพจที่สมบูรณ์
ซึ่งเราก็จะได้เรี ยนรู้ในตอนต่อไปเช่นกัน

12. 5.อัพโหลดโฮมเพจขึนอินเตอร์ เน็ต
้
เมื่อเราสร้างโฮมเพจเรี ยบร้อยแล้วก็จะเข้าสู่กระบวนการอัพ
โหลดโฮมเพจเข้าสู่ Web Hosting ที่เราได้ขอพื้นที่โฮมเพจไว้
เรี ยบร้อยแล้วด้วยโปรแกรม Cute_FTP หรื อโปรแกรมที่ทาง เว็บไซต์มี
ให้บริ การขึ้นโหลดข้อมูล เพียงเท่านี้เราก็จะสามารถสร้างโฮมเพจได้
อย่างสมบูรณ์แบบแล้ว

13. การออกแบบโครงสร้างเว็บ
โครงสร้ างของเว็บโดยพืนฐานจะมี 2 ลักษณะ
้

14. 1. โครงสร้ างเว็บแบบตืน
้
เป็ นโครงสร้ างเว็บในลักษณะที่มีการเชื่อมโยงจากหน้ าแรกหรื อหน้ าที่หลัก
ไปยังเนือหาโดยตรง โดยไม่ มีเว็บเพจที่เป็ นเนือหาเชื่อมโยงต่ อไปอีกมากนัก
้ ้
สามารถกลับมายังหน้ าแรกหรื อหน้ าหลักของของเว็บไซต์ ได้ ในทันที อาจจะมีการ
เชื่อมโยงของเนือหาต่ อไปอีกบ้ างแต่ ไม่ ต่อเนื่องเป็ นลาดับลึกลงไปเหมือนกับ
้
โครงสร้ างของเว็บแบบลึก โครงสร้ างลักษณะนีจงเป็ นโครงสร้ างที่มีเนือหาแยกเป็ น
้ึ ้
หน่ วยย่ อย ๆ หรื อมีเนือหาเฉพาะเรื่องไม่ เกี่ยวข้ องกัน ทาให้ ไม่ ต้องเชื่อมโยงเว็บ
้
เพจต่ อไปเรื่ อย ๆ เว็บแบบตืนอาจจะมีเนือหามากก็ได้ แต่ ไม่ เชื่อมโยงลึกลงไปอีก
้ ้
การออกแบบเว็บเพจอาจเป็ นแบบหน้ าเดียวสัน ๆ หรื อแบบแถบเลื่อนยาวลงไป
้
มากก็ได้ เนือหาจบในหน้ านันและไม่ เชื่อมโยงไปอีก
้ ้

15. 1. โครงสร้ างเว็บแบบตืน
้
รู ปแสดง ลักษณะโครงสร้ างเว็บแบบตืน
้

16. 2. โครงสร้ างเว็บแบบลึก
เป็ นโครงสร้ างที่มีการเชื่อมโยงต่ อเนื่องกันไปในเนือหาเดียวกันโดยตลอด
้
หลาย ๆ เว็บ เนื่องจากมีเนือหามากและเป็ นลาดับต่ อเนื่อง ทาให้ โครงสร้ างของ
้
เว็บต้ องลงลึกไปเรื่ อย ๆ สาหรั บการเลื่อนแถบเลื่อนด้ านขวาของหน้ าจอไม่ ได้
หมายความว่ า โครงสร้ างเว็บนันจะเป็ นแบบลึก เพราะการเลื่อนแถบเลื่อนด้ านข้ าง
้
ขวาของจอภาพเป็ นการออกแบบหน้ าจอเว็บ ไม่ ใช่ โครงสร้ างภาพ รวมของเว็บ การ
เลื่อนแถบเลื่อนด้ านขวาของหน้ าจอภาพเป็ นการออกแบบเว็บแบบแถบเลื่อน เรี ยก
ได้ ว่า การออกแบบหน้ าจอภาพแบบแถบเลื่อน เป็ นแผ่ นเดียวยาวจากด้ านบนลงมา
ด้ านล่ าง แต่ การออก แบบโครงสร้ างเว็บแบบลึก เป็ นการออกแบบที่มีเว็บเพจ
หลาย ๆ เว็บเพจต่ อเนื่องจากเป็ นจานวนมาก

17. 2. โครงสร้ างเว็บแบบลึก

18. องค์ ประกอบที่ควรมีในเว็บเพจ

19. องค์ ประกอบทัวไป
่
1. ชื่อของเว็บเพจ (Title) 2. ประวัติและรูปภาพผู้จัดทา (Profile/Picture)
3. การเชื่อมโยงภายในและภายนอกเว็บ (Links) 4. การแสดงทีอยู่ของเว็บ : URL
่
5. วัน/เวลาทีสร้ างเว็บ (Date/Time)
่ 6. การปรับปรุงครั้งล่ าสุ ด (Update)
7. ผู้จัดทาเว็บ : (created by) 8. การสงวนลิขสิ ทธิ์ (Copy right)
9. การติดต่ อผู้จัดทาเว็บ (contract /e-mail) 10. สถานทีติดต่ อของเว็บ (Address)
่
11. บราวเซอร์ ทเี่ หมาะสมสาหรับการชม (Browser ) 12. ขนาดหน้ าจอทีเ่ หมาะสมในการชม
13. คาถามทีถูกถามบ่ อย FAQ (Frequency Asked Question)
่
14. ความช่ วยเหลือ (Help)

20. องค์ ประกอบพิเศษ
1. สมุดเยียม (Guest book)
่ 2. ฝากข้ อความ (Web board)
3. กระดานข่ าว (Bulletin Board) 4. กระทู้
5. แบบสารวจ (Web poll) 6. จานวนผู้เข้ าชม (Counter)
7. ห้ องสนทนา (Chat Room) 8. สถิตทุกประเภท (Web state)
ิ
9. เทคนิคพิเศษด้ วยโปรแกรมสคริปต์ (Java script, VBscript , cgi,asp,php)
10. โปรแกรมพิเศษสนับสนุน (Download)
11. สไลด์ สรุ ปบรรยาย (Presentation)

21. ใบงานที่ 3
เรื่ อง การออกแบบโครงสร้างเว็บ
คาชีแจง
้
1. แบ่งนักเรี ยนเป็ นกลุม กลุมละ 2 คน แล้ วให้ แต่ละกลุมทาการศึกษาค้ นคว้ าเกี่ยวกับ
่ ่ ่
รูปแบบการออกแบบโครงสร้ างเว็บไซต์ในอุดมคติของนักเรี ยน
2. ให้ สมาชิกในกลุมตกลงแบ่งงานศึกษาโครงสร้ างของเว็บไซต์ที่ถกต้ อง
่ ู
3. จากนันช่วยกันนาข้ อมูลที่ค้นคว้ า นามาสรุปโครงสร้ างและร่วมกันออกแบบโครงสร้ าง
้
เว็บไซต์ในอุดมคติของตนเองให้ ถกต้ องและสวยงามที่สด ตามฟอร์ มใบงานที่ 3
ู ุ
4. ให้ ใช้ คอมพิวเตอร์ ออกแบบเท่านัน และ พิมพ์ใบงานส่ง
้

22. ใบงานที่ 3
เรื่ อง การออกแบบโครงสร้างเว็บ
จานวนสมาชิกในกลุ่ม...............คน ชั้น...................วัน/เดือน/ปี ............................
ชื่อ ......................................................................... เลขที่ .......................
ชื่อ ......................................................................... เลขที่ .......................

23. ตัวอย่างการออกแบบเว็บไซต์