2. ทฤษฏีการออกแบบเว็บไซต์
THEORY OF WEBSITE DESIGN
จัดทำ�โดย
นายธีรวัฒน์ นามปะเส 533410080539
นางสาวนิภาวรรณ แสนหอม 533410080512
นางสาวอมร บรรจง 533410080532
นางสาวอุมาภรณ์ กงตะใน 533410080533
หมู่เรียนที่ 5 Group 1 ชั้นปีที่ 4
เสนอ
อาจารย์ปวริศ สารมะโน
สาขาวิชาคอมพิวเตอร์ศึกษา มหาวิทยาลัยราชภัฏมหาสารคาม

3. คำ�นำ�
หลักการออกแบบเว็บไซต์ เป็นหนังสือที่จัดทำ�ขึ้น เพื่อให้ศึกษาหลักการ
ทฤษฎี ต่างๆ เกี่ยวกับการออกแบบเว็บไซต์ได้เป็นอย่างดี และเมื่ออ่านหนังสือเล่ม
นี้แล้วสามารถออกแบบเว็บไซต์ให้สวยงานได้
หนังสือเล่มนี้ให้ข้อมูลเกี่ยวกับ แนวคิดและทฤษฎีเกี่ยวกับการสื่อสาร การ
ประชาสัมพันธ์ของเว็บไซต์ ความหมายของเว็บไซต์ การออกแบบและการพัฒนา
เว็บไซต์ ขั้นตอนการพัฒนาเว็บไซต์ ส่วนประกอบของหน้าเว็บไซต์ โดยผู้จัดทำ�ได้
เรียบเรียงเป็นลำ�ดับดับขั้นตอน ซึ่งง่ายต่อการศึกษา การเข้าใจ และการจดจำ�เป็น
อย่างดี
ผู้จัดทำ�ได้หวังเป็นอย่างยิ่งว่าหนังสือหลักการออกแบบเว็บไซต์ นี้จะเป็น
ประโยชน์ต่อผู้เรียน ผู้สอน สำ�หรับนำ�ไปใช้ ในการเรียนรู้และศึกษาด้วยตนเอง ขอ
ขอบคุณผู้เจ้าของข้อมูลทั้งด้านหนังสือคู่มือ และเว็บไซท์ที่มีส่วนช่วย ในการจัดทำ�
ทุกท่านมา ณ โอกาสนี้
ผู้จัดทำ�
หมู่เรียนที่ 5 Group 1 ชั้นปีที่ 4

4. สารบัญ
เนื้ิอหา หน้า
บทที่ 1 หลักการและทฤษฏีการสื่อสาร 1
บทที่ 2 การประชาสัมพันธ์ 4
บทที่ 3 เว็บไซต์ 6
บทที่ 4 การออกแบบและการพัฒนา 8
บทที่ 5 ขั้นตอนการพัฒนาเว็บไซต์ 12
บทที่ 6 การออกแบบโครงสร้างเว็บไซต์ (Site Structure Design) 14
บทที่ 7 กระบวนการพัฒนาเว็บไซต์ 19
บทที่ 8 ประเภทของเว็บไซต์ 21
บทที่ 9 การประเมินเว็บไซต์ 23
บทที่ 10 ทฤษฎีสีและการอกแบบเว็บไซต์ 24
บทที่ 11 การโปรโมทเว็บไซต์ 29
บรรณานุกรม

5. บทที่ 1
หลักการและทฤษฏีการสื่อสาร
การสื่อสาร
ชีวิตเป็นเรื่องของการเรียนรู้และสิ่งหนึ่งที่สำ�คัญและต้องมีการเรียนรู้คือ
ความสัมพันธ์ หรือ มนุษย์สัมพันธ์ เพราะทุกสิ่งทุกอย่างในโลกนี้มักเป็นบทเรียน
ของกันและกัน ถ้าไม่ใส่ใจเรียนรู้ซึ่งกันและกันก็จะอยู่ในโลกนี้ด้วยความยาก
ลำ�บาก การเรียนรู้เกี่ยวกับความสัมพันธ์ของบุคคลแต่เพียงอย่างเดียว โดยขาด
ศาสตร์ของการสื่อสารย่อมขาดศิลปะในการนำ�ไปปรับใช้ในชีวิตจริงให้ประสบ
ความสำ�เร็จได้ เพราะชีวิตจะมีคุณค่าและรู้สึกมีความสุขเมื่อได้แสดงออกอย่างที่
รู้สึก มีโอกาสเรียนรู้เรื่องราวและสิ่งใหม่ๆตามที่เราต้องการ
ความหมายของการสื่อสาร
การถ่ายทอดข้อมูลข่าวสารจากบุคคลฝ่ายหนึ่งที่เรียกว่าผู้ส่งสารไปยังยัง
บุคคลอีกฝ่ายหนึ่งที่เรียกว่าผู้รับสารโดยผ่านช่องทางในการสื่อสารโดยมีองค์
ประกอบที่สำ�คัญคือ ผู้ส่งสาร(Sender) สาร(Message) ช่องทาง(Channel) และ
ตัวผู้รับสาร (Reciever) ซึ่งมักเรียกกันว่า SMCR
องค์ประกอบของกระบวนการสื่อสาร
การสื่อสารมีองค์ประกอบที่สำ�คัญ 4 ประการ คือ (สมิต สัชฌุกร, 2547)
1. ผู้ส่งสาร (Source) คือ ผู้ตั้งต้นทำ�การสื่อสารกับบุคคล หรือกลุ่มบุคคล
อื่น ผู้ส่งสารอาจเป็นบุคคลเดียว หรืออาจจะมีมากกว่าหนึ่งคนก็ได้ องค์การหรือ
หน่วยงานที่เป็นผู้เริ่มกระทำ�การให้เกิดการสื่อสารก็ถือได้ว่าเป็นผู้ส่งสาร
2. สาร (Message) คือ สาระ เรื่องราว ข่าวสาร ที่ผู้ส่งสารต้องการส่งออก
ไปสู่บุคคล หรือกลุ่มบุคคลอื่น สารอาจเป็นสิ่งที่มีตัวตน เช่น ตัวหนังสือ ตัวเลข

6. รูปภาพ วัตถุต่าง ๆ หรือสัญลักษณ์ใด ๆ ที่สามารถให้ความหมายเป็นที่เข้าใจได้
3. ช่องทางที่จะส่งสาร หรือสื่อ (Channel or Medium) คือ เครื่องมือ
หรือช่องทางที่ผู้ส่งสารจะใช้ เพื่อให้สารนั้นไปถึงบุคคล หรือกลุ่มบุคคลรับ ช่องที่
จะส่งสาร หรือสื่อต่าง ๆ ที่จะนำ�สารไปยังผู้รับสารตามที่ผู้ส่งสารมุ่งหมาย อาจจะ
เป็นสื่อธรรมชาติ เช่น อากาศ เป็นช่องทางที่คลื่นเสียงผ่านไปยังผู้ฟังเสียง หรือ
อาจจะเป็นสื่อที่มนุษย์ประดิษฐ์ขึ้น เช่น วิทยุ โทรทัศน์ โทรศัพท์ ฯลฯ
4. ผู้รับสาร (Receiver) คือ บุคคลหรือกลุ่มบุคคลที่สามารถรับทราบสาร
ของผู้ส่งสารได้ผู้รับสารเป็นจุดหมายปลายทางของข่าวสารเป็นบุคคลสำ�คัญใน
การชี้ขาดว่า การสื่อสารเป็นผลหรือไม่
ทฤษฎีและแบบจำ�ลองการสื่อสาร
1. ทฤษฎีเชิงระบบพฤติกรรมให้ความสำ�คัญกับเรื่องของสื่อหรือช่องทางการ
สื่อสารสรุปสาระสำ�คัญได้ดังนี้คือ
1.1 อธิบายเกี่ยวกับพฤติกรรมที่เกิดขึ้น ในการส่งข่าวสาร จากผู้ส่ง ผ่านสื่อ
หรือช่องทาง ไปยังผู้รับ
1.2 เปรียบเทียบการสื่อสารของมนุษย์ได้กับการทำ�งานของเครื่องจักร
1.3 การสื่อสารเป็นกระบวนการต่อเนื่อง หรืออาจเป็นวงกลมและเกิดสิ่ง
ใหม่ๆ ขึ้นเสมอ
1.4 เจตนาการสื่อสาร ขึ้นอยู่กับปฏิกิริยาระหว่างผู้สื่อสารและสถานการณ์
แวดล้อม
2. ทฤษฎีพฤติกรรมการเข้ารหัสและถอดรหัส
ทฤษฎีนี้มีความเชื่อว่า สิ่งสำ�คัญในการสื่อสาร คือ กระบวนการสร้างรหัส
และถอดรหัสของผู้สื่อสาร ทั้งผู้รับและผู้ส่งสาร กิจกรรมที่สำ�คัญของการสื่อสาร
ได้แก่ การแปลเนื้อหาข่าวสารให้เป็นรหัสสัญญาณ (Encoding) การแปลรหัส
สัญญาณกลับเป็นเนื้อหา (Decoding)
2

7. และการแปลความหมายของข่าวสาร (Interpreting) สรุปสาระสำ�คัญของทฤษฏี
3. ทฤษฎีเชิงปฏิสัมพันธ์ สรุปสาระสำ�คัญดังนี้ คือ
3.1 ให้ความสำ�คัญกับกระบวนการเชื่อมโยง ระหว่างผู้รับและผู้ส่งสาร ซึ่ง
ปกติจะมีความสัมพันธ์ด้วยอำ�นาจภายนอกและมีปัจจัยเกี่ยวข้องหลายอย่าง
3.2 การสื่อสารจะขึ้นอยู่กับปัจจัยหลายด้าน บุคลิกภาพ ความน่าเชื่อของผู้
ส่งข่าวสารเป็นตัวกำ�หนดปฏิกิริยาของผู้รับสาร
3.3 พฤติกรรมทั้งหลายของคนเป็นผลมาจากพฤติกรรมทางการสื่อสาร
3.4 พฤติกรรมต่างๆ ของคนมีอิทธิพลต่อกระบวนการเชื่อมโยงระหว่างผู้รับ
และผู้ส่งสาร
4. ทฤษฎีเชิงบริบททางสังคมมีสาระสำ�คัญดังนี้ คือ
4.1 เน้นอธิบายเกี่ยวกับปัจจัยต่างๆ ที่มีอิทธิพลต่อการสื่อสาร
4.2 การสื่อสารเกิดขึ้นภายใต้อิทธิพลของปัจจัยทางสังคม วัฒนธรรม
4.3 กลุ่มสังคม องค์กร มีอิทธิพลต่อความคิด ความเชื่อ การตัดสินใจ
4.4 สังคมเป็นตัวควบคลุมการไหลของกระแสข่าวสาร เมื่อสังคมมีการ
เปลี่ยนแปลงกระแสข่าวสารก็เปลี่ยนแปลงไปด้วย
3

8. บทที่ 2
การประชาสัมพันธ์
วิวัฒนาการของการประชาสัมพันธ์ในประเทศไทยได้กำ�เนิดขึ้นอย่างเป็น
ทางการเกินกว่ากึ่งศตวรรษแล้ว โดยเริ่มตั้งแต่ปี พ.ศ. 2476 เมื่อรัฐบาลได้ก่อ
ตั้ง“กองโฆษณาการ”(กรประชาสัมพันธ์ในปัจจุบัน) เพื่อเผยแพร่ความรู้ความ
เข้าใจเกี่ยวกับการปกครองระบอบประชาธิปไตย และเพื่อเผยแพร่กิจกรรมต่าง ๆ
ของทางราชการให้แก่ประชาชน จากนั้นการประชาสัมพันธ์ก็ได้พัฒนาขึ้นเรื่อย ๆ
ความหมายของการประชาสัมพันธ์
การประชาสัมพันธ์” หมายถึง “การติดต่อสื่อสารระหว่างหน่วยงาน หรือ
องค์กรและกลุ่มประชาชนเป้าหมาย เพื่อสร้างความเข้าใจอันถูกต้องในอันที่จะ
สร้างความเชื่อถือ ศรัทธา และความร่วมมือตลอดจนความสัมพันธ์ที่ดี ซึ่งจะช่วย
ให้การดำ�เนินงานของหน่วยงานนั้นๆ บรรลุเป้าหมาย”
วัตถุประสงค์ของการโฆษณาสถาบันที่สำ�คัญมี 3 ประการคือ
1. เพื่อให้ได้รับการสนับสนุน การที่ผู้บริโภคจะให้การสนับสนุนกิจการของ
บริษัทหรือสถาบันด้วยความเต็มอกเต็มใจนั้น บริษัทหรือสถาบันจะต้องมีการบอก
กล่าวให้ผู้บริโภคหรือผู้ซื้อได้ทราบการดำ�เนินงาน ของบริษัท นโยบาย, กิจกรรม,
แผนงาน และความสำ�เร็จของบริษัท เพื่อให้เกิดความยอมรับ ความนิยม ความ
เลื่อมใสและความศรัทธาแล้ว ย่อมบังเกิดความร่วมมือและความสนับสนุนใน
กิจกรรมของบริษัทอย่างแน่นอน
2. เพื่อการประชาสัมพันธ์ ในบางครั้งการโฆษณาบริษัทจะมีลักษณะ
เป็นการประชาสัมพันธ์ เพื่อแจ้งข่าวสารข้อมูลต่าง ๆ จากบริษัทไปยังกลุ่ม
ประชาชนเป้าหมาย เช่น การฉลองครบรอบบริษัท การโฆษณาการแสดงงบดุล
ประจำ�ปีของบริษัท การบริจาคสินค้าของบริษัทให้แก่หน่วยงานต่าง ๆ ฯลฯ โดย
ผ่านเครื่องมือและสื่อมวลชนประเภทต่าง ๆ

9. 3. เพื่อบริการสาธารณะ เป็นการโฆษณาที่แสดงจุดยืนหรือแนวความคิดต่อ
เรื่องสำ�คัญ ๆ ที่เป็นประโยชน์ต่อสังคมโดยส่วนรวม หน่วยงานทั้งภาครัฐและภาค
เอกชน มักจะแสดงความคิดเห็นอย่างเปิดเผยต่อประเด็นหรือปัญหาของสังคม
5

10. บทที่ 3
เว็บไซต์
ความหมายของเว็บไซต์
ประภาพร ช่างไม้ (2548: 5) กล่าวว่า “เว็บไซต์ คือ ทุกสิ่งทุกอย่างที่
ประกอบกันขึ้นมาเป็นเว็บ ซึ่งหมายความถึงเว็บเพจ (Webpage) ทุกหน้า รูปทุก
รูปที่นำ�เข้ามาใช้ แฟ้มข้อมูลเสียง รูปเคลื่อนไหวและส่วนประกอบอื่นๆ ที่นำ�มาใช้
เช่น โปรแกรมที่เขียนขึ้น สามารถเปรียบเทียบ ได้ว่าเว็บไซต์เป็นเสมือนหนังสือทั้ง
เล่ม”
กฤษณะ สถิต (2549: 23) กล่าวว่า “เว็บไซต์ คือ สถานที่สำ�หรับเก็บ
เอกสารเอชทีเอ็มแอล (HTML) หรือเว็บเพจสำ�หรับการเผยแพร่ข่าวสาร บน
อินเทอร์เน็ต” อีกทั้งดวงพร เกี๋ยงคำ� (2549: 22) กล่าวว่า “เว็บไซต์ คือ กลุ่มของ
เว็บเพจ ที่เกี่ยวข้องสัมพันธ์กัน เช่น กลุ่มของเว็บเพจที่ให้ข้อมูลเกี่ยวกับประวัติ
รวมทั้งสินค้าและบริการ ของบริษัทหนึ่ง เป็นต้น ภายในเว็บไซต์นอกจากเว็บเพจ
หรือแฟ้มข้อมูลเอชทีเอ็มแอลแล้ว ยังประกอบด้วยแฟ้มข้อมูลชนิดอื่นๆ ที่จำ�เป็น
สำ�หรับสร้างเป็นหน้าเว็บเพจ เช่น รูปภาพ สื่อประสม(Multimedia) แฟ้มข้อมูล
โปรแกรมภาษาสคริปต์ (Script) และแฟ้มข้อมูลข้อมูลสำ�หรับให้ดาวน์โหลด
เป็นต้น”
สุปราณี ธีรไกรศรี (2542: 18) กล่าวว่า “เว็บไซต์ คือ เครื่องคอมพิวเตอร์ ที่
อาจใช้ระบบปฏิบัติการใดๆ ก็ได้ เช่น วินโดวส์ เอ็นที (Windows NT) หรือยูนิกซ์
(UNIX) เป็นต้น และมีโปรแกรมจัดการที่ทำ�งานอยู่ในเครื่องนั้นเพื่อให้เครื่อง ดัง
กล่าวทำ�หน้าที่เป็นเครื่องบริการเว็บ นอกจากนี้ยังทำ�หน้าที่เก็บเว็บเพจที่อยู่ใน
รูปของแฟ้มข้อมูลเอกสารที่เขียนด้วยภาษาเอชทีเอ็มแอล อยู่ด้วย” ซึ่งสอดคล้อง
กับ วิเศษศักดิ์ โครตอาษา (2542: 180) ที่กล่าวว่า “เว็บไซต์เป็นแหล่งที่รวมของ
เว็บเพจทั้งหมดที่จัดอยู่ในกลุ่มเดียวกันของหน่วยงานหรือองค์กรหนึ่งๆ

11. เดียวกันของหน่วยงานหรือองค์กรหนึ่งๆ เมื่อใดที่ใช้โปรแกรม ค้นดู (Browser)
โปรแกรมค้นดูจะทำ�การติดต่อกับเว็บไซต์ที่เก็บเว็บเพจนั้น เพื่อทำ�การโอนย้ายเว็บ
ที่ต้องการมายังเครื่องของผู้ใช้” นอกจากนี้ จักรชัย โสอินทร์และอุรุพงษ์
กัลยาสิริ (2542: 18) กล่าวว่า “เว็บไซต์
คือ สถานที่อยู่ของเว็บเพจที่โปรแกรมค้นดู
จะสามารถไปดึงข้อมูลมาเปิดให้ดูได้ โดย
เว็บไซต์นี้จะอยู่ในเครื่องที่ให้บริการที่เรียกว่า
เครื่องบริการเว็บ” จากความหมายข้างต้น
สรุปได้ว่า เว็บไซต์ คือ แหล่งรวบรวมเว็บเพจ
ขององค์กร หนึ่งๆ ซึ่งจะประกอบด้วยสื่อ
ประสมต่างๆ ทั้งข้อความ ภาพนิ่ง ภาพเคลื่อนไหว และเสียง เป็นที่อยู่ของ
สารสนเทศบนอินเทอร์เน็ต สามารถเข้าถึงได้โดยผ่านเวิลด์ไวด์เว็บ
7

12. บทที่ 4
การออกแบบและการพัฒนา
การออกแบบเว็บไซต์ให้มีประสิทธิภาพและตรงกับความต้องการมากที่สุดมี
ขั้นตอนดังต่อไปนี้ (ประเวศน์วงษ์ คำ�ชัย และพิรพร หมุนสนิท, 2550 : 60-62)
1. การกำ�หนดขอบเขต
การพัฒนาเว็บไซต์ไม่ได้มีหลักการหรือการกำ�หนดขอบเขตที่ตายตัว แต่จะ
ขึ้นอยู่กับเป้าหมายและความต้องการในการใช้งานเว็บไซต์นั้นว่าสร้างเพื่ออะไร
เช่น เพื่อประชาสัมพันธ์บริษัทหรือเพื่อขายสินค้า เป็นต้น ซึ่งผู้พัฒนาจะต้องศึกษา
ความต้องการของผู้ใช้อย่างละเอียดก่อน เพื่อใช้เป็นแนวทางในการสร้างเว็บไซต์
ให้สามารถตอบสนองความต้องการของผู้ใช้ได้อย่างถูกต้อง โดยสามารถจำ�แนก
ขั้นตอนการกำ�หนดขอบเขตที่ผู้พัฒนาเว็บไซต์ส่วนใหญ่ยึดถือเป็นหลักการ
2. กำ�หนดเป้าหมาย
การกำ�หนดเป้าหมายหรือวัตถุประสงค์จะชวยให้ผู้พัฒนาสามารถกำ�หนด
ทิศทางการดำ�เนินงาน งบประมาณ รวมทั้งระยะเวลาได้อย่างเหมาะสม ซึ่งถือได้
ว่าเป็นขั้นตอนที่สำ�คัญที่สุดของการดำ�เนินงานทั้งหมด อย่างไรก็ตามเพื่อให้ผล
งานตรงตามความต้องการของลูกค่ามากที่สุด จึงควรคำ�นึงและให้ความสำ�คัญกับ
ปัจจัย ดังนี้
3. กำ�หนดโครงสร้างข้อมูล
การกำ�หนดโครงสร้างข้อมูลภายในเว็บไซต์จะช่วยให้ผู้พัฒนาสามารถ
กำ�หนดลำ�ดับการทำ�งานต่างๆ ภายในเว็บไซต์ได้ง่าย และสะดวกยิ่งขึ้น รวมไปถึง
ทำ�ให้ลูกค้าเห็นโครงสร้างของเว็บไซต์แนวทางการออกแบบ

13. และรูปแบบของการทำ�งานต่างๆ ซึ่งโดยส่วนใหญ่จะเป็นงานบนกระดาษก่อนที่
จะมีการพัฒนาจริง หลังจากที่ทราบข้อมูลเบื้อต้นแล้วสามารถกำ�หนดโครงสร้าง
ข้อมูลและเพ็จเนื้อหาในเว็บไซต์ได้
4. กำ�หนดการสืบทอดข้อมูล
การกำ�หนดโครงสร้างข้อมูลเว็บไซต์ดังกล่าวข้างต้น เพียงอย่างเดียวจะยังไม่
สามารถมองเห็นความสัมพันธ์ของแต่ละเพ็จได้ ซึ่งผู้พัฒนาจะต้องทำ�การเปลี่ยน
โครงสร้างข้อมูลไปเป็นการสืบทอดข้อมูล หรือรูปแบบโครงสร้างข้อมูลแบบต้นไม้
(Tree Structure) ก่อน ด้วยการแบ่งเนื้อหาที่ต้องการนำ�มาเสนอบนเว็บไซต์ออก
เป็นกลุ่มหรือหมวดหมู่ โดยเริ่มต้นกำ�หนดกลุ่มหลักก่อน จากโครงสร้างข้อมูลที่
กำ�หนดไว้ข้างต้น
5. สร้างไซต์แม็ป (Site Map)
การสร้างไซต์แม็ป (Site Map) เป็นการกำ�หนดโครงสร้างการเชื่อมโยง
ของเพ็จในเว็บไซต์ เพื่อความสะดวกในการค้นหา หรือเป็นการนำ�องค์ประกอบ
ทั้งหมดในเว็บไซต์มาจัดลำ�ดับเป็นลำ�ดับชั้นที่เกี่ยวข้อง
6. แบ่งเฟรมพื้นที่การแสดงผล
การสร้างไซต์แม็ปข้างต้นยังไม่ใช้ขั้นตอนสุดท้ายในการวางแผนเพื่อพัฒนา
เว็บไซต์ผู้พัฒนาจะต้องสร้างเพ็จสำ�หรับแสดงเนื้อหาของแต่ละส่วนด้วยการแบ่ง
เฟรม ซึ่งการแบ่งเฟรมเป็นการแบ่งพื้นที่การ
แสดงเนื้อหาบนเพ็จมีรูปแบบที่แตกต่างกันออกไปตามความต้องการของผู้พัฒนา
หรือลูกค่าในที่นี้จะยกตัวอย่างการแบ่งเฟรมเพ็จ index.html ของเว็บไซต์ บริษัท
ณัฐพร จำ�กัด โดยแบ่งข้อมูลที่ต้องการเก็บภายในเพ็จได้ดังนี้
6.1 โลโก้ (Logo) ของบริษัท ณัฐพร จำ�กัด
9

14. 6.2 เมนูหลัก (Menu) หรือการเชื่อมโยงหลัก
6.3 เนื้อหาหลัก
6.4 การเชื่อมโยงที่เกี่ยวข้อง
6.5 การเชื่อมโยงย่อย
6.6 โฆษณาต่างๆที่ต้องการแสดงบนเพ็จ
6.7 ข้อมูลลิขสิทธ์
7. สร้างเว็บเพจแต่ละหน้าตามที่ออกแบบ
หลังจากที่ได้ออกแบบเว็บเพจแต่ละหน้าเรียบร้อยแล้ว ขั้นตอนนี้จะเป็นการ
สร้างหน้าเว็บเพจตามที่ได้ออกแบบไว้ดังกล่าวข้างต้น ด้วยภาษาหรือเครื่องมือ
ต่างๆ ตามที่ผู้พัฒนาเว็บไซต์ต้องการ เช่น HTML,
PHP, ASP หรือโปรแกรม Dreamweaver เป็นต้น
8. ลงทะเบียนขอพื้นที่เว็บไซต์
เมื่อสิ้นสุดขั้นตอนการพัฒนาเว็บไซต์ทั้งหมดเรียบร้อยแล้ว ขั้นตอนต่อไปคือ
การนำ�เว็บไซต์นั้นไปเผยแพร่บนเครือข่ายอินเทอร์เน็ต เพื่อให้ผู้คนสามารถเข้ามา
ชมเว็บไซต์ได้ โดยการนำ�ขึ้นไปเก็บไว้ที่เว็บเซิร์ฟเวอร์องค์กร หรือขอพื้นที่เว็บไซต์
กับผู้ให้บริการเว็บโฮสติ้ง (Web Hosting) ซึ่งมีทั้งฟรีและเสียค่าใช้จ่าย(ประชา
พฤกษประเสริฐ, 2550 : 11)
9. อัฟโหลดเว็บไซต์
เมื่อพัฒนาเว็บไซต์เสร็จสมบูรณา และมีพื้นที่สำ�หรับเก็บเว็บไซต์ที่ต้องการ
นำ�ไปเผยแพร่สู่อินเทอร์เน็ตเรียบร้อยแล้ว ขั้นตอนสุดท้ายคือการอัฟโหลดไฟล์
เว็บไซต์ทั้งหมดขึ้นไปเก็บไว้ในพื้นที่ที่ได้จัดเตรียมไว้ด้วยโปรแกรม FTP หรือเครื่อง
มือที่ผู้ให้บริการได้จัดเตรียมไว้ให้การสร้างเว็บไซต์ที่ดีนั้น ต้องอาศัยหลักการ
10

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

16. บทที่ 5
ขั้นตอนการพัฒนาเว็บไซต์
ดวงพร เกี๋ยงคำ� (2549: 27) กล่าวถึงกระบวนการพัฒนาเว็บไซต์ไว้เป็นขั้น
ตอนดังนี้
การออกแบบเว็บไซต์ที่ดี คือ การออกแบบให้เหมาะสมกับกลุ่มเป้าหมาย
และลักษณะของเว็บไซต์ โดยคำ�นึงถึงความสะดวกในการใช้งานของผู้ใช้เป็นหลัก
เว็บไซต์ที่ออกแบบอย่างมีประสิทธิภาพ ควรมีความเรียบง่าย มีความสม่ำ�เสมอ
สะท้อนเอกลักษณ์และลักษณะขององค์กรนั้นได้ มีเนื้อหาที่มีประโยชน์ มีระบบ
Navigation ที่ใช้งานง่าย มีลักษณะที่น่าสนใจและดึงดูด มีโลโก้และชื่อเว็บไซต์
ทุกหน้า เข้าถึงข้อมูลได้โดยไม่ต้องเข้าเมนูที่ซับซ้อน สามารถเข้าถึงข้อมูลให้
ได้มากที่สุดโดยไม่ต้องบังคับให้ผู้ใช้ต้องติดตั้งโปรแกรมเพิ่มเติม หรือเลือกใช้
บราวเซอร์ชนิดใดชนิดหนึ่ง สามารถแสดงผลในหน้าจอที่มีความละเอียดต่างๆกัน
ได้ มีคุณภาพในการออกแบบ เลี่ยงลาย background ที่ลายตา เลือกสี back-
ground และสี font ให้เหมาะสม ขนาดตัวอักษรพอเหมาะ รองรับเว็บไซต์ที่
อาจมีข้อมูลเพิ่มขึ้นเรื่อยๆ ลิงค์ต่างๆเชื่อมโยงไปยังหน้าที่มีอยู่จริง ไม่มี “broken
link” ควรใช้เวลาในการดาวน์โหลดน้อย แสดงผลเร็ว และหมั่นปรับปรุงเนื้อหา
อย่างสม่ำ�เสมอ (ธวัชชัย ศรีสุเทพ 2544: 14-23; ดวงพร เกี๋ยงคำ� และวงศ์ประชา
จันทร์สมวงศ์ 2546: 26-43; Sklar 2003; Kentie 2002)
กระบวนการในการพัฒนาเว็บไซต์ สามารถแบ่งได้เป็น 5 ขั้นตอนที่สำ�คัญ
คือ (ธวัชชัย ศรีสุเทพ 2544; ดวงพร เกี๋ยงคำ� และวงศ์ประชา จันทร์สมวงศ์
2546; Geest 2001)
ขั้นตอนที่ 1 : สำ�รวจปัจจัยสำ�คัญ (Research)
เริ่มต้นจากการศึกษาหน่วยงานเจ้าของเว็บไซต์ เพื่อกำ�หนดเป้าหมายของ
เว็บไซต์ที่ชัดเจน ศึกษาผู้ใช้ เพื่อให้สามารถระบุกลุ่มผู้ใช้

17. และความต้องการของผู้ใช้ และศึกษาคู่แข่ง เพื่อกำ�หนดกลยุทธ์ในการ
แข่งขัน
ขั้นตอนที่ 2 : พัฒนาเนื้อหา (Site Content)
หลังจากการศึกษาข้อมูลเบื้องต้นและกำ�หนดวัตถุประสงค์ของเว็บไซต์แล้ว
จะสามารถกำ�หนดแนวทางในการออกแบบเว็บไซต์ ขอบเขตเนื้อหาและการใช้
งาน เพื่อรวบรวมข้อมูลและเนื้อหาของเว็บไซต์ต่อไป
ขั้นตอนที่ 3 : พัฒนาโครงสร้างเว็บไซต์ (Site Structure)
ในขั้นตอนนี้ จะนำ�ข้อมูลที่รวบรวมได้มาจัดระบบข้อมูล โดยจัดทำ�แผนผัง
โครงสร้างข้อมูล และออกแบบระบบ Navigation เพื่อออกแบบการใช้ข้อมูลและ
แนวทางการท่องเว็บที่จะพัฒนา
ขั้นตอนที่ 4 : ออกแบบและพัฒนาหน้าเว็บ (Visual Design)
ในขั้นตอนนี้ จะทำ�การออกแบบลักษณะหน้าตาของเว็บเพจตามหลักการ
ออกแบบเว็บที่ดี มีการจัดแบ่งพื้นที่ในหน้าเว็บเพจ และมีรูปแบบโครงสร้างข้อมูล
อยู่ในหน้าเว็บที่ออกแบบนี้ ในขั้นตอนนี้ จะได้เว็บเพจต้นแบบที่จะใช้พัฒนาเป็น
เว็บไซต์ต่อไป
ขั้นตอนที่ 5 : พัฒนาและดำ�เนินการ (Production and Operation)
ในขั้นตอนนี้ จะทำ�การพัฒนาเว็บเพจที่ออกแบบ เป็นเว็บไซต์ที่สมบูรณ์
จนถึงการ upload เว็บไซต์สู่เครื่องแม่ข่ายเพื่อเผยแพร่สู่อินเทอร์เน็ต และกำ�หนด
แนวทางการดูแลเนื้อหาและพัฒนาต่อไป
13

18. บทที่ 6
การออกแบบโครงสร้างเว็บไซต์ (Site Structure Design)
โครงสร้างเว็บไซต์ (Site structure)
เป็นแผนผังของการลำ�ดับเนื้อหาหรือการจัดวางตำ�แหน่งเว็บเพจทั้งหมด ซึ่ง
จะทาให้คุณรู้ว่าทั้งเว็บไซต์ประกอบไปด้วยเนื้อหาอะไรบ้าง และมี เว็บเพจหน้า
ไหนที่เกี่ยวข้องเชื่อมโยงถึงกัน ดังนั้นการออกแบบโครงสร้างเว็บไซต์จึงเป็นเรื่อง
สำ�คัญ เปรียบเสมือนกับการเขียนแบบอาคารก่อนที่จะลงมือสร้าง เพราะจะทำ�ให้
คุณมองเห็นหน้าตาของเว็บไซต์เป็นรูปธรรมมากขึ้น สามารถออกแบบระบบเนวิเก
ชั่นได้เหมาะสม และมีแนวทางการทางานที่ชัดเจนสำ�หรับขั้นตอนต่อไป นอกจาก
นี้โครงสร้างเว็บไซต์ที่ดีช่วยให้ผู้ชมไม่สับสนและค้นหาข้อมูลที่ต้องการได้อย่าง
รวดเร็ว
วิธีจัดโครงสร้างเว็บไซต์สามารถทาได้หลายแบบ แต่แนวคิดหลักๆที่นิยมใช้
กันมีอยู่ 2 แบบ คือ (ในทางปฏิบัติอาจมีการใช้หลายแนวคิดผสมผสานกันก็ได้)
- จัดตามกลุ่มเนื้อหา (content-based structure)
- จัดตามกลุ่มผู้ชม (user-based structure)
รูปแบบของโครงสร้างเว็บไซต์
สามารถวางรูปแบบโครงสร้างเว็บไซต์ได้หลายแบบตามความเหมาะสม เช่น
- แบบเรียงลาดับ (Sequence) เหมาะสาหรับเว็บไซต์ที่มีจานวนเว็บเพจไม่
มากนัก หรือเว็บไซต์ที่มีการนาเสนอข้อมูลแบบทีละขั้นตอน
- แบบระดับชั้น (Hierarchy) เหมาะสาหรับเว็บไซต์ที่มีจานวนเว็บเพจมาก
ขึ้น เป็นรูปแบบที่พบได้ทั่วไป
- แบบผสม (Combination) เหมาะสาหรับเว็บไซต์ที่ซับซ้อน เป็นการนา
ข้อดีของรูปแบบทั้ง 2 ข้างต้นมาผสมกัน

19. การออกแบบระบบเนวิเกชั่น (Site Navigation Design)
เป้าหมายของ ระบบนำ�ทาง หรือ เนวิเกชั่น คือช่วยให้ผู้ชมเข้าถึงข้อมูลที่
ต้องการได้อย่างรวดเร็วและไม่หลงทาง ดังนั้นองค์ประกอบของระบบนาทางจึงมี
2 ส่วนด้วยกันคือ
1. เครื่องนำ�ทาง (Navigation Controls)
คือเครื่องมือสาหรับให้ผู้ชมเปิดไปยังเว็บต่างๆภายในเว็บไซต์ โดยแยกได้
เป็น
- เมนูหลัก เป็นเมนูสาหรับเปิดไปยังหัวข้อเนื้อหาหลักของเว็บไซต์ มักอยู่ใน
รูปของกลุ่มลิงค์ที่เป็นข้อความหรือภาพกราฟิก และควรมีปรากฏอยู่บนเว็บเพจ
ทุกหน้า
- เมนูเฉพาะกลุ่ม เป็นเมนูที่เชื่อมโยงเว็บเพจปัจจุบันกับเว็บเพจอื่นภายใน
กลุ่มย่อยที่มีเนื้อหาเกี่ยวเนื่องเท่านั้น มักอยู่ในรูปของกลุ่มลิงค์ข้อความหรือ
กราฟิกเช่นกัน
- เครื่องมือเสริม สาหรับช่วยเสริมการทางานของเมนู มีได้หลากหลายรูป
แบบ เช่น ช่องค้นหาข้อมูล (search box), เมนูแบบดร็อปดาวน์ (drop-down
menu),อิมเมจแม็พ (image map) , แผนผังเว็บไซต์
2. เครื่องบอกตำ�แหน่ง (Location Indicator)
เป็นสิ่งที่ใช้แสดงว่าขณะนี้ผู้ชมกำ�ลังอยู่ที่ตำ�แหน่งใดในเว็บไซต์ เครื่องบอก
ตำ�แหน่งมีได้หลายรูปแบบ เช่น ข้อความหรือภาพกราฟิกที่แสดงชื่อเว็บเพจ
ลักษณะระบบเนวิเกชั่นที่ดี
1. อยู่ในตำ�แหน่งที่เห็นได้ชัดและเข้าถึงง่าย เช่น ส่วนบนหรือด้านซ้ายของ
เว็บเพจ
2. เข้าใจง่ายหรือมีข้อความกากับชัดเจน ผู้ชมใช้ได้ทันทีโดยไม่ต้องเสียเวลา
ศึกษา
15

20. 3. มีความสม่ำ�เสมอ และเป็นระบบ ไม่ชวนให้สับสนหรือกลับไปกลับมา
4. มีการตอบสนองเมื่อใช้งาน เช่น เปลี่ยนสีเมื่อผู้ชมชี้เมาส์หรือคลิก
5. มีจานวนรายการพอเหมาะ ไม่มากเกินไป
6.มีหลายทางเลือกให้ใช้ เช่น เมนูกราฟิก,เมนูข้อความ,ช่องค้นหาข้อมูล
(search box),เมนูแบบดร็อปดาวน์ (drop-down menu), แผนผังเว็บไซต์ (site
map)
7.มีลิงค์ให้คลิกกลับไปยังโฮมเพจได้เสมอ เพื่อให้ผู้ชมกลับไปเริ่มต้นใหม่ได้
ในกรณีที่หลงทางไม่รู้ว่าตัวเองอยู่ที่ตำ�แหน่งใด
การออกแบบเว็บเพจ (Page Design)
วิธีที่สะดวกที่สุดในการออกแบบเว็บเพจ ก็คือใช้โปรแกรมสร้างภาพกราฟิก
เช่น Photoshop หรือ Fireworks วางเค้าโครงของหน้าและสร้างองค์ประกอบ
ต่างๆขึ้นมาให้ครบสมบูรณ์ในภาพเดียวไม่ว่าจะเป็น
โลโก้,ชื่อเว็บไซต์,ปุ่มเมนู,ปุ่มไอคอน,แถบสี,ภาพเคลื่อนไหว และอื่นๆ เนื่องจาก
โปรแกรมเหล่านี้มีเครื่องมือพร้อมสาหรับงานดังกล่าว อีกทั้งในขั้นสุดท้ายคุณ
สามารถจะบันทึกองค์ประกอบทั้งหมดแยกเป็นไฟล์กราฟิกย่อยๆพร้อมกับไฟล์
HTML เพื่อนาไปใช้เป็นต้นแบบในโปรแกรมสร้างเว็บเพจได้ทันที
ส่วนประกอบของหน้าเว็บเพจ
โดยทั่วไปหน้าเว็บเพจจะแบ่งออกเป็นส่วนหลักๆ ดังนี้
ส่วนหัว (Page Header) อยู่ตอนบนสุดของหน้า เป็นบริเวณที่สำ�คัญที่สุด
เนื่องจากผู้ใช้จะมองเห็นก่อนบริเวณอื่น ส่วนใหญ่นิยมใช้วางโลโก้ ชื่อเว็บไซต์ ป้าย
โฆษณา ลิงค์สำ�หรับการติดต่อหรือลิงค์ที่สำ�คัญ และระบบนำ�ทาง
ส่วนของเนื้อหา (Page Body)อยู่ตอนกลางหน้า ใช้แสดงเนื้อหาของเว็บเพจ
นั้นซึ่งอาจจะประกอบไปด้วยข้อความ ภาพกราฟิก ตารางข้อมูล และอื่นๆ
16

21. บางครั้งเมนูหลักหรือเมนูเฉพาะกลุ่มอาจมาอยู่ในส่วนนี้ก็ได้ โดยมักจะวางไว้ด้าน
ซ้ายมือสุดเนื่องจากผู้ใช้จะมองเห็นได้ง่ายกว่า
ส่วนท้าย (Page Footer) อยู่ด้านล่างสุดของหน้า ส่วนใหญ่จะนิยมใช้
วางระบบนาทางแบบที่เป็นลิงค์ข้อความง่ายๆ นอกจากนี้ก็อาจจะมีชื่อเจ้าของ
ข้อความแสดงลิขสิทธิ์และอีเมล์แอดเดรสของผู้ดูแลเว็บไซต์
แถบข้าง (Side Bar) ในปัจจุบันนิยมออกแบบด้านข้างของหน้าเว็บเพจให้
น่าสนใจเพื่อใช้วางป้ายแบบเนอร์ หรือลิงค์แนะนาเกี่ยวกับการบริการของเว็บไซต์
เป็นต้น
ส่วนประกอบของเว็บไซต์
ภายในเว็บไซต์หนึ่งๆ มีเว็บเพจจำ�นวนหลายหน้า ในแต่ละหน้ามีทั้งข้อความ
และสื่อประสมรวมกันส่วนประกอบของเว็บไซต์สรุปได้ว่ามีส่วนประกอบต่างๆ ที่
จำ�เป็นดังนี้
1 ตัวอักษร เป็นข้อความปกติ โดยสามารถตกแต่งให้สวยงามและมีลูกเล่น
ต่างๆ เช่นโปรแกรมประมวลคำ� เป็นต้น
2 กราฟิก ประกอบด้วยรูปภาพ ลายเส้น ลายพื้น ต่างๆ มากมาย
3 สื่อประสม ประกอบด้วยข้อความ ภาพนิ่ง ภาพเคลื่อนไหว เสียง และ
วีดีทัศน์
4 ตัวนับ ใช้นับจำ�นวนผู้ที่เข้ามาเยี่ยมชมเว็บเพจ
5 จุดเชื่อมโยง ใช้เชื่อมโยงไปยังเว็บเพจของตนเองหรือเว็บเพจของคนอื่น
6 แบบฟอร์ม เป็นแบบฟอร์มที่ให้ผู้เข้าเยี่ยมชมกรอกรายละเอียดแล้วส่ง
กลับมายัง เว็บเพจ
7 กรอบ เป็นการแบ่งจอภาพเป็นส่วนๆ แต่ละส่วนก็จะแสดงข้อมูลที่แตก
ต่างกัน และเป็นอิสระจากกัน
17

22. 8 แผนที่ภาพ เป็นรูปภาพขนาดใหญ่ที่กำ�หนดส่วนต่างๆ บนรูป เพื่อเชื่อม
โยงไปยังเว็บเพจอื่นๆ
9 จาวาแอปเพล็ด (Java applets) เป็นโปรแกรมสำ�เร็จรูปเล็กๆ ที่ใส่ลง
ในเว็บเพจ สามารถเพิ่มลักษณะพิเศษ การโต้ตอบ เช่น เพิ่มเกมส์หรือหน้าต่าง
สำ�หรับป้อนหรือดูข้อมูล บนเว็บเซิร์ฟเวอร์ได้ เป็นต้น
18

23. 1. กำ�หนดเป้าหมายและวางแผน (Site definition and planning)
4. ลงมือสร้างและทดสอบ (Construction and testing)
2. วิเคราะห์และจัดโครงสร้างข้อมูล (Analysis and information)
5. เผยแพร่และส่งเสริมให้เป็นที่รู้จัก (Publishing and promotion)
3. ออกแบบเว็บเพจและเตรียมข้อมูล (Page design and content)
6. ดูแลและปรับปรุงต่อเนื่อง (Maintenance and innovation)
ภาพประกอบ ขั้นตอนการพัฒนาเว็บไซต์
1. กำ�หนดเป้าหมายและวางแผน การพัฒนาเว็บไซต์ควรกำ�หนดเป้าหมาย
และวางแผนไว้ล่วงหน้า เพื่อให้การทำ�งานในขั้นต่อไปมีแนวทางที่ชัดเจน เรื่อง
หลักๆ ที่ควรทำ�ในขั้นตอนนี้ประกอบด้วย
1.1 กำ�หนดวัตถุประสงค์ของเว็บไซต์ เพื่อให้ผู้ใช้เข้าใจว่าเว็บไซต์นี้ต้องการ
นำ�เสนอหรือต้องการให้เกิดผลอะไร
1.2 กำ�หนดกลุ่มผู้ใช้เป้าหมาย เพื่อจะได้รู้ว่าผู้ใช้หลักคือใคร และออกแบบ
เว็บไซต์ให้ตอบสนองความต้องการผู้ใช้กลุ่มนั้นให้มากที่สุด
1.3 เตรียมแหล่งข้อมูล เนื้อหาหรือข้อมูลคือสาระสำ�คัญที่แท้จริงของ
เว็บไซต์ ต้องรู้ว่าข้อมูลที่จำ�เป็นต้องใช้มาจากแหล่งใดบ้าง เช่น ถ้าเป็นเว็บข่าวสาร
บทที่ 7
กระบวนการพัฒนาเว็บไซต์
การพัฒนาเว็บไซต์อย่างมีหลักการ ดำ�เนินการตามขั้นตอนที่ชัดเจน จะ
ทำ�ให้ผู้สร้างเว็บไซต์สามารถใส่ใจรายละเอียดที่จำ�เป็นในแต่ละขั้นตอนของการ
ออกแบบ ซึ่งจะช่วยป้องกันข้อผิดพลาดที่อาจเกิดขึ้น

24. ข่าวนั้นจะมาจากแหล่งใด มีลิขสิทธิ์หรือไม่ เป็นต้น
1.4 เตรียมทักษะหรือบุคลากร การสร้างเว็บไซต์ต้องอาศัยทักษะหลายด้าน
เช่น ในการเตรียมเนื้อหา ออกแบบกราฟิก เขียนโปรแกรม และการดูแลเครื่อง
บริการ เป็นต้น
1.5 เตรียมทรัพยากรต่างๆ ที่จำ�เป็น เช่น โปรแกรมสำ�หรับสร้างเว็บไซต์
โปรแกรมสำ�หรับสร้างกราฟิก ภาพเคลื่อนไหวและสื่อประสม โปรแกรม
อรรถประโยชน์ (Utilities) อื่นๆ ที่จะต้องใช้ เป็นต้น
2. วิเคราะห์และจัดโครงสร้างข้อมูล เป็นการนำ�ข้อมูลต่างๆ ที่รวบรวมได้
จากขั้นแรกนำ�มาประเมิน วิเคราะห์และจัดระบบ
3. ออกแบบเว็บเพจและเตรียมข้อมูล เป็นขั้นตอนการออกแบบเค้าโครง
และลักษณะด้านกราฟิกของหน้าเว็บเพจ เพื่อให้ผู้ใช้เกิดอารมณ์ความรับรู้ต่อ
เว็บเพจตามที่ผู้สร้างต้องการ
4. ลงมือสร้างและทดสอบ เป็นขั้นตอนที่เว็บเพจจะถูกสร้างขึ้นทีละหน้าโดย
อาศัยเค้าโครงและองค์ประกอบกราฟิกตามที่ออกแบบไว้
5. เผยแพร่และส่งเสริมให้เป็นที่รู้จัก โดยทั่วไปการนำ�เว็บไซต์ขึ้นเผยแพร่บน
อินเทอร์เน็ตจะทำ�ด้วยการอัพโหลด (Upload) แฟ้มข้อมูลทั้งหมด คือ เอชทีเอ็ม
แอลและแฟ้มข้อมูลอื่นๆ
6. ดูแลและปรับปรุงต่อเนื่อง เว็บไซต์ที่เผยแพร่ออกไปแล้ว ควรดูแลโดย
ตลอด ซึ่งหน้าที่นี้ครอบคลุมตั้งแต่การตรวจสอบเครื่องบริการเว็บว่าไม่หยุด
ทำ�งานบ่อย จุดเชื่อมโยงไปยังภายนอกยังคงใช้งานได้หรือไม่ คอยตอบอีเมลล์หรือ
คำ�ถามที่มีผู้ฝากไว้บนเว็บเพจ
20

25. 2. Online service provider : ให้บริการออนไลน์ เช่น http://www.
thaitravelcenter.com ให้บริการด้านการท่องเที่ยวและอำ�นวยความสะดวก
ด้านการจองที่พักออนไลน์
ภาพประกอบ ตัวอย่างเว็บจำ�หน่ายสินค้า
ภาพประกอบ ตัวอย่างเว็บให้บริการออนไลน์
บทที่ 8
ประเภทของเว็บไซต์
เว็บไซต์ที่เกิดขึ้นมา ในประเทศไทยเองมีเว็บไซต์ที่เกิดขึ้นมาประมาณหนึ่ง
แสนสี่หมื่นกว่าเว็บไซต์นับว่าเป็นจำ�นวนที่ไม่น้อยเลยทีเดียว จากเว็บไซต์เหล่านั้น
ได้ถูกจัดประเภทออกประเภทต่างๆดังนี้
1. Online Store : เว็บจำ�หน่ายสินค้า เช่นเว็บไซต์ http://www.chula-
book.com/ ขายหนังสือของสำ�นักพิมจุฬา

26. 3. Online Publisher/Content site : เว็บข้อมูลที่เป็นประโยชน์
http://www.tourthailands.com/ บริการด้านข้อมูลท่องเที่ยวให้แก่ผู้ที่สนใจ
ภาพประกอบ ตัวอย่างเว็บให้บริการด้านข้อมูล
22

27. บทที่ 9
การประเมินเว็บไซต์
1. หน้าที่ของเว็บไซต์ (Authority) เกี่ยวกับหน้าที่ของเว็บที่สร้างขึ้นนั้นต้อง
ดูว่าใครหรือผู้ใช้เว็บนี้ อะไรคือความถูกต้อง เหมาะสม ชอบธรรม ระหว่างความ
สัมพันธ์ของเรื่องและการรับประกันคุณภาพของเว็บเพจนี้ที่มีต่อผู้ชม
2. ความถูกต้อง (Accuracy) แหล่งข้อมูลและข้อเท็จจริงที่นำ�มาสร้างเว็บ
สามารถแยกแยะเป็นประเด็นรายการต่างๆ สามารถตรวจสอบย้อนหลังได้หรือไม่
3. จุดประสงค์ (Objective) จุดมุ่งหมายในการสร้างชัดเจนและบอกความ
สัมพันธ์ของสิ่งที่ต้องการนั้นชัดเจน
4. ความเป็นปัจจุบัน (Currency) เว็บเพจที่สร้างขึ้นนั้นต้องแสดงวันที่ที่เป็น
ปัจจุบันด้วย เช่น บอกว่าสร้างเมื่อใดและมีการแก้ไขครั้งหลังสุดเมื่อใด
5. ความครอบคลุม (Coverage) การสร้างเว็บไซต์ต้องให้ตรงกับจุดสนใจ
หัวเรื่องมีความชัดเจน เหมาะกับรูปภาพ โครงเรื่องและเนื้อหาสาระวิธีการค้นหา
ข้อมูลในเว็บไซต์ชัดเจน

28. บทที่ 10
ทฤษฎีสีและการอกแบบเว็บไซต์
การสร้างสีสันบนหน้าเว็บเป็นสิ่งที่สื่อความหมายของเว็บไซต์ได้อย่างชัดเจน
การเลือกใช้สีให้เหมาะสม กลมกลืน ไม่เพียงแต่จะสร้างความพึงพอใจให้กับผู้ใช้
แต่ยังสามารถทำ�ให้เห็นถึงความแตกต่างระหว่างเว็บไซต์ได้สีเป็นองค์ประกอบ
หลักสำ�หรับการตกแต่งเว็บจึงจำ�เป็นอย่างยิ่งที่จะต้องทำ�ความเข้าใจเกี่ยวกับการ
ใช้สีระบบสีที่แสดงบนจอคอมพิวเตอร์มีระบบการแสดงผลผ่านหลอดลำ�แสงที่
เรียกว่า CRT (Cathode ray tube) โดยมีลักษณะระบบสีแบบบวก อาศัยการ
ผสมของของแสงสีแดง สีเขียว และสีน้ำ�เงินหรือระบบสี RGB สามารถกำ�หนดค่า
สีจาก 0 ถึง 255 ได้จากการรวมสีของแม่สีหลักจะทำ�ให้เกิดแสงสีขาว มีลักษณะ
เป็นจุดเล็ก ๆบนหน้าจอไม่สามารถมองเห็นด้วยตาเปล่าได้จะมองเห็นเป็นสีที่ถูก
ผสมเป็นเนื้อสีเดียวกันแล้ว จุดแต่ละจุดหรือพิกเซล (Pixel) เป็นส่วนประกอบของ
ภาพบนหน้าจอคอมพิวเตอร์โดยจำ�นวนบิตที่ใช้ในการกำ�หนดความสามารถของ
การแสดงสีต่าง ๆเพื่อสร้างภาพบนจอนั้นเรียกว่า บิตเด็ป (Bit-depth) ในภาษา
HTML มีการกำ�หนดสีด้วยระบบเลขฐานสิบหก ซึ่งมีเครื่องหมาย (#) อยู่ด้านหน้า
และตามด้วยเลขฐานสิบหกจำ�นวนอักษรอีก 6 หลัก โดยแต่ละไบต์ (byte) จะมี
ตัวอักษรสองตัว แบ่งออกเป็น 3 กลุ่ม เช่น #FF12AC การใช้ตัวอักษรแต่ละไบต์นี้
เพื่อกำ�หนดระดับความเข้มของแม่สีแต่ละสีของชุดสี RGB โดย 2 หลักแรก แสดง
ถึงความเข้มของสีแดง 2 หลักต่อมา แสดงถึงความเข้มของสีเขียว 2 หลักสุดท้าย
แสดงถึงความเข้มของสีน้ำ�เงิน

29. ภาพประกอบ ระบบสี RGB
สีมีอิทธิพลในเรื่องของอารมณ์การสื่อความหมายที่เด่นชัดกระตุ้นการรับ
รู้ทางด้านจิตใจมนุษย์ สีแต่ละสีให้ความรู้สึก อารมณ์ที่ไม่เหมือนกันสีบางสีให้
ความรู้สึกสงบ บางสีให้ความรู้สึกตื่นเต้นรุนแรงสีจึงเป็นปัจจัยสำ�คัญอย่างยิ่ง
ต่อการออกแบบเว็บไซต์ดังนั้นการเลือกใช้โทนสีภายในเว็บไซต์เป็นการแสดงถึง
ความแตกต่างของสีที่แสดงออกทางอารมณ์มีชีวิตชีวาหรือเศร้าโศก รูปแบบของ
สีที่สายตาของมนุษย์มองเห็น สามารถแบ่งออกเป็น 3 กลุ่ม คือ
1.สีโทนร้อน (Warm Colors) เป็นกลุ่มสีที่แสดงถึงความสุขความ
ปลอบโยน ความอบอุ่น และดึงดูดใจสีกลุ่มนี้เป็นกลุ่มสีที่ช่วยให้หายจาก
ความเฉื่อยชา มีชีวิตชีวามากยิ่งขึ้น
2.สีโทนเย็น (Cool Colors) แสดงถึงความที่ดูสุภาพ อ่อนโยน
เรียบร้อย เป็นกลุ่มสีที่มีคนชอบมากที่สุด สามารถโน้มนาวในระยะไกลได้
3.สีโทนกลาง (Neutral Colors) สีที่เป็นกลาง ประกอบด้วย สีดำ�สี
ขาว สีเทา และสีน้ำ�ตาล กลุ่มสีเหล่านี้คือ สีกลางที่สามารถนำ�ไปผสมกับสีอื่น ๆ
เพื่อให้เกิดสีกลางขึ้นมา
25

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

31. -สีช่วยสร้างระเบียบให้กับข้อความต่างๆ
ดังนั้นการเลือกใช้สีให้เหมาะสมและเกิดประโยชน์จึงเป็นเรื่องสำ�คัญ แม้ว่า
การเลือกชุดของสีมาใช้ในเว็บเพจค่อนข้างจะขึ้นอยู่กับความชอบของแต่ละคน
อย่างน้อยเราควรมีความเข้าใจถึงหลักการใช้สีเบื้องต้น ที่จะช่วยในการเลือกใช้
สีชุดใดชุดหนึ่งจากชุดสีพื้นฐานอื่นๆได้อย่างเหมาะสมกับลักษณะของเว็บไซต์
อย่างไรก็ตามทฤษฎีเหล่านี้จะไม่ทำ�ให้คุณสามารถเลือกชุดสีได้ในทันทีทันใด แต่
อย่างน้อยก็จะช่วยนำ�คุณไปในทิศทางที่ถูกต้องได้
รูปแบบชุดสีพื้นฐาน ( Simple Color Schemes )
หลังจากคุณได้รู้จักพื้นฐานของสีมาพอสมควร ต่อไปจะเป็นเรื่องของชุดสี
ที่ถูกจัดกลุ่มอย่างเข้ากันด้วยรูปแบบต่างๆ ทำ�ให้เรามีโอกาสเลือกชุดสีเหล่านี้มา
ใช้ในการออกแบบได้โดยไม่ต้องเสียเวลาสุ่มเลือกสีต่างๆให้ดูเข้ากัน อย่างไรก็ตาม
คุณควรยึดรูปแบบเหล่านี้เป็นเพียงหลักการเบื้องต้น และยังคงต้องทำ�การปรับ
เปลี่ยนค่าของสี ( hue ) ความอิ่มตัวของสี ( saturation ) และความสว่างของสี
( lightness ) เพื่อให้เกิดลักษณะที่อ่านง่าย สวยงาม และเหมาะสมกับเนื้อหาของ
เว็บไซต์
การใช้สีในเว็บไซท์
จากสีที่ได้เรียนรู้มาตั่งแต่ต้นเกี่ยวกับสีและสื่อต่างๆที่มีผลต่อการสแดงออก
ของสี คงจะพอทำ�ให้คุณออกแบบเว็บไซท์โดยใช้สีที่เหมาะสมกลมกลืนกันในการ
สื่อความหมายถึงเนื้อหา และสร้างความสวยงานให้กับหน้าเว็บเพจได้เป็นอย่าง
ดี และที่สำ�คัญจาการใช้ชุดสีสำ�หรับเว็บเพจที่มีสีสันตรงกับความตั้งใจอย่างไม่ผิด
เพี้ยนในส่วนนี้ เป็นเรื่องของข้อคิดสั้นๆ เกี่ยวกับการใช้สีให้เกิดประโยชน์กับเว็บ
ไซท์ 3 ข้อดังนี้
27

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

33. บทที่11
การโปรโมทเว็บไซต์
การโปรโมทเว็บไซต์ คือ การโฆษณาเผยแพร่เว็บไซต์ที่เราสร้างขึ้นให้เป็นที่
รู้จักอย่างทั่วถึง โดยเฉพาะให้เป็นที่รู้จักของผู้ที่ใช้อินเทอร์เน็ต ถือเป็นกลยุทธ์
อย่างหนึ่งสำ�หรับใช้แจ้งข่าวสาร เพื่อเชิญชวนให้นักท่องเว็บได้เข้ามาเยี่ยมชม
เว็บไซต์ของตน
โดยทั่วไปแล้วนักท่องเว็บมักจะทำ�การค้นหาข้อมูลของเว็บไซต์ผ่านทาง
เครื่องมือประเภทเว็บไดแร็กทอรี่ และ Search Engine จึงสามารถนำ�มาใช้เป็น
ช่องทางในการโปรโมทเว็บไซต์
การโปรโมทเว็บไซต์แบบออฟไลน์

34. บรรณานุกรม
กรอบเกียรติ สระอุบล. (2554). เว็บไซต์สวยแบบมืออาชีพด้วย Joomla.
พิมพ์ครั้งที่ 1 กรุงเทพฯ : อินเตอร์ มีเดีย.
การเรียนการสอนผ่านเว็บ. ค้นเมื่อ 26 มิถุนายน พ.ศ. 2556.
จากhttp://www.kroobannok.com/133.
การออกแบบและพัฒนาเว็บไซต์. ค้นเมื่อ 26 มิถุนายน พ.ศ. 2556.
จาก http://www.chaiwit.ac.th/krutoon/dreamcs5/%และhttp://dit.dru.
ac.th/home/004/tachakorn/WEBDE/Chapter2.pdf.
แนวคิด ทฤษฏีและงานวิจัยที่เกี่ยวข้อง. ค้นเมื่อ 26 มิถุนายน พ.ศ.
2556. จาก http://www.ex-mba.buu.ac.th/Research/Bangsaen/Ex-24-
Bs/51711028/05_ch2.pdf และ
http://seminar2020.blogspot.com/2012/06/communication-theory.
html.
ชลิตา ไวรักษ์. (2556). การพัฒนาเว็บไซต์เพื่อประชาสัมพันธ์องค์กร: กรณี
ศึกษาสโมสรทาร์ซาน ฮัท เพนท์ บอล เชียงใหม่.
นางสาวจิรานันท์ บุ่งเสน่ห์และคณะ. (2556). การพัฒนาเว็บไซต์ โรงเรียน
บ้านเม่นใหญ่ ปริญญาครุศาสตร์บัณฑิต สาขาวิชาคอมพิวเตอร์ศึกษา.
ประเภทและส่วนประกอบของเว็บไซต์. ค้นเมื่อ 26 มกราคม 2556.
จากhttp://www.websuay.com/th/web_page/web_component.