Wangkabrang

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

ปฏพิ ล คนกลาง รหสั 58144617
คธ58.บ4.3

คณะวิทยาการจดั การ มหาวทิ ยาลัยราชภฏั เชยี งใหม่
ปีการศึกษา 2561

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

สันปก

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

ปฏพิ ล คนกลาง รหสั 58144617
คธ58.บ4.3

คณะวิทยาการจัดการ มหาวทิ ยาลยั ราชภฏั เชยี งใหม่
ปีการศกึ ษา 2561

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

ปฏพิ ล คนกลาง รหสั 58144617
คธ58.บ4.3

โครงงานทางคอมพวิ เตอร์ธุรกิจนี้ไดร้ บั การพจิ ารณาอนุมัตใิ หน้ บั เป็นสว่ นหนึ่ง
ของการศึกษาตามหลักสูตรปริญญาบรหิ ารธุรกจิ บัณฑิต
ภาควิชาคอมพิวเตอรธ์ ุรกิจ

.....………………….............……..หัวหนา้ ภาควิชาคอมพิวเตอร์ธรุ กจิ
(อาจารย์ ดร.รัฐ ใจรักษ์)
...................………………….............……อาจารย์ท่ีปรึกษาโครงงาน
(อาจารย์กสุ มุ า สีดาเพ็ง)

มกราคม 2562
© ลขิ สิทธข์ิ องมหาวทิ ยาลัยราชภัฏเชยี งใหม่

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

บทคดั ย่อ

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

จากการอธิบายรายละเอียดของประเด็นต่าง ๆ ในแต่ละด้าน ดังท่ีกล่าวมาแล้วข้างต้น
สามารถวิเคราะห์ความพึงพอใจในแต่ละด้านในประเด็นต่าง ๆ ในภาพรวมได้ว่า ผู้เข้าชมเว็บไซต์
ประชาสัมพันธ์วังกาบรางธรรมสถาน สานักปฏิบัติธรรมและแหล่งท่องเที่ยวทางธรรม จังหวัดน่าน
มีความพึงพอใจในด้านประโยชน์และการนาไปใช้ มากท่ีสุด มีค่าเฉล่ียเท่ากับ 4.22 และค่าเบ่ียงเบน
มาตรฐานเท่ากับ 0.75 ลาดับท่ีสอง คือ ความพึงพอใจในด้านเนื้อหา มี ค่าเฉลี่ยเท่ากับ 4.18 และค่า
เบี่ยงเบนมาตรฐานเท่ากับ 0.62 ลาดับสุดท้าย คือ ด้านการออกแบบและการจัดรูปแบบเว็บไซต์
มีค่ าเฉลี่ ยเท่ ากั บ 4.11 แ ละค่ าเบี่ ยงเบ น ม าต รฐาน เท่ ากั บ 0.68 ดังนั้ น การป ระเมิ น
ความพงึ พอใจในภาพรวมของเวบ็ ไซต์อยู่ในระดับ มาก คิดเป็นคะแนนค่าเฉลย่ี รวมเทา่ กบั 4.15

กติ ตกิ รรมประกาศ

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

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

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

ทา้ ยท่ีสุดนี้ขอขอบพระคุณทุก ๆ ท่านที่มิได้เอ่ยนาม ท่ีมีส่วนสาคัญทาให้โครงการฉบับนี้สาเร็จ
ลุลว่ งไปดว้ ยดี ผจู้ ดั ทาขอขอบพระคุณ

ปฏิพล คนกลาง

มกราคม 2562

บทท่ี 1

บทนำ

1.1 ควำมเป็นมำและควำมสำคัญของปญั หำ
ความเปลี่ยนแปลงของกาลเวลาได้นาพาสิ่งใหม่ๆเขา้ มาสู่ชีวติ ผู้คนเสมอ แตส่ ่ิงท่ีโดดเด่น

และน่าจับตามองมากที่สุดคงเป็นเรอ่ื ง เทคโนโลยี ต้องยอมรบั ว่าการถือกาเนิดของเทคโนโลยีใหม่ๆ มี
ส่วนผลักดันและอานวยความสะดวกให้กับการดาเนินชีวิตประจาวันให้สะดวกยิ่งขึ้น โดยเฉพาะ
เทคโนโลยีซึ่งถือว่าเป็นส่ิงประดิษฐ์อันทรงอิทธิพลมากท่ีสดุ ในโลกปัจจุบันก็คือ “อินเทอร์เน็ต” หลาย
คนยอมรับอย่างตรงไปตรงมาว่าการถือกาเนิดของโลกออนไลน์เสมือนจริงทาให้ชีวิตของพวกเขาแปร
เปลยี่ นไปตลอดกาล โดยเฉพาะการคน้ หาแหลง่ ขอ้ มูลตา่ งๆจากอนิ เทอรเ์ นต็ ไมว่ า่ จะเปน็ สถานท่ี ทพี่ ัก
ส่ิงอานวยความสะดวก ซึ่งปัจจุบันโทรศัพท์มือถือสมาร์ทโฟนกลายเป็นท่ีนิยมกันอย่างแพร่หลาย
สะดวกต่อการค้นหาขอ้ มูลตา่ งๆหรือพิกดั (GPS) ซึ่งจะแสดงใหเ้ หน็ ถงึ ท่ีต้งั น้นั ๆไมว่ า่ จะอยทู่ ี่ไหนก็ตาม

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

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

2

1.2 วตั ถุประสงคข์ องกำรศึกษำ
1.2.1 เพื่อจดั ทาเว็บไซต์สานักปฏบิ ตั ิธรรมและแหลง่ ทอ่ งเทยี่ วทางธรรมจังหวดั นา่ น
1.2.2 เพ่ืออานวยความสะดวกแกผ่ ู้ที่มาปฏิบัติธรรมหรือนักท่องเทย่ี วท่ีกาลังหาที่พักอาศัยใน
จังหวดั น่าน
1.2.3 เพอ่ื ใหผ้ ้ทู ี่จะมาปฏิบัติธรรมสามารถติดตอ่ สอบถามและเดนิ ทางได้สะดวกยง่ิ ขน้ึ

1.3 ประโยชนท์ ค่ี ำดว่ำจะได้รับ
1.3.1 สามารถพัฒนาเว็บไซต์ สานักท่ีปฏิบัติธรรมและแหล่งท่องเท่ียวทางธรรมท่ีพักอาศัยใน

จังหวัดน่าน
1.3.2 เพอ่ื ให้ผู้ท่ีมาปฏบิ ตั ิธรรมหรอื นักทอ่ งเที่ยวทเ่ี ขา้ มาในจงั หวดั น่านสะดวกตอ่ การค้นหาที่พัก
1.3.3 สามารถส่งเสรมิ ใหผ้ ู้คนใชอ้ ินเทอร์เน็ตเพอ่ื คน้ หาขอ้ มูลตา่ งๆ มากขึน้

1.4 ข้นั ตอนและวธิ กี ำรดำเนินงำน
1.4.1 วางแผนการดาเนินงาน
1.4.2 วิเคราะห์ข้อมลู
1.4.3 ออกแบบเวบ็ ไซต์
1.4.4 นาไปใชง้ านไดจ้ รงิ
1.4.5 การบารงุ รักษา

1.5 ขอบเขตของกำรศึกษำ
1.5.1 ขอบเขตดา้ นสถานที่
สานักปฏบิ ัติธรรม วงั กาบรางธรรมสถาน ตาบลเมอื งจัง อาเภอภเู พยี ง จงั หวดั นา่ น
1.5.2 ขอบเขตดา้ นเน้อื หา
1) สามารถดขู ้อมูลเกี่ยวกับการปฏิบตั ิธรรมได้
2) สามารถดูเบอรโ์ ทรศพั ทข์ องสถานทป่ี ฏบิ ตั ธิ รรมหรอื ทีพ่ ักอาศยั ได้
3) สามารถดูพกิ ัด (GPS) เพอื่ คน้ หาตาแหนง่ ท่ตี ัง้ ของสถานท่ีปฏิบัติธรรมหรือทีพ่ ักอาศัยได้
4) สามารถเข้าดูรปู ภาพประกอบของสถานทปี่ ฏิบตั ิธรรมหรอื ท่ีพกั อาศัยได้
5) การจัดวางรูปแบบของเว็บไซต์มีความสวยงามและทนั สมัย
1.5.3 ขน้ั ตอนในการดาเนนิ งาน
1) ศกึ ษาคน้ ควา้ และรวบรวมขอ้ มูล
2) นาเสนอโครงรา่ งคน้ ควา้ ต่ออาจารย์
3) ทาการศึกษาเนื้อหาทเ่ี กยี่ วข้องและเครื่องมือทน่ี ามาใชใ้ นการจัดทา การพฒั นา
เว็บไซต์ เพือ่ การออกแบบและสร้างเวบ็ ไซต์ประชาสัมพันธ์เพือ่ ให้ผทู้ ี่มาปฏบิ ตั ิ
ธรรมหรือนกั ท่องเทย่ี วทีเ่ ขา้ มาในจงั หวัดนา่ นสะดวกต่อการคน้ หาทพ่ี ัก

3

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

5) ปรบั แต่งและแกไ้ ขขอ้ ผิดพลาด
6) จดั ทาเอกสารประกอบการนาเสนอการคน้ คว้า
7) นาเสนอผลงานการคน้ ควา้
8) ส่งเอกสารการออกแบบและสรา้ งเว็บไซต์ประชาสมั พนั ธ์สานักปฏิบัตธิ รรม ฉบบั

สมบรู ณ์
1.5.4 ขอบเขตด้านเน้อื หา

1) หนา้ หลกั
- ขอ้ มูลวังกาบรางธรรมสถาน
- คุณธรรม วิสัยทศั น์ คติธรรม ขอ้ คิดแนวธรรม
- ประวัตวิ งั กาบรางธรรมสถาน
- อาคารสถานท่ี
- แผนผังวงั กาบรางธรรมสถาน

2) บทสวดมนต์
- บทสวดมนต์ ทาวตั รเชา้
- บทสวดมนต์ ทาวัตรเยน็
- บทสวดมนต์ ชนิ บญั ชร
- บทสวดมนต์ แผเ่ มตตา
- บทสวดมนต์ คาถาปอ้ งกนั ภยั 10 ทศิ

3) ประมวลภาพ
- ภาพถ่ายในวงั กาบรางธรรมสถาน

4) แฟนเพจ
- วังกาบราง แหล่งท่องเทย่ี วทางธรรม นา่ น

5) แผนท่ี
- แผนท่ี Google Map

6) ผบู้ รหิ ารวงั กาบรางธรรมสถาน
- รายละเอียดผู้บริหาร

7) เวลาในขณะนี้
- แสดงเวลา

8) เวบ็ ไซตท์ นี่ ่าสนใจ

4

- เว็บไซต์ แหลง่ ท่องเทยี่ วในจังหวดั น่าน
- เวบ็ ไซต์ จังหวดั น่าน
9) จานวนผเู้ ข้าชมเวบ็ ไซต์
- วัน
- สัปดาห์
- เดือน
10) เพลงท่ีเล่นในขณะน้ี
1.6 สถำนท่ีในกำรดำเนินงำน
1.6.1 สโมสรนักศกึ ษาคณะวทิ ยาการจดั การ มหาวทิ ยาลัยราชภัฏเชยี งใหม่
1.6.2 สานักปฏิบตั ิธรรม วงั กาบรางธรรมสถาน
1.6.3 หอพกั ที่อาศัย

1.7 เครอ่ื งมอื ท่ีใชใ้ นกำรศึกษำ
1.7.1 ด้านฮารด์ แวร์ (hardware)
1) คอมพิวเตอรโ์ น๊ตบุ๊ค ASUS VivoBook Pro 15 N580VD หน่วยประมวลผล 2.80 กิกะเฮิรต์ ซ์
2) หนว่ ยความจาหลกั 8 GB
3) หนว่ ยความจาสารอง 100 GB
4) การแสดงผลจอภาพ 15.6 น้วิ
1.7.2 ดา้ นซอฟตแ์ วร์ (software)
1) ระบบปฏบิ ัตกิ าร วินโดว์ 10 (Microsoft windows 10)
2) โปรแกรมอินเทอรเ์ น็ต กูเกลิ โคม (google chrome 51.0.1)
3) โปรแกรมไมโครซอฟท์ ออฟฟศิ 2016 (Microsoft office 2016)
4) โปรแกรม EditPlus 3
5) โปรแกรม (Adobe Photoshop CS6)
6) โปรแกรม (Adobe Illustrator cs6)

1.8 นิยำมศพั ท์
อินเทอร์เน็ต (Internet) หมายถึง เครือข่ายคอมพิวเตอร์นานาชาติท่ีมีสายตรงเช่ือมต่อไปยัง

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

5

อีกทอดหนึ่ง (เช่น เครือข่ายภายในมหาวิทยาลัย องค์กร หรือเครือข่ายของผู้ให้บริการอินเทอร์เน็ต)
มิฉะนัน้ ก็จะใช้ไมไ่ ดผ้ ล

เทคโนโลยี (Technology) หมายถึง การใช้ความรู้ เคร่ืองมือ ความคิด หลักการ เทคนิค
ระเบียบวิธี กระบวนการตลอดจนผลงานทางวิทยาศาสตร์ทั้งส่ิงประดิษฐ์และวิธีการมาประยุกต์ใช้ใน
ระบบงานเพื่อช่วยให้เกิดการเปล่ียนแปลงในการทางานให้ดีย่ิงข้ึนและเพ่ือเพิ่มประสิทธิภาพและ
ประสทิ ธิผลของงานให้มีมากย่ิงข้นึ

เว็บไซต์ (Web Site) หมายถึง แหล่งท่ีเก็บรวบรวมข้อมูลเอกสารและส่ือประสมต่างๆ เช่น
ภาพ เสียง ข้อความ ของแต่ละบริษัทหรือหน่วยงานโดยเรียกเอกสารเหล่านี้ว่า เวบ็ เพจ (Web Page)
และเรียกหน้าแรกของเว็บไซต์แต่ละเว็บไซต์ว่า โฮมเพจ (Home Page) หรอื อาจกล่าวได้วา่ เว็บไซต์ก็
คือเว็บเพจอย่างน้อยสองหน้าท่ีมีลิงค์ (Links) ถึงกัน ตามหลักคาว่าเว็บไซต์จะใช้สาหรับผู้ท่ีมี
คอมพิวเตอร์แบบเซิร์ฟเวอร์ หรือจดทะเบียนเป็นของตนเองเรียบร้อยแล้วเช่น www.google.co.th
ซง่ึ เปน็ เวบ็ ไซตท์ ่ใี ห้บริการสืบคน้ ขอ้ มลู เป็นตน้

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

6

1.9 ระยะเวลำและแผนดำเนินงำน

ตำรำงท่ี 1.1 ระยะเวลาและแผนดาเนนิ งาน

เดอื น/ปี เมษำยน พ.ศ.2561 กรกฎำคม สงิ หำคม
ระยะเวลำ พฤษภำคม มิถุนำยน

แผนกำรดำเนนิ งำน
1.ศกึ ษาคน้ ควา้ ข้อมูล

2.ออกแบบเวบ็ ไซต์

3.ศกึ ษาขอ้ มลู ท่จี ะนามาใช้

4.สรา้ งเว็บไซตท์ ี่ออกแบบมา

5.ทดสอบเวบ็ ไซต์

6.ทาการประเมินเว็บไซต์

7.แก้ไขเวบ็ ไซต์

8.นาเสนอเวบ็ ไซต์

9.ทาเอกสารประกอบการ
นาเสนอ

บทที่ 2

เอกสารและงานวจิ ยั ทีเ่ ก่ียวขอ้ ง

การออกแบบและสร้างเว็บไซต์ประชาสัมพันธ์วังกาบรางธรรมสถาน สานักปฏิบัติธรรมและ
แหลง่ ท่องเที่ยวทางธรรมจังหวดั น่าน ได้แนวคดิ และทฤษฎจี ากงานวิจยั อน่ื ๆ ทเ่ี กี่ยวข้องดังต่อไปนี้

2.1 แนวคิดเกย่ี วกบั เวบ็ ไซต์
2.2 แนวคิดการออกแบบเว็บไซต์
2.3 การใชส้ ใี นการออกแบบเวบ็ ไซต์
2.4 อินเทอร์เน็ตและการพฒั นาเว็บไซต์
2.5 แนวคิดเกีย่ วกบั ภาษา html
2.6 แนวคดิ ในเกยี่ วการประชาสัมพนั ธ์
2.7 การเขียนเว็บไซต์ดว้ ยโปรแกรม EditPlus 3
2.8 งานวิจัยทเี่ กี่ยวข้อง

2.1 แนวคิดเกย่ี วกับเวบ็ ไซต์
2.1.1 ความหมายเว็บไซต์
เว็บไซต์ (website, web site หรือ site) หมายถึง หน้าเว็บเพจหลายหน้า ซ่ึงเชื่อมโยงกันผ่าน

ทางไฮเปอร์ลิงก์ ส่วนใหญ่จัดทาขึ้นเพื่อนาเสนอข้อมูลผ่านคอมพิวเตอร์ โดยถูกจัดเก็บไว้ใน
เวิลด์ไวด์เว็บ หน้าแรกของเว็บไซต์ที่เก็บไว้ท่ีชื่อหลักจะเรียกว่า โฮมเพจเว็บไซต์โดยท่ัวไปจะให้บริการต่อ
ผใู้ ช้ฟรี แตใ่ นขณะเดียวกนั บางเว็บไซต์จาเป็นต้องมีการสมัครสมาชิกและเสียค่าบริการเพ่อื ที่จะดขู ้อมูล ใน
เว็บไซต์นั้น ซึ่งได้แก่ข้อมูลทางวิชาการ ข้อมูลตลาดหลักทรัพย์ หรือข้อมูลส่ือต่างๆ ผู้ทาเว็บไซต์มี
หลากหลายระดับ ตงั้ แต่สร้างเวบ็ ไซตส์ ว่ นตวั จนถงึ ระดับเวบ็ ไซตส์ าหรบั ธรุ กิจหรอื องค์กรต่างๆ การเรียกดู
เว็บไซต์โดยท่ัวไปนิยมเรียกดูผ่านซอฟต์แวร์ในลักษณะของ เว็บเบราว์เซอร์ “เว็บไซต์” [ระบบออนไลน์].
แหล่งที่มา https://th.wikipedia.org/wiki

8

2.1.2 องค์ประกอบของเว็บไซต์
สมนกึ คีรีโต (2538) ได้อธบิ ายเกย่ี วกบั องคป์ ระกอบทวั่ ไปของ Website ไว้ดังนี้
1. ชอื่ ของเว็บไซต์ หรือ URL (Uniform Source Locator) คอื รหสั สืบคน้ แหล่งข้อมลู ซ่ึงเป็นการ
เช่ือมโยงข้อมูลในระบบเวิลด์ไวด์เว็บ โดยกาหนดให้ข้ึนต้นด้วยคาว่า “http://” หมายถึงการเชื่อมโยงกับ
แหล่งข้อมูลเวิลด์ไวด์เว็บโดยมีระบบโต้ตอบของการส่ือสารแบบ HTTP (Hyper Text Transfer
Protocol) หรอื การแสดงขอ้ มูลแบบHypertext รูปแบบของ URL ประกอบด้วย http://host/path/text
มคี วามหมายดังน้ี

- Http หมายถงึ รูปแบบของการเชือ่ มโยงขอ้ มูลแบบ Hypertext
- Host หมายถึง ชื่อโฮสต์ของเคร่ืองคอมพิวเตอร์ท่ีต่อเชื่อมในระบบเครือข่ายโดย

ใหบ้ ริการตา่ ง ๆ แก่ผูใ้ ช้เครอื ข่ายนั้น ซ่งึ เปน็ ทีอ่ ยู่ในรูปของโดเมน (Domain Name) ซง่ึ
อ้างอิงแทนหมายเลขไอพี (IP) ช่วยอานวยความสะดวกต่อผู้ใช้บริการคอมพิวเตอร์ใน
การจดจาที่ง่าย จึงมีการกาหนดระบบชื่อคอมพิวเตอร์มาตรฐานในระบบเครือข่าย
อินเทอร์เน็ตที่ว่า DNS (Domain Name Server) หรือ ระบบช่ือโดเมนโดยช่ือ DNS
ประกอบด้วย ชื่อเครื่องคอมพิวเตอร์ ชื่อเครือข่ายท้องถิ่น ช่ือสับโดเมน (Subdomain)
และชื่อโดเมน สามารถแบ่งประเภทของโดเมน ไดด้ งั น้ี
- edu หรือ ac คอื ประเภทสถาบนั การศกึ ษา
- org หรือ or คือ ประเภทองค์กรไมห่ วังผลกาไร
- com หรือ co คอื ประเภทหนว่ ยงานเอกชนองคก์ ารค้าหรอื องค์กรท่หี วังผลกาไร
- net หรือ in คือ ประเภทผู้ใชบ้ รกิ ารอนิ เทอร์เน็ต
- gav หรอื go คอื ประเภทหนว่ ยงานของรัฐหรอื หนว่ ยงานราชการ
- mil หรือ mi คอื ประเภทหนว่ ยงานทางราชการ เช่น kku.ac.th นัน่ คือ th หมายถึง ชือ่
ลับโดเมนที่บอกประเภทของสถาบันการศึกษาและ หมายถึง ช่ือเครือข่ายท้องถิ่นที่ระบุ
ว่าระบบดังกลา่ วเปน็ ของมหาวทิ ยาลยั ขอนแกน่
- Path หมายถึง เส้นทางสาหรับกาหนดไดเรกทอรบี นคอมพิวเตอรใ์ นระบบยูนกิ ซ์
- File หมายถึง ไฟล์ทีต่ ้องการโอนย้ายหรอื ไฟล์ขอ้ มลู

9

2. โฮมเพจ (Homepage) เป็นข้อมูลหน้าแรกท่ีให้ข้อมูลเกี่ยวกับเว็บไซต์น้ัน ๆ จึงจะเป็นจุดเร่ิมต้นของ
เวบ็ ไซต์ตา่ ง ๆ โฮมเพจน้จี ะทาหนา้ ท่ีเหมือนกับประตูหน้าบ้านของเวบ็ ไซต์แตล่ ะแห่ง ซึง่ ถือวา่ เป็นท่ีแรกที่
เข้าไปเยี่ยมชมเว็บไซต์จะต้องผ่าน และยังเป็นท่ีเชื่อมโยงไปยังเว็บเพจต่าง ๆ ต่อไป ไม่ว่าจะเป็นการ
เช่อื มโยงโดยตรงหรือเชื่อมโยงผ่านเวบ็ อนื่ ๆ

การสรา้ งโฮมเพจ สามารถทาไดห้ ลายวิธี ดังน้ี
2.1. ใช้ Web Hosting ซึ่งเป็นเว็บไซต์ท่ีทาหน้าที่ให้บริการจัดเก็บข้อมูล โดยบาง

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

2.2. ใช้โปรแกรมสรา้ งเว็บเพจ เปน็ การสรา้ งโฮมเพจโดยการใช้โปรแกรมสาเร็จรูปในการ
สร้าง ทาให้สามารถสร้างตาราง จัดวางตาแหน่งข้อความหรือรูปภาพได้สะดวก ตลอดจนการ
ปรับแต่งแก้ไขจะทาได้ง่าย ซ่ึงโปรแกรมท่ีนิยมใช้ในปัจจุบันได้แก่โปรแกรม FrontPage,
Dreamweaver, Go Live หรือ Home Site เป็นตน้

3. โปรแกรมภาษา HTML และ JavaScript การสร้างโฮมเพจโดยใชโ้ ปรแกรมภาษา HTML และ
JavaScript นัน้ ผู้สรา้ งโฮมเพจจะต้องมีความสามารถและความชานาญในการเขียนโปรแกรมไดเ้ ปน็ อย่าง
ดี เนอ่ื งจากการสรา้ งโฮมเพจดว้ ยวิธนี ้ี เป็นการพมิ พค์ าสั่งและขอ้ มูลที่ต้องการแสดงบนโฮมเพจพร้อมกนั

2.2 แนวคิดการออกแบบเวบ็ ไซต์
2.2.1 หลกั การออกแบบเวบ็ ไซต์
การออกแบบหน้าเว็บไซต์เป็นขั้นตอนที่มีความสาคัญมากขั้นตอนหนึ่งเน่ืองจากเป็นตัวกลางใน

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

ชลติ า ไวรักษ์ (2550) ได้แบ่งการออกแบบเวบ็ ไซต์ไว้เปน็ 2 ส่วน คอื
1. การออกแบบกราฟกิ เพือ่ ปฏสิ มั พนั ธ์กบั ผใู้ ชบ้ รกิ าร (Graphic User Interface)
2. การออกแบบเทคโนโลยีการนาเสนอขอ้ มลู ของเวบ็ ไซต์

หลักการออกแบบเวบ็ ไซตใ์ นเรื่องของส่วนตอ่ ประสาน (interface) ทม่ี คี ณุ ภาพไวด้ งั นี้
1. ควรออกแบบในลักษณะให้ผู้ใช้สามารถควบคุมการใช้ได้ง่ายและสะดวกที่สุด ดังนั้น

การวจิ ยั ถึงลักษณะของผู้ใช้และความต้องการผู้ใช้งานจงึ เปน็ ส่งิ สาคญั

10

2. มีการสร้างเคร่ืองนาทาง (Navigation aids) ท่ีชัดเจน โดยมีการให้ไอคอนและกราฟิก
ประกอบด้วยองค์ประกอบต่อไปน้ีคือ คาอธิบาย (Text) ภาพ (Graphic) ส่ือมัลติมีเดีย (Media) การ
เช่ือมโยง (Link) แบบฟอร์ม (Form) ตาราง (Table) กรอบ (Frame) แผนที่ภาพ (Image map) และ
หน่วยของโปรแกรมภาษาจาวา (Java Applets) ส่วนในการออกแบบหน้าโฮมเพจน้ันเปรียบเสมือนกับ
หนา้ ปกของนติ ยสารท่ตี อ้ งออกแบบที่ใหด้ ูนา่ สนใจอยู่บนแผงหนงั สือโดยโฮมเพจ ที่ดคี วรมลี กั ษณะดงั นี้

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

2.2.2 องคป์ ระกอบของการออกแบบเว็บไซต์
ภุชงค์ เกวียกกุทัณฑ์ (2550) ได้กล่าวถึงการออกแบบเว็บไซต์ท่ีมีประสิทธิภาพนั้นตอ้ ง

คานงึ ถงึ องคป์ ระกอบสาคญั ดงั ต่อไปน้ี
1) ความเรียบง่าย (Simplicity) หมายถึง การจากัดองค์ประกอบเสริมให้เหลือเฉพาะ

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

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

11

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

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

4) เนื้อหา (Useful Content) ถือเป็นส่ิงสาคัญที่สุดในเว็บไซต์ เนื้อหาในเว็บไซต์
ต้องสมบูรณ์และได้รับการปรับปรุงพัฒนาให้ทันสมัยอยู่เสมอ ผู้พัฒนาต้องเตรียมข้อมูลและเนื้อหาท่ีผู้ใช้
ต้องการให้ถูกต้องและสมบูรณ์ เน้ือหาที่สาคัญท่ีสุดคือเนื้อหาที่ทีมผพู้ ัฒนาสร้างสรรค์ขึ้นมาเอง และไม่ไป
ซ้ากับเว็บอ่ืน เพราะจะถือเป็นส่ิงท่ีดึงดูดผู้ใช้ให้เข้ามาเว็บไซต์ได้เสมอ แต่ถ้าเป็นเว็บ ที่ลิงค์ข้อมูลจากเว็บ
อ่ืน ๆ มาเมื่อใดก็ตามท่ีผู้ใช้ทราบว่า ข้อมูลนั้นมาจากเว็บใด ผู้ใช้ก็ไม่จาเป็น ต้องกลับมาใช้งานลิงค์
เหล่าน้นั อกี

5) ระบบเนวิเกชั่น (User-Friendly Navigation) เป็นส่วนประกอบที่มีความสาคัญต่อ
เว็บไซต์มาก เพราะจะช่วยไม่ให้ผู้ใช้เกิดความสับสนระหว่างดูเว็บไซต์ ระบบเนวิเกช่ัน จึงเปรียบเสมือน
ป้ายบอกทาง ดังน้ันการออกแบบเนวิเกชั่น จึงควรให้เข้าใจง่าย ใช้งานได้สะดวก ถ้ามีการใช้กราฟิกก็ควร
ส่ือความหมาย ตาแหน่งของการวางเนวิเกช่ันก็ควรวางให้สม่าเสมอ เช่น อยู่ตาแหน่งบนสุดของทุกหน้า
เป็นต้น ซ่ึงถ้าจะให้ดีเม่ือมีเนวิเกช่ันที่เป็นกราฟิก ก็ควรเพ่ิมระบบเนวิเกชั่นที่เป็นตัวอักษรไว้ส่วนล่างด้วย
เพอ่ื ชว่ ยอานวยความสะดวกให้กบั ผู้ใช้ ที่ยกเลกิ การแสดงผลภาพกราฟกิ บนเว็บเบราวเ์ ซอร์

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

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

12

8) ความคงที่ในการออกแบบ (Design Stability) ถ้าต้องการให้ผู้ใช้งานรู้สึกว่าเว็บไซต์มี
คุณภาพ ถูกต้อง และเชื่อถือได้ ควรให้ความสาคัญกับการออกแบบเว็บไซต์เป็นอย่างมากต้องออกแบบ
วางแผนและเรียบเรียงเน้ือหาอย่างรอบคอบ ถ้าเว็บท่ีจัดทาข้ึนอย่างลวก ๆ ไม่มีมาตรฐานการออกแบบ
และระบบการจดั การข้อมลู ถา้ มปี ญั หามากข้นึ อาจสง่ ผลใหเ้ กดิ ปญั หาและทาให้ผู้ใชห้ มดความเช่ือถือ

9) ความคงทข่ี องการทางาน (Function Stability) ระบบการทางานต่าง ๆ ในเว็บไซตค์ วร
มีความถูกต้องแน่นอน ซ่ึงต้องได้รับการออกแบบสร้างสรรค์และตรวจสอบอยู่เสมอ ตัวอย่างเช่น ลิงค์ต่าง
ๆ ในเว็บไซต์ ต้องตรวจสอบว่ายังสามารถลิงค์ข้อมูลได้ถูกต้องหรือไม่ เพราะเว็บไซต์อ่ืนซ่ึงอาจมีการ
เปลี่ยนแปลงได้ตลอดเวลา ปัญหาท่ีเกิดจากลิงค์ ก็คือ ลิงค์ขาดซ่ึงพบได้บ่อยเป็นปัญหาที่สร้างความ
ราคาญกบั ผู้ใช้เปน็ อยา่ งมาก
2.3 การใชส้ ีในการออกแบบเวบ็ ไซต์

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

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

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

13

การแสดงถึงความแตกต่างของสีที่แสดงออกทางอารมณ์ มีชีวิตชีวาหรือเศร้าโศก รูปแบบของสีท่ีสายตา
ของมนุษยม์ องเหน็ สามารถแบง่ ออกเป็น 3 กลุ่ม คือ

1. สีโทนร้อน (Warm Colors) เป็นกลุ่มสีที่แสดงถึงความสุข ความปลอบโยน ความอบอุ่น และ
ดึงดดู ใจ สกี ลมุ่ นีเ้ ป็นกลุ่มสีท่ีช่วยใหห้ ายจากความเฉอ่ื ยชา มชี วี ิตชีวามากยง่ิ ขึน้

2. สีโทนเยน็ (Cool Colors) แสดงถึงความทีด่ ูสุภาพ ออ่ นโยน เรียบร้อย เปน็ กล่มุ สที ่ีมีคนชอบมาก
ท่สี ดุ สามารถโนม้ นาวในระยะไกลได้

3. สีโทนกลาง (Neutral Colors) สีทีเ่ ป็นกลาง ประกอบดว้ ย สดี า สีขาว สีเทา และสีน้าตาล กลุม่ สี
เหล่าน้คี ือ สกี ลางทีส่ ามารถนาไปผสมกับสีอนื่ ๆ เพื่อใหเ้ กิดสีกลางขึน้ มา
สิ่งที่สาคัญต่อผู้ออกแบบเว็บคือการเลือกใช้สีสาหรับเว็บ นอกจากจะมีผลต่อการแสดงออกของ

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

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

14

ขณะเดียวกันหากใช้สีไม่เหมาะสมก็จะทาให้ผู้ชมขาดความสนใจและอยากไปชมเว็บอ่ืน
มากกว่า
- ช่วยกระตุ้นความรู้สึกการตอบสนองจากผู้ชม เพราะคนแต่ละคนจะมีความรู้สึกสัมพันธ์
กบั สีบางสีมากเป็นพเิ ศษหากสีท่ใี ชม้ คี วามสัมพันธก์ ับเขา เขากจ็ ะให้ความสนใจเว็บมากขน้ึ
- ช่วยในการจัดระเบียบให้กับขอ้ ความตา่ ง ๆ ทาใหข้ ้อความ เน้ือหา ดูเป็นสดั ส่วนมากขึน้
นอกจากสีจะช่วยในการออกแบบได้ดีแล้ว ก็ยังสามารถส่งเสริมเอกลักษณ์ขององค์กรหรือ
หน่วยงานต่าง ๆ ได้ ด้วยการนาสีประจาองค์กรมาใช้เป็นสีหลักของเว็บไซต์ อย่างไรก็ตามการออกแบบ
เก่ียวกบั สีไมใ่ ช่เร่ืองง่าย จงึ ควรทาคดิ วิเคราะห์การออกแบบให้รอบคอบทส่ี ุด
2.3.2 ความรเู้ บือ้ งต้นเกีย่ วกับสี
ธนชั ชยั ศรสี ุเทพ (2559) กลา่ วว่า ทกุ คนคงไดร้ ู้จกั แมส่ ีหรือสีขน้ั ตน้ ( primary color ) ทัง้ สาม
ซ่ึงประกอบด้วย สีแดง,เหลือง และน้าเงิน มาก่อนจากการศึกษาในอดีต เหตุท่ีสีทั้งสามน้ีถือว่าเป็นแม่สี
หลัก ก็เพราะว่าสีท้ังสามเป็นสีท่ีไม่สามารถเกิดขึ้นจากการผสมของสีอ่ืน ๆ และยังเป็นต้นกาเนิดของสีอืน่
ๆ ท่ีเหลือทั้งหมด ต่อไปก็เป็นสีข้ันท่ี 2 ท่ีเกิดจากการผสมของสีขั้นต้นเข้าด้วยกัน โดยท่ี สีแดงกับสีเหลือง
ได้เปน็ สีสม้ ,สีเหลอื งกับนา้ เงินไดเ้ ปน็ เขียว และสีนา้ เงนิ กับแดงไดเ้ ป็นม่วง ตอ่ จากน้ันกเ็ ป็นสขี ้ันท่ี 3 ซึง่ เกิด
จากการผสมของสีขน้ั ต้นกบั สีขั้นท่ี 2 ท่ีอยตู่ ิดกนั ท้ังสองดา้ น ในทส่ี ดุ เรากจ็ ะไดส้ ีขั้นท่ี 3 ทง้ั หมด 6 สี โดยสี
ข้ันต้น 1 สี ทาให้เกิดสีข้ันท่ีสาม 2 สี ดังน้ี : เหลือง-ส้ม , แดง-ส้ม ,แดง-ม่วง , น้าเงิน-ม่วง ,น้าเงิน-เขียว
และเหลือง-เขียว เมื่อเรารู้ท่ีมาของสีต่าง ๆ ดีแล้ว ในข้ันต่อไปจะเป็นเร่ืองของพ้ืนฐานการผสมสี การ
จัดระบบสี และรูปแบบของชดุ สีพื้นฐาน

ภาพท่ี 2.1 แสดงตวั อย่างสีข้ันต่าง ๆ

15

2.3.3 การผสมสี ( Color Mixing)
รูปแบบการผสมสีเพ่ือให้เกิดเป็นสีต่าง ๆ สามารถแบ่งได้เป็น 2 แบบ คือการผสมของแสงหรือ
การผสมแบบบวก ( additive mixing ) และการผสมของรงควัตถุ (pigment) หรือการผสมแบบลบ
(subtractive mixing) ซึง่ มีรายละเอยี ดดังตอ่ ไปน้ี
- การผสมสีแบบบวก (Additive Mixing) การผสมสีแบบบวกนี้ เป็นส่ิงท่ีค่อนข้างยากในการทา
ความเข้าใจ เพราะมีหลักการท่ีลบล้างส่ิงที่คุณถูกสอนมาในสมัยก่อน เรากาลังจะพูดถึงรูปแบบ
การผสมของแสง ไม่ใชก่ ารผสมของวตั ถมุ ีสีบนกระดาษ เนื่องจากแสงสีขาวประกอบด้วยลาแสงท่ี
มสี ตี า่ ง ๆ ตามความยาวคล่ืนแสง ความยาวคลืน่ แสงพ้นื ฐานได้แก่สีแดง เขยี ว และน้าเงนิ ไมใ่ ช่สี
แดง เหลืองและน้าเงินอย่างที่เราเข้าใจมาก่อน เมื่อคลื่นแสงเหล่าน้ีมีการซ้อนทับกันก็จะ
ก่อให้เกิดการบวกและรวมตัวกันของความยาวคล่ืนแสง จึงเป็นที่มาของช่ือ “สีแบบบวก” เม่ือ
แสงทั้งสามสีมีการผสมกันเป็นคู่ ก็จะเกิดเป็นสีน้าเงินแกมเขียวหรือ cyan (เกิดจากสีน้าเงินบวก
กับเขียว) สีแดงแกมม่วงหรือ magenta (เกิดจากสีแดงบวกกับน้าเงิน) และสีเหลือง (เกิดจากสี
แดงบวกกับเขยี ว) และในที่สดุ เมอ่ื ผสมสีท้ังสามเขา้ ด้วยกนั ก็จะได้ผลลพั ธเ์ ปน็ แสงสีขาวอีกคร้ัง

สื่อใด ๆ กต็ ามที่มีการใช้แสงส่องออกมา อยา่ งเชน่ จอโปรเจคเตอร์ (movie projector)
ทีวี หรือจอมอนิเตอร์สาหรับคอมพิวเตอร์ ต่างก็เป็นไปตามกฎของการผสมสีแบบบวกนี้ เพราะ
เหตนุ ี้ การออกแบบสสี าหรบั เวบ็ ไซต์ จงึ ต้องอาศัยหลกั การผสมสแี บบบวกนเ้ี ชน่ กัน

ภาพที่ 2.2 รปู แสดงการผสมสแี บบบวก

16

- การผสมสีแบบลบ (Subtractive Color Mixing) การผสมสีแบบลบไม่ได้มีความเก่ียวข้องกับ
เรื่องของลาแสงแต่อย่างใด ๆ แตเ่ ก่ียวเน่อื งกบั การดูดกลนื และสะท้อนแสงของวตั ถตุ า่ งๆ เมือ่ แสง
สขี าวส่องมายังวตั ถุหน่งึ ๆ วตั ถุนนั้ จะดูดกลืนแสงที่ความยาวคลนื่ บางระดับไว้และสะท้อนแสงท่ี
เหลือออกมาให้เราเห็น สีข้ันต้นในรูปแบบน้ีประกอบด้วย สีแดงแกมม่วง (magenta) สีน้าเงิน
แกมเขียว (cyan) และสเี หลือง ซ่งึ ไมใ่ ช่สีแดง เหลือง และน้าเงินอยา่ งธรรมดาอย่างท่หี ลาย ๆ คน
เข้าใจ เมื่อมีการผสมของรงควัตถุหรือวัตถุมีสี จะเกิดการรวมกันของสีที่จะถูกดูดกลืนไว้ ทาให้
ปรมิ าณแสงทีจ่ ะสะท้อนออกมาลดลง จึงเปน็ ทีม่ าของช่ือ “ สีแบบลบ ” เม่อื สที ง้ั สามมีการ
ผสมกันเป็นคู่ๆ ก็จะเกิดผลเป็นสีต่าง ๆ ได้แก่สีแดง (เกิดจากสีแดงแกมม่วงบวกกับเหลือง) สี
เขียว (เกิดจากสีเหลืองบวกกับน้าเงินแกมเขียว) และสีน้าเงิน (เกิดจากสีน้าเงินแกมเขียวบวกกบั
แดงแกมม่วง) ในขั้นสุดท้าย เมื่อรวมสีทั้งสามเข้าด้วยกันก็จะเห็นเป็นสีดา เพราะมีการดูดกลืน
แสงทกุ สีไว้ทั้งหมด ทาให้ไม่มแี สงสใี ดสามารถสะท้อนออกมาได้
ส่ือต่างๆท่ีเก่ียวข้องกับการใช้วตั ถุมีสี อย่างเช่น สีท่ีใช้ในการวาดรูปของศิลปิน , ดินสอสี
, สเี ทียน รวมถึงระบบการพมิ พ์แบบ 4 สี ในส่ิงพมิ พ์ต่าง ๆ (โดยมหี มกึ สดี าเพิ่มมาอีกสหี น่ึง) ลว้ น
อาศัยการผสมสีแบบลบนีท้ ้ังส้ิน

ภาพท่ี 2.3 รูปแสดงการผสมสีแบบลบ
2.3.4 วงล้อสี (Color Wheel)
เพื่อความเข้าใจถึงความสัมพันธ์ของสีที่ดีข้ึนเราความทาความรู้จักกับระบบสีท่ีเข้าใจง่าย และมี
ประโยชน์มากท่ีสุดที่เรียกกันว่า วงล้อสี ( color wheel ) ซึ่งเป็นรูปแบบหนึ่งที่มีระบบการจัดเรียงสี
ทั้งหมดไว้ในวงกลม วงล้อสีถูกพัฒนาข้ึนจากความต้องการกฎระเบียบท่ีชัดเจนของลาดับและความ
กลมกลืนของสี แม้ในอดีตจะมีการพัฒนาและออกแบบระบบสีในรูปแบบต่าง ๆ มากมาย แต่ส่วนใหญ่
มักจะมีความซับซ้อนเกินกว่าท่ีจะนามาใช้ประโยชน์ในการออกแบบจริง ในท่ีสุดเราจะใช้วงล้อสีแบบ 12
ขั้น ซึ่งถูกประดิษฐ์ขึ้นโดย Sir Isaac Newton ในปี 1666 ที่ได้แสดงถึงการจัดลาดับเฉดสีอย่างมีเหตุผล
และง่ายต่อการนาไปใช้ จึงเป็นประโยชน์อย่างมากต่อศิลปินในการศึกษาและออกแบบศิลปะต่าง ๆ
รวมทงั้ การเลอื กใช้สีในกระบวนการออกแบบเวบ็ ไซต์ที่เรากาลังสนใจอยู่

17

ภาพที่ 2.4 วงล้อสีแบบลบ (Subtractive Color Wheel)

ภาพท่ี 2.5 วงลอ้ สีแบบบวก (Additive Color Wheel)
วงล้อสีแบบบวกน้ีดูคล้าย ๆ กับวงล้อสีแบบลบ แต่มีความสมดุลของสีที่ต่างกันอย่างมาก ตรงท่ีสี
โดยส่วนใหญ่ถูกครอบคลุมด้วยสีน้าเงินและเขียว ขณะท่ีสีเหลืองและสีแดงมีผลเพียงเล็กน้อยในวงล้อสี
แบบนี้เช่นเดยี วกบั การกระจายตัวของสีในสเปกตรัม ซง่ึ มีลกั ษณะเด่นของความยาวคลน่ื แสงสีน้าเงิน และ
มีสว่ นของความยาวคลนื่ แสงสีแดงเพียงเล็กนอ้ ย
2.3.5 สีที่เป็นกลาง ( Neutral Colors )
สที ่ีเป็นกลางคอื สีกลุม่ หนึ่งท่ีไม่ได้ถกู บรรจุไวใ้ นวงล้อสี เพราะเปน็ สที ไ่ี ม่ได้รับอิทธิพลใด ๆ มาจาก
สีอ่ืน ซ่ึงก็คือสีเทา แม้ว่าจะมีเฉดสีของสีเทาจานวนมากมายไม่ส้ินสุด แต่แค่เพียงท่ี 256 ระดับ สายตา
คนเราก็ไม่สามารถแยกความแตกต่างออกจากกันได้แล้ว ทาให้มองเห็นเป็นแถบสีระหว่างดากับขาว โดย
ไมม่ ีรอยตอ่ แตอ่ ยา่ งใด สีเทาไดช้ ่อื ว่าเป็นสกี ลางกเ็ พราะเปน็ สีทีไ่ ม่มลี ักษณะเฉพาะส่วนตัว ทาให้ชุดของสีที่

18

ประกอบไปด้วยสีเทาท้ังหมดจะดูค่อนข้างจืดชืด ไม่เร้าอารมณ์ อย่างไรก็ตาม สีเทาก็จะไปรับเอาลักษณะ
จากสีที่อยู่ล้อมรอบน้ันเอง เป็นเหตุให้ศิลปินส่วนใหญ่หลีกเลี่ยงการใชส้ ีเทา เพราะผลที่ได้รับจากสีอื่นน้ัน
ไมค่ งท่ี ยากต่อการควบคมุ สีเทา 12 ขัน้ ตามลาดับจากอ่อนไปเข้ม

สีอ่อน สีเข้ม และโทนสี ( Tint , Shade and Tone )ในการผสมสีกลางดังกล่าวเข้ากับสีบริสุทธิ์
(สีที่ไม่ผ่านการผสมกับสีอื่นมาก่อน) จะเกิดเป็นสีต่าง ๆ จานวนมากมาย จนไม่สามารถบรรจุไว้ในวงล้อสี
ได้ท้ังหมด จากประสบการณ์ท่ีผา่ นมา คุณคงรู้ว่าสีแดงไม่ได้มีเพียงเฉดสเี ดียว แท้จริงแล้ว มีแดงอ่อน,แดง
แก่,แดงเข้ม หรือแดงจาง ฯลฯ อีกจานวนนับไม่ถ้วน สีเหล่านี้เป็นผลมาจากการผสมของสีบรสิ ุทธ์ิกบั สดี า
ขาว และเทาระดบั ตา่ ง ๆ น่ันเอง

- เมอ่ื สบี รสิ ทุ ธผ์ิ สมกับสีขาว จะได้เปน็ สอี ่อน (tint of the hue)
- เมื่อสีบรสิ ทุ ธ์ผิ สมกบั สเี ทา จะได้เปน็ โทนสีทร่ี ะดับต่าง ๆ (tone of the hue)
- เมอ่ื สบี ริสทุ ธิผ์ สมกับสดี า จะไดเ้ ปน็ สเี ข้ม (shade of the hue)
สีอ่อน สีเข้ม และโทนสี มีประโยชน์อย่างมาก ในการจัดชุดของสี เพราะทาให้สีสีหน่ึงสามารถแสดงออก
และใหค้ วามร้สู กึ ไดห้ ลายรปู แบบยิ่งขึ้น ทดแทนการใชส้ เี ดยี วลว้ น ๆ ซ่ึงอาจมลี ักษณะไม่นา่ สนใจ

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

19

2.3.7 รูปแบบชุดสีพ้นื ฐาน (Simple Color Schemes)
หลังจากคุณไดร้ ้จู กั พ้นื ฐานของสมี าพอสมควร ต่อไปจะเปน็ เรื่องของชดุ สที ่ีถูกจัดกลุ่มอย่างเข้ากัน
ด้วยรูปแบบต่าง ๆ ทาให้เรามีโอกาสเลอื กชุดสีเหล่าน้ีมาใชใ้ นการออกแบบได้โดยไม่ต้องเสียเวลาสมุ่ เลอื ก
สีต่าง ๆ ให้ดูเข้ากัน อย่างไรก็ตามคุณควรยึดรูปแบบเหล่าน้ีเป็นเพียงหลักการเบ้ืองต้น และยังคงต้องทา
การปรับเปลี่ยนค่าของสี ( hue ) ความอ่ิมตัวของสี ( saturation ) และความสว่างของสี ( lightness )
เพ่ือให้เกิดลักษณะทอี่ า่ นงา่ ย สวยงาม และเหมาะสมกับเนือ้ หาของเวบ็ ไซต์
- ชุดสีรอ้ น ( Warm Color Scheme ) ชุดสรี อ้ นประกอบด้วยสีม่วงแกมแดง , แดงแกมม่วง , แดง
, สม้ , เหลือง และเขียวอมเหลือง สเี หล่าน้ีสร้างความรสู้ ึกอบอุ่น สบาย และความรู้สึกต้อนรับแก่
ผู้ชม ช่วยดึงดดู ความสนใจไดง้ า่ ย ในทางจติ วทิ ยาสรี อ้ นมีความสัมพนั ธ์กับความสุข สะดวก สบาย
สีต่าง ๆ ในชุดสีร้อนมีความกลมกลืนอยู่ในตัวเอง ขณะที่อาจจะดูไม่น่าสนใจบ้าง เพราะขาดสี
ประกอบทต่ี ัดกันอย่างชัดเจน

ภาพท่ี 2.7 รปู แสดงชดุ สีร้อน
- ชดุ สเี ยน็ ( Cool Color Scheme ) ชดุ สีเย็นประกอบดว้ ยสีมว่ ง , น้าเงนิ , นา้ เงนิ อ่อน , ฟ้า , น้า

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

20

ภาพที่ 2.8 รูปแสดงชดุ สีเย็น
- ชุดสีแบบสีเดียว (Monochromatic Color Scheme) รูปแบบของชุดสีที่ง่ายท่ีสุดคือ ชุดแบบสี

เดียวที่มีค่าของสีบริสุทธ์ิเพียงสีเดียว ความหลากหลายของสีชุดนี้เกิดจากการเพ่ิมความเข้มหรือ
ความเข้มหรือความอ่อนในระดับต่าง ๆ ให้กับสีตั้งต้น ดังนั้นชุดสีแบบเดียวของสีแดงอาจ
ประกอบด้วยสีแดงล้วน สีแดงอิฐ (สีเข้ม ของสีแดง) สีสตรอเบอรี่ (สีอ่อนปานกลางของสีแดง)
และสีชมพู (สีออ่ นมากของสชี มพู)

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

ภาพท่ี 2.9 รปู แสดงชดุ สีแบบเดียว
- ชุดสแี บบสามเส้า (Triadic Color Scheme) วธิ กี ารท่ีงายอีกแบบหน่ึงในการเลือกชุดสีมาใช้ก็คือ

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

21

อย่างรนุ แรงของสีทั้งสามนั่นเอง เนื่องจากการตัดกันอยา่ งรุนแรงของสีท้งั สาม ที่สรา้ งความสะดุด
ตาอย่างมาก ส่วนชุดสีท่ีได้จากสีช้ันสองและสีขั้นที่สามนั้น ยากต่อการนามาใช้เพราะความ
แตกต่างของสดี ังกลา่ วยงั ไม่รุนแรงนกั

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

ภาพที่ 2.10 รปู แสดงชุดสแี บบสามเสา้
- ชุดสีท่ีคล้ายคลึงกัน (Analogous Color Scheme) ชุดสีท่ีมีรูปแบบอย่างง่ายอีกแบบหน่ึง ก็คือ

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

22

ภาพที่ 2.11 รูปแสดงชุดสีท่ีคล้ายคลึงกันได้แกส่ ี 2-3 สที ี่อยู่ตดิ กันในวงล้อ
- ชุดสีตรงข้าม (Complementary Color Scheme) สีตรงข้ามในท่ีนี้ หมายถึง สีที่อยู่ตรงกันข้าม

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

เมอื่ นาสีทง้ั สองมาใช้คู่กันกจ็ ะทาใหส้ ีทงั้ สองมีความสว่าง และสดใสมากขนึ้ ซ่ึงถือเป็นคู่สี
ท่ีมีความแตกต่างมากท่ีสุด และยังมีความเสถียรมากท่ีสุด ( maximum contrast and
maximum stability) ข้อได้เปรียบของสีในรูปแบบน้ีคือ ความสดใส สะดุดตา และบางครั้งดู
น่าสนใจกว่าสีที่ใช้รูปแบบสามจุดเสียอีก ทาให้แน่ใจได้ว่าชุดสีตรงกันข้ามนี้ จะไม่ดูจืดชืด ขาด
ความน่าสนใจ อย่างไรก็ดีจานวนสีท่ีจากัดในรูปแบบน้ี ทาให้ผู้อ่านให้ความสนใจได้ง่าย แล้ว
หลังจากนน้ั ก็อาจละทิง้ ความรสู้ ึกสนใจไปได้งา่ ยเชน่ กัน

ภาพที่ 2.12 รปู แสดงชดุ สีตรงข้ามได้แกส่ ี 2 สีท่ีอยตู่ รงขา้ มในวงล้อ

23

- ชุดสีตรงข้ามข้างเคียง (Split Complementary Color Scheme) ชุดสีตรงข้ามข้างเคียงมี
รูปแบบทีเ่ ปลี่ยนแปลงมาจากชดุ สีตรงข้าม แต่ละความแตกต่างกนั ท่ีสีใดสหี นงึ่ ทอ่ี ยู่ตรงขา้ มกันถูก
แทนท่ีด้วยสีที่อยู่ด้านข้างท้ังสอง เช่น สีฟ้าซึ่งมีสีด้านข้างเป็นสีน้าเงินอ่อนกับสีน้าเงินแกมเขียว
ฉะน้ันชดุ สีตรงข้ามข้างเคยี งท่ไี ด้จึงประกอบด้วย สแี ดง สีน้าเงินอ่อน และสีน้าเงนิ แกมเขยี ว
ข้อได้เปรียบของชุดสีแบบน้ี คือ ความหลากหลายที่มากขึ้นเมื่อเทียบกับชุดสีตรงข้าม
อย่างไรก็ตามความหลากหลายท่ีเพ่ิมข้ึนมาน้ี มีผลให้ความสดใสและความสะดุดตาลดลง รวมถึง
ความเขา้ กนั ของสีก็ลดลงดว้ ย

ภาพท่ี 2.13 รูปแสดงชุดสตี รงข้ามข้างเคียง
- ชุดสตี รงขา้ มข้างเคียงทั้ง 2 ด้าน (Double Split Complementary Color Scheme) ชุดสีแบบ

น้ีถูกดัดแปลงมาจากชุดสีตรงข้าม เช่นกัน แต่คราวนี้สีตรงกันข้ามท้ังสองถูกแบ่งแยกเป็นสี
ด้านขา้ งทงั้ 2 ด้าน จงึ ไดเ้ ป็นชุดสี 4 สี ดงั เชน่ สีแดงแกมมว่ งกบั น้าเงินแกมเขยี ว และนา้ เงินอ่อน
กับสม้

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

ภาพท่ี 2.14 รูปแสดงชุดสีตรงข้ามแบบแบง่ แยก 2 ดา้ น
นอกเหนือจากน้ี ยังมีรูปแบบอื่นที่เรียกว่า Alternate Complementary Color Scheme โดยมีสีที่ได้
จากสามเหลี่ยมรวมกบั อกี สหี นึ่งทอ่ี ยู่ตรงกันขา้ มกบั สใี ดสหี น่ึงในสามเหลยี่ ม เชน่ สเี ขยี ว สมี ว่ งแดง สแี ดง

24

และสสี ม้ ส่วนแบบสุดท้ายได้แก่ ชดุ สีแบบสีเ่ หลี่ยม (Tetrad Color Scheme) ที่เกิดจาก 4 สีท่อี ยตู่ รงกัน
ข้ามภายใต้รูปส่ีเหลยี่ ม วิธนี ้ีเป็นการใชส้ ขี น้ั ต้น 1 สี สขี ้ันทสี่ อง 1 สี และสขี ้ันทส่ี าม 2 สี มาประกอบกนั

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

25

3. ใชส้ ีเพอ่ื ส่ือความหมาย
Color Wheel Pad ท่ีออกแบบโดย web.designBrand.com มีการแสดงค่าของสีในระบบ
เลขฐานสิบไวใ้ นแต่ละช่องสี ซ่งึ จะเป็นประโยชนใ์ นการเลอื กใชส้ ตี ามรูปแบบต่าง ๆ จากวงล้อสี
ดังท่ีได้เห็นแล้วว่า สีแต่ละสีให้ความหายและความรู้สึกต่างกัน โดยสีหน่ึง ๆ อาจสื่อความหายไป
ในทางบวกหรือทางลบก็ได้ ข้ึนอยู่กับสถานการณ์ ตัวอย่างเช่น สีดาให้ความรู้สึกโศกเศร้าในงานศพ แต่
กลับแสดงถึงความเป็นมืออาชีพในการแสดงผลงานของศิลปิน ดังน้ันสีท่ีให้ความหมายและความรู้สึกตรง
กบั เนือ้ หา จะช่วยสนับสนุนใหผ้ ู้ใชไ้ ด้รับขอ้ มลู ท่ีถูกต้องและครบถว้ น

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

2.4 อินเทอร์เนต็ และการพัฒนาเว็บไซต์
ธวัชชัย ศรีสุเทพ (2548) กล่าวว่า ความหมายของอินเทอร์เน็ต อินเทอร์เน็ต ( Internet ) คือ

เครือข่ายของคอมพิวเตอร์ขนาดใหญ่ท่ีเชื่อมโยงเครือข่ายคอมพิวเตอร์ทั่วโลกเข้าด้วยกัน โดยอาศัย
เครือข่ายโทรคมนาคมเป็นตัวเช่ือมเครือข่าย ภายใต้มาตรฐานการเช่ือมโยงด้วยโปรโตคอลเดียวกันคือ
TCP/IP (Transmission Control Protocol / Internet Protocol) เพื่อให้คอมพิวเตอร์ทุกเครื่องใน
อินเทอร์เน็ตสามารถส่ือสารระหว่างกันได้ นับว่าเป็นเครือข่ายท่ีกว้างขวางที่สุดในปัจจุบัน เน่ืองจากมีผู้

26

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

ที่มาของอินเทอร์เน็ต อินเทอร์เน็ตเกิดข้ึนในปี ค.ศ. 1969 (พ.ศ. 2512) จากการเกิดเครือข่าย
ARPANET (Advanced Research Projects Agency NETwork) ซ่งึ เป็นเครือขา่ ยสานักงานโครงการวิจัย
ช้ันสูงของกระทรวงกลาโหม ประเทศสหรัฐอเมริกา โดยมีวัตถุประสงค์หลักของการสร้างเครือข่ายคือ
เพ่ือให้คอมพิวเตอร์สามารถเชื่อมต่อ และมีปฏิสัมพันธ์กันได้ เครือข่าย ARPANET ถือเป็นเครือข่าย
เรม่ิ แรก ซึ่งตอ่ มาได้ถูกพัฒนาใหเ้ ป็นเครือขา่ ยอนิ เทอรเ์ น็ตในปจั จุบนั

การประยุกต์ใช้อินเทอร์เน็ต การประยุกต์ใช้อินเทอร์เน็ตในปัจจุบันทาได้หลากหลาย อาทิเช่น
ไปรษณีย์อิเล็กทรอนิกส์ หรือ อีเมล (e-Mail) , สนทนา (Chat), อ่านหรือแสดงความคิดเห็นในเว็บบอร์ด,
การตดิ ตามขา่ วสาร, การสืบค้นขอ้ มลู / การค้นหาข้อมูล, การชม หรือซอ้ื สินคา้ ออนไลน์ , การดาวน์โหลด
เกม เพลง ไฟล์ข้อมูล ฯลฯ, การติดตามข้อมูล ภาพยนตร์ รายการบันเทิงต่าง ๆ ออนไลน์, การเล่นเกม
คอมพิวเตอร์ออนไลน์, การเรียนรู้ออนไลน์ (e-Learning), การประชุมทางไกลผ่านอินเทอร์เน็ต (Video
Conference), โทรศัพท์ผ่านอินเทอร์เน็ต (VoIP), การอัพโหลดข้อมูล หรือ อ่ืน ๆ แนวโน้มล่าสุดของการ
ใช้อินเทอร์เน็ตคือการใช้อินเทอร์เน็ตเป็นแหล่งพบปะสังสรรค์เพื่อ สร้างเครือข่ายสังคม ซ่ึงพบว่าปัจจุบัน
เว็บไซต์ที่เกี่ยวข้องกับกิจกรรมดังกล่าวกาลังได้รับความนิยม อย่างแพร่หลายเช่น เฟสบุ๊ค ทวิตเตอร์
ไฮไฟฟ์ และการใช้เริ่มมีการแพร่ขยายเข้าไปสู่การใช้อินเทอร์เน็ตผ่านโทรศัพท์มือถือ (Mobile Internet)
มากขึ้น เนื่องจากเทคโนโลยปี จั จบุ ันสนบั สนุนให้การเขา้ ถึงเครือข่ายผา่ นโทรศัพท์มือถอื ทาไดง้ า่ ยข้ึนมาก

จานวนผู้ใช้อินเทอร์เน็ตทั่วโลก ปัจจุบันจานวนผู้ใช้อินเทอร์เน็ตทั่วโลกโดยประมาณ 2.095
พันล้านคน หรือ 30.2 % ของประชากรท่ัวโลก (ข้อมูล ณ เดือน มีนาคม 2554) โดยเม่ือเปรียบเทียบใน
ทวีปต่างๆ พบว่าทวีปท่ีมีผู้ใช้อินเทอร์เน็ตมากท่ีสุดคือ เอเชีย โดยคิดเป็น 44.0 % ของผู้ใช้อินเทอร์เน็ต
ท้ังหมด และประเทศที่มีประชากรผู้ใช้อินเทอร์เน็ตมากท่ีสุดคือประเทศจีน คิดเป็นจานวน 384 ล้านคน
หากเปรียบเทียบจานวนผู้ใช้อินเทอร์เน็ตกับจานวนประชากรรวม พบว่าทวีปอเมริกาเหนือมีสัดส่วนผู้ใช้
ต่อประชากรสูงที่สุดคือ 78.3 % รองลงมาได้แก่ ทวีปออสเตรเลีย 60.1 % และทวีปยุโรป คิดเป็น 58.3
% ตามลาดับ

27

ปรเมศวร์ กุมารบญุ (2530) อนิ เทอรเ์ น็ตในประเทศไทย อินเทอรเ์ นต็ ในประเทศไทยเร่ิมข้ึนเมื่อ
ปี พ.ศ. 2530 โดยการเชื่อมต่อมินิคอมพิวเตอร์ของมหาวิทยาลัยสงขลานครินทร์ และสถาบันเทคโนโลยี
แห่งเอเชีย (AIT) ไปยังมหาวิทยาลัยเมลเบิร์น ประเทศออสเตรเลีย แต่ในครั้งน้ันยังเป็นการเช่ือมต่อโดย
ผ่านสายโทรศัพท์ ซึ่งสามารถส่งข้อมูลได้ช้า และไม่เป็นการถาวร จนกระท่ังในปี พ.ศ. 2535 ศูนย์
เทคโนโลยีอิเล็กทรอนิกส์และคอมพิวเตอร์แห่งชาติ (NECTEC) ได้ทาการเชื่อมต่อคอมพิวเตอร์กับ
มหาวิทยาลัย 6 แห่ง ได้แก่ จุฬาลงกรณ์มหาวิทยาลัย, สถาบันเทคโนโลยีแห่งเอเชีย (AIT)
มหาวิทยาลัยสงขลานครินทร์, ศูนย์เทคโนโลยีอิเล็กทรอนิกส์และคอมพิวเตอร์แห่งชาติ (NECTEC),
มหาวิทยาลัยธรรมศาสตร์ และมหาวิทยาลัยเกษตรศาสตร์ เข้าด้วยกันเรียกว่า "เครือข่ายไทยสาร" การ
ให้บริการอินเทอร์เน็ตในประเทศไทยได้เริ่มต้นข้ึนเป็นคร้ังแรกเม่ือ เดือน มีนาคม พ.ศ. 2538 โดยความ
ร่วมมือของรัฐวิสาหกิจ 3 แห่ง คือ การสื่อสารแห่งประเทศไทย องค์การโทรศัพท์ แห่งประเทศไทย และ
สานักงานส่งเสริมวทิ ยาศาสตร์และเทคโนโลยีแห่งชาติ (สวทช.) โดยให้บริการในนาม บริษัท อินเทอร์เน็ต
ประเทศไทย (Internet Thailand) เปน็ ผใู้ ห้บรกิ ารอนิ เทอรเ์ นต็ เชงิ พาณชิ ย์รายแรกของประเทศไทย

จานวนผู้ใช้อินเทอร์เน็ตในประเทศไทยมีการเปล่ียนแปลงดังน้ี ปี 2534 (30 คน) ปี 2535 (200
คน) ปี 2536 (8,000 คน) ปี 2537 (23,000 คน) ข้อมูลล่าสุดของสานักงานสถิติแห่งชาติ ปี 2551 จาก
จ้านวนประชากรอายุ 6 ปีข้ึนไปประมาณ 59.97 ล้านคน พบว่า มีผู้ใช้คอมพิวเตอร์ 16.99 ล้านคน คิด
เป็น ร้อยละ 28.2 และมีผ้ใู ช้อินเทอร์เน็ต 10.96 ล้านคน คิดเปน็ ร้อยละ 18.2

ความหมายของเว็บไซต์ และเว็บเพจ ความหมายของเว็บไซต์ เว็บไซต์ (อังกฤษ: website, web
site, Web site) หมายถึง หน้าเว็บเพจหลายหน้า ซ่ึงเช่ือมโยงกันผ่านทางไฮเปอร์ลิงก์ ส่วนใหญ่จัดทาขน้ึ
เพ่ือนาเสนอข้อมูลผ่านคอมพิวเตอร์ โดยถูกจัดเก็บไว้ในเวิลด์ไวด์เว็บ หน้าแรกของเว็บไซต์ที่เก็บไว้ที่ช่ือ
หลักจะเรียกว่า โฮมเพจ เว็บไซต์โดยทั่วไป จะให้บริการต่อผู้ใช้ฟรี แต่ในขณะเดียวกันบางเว็บไซต์
จาเป็นต้องมีการสมัครสมาชิกและเสีย ค่าบริการเพ่ือที่จะดูข้อมูล ในเว็บไซต์น้ัน ซ่ึงได้แก่ข้อมูลทาง
วิชาการ ขอ้ มูลตลาดหลักทรัพย์ หรือ ขอ้ มลู ส่อื ต่าง ๆ ผ้ทู า้ เว็บไซต์มหี ลากหลายระดับ ตงั้ แตส่ รา้ งเว็บไซต์
ส่วนตัว จนถึงระดับเว็บไซต์ สาหรับธุรกิจหรือองค์กรต่าง ๆ การเรียกดูเว็บไซต์โดยท่ัวไปนิยมเรียกดูผ่าน
ซอฟต์แวร์ในลกั ษณะของ เว็บเบราวเ์ ซอร์

ความหมายของโฮมเพจ โฮมเพจ (Home Page) คือเว็บเพจหน้าแรกซึ่งเป็นทางเข้าหลักของ
เว็บไซต์ ปกติเว็บเพจทุก ๆ หน้าในเว็บไซต์จะถูกลิงค์ (โดยตรงหรือโดยอ้อมก็ตาม) มาจากโฮมเพจ ดังนั้น
บางครั้งจึงมีผู้ใช้ คาว่าโฮมเพจโดยหมายถึงเว็บไซท์ทั้งหมด แต่ความจริงแล้วโฮมเพจหมายถึงหน้าแรก
เท่านั้น ถ้าเปรียบกับร้านค้า โฮมเพจก็เป็นเสมือนหน้าร้านนั่นเอง ดังน้ันจึงมักถูกออกแบบให้โดดเด่นและ
นา่ สนใจมากที่สุด

28

ความหมายของเว็บเพจ เว็บเพจ (Web Page) หมายถึง หน้าเอกสารของบริการ WWW ซ่ึง
ตามปกตจิ ะถูกเก็บ อยู่ในรปู แบบไฟล์ HTML (Hyper Text Markup Language) โดยไฟล์ HTML 1 ไฟล์
ก็คือเว็บเพจ 1 หน้าน่ันเอง ภายในเว็บเพจอาจประกอบไปด้วยข้อความ ภาพ เสียง วิดีโอ และ
ภาพเคลื่อนไหวแบบมัลติมีเดีย นอกจากนี้ เว็บเพจแต่ละหน้าจะมีการเชื่อมโยงหรือ “ลิงค์” (Link) กัน
เพอ่ื ใหผ้ ู้ชมเรียกดูเอกสารหน้าอ่ืน ๆ ทีเ่ กีย่ วข้องไดส้ ะดวกอกี ดว้ ย

2.5 แนวคิดเกีย่ วกบั ภาษา html
2.5.1 HTML คือ ภาษาหลักท่ีใช้ในการเขียนเว็บเพจ โดยใช้ Tag ในการกาหนดการแสดงผล

HTML ยอ่ มาจากคาวา่ Hypertext Markup Language โดย Hypertext หมายถึงขอ้ ความ ท่ีเชือ่ มตอ่ กัน
ผ่านล้งิ (Hyperlink) Markup language หมายถึง ภาษาท่ใี ช้ Tag ในการกาหนดการแสดงผลสิ่งตา่ ง ๆ ที่
แสดงอยู่บนเว็บเพจ ดังนั้น HTML จึงหมายถึง ภาษาท่ีใช้ Tag ในการกาหนดการแสดงผลเว็บเพจที่ต่างก็
เชือ่ มถึงกันใน Hyperspace ผา่ น Hyperlink นัน่ เอง

2.5.2 ประวัติความเป็นมาของภาษา html ความเป็นมาของ HTML เร่ิมข้ึนเม่ือปี 1980 เมื่อ
Tim Berners Lee เสนอต้นแบบสาหรับนักวิจัยใน CERN เพื่อแลกเปลี่ยนเอกสาร ข้อมูลด้านการวิจัย
โดยใช้ชื่อว่า Enquire ในปี 1990 เค้าได้เขียนโปรแกรมเบราเซอร์ และทดลองรันบนเซิฟเวอร์ที่เค้า
พัฒนาขึ้น HTML ไดร้ บั การรจู้ กั จาก HTML Tag ซงึ่ มอี ยู่ 18 Tag ในปี 1991

HTML ถกู พฒั นาจาก SGML และ Tim กค็ ิดเสมอื นว่า HTML เป็นโปรแกรมย่อยของ SGML อยู่
ในตอนนั้นต่อมาในปี 1996 เพ่ือกาหนดมาตรฐานให้ตรงกัน W3C World Wide Web Consortium จึง
เป็นผู้กาหนดสเปกท้ังหมดของ HTML และปี 1999 HTML 4.01 ก็ถือกาเนิดขึ้น โดยมี HTML 5 ซ่ึงเป็น
Web Hypertext Application ถูกพัฒนาต่อมาในปี 2004 นอกจากน้ียังมีการพัฒนาไปเป็น XHTML ซึ่ง
คือ Extended HTML ซ่ึงมีความสามารถและมาตรฐานท่ีรัดกุมกว่าอีกด้วยโดยอยู่ภายใต้การควบคุมของ
W3C (World Wide Web Consortium)
“ความหมายของภาษา html” [ระบบออนไลน์].

แหลง่ ทมี่ า http://www.enjoyday.net/webtutorial/html/html_chapter01.html

29

2.6 แนวคดิ ในเกยี่ วการประชาสมั พันธ์
วิมลพรรณ อาภาเวท (2546) ได้ให้ความหมายของการประชาสัมพันธ์ว่าคือการติดต่อส่ือสาร

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

ชม ภูมิภาค (2526) ให้ความหมายของการประชาสัมพันธ์ว่า การส่งสารแก่สาธารณชนที่
เกี่ยวข้อง เพ่อื ใหเ้ กดิ ความเขา้ ใจอันดีต่อกันและจะต้องรบั สาร คอื รบั ขอ้ มลู ป้อนกลบั จากสาธารณชนด้วย
เพ่ือการปรับเข้าหากันให้ได้ การประชาสัมพันธ์เป็นขบวนการสองทาง (Two-way process) นั่นคือ
การประชาสมั พันธ์จะต้องทาหน้าที่ท้ังในการส่งสารและรับข้อมูลข่าวสาร ขบวนการในการประชาสัมพันธ์
มีส่วนประกอบที่เกี่ยวข้องด้วยกันอยู่ 3 ประการ น่ันคือ การส่งสาร (Information) การปรับเข้าหากัน
(Adjustment) และผลสดุ ท้ายคอื การชกั จูง (Persuasion)

2.7 การเขียนเว็บไซต์ดว้ ยโปรแกรม EditPlus4
2.7.1 ความหมายของโปรแกรม EditPlus4
EditPlus4 คือโปรแกรมแก้ไขข้อความ 32 บิต สาหรับระบบปฏิบัติการไมโครซอฟท์ วินโดวส์

เปน็ โปรแกรมสัญชาติเกาหลีใต้ พฒั นาโดย คิมซังอลิ จากอเี อส-คอมพิวติง เปน็ แชร์แวร์ใหท้ ดลองใช้งานได้
30 วัน ซ่งึ หากเลยกาหนดแล้วโปรแกรมจะไมส่ ามารถบันทึกไฟล์ได้

กิติศักด์ิ เจริญโภคานนท์ (2550) กลา่ วว่า EditPlus เปน็ โปรแกรมจาพวก text editor, html
editor, php editor คล้าย ๆ กับโปรแกรม Notepad ของ windows แต่มีความสามารถสูงกว่ามาก ซึ่ง
EditPlus จะมีการแสดงสี เพ่ือบอกถึงลักษณะของภาษา HTML, PHP, Java, C/C++, CSS, ASP, Perl
JavaScript และอ่นื ๆ

ดังนั้น EditPlus4สามารถนามาเขียนโปรแกรมได้หลายภาษา และเป็นท่ีนิยมในการนามาพัฒนา
Software โดยทมี่ คี ณุ สมบัตติ ่าง ๆ ช่วยสนบั สนนุ การเขยี นโปรแกรมมากมาย เชน่ HTML toolbar, user
tools, line number, auto-completion, column selection ฯลฯ

2.7.2 คณุ ลักษณะของโปรแกรม Edit Plus4
โปรแกรมน้ีมีเครื่องมือสาหรับโปรแกรมเมอร์อาทิ การเน้นวากยสัมพันธ์ (และรองรับไฟล์
วากยสัมพันธ์ท่ีกาหนดเอง) การแปลงชนิดและการเข้ารหัสไฟล์ การแปลงอักขระจบบรรทัด (ระหว่าง
รูปแบบวินโดวส์ ลินุกซ์ และแมคอินทอช) นิพจน์ปกติสาหรับค้นหาและ แทนที่ การบันทึกการกด

30

แปน้ พมิ พ์ การตรวจการสะกด (เฉพาะภาษาอังกฤษสาเนียงอเมริกัน และสาเนียงริเตน) รองรบั การแก้ไขยู
นิโคดเตม็ รูปแบบ ทางลัดแป้นพิมพ์ที่กาหนดเองได้ การเตมิ ขอ้ ความเตม็ โดยอัตโนมัติ code folding ฯลฯ
สามารถเรยี กดูและแก้ไขไฟล์ตา่ ง ๆ ในแท็บ และมีตัวเรยี กดไู ฟล์ภายในโปรแกรมน้ีด้วย

โปรแกรมนี้รองรับไฟล์ข้อความได้หลายประเภท เช่น ข้อความธรรมดา เอชทีเอ็มแอล ภาษาซี/
ซีพลัสพลัสเพิร์ล พีเอชพี จาวา เจเอสพี จาวาสคริปต์ วีบีสคริปต์ ซีเอสเอส เอกซ์เอ็มแอล ซีชาร์ป
นอกจากนี้ยังมีแมแ่ บบสาหรบั เอกสารบางชนิดมาใหด้ ้วย

2.7.3 ข้อดขี องโปรแกรม Edit Plus4
- สามารถใช้กับภาษาไทยได้แยกคาส่ังต่าง ๆ ด้วยการแสดงสีท่ีไม่เหมือนกัน ทาให้เรา
สามารถตรวจสอบไดง้ ่ายวา่ เราพิมพ์ ผิดทค่ี าสงั่ ไหน
- สามารถทาตวั เองเปน็ web browser ไดด้ ้วย (IE 5.XX Compatible)
- เมื่อเขียนเว็บด้วยภาษา HTML เสร็จแล้ว สามารถดูการแสดงผลได้เลยทันทีโดยใช้เมนู
View > View in Browser หรอื Ctrl-B หรือ ใช้วธิ ีคลิกปุ่มไอคอน View in Browser
- เปดิ ไฟล์ได้ทีละหลาย ๆ ไฟลพ์ ร้อมกนั
- สามารถค้นหาและแทนที่ (Find & Replace) ข้อความเดียวกันได้ทีละหลาย ๆ ไฟล์
พร้อมกัน
- สามารถค้นหาข้อความที่ต้องการ ว่าปรากฏอยู่ในไฟล์ไหนบ้าง (แสดงหมายเลขบรรทัด
ด้วย) ในไดเรคทอรีเ่ ดยี วกัน

2.8 งานวจิ ยั ทเ่ี กยี่ วขอ้ ง
ประภาวดี รัฐเมือง และ ทิพวิมล ชมพูคา (2560) ทาการวิจัยเร่ืองการพัฒนาระบบ ซ้ือ-ขาย

สินค้ามือสองออนไลน์งานวิจัยนี้มีวัตถุประสงค์เพ่ือ 1) พัฒนาระบบซ้ือ-ขายสินค้ามือสองออนไลน์ 2)
ประเมินคุณภาพระบบซื้อ-ขายสนิ ค้ามือสองออนไลน์และ 3) สอบถามความพึงพอใจของผู้ใช้ที่มตี ่อระบบ
ซื้อ-ขายสินค้ามือสองออนไลน์ กลุ่มตัวอย่าง ได้แก่นักศึกษาคณะเทคโนโลยีสารสนเทศ สาขาเทคโนโลยี
คอมพิวเตอร์และการสื่อสารช้ันปีท่ี 4 จานวน 30 คน เครื่องมือท่ีใช้ในการศึกษา 1) ระบบซื้อ-ขายสินค้า
มือสองออนไลน์ 2) แบบประเมินคุณภาพระบบซ้ือ-ขายสินค้ามือสองออนไลน์และ 3)แบบสอบถามความ
พึงพอใจระบบซ้ือ-ขายสินค้ามือสองออนไลน์ การวิเคราะห์ข้อมูลใช้สถิติพื้นฐาน คือ ค่าเฉลี่ย และส่วน
เบ่ยี งเบนมาตรฐาน

ผลการวิจัยพบว่า 1) ระบบซ้ือ-ขายสินค้ามือสองออนไลน์ มีส่วนประกอบในการใช้งาน 3 ส่วน
คือ ส่วนของผู้ซ้ือส่วนของผู้ขาย และส่วนของผู้ดูแลระบบ 2) ผลการประเมินคุณภาพระบบ ซื้อ-ขาย

31

สินค้ามือสองออนไลน์ โดยรวมอยู่ในระดับมาก และ 3) ผลการสอบถามความพึงพอใจของผู้ใช้งานท่ีมตี อ่
ระบบซ้อื -ขายสินค้ามือสองออนไลน์โดยรวมอยู่ในระดับ มากทีส่ ุด

กรกมล ซนุ้ สวุ รรณ, ธชั ตะวนั ชนะกูล, ณฐั พล ทงุ่ เย็น, จุฑามณี มโี ชคและวรางคณา เอ็มเล่ง
(2560) ทาการวิจัยเร่ืองการพัฒนาระบบพาณิชย์อิเล็กทรอนิกส์สาหรับจัดการผลิตภัณฑ์วิสาหกิจชุมชน
กลุ่ม การพัฒนาระบบพาณิชย์อิเล็กทรอนิกส์สาหรับผลิตภัณฑ์กลุ่มแม่บ้านควนน้าใส จังหวัดสตูลมี
วัตถุประสงค์ เพื่อออกแบบและพัฒนาระบบพาณิชย์อิเล็กทรอนิกส์และเพ่ิมช่องทางการจัดจ้าหน่าย
ผลิตภัณฑ์ของกลุ่มแม่บ้านควนน้าใส จังหวัดสตูล โดยการประยุกต์ใช้โปรแกรมเวิร์ดเพรส ร่วมกับการ โป
รโมทเว็บไซต์

ผลการวิจัยพบว่า ระบบสามารถเพิ่มช่องทางในการจัดจ้าหน่ายสินค้าในรูปแบบออนไลน์และ
สามารถเพ่มิ ช่องทางการประชาสัมพันธผ์ ลติ ภัณฑข์ องวิสาหกิจชุมชนกลุ่มแมบ่ า้ นควนนา้ ใสไดแ้ ละจากการ
ประเมินประสิทธิภาพและความพึงพอใจทมี่ ีต่อระบบจากสมาชกิ ในกลมุ่ อยู่ในเกณฑ์ดีแม่บ้านควน น้าใส
จงั หวัดสตูล

สุกัญชลิกา บุญมาธรรม, พีรศุษย์ บุญมาธรรม, กัญญารินทร์ มณีบุญ (2558) โครงงานการ
ออกแบบเว็บไซต์พาณิชย์อิเล็กทรอนิกส์สาหรับธุรกิจ OTOP ในจังหวัดเพชรบุรี งานวิจัยนี้มีวัตถุประสงค์
เพื่อออกแบบเว็บไซต์พาณิชย์อิเล็กทรอนิกส์สาหรับธุรกิจ OTOP ในจังหวัดเพชรบุรี กลุ่มทดลองคือ
ผปู้ ระกอบการ OTOP ในจงั หวดั เพชรบุรีจานวน 30 ผู้ประกอบการ เลอื กโดยวิธีการเจาะจง เครื่องมอื ทใี่ ช้
มนการวิจัยประกอบด้วย แบบสอบถามความพึงพอใจของผู้ใช้งานที่มีต่อการออกแบบเว็บไซต์พาณิชย์
อิเล็กทรอนิกส์สาหรับธุรกิจ OTOP ในจังหวัดเพชรบุรี และเว็บไซต์พาณิชย์อิเล็กทรอนิกส์สาหรับธุรกิจ
OTOP ในจงั หวดั เพชรบรุ ี สถติ ทิ ใี่ ชค้ ือ ค่าเฉลี่ยและสว่ นเบยี่ งเบนมาตรฐาน

ผลการวิจัยพบว่า การออกแบบเว็บไซต์พาณิชย์อิเล็กทรอนิกส์สาหรับธุรกิจ OTOP ในจังหวัด
เพชรบุรี ถูกออกแบบให้ใช้งานง่าย มีโมดูลเพียงพอต่อการใช้งาน มีรูปลักษณ์เหมาะสมกับแต่ละ
ผู้ประกอบการ และความพึงพอใจต่อการออกแบบเวบ็ ไซต์พาณิชยอ์ ิเล็กทรอนิกสส์ าหรบั ธรุ กิจ OTOP ใน
จงั หวดั เพชรบรุ ี โดยภาพรวมอยู่ในระดับมาก (̅=4.43, S.D. =0.496)

ฮาบิ๊บ หมัดแหล๊ะ ,อาฟาร่า ปานดารงค์ (2558) โครงงานการสร้างเว็บไซต์ระบบขายสินค้า
บารุงผิวออนไลน์ด้วย Dreamvewer เร่ือง การสร้างเว็บเพ่ือค้าขายนี้ จัดทาข้ึนโดยมี วัตถุประสงค์เพื่อให้
การขายสินค้าทางเว็บไซต์ง่ายในการส่ังซ้ือสินค้าในSocial Media ซ่ึงเป็นที่ได้รับความสนใจและเป็นท่ี
นิยมในปัจจุบันในการส่ังสินค้าออนไลน์ โดยได้ศึกษารูปแบบและพัฒนาการเรียนรู้ในการจัดสร้างเว็บไซต์
ด้วยโปรแกรม Dreamvewer ท้ังนี้ ได้ทาการศึกษาค้นคว้าเนื้อหาความรู้ท่ี สนใจเก่ียวกับเรื่อง การใช้

32

โปรแกรมใน การสร้างเว็บไซต์ระบบขายสินค้าบารุงผิวออนไลน์ ซึ้งการขายสินค้าน้ันไม่ได้ขายเฉพาะท่ี
ร้านค้า เท่าน้ัน แต่เรายังนามาขายในเว็บไซต์เพื่อสร้างความสะดวกให้กับ ลูกค้ามากขึ้น โดยผู้จัดทาได้
สรา้ ง ระบบขายสินคา้ บารุงผวิ ออนไลน์ดว้ ย Dreamvewer และหนงั สือ PHP Bootstrap+E-commerce
มาประยุกต์ใชใ้ หเ้ ขา้ กบั การเรยี นรู้ของตนเองมากยิ่งข้ึน

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

ปิยมาภรณ์ ช่วยชูหนู (2559)การค้นคว้าอิสระนี้มีวัตถุประสงค์เพื่อศึกษาปัจจัยท่ีมีอิทธิพลต่อ
การตัดสนิ ใจซื้อสนิ ค้าผา่ นทางสังคมออนไลน์ ผลของการศึกษาจะชว่ ยให้ผู้ประกอบการท่ีทาธุรกิจการขาย
สินค้าผ่านทางสังคมออนไลน์สามารถนาข้อมูลที่ได้ไปใช้วางแผนปรับปรุงหรือพัฒนาธุรกิจต่อไปได้
งานวิจัยน้ีเป็นงานวิจัยเชิงปรมิ าณ กลุ่มตัวอย่างคือ ผู้ท่ีเคยซื้อสินค้าผ่านทาง สังคมออนไลน์ จานวน 400
คน โดยใช้แบบสอบถามออนไลน์เป็นเคร่ืองมือในการเก็บรวบรวมข้อมูล สถิติท่ีใช้ในการวิเคราะห์ข้อมูล
คือ สถิติเชิงพรรณา ประกอบด้วย ความถ่ี ร้อยละ ค่าเฉลี่ยและส่วนเบี่ยงเบนมาตรฐาน และสถิติเชิง
ปริมาณ ประกอบด้วย Independent Sample t-test, One-way ANOVA, Factor Analysis และ
Regression ผลการศึกษาพบว่า ผู้ตอบแบบสอบถามส่วนใหญ่เป็นเพศหญิง มีอายุระหว่าง 26-33 ปี
สถานภาพโสด ประกอบอาชีพพนักงานบริษัทเอกชน มีการศึกษาอยู่ในระดับปริญญาตรี และมีรายได้
เฉลี่ยต่อเดือนอยู่ ที่ 10,000 -20,000บาทเครือข่ายสังคมออนไลน์ที่ใช้ซ้ือสินค้าบ่อยที่สุดคือ Facebook
ประเภทสินค้าท่ีซ้ือบ่อยที่สุด คือ สินค้าแฟชั่น โดยจะซื้อเดือนละ 2-3 ครั้ง และจานวน เงินเฉลี่ยท่ีใช้ใน
การซ้อื แตล่ ะครงั้ จะต่ากวา่ 1,000 บาท

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

ชนนิกานต์ จุลมกร (2555) ได้ศึกษาเรื่องปัจจัยที่มีอิทธิพลต่อพฤติกรรมการซื้อสินค้าผ่าน
อินเทอร์เน็ตของนิสิตระดับปริญญาตรีคณะวิทยาศาสตร์ มหาวิทยาลัยบูรพา ผลการศึกษาคร้ังน้ีพบว่า(1)

33

มีปัจจัยส่วนบุคคลเพียงอย่างเดียวคือ ภาควิชา ท่ีไม่มีความสัมพันธ์กับปัจจัยท่ีมีอิทธิพลต่อพฤติกรรมการ
ซ้ือสินค้าผ่านอินเทอร์เน็ต (2) มีปัจจัยเกี่ยวกับข้อมูลพฤติกรรมการใชอ้ ินเทอร์เน็ตเพียงดา้ นเดียวคือ ด้าน
ผลิตภัณฑ์ ท่ีไม่มีความสัมพันธ์กับปัจจัยที่มีอิทธิพลต่อพฤติกรรมการซ้ือสินค้าผ่านอินเทอร์เน็ต (3.1) เพศ
ชายและเพศหญิงมีค่าเฉล่ยี ของระดับความสาคัญเก่ียวกบั ปัจจัยที่มีอิทธิพลต่อพฤติกรรมการซ้ือสนิ ค้าผ่าน
อินเทอร์เน็ตแตกต่างกันในด้านผลิตภัณฑ์และด้านส่งเสริมการขาย (3.2) นิสิตท่ีศึกษาในระดับชั้นปีท่ี
ต่างกันมีค่าเฉล่ียของระดับความสาคัญเก่ียวกับปัจจัยที่มีอิทธิพลต่อพฤติกรรมการซื้อสินค้าผ่าน
อินเทอร์เน็ตแตกต่างกันในทุกด้าน (3.3) นิสิตที่มีรายรับเฉลี่ยต่อเดือนต่างกันมีค่าเฉล่ียของระดับ
ความสาคัญเก่ียวกับปัจจัยที่มีอิทธิพลต่อพฤติกรรมการซื้อสินค้าผ่านอินเทอร์เน็ตแตกต่างกันในด้าน
ผลิตภัณฑ์ (3.4) นิสิตท่ีใช้อินเทอร์เน็ตเฉล่ียคร้ังละกี่นาทีต่างกันมีค่าเฉลี่ยของระดับความสาคัญเกี่ยวกับ
ปัจจยั ทีม่ ีอิทธพิ ลตอ่ พฤติกรรมการซ้อื สินคา้ ผา่ นอนิ เทอรเ์ น็ตแตกต่างกนั ในด้านราคา

บทท่ี 3

วธิ ีดำเนินกำรศึกษำและระบบงำนเดมิ

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

3.1 แผนการดาเนินการศกึ ษา
3.2 การศกึ ษาและวเิ คราะหร์ ะบบงานเดมิ
3.3 ความต้องการระบบใหม่
3.4 ผู้ใชง้ านระบบทเ่ี กีย่ วข้อง

3.1 แผนกำรดำเนนิ กำรศึกษำ
3.1.1 รวบรวมขอ้ มูลเก่ียวกับการประชาสัมพันธเ์ พื่อให้คนสนใจมาสานักปฏิบัติธรรมและแหล่ง
ท่องเท่ยี วทางธรรมจงั หวดั น่าน
3.1.2 ออกแบบเว็บไซต์ เริ่มจากการวางรูปแบบโดยเรียงจากความเหมาะสมของข้อมูล และ
ความเหมาะสม โดยข้อมลู ดงั กล่าวจะแยกเป็นหัวข้อ หมวดหมู่ เพือ่ ใหส้ ามารถใชง้ านง่าย
สามารถเขา้ ใจในการเขา้ เย่ียมชมเวบ็ ไซต์ และเพอื่ ความสวยงามของเว็บไซต์
3.1.3 นาข้อมูลท่ไี ดม้ าเรียบเรียงใหอ้ ยใู่ นหมวดหมู่ท่ีเหมาะสมกบั ขอ้ มลู นนั้ ๆ
3.1.4 ทาการสร้างเว็บไซต์ที่ต้องการ โดยใช้ข้อมูลที่ได้เรียบเรียงมาแล้วจัดทาในรูปแบบที่
ตอ้ งการ
3.1.5 ทาการนาเวบ็ ไซต์ขนึ้ โฮสติง้ จริงเพื่อใหส้ ามารถใช้งานเวบ็ ไซต์ผ่านทางอินเทอร์เน็ตได้
3.1.6 ตรวจเชค็ เวบ็ ไซตว์ ่ามปี ญั หาอะไรไหมหลงั จากที่นาเว็บไซตข์ นึ้ โฮสติง้ จริงแล้ว
3.1.7 ให้ผู้เข้าชมเว็บไซต์ประเมินความพึงพอใจในการเข้าเยี่ยมชมเว็บไซต์ โดยให้ผู้เข้าชม
กรอกแบบสอบถามหลงั จากไดเ้ ข้าใช้งานเว็บไซต์
3.1.8 ทาการนาเสนอเวบ็ ไซต์ต่ออาจารย์ที่ปรกึ ษา
3.1.9 ทาเอกสารประกอบการสร้างเว็บไซต์

35

3.2 กำรศึกษำและวิเครำะห์ระบบงำนเดิม
ระบบงานเดิมคือ เมื่อประชากรทต่ี อ้ งการตดิ ต่อหรือปฏบิ ัติธรรมต้องคน้ หาจากโพสในเฟสบคุ๊ ทา

ให้เสียเวลาและ ไมส่ ามารถตอบไดห้ มดในทันที

3.3 ควำมต้องกำรระบบใหม่
ผู้จัดทาต้องการออกแบบและสร้างเว็บไซต์ประชาสัมพันธ์วังกาบรางธรรมสถาน สานักปฏิบัติ

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

3.4 ผ้ใู ช้งำนระบบทีเ่ ก่ียวขอ้ ง
3.4.1 ผู้ดูแลระบบ (Admin) ทาหน้าในการดูแล และพัฒนาเว็บไซต์ในการเผยแพร่ข้อมูล โดย
สามารถปรับปรุงแก้ไข เพิ่ม และลบข้อมูล เพื่อให้เว็บไซต์มีการใช้งานที่ตอบสนองความ
ตอ้ งการของผทู้ ่เี ข้าชม
3.4.2 ผู้เข้าชมเว็บไซต์ สามารถเข้าไปเยยี่ มชมต่าง ๆ ในเวบ็ ไซต์ ที่ผดู้ ูแลนาเสนอขอ้ มลู ผา่ นทาง
เว็บไซต์

บทท่ี 4
การวิเคราะห์และออกแบบพัฒนาเว็บไซต์

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

4.1 รูปแบบโครงสรา้ งของเว็บไซต์
4.2 โครงสร้างของเวบ็ ไซต์
4.3 โครงสร้างหน้าหลกั ของเวบ็ ไซต์ส่วนผดู้ ูแลระบบ

4.1 รูปแบบโครงสรา้ งของเว็บไซต์
โครงสร้างของเว็บไซต์ประชาสัมพันธ์วังกาบรางธรรมสถาน สานักปฏิบัติธรรมและแหล่ง

ท่องเทีย่ วทางธรรมจังหวัดนา่ น

http://wangkabrang.com

หนา้ แรก ดาวนโ์ หลดเอกสาร ธนาคารบุญ ปฏทิ ินวนั พระ ตดิ ตอ่ เรา Search

ภาพท่ี 4.1 ภาพแสดงโครงสร้างเวบ็ ไซต์

37

4.2 โครงสร้างของเว็บไซต์
4.2.1 โครงสรา้ งและรายละเอยี ดหนา้ แรกของเว็บไซต์

(1)

(3) (4) (2) (7) (8)
(5) (6) (17)

(9)
(14)

(10) (18)

(15)
(11) (19)

(12) (20)
(21)
(16)
(13)

(22)

ภาพท่ี 4.2 ภาพแสดงการออกแบบหน้าโฮมเพจ

38

หนา้ โฮมเพจ เป็นหน้าหลักของเวบ็ ไซต์ ซ่ึงสามารถอธิบายส่วนต่าง ๆ ของหนา้ โฮมเพจไดด้ งั นี้
หมายเลข (1) โลโกเ้ วบ็ ไซตห์ รอื หัวเว็บไซต์
หมายเลข (2) บลอ็ กแสดงข้อความ (วังกาบรางธรรมสถาน)
หมายเลข (3) หน้าแรก
หมายเลข (4) ดาวน์โหลดเอกสาร
หมายเลข (5) ธนาคารบญุ
หมายเลข (6) ปฏทิ ินวันพระ
หมายเลข (7) ติดตอ่ เรา
หมายเลข (8) ค้นหา
หมายเลข (9) ข้อมูลทวั่ ไป
หมายเลข (10) บทสวดมนต์
หมายเลข (11) ประมวลภาพ
หมายเลข (12) แฟนเพจ
หมายเลข (13) แผนท่ี Google Map
หมายเลข (14) รูปภาพ
หมายเลข (15) ข่าวประชาสัมพันธ์
หมายเลข (16) ประมวลภาพกจิ กรรม
หมายเลข (17) ผูบ้ รหิ ารวงั กาบรางธรรมสถาน
หมายเลข (18) เวลาขณะนี้
หมายเลข (19) เวบ็ ไซต์ทีน่ า่ สนใจ
หมายเลข (20) จานวนผเู้ ขา้ ชมเว็บไซต์
หมายเลข (21) วีดีโอ สานกั ปฏิบัตธิ รรม
หมายเลข (22) ขอ้ มูลติดตอ่ วังกาบรางธรรมสถาน

39
4.2.2 โครงสรา้ งและรายละเอียดหนา้ ต่างๆของเว็บไซต์

(1)

(3) (4) (2)
(9(3.1)) (5) (6) (7) (8)
(9(3.2))
(((999((((.339..3534)))))))
(9(.36))
(9(.73))
(((((111(1110(((00((00333330.....5))34)))21))))))

(11) (14)

(12)

(13)

(22)

ภาพท่ี 4.3 ภาพแสดงการออกแบบจอเมนตู า่ งๆ

40

หมายเลข (1) โลโกเ้ ว็บไซตห์ รือหวั เว็บไซต์
หมายเลข (2) บลอ็ กแสดงขอ้ ความ (วังกาบรางธรรมสถาน)
หมายเลข (3) หน้าแรก
หมายเลข (4) ดาวนโ์ หลดเอกสาร
หมายเลข (5) ธนาคารบญุ
หมายเลข (6) ปฏทิ นิ วันพระ
หมายเลข (7) ติดตอ่ เรา
หมายเลข (8) คน้ หา
หมายเลข (9) ขอ้ มลู ทว่ั ไป

หมายเลข (9.1) หนา้ หลกั
หมายเลข (9.2) ขอ้ มลู วังกาบราง
หมายเลข (9.3) คณุ ธรรม วิสัยทศั น์ คตธิ รรม
หมายเลข (9.4) ประวตั วิ ังกาบราง
หมายเลข (9.5) ผู้บรหิ าร
หมายเลข (9.6) อาคารสถานท่ี
หมายเลข (9.7) แผนผงั
หมายเลข (10) บทสวดมนต์
หมายเลข (10.1) บทสวดมต์ ทาวัตรเช้า
หมายเลข (10.2) บทสวดมต์ ทาวัตรเยน็
หมายเลข (10.3) บทสวดมนต์ ชินบัญชร
หมายเลข (10.4) บทสวดมนต์ แผ่เมตตา
หมายเลข (10.5) คาถาป้องกันภยั 10 ทิศ
หมายเลข (11) ประมวลภาพ
หมายเลข (12) แฟนเพจ
หมายเลข (13) แผนที่ Google Map
หมายเลข (14) ขอ้ มูล

บทท่ี 5

บทสรปุ

การออกแบบและสร้างเว็บไซต์วังกาบรางธรรมสถาน สานักปฏิบัติธรรมและแหล่งท่องเท่ียว
ทางธรรมจังหวัดน่าน ได้ดาเนินการประชาสัมพันธ์ผ่านเว็บไซต์ http://wangkabrang.com แล้วจึง
ได้ทาการทดสอบและประเมินผล เพื่อนาคะแนนและข้อเสนอแนะจากบุคคลทั่วไป เพ่ือนามาทาการ
แก้ไข โดยสรุปผลการประเมนิ ปัญหา ตามขน้ั ตอน ดังต่อไปนี้

5.1 สรปุ ผลการศึกษา
5.2 การทาสอบการแสดงผลเวบ็ ไซต์
5.3 ผลการวิเคราะห์ความพงึ พอใจของผใู้ ช้งานระบบ
5.4 ปญั หาและอปุ สรรคในการพฒั นาเว็บไซต์
5.5 ข้อเสนอแนะและแนวทางการพฒั นาเว็บไซต์

5.1 สรุปผลการศึกษา
จากการทาโครงการคอมพิวเตอร์ธุรกิจนี้มีวัตถุประสงค์ ในการออกแบบและสร้างเว็บไซต์

ประชาสัมพันธ์สานักปฏิบัติธรรมและแหล่งท่องเท่ียวทางธรรมจังหวัดน่าน ผู้จัดทาหวังที่จะให้ผู้ท่ี
สนใจในการหาแหล่งท่องเท่ียวทางธรรมและผู้ที่ต้องการปฏิบัติธรรม การออกแบบและสร้างเว็บไซต์
ประชาสมั พันธ์สานกั ปฏบิ ตั ธิ รรมและแหลง่ ทอ่ งเท่ยี วทางธรรมจงั หวดั นา่ น สามารถแบ่งระบบออกเป็น
2 ส่วนด้วยกันคือ 1. ส่วนของผู้ดูแลระบบ สามารถกาหนด เพ่ิม ลบ รูปภาพ ข้อความในเว็บได้
2. สว่ นของผ้ใู ชท้ ่วั ไปสามารถเข้าเยี่ยมชมเว็บไซต์ และติดต่อกบั ผู้ดูแลระบบ

42
5.2 การทดสอบการแสดงผลเวบ็ ไซต์

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

5.2.1 การแสดงผลบนเว็บเบราว์เซอร์ Internet Explorer มีความสมบูรณ์ในการแสดงผล
หนา้ จอ การออกแบบและสร้างเว็บไซต์สานักปฏบิ ตั ิธรรมและแหล่งทอ่ งเท่ียวทางธรรมจังหวดั นา่ น

ภาพที่ 5.1 ภาพแสดงผลการแสดงบนเบราวเ์ ซอร์ Internet Explorer

43
5.2.2 การแสดงผลบนเว็บเบราว์เซอร์ Google Chrome มีความสมบูรณ์ในการแสดงผล
หนา้ จอ การออกแบบและสรา้ งเวบ็ ไซต์สานักปฏบิ ัตธิ รรมและแหลง่ ท่องเท่ยี วทางธรรมจังหวดั น่าน

ภาพที่ 5.2 ภาพแสดงผลการแสดงบนเบราวเ์ ซอร์ Google Chrom

44
5.2.3 การแสดงผลบนโทรศัพท์เคลื่อนที่เว็บเบราว์เซอร์ Mobile ในระบบแอนดรอยด์ มี
ความสมบูรณ์ในการแสดงผลหน้าจอเวบ็ ไซต์ประชาสัมพนั ธ์สานักปฏิบัตธิ รรมและแหล่งท่องเที่ยวทาง
ธรรมจังหวดั น่าน

ภาพท่ี 5.3 ภาพแสดงผลบนโทรศัพท์เคลอ่ื นทเี่ วบ็ เบราว์เซอร์ Mobile ในระบบแอนดรอยด์