หลักการออกแบบเว็บเพจ

1. หน่ วยการเรี ยนที่ 2
หลักการออกแบบสร้ างเว็บเพจ
สาระการเรียนรู้
่
การสร้างเว็บเพจเพื่อประกอบเป็ นเว็บไซต์ให้แกองค์กรใด ๆ ผูสร้างเว็บจะต้องมีความรู ้
้
่ ั
ความเข้าใจหลักการออกแบบสร้างเว็บ เชนเดียวกบการออกแบบสร้างโปรแกรมทัวไป จะต้อง ่
่
สามารถปฏิ บติการออกแบบหน้าจอ เหมือนการเขี ยนแบบกอสร้ างให้ช่ างนําไปกอสร้ างจริ ง
ั ่
่ ่ ่ ี่
ตอหนวยการเรี ยนนี้ นักเรี ยนจะได้เรี ยนรู ้วาในเว็บไซต์มีอะไรที่เกยวข้อง ทั้ งที่ตองมีเป็ นมาตรฐาน
้
ั ี่ ่ ั ่ ่
และข้อจํากดที่เกยวข้อง เชนข้อมูลแบบใดที่นามาใช้กบเว็บได้ หรื อใช้อยางไรที่จะไมทําให้เว็บของ
ํ
่ ํ
เราโหลดข้อมูลได้ชา แล้วนําข้อมูลความรู ้เหลานั้ นทําการออกแบบ กาหนดรายละเอียดสร้างแบบ
้
หน้าเว็บเพจลงในกระดาษ โดยที่นกเรี ยนจะต้องฝึ กวิเคราะห์เนื้ อหา เขียนแผนโครงสร้างเนื้ อหา
ั
เขียนแผนการเชื่อมโยงหน้าเว็บ การออกแบบหน้าจอเว็บเพจ หรื อ Storyboard งานสวนนี้ จะเป็ น ่
่
จุดเริ่ มต้นของการออกแบบด้วยโปรแกรมสร้างเว็บในหนวยการเรี ยนตอไป ่
ผังความคิด (Mind Mapping)
ี ั
1. ความรู้ทวไปเกยวกบการสร้างเว็บเพจไซต์
ั
หลักการออกแบบเว็บเพจ
2. การออกแบบสร้างเว็บเพจ
2.1 การเขียนผังระดมความคิด 2.4 ออกแบบหน้าจอเว็บ
2.2 เขียนผังโครงสร้างเว็บไซต์ 2.3 ออกแบบระบบเนวิเกชัน
จดประสงค์ การเรียนรู้
ุ
1. บอกข้อมูลพื้นฐานที่ควรรู ้ในการออกแบบสร้างเว็บ ได้
2. บอกลําดับขั้นตอนการสร้างเว็บไซต์ได้
3. เขียนผังระดมความคิด จัดการเนื้ อหาสร้างเว็บไซต์ ได้
4. เขียนผังโครงสร้างของเว็บได้
5. เขียนผังการเชื่อมโยงหรื อผังเนวิเกชันของเว็บไซต์ได้
6. ออกแบบหน้าจอแสดงผลเว็บหรื อ Story board ได้

2. 26
หลักการออกแบบสร้ างเว็บ
่
การเริ่ มต้นสร้างเว็บไซต์จะต้องมีความรู ้และสามารถออกแบบระบบงานกอนเขียนด้วย
โปรแกรมจริ งดังนี้
1. ความร้ ู ทวไปในการออกแบบสร้ างเว็บเพจ
ั่
การสร้างเว็บเพจ คือ การออกแบบสร้างหน้าเอกสารอีเล็กทรอนิ กส์ เพื่อนําเสนอข้อมูล
ความรู ้ต่าง ๆ ขององค์กรหรื อข้อมูลสวนตัว ไปแสดงในเครื อขายอินเทอร์เน็ต แสดงออกทางหน้า
่ ่
่
จอคอมพิวเตอร์หรื อสื่ ออื่น ๆ ที่สามารถแสดงภาพได้ โดยการออกแบบที่กลาวถึงทัวไปจะคํานึงถึง ่
่ ่
การแสดงผลที่จอคอมพิวเตอร์ เทานั้ น การสงข้อมูลสื่ อสารบนอินเทอร์ เน็ต มีคาศัพท์เฉพาะที่ใช้
ํ
ี่ ่
เรี ยกชื่องานหรื อโปรแกรมที่เกยวข้อง ซึ่ งนักเรี ยนต้องทราบกอนเพื่อความเข้าใจเมื่อมีการกลาวถึง ่
่
คําศัพท์เหลานั้ น คําศัพท์ที่จะพบมากในการสร้างเว็บ มีดงนี้ ั
เว็บเพจ (Web page) คือ หน้าเอกสารอิเล็กทรอนิ กส์ ที่ใช้แสดงข้อมูลบนเครื อขาย ่
่
อินเทอร์เน็ต มีคุณสมบัติพิเศษกวาเอกสารทัวไปคือสามารถเชื่อมโยงไปยังหน้าเอกสารอื่น ๆ ได้
่
โฮมเพจ (Home page) คือ เว็บเพจที่ใช้เป็ นหน้าหลัก ในการเชื่อมโยงเข้าสู่ หน้าเนื้ อหา
อื่นในเว็บไซต์ เปรี ยบเหมือนหน้าสารบัญของหนังสื อ
่
เว็บไซต์ (Web site) คือ ชื่ อเรี ยกที่อยูของเว็บเพจ ที่ใช้แสดงเรื่ องราวในองค์กรทั้ งหมด
่ ็
เชน เว็บไซต์วิทยาลัยเทคนิ คราชบุรี www.rtc.ac.th กจะมีจานวนเว็บเพจแสดงข้อมูลของฝ่ ายงาน
ํ
่ ั
ตาง ๆ ในองค์กรจํานวนมาก โดยมีการลิงค์หรื อเชื่อมโยงกน จากรายการในหน้าโฮมเพจ
่
เว็บบราวเซอร์ คือ โปรแกรมที่ใช้เปิ ดเว็บเพจในอินเทอร์ เน็ต สามารถสงไฟล์ขอมูลไป ้
่
ยังเครื่ องคอมพิวเตอร์ ที่เชื่อมตอในอินเทอร์เน็ตได้โดยการแปลคําสังภาษา HTML แล้วแสดงผล
่
ออกทางหน้าจอได้ท้ ง ตัวอักษร รู ปภาพ ภาพเคลื่อนไหว เสี ยง หรื อ วีดิทศน์ โปรแกรมบราวเซอร์
ั ั
่
ในปั จจุบนมีหลายโปรแกรม เชน Internet Explorer , Mozilla Firefox , Opera , Safari เป็ นต้น
ั
ภาษา HTML (Hyper Text Markup Language) เป็ นโปรแกรมภาษาที่ใช้เขียนเว็บเพจ ซึ่ง
สามารถสร้างการเชื่ อมโยง (Link) ไปยังหน้าเว็บเพจอื่น ๆ ได้ เรี ยกการเชื่ อมโยงนี้ ว่า Hypertext
ในการเขียนเว็บจะมีการใช้โค้ดคําสังของโปรแกรมภาษาอื่นมาใช้ร่ วมกบภาษา HTML ได้เรี ยกวา
่ ั ่
ั ่
Script เพื่อเพิ่มเทคนิค สี สนให้กบหน้าเว็บ เชน Java , Java Script , MySQL , PHP, ASP เป็ นต้น
ั
่ ่
WYSIWYG (What You See Is What You Get) อานวา วิสสิ วิก คือ ชื่อเรี ยกโปรแกรม
สร้ า งเว็บทั้ ง หลายที่ สามารถออกแบบได้โ ดยนําข้อ ความ รู ป ภาพ หรื อ งานกราฟิ ก มาจัด วาง
บนหน้า เว็บ ที่ อ อกแบบ แล้ว สั่ ง แสดงผล ด้ว ยโปรแกรมบราวเซอร์ จ ะปรากฏผลบนเว็บ เพจ

3. 27
่ ่
เหมื อนการออกแบบที่ จ ัด วางไว้ในโปรแกรมสร้ า งเหลานั้ น ทํา ให้การสร้ า งเว็บ เพจงาย และ
่
รวดเร็ ว และโปรแกรมเหลานั้ นจะสร้างโค้ดคําสัง HTML ให้ดวย ทําให้ได้รับความนิยมใช้งาน
่ ้
่ ่
มาก ตัวอยางโปรแกรมแบบ WYSIWYG เชน FrontPage , Dreamweaver , Homesite, Namo
Editor เป็ นต้น
ํ ่ ่
เนื่ องจากข้อกาหนดมาตรฐานหรื อโปรโตคอลเรื่ องการสงและรับข้อมูลระหวางเครื่ อง
ั
Server กบโปรแกรมบราวเซอร์ และเงื่อนไขของลักษณะข้อมูลของเอกสารเว็บ ซึ่ งปั จจุบนสวน ั ่
่
ใหญเป็ นข้อมูลลักษณะมัลติมีเดี ย คือมีท้ งข้อความ ภาพนิ่ ง ภาพเคลื่อนไหว เสี ยง หรื อวีดีทศน์
ั ั
่ ่
การสร้างเว็บเพจจึงต้องใช้ภาษา HTML เป็ นโปรแกรมหลัก แตไมได้หมายความวาต้องสร้างเว็บ่
ด้วยโปรแกรมภาษา HTML เทานั้ น เพราะกลุ่มโปรแกรมแบบวิสสิ วิก ซึ่ งสามารถสร้าง และ
่
ออกแบบได้ดวยการใสเนื้ อหา รู ปภาพ หรื อกราฟิ กตาง ๆ ได้ง่ายกวา เมื่อออกแบบตามที่มองเห็น
้ ่ ่ ่
ในหน้าเอกสารที่ออกแบบ โปรแกรมจะสร้างโค้ด HTML ให้เลย จึงสามารถแสดงผลได้เหมือน
่
การเขียนด้วยโปรแกรมภาษา HTML ดังนั้ น นักออกแบบเว็บสวนใหญจึงหันไปใช้โปรแกรม ่
ํ ่ ้
แบบวิสสิ วิก โดยเรี ยนรู ้คาสัง HTML ไว้เพื่อสามารถปรับแกไขหรื อเพิ่มโค้ดคําสังให้งานสมบูรณ์
่
่ ็
ได้เทานั้ น ซึ่งหากผูออกแบบรายใดมีพ้ืนความรู ้ HTML มากกจะสามารถทํางานออกแบบสร้างเว็บ
้
ได้ดีกวาคนที่มีพ้ืนความรู ้คาสั่ง HTML น้อย แต่ปัญหานี้ ก็ไมยากสําหรับยุคปั จจุบน เนื่ องจากมี
่ ํ ่ ั
นักออกแบบเว็บจํานวนมากได้นาความรู ้ คําสัง HTML คําสัง Script เทคนิคการสร้างเว็บให้สวย
ํ ่ ่
่ ั
นาสนใจไปวางไว้บนอินเทอร์เน็ตให้ศึกษากนได้ สามารถเรี ยนรู ้ได้ตลอดเวลา การสร้างเว็บเพจจึง
เป็ นเรื่ องที่มายากอีกตอไป ่
2. การออกแบบสร้ างเว็บไซต์
่
การสร้างเว็บไซต์ให้แกองค์กรหนึ่ ง โดยทัวไปจะต้องทํางานเป็ นทีม การทํางานต้องมี
่
แผนการดําเนิ นการ มีการศึกษาองค์ประกอบสําคัญทั้ งระบบการสร้าง และข้อมูลขององค์กร เพื่อ
่
ให้การดําเนิ นการสร้างเว็บเป็ นไปอยางมีประสิ ทธิ ภาพ ตรงจุดประสงค์มากที่สุด มีการนําเสนอ
่ ่
แผนการดําเนินการ จัดงบประมาณ แบ่งภาระงานแกทีมได้อยางเหมาะสม สิ่ งที่จะต้องศึกษากอน ่
มีดงนี้
ั
ศึกษาความจําเป็ นในการสร้ าง ในโลกยุคสารสนเทศ ระบบสํานักงานเปลี่ยนเป็ น ระบบ-
่ ่ ่ ่
สํานักงานอัตโนมัติ องค์กรตาง ๆ จึงต้องการมีเว็บเพจเผยแพรผานเครื อขายอินเทอร์เน็ตเพื่อผลทาง
ิ
ธุรกจ และ การศึกษา

4. 28
้ ่
กล่ ุมเปาหมาย การออกแบบเว็บไซต์ เราจะต้องทราบวาใครคือผูใช้หรื อคนที่ตองการ
้ ้
่
ให้เข้ามาดูเว็บไซต์ของเรา เป้ าหมายที่เขาเหลานั้ นต้องการ เพื่อนําข้อมูลมาวิเคราะห์และออกแบบ
่
การนําเสนอ ทั้ งด้านเนื้ อหา สี สน การใสเทคนิคดึงความสนใจได้อยางเหมาะสม
ั ่
่
เนื้อหาของเว็บเพจ จะต้องศึกษาเนื้ อหา ข้อมูลอยางรอบคอบ ทั้ งข้อมูลภายในที่จะนํา
เผยแพร่ และข้อมูลทัวไป เมื่อสร้างแล้วต้องมีการดูแลเนื้ อหา การอัปเดตข้อมูลให้เป็ นปัจจุบน
่ ั
ส่ วนประกอบหน้ าโฮมเพจ หน้าหลักของเว็บไซต์เป็ นหน้าแรกของเว็บไซต์น้ นๆ เพราะ
ั
่
ผูเ้ ข้ามาเยียมชมได้เห็นกอนหน้าอื่นๆ ในการออกแบบจะต้องมีความประณี ต มีองค์ประกอบสําคัญ
่
่
ครบถ้วนตามมาตรฐาน เชน ชื่ อของเว็บเพจ ประวัติผจดทํา วัน/เวลาที่สร้าง การสงวนลิขสิ ทธิ
ู้ ั
การเชื่อมโยงภายในและภายนอก
ู ่
รปแบบการเชื่ อมโยง การสร้างการเชื่อมโยงถือวาเป็ นเครื่ องมือที่สาคัญของเว็บเพจ โดย
ํ
จะต้องสามารถสร้ างเชื่ อมโยงด้วยข้อความ รู ปภาพ หรื อวีดิทศน์ คือสามารถติดตามเนื้ อหาได้
ั
่ ้
ทุกจุดเพื่อให้ความสะดวกแกผูใช้มากที่สุด
ภาพกราฟิ ก (Image) รู ปภาพที่ สามารถนํามาใช้บนเว็บไซต์ จะได้จากที่ใด
่ ่ ิ
ขนาดความจุไฟล์ ไมทําให้เว็บโหลดช้า (ไมควรเกน 50 KB) และเลือกชนิดของไฟล์ให้เหมาะสม
การทดสอบเว็บเพจ การสร้างเว็บต้องมีการทดสอบตลอดเวลาในระหวางการสร้าง ่
จะทดสอบที่ไหน จะต้องเตรี ยมพื้นที่วางเว็บไซต์บนอินเทอร์เน็ตกอนหรื อไม่ ่
่
การเผยแพร่ เว็บเพจ เมื่อเว็บไซต์เผยแพรในอินเทอร์เน็ต การประชาสัมพันธ์จะใช้วิธีใด
การลงมือออกแบบสร้ างเว็บไซต์
มีลาดับขั้นการทํางานดังนี้
ํ
2.1 การเขียนผังระดมความคิด
การระดมความคิด สร้างกรอบเนื้ อหาเป็ นจุดเริ่ มต้นของการลงมือออกแบบสร้าง
เว็บไซต์ การทํางานจะต้องนําข้อมูลที่ได้ศึกษา และสํารวจมาทั้ งหมด เขียนลงในหน้ากระดาษ
โดยยังไมต้องคํานึ งถึงหมวดหมู่มากนัก ให้ทีมงานหรื อเจ้าของโครงการชวยสํารวจดูว่างานที่จะ
่ ่
นําเสนอในเว็บไซต์ครบหรื อไม่ การเขียนนิ ยมทําเป็ นผังระดมความคิด จะเขียนด้วยลายมือ
่ ้
เพราะสะดวกตอการปรับแกไขหรื อ เพิมเติมข้อมูล โดยข้อมูลที่ได้จากผังระดมความคิด จะถูกจัด
่
กลุ่มเป็ นหน้าเว็บเพจเสนอเรื่ องราวแตละสวนงานได้อยางชัดเจน ดังตัวอยางในรู ปที่ 2.1
่ ่ ่ ่

5. 29
รู ปที่ 2.1 แสดงการเขียนผังระดมความคิด
ที่มา :gotoknow.org/blog/9nuqa/40487
2.2 เขียนผังโครงสร้ างเว็บไซต์ (Site structure Design)
โครงสร้างเว็บไซต์(Site Structure Design)เป็ นแผนผังการลําดับเนื้ อหา หรื อการจัดวาง
ตําแหนงเว็บเพจทั้ งหมด โดยจะจัดเฉพาะรายการหลัก รายการรองที่สาคัญไว้ก่อน ผังโครงสร้าง
่ ํ
จะทําให้เรารู ้ว่าทั้ งเว็บไซต์ประกอบไปด้วยหัวข้อเนื้ อหาอะไร มีเว็บเพจหน้าใดเป็ นสวนหัวเรื่ อง
่
ี่ ั ํ
หลัก หน้า ใดเกยวข้อ งเชื่ อ มโยงถึ ง กน โดยจะทํา การกาหนดชื่ อ ไฟล์เ ว็บ เพจไว้ด้ว ยเลยกได้ ็
จะทําให้เรามองเห็นหน้าตาของเว็บไซต์เป็ นรู ปธรรมมากขึ้ น การวางโครงสร้างเว็บไซต์ที่ดีช่วยให้
้ ่ ้ ่
ผูชมไมสับสน ค้นหาข้อมูลที่ตองการได้อยางรวดเร็ ว วิธีจดโครงสร้างเว็บไซต์มีรูปแบบดังนี้
ั
่
แบบเรี ยงลําดับ (Sequence) เหมาะสําหรับเว็บไซต์ที่มีจานวนเว็บเพจไมมากนัก
ํ
หรื อเว็บไซต์ที่มีการนําเสนอข้อมูลแบบทีละขั้ นตอน
Home page Web page Web page Web page Web page
รู ปที่ 2.2 ผังโครงสร้างเว็บไซต์แบบระดับ
แบบระดับชั้ น (Hierarchy) เหมาะสําหรับเว็บไซต์ที่มีจานวนเนื้ อหาเว็บเพจมากขึ้ น
ํ
จะจัดเนื้ อหาเป็ นกลุ่มยอยแตละเรื่ อง ค้นหางาย เป็ นรู ปแบบที่มีการใช้มาก
่ ่ ่
Home page
Web page Web page Web page
Web page Web page Web page
รู ปที่ 2.3 ผังโครงสร้างเว็บไซต์แบบระดับชั้ น

6. 30
แบบผสม (Combination) เหมาะสําหรับเว็บไซต์ที่ซบซ้อนเนื้ อหามาก เป็ นการนําข้อดี
ั
ั
ของรู ปแบบ ทั้ งสองข้างต้นมาผสมกน
Home page
Web page Web page Web page
Web page Web page Web page Web page
รู ปที่ 2.4 ผังโครงสร้างเว็บไซต์แบบผสม
เมื่อพิจารณางานทั้ งหมดแล้วให้เลือกรู ปแบบโครงสร้างที่เหมาะสมออกแบบโครงสร้าง
่
เว็บไซต์ท้ งหมด ดังตัวอยางรู ปที่ 2.5
ั
หน้ า Home Page
ชื่อไฟล์ Index.html
หน้ าหลักของเว็บไซต์ หน้ าเว็บหน่ วยที่ 1 หน้ าเว็บหน่ วยที่ 2
เหมือนสารบัญชื่อ บทเรี ยนหน่วยที่ 1 บทเรี ยนหน่วยที่ 2
ชื่อไฟล์ home.html ชื่อไฟล์ unit1.html ชื่อไฟล์ unit2.html
หน้ าเว็บข้ อมลทั่วไป
ู หน้ าเว็บสมัครสมาชิก
แสดงข้ อมูลองค์กร/ผู้จดทํา
ั หน้ าสมัครสมาชิก
ชื่อไฟล์ about.html ชื่อไฟล์ register.html
่ ่ ่
รู ปที่ 2.5 แสดงตัวอยางผังโครงสร้างเว็บไซต์แตละสวน
2.3 ออกแบบระบบเนวิเกชัน หรือระบบการเชื่อมโยงเว็บ (Navigation Design)
โครงสร้างการเชื่อมโยงของหน้าเว็บ เป็ นการบอกให้รู้ว่าเว็บเพจแตละหน้ามีการลิงค์ถึงกน
่ ั
่ ่ ่
อยางไร การออกแบบการเชื่ อมโยงภายในเว็บไซต์จะต้องนําผังโครงสร้างแตละสวนมาพิจารณา
่ ่
เป็ นสวน ๆ ไปและลงรายละเอียดหน้าเนื้ อหาให้ครบ ดังตัวอยางรู ปที่ 2.6

7. 31
Index.html
home.html about.html regist.html Unit1.html Unit2.html
index.html index.html index.html index.html index.html
about.html home.html about.html about.html about.html
register.html register.html home.html register.html register.html
Unit1.html Unit1.html Unit1.html home.html home.html
Unit2.html Unit2.html Unit2.html Unit2.html Unit1.html
่
รู ปที่ 2.6 แสดงตัวอยางการเขียนผังการเชื่อมโยง(Navigation) ในเว็บไซต์
การเขียนผังเนวิเกชัน ถื อเป็ นงานสําคัญที่ จะทําให้เราและที มงานสามารถสร้ างเว็บได้
ี่ ั
มีสาระสําคัญเกยวกบการสร้างระบบนําทาง หรื อเนวิเกชัน ที่ควรรู ้คือ
่
1. เปาหมายของ ระบบเนวิเกชั น หรื อ ระบบนําทาง คือ ชวยให้ผเู ้ ข้าชมเข้าถึงข้อมูล
้
่ ่
ที่ตองการได้อยางรวดเร็ ว ไมหลงทาง ดังนั้ นองค์ประกอบของระบบนําทางจึงมี 2 สวนด้วยกนคือ
้ ่ ั
่
1.1. เครื่ องนําทาง คือเครื่ องมือสําหรับให้ผชมเปิ ดเข้าเว็บเพจตางๆ ภายในเว็บไซต์
ู้
ประกอบด้วย
ู ํ ่
- เมนหลัก เป็ นเมนูสาหรับไปยังหัวข้อเนื้ อหาหลักของเว็บไซต์ มักอยูในรู ปของ
่
ลิงค์ที่เป็ นข้อความหรื อภาพกราฟิ ก และจะต้องมีปรากฏอยูบนเว็บเพจทุกหน้า
-เมนเฉพาะกลุ่ม เป็ นเมนูที่เชื่อมโยงเว็บเพจปั จจุบนกบเว็บเพจอื่นภายในกลุ่ม
ู ั ั
่ ี่ ่ ่
ยอยที่มีเนื้ อหา เกยวเนื่องเทานั้ น มักอยูในรู ปของลิงค์ขอความหรื อกราฟิ ก
้
่
-เครื่องมือเสริม สําหรับชวยเสริ มการทํางานของเมนูได้หลากหลายรู ปแบบ เชน ่
่
ชองค้นหา (Search Box), เมนูแบบดร็ อปดาวน์ (Drop-down menu), อิมเพจแมพ (Image Map),
แผนที่เว็บไซต์ (Site Map)
่ ้ ํ
1.2. เครื่องบอกตําแหน่ ง (Location Indication) เป็ นสิ่ งที่ใช้แสดงวาผูชมกาลังอยูที่ ่
่ ่
ตําแหนงใดมีได้หลายรู ปแบบ เชน ข้อความ หรื อภาพกราฟิ กที่แสดง ชื่อเว็บเพจ หรื อข้อความบงชี้ ่
่
(ป้ ายเหลือง) ปกติที่เครื่ องบอกตําแหนงจะสร้างรวมไว้ กบเมนูเลย ั

8. 32
เมนูหลัก
เมนูเฉพาะกลุม
่
เครื่ องมือเสริม
รู ปที่ 2.7 ภาพแสดงเครื่ องมือระบบนําทาง (Navigation) ในเว็บไซต์
ที่มา: เว็บไซต์มหาวิทยาลัยแม่ฟาหลวง
้
2. ลักษณะระบบเนวิเกชันทีดี ่
่ ่ ่ ่ ่
- อยูในตําแหนงที่เห็นได้ชดและเข้าถึงงาย เชน สวนบนหรื อด้านขวาของเว็บเพจ
ั
่ ํ ั ่
- เข้าใจงายหรื อมีขอความกากบชัดเจนผูชมใช้ได้ทนทีโดยไมต้องเสี ยเวลาศึกษา
้ ้ ั
่
- มีความสมํ่าเสมอ และเป็ นระบบ ไมชวนให้สบสนหรื อกลับไปกลับมา
ั
่
- มีการตอบสนองเมื่อใช้งาน เชน เปลี่ยนสี เมื่อผูชมชี้ เมาส์หรื อคลิก
้
- มีจานวนรายการพอเหมาะ ไมมากเกนไป
ํ ่ ิ
่
- มีหลายทางเลือกให้ใช้ เช่น เมนู กราฟิ ก, เมนูขอความ, ชองค้นหาข้อมูล (Search
้
Box), เมนูแบบดร็ อปดาวน์ (Drop-down menu), แผนที่เว็บไซต์ (Site Map)
่
- มีลิงค์ให้คลิกกลับไปยังโฮมเพจได้เสมอ เพื่อให้ผชมกลับไปเริ่ มต้นใหมในกรณี ที่
ู้
่ ่ ่ ํ
หลงทางไมรู ้วาตัวเองอยูที่ตาแหนงใด่

9. 33
2.4 การออกแบบหน้ าจอเว็บเพจ (Page Design หรือ Story board)
่ ่
การออกแบบหน้าเว็บเพจ โดยนําโครงสร้างข้อมูลตางๆ มาจัดวางตําแหนงจําลอง ทั้ งด้าน
เนื้ อหาและกราฟิ กโดยผูออกแบบต้องเข้าใจงานกราฟิ ก การใช้สี เทคนิ คการออกแบบเว็บเพจ
้
ให้น่ าสนใจเป็ นอยางดี เพราะหน้าเว็บเพจทุ กหน้านี้ จะเป็ นสื่ อสร้ างการปฏิ สัมพันธ์กบผูเ้ ข้าชม
่ ั
วิธีที่สะดวกที่สุดในการออกแบบเว็บเพจ คือการใช้โปรแกรมสร้างภาพกราฟิ ก เชน Photoshop ่
่
หรื อ Fireworks วางเค้าโครงของหน้าเว็บและวาดองค์ประกอบตางๆ ขึ้ นมาให้ครบสมบูรณ์ในไฟล์
่่
เดียวเลยไมวาจะเป็ นโลโก้ ชื่อเว็บไซต์ ปุ่ มเมนู รู ปไอคอน แถบสี และอื่นๆ เนื่องจากโปรแกรม
่ ่
เหลานี้ มีเครื่ องมือพร้ อมสําหรั บงานดังกลาว อี กทั้ งในขั้ นตอนสุ ดท้ายเรายังสามารถบันทึ ก
่ ั
องค์ประกอบทั้ งหมดแยกเป็ นไฟล์กราฟิ กยอย ๆ (โดยใช้ Slice tool) พร้อมกบไฟล์ HTML ซึ่ ง
สามารถจะนําไปใช้ในโปรแกรมสร้างเว็บได้เลย โดยทัวไปหน้าเว็บเพจจะแบงออกเป็ น 3 สวน
่ ่ ่
ได้แก่ ดังนี้
่
1. ส่ วนหัว (Page Header) อยูตอนบนสุ ดของหน้า เป็ นบริ เวณที่สาคัญที่สุดเนื่องจาก
ํ
้ ่
ผูใช้จะมองเห็นกอนบริ เวณอื่น สวนใหญนิ ยมวางโลโก ้ ชื่อเว็บไซต์ ป้ ายโฆษณา ลิงค์สาหรับติดตอ
่ ่ ํ ่
หรื อลิงค์ที่สาคัญ และระบบนําทาง
ํ
2. ส่ วนของเนื้อหา (Page body) อยู่ตอนกลางหน้าใช้แสดงเนื้ อหาภายในเว็บเพจ
ซึ่ งอาจจะประกอบด้วยข้อความ, ภาพกราฟิ ก, ตารางข้อมูล และอื่นๆบางครั้ งเมนูหลักหรื อเมนู
เฉพาะกลุ่ม อาจมาอยูในสวนนี้ โดยมักจะวางไว้ดานซ้ายมือสุ ดเพื่อผูใช้จะมองเห็นงายกวา
่ ่ ้ ้ ่ ่
3. ส่ วนท้ าย (Page Footer) อยูล่างสุ ดของหน้าสวนใหญ่จะนิยมวางระบบนําทางภายใน
่ ่
เว็บไซต์แบบที่เป็ นลิงค์ขอความงายๆนอกจากนี้ ก็อาจจะมีชื่อของเจ้าของ ข้อความแสดงลิขสิ ทธิ
้ ่
และอีเมล์แอดเดรสของผูดูแลเว็บไซต์
้
Page Header
Page Body
Page Footer
่
รู ปที่ 2.8 แสดงลําดับการสร้างตามสัดสวนที่ออกแบบไว้
ที่มา : http://science.bu.ac.th/archive_html/archive_file/WebDevelopmentConcept.pdf

10. 34
ข้ อเสนอแนะ แนวคิดการออกแบบเว็บเพจ
สําหรับผูเ้ ริ่ มต้นสร้างเว็บเพจ จะมีปัญหาเรื่ องการออกแบบให้หน้าเว็บวาจะเป็ นแบบใดหรื อ ่
่
แนวไหนจึงจะดูดี ได้มาตรฐานไมดูเชย มีขอแนะนําที่จะชวยให้เราเกดความคิดดังนี้
้ ่ ิ
1. ศึกษาจากเว็บไซต์ อื่นๆ เป็ นวิธีที่ง่ายที่สุด เราสามารถศึกษาจากเว็บไซต์ต่างๆที่มีอยู่
แล้วบนอินเทอร์เน็ต แล้วเลือกรู ปแบบที่เหมาะสมมาประยุกต์ใช้ ไมวาจะเป็ นในเรื่ องของแนวคิด ่่
การออกแบบ การใช้สี ข้อความ กราฟิ ก รวมไปถึงเทคนิคที่ใช้ในการสร้างเว็บเพจ
่
2. ประยกต์ แบบจากสิ่ งพิมพ์ สิ่ งพิมพ์เชนนิ ตยสาร แผนพับ โปรชัวร์, โปสเตอร์ และ
ุ ่
่
หนังสื อบางเลม มีรูปแบบที่สวยงามสามารถนํามา ใช้เป็ นแนวทาง การออกแบบเว็บเพจได้
3. ข้ อความและภาพกราฟิ ก เว็บเพจที่มีขอความมากๆ ผูชมจะรู ้สึกกลัวและเบื่อ เพราะ
้ ้
็ ั
เมื่อเห็นข้อความกท้อ ในทางตรงกนข้ามถ้ามีเว็บเพจที่มีแตภาพอยางเดียว ผูชมกรู ้สึกสับสน ่ ่ ้ ็
่ ั ่
เชนกน เพราะบางทีดูรูปแล้วไมเข้าใจ สงสัยวาทําไมไมมีคาอธิ บาย ฉะนั้ นเราควรออกแบบ ่ ่ ํ
่ ่ ่
ในแนวกลางๆ ไมมีองค์ประกอบอยางใดอยางหนึ่งมากหรื อน้อยเกนไป ดูให้เหมาะสมกบเนื้ อหา ิ ั
4. เว็บเพจที่จัดแบบเรี ยบง่ ายแต่ ดูดี จะสร้ างความนาสนใจและนาเชื่ อถือกบผูชม ่ ่ ั ้
่ ่
นอกจากนี้ การวางตําแหนง ของเนื้ อหาตางๆ อยางมีระเบียบเป็ นสัดสวน กทําให้ผูชมหาข้อมูล ่ ่ ็ ้
ที่ตองการได้อยางรวดเร็ ว
้ ่
่
5. ให้ ความสํ าคัญกับส่ วนบนของเว็บเพจ สวนสําคัญที่สุดของเว็บเพจ คือด้านบนสุ ด
ของหน้า ซึ่ งผูชมจะสัมผัสได้ทนทีเมื่อเข้ามาที่หน้านั้ น สวนใหญ่จะนิยมจัดวางองค์ประกอบเป็ น
้ ั ่
ั ่
รู ปแบบที่คล้ายๆ กนในทุกหน้าเว็บ คือสวนของ ชื่อและโลโก้ของเว็บไซต์ ระบบนําทางได้แก่
เครื่ องมือค้นหาข้อมูลภายในเว็บไซต์ ลิงค์สาคัญ ป้ ายแบนเนอร์โฆษณา หรื อข้อความสําคัญ
ํ
6. สร้ างระดับความสํ าคัญของเนื้อหา การสร้างระดับความสําคัญขององค์ประกอบ
่ ่ ่ ่
ตางๆ ภายในเว็บเพจ ชวยเน้นให้ผชมเห็นวาสวนไหน สําคัญมาก สวนไหนสําคัญน้อย ซึ่ งผูชมจะ
ู้ ่ ้
รับรู ้ดวยสายตาจากการมองเห็น เชน หัวข้อขนาดใหญ่ แสดงวาสําคัญกวาข้อความขนาดเล็ก เป็ นต้น
้ ่ ่ ่
7. ใช้ กราฟิ กให้ พอดี การใช้กราฟิ กจะให้ผล 2 ด้านคือ ด้านหนึ่ งชวยให้สวยงามและ ่
่ ่ ่ ิ
นาสนใจ แตอีกด้านหนึ่ งถ้าเราใสกราฟิ กมากเกนไปจะเกดผลเสี ยคือดูรกตา และทําให้เว็บเพจ ิ
โหลดช้า ผูชม ต้องเสี ยเวลารอ
้
8. ออกแบบขนาดของเว็บเพจให้ พอดีกบหน้ าจอ การออกแบบเว็บเพจต้องคํานึงถึงกลุ่ม
ั
่ ่
ผูชมเป้ าหมายวาเขาปั จจุ บนใช้ขนาดจอภาพเทาใด และใช้ความละเอียดหน้าจอ (Resolution)
้ ั
ี่
กพิกเซล ซึ่งระดับรายละเอียดของเว็บเพจที่ใช้กนทัวไปปัจจุบนจะมี 3 ขนาดด้วยกนคือั ่ ั ั
- 800 x 600 พิกเซล ความละเอียดปานกลาง (ปริ มาณการใช้เริ่ มลดลง)
- 1024 x 768 พิกเซล ความละเอียดสูง (มีใช้มากที่สุด)
- 1280 x 1024 พิกเซล ความละเอียดสูง (มีใช้มากขึ้ นเรื่ อย ๆ)

11. 35
Summary: Optimize Web pages for 1024x768, but use a liquid layout that stretches
well for any resolution, from 800x600 to 1280x1024
จาก Jakob Nielsen's Alertbox, July 31, 2006:
.ที่มา: http://www.useit.com/alertbox/screen_resolution.html
่ ั
9. เลือกใช้ สีอย่ างเหมาะสม การออกแบบเว็บเพจให้สวยงามนั้ นจะขึ้ นอยูกบการเลือกใช้
ั ่
ชุดสี ให้ผสมกลมกลืนกน ทําให้เว็บเพจออกมาดูดี เชนสี พ้ืนเว็บเพจ, สี ขอความ และสี องค์ประกอบ
้
่ ั ั ่ ่
อื่นๆ เชนกราฟิ ก, ปุ่ มกดหรื อลิงค์ ซึ่ งควรออกมาในโทนเดียวกน การใช้สียงชวยบงบอกลักษณะ
้ ่
ของเว็บไซต์ดวยวาเนื้ อหาออกมาในแนวไหน
ขอให้นกเรี ยนนําข้อแนะนําตางๆ นี้ ไปใช้ในการออกแบบสร้างเว็บตามใบงานตาง ๆ แต่
ั ่ ่
่
ละหนวยการเรี ยน และนําไปพัฒนาการสร้างเว็บในระดับอาชีพตอไป ่
สรปบทเรียน การออกแบบสร้างเว็บเพจ จะต้องวางแผนการทํางานให้มีระบบ โดยสรุ ปคือเมื่อได้
ุ
่
ระดมความคิดรวบรวมข้อมูลเนื้ อหาที่ตองการนําเสนอทั้ งขององค์กรและสวนเสริ มเรี ยบร้อยแล้ว
้
นันคือเราได้โครงสร้างเว็บแล้ว ให้นามาเขียนเป็ นผังโครงสร้างเพื่อให้การมองภาพรวมชัดเจนขึ้ น
่ ํ
้ ี่ ้ ่
ในขั้ น นี้ จ ะต้อ งนํา เสนอให้ ผู มี ส่ วนเกยวข้อ งรั บ ทร าบเพื่ อ แกไขปรั บ ปรุ ง กอน หลัง จากนั้ น
็
คณะทํางานกลงมือออกแบบผังการเชื่อมโยงหรื อเนวิเกชันได้ ตามมาด้วยการออกแบบหน้าจอจริ ง
ั
ในการสร้ างเว็บเพจในเว็บไซต์หนึ่ ง ๆ จะมีรูปแบบที่ซ้ า ๆ กน การทํางานจริ งจะมีเครื่ องมือขอ
ํ
่
โปรแกรมสร้างเว็บชวย หรื อจะใช้โปรแกรมกราฟิ ก เชน Photoshop ่ ่
ซึ่ งนิ ยมใช้มาก มาชวย
ออกแบบจะทําให้งานที่มองวายาก ไมยากอยางที่คิด ดังนั้ นในกระบวนการสร้างที่สําคัญจะอยู่ที่
่ ่ ่
การวางแผน-ระบบงาน และการสร้างหน้าเว็บต้นแบบให้ดี มีมาตรฐาน ดูสบายตา มีสีสันเข้ากบ ั
่
ลักษณะงานเป็ นสําคัญ พึงระลึกไว้เสมอวางานสร้างเว็บไซต์จะเป็ นงานที่ผคนทั้ งโลกสามารถเข้า
ู้
มาชมงานของเราได้ ดังนั้ นงานจึงต้องมีมาตรฐานพอสมควร
………………………………………………..

12. 36
่
เพื่ อ ให้ นัก ศึ ก ษาทบทวนความรู ้ เ ดิ ม และความรู ้ ใ นบทเรี ย น ให้ ต อบคํา ถามตอไปนี้
่ ่
วาเรามีความรู ้ในสิ่ งตอไปนี้ เพียงใด
แบบฝึ กหัดประจําบทเรียน
่
คําสั่ ง ให้ตอบคําถามตอไปนี้
1. ให้สรุ ปข้อคิดเห็น การออกแบบหน้าเว็บที่ดีตองคํานึงถึงอะไรบ้างมา 5 ข้อ ้
............................................................................................................................................................
............................................................................................................................................................
...........................................................................................................................................................
ั
2. ให้เขียนขั้ นตอนการสร้างเว็บเพจ โดยเปรี ยบเทียบกบวงจรการพัฒนาโปรแกรม
วงจรการพัฒนาโปรแกรม (SDLC) วงจรการสร้างเว็บไซต์
.................................................................... ....................................................................
.................................................................... ....................................................................
..................................................................... .....................................................................
...................................................................... ......................................................................
.... .....
.... ....
ี่ ั
3. ให้แสดงความคิดเห็นเกยวกบการใช้สีบนหน้าเว็บเพจมา 3 ข้อ
……………………………………………………………………………………………………….
4. ให้บอกสวนประกอบสําคัญในหน้าโฮมเพจวาควรมีส่ วนประกอบอะไรบ้าง
่ ่
……………………………………………………………………………………………………….
ั ่ ั ่
1. ผังโครงสร้างเว็บ กบผังเนวิเกชัน แตกตางกนอยางไร
่
……………………………………………………………………………………………………….
……………………………………………………………………………………………………….
……………………………………………………………………………………………………….
……………………………………………………………………………………………………….

13. 37
อ้ างอิง
เกรี ยงศักดิ เจริ ญวงศ์ศกดิ,ออกแบบและสร้ างเว็บสวยด้ วย Dream weaver CS3,กรุ งเทพ ;
ั
ซีเอ็ดยูเคชัน,2551.
กฤษณะ สถิต , สร้ างโฮมเพจด้ วยตนเอง ,กรุ งเทพ:Info press.
บุญสื บ โพธิศรี และคณะ. การสร้ างเว็บเพจ. กรุ งเทพฯ: ศูนย์ส่ งเสริ มอาชีวะ, 2550.
่
ประภาพร ชางไม้, สร้ างเว็บสวยด้ วย Dreamweaver 8.0 , กรุ งเทพฯ : ดีจิอาร์ต.
พรเศก จิตต์แจ้ง , การสร้ างเว็บไซต์ ,กรุ งเทพ ; Success Media.
การสื บค้น :
http://science.bu.ac.th/archive_html/archive_file/WebDevelopmentConcept.pdf
http://www.cc.gatech.edu/gvu/user_surveys
http://www.nectect.or.th
http://www.skr.ac.th/dreamroot/homepage/chapter2.htm
ผลงานดี..อย่ ูท่ การฝึ กมาก..ตังใจจริง
ี