ทฤษฏีการออกแบบเว็บไซต์THEORY OF WEBSITE DESIGN

จัดทำ�โดย น�ยธีรวัฒน์ น�มปะเส 533410080539

น�งส�วนิภ�วรรณ แสนหอม 533410080512

น�งส�วอมร บรรจง 533410080532

น�งส�วอุม�ภรณ์ กงตะใน 533410080533

หมู่เรียนที่ 5 Group 1 ชั้นปีที่ 4

เสนออ�จ�รย์ปวริศ ส�รมะโน

ส�ข�วิช�คอมพิวเตอร์ศึกษ� มห�วิทย�ลัยร�ชภัฏมห�ส�รค�ม

คำ�นำ�

หลักก�รออกแบบเว็บไซต์ เป็นหนังสือที่จัดทำ�ขึ้น เพื่อให้ศึกษ�หลักก�ร

ทฤษฎี ต่�งๆ เกี่ยวกับก�รออกแบบเว็บไซต์ได้เป็นอย่�งดี และเมื่ออ่�นหนังสือเล่ม

นี้แล้วส�ม�รถออกแบบเว็บไซต์ให้สวยง�นได้

หนังสือเล่มนี้ให้ข้อมูลเกี่ยวกับ แนวคิดและทฤษฎีเกี่ยวกับก�รสื่อส�ร ก�ร

ประช�สัมพันธ์ของเว็บไซต์ คว�มหม�ยของเว็บไซต์ ก�รออกแบบและก�รพัฒน�

เว็บไซต์ ขั้นตอนก�รพัฒน�เว็บไซต์ ส่วนประกอบของหน้�เว็บไซต์ โดยผู้จัดทำ�ได้

เรียบเรียงเป็นลำ�ดับดับขั้นตอน ซึ่งง่�ยต่อก�รศึกษ� ก�รเข้�ใจ และก�รจดจำ�เป็น

อย่�งดี

ผู้จัดทำ�ได้หวังเป็นอย่�งยิ่งว่�หนังสือหลักก�รออกแบบเว็บไซต์ นี้จะเป็น

ประโยชน์ต่อผู้เรียน ผู้สอน สำ�หรับนำ�ไปใช้ ในก�รเรียนรู้และศึกษ�ด้วยตนเอง ขอ

ขอบคุณผู้เจ้�ของข้อมูลทั้งด้�นหนังสือคู่มือ และเว็บไซท์ที่มีส่วนช่วย ในก�รจัดทำ�

ทุกท่�นม� ณ โอก�สนี้

ผู้จัดทำ�

หมู่เรียนที่ 5 Group 1 ชั้นปีที่ 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

บรรณ�นุกรม

บทที่1

หลักก�รและทฤษฏีก�รสื่อส�ร

ก�รสื่อส�ร

ชีวิตเป็นเรื่องของก�รเรียนรู้และสิ่งหนึ่งที่สำ�คัญและต้องมีก�รเรียนรู้คือ

คว�มสัมพันธ์ หรือ มนุษย์สัมพันธ์ เพร�ะทุกสิ่งทุกอย่�งในโลกนี้มักเป็นบทเรียน

ของกันและกัน ถ้�ไม่ใส่ใจเรียนรู้ซึ่งกันและกันก็จะอยู่ในโลกนี้ด้วยคว�มย�ก

ลำ�บ�ก ก�รเรียนรู้เกี่ยวกับคว�มสัมพันธ์ของบุคคลแต่เพียงอย่�งเดียว โดยข�ด

ศ�สตร์ของก�รสื่อส�รย่อมข�ดศิลปะในก�รนำ�ไปปรับใช้ในชีวิตจริงให้ประสบ

คว�มสำ�เร็จได้ เพร�ะชีวิตจะมีคุณค่�และรู้สึกมีคว�มสุขเมื่อได้แสดงออกอย่�งที่

รู้สึก มีโอก�สเรียนรู้เรื่องร�วและสิ่งใหม่ๆต�มที่เร�ต้องก�ร

คว�มหม�ยของก�รสื่อส�ร

ก�รถ่�ยทอดข้อมูลข่�วส�รจ�กบุคคลฝ่�ยหนึ่งที่เรียกว่�ผู้ส่งส�รไปยังยัง

บุคคลอีกฝ่�ยหนึ่งที่เรียกว่�ผู้รับส�รโดยผ่�นช่องท�งในก�รสื่อส�รโดยมีองค์

ประกอบที่สำ�คัญคือ ผู้ส่งส�ร(Sender) ส�ร(Message) ช่องท�ง(Channel) และ

ตัวผู้รับส�ร (Reciever) ซึ่งมักเรียกกันว่� SMCR

องค์ประกอบของกระบวนก�รสื่อส�ร

ก�รสื่อส�รมีองค์ประกอบที่สำ�คัญ 4 ประก�ร คือ (สมิต สัชฌุกร, 2547)

1. ผู้ส่งส�ร (Source) คือ ผู้ตั้งต้นทำ�ก�รสื่อส�รกับบุคคล หรือกลุ่มบุคคล

อื่น ผู้ส่งส�รอ�จเป็นบุคคลเดียว หรืออ�จจะมีม�กกว่�หนึ่งคนก็ได้ องค์ก�รหรือ

หน่วยง�นที่เป็นผู้เริ่มกระทำ�ก�รให้เกิดก�รสื่อส�รก็ถือได้ว่�เป็นผู้ส่งส�ร

2. ส�ร (Message) คือ ส�ระ เรื่องร�ว ข่�วส�ร ที่ผู้ส่งส�รต้องก�รส่งออก

ไปสู่บุคคล หรือกลุ่มบุคคลอื่น ส�รอ�จเป็นสิ่งที่มีตัวตน เช่น ตัวหนังสือ ตัวเลข

รูปภ�พ วัตถุต่�ง ๆ หรือสัญลักษณ์ใด ๆ ที่ส�ม�รถให้คว�มหม�ยเป็นที่เข้�ใจได้

3. ช่องท�งที่จะส่งส�ร หรือสื่อ (Channel or Medium) คือ เครื่องมือ

หรือช่องท�งที่ผู้ส่งส�รจะใช้ เพื่อให้ส�รนั้นไปถึงบุคคล หรือกลุ่มบุคคลรับ ช่องที่

จะส่งส�ร หรือสื่อต่�ง ๆ ที่จะนำ�ส�รไปยังผู้รับส�รต�มที่ผู้ส่งส�รมุ่งหม�ย อ�จจะ

เป็นสื่อธรรมช�ติ เช่น อ�ก�ศ เป็นช่องท�งที่คลื่นเสียงผ่�นไปยังผู้ฟังเสียง หรือ

อ�จจะเป็นสื่อที่มนุษย์ประดิษฐ์ขึ้น เช่น วิทยุ โทรทัศน์ โทรศัพท์ ฯลฯ

4. ผู้รับส�ร (Receiver) คือ บุคคลหรือกลุ่มบุคคลที่ส�ม�รถรับทร�บส�ร

ของผู้ส่งส�รได้ผู้รับส�รเป็นจุดหม�ยปล�ยท�งของข่�วส�รเป็นบุคคลสำ�คัญใน

ก�รชี้ข�ดว่� ก�รสื่อส�รเป็นผลหรือไม่

 

ทฤษฎีและแบบจำ�ลองก�รสื่อส�ร

1. ทฤษฎีเชิงระบบพฤติกรรมให้คว�มสำ�คัญกับเรื่องของสื่อหรือช่องท�งก�ร

สื่อส�รสรุปส�ระสำ�คัญได้ดังนี้คือ

1.1 อธิบ�ยเกี่ยวกับพฤติกรรมที่เกิดขึ้น ในก�รส่งข่�วส�ร จ�กผู้ส่ง ผ่�นสื่อ

หรือช่องท�ง ไปยังผู้รับ

1.2 เปรียบเทียบก�รสื่อส�รของมนุษย์ได้กับก�รทำ�ง�นของเครื่องจักร

1.3 ก�รสื่อส�รเป็นกระบวนก�รต่อเนื่อง หรืออ�จเป็นวงกลมและเกิดสิ่ง

ใหม่ๆ ขึ้นเสมอ

1.4 เจตน�ก�รสื่อส�ร ขึ้นอยู่กับปฏิกิริย�ระหว่�งผู้สื่อส�รและสถ�นก�รณ์

แวดล้อม

2. ทฤษฎีพฤติกรรมก�รเข้�รหัสและถอดรหัส

ทฤษฎีนี้มีคว�มเชื่อว่� สิ่งสำ�คัญในก�รสื่อส�ร คือ กระบวนก�รสร้�งรหัส

และถอดรหัสของผู้สื่อส�ร ทั้งผู้รับและผู้ส่งส�ร กิจกรรมที่สำ�คัญของก�รสื่อส�ร

ได้แก่ ก�รแปลเนื้อห�ข่�วส�รให้เป็นรหัสสัญญ�ณ (Encoding) ก�รแปลรหัส

สัญญ�ณกลับเป็นเนื้อห� (Decoding)

2

และก�รแปลคว�มหม�ยของข่�วส�ร (Interpreting) สรุปส�ระสำ�คัญของทฤษฏี

3. ทฤษฎีเชิงปฏิสัมพันธ์ สรุปส�ระสำ�คัญดังนี้ คือ

3.1 ให้คว�มสำ�คัญกับกระบวนก�รเชื่อมโยง ระหว่�งผู้รับและผู้ส่งส�ร ซึ่ง

ปกติจะมีคว�มสัมพันธ์ด้วยอำ�น�จภ�ยนอกและมีปัจจัยเกี่ยวข้องหล�ยอย่�ง

3.2 ก�รสื่อส�รจะขึ้นอยู่กับปัจจัยหล�ยด้�น บุคลิกภ�พ คว�มน่�เชื่อของผู้

ส่งข่�วส�รเป็นตัวกำ�หนดปฏิกิริย�ของผู้รับส�ร

3.3 พฤติกรรมทั้งหล�ยของคนเป็นผลม�จ�กพฤติกรรมท�งก�รสื่อส�ร

3.4 พฤติกรรมต่�งๆ ของคนมีอิทธิพลต่อกระบวนก�รเชื่อมโยงระหว่�งผู้รับ

และผู้ส่งส�ร

4. ทฤษฎีเชิงบริบทท�งสังคมมีส�ระสำ�คัญดังนี้ คือ

4.1 เน้นอธิบ�ยเกี่ยวกับปัจจัยต่�งๆ ที่มีอิทธิพลต่อก�รสื่อส�ร

4.2 ก�รสื่อส�รเกิดขึ้นภ�ยใต้อิทธิพลของปัจจัยท�งสังคม วัฒนธรรม

4.3 กลุ่มสังคม องค์กร มีอิทธิพลต่อคว�มคิด คว�มเชื่อ ก�รตัดสินใจ

4.4 สังคมเป็นตัวควบคลุมก�รไหลของกระแสข่�วส�ร เมื่อสังคมมีก�ร

เปลี่ยนแปลงกระแสข่�วส�รก็เปลี่ยนแปลงไปด้วย

3

บทที่2

ก�รประช�สัมพันธ์

วิวัฒน�ก�รของก�รประช�สัมพันธ์ในประเทศไทยได้กำ�เนิดขึ้นอย่�งเป็น

ท�งก�รเกินกว่�กึ่งศตวรรษแล้ว โดยเริ่มตั้งแต่ปี พ.ศ. 2476 เมื่อรัฐบ�ลได้ก่อ

ตั้ง“กองโฆษณ�ก�ร”(กรประช�สัมพันธ์ในปัจจุบัน) เพื่อเผยแพร่คว�มรู้คว�ม

เข้�ใจเกี่ยวกับก�รปกครองระบอบประช�ธิปไตย และเพื่อเผยแพร่กิจกรรมต่�ง ๆ

ของท�งร�ชก�รให้แก่ประช�ชน จ�กนั้นก�รประช�สัมพันธ์ก็ได้พัฒน�ขึ้นเรื่อย ๆ

คว�มหม�ยของก�รประช�สัมพันธ์

ก�รประช�สัมพันธ์” หม�ยถึง “ก�รติดต่อสื่อส�รระหว่�งหน่วยง�น หรือ

องค์กรและกลุ่มประช�ชนเป้�หม�ย เพื่อสร้�งคว�มเข้�ใจอันถูกต้องในอันที่จะ

สร้�งคว�มเชื่อถือ ศรัทธ� และคว�มร่วมมือตลอดจนคว�มสัมพันธ์ที่ดี ซึ่งจะช่วย

ให้ก�รดำ�เนินง�นของหน่วยง�นนั้นๆ บรรลุเป้�หม�ย”

วัตถุประสงค์ของก�รโฆษณ�สถ�บันที่สำ�คัญมี 3 ประก�รคือ

1. เพื่อให้ได้รับก�รสนับสนุน ก�รที่ผู้บริโภคจะให้ก�รสนับสนุนกิจก�รของ

บริษัทหรือสถ�บันด้วยคว�มเต็มอกเต็มใจนั้น บริษัทหรือสถ�บันจะต้องมีก�รบอก

กล่�วให้ผู้บริโภคหรือผู้ซื้อได้ทร�บก�รดำ�เนินง�น ของบริษัท นโยบ�ย, กิจกรรม,

แผนง�น และคว�มสำ�เร็จของบริษัท เพื่อให้เกิดคว�มยอมรับ คว�มนิยม คว�ม

เลื่อมใสและคว�มศรัทธ�แล้ว ย่อมบังเกิดคว�มร่วมมือและคว�มสนับสนุนใน

กิจกรรมของบริษัทอย่�งแน่นอน

2. เพื่อก�รประช�สัมพันธ์ ในบ�งครั้งก�รโฆษณ�บริษัทจะมีลักษณะ

เป็นก�รประช�สัมพันธ์ เพื่อแจ้งข่�วส�รข้อมูลต่�ง ๆ จ�กบริษัทไปยังกลุ่ม

ประช�ชนเป้�หม�ย เช่น ก�รฉลองครบรอบบริษัท ก�รโฆษณ�ก�รแสดงงบดุล

ประจำ�ปีของบริษัท ก�รบริจ�คสินค้�ของบริษัทให้แก่หน่วยง�นต่�ง ๆ ฯลฯ โดย

ผ่�นเครื่องมือและสื่อมวลชนประเภทต่�ง ๆ

3. เพื่อบริก�รส�ธ�รณะ เป็นก�รโฆษณ�ที่แสดงจุดยืนหรือแนวคว�มคิดต่อ

เรื่องสำ�คัญ ๆ ที่เป็นประโยชน์ต่อสังคมโดยส่วนรวม หน่วยง�นทั้งภ�ครัฐและภ�ค

เอกชน มักจะแสดงคว�มคิดเห็นอย่�งเปิดเผยต่อประเด็นหรือปัญห�ของสังคม

5

บทที่3

เว็บไซต์

คว�มหม�ยของเว็บไซต์

ประภ�พร ช่�งไม้ (2548: 5) กล่�วว่� “เว็บไซต์ คือ ทุกสิ่งทุกอย่�งที่

ประกอบกันขึ้นม�เป็นเว็บ ซึ่งหม�ยคว�มถึงเว็บเพจ (Webpage) ทุกหน้� รูปทุก

รูปที่นำ�เข้�ม�ใช้ แฟ้มข้อมูลเสียง รูปเคลื่อนไหวและส่วนประกอบอื่นๆ ที่นำ�ม�ใช้

เช่น โปรแกรมที่เขียนขึ้น ส�ม�รถเปรียบเทียบ ได้ว่�เว็บไซต์เป็นเสมือนหนังสือทั้ง

เล่ม”

กฤษณะ สถิต (2549: 23) กล่�วว่� “เว็บไซต์ คือ สถ�นที่สำ�หรับเก็บ

เอกส�รเอชทีเอ็มแอล (HTML) หรือเว็บเพจสำ�หรับก�รเผยแพร่ข่�วส�ร บน

อินเทอร์เน็ต” อีกทั้งดวงพร เกี๋ยงคำ� (2549: 22) กล่�วว่� “เว็บไซต์ คือ กลุ่มของ

เว็บเพจ ที่เกี่ยวข้องสัมพันธ์กัน เช่น กลุ่มของเว็บเพจที่ให้ข้อมูลเกี่ยวกับประวัติ

รวมทั้งสินค้�และบริก�ร ของบริษัทหนึ่ง เป็นต้น ภ�ยในเว็บไซต์นอกจ�กเว็บเพจ

หรือแฟ้มข้อมูลเอชทีเอ็มแอลแล้ว ยังประกอบด้วยแฟ้มข้อมูลชนิดอื่นๆ ที่จำ�เป็น

สำ�หรับสร้�งเป็นหน้�เว็บเพจ เช่น รูปภ�พ สื่อประสม(Multimedia) แฟ้มข้อมูล

โปรแกรมภ�ษ�สคริปต์ (Script) และแฟ้มข้อมูลข้อมูลสำ�หรับให้ด�วน์โหลด

เป็นต้น”

สุปร�ณี ธีรไกรศรี (2542: 18) กล่�วว่� “เว็บไซต์ คือ เครื่องคอมพิวเตอร์ ที่

อ�จใช้ระบบปฏิบัติก�รใดๆ ก็ได้ เช่น วินโดวส์ เอ็นที (Windows NT) หรือยูนิกซ์

(UNIX) เป็นต้น และมีโปรแกรมจัดก�รที่ทำ�ง�นอยู่ในเครื่องนั้นเพื่อให้เครื่อง ดัง

กล่�วทำ�หน้�ที่เป็นเครื่องบริก�รเว็บ นอกจ�กนี้ยังทำ�หน้�ที่เก็บเว็บเพจที่อยู่ใน

รูปของแฟ้มข้อมูลเอกส�รที่เขียนด้วยภ�ษ�เอชทีเอ็มแอล อยู่ด้วย” ซึ่งสอดคล้อง

กับ วิเศษศักดิ์ โครตอ�ษ� (2542: 180) ที่กล่�วว่� “เว็บไซต์เป็นแหล่งที่รวมของ

เว็บเพจทั้งหมดที่จัดอยู่ในกลุ่มเดียวกันของหน่วยง�นหรือองค์กรหนึ่งๆ

เดียวกันของหน่วยง�นหรือองค์กรหนึ่งๆ เมื่อใดที่ใช้โปรแกรม ค้นดู (Browser)

โปรแกรมค้นดูจะทำ�ก�รติดต่อกับเว็บไซต์ที่เก็บเว็บเพจนั้น เพื่อทำ�ก�รโอนย้�ยเว็บ

ที่ต้องก�รม�ยังเครื่องของผู้ใช้” นอกจ�กนี้ จักรชัย โสอินทร์และอุรุพงษ์

กัลย�สิริ (2542: 18) กล่�วว่� “เว็บไซต์

คือ สถ�นที่อยู่ของเว็บเพจที่โปรแกรมค้นดู

จะส�ม�รถไปดึงข้อมูลม�เปิดให้ดูได้ โดย

เว็บไซต์นี้จะอยู่ในเครื่องที่ให้บริก�รที่เรียกว่�

เครื่องบริก�รเว็บ” จ�กคว�มหม�ยข้�งต้น

สรุปได้ว่� เว็บไซต์ คือ แหล่งรวบรวมเว็บเพจ

ขององค์กร หนึ่งๆ ซึ่งจะประกอบด้วยสื่อ

ประสมต่�งๆ ทั้งข้อคว�ม ภ�พนิ่ง ภ�พเคลื่อนไหว และเสียง เป็นที่อยู่ของ

ส�รสนเทศบนอินเทอร์เน็ต ส�ม�รถเข้�ถึงได้โดยผ่�นเวิลด์ไวด์เว็บ

7

บทที่4

ก�รออกแบบและก�รพัฒน�

ก�รออกแบบเว็บไซต์ให้มีประสิทธิภ�พและตรงกับคว�มต้องก�รม�กที่สุดมี

ขั้นตอนดังต่อไปนี้ (ประเวศน์วงษ์ คำ�ชัย และพิรพร หมุนสนิท, 2550 : 60-62)

1.ก�รกำ�หนดขอบเขต

ก�รพัฒน�เว็บไซต์ไม่ได้มีหลักก�รหรือก�รกำ�หนดขอบเขตที่ต�ยตัว แต่จะ

ขึ้นอยู่กับเป้�หม�ยและคว�มต้องก�รในก�รใช้ง�นเว็บไซต์นั้นว่�สร้�งเพื่ออะไร

เช่น เพื่อประช�สัมพันธ์บริษัทหรือเพื่อข�ยสินค้� เป็นต้น ซึ่งผู้พัฒน�จะต้องศึกษ�

คว�มต้องก�รของผู้ใช้อย่�งละเอียดก่อน เพื่อใช้เป็นแนวท�งในก�รสร้�งเว็บไซต์

ให้ส�ม�รถตอบสนองคว�มต้องก�รของผู้ใช้ได้อย่�งถูกต้อง โดยส�ม�รถจำ�แนก

ขั้นตอนก�รกำ�หนดขอบเขตที่ผู้พัฒน�เว็บไซต์ส่วนใหญ่ยึดถือเป็นหลักก�ร

2.กำ�หนดเป้�หม�ย

ก�รกำ�หนดเป้�หม�ยหรือวัตถุประสงค์จะชวยให้ผู้พัฒน�ส�ม�รถกำ�หนด

ทิศท�งก�รดำ�เนินง�น งบประม�ณ รวมทั้งระยะเวล�ได้อย่�งเหม�ะสม ซึ่งถือได้

ว่�เป็นขั้นตอนที่สำ�คัญที่สุดของก�รดำ�เนินง�นทั้งหมด อย่�งไรก็ต�มเพื่อให้ผล

ง�นตรงต�มคว�มต้องก�รของลูกค่�ม�กที่สุด จึงควรคำ�นึงและให้คว�มสำ�คัญกับ

ปัจจัย ดังนี้

3.กำ�หนดโครงสร้�งข้อมูล

ก�รกำ�หนดโครงสร้�งข้อมูลภ�ยในเว็บไซต์จะช่วยให้ผู้พัฒน�ส�ม�รถ

กำ�หนดลำ�ดับก�รทำ�ง�นต่�งๆ ภ�ยในเว็บไซต์ได้ง่�ย และสะดวกยิ่งขึ้น รวมไปถึง

ทำ�ให้ลูกค้�เห็นโครงสร้�งของเว็บไซต์แนวท�งก�รออกแบบ

และรูปแบบของก�รทำ�ง�นต่�งๆ ซึ่งโดยส่วนใหญ่จะเป็นง�นบนกระด�ษก่อนที่

จะมีก�รพัฒน�จริง หลังจ�กที่ทร�บข้อมูลเบื้อต้นแล้วส�ม�รถกำ�หนดโครงสร้�ง

ข้อมูลและเพ็จเนื้อห�ในเว็บไซต์ได้

4.กำ�หนดก�รสืบทอดข้อมูล

ก�รกำ�หนดโครงสร้�งข้อมูลเว็บไซต์ดังกล่�วข้�งต้น เพียงอย่�งเดียวจะยังไม่

ส�ม�รถมองเห็นคว�มสัมพันธ์ของแต่ละเพ็จได้ ซึ่งผู้พัฒน�จะต้องทำ�ก�รเปลี่ยน

โครงสร้�งข้อมูลไปเป็นก�รสืบทอดข้อมูล หรือรูปแบบโครงสร้�งข้อมูลแบบต้นไม้

(Tree Structure) ก่อน ด้วยก�รแบ่งเนื้อห�ที่ต้องก�รนำ�ม�เสนอบนเว็บไซต์ออก

เป็นกลุ่มหรือหมวดหมู่ โดยเริ่มต้นกำ�หนดกลุ่มหลักก่อน จ�กโครงสร้�งข้อมูลที่

กำ�หนดไว้ข้�งต้น

5.สร้�งไซต์แม็ป(SiteMap)

ก�รสร้�งไซต์แม็ป (Site Map) เป็นก�รกำ�หนดโครงสร้�งก�รเชื่อมโยง

ของเพ็จในเว็บไซต์ เพื่อคว�มสะดวกในก�รค้นห� หรือเป็นก�รนำ�องค์ประกอบ

ทั้งหมดในเว็บไซต์ม�จัดลำ�ดับเป็นลำ�ดับชั้นที่เกี่ยวข้อง

6.แบ่งเฟรมพื้นที่ก�รแสดงผล

ก�รสร้�งไซต์แม็ปข้�งต้นยังไม่ใช้ขั้นตอนสุดท้�ยในก�รว�งแผนเพื่อพัฒน�

เว็บไซต์ผู้พัฒน�จะต้องสร้�งเพ็จสำ�หรับแสดงเนื้อห�ของแต่ละส่วนด้วยก�รแบ่ง

เฟรม ซึ่งก�รแบ่งเฟรมเป็นก�รแบ่งพื้นที่ก�ร

แสดงเนื้อห�บนเพ็จมีรูปแบบที่แตกต่�งกันออกไปต�มคว�มต้องก�รของผู้พัฒน�

หรือลูกค่�ในที่นี้จะยกตัวอย่�งก�รแบ่งเฟรมเพ็จ index.html ของเว็บไซต์ บริษัท

ณัฐพร จำ�กัด โดยแบ่งข้อมูลที่ต้องก�รเก็บภ�ยในเพ็จได้ดังนี้

6.1 โลโก้ (Logo) ของบริษัท ณัฐพร จำ�กัด

9

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

ออกแบบและก�รจัดระบบข้อมูล

อย่�งเหม�ะสม เพื่อให้เว็บไซต์ที่สร้�ง

ขึ้นมีคว�มน่�สนใจ และสร้�งคว�ม

ประทับใจให้กับผู้ใช้บริก�ร ทำ�ให้

อย�กกลับเข้�ม�ใช้อีกใน

11

บทที่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)

เริ่มต้นจ�กก�รศึกษ�หน่วยง�นเจ้�ของเว็บไซต์ เพื่อกำ�หนดเป้�หม�ยของ

เว็บไซต์ที่ชัดเจน ศึกษ�ผู้ใช้ เพื่อให้ส�ม�รถระบุกลุ่มผู้ใช้

และคว�มต้องก�รของผู้ใช้ และศึกษ�คู่แข่ง เพื่อกำ�หนดกลยุทธ์ในก�ร

แข่งขัน

ขั้นตอนที่2:พัฒน�เนื้อห�(SiteContent)

หลังจ�กก�รศึกษ�ข้อมูลเบื้องต้นและกำ�หนดวัตถุประสงค์ของเว็บไซต์แล้ว

จะส�ม�รถกำ�หนดแนวท�งในก�รออกแบบเว็บไซต์ ขอบเขตเนื้อห�และก�รใช้

ง�น เพื่อรวบรวมข้อมูลและเนื้อห�ของเว็บไซต์ต่อไป

ขั้นตอนที่3:พัฒน�โครงสร้�งเว็บไซต์(SiteStructure)

ในขั้นตอนนี้ จะนำ�ข้อมูลที่รวบรวมได้ม�จัดระบบข้อมูล โดยจัดทำ�แผนผัง

โครงสร้�งข้อมูล และออกแบบระบบ Navigation เพื่อออกแบบก�รใช้ข้อมูลและ

แนวท�งก�รท่องเว็บที่จะพัฒน�

ขั้นตอนที่4:ออกแบบและพัฒน�หน้�เว็บ(VisualDesign)

ในขั้นตอนนี้ จะทำ�ก�รออกแบบลักษณะหน้�ต�ของเว็บเพจต�มหลักก�ร

ออกแบบเว็บที่ดี มีก�รจัดแบ่งพื้นที่ในหน้�เว็บเพจ และมีรูปแบบโครงสร้�งข้อมูล

อยู่ในหน้�เว็บที่ออกแบบนี้ ในขั้นตอนนี้ จะได้เว็บเพจต้นแบบที่จะใช้พัฒน�เป็น

เว็บไซต์ต่อไป

ขั้นตอนที่5:พัฒน�และดำ�เนินก�ร(ProductionandOperation)

ในขั้นตอนนี้ จะทำ�ก�รพัฒน�เว็บเพจที่ออกแบบ เป็นเว็บไซต์ที่สมบูรณ์

จนถึงก�ร upload เว็บไซต์สู่เครื่องแม่ข่�ยเพื่อเผยแพร่สู่อินเทอร์เน็ต และกำ�หนด

แนวท�งก�รดูแลเนื้อห�และพัฒน�ต่อไป

13

บทที่6

ก�รออกแบบโครงสร้�งเว็บไซต์(SiteStructureDesign)

โครงสร้�งเว็บไซต์(Sitestructure)

เป็นแผนผังของก�รลำ�ดับเนื้อห�หรือก�รจัดว�งตำ�แหน่งเว็บเพจทั้งหมด ซึ่ง

จะท�ให้คุณรู้ว่�ทั้งเว็บไซต์ประกอบไปด้วยเนื้อห�อะไรบ้�ง และมี เว็บเพจหน้�

ไหนที่เกี่ยวข้องเชื่อมโยงถึงกัน ดังนั้นก�รออกแบบโครงสร้�งเว็บไซต์จึงเป็นเรื่อง

สำ�คัญ เปรียบเสมือนกับก�รเขียนแบบอ�ค�รก่อนที่จะลงมือสร้�ง เพร�ะจะทำ�ให้

คุณมองเห็นหน้�ต�ของเว็บไซต์เป็นรูปธรรมม�กขึ้น ส�ม�รถออกแบบระบบเนวิเก

ชั่นได้เหม�ะสม และมีแนวท�งก�รท�ง�นที่ชัดเจนสำ�หรับขั้นตอนต่อไป นอกจ�ก

นี้โครงสร้�งเว็บไซต์ที่ดีช่วยให้ผู้ชมไม่สับสนและค้นห�ข้อมูลที่ต้องก�รได้อย่�ง

รวดเร็ว

วิธีจัดโครงสร้�งเว็บไซต์ส�ม�รถท�ได้หล�ยแบบ แต่แนวคิดหลักๆที่นิยมใช้

กันมีอยู่ 2 แบบ คือ (ในท�งปฏิบัติอ�จมีก�รใช้หล�ยแนวคิดผสมผส�นกันก็ได้)

- จัดต�มกลุ่มเนื้อห� (content-based structure)

- จัดต�มกลุ่มผู้ชม (user-based structure)

รูปแบบของโครงสร้�งเว็บไซต์

ส�ม�รถว�งรูปแบบโครงสร้�งเว็บไซต์ได้หล�ยแบบต�มคว�มเหม�ะสม เช่น

- แบบเรียงล�ดับ (Sequence) เหม�ะส�หรับเว็บไซต์ที่มีจ�นวนเว็บเพจไม่

ม�กนัก หรือเว็บไซต์ที่มีก�รน�เสนอข้อมูลแบบทีละขั้นตอน

- แบบระดับชั้น (Hierarchy) เหม�ะส�หรับเว็บไซต์ที่มีจ�นวนเว็บเพจม�ก

ขึ้น เป็นรูปแบบที่พบได้ทั่วไป

- แบบผสม (Combination) เหม�ะส�หรับเว็บไซต์ที่ซับซ้อน เป็นก�รน�

ข้อดีของรูปแบบทั้ง 2 ข้�งต้นม�ผสมกัน

ก�รออกแบบระบบเนวิเกชั่น(SiteNavigationDesign)

เป้�หม�ยของ ระบบนำ�ท�ง หรือ เนวิเกชั่น คือช่วยให้ผู้ชมเข้�ถึงข้อมูลที่

ต้องก�รได้อย่�งรวดเร็วและไม่หลงท�ง ดังนั้นองค์ประกอบของระบบน�ท�งจึงมี

2 ส่วนด้วยกันคือ

1. เครื่องนำ�ท�ง (Navigation Controls)

คือเครื่องมือส�หรับให้ผู้ชมเปิดไปยังเว็บต่�งๆภ�ยในเว็บไซต์ โดยแยกได้

เป็น

- เมนูหลัก เป็นเมนูส�หรับเปิดไปยังหัวข้อเนื้อห�หลักของเว็บไซต์ มักอยู่ใน

รูปของกลุ่มลิงค์ที่เป็นข้อคว�มหรือภ�พกร�ฟิก และควรมีปร�กฏอยู่บนเว็บเพจ

ทุกหน้�

- เมนูเฉพ�ะกลุ่ม เป็นเมนูที่เชื่อมโยงเว็บเพจปัจจุบันกับเว็บเพจอื่นภ�ยใน

กลุ่มย่อยที่มีเนื้อห�เกี่ยวเนื่องเท่�นั้น มักอยู่ในรูปของกลุ่มลิงค์ข้อคว�มหรือ

กร�ฟิกเช่นกัน

- เครื่องมือเสริม ส�หรับช่วยเสริมก�รท�ง�นของเมนู มีได้หล�กหล�ยรูป

แบบ เช่น ช่องค้นห�ข้อมูล (search box), เมนูแบบดร็อปด�วน์ (drop-down

menu),อิมเมจแม็พ (image map) , แผนผังเว็บไซต์

2. เครื่องบอกตำ�แหน่ง (Location Indicator)

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

ตำ�แหน่งมีได้หล�ยรูปแบบ เช่น ข้อคว�มหรือภ�พกร�ฟิกที่แสดงชื่อเว็บเพจ

ลักษณะระบบเนวิเกชั่นที่ดี

1. อยู่ในตำ�แหน่งที่เห็นได้ชัดและเข้�ถึงง่�ย เช่น ส่วนบนหรือด้�นซ้�ยของ

เว็บเพจ

2. เข้�ใจง่�ยหรือมีข้อคว�มก�กับชัดเจน ผู้ชมใช้ได้ทันทีโดยไม่ต้องเสียเวล�

ศึกษ�

15

3. มีคว�มสม่ำ�เสมอ และเป็นระบบ ไม่ชวนให้สับสนหรือกลับไปกลับม�

4. มีก�รตอบสนองเมื่อใช้ง�น เช่น เปลี่ยนสีเมื่อผู้ชมชี้เม�ส์หรือคลิก

5. มีจ�นวนร�ยก�รพอเหม�ะ ไม่ม�กเกินไป

6.มีหล�ยท�งเลือกให้ใช้ เช่น เมนูกร�ฟิก,เมนูข้อคว�ม,ช่องค้นห�ข้อมูล

(search box),เมนูแบบดร็อปด�วน์ (drop-down menu), แผนผังเว็บไซต์ (site

map)

7.มีลิงค์ให้คลิกกลับไปยังโฮมเพจได้เสมอ เพื่อให้ผู้ชมกลับไปเริ่มต้นใหม่ได้

ในกรณีที่หลงท�งไม่รู้ว่�ตัวเองอยู่ที่ตำ�แหน่งใด

ก�รออกแบบเว็บเพจ(PageDesign)

วิธีที่สะดวกที่สุดในก�รออกแบบเว็บเพจ ก็คือใช้โปรแกรมสร้�งภ�พกร�ฟิก

เช่น Photoshop หรือ Fireworks ว�งเค้�โครงของหน้�และสร้�งองค์ประกอบ

ต่�งๆขึ้นม�ให้ครบสมบูรณ์ในภ�พเดียวไม่ว่�จะเป็น

โลโก้,ชื่อเว็บไซต์,ปุ่มเมนู,ปุ่มไอคอน,แถบสี,ภ�พเคลื่อนไหว และอื่นๆ เนื่องจ�ก

โปรแกรมเหล่�นี้มีเครื่องมือพร้อมส�หรับง�นดังกล่�ว อีกทั้งในขั้นสุดท้�ยคุณ

ส�ม�รถจะบันทึกองค์ประกอบทั้งหมดแยกเป็นไฟล์กร�ฟิกย่อยๆพร้อมกับไฟล์

HTML เพื่อน�ไปใช้เป็นต้นแบบในโปรแกรมสร้�งเว็บเพจได้ทันที

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

โดยทั่วไปหน้�เว็บเพจจะแบ่งออกเป็นส่วนหลักๆ ดังนี้

ส่วนหัว (Page Header) อยู่ตอนบนสุดของหน้� เป็นบริเวณที่สำ�คัญที่สุด

เนื่องจ�กผู้ใช้จะมองเห็นก่อนบริเวณอื่น ส่วนใหญ่นิยมใช้ว�งโลโก้ ชื่อเว็บไซต์ ป้�ย

โฆษณ� ลิงค์สำ�หรับก�รติดต่อหรือลิงค์ที่สำ�คัญ และระบบนำ�ท�ง

ส่วนของเนื้อห� (Page Body)อยู่ตอนกล�งหน้� ใช้แสดงเนื้อห�ของเว็บเพจ

นั้นซึ่งอ�จจะประกอบไปด้วยข้อคว�ม ภ�พกร�ฟิก ต�ร�งข้อมูล และอื่นๆ

16

บ�งครั้งเมนูหลักหรือเมนูเฉพ�ะกลุ่มอ�จม�อยู่ในส่วนนี้ก็ได้ โดยมักจะว�งไว้ด้�น

ซ้�ยมือสุดเนื่องจ�กผู้ใช้จะมองเห็นได้ง่�ยกว่�

ส่วนท้�ย (Page Footer) อยู่ด้�นล่�งสุดของหน้� ส่วนใหญ่จะนิยมใช้

ว�งระบบน�ท�งแบบที่เป็นลิงค์ข้อคว�มง่�ยๆ นอกจ�กนี้ก็อ�จจะมีชื่อเจ้�ของ

ข้อคว�มแสดงลิขสิทธิ์และอีเมล์แอดเดรสของผู้ดูแลเว็บไซต์

แถบข้�ง (Side Bar) ในปัจจุบันนิยมออกแบบด้�นข้�งของหน้�เว็บเพจให้

น่�สนใจเพื่อใช้ว�งป้�ยแบบเนอร์ หรือลิงค์แนะน�เกี่ยวกับก�รบริก�รของเว็บไซต์

เป็นต้น

ส่วนประกอบของเว็บไซต์

ภ�ยในเว็บไซต์หนึ่งๆ มีเว็บเพจจำ�นวนหล�ยหน้� ในแต่ละหน้�มีทั้งข้อคว�ม

และสื่อประสมรวมกันส่วนประกอบของเว็บไซต์สรุปได้ว่�มีส่วนประกอบต่�งๆ ที่

จำ�เป็นดังนี้

1 ตัวอักษร เป็นข้อคว�มปกติ โดยส�ม�รถตกแต่งให้สวยง�มและมีลูกเล่น

ต่�งๆ เช่นโปรแกรมประมวลคำ� เป็นต้น

2 กร�ฟิก ประกอบด้วยรูปภ�พ ล�ยเส้น ล�ยพื้น ต่�งๆ ม�กม�ย

3 สื่อประสม ประกอบด้วยข้อคว�ม ภ�พนิ่ง ภ�พเคลื่อนไหว เสียง และ

วีดีทัศน์

4 ตัวนับ ใช้นับจำ�นวนผู้ที่เข้�ม�เยี่ยมชมเว็บเพจ

5 จุดเชื่อมโยง ใช้เชื่อมโยงไปยังเว็บเพจของตนเองหรือเว็บเพจของคนอื่น

6 แบบฟอร์ม เป็นแบบฟอร์มที่ให้ผู้เข้�เยี่ยมชมกรอกร�ยละเอียดแล้วส่ง

กลับม�ยัง เว็บเพจ

7 กรอบ เป็นก�รแบ่งจอภ�พเป็นส่วนๆ แต่ละส่วนก็จะแสดงข้อมูลที่แตก

ต่�งกัน และเป็นอิสระจ�กกัน

17

8 แผนที่ภ�พ เป็นรูปภ�พขน�ดใหญ่ที่กำ�หนดส่วนต่�งๆ บนรูป เพื่อเชื่อม

โยงไปยังเว็บเพจอื่นๆ

9 จ�ว�แอปเพล็ด (Java applets) เป็นโปรแกรมสำ�เร็จรูปเล็กๆ ที่ใส่ลง

ในเว็บเพจ ส�ม�รถเพิ่มลักษณะพิเศษ ก�รโต้ตอบ เช่น เพิ่มเกมส์หรือหน้�ต่�ง

สำ�หรับป้อนหรือดูข้อมูล บนเว็บเซิร์ฟเวอร์ได้ เป็นต้น

18

1.กำ�หนดเป้�หม�ยและว�งแผน(Sitedefinitionandplanning)

4.ลงมือสร้�งและทดสอบ(Constructionandtesting)

2.วิเคร�ะห์และจัดโครงสร้�งข้อมูล(Analysisandinformation)

5.เผยแพร่และส่งเสริมให้เป็นที่รู้จัก(Publishingandpromotion)

3.ออกแบบเว็บเพจและเตรียมข้อมูล(Pagedesignandcontent)

6.ดูแลและปรับปรุงต่อเนื่อง(Maintenanceandinnovation)

ภ�พประกอบ ขั้นตอนก�รพัฒน�เว็บไซต์

1. กำ�หนดเป้�หม�ยและว�งแผน ก�รพัฒน�เว็บไซต์ควรกำ�หนดเป้�หม�ย

และว�งแผนไว้ล่วงหน้� เพื่อให้ก�รทำ�ง�นในขั้นต่อไปมีแนวท�งที่ชัดเจน เรื่อง

หลักๆ ที่ควรทำ�ในขั้นตอนนี้ประกอบด้วย

1.1 กำ�หนดวัตถุประสงค์ของเว็บไซต์ เพื่อให้ผู้ใช้เข้�ใจว่�เว็บไซต์นี้ต้องก�ร

นำ�เสนอหรือต้องก�รให้เกิดผลอะไร

1.2 กำ�หนดกลุ่มผู้ใช้เป้�หม�ย เพื่อจะได้รู้ว่�ผู้ใช้หลักคือใคร และออกแบบ

เว็บไซต์ให้ตอบสนองคว�มต้องก�รผู้ใช้กลุ่มนั้นให้ม�กที่สุด

1.3 เตรียมแหล่งข้อมูล เนื้อห�หรือข้อมูลคือส�ระสำ�คัญที่แท้จริงของ

เว็บไซต์ ต้องรู้ว่�ข้อมูลที่จำ�เป็นต้องใช้ม�จ�กแหล่งใดบ้�ง เช่น ถ้�เป็นเว็บข่�วส�ร

บทที่7

กระบวนก�รพัฒน�เว็บไซต์

ก�รพัฒน�เว็บไซต์อย่�งมีหลักก�ร ดำ�เนินก�รต�มขั้นตอนที่ชัดเจน จะ

ทำ�ให้ผู้สร้�งเว็บไซต์ส�ม�รถใส่ใจร�ยละเอียดที่จำ�เป็นในแต่ละขั้นตอนของก�ร

ออกแบบ ซึ่งจะช่วยป้องกันข้อผิดพล�ดที่อ�จเกิดขึ้น

ข่�วนั้นจะม�จ�กแหล่งใด มีลิขสิทธิ์หรือไม่ เป็นต้น

1.4 เตรียมทักษะหรือบุคล�กร ก�รสร้�งเว็บไซต์ต้องอ�ศัยทักษะหล�ยด้�น

เช่น ในก�รเตรียมเนื้อห� ออกแบบกร�ฟิก เขียนโปรแกรม และก�รดูแลเครื่อง

บริก�ร เป็นต้น

1.5 เตรียมทรัพย�กรต่�งๆ ที่จำ�เป็น เช่น โปรแกรมสำ�หรับสร้�งเว็บไซต์

โปรแกรมสำ�หรับสร้�งกร�ฟิก ภ�พเคลื่อนไหวและสื่อประสม โปรแกรม

อรรถประโยชน์ (Utilities) อื่นๆ ที่จะต้องใช้ เป็นต้น

2. วิเคร�ะห์และจัดโครงสร้�งข้อมูล เป็นก�รนำ�ข้อมูลต่�งๆ ที่รวบรวมได้

จ�กขั้นแรกนำ�ม�ประเมิน วิเคร�ะห์และจัดระบบ

3. ออกแบบเว็บเพจและเตรียมข้อมูล เป็นขั้นตอนก�รออกแบบเค้�โครง

และลักษณะด้�นกร�ฟิกของหน้�เว็บเพจ เพื่อให้ผู้ใช้เกิดอ�รมณ์คว�มรับรู้ต่อ

เว็บเพจต�มที่ผู้สร้�งต้องก�ร

4. ลงมือสร้�งและทดสอบ เป็นขั้นตอนที่เว็บเพจจะถูกสร้�งขึ้นทีละหน้�โดย

อ�ศัยเค้�โครงและองค์ประกอบกร�ฟิกต�มที่ออกแบบไว้

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

อินเทอร์เน็ตจะทำ�ด้วยก�รอัพโหลด (Upload) แฟ้มข้อมูลทั้งหมด คือ เอชทีเอ็ม

แอลและแฟ้มข้อมูลอื่นๆ

6. ดูแลและปรับปรุงต่อเนื่อง เว็บไซต์ที่เผยแพร่ออกไปแล้ว ควรดูแลโดย

ตลอด ซึ่งหน้�ที่นี้ครอบคลุมตั้งแต่ก�รตรวจสอบเครื่องบริก�รเว็บว่�ไม่หยุด

ทำ�ง�นบ่อย จุดเชื่อมโยงไปยังภ�ยนอกยังคงใช้ง�นได้หรือไม่ คอยตอบอีเมลล์หรือ

คำ�ถ�มที่มีผู้ฝ�กไว้บนเว็บเพจ

20

2. Online service provider : ให้บริก�รออนไลน์ เช่น http://www.

thaitravelcenter.com ให้บริก�รด้�นก�รท่องเที่ยวและอำ�นวยคว�มสะดวก

ด้�นก�รจองที่พักออนไลน์

ภ�พประกอบ ตัวอย่�งเว็บจำ�หน่�ยสินค้�

ภ�พประกอบ ตัวอย่�งเว็บให้บริก�รออนไลน์

บทที่8

ประเภทของเว็บไซต์

เว็บไซต์ที่เกิดขึ้นม� ในประเทศไทยเองมีเว็บไซต์ที่เกิดขึ้นม�ประม�ณหนึ่ง

แสนสี่หมื่นกว่�เว็บไซต์นับว่�เป็นจำ�นวนที่ไม่น้อยเลยทีเดียว จ�กเว็บไซต์เหล่�นั้น

ได้ถูกจัดประเภทออกประเภทต่�งๆดังนี้

1. Online Store : เว็บจำ�หน่�ยสินค้� เช่นเว็บไซต์ http://www.chula-

book.com/ ข�ยหนังสือของสำ�นักพิมจุฬ�

3. Online Publisher/Content site : เว็บข้อมูลที่เป็นประโยชน์

http://www.tourthailands.com/ บริก�รด้�นข้อมูลท่องเที่ยวให้แก่ผู้ที่สนใจ

ภ�พประกอบ ตัวอย่�งเว็บให้บริก�รด้�นข้อมูล

22

บทที่9

ก�รประเมินเว็บไซต์

1. หน้�ที่ของเว็บไซต์ (Authority) เกี่ยวกับหน้�ที่ของเว็บที่สร้�งขึ้นนั้นต้อง

ดูว่�ใครหรือผู้ใช้เว็บนี้ อะไรคือคว�มถูกต้อง เหม�ะสม ชอบธรรม ระหว่�งคว�ม

สัมพันธ์ของเรื่องและก�รรับประกันคุณภ�พของเว็บเพจนี้ที่มีต่อผู้ชม

2. คว�มถูกต้อง (Accuracy) แหล่งข้อมูลและข้อเท็จจริงที่นำ�ม�สร้�งเว็บ

ส�ม�รถแยกแยะเป็นประเด็นร�ยก�รต่�งๆ ส�ม�รถตรวจสอบย้อนหลังได้หรือไม่

3. จุดประสงค์ (Objective) จุดมุ่งหม�ยในก�รสร้�งชัดเจนและบอกคว�ม

สัมพันธ์ของสิ่งที่ต้องก�รนั้นชัดเจน

4. คว�มเป็นปัจจุบัน (Currency) เว็บเพจที่สร้�งขึ้นนั้นต้องแสดงวันที่ที่เป็น

ปัจจุบันด้วย เช่น บอกว่�สร้�งเมื่อใดและมีก�รแก้ไขครั้งหลังสุดเมื่อใด

5. คว�มครอบคลุม (Coverage) ก�รสร้�งเว็บไซต์ต้องให้ตรงกับจุดสนใจ

หัวเรื่องมีคว�มชัดเจน เหม�ะกับรูปภ�พ โครงเรื่องและเนื้อห�ส�ระวิธีก�รค้นห�

ข้อมูลในเว็บไซต์ชัดเจน

บทที่10

ทฤษฎีสีและก�รอกแบบเว็บไซต์

ก�รสร้�งสีสันบนหน้�เว็บเป็นสิ่งที่สื่อคว�มหม�ยของเว็บไซต์ได้อย่�งชัดเจน

ก�รเลือกใช้สีให้เหม�ะสม กลมกลืน ไม่เพียงแต่จะสร้�งคว�มพึงพอใจให้กับผู้ใช้

แต่ยังส�ม�รถทำ�ให้เห็นถึงคว�มแตกต่�งระหว่�งเว็บไซต์ได้สีเป็นองค์ประกอบ

หลักสำ�หรับก�รตกแต่งเว็บจึงจำ�เป็นอย่�งยิ่งที่จะต้องทำ�คว�มเข้�ใจเกี่ยวกับก�ร

ใช้สีระบบสีที่แสดงบนจอคอมพิวเตอร์มีระบบก�รแสดงผลผ่�นหลอดลำ�แสงที่

เรียกว่� CRT (Cathode ray tube) โดยมีลักษณะระบบสีแบบบวก อ�ศัยก�ร

ผสมของของแสงสีแดง สีเขียว และสีน้ำ�เงินหรือระบบสี RGB ส�ม�รถกำ�หนดค่�

สีจ�ก 0 ถึง 255 ได้จ�กก�รรวมสีของแม่สีหลักจะทำ�ให้เกิดแสงสีข�ว มีลักษณะ

เป็นจุดเล็ก ๆบนหน้�จอไม่ส�ม�รถมองเห็นด้วยต�เปล่�ได้จะมองเห็นเป็นสีที่ถูก

ผสมเป็นเนื้อสีเดียวกันแล้ว จุดแต่ละจุดหรือพิกเซล (Pixel) เป็นส่วนประกอบของ

ภ�พบนหน้�จอคอมพิวเตอร์โดยจำ�นวนบิตที่ใช้ในก�รกำ�หนดคว�มส�ม�รถของ

ก�รแสดงสีต่�ง ๆเพื่อสร้�งภ�พบนจอนั้นเรียกว่� บิตเด็ป (Bit-depth) ในภ�ษ�

HTML มีก�รกำ�หนดสีด้วยระบบเลขฐ�นสิบหก ซึ่งมีเครื่องหม�ย (#) อยู่ด้�นหน้�

และต�มด้วยเลขฐ�นสิบหกจำ�นวนอักษรอีก 6 หลัก โดยแต่ละไบต์ (byte) จะมี

ตัวอักษรสองตัว แบ่งออกเป็น 3 กลุ่ม เช่น #FF12AC ก�รใช้ตัวอักษรแต่ละไบต์นี้

เพื่อกำ�หนดระดับคว�มเข้มของแม่สีแต่ละสีของชุดสี RGB โดย 2 หลักแรก แสดง

ถึงคว�มเข้มของสีแดง 2 หลักต่อม� แสดงถึงคว�มเข้มของสีเขียว 2 หลักสุดท้�ย

แสดงถึงคว�มเข้มของสีน้ำ�เงิน

ภ�พประกอบ ระบบสี RGB

สีมีอิทธิพลในเรื่องของอ�รมณ์ก�รสื่อคว�มหม�ยที่เด่นชัดกระตุ้นก�รรับ

รู้ท�งด้�นจิตใจมนุษย์ สีแต่ละสีให้คว�มรู้สึก อ�รมณ์ที่ไม่เหมือนกันสีบ�งสีให้

คว�มรู้สึกสงบ บ�งสีให้คว�มรู้สึกตื่นเต้นรุนแรงสีจึงเป็นปัจจัยสำ�คัญอย่�งยิ่ง

ต่อก�รออกแบบเว็บไซต์ดังนั้นก�รเลือกใช้โทนสีภ�ยในเว็บไซต์เป็นก�รแสดงถึง

คว�มแตกต่�งของสีที่แสดงออกท�งอ�รมณ์มีชีวิตชีว�หรือเศร้�โศก รูปแบบของ

สีที่ส�ยต�ของมนุษย์มองเห็น ส�ม�รถแบ่งออกเป็น 3 กลุ่ม คือ

1.สีโทนร้อน (Warm Colors) เป็นกลุ่มสีที่แสดงถึงคว�มสุขคว�ม

ปลอบโยน คว�มอบอุ่น และดึงดูดใจสีกลุ่มนี้เป็นกลุ่มสีที่ช่วยให้ห�ยจ�ก

คว�มเฉื่อยช� มีชีวิตชีว�ม�กยิ่งขึ้น

2.สีโทนเย็น (Cool Colors) แสดงถึงคว�มที่ดูสุภ�พ อ่อนโยน

เรียบร้อย เป็นกลุ่มสีที่มีคนชอบม�กที่สุด ส�ม�รถโน้มน�วในระยะไกลได้

3.สีโทนกล�ง (Neutral Colors) สีที่เป็นกล�ง ประกอบด้วย สีดำ�สี

ข�ว สีเท� และสีน้ำ�ต�ล กลุ่มสีเหล่�นี้คือ สีกล�งที่ส�ม�รถนำ�ไปผสมกับสีอื่น ๆ

เพื่อให้เกิดสีกล�งขึ้นม�

25

ภ�พประกอบ สีโทนเย็น ภ�พประกอบ สีโทนร้อน

สิ่งที่สำ�คัญต่อผู้ออกแบบเว็บคือก�รเลือกใช้สีสำ�หรับเว็บนอกจ�กจะมีผล

ต่อก�รแสดงออกของเว็บแล้วยังเป็นก�รสร้�งคว�มรู้สึกที่ดีต่อผู้ใช้บริก�รดังนั้น

จะเห็นว่�สีแต่ละสีส�ม�รถสื่อคว�มหม�ยของเว็บได้อย่�งชัดเจน คว�มแตกต่�ง

คว�มสัมพันธ์ที่เกิดขึ้นย่อมส่งผลให้เว็บมีคว�มน่�เชื่อถือม�กยิ่งขึ้นชุดสีแต่ละชุดมี

คว�มสำ�คัญต่อเว็บถ้�เลือกใช้สีไม่ตรงกับวัตถุประสงค์หรือเป้�หม�ยอ�จจะทำ�ให้

เว็บไม่น่�สนใจผู้ใช้บริก�รจะไม่กลับม�ใช้บริก�รอีกภ�ยหลังฉะนั้นก�รใช้สีอย่�ง

เหม�ะสมเพื่อสื่อคว�มหม�ยของเว็บต้องเลือกใช้สีที่มีคว�มกลมกลืนกัน

ประโยชน์ของสีในเว็บไซต์

สีเป็นเครื่องมืออเนกประสงค์อย่�งหนึ่งที่มีคว�มสำ�คัญม�กในก�รออกแบบ

เว็บไซต์ เนื่องจ�กสีส�ม�รถสื่อถึงคว�มรู้สึกและอ�รมณ์ และยังช่วยสร้�งคว�ม

สัมพันธ์ระหว่�งสถ�นที่กับเวล�อีกด้วย ดังนั้นสีจึงเป็นปัจจัยสำ�คัญอย่�งหนึ่งที่จะ

ช่วยเสริมสร้�งคว�มหม�ยขององค์ประกอบให้กับเว็บเพจได้ อย่�งดี

ประโยชน์ของสีในรูปแบบต่�งๆ มีดังนี้

- สีส�ม�รถชักนำ�ส�ยต�ผู้อ่�นให้ไปยังทุกบริเวณในหน้�เว็บเพจ

- สีช่วยเชื่อมโยงบริเวณที่ได้รับก�รออกแบบเข้�ด้วยกัน

- สีส�ม�รถนำ�ไปใช้ในก�รแบ่งบริเวณต่�งๆ ออกจ�กกัน ทำ�นองเดียวกับ

ก�รเชื่อมโยงบริเวณที่มีสีเหมือนกันเข้� ด้วยกัน

- สีส�ม�รถใช้ในก�รดึงดูดคว�มสนใจของผู้อ่�นส�ยต�ผู้อ่�น

- สีส�ม�รถสร้�งอ�รมณ์โดยรวมของเว็บเพจ และกระตุ้นคว�มรู้สึกตอบ

สนองจ�กผู้ชมได้นอกเหนือจ�กคว�มรู้สึกที่ได้รับจ�กสีต�มหลักจิตวิทย�แล้ว ผู้

ชมยังอ�จมีอ�รมณ์และคว�มรู้สึกสัมพันธ์กับสีบ�งสีหรือบ�งกลุ่มเป็นพิเศษ

26

-สีช่วยสร้�งระเบียบให้กับข้อคว�มต่�งๆ

ดังนั้นก�รเลือกใช้สีให้เหม�ะสมและเกิดประโยชน์จึงเป็นเรื่องสำ�คัญ แม้ว่�

ก�รเลือกชุดของสีม�ใช้ในเว็บเพจค่อนข้�งจะขึ้นอยู่กับคว�มชอบของแต่ละคน

อย่�งน้อยเร�ควรมีคว�มเข้�ใจถึงหลักก�รใช้สีเบื้องต้น ที่จะช่วยในก�รเลือกใช้

สีชุดใดชุดหนึ่งจ�กชุดสีพื้นฐ�นอื่นๆได้อย่�งเหม�ะสมกับลักษณะของเว็บไซต์

อย่�งไรก็ต�มทฤษฎีเหล่�นี้จะไม่ทำ�ให้คุณส�ม�รถเลือกชุดสีได้ในทันทีทันใด แต่

อย่�งน้อยก็จะช่วยนำ�คุณไปในทิศท�งที่ถูกต้องได้

รูปแบบชุดสีพื้นฐ�น(SimpleColorSchemes)

หลังจ�กคุณได้รู้จักพื้นฐ�นของสีม�พอสมควร ต่อไปจะเป็นเรื่องของชุดสี

ที่ถูกจัดกลุ่มอย่�งเข้�กันด้วยรูปแบบต่�งๆ ทำ�ให้เร�มีโอก�สเลือกชุดสีเหล่�นี้ม�

ใช้ในก�รออกแบบได้โดยไม่ต้องเสียเวล�สุ่มเลือกสีต่�งๆให้ดูเข้�กัน อย่�งไรก็ต�ม

คุณควรยึดรูปแบบเหล่�นี้เป็นเพียงหลักก�รเบื้องต้น และยังคงต้องทำ�ก�รปรับ

เปลี่ยนค่�ของสี ( hue ) คว�มอิ่มตัวของสี ( saturation ) และคว�มสว่�งของสี

( lightness ) เพื่อให้เกิดลักษณะที่อ่�นง่�ย สวยง�ม และเหม�ะสมกับเนื้อห�ของ

เว็บไซต์

ก�รใช้สีในเว็บไซท์

จ�กสีที่ได้เรียนรู้ม�ตั่งแต่ต้นเกี่ยวกับสีและสื่อต่�งๆที่มีผลต่อก�รสแดงออก

ของสี คงจะพอทำ�ให้คุณออกแบบเว็บไซท์โดยใช้สีที่เหม�ะสมกลมกลืนกันในก�ร

สื่อคว�มหม�ยถึงเนื้อห� และสร้�งคว�มสวยง�นให้กับหน้�เว็บเพจได้เป็นอย่�ง

ดี และที่สำ�คัญจ�ก�รใช้ชุดสีสำ�หรับเว็บเพจที่มีสีสันตรงกับคว�มตั้งใจอย่�งไม่ผิด

เพี้ยนในส่วนนี้ เป็นเรื่องของข้อคิดสั้นๆ เกี่ยวกับก�รใช้สีให้เกิดประโยชน์กับเว็บ

ไซท์ 3 ข้อดังนี้

27

1. ใช้สีอย่�สม่ำ�เสมอ

ก�รออกแบบเว็บไซท์โดยใช้สีอย่�งสม่ำ�เสมอช่วยสร้�งคว�มรู้สึกถึงบริเวณ

ของสถ�นที่ เช่นก�รใช้สีที่เป็นชุดเดียวกันตลอดทั้งไซท์เพื่อสร้�งขอบเขตของ

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

ภ�ยในเว็บไซท์เดียวกัน

2. ใช้สีอย่�งเหม�ะสม

เว็บไซท์เปรียบเสมอสถ�นที่หนึ่งๆ ที่มีลักษณะเฉพ�ะ เช่นเดียวกับสถ�นที่

ต่�งๆ ในชีวิตจริงอย่�ง ธน�ค�ร โรงเรียน หรือร้�นค้�ต่�งๆ ดังนั้น ก�รเลือกใช้สีที่

เหม�ะสมกับลักษณะของเว็บไซท์ จะช่วยส่งเสริมเป้�หม�ยและภ�พพจน์ของเว็บ

ไซท์ได้ นอกจ�กนี้คุณควรคำ�นึงถึงปัจจัยหล�ยๆอย่�งที่มีผล

ต่อคว�มเหม�ะสมของสีในเว็บไซท์ เช่น วัฒนธรรม แนวโน้ม ของแฟชั่น อ�ยุและ

ประสบก�รณ์ของผู้ใช้ ดังนั้นเร�จึงรู้สึกเห็นด้วยเมื่อมีก�รใช้สีชมพูเพื่อแสดงถึง

คว�มรัก ใช้โทนสีน้ำ�ต�ลดำ� สื่อถึงเหตุก�รณ์ใน อดีต ใช้สีสดใสสำ�หรับเด็ก และ

ก�รใช้สีต�มแฟชั่นในเว็บมีเกี่ยวกับเครื่องแต่งก�ย

3. ใช้สีเพื่อสื่อคว�มหม�ย

ดังที่ได้เห็นแล้วว่� สีแต่ละสีให้คว�มห�ยและคว�มรู้สึกต่�งกัน โดยสีหนึ่งๆ

อ�จสื่อคว�มห�ยไปในท�งบวกหรือท�งลบก็ได้ขึ้นอยู่กับสถ�นก�รณ์ ตัวอย่�งเช่น

สีดำ�ให้คว�มรู้สึกโศกเศร้�ในง�นศพ แต่กลับแสดงถึงคว�มเป็นมืออ�ชีพในก�ร

แสดงผลง�นของศิลปิน ดังนั้นสีที่ให้คว�มหม�ยและคว�มรู้สึกตรงกับเนื้อห� จะ

ช่วยสนับสนุนให้ผู้ใช้ได้รับข้อมูลที่ถูกต้องและครบถ้วน

28

บทที่11

ก�รโปรโมทเว็บไซต์

ก�รโปรโมทเว็บไซต์ คือ ก�รโฆษณ�เผยแพร่เว็บไซต์ที่เร�สร้�งขึ้นให้เป็นที่

รู้จักอย่�งทั่วถึง โดยเฉพ�ะให้เป็นที่รู้จักของผู้ที่ใช้อินเทอร์เน็ต ถือเป็นกลยุทธ์

อย่�งหนึ่งสำ�หรับใช้แจ้งข่�วส�ร เพื่อเชิญชวนให้นักท่องเว็บได้เข้�ม�เยี่ยมชม

เว็บไซต์ของตน

โดยทั่วไปแล้วนักท่องเว็บมักจะทำ�ก�รค้นห�ข้อมูลของเว็บไซต์ผ่�นท�ง

เครื่องมือประเภทเว็บไดแร็กทอรี่ และ Search Engine จึงส�ม�รถนำ�ม�ใช้เป็น

ช่องท�งในก�รโปรโมทเว็บไซต์

ก�รโปรโมทเว็บไซต์แบบออฟไลน์

บรรณ�นุกรม กรอบเกียรติ สระอุบล. (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.