You are on page 1of 13

หน่ วยการเรี ยนที่ 2

หลักการออกแบบสร้ างเว็บเพจ
สาระการเรียนรู้
่ กรใด ๆ ผูสร้
การสร้างเว็บเพจเพื่อประกอบเป็ นเว็บไซต์ให้แกองค์
้ างเว็บจะต้องมีความรู ้
่ ยวกบการออกแบบสร้

ความเข้าใจหลักการออกแบบสร้างเว็บ เชนเดี
างโปรแกรมทัว่ ไป จะต้อง
่ างจริ ง
่ างให้ช่ างนําไปกอสร้
สามารถปฏิ บตั ิ การออกแบบหน้าจอ เหมือนการเขี ยนแบบกอสร้


ี่ อง ทั้ งที่ตอ้ งมีเป็ นมาตรฐาน
ตอ่หนวยการเรี
ยนนี้ นักเรี ยนจะได้เรี ยนรู ้วาในเว็
บไซต์มีอะไรที่เกยวข้
ี่ อง เชนข้
่ อมูลแบบใดที่นาํ มาใช้กบเว็
ั บได้ หรื อใช้อยางไร
่ ที่จะไมทํ่ าให้เว็บของ
และข้อจํากดัที่เกยวข้
่ ้ นทําการออกแบบ กาหนดรายละเอี

เราโหลดข้อมูลได้ชา้ แล้วนําข้อมูลความรู ้เหลานั
ยดสร้างแบบ
หน้าเว็บเพจลงในกระดาษ โดยที่นกั เรี ยนจะต้องฝึ กวิเคราะห์เนื้ อหา เขียนแผนโครงสร้างเนื้ อหา
่ ้ จะเป็ น
เขียนแผนการเชื่อมโยงหน้าเว็บ การออกแบบหน้าจอเว็บเพจ หรื อ Storyboard งานสวนนี
่ การเรี ยนตอไป

จุดเริ่ มต้นของการออกแบบด้วยโปรแกรมสร้างเว็บในหนวย

ผังความคิด (Mind Mapping)
ี ั สร้างเว็บเพจไซต์
1. ความรู้ทวั ไปเกยวกบการ
หลักการออกแบบเว็บเพจ

2.1 การเขียนผังระดมความคิด

2. การออกแบบสร้างเว็บเพจ

2.2 เขียนผังโครงสร้างเว็บไซต์

2.4 ออกแบบหน้าจอเว็บ

2.3 ออกแบบระบบเนวิเกชัน

จดประสงค์
การเรียนรู้

1. บอกข้อมูลพื้นฐานที่ควรรู ้ในการออกแบบสร้างเว็บ ได้
2. บอกลําดับขั้นตอนการสร้างเว็บไซต์ได้
3. เขียนผังระดมความคิด จัดการเนื้ อหาสร้างเว็บไซต์ ได้
4. เขียนผังโครงสร้างของเว็บได้
5. เขียนผังการเชื่อมโยงหรื อผังเนวิเกชันของเว็บไซต์ได้
6. ออกแบบหน้าจอแสดงผลเว็บหรื อ Story board ได้

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) อานวา
สร้ า งเว็บทั้ ง หลายที่ สามารถออกแบบได้โ ดยนําข้อ ความ รู ป ภาพ หรื อ งานกราฟิ ก มาจัด วาง
บนหน้า เว็บ ที่ อ อกแบบ แล้ว สั่ ง แสดงผล ด้ว ยโปรแกรมบราวเซอร์ จ ะปรากฏผลบนเว็บ เพจ

27
่ ้ น ทํา ให้การสร้ า งเว็บ เพจงาย
่ และ
เหมื อนการออกแบบที่ จ ัด วางไว้ในโปรแกรมสร้ า งเหลานั
่ ้ นจะสร้างโค้ดคําสัง่ HTML ให้ดว้ ย ทําให้ได้รับความนิ ยมใช้งาน
รวดเร็ ว และโปรแกรมเหลานั

มาก ตัวอยางโปรแกรม
แบบ WYSIWYG เชน่ FrontPage , Dreamweaver , Homesite, Namo
Editor เป็ นต้น



เนื่ องจากข้อกาหนดมาตรฐาน
หรื อโปรโตคอลเรื่ องการสงและ
รับข้อมูลระหวางเครื
่ อง


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

่ งหันไปใช้โปรแกรม
การเขียนด้วยโปรแกรมภาษา HTML ดังนั้ น นักออกแบบเว็บสวนใหญจึ

แบบวิสสิ วิก โดยเรี ยนรู ้คาํ สัง่ HTML ไว้เพื่อสามารถปรับแกไขหรื
อเพิ่มโค้ดคําสัง่ ให้งานสมบูรณ์
่ ้ น ซึ่งหากผูอ้ อกแบบรายใดมีพ้ืนความรู ้ HTML มากกจะสามารถทํ

ได้เทานั
างานออกแบบสร้างเว็บ


ได้ดีกวาคนที
่มีพ้ืนความรู ้คาํ สั่ง HTML น้อย แต่ปัญหานี้ ก็ไมยากสํ
าหรับยุคปั จจุบนั เนื่ องจากมี
นักออกแบบเว็บจํานวนมากได้นาํ ความรู ้ คําสัง่ HTML คําสัง่ Script เทคนิ คการสร้างเว็บให้สวย


นาสนใจไปวางไว้
บนอินเทอร์เน็ตให้ศึกษากนได้
สามารถเรี ยนรู ้ได้ตลอดเวลา การสร้างเว็บเพจจึง

เป็ นเรื่ องที่มายากอีกตอไป

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


แผนการดําเนินการ จัดงบประมาณ แบ่งภาระงานแกที่ มได้อยางเหมาะสม
สิ่ งที่จะต้องศึกษากอน
มีดงั นี้
ศึกษาความจําเป็ นในการสร้ าง ในโลกยุคสารสนเทศ ระบบสํานักงานเปลี่ยนเป็ น ระบบ่ ๆ จึงต้องการมีเว็บเพจเผยแพรผานเครื
่ ่
่ นเทอร์เน็ตเพื่อผลทาง
สํานักงานอัตโนมัติ องค์กรตาง
อขายอิ
ธุรกจิ และ การศึกษา

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


การนําเสนอ ทั้ งด้านเนื้ อหา สี สนั การใสเทคนิ
คดึงความสนใจได้อยางเหมาะสม

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

ผูเ้ ข้ามาเยีย่ มชมได้เห็นกอนหน้
าอื่นๆ ในการออกแบบจะต้องมีความประณี ต มีองค์ประกอบสําคัญ
ครบถ้วนตามมาตรฐาน เชน่ ชื่ อของเว็บเพจ ประวัติผจู ้ ดั ทํา วัน/เวลาที่สร้าง การสงวนลิขสิ ทธิ
การเชื่อมโยงภายในและภายนอก
่ นเครื่ องมือที่สาํ คัญของเว็บเพจ โดย
รปแบบ
การเชื่ อมโยง การสร้างการเชื่อมโยงถือวาเป็

จะต้องสามารถสร้ างเชื่ อมโยงด้วยข้อความ รู ปภาพ หรื อวีดิทศั น์ คือสามารถติดตามเนื้ อหาได้
ทุกจุดเพื่อให้ความสะดวกแกผู่ ใ้ ช้มากที่สุด
ภาพกราฟิ ก (Image)
รู ปภาพที่ สามารถนํามาใช้บนเว็บไซต์ จะได้จากที่ใด

ิ 50 KB) และเลือกชนิดของไฟล์ให้เหมาะสม
ขนาดความจุไฟล์ ไมทํ่ าให้เว็บโหลดช้า (ไมควรเกน

การทดสอบเว็บเพจ การสร้างเว็บต้องมีการทดสอบตลอดเวลาในระหวางการสร้
าง

จะทดสอบที่ไหน จะต้องเตรี ยมพื้นที่วางเว็บไซต์บนอินเทอร์เน็ตกอนหรื
อไม่
่ นเทอร์เน็ต การประชาสัมพันธ์จะใช้วิธีใด
การเผยแพร่ เว็บเพจ เมื่อเว็บไซต์เผยแพรในอิ

การลงมือออกแบบสร้ างเว็บไซต์
มีลาํ ดับขั้นการทํางานดังนี้

2.1 การเขียนผังระดมความคิด
การระดมความคิด สร้างกรอบเนื้ อหาเป็ นจุดเริ่ มต้นของการลงมือออกแบบสร้าง
เว็บไซต์ การทํางานจะต้องนําข้อมูลที่ได้ศึกษา และสํารวจมาทั้ งหมด เขียนลงในหน้ากระดาษ
่ สํารวจดูว่างานที่จะ
โดยยังไมต้่ องคํานึ งถึงหมวดหมู่มากนัก ให้ทีมงานหรื อเจ้าของโครงการชวย
นําเสนอในเว็บไซต์ครบหรื อไม่ การเขียนนิ ยมทําเป็ นผังระดมความคิด จะเขียนด้วยลายมือ
่ ปรับแกไขหรื

เพราะสะดวกตอการ
อ เพิ่มเติมข้อมูล โดยข้อมูลที่ได้จากผังระดมความคิด จะถูกจัด
่ ่
่ ดเจน ดังตัวอยางในรู

กลุ่มเป็ นหน้าเว็บเพจเสนอเรื่ องราวแตละสวนงานได้
อยางชั
ปที่ 2.1

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 ผังโครงสร้างเว็บไซต์แบบระดับชั้ น

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
เป็ นสวน

31

Index.html

home.html
index.html
about.html
register.html
Unit1.html
Unit2.html

about.html
index.html
home.html
register.html
Unit1.html
Unit2.html

regist.html
index.html
about.html
home.html
Unit1.html
Unit2.html

Unit1.html
index.html
about.html
register.html
home.html
Unit2.html

Unit2.html
index.html
about.html
register.html
home.html
Unit1.html


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

1. เป้าหมายของ ระบบเนวิเกชั น หรื อ ระบบนําทาง คือ ชวยให้
ผเู ้ ข้าชมเข้าถึงข้อมูล


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

ุม เป็ นเมนูที่เชื่อมโยงเว็บเพจปั จจุบนั กบเว็
่ ่มีเนื้ อหา เกยวเนื
ี่ ่องเทานั
่ ้ น มักอยูใ่ นรู ปของลิงค์ขอ้ ความหรื อกราฟิ ก
ยอยที

-เครื่องมือเสริม สําหรับชวยเสริ
มการทํางานของเมนูได้หลากหลายรู ปแบบ เชน่
่ นหา (Search Box), เมนูแบบดร็ อปดาวน์ (Drop-down menu), อิมเพจแมพ (Image Map),
ชองค้
แผนที่เว็บไซต์ (Site Map)
ํ งอยูท่ ี่
1.2. เครื่องบอกตําแหน่ ง (Location Indication) เป็ นสิ่ งที่ใช้แสดงวา่ผูช้ มกาลั
่ ้
ตําแหนง่ใดมีได้หลายรู ปแบบ เชน่ ข้อความ หรื อภาพกราฟิ กที่แสดง ชื่อเว็บเพจ หรื อข้อความบงชี
ั เลย
(ป้ ายเหลือง) ปกติที่เครื่ องบอกตําแหนง่จะสร้างรวมไว้ กบเมนู

32
เมนูหลัก

เมนูเฉพาะกลุม่

เครื่ องมือเสริม

รู ปที่ 2.7 ภาพแสดงเครื่ องมือระบบนําทาง (Navigation) ในเว็บไซต์
ที่มา: เว็บไซต์มหาวิทยาลัยแม่ฟ้าหลวง

2. ลักษณะระบบเนวิเกชันทีด่ ี
่ ่เห็นได้ชดั และเข้าถึงงาย
่ เชน่ สวนบนหรื

- อยูใ่ นตําแหนงที
อด้านขวาของเว็บเพจ
่ อมีขอ้ ความกากบชั
ํ ั ดเจนผูช้ มใช้ได้ทนั ทีโดยไมต้่ องเสี ยเวลาศึกษา
- เข้าใจงายหรื

- มีความสมํ่าเสมอ และเป็ นระบบ ไมชวนให้
สบั สนหรื อกลับไปกลับมา
- มีการตอบสนองเมื่อใช้งาน เชน่ เปลี่ยนสี เมื่อผูช้ มชี้ เมาส์หรื อคลิก


- มีจาํ นวนรายการพอเหมาะ ไมมากเกนไป
่ นหาข้อมูล (Search
- มีหลายทางเลือกให้ใช้ เช่น เมนูกราฟิ ก, เมนูขอ้ ความ, ชองค้
Box), เมนูแบบดร็ อปดาวน์ (Drop-down menu), แผนที่เว็บไซต์ (Site Map)

- มีลิงค์ให้คลิกกลับไปยังโฮมเพจได้เสมอ เพื่อให้ผชู ้ มกลับไปเริ่ มต้นใหมในกรณี
ที่
่ วเองอยูท่ ี่ตาํ แหนงใด

หลงทางไมรู่ ้วาตั

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

34
ข้ อเสนอแนะ แนวคิดการออกแบบเว็บเพจ

สําหรับผูเ้ ริ่ มต้นสร้างเว็บเพจ จะมีปัญหาเรื่ องการออกแบบให้หน้าเว็บวาจะเป็
นแบบใดหรื อ
่ เราเกดความคิ

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

่ ยว ผูช้ มกรู็ ้สึกสับสน
เมื่อเห็นข้อความกท้็ อ ในทางตรงกนข้
่ าใจ สงสัยวาทํ
่ าไมไมมี่ คาํ อธิ บาย ฉะนั้ นเราควรออกแบบ
เชน่กนั เพราะบางทีดูรูปแล้วไมเข้
่ ใดอยาง
่ หนึ่งมากหรื อน้อยเกนไป

ั ้ อหา
ในแนวกลางๆ ไมมี่ องค์ประกอบอยาง
ดูให้เหมาะสมกบเนื

่ ่ อถื อกบผู
ั ช้ ม
4. เว็บเพจที่จัดแบบเรี ยบง่ ายแต่ ดูดี จะสร้ างความนาสนใจและนาเชื

่ ระเบียบเป็ นสัดสวน
่ กทํ
็ าให้ผูช้ มหาข้อมูล
นอกจากนี้ การวางตําแหนง่ ของเนื้ อหาตางๆ
อยางมี

ที่ตอ้ งการได้อยางรวดเร็

่ าคัญที่สุดของเว็บเพจ คือด้านบนสุ ด
5. ให้ ความสํ าคัญกับส่ วนบนของเว็บเพจ สวนสํ

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

รู ปแบบที่คล้ายๆ กนัในทุกหน้าเว็บ คือสวนของ
ชื่อและโลโก้ของเว็บไซต์ ระบบนําทางได้แก่
เครื่ องมือค้นหาข้อมูลภายในเว็บไซต์ ลิงค์สาํ คัญ ป้ ายแบนเนอร์โฆษณา หรื อข้อความสําคัญ
6. สร้ างระดับความสํ าคัญของเนื้อหา การสร้างระดับความสําคัญขององค์ประกอบ
่ ภายในเว็บเพจ ชวยเน้
่ นให้ผชู ้ มเห็นวาสวนไหน
่ ่

ตางๆ
สําคัญมาก สวนไหนสํ
าคัญน้อย ซึ่ งผูช้ มจะ
่ าคัญกวาข้
่ อความขนาดเล็ก เป็ นต้น
รับรู ้ดว้ ยสายตาจากการมองเห็น เชน่ หัวข้อขนาดใหญ่ แสดงวาสํ

7. ใช้ กราฟิ กให้ พอดี การใช้กราฟิ กจะให้ผล 2 ด้านคือ ด้านหนึ่ งชวยให้
สวยงามและ




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

ผูช้ มเป้ าหมายวาเขา
และใช้ความละเอียดหน้าจอ (Resolution)
ั ว่ ไปปัจจุบนั จะมี 3 ขนาดด้วยกนคื
ั อ
กพิี่ กเซล ซึ่งระดับรายละเอียดของเว็บเพจที่ใช้กนทั
- 800 x 600 พิกเซล ความละเอียดปานกลาง (ปริ มาณการใช้เริ่ มลดลง)
- 1024 x 768 พิกเซล ความละเอียดสูง (มีใช้มากที่สุด)
- 1280 x 1024 พิกเซล ความละเอียดสูง (มีใช้มากขึ้ นเรื่ อย ๆ)

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

โปรแกรมสร้างเว็บชวย
ซึ่ งนิ ยมใช้มาก มาชวย


่ ่คิด ดังนั้ นในกระบวนการสร้างที่สําคัญจะอยู่ที่
ออกแบบจะทําให้งานที่มองวายาก
ไมยากอยางที
การวางแผน-ระบบงาน และการสร้างหน้าเว็บต้นแบบให้ดี มีมาตรฐาน ดูสบายตา มีสีสันเข้ากบั

ลักษณะงานเป็ นสําคัญ พึงระลึกไว้เสมอวางานสร้
างเว็บไซต์จะเป็ นงานที่ผคู ้ นทั้ งโลกสามารถเข้า
มาชมงานของเราได้ ดังนั้ นงานจึงต้องมีมาตรฐานพอสมควร
………………………………………………..

36

เพื่ อ ให้ นัก ศึ ก ษาทบทวนความรู ้ เ ดิ ม และความรู ้ ใ นบทเรี ย น ให้ ต อบคํา ถามตอไปนี

่ ความรู ้ในสิ่ งตอไปนี

วาเรามี
้ เพียงใด

แบบฝึ กหัดประจําบทเรียน

คําสั่ ง ให้ตอบคําถามตอไปนี

1. ให้สรุ ปข้อคิดเห็น การออกแบบหน้าเว็บที่ดีตอ้ งคํานึงถึงอะไรบ้างมา 5 ข้อ
............................................................................................................................................................
............................................................................................................................................................
...........................................................................................................................................................
2. ให้เขียนขั้นตอนการสร้างเว็บเพจ โดยเปรี ยบเทียบกบัวงจรการพัฒนาโปรแกรม
วงจรการพัฒนาโปรแกรม (SDLC)
....................................................................
....................................................................
.....................................................................
......................................................................
....
....

วงจรการสร้างเว็บไซต์
....................................................................
....................................................................
.....................................................................
......................................................................
.....
....

ี่ ั
3. ให้แสดงความคิดเห็นเกยวกบการใช้
สีบนหน้าเว็บเพจมา 3 ข้อ
……………………………………………………………………………………………………….

4. ให้บอกสวนประกอบสํ
าคัญในหน้าโฮมเพจวา่ ควรมีส่ วนประกอบอะไรบ้าง
……………………………………………………………………………………………………….
ั งเนวิเกชัน่ แตกตางกนอยางไร
่ ั ่
1. ผังโครงสร้างเว็บ กบผั
……………………………………………………………………………………………………….
……………………………………………………………………………………………………….
……………………………………………………………………………………………………….
……………………………………………………………………………………………………….

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

ผลงานดี..อย่ ูท่ กี ารฝึ กมาก..ตังใจจริง