การสร้างเว็บไซต์ขายสินค้าออนไลน์ร้าน CACTUS SHOP BY ชมเดือนรีสอร์ท

การสรา้ งเวบ็ ไซต์ขายสนิ คา้ ออนไลน์ รา้ น CACTUS SHOP BY ชมเดอื นรีสอรท์
CREATING A WEBSITE, CACTUS SHOP BY CHOMDUEAN RESORT

นายณฐั พงษ์ แสนอุบล
นายภานุพงษ์ คูณราช

โครงงานนเ้ี ปน็ ส่วนหนงึ่ ของการศกึ ษาตามหลักสูตรประกาศนยี บตั รวิชาชพี ชั้นสูง (ปวส.)
สาขาวชิ าเทคโนโลยีธุรกิจดจิ ิทัล วทิ ยาลัยการอาชีพนวมนิ ทราชนิ ีมุกดาหาร
ปกี ารศกึ ษา 2565

การสรา้ งเวบ็ ไซต์ขายสนิ คา้ ออนไลน์ รา้ น CACTUS SHOP BY ชมเดอื นรีสอรท์
CREATING A WEBSITE, CACTUS SHOP BY CHOMDUEAN RESORT

นายณฐั พงษ์ แสนอุบล
นายภานุพงษ์ คูณราช

โครงงานนเ้ี ปน็ ส่วนหนงึ่ ของการศกึ ษาตามหลักสูตรประกาศนยี บตั รวิชาชพี ชั้นสูง (ปวส.)
สาขาวชิ าเทคโนโลยีธุรกิจดจิ ิทัล วทิ ยาลัยการอาชีพนวมนิ ทราชนิ ีมุกดาหาร
ปกี ารศกึ ษา 2565

ก

ใบรับรองโครงงาน

หวั ข้อโครงงาน การสรา้ งเวบ็ ไซต์ขายสินค้าออนไลน์ ร้าน CACTUS SHOP BY ชมเดอื นรสี อรท์

CREATING A WEBSITE, CACTUS SHOP BYCHOMDUEAN RESORT

ผู้ดาเนินโครงงาน นายณัฐพงษ์ แสนอุบล รหสั ประจาตวั นกั ศึกษา 64302040029

นายภานพุ งษ์ คูณราช รหสั ประจาตัวนักศึกษา 64302040006

ครูทปี่ รกึ ษา นางประภาพร ผวิ เรืองนนท์

ครผู สู้ อน นางประเสรฐิ ศรี สทุ ธิพันธ์

สาขาวชิ า เทคโนโลยธี ุรกิจดิจิทัล

ปกี ารศกึ ษา 2565

………………………………………………………………………………………………………………………………………………

คณะกรรมการใหค้ วามเห็นชอบโครงงานฉบับน้ี

.................................................... กรรมการ / ครูทป่ี รึกษาโครงงาน
(นางประภาพร ผวิ เรอื งนนท์)

.................................................... กรรมการ / ครผู ูส้ อนวชิ าโครงงาน
(นางประเสริฐศรี สทุ ธพิ นั ธ)์

.................................................... ประธานกรรมการ / หวั หน้าสาขาวิชาฯ
(นางสดุ ารัตน์ วงศค์ าพา)

คณะกรรมการสาขาวิชาเทคโนโลยีธุรกิจดิจิทัล วิทยาลัยการอาชีพนวมินทราชินีมุกดาหาร
ได้อนุมัติโครงงานนี้ เป็นส่วนหนึ่งของการศึกษาตามหลักสูตรประกาศนียบัตรวิชาชีพช้ันสูง (ปวส.)
พทุ ธศักราช 2563 สาขาวิชาเทคโนโลยธี รุ กิจดจิ ทิ ัล

.................................................... ประธานกรรมการฝ่ายวิชาการ
(นายปัญญา มุง่ ดี)

วนั ที่ .......เดอื น .................พ.ศ..........

ข

ใบแห่งลขิ สิทธิ์

หวั ข้อโครงงาน การสร้างเว็บไซต์ขายสินคา้ ออนไลน์ ร้าน CACTUS SHOP BY ชมเดือนรสี อร์ท

CREATING A WEBSITE, CACTUS SHOP BYCHOMDUEAN RESORT

ผู้ดาเนินโครงงาน นายณฐั พงษ์ แสนอบุ ล รหสั ประจาตัวนักศึกษา 64302040029

นายภานุพงษ์ คูณราช รหัสประจาตัวนกั ศึกษา 64302040006

ครูที่ปรกึ ษา นางประภาพร ผวิ เรอื งนนท์

ครผู ู้สอน นางประเสริฐศรี สทุ ธพิ ันธ์

สาขาวิชา เทคโนโลยธี รุ กิจดจิ ิทลั

ปีการศกึ ษา 2565

…………………………………………………………………………………………………..……………………………………………

ผลงานที่ได้จากการทาวิชาโครงงานนี้ทั้งหมดข้าพเจ้ายินยอม ขอยกให้เป็นลิขสิทธ์ิแด่

สาขาวิชาเทคโนโลยีธุรกจิ ดจิ ิทัล เปน็ ระยะเวลา 5 ปี นับจากวันท่รี ะบใุ นโครงงานเลม่ นี้

ผู้มอบ

................................................ ................................................
(นายณัฐพงษ์ แสนอุบล) (นายภานุพงษ์ คูณราช)

ผ้รู บั มอบ

............................................ ................................................
(นางประภาพร ผิวเรอื งนนท์) (นางประเสรฐิ ศรี สทุ ธพิ นั ธ)์

ครูทีป่ รกึ ษาโครงงาน ครผู ้สู อนวชิ าโครงงาน

ค

หวั ข้อโครงงาน การสรา้ งเวบ็ ไซต์ขายสนิ ค้าออนไลน์ ร้าน CACTUS SHOP BY ชมเดือนรีสอร์ท

CREATING A WEBSITE, CACTUS SHOP BYCHOMDUEAN RESORT

ผดู้ าเนินโครงงาน นายณัฐพงษ์ แสนอุบล รหัสประจาตัวนักศึกษา 64302040029

นายภานุพงษ์ คูณราช รหสั ประจาตวั นกั ศึกษา 64302040006

ครทู ี่ปรึกษา นางประภาพร ผิวเรืองนนท์

ครผู ู้สอน นางประเสริฐศรี สทุ ธพิ ันธ์

สาขาวิชา เทคโนโลยธี ุรกจิ ดจิ ิทัล

ปีการศึกษา 2565

…………………………………………………………………………………………………..……………………………………………

บทคดั ยอ่

โครงงานการสร้างเว็บไซต์ร้าน CACTUS SHOP BY ชมเดือนรีสอร์ท จัดทาขึ้นโดยมีวัตถุประสงค์
1) เพื่อสร้างเว็บไซต์ร้าน CACTUS SHOP BY ชมเดือนรีสอร์ท 2) เพ่ือเพิ่มช่องทางในการจาหน่ายสินค้า
ของทาง ร้าน CACTUS SHOP BY ชมเดือนรีสอร์ท 3) เพื่อศึกษาความพึงพอใจของผู้ใช้บริการเว็บไซต์
ร้าน CACTUS SHOP BY ชมเดือนรีสอร์ท กลุ่มตัวอย่างในการวิจัยครั้งนี้ จานวน 375 คน ได้มาโดยวิธีการ
สุ่มตัวอย่างแบบง่าย โดยใช้วิธีการประเมินแบบสอบถามออนไลน์เคร่ืองมือ ท่ีใช้ในการวิจัยครั้งน้ี
ได้แก่ 1) เว็บไซต์ร้าน CACTUS SHOP BY ชมเดือนรีสอร์ท ท่ีผู้วิจัยสร้างข้ึน 2) แบบสอบถามความพึงพอใจ
ของกลุ่มตัวอย่างที่มีคุณภาพเว็บไซต์ร้าน CACTUS SHOP BY ชมเดือนรีสอร์ท สถิติที่ใช้ในการวิจัยครงั้ น้ี
ไดแ้ ก่ ร้อยละคา่ เฉล่ยี และส่วนเบีย่ งเบนมาตรฐาน (S.D.)

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

ผลการวิจัย พบว่าความพึงพอใจของผู้ใช้งานเว็บไซต์ร้าน CACTUS SHOP BY ชมเดือน
รีสอร์ท โดยภาพรวมระดับความพึงพอใจอยู่ในระดับดี มีค่าเฉล่ียเท่ากับ 4.63 ค่าเบ่ียงเบนมาตรฐาน
เท่ากบั 0.45

ง

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

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

ณัฐพงษ์ แสนอบุ ล
ภานพุ งษ์ คูณราช

สารบัญ จ

ใบรบั รองโครงงาน หน้า
ใบแห่งลิขสิทธิ์ ก
บทคดั ย่อ ข
กิตตกิ รรมประกาศ ค
สารบัญ ง
สารบัญตาราง จ
สารบญั รูป ฉ
บทท่ี 1 บทนา ช
1
1.1 ความเป็นมาและความสาคญั ของปัญหา 1
1.2 วตั ถุประสงคข์ องโครงงาน 1
1.3 เปา้ หมายและขอบเขตของโครงงาน 2
1.4 แผนงานและระยะเวลาดาเนินการ 3
1.5 ประโยชน์ที่คาดว่าจะได้รับ 4
1.6 นิยามศัพทเ์ ฉพาะ 4
บทท่ี 2 ทฤษฎีทเ่ี กย่ี วข้อง 6
2.1 ความหมายและประวตั คิ วามเปน็ มาของเวบ็ ไซต์ 6
2.2 หลักการออกแบบและพัฒนาเว็บไซต์ 7
2.3 พาณชิ ยอ์ ิเล็กทรอนิกส์ 16
2.4 โปรแกรมท่ใี ชพ้ ัฒนาระบบงาน 19
2.5 การจดโดเมนและการอัพโหลดเว็บไซต์ 40
2.6 งานวจิ ัยทเ่ี กย่ี วข้อง 43
บทท่ี 3 วิธีดาเนินการ 47
3.1 ประชากรและกลุมตัวอย่าง 47
3.2 เครอ่ื งมือที่ใช้ในการพัฒนาระบบ/วจิ ัย 48
3.3 ขนั้ ตอนการดาเนนิ งานสร้างเว็บไซต์ 47
3.4 เครอื่ งมือท่ีใช้ในการวเิ คราะห์ข้อมูล 51
3.5 การเก็บรวบรวมข้อมูล 52
3.6 การวิเคราะหข์ ้อมลู 52

สารบญั (ต่อ) ฉ

บทที่ 4 ผลการพฒั นาระบบ/ผลการวเิ คราะหข์ ้อมูล หน้า
4.1 ผลการพฒั นาระบบ 53
4.2 ผลการวเิ คราะห์ข้อมูล 53
59
บทท่ี 5 สรปุ ผลการศึกษา อภปิ รายผล และขอ้ เสนอแนะ 65
5.1 สรปุ ผลการศกึ ษา 65
5.2 อภิปรายผล 66
5.3 ขอ้ เสนอแนะ 67

บรรณานกุ รม 68
ภาคผนวก 69
70
ก. แบบเสนอเคา้ โครงโครงงาน 83
ข. รายงานการพบครทู ีป่ รึกษาโครงงาน 85
ค. ตวั อย่างแบบประเมนิ ความพงึ พอใจ 89
ง. แบบประเมนิ ความพึงพอใจออนไลน์ 94
จ. เอกสารการเผยแพร/่ สง่ มอบ 96
ฉ. คูม่ ือการใชง้ านเว็บไซต์ 110
ช. ตารางแสดงผลการวิเคราะหข์ ้อมลู ด้วยโปรแกรมทางสถิติ 114
ซ. ภาพกจิ กรรมการดาเนินโครงงาน 118
ฌ. ประวตั ผิ ู้จัดทา

ช

สารบัญตาราง

ตารางที่ หนา้

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

ตารางที่ 1.2 งบประมาณ 4

ตารางท่ี 2.1 ตางรางอธบิ ายเครื่องมอื Tool ต่างๆ 24

ตารางที่ 2.1 ตางรางอธบิ ายเคร่ืองมือ Tool ตา่ งๆ (ตอ่ ) 25

ตารางที่ 2.1 ตางรางอธบิ ายเครื่องมอื Tool ตา่ งๆ (ตอ่ ) 26

ตารางท่ี 4.1 ทดสอบการทางานหนา้ หลัก 54

ตารางท่ี 4.2 ทดสอบการทางานหนา้ แสดงสนิ ค้าทั้งหมด 55

ตารางที่ 4.3 ทดสอบการทางานหน้า Login Member 55

ตารางที่ 4.4 ทดสอบการทางานหนา้ สมัครสมาชกิ 56

ตารางท่ี 4.5 ทดสอบการทางานหนา้ รวมสนิ คา้ ทีส่ ั่งซื้อ 57

ตารางท่ี 4.6 ทดสอบการทางานหน้ารอการชาระสินคา้ 57

ตารางท่ี 4.7 ทดสอบการทางานหนา้ Login Admin 58

ตารางที่ 4.8 ทดสอบการทางานหน้าแรก Admin 59

ตารางที่ 4.9 ทดสอบการทางานหนา้ สมาชิกทั้งหมด 59

ตารางท่ี 4.10 ค่าร้อยละของขอ้ มูลทั่วไปของผตู้ อบแบบประเมนิ 60

ตารางท่ี 4.10 คา่ ร้อยละของขอ้ มูลท่วั ไปของผตู้ อบแบบประเมนิ (ต่อ) 61

ตารางท่ี 4.11 แสดงค่าคะแนนเฉลีย่ และส่วนเบี่ยงเบนมาตรฐานของแบบประเมิน 62

ความพึงพอใจในการเข้าใช้บริการเวบ็ ไซต์ประชาสมั พนั ธ์

รา้ น โปงซาวด์สตูดโิ อ ดา้ นที่ 1 ด้านเน้ือหา

ตารางที่ 4.12 แสดงค่าคะแนนเฉลี่ยและสว่ นเบย่ี งเบนมาตรฐานของแบบประเมิน 63

ความพงึ พอใจในการเข้าใช้บริการเว็บไซตป์ ระชาสมั พันธ์

รา้ น Cactus By ชมเดือนรสี อรท์ ดา้ นที่ 2 ดา้ นการออกแบบละจดั รูปแบบเว็บไซต์

ตารางที่ 4.13 แสดงคา่ คะแนนเฉลี่ยและสว่ นเบ่ียงเบนมาตรฐานของแบบประเมิน 64

ความพงึ พอใจในการเขา้ ใช้บริการเวบ็ ไซต์ประชาสมั พนั ธ์

ร้าน Cactus By ชมเดอื นรสี อรท์ ด้านท่ี 3 ดา้ นการนาไปใช้

สารบญั รปู ซ

รปู ที่ หน้า
รปู ที่ 2.1 รปู โครงสรา้ งแบบเรยี งลาดบั 7
รูปท่ี 2.2 โครงสร้างแบบลาดับขั้น 8
รปู ท่ี 2.3 โครงสรา้ งแบบตาราง 8
รปู ท่ี 2.4 โครงสร้างแบบใยแมงมุม 9
รปู ที่ 2.5 การกาหนดโครงสรา้ งของเวบ็ 12
รปู ท่ี 2.6 การกาหนดการเชื่อมโยงเวบ็ เพจ 13
รปู ท่ี 2.7 การตงั้ ช่ือไฟล์ 13
รปู ที่ 2.8 การออกแบบเว็บเพจ 14
รปู ที่ 2.9 การเขยี นโปรแกรมด้วยภาษา HTML 14
รปู ท่ี 2.10 การลงทะเบยี นขอพ้ืนทีเ่ ว็บไซต์ 15
รปู ท่ี 2.11 การอัพโหลดเวบ็ ไซต์ 15
รปู ท่ี 2.12 แสดงเขา้ ไปยังโฟลเดอรข์ อง Photoshop ตามภาพ ดบั เบ้ลิ คลิก Set-up 19
รูปท่ี 2.13 แสดงการตรวจสอบก่อนทาการตดิ ตงั้ โปรแกรม 20
รูปท่ี 2.14 แสดงโปรแกรมตรวจสอบเสรจ็ แลว้ จะเขา้ สู่หนา้ จอ เลือก Try 20
รูปที่ 2.15 แสดงการกรอก Serial Number แล้วคลิกท่ปี ่มุ คลกิ Accept 20
รปู ท่ี 2.16 แสดงการเลือกการตดิ ตัง้ ของโปรแกรม ให้เลือก Installs 21
รปู ท่ี 2.17 แสดงหนา้ การโหลดของโปรแกรม 21
รปู ท่ี 2.18 แสดงการเสร็จสิน้ การติดตงั้ โปรเเกรม Adobe Photoshop CS6 21
รปู ท่ี 2.19 แสดงข้นั ตอนการเข้าสโู่ ปรแกรม Adobe Photoshop CS6 22
รปู ที่ 2.20 แสดงหนา้ ต่างโปรแกรม Adobe Photoshop CS6 22
รปู ที่ 2.21 แสดงหน้าจอหลกั การทางานของโปรแกรม Adobe Photoshop CS6 23
รูปท่ี 2.22 แสดงเครื่องมือต่างๆ (Toolbox) Adobe Photoshop CS6 23
รูปที่ 2.23 แสดงการเปิดไฟล์ภาพ (Open) 26
รูปที่ 2.24 แสดงการเปิดไฟลภ์ าพ (Open) 27
รูปท่ี 2.25 การสร้างไฟลใ์ หม่ (New) 27
รูปท่ี 2.26 แสดงการกาหนดขนาดของกระดาษ 28
รูปท่ี 2.27 แสดงการบันทึกข้อมลู ลงบนไฟล์ (Save) 29
รูปที่ 2.28 แสดงการบนั ทึกข้อมูลลงบนไฟล์ (Save) 30
รปู ที่ 2.29 แสดงการปรับคา่ ความสว่าง/ความคมชดั 30

สารบัญรปู (ตอ่ ) ฌ

รูปท่ี หน้า
รปู ท่ี 2.30 แสดงหน้าต่าง User Account Control 31
รูปท่ี 2.31 แสดงหน้าต่าง Microsoft Software License Terms 32
รูปที่ 2.32 แสดงหนา้ ตา่ ง Choose the installation 32
รูปท่ี 2.33 แสดงหน้าต่าง Installation Progress 33
รูปท่ี 2.34 แสดงหนา้ ตา่ ง Successfully Installed 33
รูปที่ 2.35 หนา้ ตา่ ง Office Professional Plus 2010 34
รปู ที่ 2.36 dowload WordPress ตัวลา่ สุดลงมาที่เครื่องเราก่อนที่ wordpress.org 35
รูปที่ 2.37 แตก zip ไฟล์ออกมาจะได้ folder ทงั้ หมดลักษณะนี้ 35
รูปท่ี 2.38 โยนทกุ อย่างเข้าไปที่ path: XAMPP/htdocs/wp_yuikdev 36
รปู ท่ี 2.39 start Apache และ MySQL 36
รูปที่ 2.40 สร้าง database / collation: utf8_general_ci 37
รปู ที่ 2.41 ตงั้ ค่าไฟล์ wp-config.php 37
รูปท่ี 2.42 เรยี กหน้า Install WordPress ขึน้ มา 38
รูปที่ 2.43 Login เขา้ WordPress เป็นอนั เสร็จเรียบรอ้ ย 38
รปู ที่ 2.44 แสดงการหาเวบ็ โฮสตง้ิ ทดี่ ีต้องคานงึ ถึงส่ิงใดบ้าง 42
รูปท่ี 3.1 แสดงแผนผงั โครงสร้างการทางานของเว็บไซต์ 48
รูปท่ี 3.2 User Interface Design 49
รูปท่ี 3.3 แผนผงั การเดินทางของขอ้ มลู 50
รูปท่ี 4.1 แสดงการทดสอบหนา้ หลกั 54
รปู ที่ 4.2 แสดงการทดสอบ 54
รูปท่ี 4.3 แสดงการทดสอบหนา้ Login Member 55
รปู ท่ี 4.4 แสดงการทดสอบหนา้ สมคั รสมาชิก 56
รูปท่ี 4.5 แสดงการทดสอบหนา้ รวมสนิ คา้ ที่สงั่ ซื้อ 56
รปู ที่ 4.6 แสดงการทดสอบหน้าขอ้ มลู ส่วนตงั 57
รปู ท่ี 4.7 แสดงการทดสอบหนา้ Login Admin 58
รูปท่ี 4.8 แสดงการทดสอบหน้าแรก Admin 58
รปู ที่ 4.9 แสดงการทดสอบหนา้ สมาชกิ ทง้ั หมด 59

ญ

สารบัญรูป(ต่อ)

รปู ที่ หน้า

รปู ท่ี ง.1 รูปภาพแบบประเมินความพงึ พอใจออนไลน์ 90

รูปท่ี ง.2 รปู ภาพแบบประเมินความพงึ พอใจออนไลน์ ตอนที่ 1 90

รปู ที่ ง.3 รปู ภาพแบบประเมินความพงึ พอใจออนไลน์ ตอนท่ี 1 91

รปู ที่ ง.4 รูปภาพแบบประเมินความพงึ พอใจออนไลน์ ตอนท2ี่ ดา้ นท่ี 1 91

รปู ที่ ง.5 รปู ภาพแบบประเมินความพงึ พอใจออนไลน์ ตอนที2่ ดา้ นที่ 92

รปู ที่ ง.6 รปู ภาพแบบประเมินความพงึ พอใจออนไลน์ ด้านท่ี 3 92

รูปท่ี ง.7 รูปภาพแบบประเมินความพึงพอใจออนไลน์ ตอนท่ี 3 93

รูปท่ี ฉ.1 การพิมพ์ URL เพื่อเขา้ หน้าเวบ็ ไซต์ 98

รูปที่ ฉ.2 หน้าแรกของเวบ็ ไซต์ 98

รูปท่ี ฉ.3 แสดงป่มุ เมนตู ่างๆของเว็บไซต์ 99

รูปที่ ฉ.4 แสดงหน้าการกรอกขอ้ มูลการลงทะเบยี นและเข้าสู่ระบบ 100

รูปท่ี ฉ.5 เลอื กป่มุ สนิ ค้า 100

รูปท่ี ฉ.6 หน้าเวบ็ แสดงรายการสนิ ค้า 101

รูปที่ ฉ.7 แสดงหนา้ เลอื กรายการทตี่ ้องการ 101

รปู ท่ี ฉ.8 แสดงหนา้ เว็บไซต์รายการสนิ ค้าท่เี ลือกไว้ 102

รปู ที่ ฉ.9 แสดงหน้าเวบ็ ไซต์ส่ังซือ้ และชาระเงิน1.4.2 เขา้ สู่หน้าเวบ็ ไซตใ์ ห้กรอกข้อมลู ของผ้ซู ือ้ 102

รูปที่ ฉ.10 แสดงหน้าเวบ็ ไซต์กรอกขอ้ มลู ของผซู้ อื้ 103

รูปท่ี ฉ.11 เลอื กช่องทางการจัดสง่ และชาระเงนิ 103

รปู ที่ ฉ.12 การพิมพ์ URL เพอ่ื เขา้ หนา้ Login Admin 104

รปู ท่ี ฉ.13 หนา้ Login Admin 104

รูปที่ ฉ.14 หนา้ ควบคมุ สาหรับ Admin 105

รปู ท่ี ฉ.15 หนา้ ควบคุมสาหรับเพมิ่ หรือลบข้อมลู สินคา้ 105

รูปที่ ฉ.16 หน้าควบคมุ สาหรับการชาระเงิน 106

รปู ท่ี ฉ.17 หนา้ ควบคมุ สาหรับดขู อ้ มูลการส่งั ซื้อของลกู ค้า 106

รูปท่ี ฉ.18 หนา้ แสดงรายละเอียดการสงั่ ซื้อสนิ คา้ ของลกู ค้า 107

รปู ที่ ฉ.19 หนา้ แสดงหน้ารายงานคาสัง่ ซื้อสินค้า 107

รปู ท่ี ฉ.20 หนา้ แสดงรายละเอยี ดท่แี สดงบนเวบ็ ไซต์ 108

รูปที่ ฉ.21 หน้าปรับแต่งเวบ็ ไซต์ 108

รูปท่ี ฉ.22 หนา้ สาหรบั แก้ไขเมนู 109

รูปที่ ฉ.23 หน้าสาหรบั การวิเคราะหภ์ าพรวม 109

สารบัญรูป(ต่อ) ฎ

รปู ท่ี หน้า
รปู ที่ ซ.1 แกไ้ ขเอกสารโครงงาน 115
รูปที่ ซ.2 จดั ทาเอกสารรปู เล่ม 115
รูปที่ ซ.3 ตรวจความถูกต้องของช้นิ งาน 116
รูปที่ ซ.4 พบครทู ปี่ รึกษา 116
รูปที่ ซ.5 นาเสนอเคา้ โครง โครงงาน 117
รูปที่ ซ.6 สมั มนาโครงงาน 117

1

บทท่ี 1
บทนํา

1.1 ความเปน็ มาและความสําคญั ของปญั หา

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

ร้าน Cactus Shop By ชมเดือนรีสอร์ท ตั้งอยู่ 5 ซอย มัฆวาน ตําบล มุกดาหาร
อําเภอ เมืองมุกดาหาร จังหวัด มุกดาหาร 49000 เป็นร้าน ที่จําหน่าย แคคตัส ซึ่งปัจจุบันยังไม่มี
เว็บไซต์หรือช่องทางในการจําหน่ายสินค้าผ่านทางออนไลน์ของ ร้าน Cactus Shop By ชมเดือน
รีสอรท์

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

1.2 วตั ถปุ ระสงค์โครงงาน

1.2.1 เพือ่ สรา้ งเว็บไซตข์ ายสินคา้ ออนไลน์ ร้าน Cactus Shop By ชมเดอื นรสี อร์ท
1.2.2 เพ่ือเพม่ิ ช่องทางในการจําหนา่ ยสนิ ค้าของ ร้าน Cactus Shop By ชมเดอื นรสี อร์ท
1.2.3 เพ่ือศึกษาความพึงพอใจของผู้ใช้บริการเว็บไซต์ร้าน Cactus Shop By ชมเดือน
รสี อรท์

2

1.3 เป้าหมายและขอบเขตของโครงงาน

1.3.1 เปา้ หมายของโครงงาน
1.3.1.1 เปา้ หมายเชงิ ปริมาณ
1) เว็บไซต์ในการจําหน่ายของร้าน Cactus Shop By ชมเดือนรีสอร์ท

จาํ นวน 1 เวบ็ ไซต์
2) ได้คู่มือการใช้งานเว็บไซต์ของร้าน Cactus Shop By ชมเดือนรีสอร์ท

จํานวน 1 เว็บไซต์

1.3.1.2 เปา้ หมายเชิงคณุ ภาพ
1) เพื่อสํารวจความพึงพอใจของผู้ใช้งานเว็บไซต์ร้าน Cactus Shop By

ชมเดือนรีสอรท์
2) ได้ศึกษาความพึงพอใจของผู้ใช้งานเว็บไซต์ของร้าน Cactus Shop By

ชมเดือนรสี อรท์
3) ได้นําเว็บไซต์ของร้าน Cactus Shop By ชมเดือนรีสอร์ทไปใช้ในการ

พัฒนาระบบขายกระบองเพรช ในรูปแบบการขายกระบองเพรชออนไลน์เพ่ืองานต่อการเข้าถึงสินค้า
และบริการ

1.3.2 ขอบเขตของโครงงาน
1.3.2.1 การแสดงผลหนา้ หลัก (Home page)
1) มกี ารแสดงผลการโฆษณาสนิ ค้า
2) มีระบบการสืบค้นสนิ ค้า
1.3.2.2 ระบบจดั การสมาชิก (User)
1) มกี ารสมคั รสมาชิกใหม่
2) มีการเขา้ สรู่ ะบบ Login
3) มีการแกไ้ ขข้อมูลสมาชกิ (Profile)
1.3.2.3 ระบบการส่ังซ้อื (Order)
1) มีระบบตะกร้าสินคา้
2) มกี ารคํานวณราคาของสินค้าอัตโนมัติ
3) มกี ารแก้ไข หรือยกเลกิ สินค้าในตะกร้าสนิ คา้
4) มกี ารยืนยนั การสัง่ ซอื้ สินค้า

3

1.3.2.4 ระบบการชําระเงิน (Payment)
1) มชี ่องทางในการชาํ ระเงนิ
2) มชี ่องทางในการชําระเงินปลายทาง

1.3.2.5 ระบบจัดการสนิ ค้า
1) มีการเพ่มิ ลบ แกไ้ ข ค้นหารายละเอียดสินคา้
2) มรี ะบบการส่งเสริมการขาย (Promotion)
3) มรี ะบบตรวจสอบสนิ ค้าคงคลัง

1.4 ระยะเวลา / สถานทีด่ ําเนนิ การ

1.4.1 ระยะเวลาในการดําเนินการ ระหว่างวนั ท่ี 17 พฤษภาคม 2565-15 กันยายน 2565
1.4.2 สถานท่ดี ําเนินการ วิทยาลัยการอาชีพนวมินทราชนิ ีมุกดาหาร

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

ระยะเวลาดาํ เนินงาน (สัปดาหท์ )ี่

กิจกรรม/ พ.ศ.2565

ขั้นตอนการเนินงาน พ.ค มิ.ย. ก.ค. ส.ค. ก.ย.

.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

ขนั้ เตรียมการ

สอบเค้าโครง

ศกึ ษาทฤษฎแี ละวิจัยทเ่ี กีย่ วขอ้ ง

ขัน้ ดําเนินการ

สรา้ งชิ้นงาน

เก็บรวบรวมขอ้ มลู

ข้นั สรปุ และประเมินผล

สรุปผล

จดั ทํารปู เล่ม

นาํ เสนอ/เผยแพร่/สัมนา

4

ตารางท่ี 1.2 งบประมาณ

ท่ี รายการ ราคาทส่ี ืบได้ ชือ่ ร้านคา้ และ
หมายเลขโทรศพั ท์
จาํ นวน หนว่ ยละ รวม
(บาท) (บาท)

1 โดเมนเนม 1 857 857 บริษัททเี อชนคิ จาํ กัด

2 เข้ารปู เล่ม 1 300 300 รา้ น ควิ กอ๊ ปปี้

รวมท้ังสนิ้ 1,157

หมายเหตุ : สนบั สนนุ งบประมาณจากสาํ นักวิจัยและพัฒนาการอาชวี ศกึ ษา

1.5 ผลทีค่ าดว่าจะได้รับ

9.1 ไดเ้ ว็บไซต์ ร้าน Cactus Shop By ชมเดือนรสี อร์ท
9.2 ไดช้ อ่ งทางการจําหน่ายสินคา้ ผา่ นทางเครือขา่ ยอินเทอรเ์ น็ต
9.3 ไดร้ ะดบั ความพึงพอใจของผใู้ ชบ้ ริการเวบ็ ไซต์รา้ น Cactus Shop By ชมเดอื นรีสอรท์
อยู่ในระดับ มากทส่ี ดุ

1.6 นยิ ามศพั ทเ์ ฉพาะ

1.6.1 E-Commerce หมายถึง การดําเนินธุรกิจโดยการใช้ส่ืออิเล็กทรอนิกส์ ไม่ว่าจะเป็น
การซ้ือขายชาํ ระเงนิ และอ่นื ๆ

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

1.6.3 WordPress หมายถึง โปรแกรมสําเร็จรูปท่ีใช้สร้างและจัดการเนื้อหาเว็บไซต์
ประเภท Contents Management System หรือเรียกย่อๆ ว่า "CMS" ซ่ึงเขียนด้วยภาษา PHP
และใชร้ ะบบจัดการฐานข้อมลู MySQL

1.6.4 Home Page หมายถงึ หน้าแรกของเอกสารที่มีอยูใ่ นระบบอินเทอร์เน็ต ที่จะเป็นตัว
แนะนาํ ให้รจู้ กั หนว่ ยงานหรือสถาบันต่าง ๆ ในเวริ ์ลด์ไวดเ์ ว็บ (world wide web)

1.6.5 Social Media หมายถงึ ส่อื อเิ ลก็ ทรอนกิ ส์ ซงึ่ เปน็ สอ่ื กลางทใี่ ห้บุคคลทัว่ ไปมีสว่ นร่วม
สร้างและแลกเปล่ียนความคิดเห็นต่าง ๆ ผ่านอินเทอร์เน็ตได้ ส่ือเหล่าน้ีเป็นของบริ ษัทต่างๆ
ที่ใหบ้ ริการผ่านเวบ็ ไซต์ของตน เชน่ เฟซบุก๊ ไฮไฟฟ์ ทวิตเตอร์ วิกพิ เี ดยี เป็นตน้

5

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

1.6.7 Keyword หมายถึงคําสําคัญคือคําท่ีถูกกําหนดข้ึนเพ่ือเป็นตัวแทนเนื้อหาสารสนเทศ
โดยมาจากคําท่ีปรากฏในหนังสือ บทความ หรอื ทรพั ยากรสารสนเทศนั้นๆ อาจเปน็ คําท่ีปรากฏในช่ือเร่ือง
บทคัดย่อ สาระสังเขป หรือตัวเนื้อหาของทรัพยากรสารสนเทศนั้นๆ โดยย่อเหลือเพียงคําที่แสดง
ใจความสําคญั ของเนอ้ื เรื่อง ทีส่ ัน้ กะทดั รัด และมีความชดั เจน

1.6.8 Social Network หมายถึง เว็บไซต์ท่ีเช่ือมโยงผู้คนไว้ด้วยกัน ผ่าน Internet ซึ่งเป็น
เว็บไซต์ช่วยให้คุณหาเพ่ือนบนโลกอินเตอร์เน็ตได้ง่ายๆเราสามารถท่ีจะสร้างพื้นท่ีส่วนตัวขึ้นมา
เพื่อแนะนําตัวเองได้โดยเลือกได้ว่าต้องการรู้จักกับใครหรือเป็นเพื่อนกับใคร ก็ได้ ตัวอย่าง
Social Network เชน่ Hi5, Facebook, MySpace.com, twitter เปน็ ต้น

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

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

1.6.11 Promotion หมายถึง การส่งเสริมการตลาด (Promotion) ด้วยวิธีการ ลด แลก
แจก แถม เพอ่ื ให้สามารถขายสินคา้ ได้ทันที จากการทาํ ใหล้ ูกคา้ สนใจสินค้าจากโปรโมชั่น Promotion
จะเรยี กวา่ การส่งเสรมิ การขาย

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

6

บทที่ 2
ทฤษฎีทีเ่ กีย่ วขอ้ ง

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

2.1 ความหมายและประวตั คิ วามเปน็ มาของเว็บไซต์
2.2 หลักการออกแบบและพฒั นาเวบ็ ไซต์
2.3 โปรแกรมทใี่ ชใ้ นการพฒั นาระบบงาน
2.4 ทฤษฎีทเ่ี กีย่ วขอ้ งในการพัฒนาระบบงาน
2.5 งานวิจัยที่เก่ียวขอ้ ง

2.1 ความหมายและประวัตคิ วามเปน็ มาของเว็บไซต์

2.1.1 เวบ็ ไซต์ (Website) หมายถึง หน้าเว็บเพจทีจ่ ัดทาข้นึ เพอ่ื นาเสนอขอ้ มูลต่างๆ ผ่าน
ทางคอมพิวเตอร์และอินเทอร์เน็ต โดยจะมีหน้าเว็บเพจหลายๆ หน้าที่เช่ือมโยงเข้ากับไฮเปอร์ล้ิงค์
เพ่ือให้สามารถเปิดไปยังหน้าเพจต่างๆ ได้อย่างง่ายดายและถูกจัดเก็บไว้ใน www. (เวิลด์ไวด์เว็บ)
โดยเว็บไซต์ส่วนใหญ่นั้นก็มีท้ังเว็บไซต์ที่เปิดให้เข้าชมได้ฟรี และเว็บไซต์ที่ต้องสมัครสมาชิกและเสีย
ค่าบริการ จึงจะเข้าใช้งานเว็บได้ ซึ่งข้อมูลในเว็บก็จะมีหลากหลายแบบ ขึ้นอยู่กับความต้องการ
นาเสนอของเจา้ ของเวบ็ ไซต์ การเรียกดูเว็บไซตจ์ ะเรยี กดผู ่านทางซอฟต์แวร์ ในลกั ษณะของ Browser

2.1.2 ประวัติความเป็นมาของเว็บไซต์ เม่ือปีค.ศ.1990 นักวิทยาศาสตร์จากห้องทดลอง
ของสถาบัน CERN หอ้ งปฏิบตั กิ ารฟสิ ิกส์ ท่ีตัง้ อยู่ ณ นคร Geneva ประเทศสวติ เซอร์แลนดน์ าม Tim
Berners-Lee ได้สร้างระบบสื่อสารผ่านเครือข่ายคอมพิวเตอร์รูปแบบใหม่ ซึ่งเรียกว่า hypertext
ผลที่ออกมาคือมีการสร้างโพรโทคอลแบบ HTTP ขึ้น นามาใช้ในการส่งสารสนเทศต่าง ๆ โดยมันถูก
จัดอยู่ในรูปแบบใหม่ที่เรียกว่า HTML จากการส่ือสารสืบค้นสารสนเทศรูปแบบใหม่น้ีทาให้ผู้คน
ติดตอ่ ส่ือสารกันได้อยา่ งรวดเรว็ มากขน้ึ อีกท้ังยังส่งเป็นท้ังข้อความ ภาพ และเสียงได้อีกด้วย จากการ
วิจัยดังกล่าวทาให้ในปัจจุบันได้มีการคิดค้นพร้อมสร้างสรรค์รูปแบบเพ่ือยกระดับการส่ือสารระหว่าง
มนุษย์ด้วยกันโดยอาศัยเครือข่ายคอมพิวเตอร์เป็นตัวเชื่อมโยง ทาให้ WWW กลายเป็นเครื่องมือที่ใช้
การติดต่อส่ือสารผ่านเครือข่ายขนาดใหญ่ท่ีสุดในโลกจากเว็บเพจ โฮมเพจ จัดเป็นองค์ประกอบหน่ึง
ของเว็บไซต์เม่ือเข้าไปในเว็บไซต์แล้วสารสนเทศหรือข้อมูลต่างๆ ท่ีคุณต้องการสืบค้นก็คือหน้าของ
เอกสารซ่ึงปรากฏอย่บู นหนา้ จอคอมพิวเตอร์

7

2.1.3 ประเภทของเวบ็ ไซต์
2.1.3.1 เว็บไซต์ประชาสัมพันธ์องค์กร (Corporate Website) จัดทาขึ้นเพื่อ

นาเสนอขอ้ มูลและขา่ วสารสาหรบั องค์กร
2.1.3.2 เว็บไซต์บริการหรือเว็บไซต์ชุมชน (Community & Service Website)

จัดทาขึน้ เพ่อื เป็นเครื่องมือในการสร้างชุมชน หรือใหบ้ ริการแก่ลกู ค้าหรือสมาชิกขององคก์ รบรษิ ทั น้นั
2.1.3.3 เว็บไซต์จาหน่ายสินค้าหรือบริการออนไลน์ (E-Commerce Website)

จดั ทาขนึ้ เพือ่ ใช้ในการทาตลาดหรอื ขายสินคา้ หรอื บรกิ ารผา่ นเวบ็ ไซต์
2.1.3.4 เว็บไซต์นาเสนอสอื่ ผสม (Multimedia & Presentation Website) เวบ็ ไซต์

มีการนาเอาเทคโนโลยใี หม่ ๆ ท่ที ันสมยั มาใช้ในการนาเสนอ เชน่ ภาพเคลื่อนไหว (Animation), เสียง
(Sound), หรือ ภาพวีดโี อ (VDO Streaming) นาเสนอผา่ นเวบ็ ไซต์

2.2 หลักการออกแบบและพฒั นาเวบ็ ไซต์

2.2.1 การวางโครงสรา้ งเว็บไซต์
2.2.1.1 เว็บที่มีโครงสร้างแบบเรียงลาดับ (Sequential Structure) เป็น โครงสร้าง

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

รูปที่2.1 รปู โครงสร้างแบบเรียงลาดบั (Sequential Structure)
2.2.1.2 เว็บที่มีโครงสร้างแบบลาดับข้ัน (Hierarchical Structure) เป็นวิธีท่ีดีท่ีสุด
วิธีหน่ึงในการจัดระบบโครงสร้างที่มีความซับซ้อนของข้อมูล โดยแบ่งเนื้อหา ออกเป็นส่วนต่างๆ
และมรี ายละเอยี ดย่อยๆ ในแต่ละส่วนลดหลน่ั กนั มาในลักษณะแนวคิดเดียวกับ แผนภมู ิองค์กร จงึ เป็น
การง่ายต่อการทาความเข้าใจกับโครงสร้างของเน้ือหาในเว็บลักษณะนี้ ลักษณะเด่นเฉพาะของ
เว็บประเภทนี้คือการมีจุดเริ่มต้นท่ีจุดร่วมจุดเดียว น่ันคือ โฮมเพจ (Homepage) และเช่ือมโยง
ไปสู่เนอ้ื หา ในลกั ษณะเป็นลาดบั จากบนลงล่าง

8

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

รูปท่ี 2.3 โครงสร้างแบบตาราง (Grid Structure)
ในการจัดระบบโครงสร้างแบบนี้ เน้ือหาที่นามาใช้แต่ละส่วนควรมีลักษณะท่ีเหมือนกัน
และ สามารถใช้รูปแบบร่วมกัน หลักการออกแบบคือนาหัวข้อทั้งหมดมาบรรจุลงใน ที่เดียวกันซึ่ง
โดยทวั่ ไปจะเปน็ หน้าแผนภาพ (Map Page) ทแ่ี สดงในลกั ษณะเดียวกับโครงสร้างขอเว็บ เมือ่ ผใู้ ช้คลกิ
เลือก หวั ขอ้ ใด ก็จะเข้าไปสหู่ นา้ เนื้อหา (Topic Page) ที่แสดงรายละเอียดของหัวขอ้ นั้นๆ และภายใน
หน้าน้ัน ก็จะมีการเชื่อมโยงไปยังหน้ารายละเอียดของหัวข้ออ่ืนที่เป็นเร่ืองเดียวกัน นอกจากน้ียัง
สามารถนา โครงสร้างแบบเรียงลาดับและแบบลาดับขั้นมาใช้ร่วมกันไดอ้ ีกดว้ ย ถึงแม้โครงสรา้ งแบบนี้
อาจจะสร้างความยุ่งยากในการเข้าใจได้ และอาจเกิดปัญหาการคงค้าง ของหัวข้อ (Cognitive
Overhead) ได้ แต่จะเปน็ ประโยชน์ที่สดุ เมื่อผู้ใช้ได้เข้าใจถึงความสัมพันธ์ ระหวา่ งเนื้อหา ในส่วนของ

9

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

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

รูปท่ี 2.4 โครงสรา้ งแบบใยแมงมุม (Web Structure)
ลักษณะการเช่ือมโยงในเว็บน้ัน นอกเหนือจากการใช้ไฮเปอร์เท็กซ์หรือไฮเปอร์มีเดีย
กบั ข้อความทมี่ ีมโนทศั น์ (Concept) เหมอื นกันของแตล่ ะหนา้ แล้ว ยงั สามารถใชล้ ักษณะการเช่ือมโยง
จากรายการท่ีรวบรวมช่ือหรือหัวข้อของเนื้อหาแต่ละหน้าไว้ ซึ่งรายการน้ีจะปรากฏอยู่บริเวณใด
บริเวณหนึ่งในหน้าจอ ผู้ใช้สามารถคลิกท่ีหัวข้อใดหัวข้อหน่ึงในรายการเพ่ือเลือกท่ีจะเข้าไปสู่หน้าใดๆ
ก็ได้ตามความต้องการ ข้อดีของรูปแบบน้ีคือง่ายต่อผู้ใช้ในการท่องเที่ยวบนเว็บ โดยผู้ใช้สามารถ
กาหนดทิศทาง การเข้าสู่เน้ือหาได้ด้วยตนเอง แต่ข้อเสียคือถ้ามีการเพิ่มเน้ือหาใหม่ๆ อยู่เสมอจะเป็น
การยากในการ ปรับปรุง นอกจากนี้การเชื่อมโยงระหว่างข้อมูลท่ีมีมากมายนั้นอาจทาให้ผู้ใช้เกิดการ
สับสนและ เกดิ ปญั หาการคงคา้ งของหัวขอ้ (Cognitive Overhead) ได้
2.2.2 การกาหนดขนาดเวบ็ เพจ

ขนาดของเว็บไซตท์ นี่ ิยมในปจั จบุ นั มี 2 ขนาด คอื
2.2.2.1 ขนาดเวบ็ ไซต์แบบ 800 X 600 pixels เปน็ ขนาดท่ีสามารถใชไ้ ดก้ ับหน้าทุก
ขนาดในปัจจุบันเป็นขนาดของการออกแบบเว็บไซต์ที่ใช้ในอดีต เนื่องจากอดีตขนาดของ
จอคอมพิวเตอร์มีขนาดเล็ก

10

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

2.2.3 รปู แบบการออกแบบเว็บไซต์
เว็บไซตใ์ นปัจจุบนั จะมีการออกแบบท่ีแตกตา่ งกันไมม่ ากนัก ซ่ึงการออกแบบหน้าตา

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

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

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

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

2.2.4 องคป์ ระกอบของการออกแบบเว็บไซต์
2.2.4.1 ความเรียบง่าย (Simplicity) หมายถึง การจากัดองค์ประกอบเสริมให้เหลือ

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

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

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

11

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

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

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

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

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

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

12

2.2.5 ส่วนประกอบสาคัญบนหนา้ เว็บเพจ ทตี่ ้องมี
บนหนา้ เวบ็ เพจ จะมีส่วนประกอบสาคัญท่ีจาเป็นตอ้ งมอี ยู่ 3 ส่วน ไดแ้ ก่
2.2.5.1 ส่วนหัวของหน้า (Header) อยู่ตอนบนสุดของหน้าและเป็นส่วนท่ีสาคัญ

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

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

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

2.2.6 ขั้นตอนการสรา้ งเวบ็ ไซต์
ขั้นตอนท่ี 1 การวางแผนการจัดทาเว็บไซต์ เป็นข้ันตอนแรกของการออกแบบเว็บ

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

ขั้นตอนท่ี 2 การกาหนดโครงสร้างของเว็บ เป็นขั้นตอนในการกาหนดผังของเว็บ
เพ่อื ใหท้ ราบองคป์ ระกอบท้ังหมดของเวบ็ ตวั อยา่ งดังรปู

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

13

รปู ที่ 2.6 การกาหนดการเช่ือมโยงเว็บเพจ
ขนั้ ตอนท่ี 4 การตง้ั ชอื่ ไฟลแ์ ละโฟลเดอร์

การสร้างโฟลเดอร์การสรา้ งโฟลเดอร์ให้สร้างเป็นช่ือหน่วยงาน / เรื่อง
น้ัน ๆ ควรใช้ตัวอักษร ภาษาอังกฤษตัวพิมพ์เล็ก หรือผสมกับตัวเลข 0-9 เช่น thm คือ โรงเรียนท่า
ใหม่ “พูลสวัสด์ิราษฎร์นุกูล” จากน้ันข้างในโฟลเดอร์ thm ให้เราสร้างโฟลเดอร์เก็บรูปภาพ พ้ืนหลัง
ไฟล์เสียง ไฟล์วีดีโอ หรือโฟลเดอร์อ่ืนเป็นชื่อภาษาอังกฤษ เช่น pic คือโฟลเดอร์เก็บรูปภาพ, bg
คอื โฟลเดอร์เก็บพน้ื หลงั เป็นต้น

การตั้งชื่อไฟล์การตั้งชื่อไฟล์ให้ต้ังช่ือและนามสกุลไฟล์เป็นตัวอักษร
ภาษาองั กฤษตัวพมิ พเ์ ลก็ หรอื ผสมกบั ตวั เลข 0-9 หรอื เคร่อื งมือขีดลบ/ขดี ล่าง และต้ังชือ่ ไฟล์ให้ตรง
กับเร่ืองน้ัน ๆ เช่น history.html คือ ประวัติของโรงเรียน,person.html คือ บุคลากรของโรงเรียน
เปน็ ตน้

รูปที่ 2.7 การตง้ั ช่ือไฟล์
ข้ันตอนที่ 5 การออกแบบเวบ็ เพจแตล่ ะหนา้ ในเวบ็ ไซต์
1) การกาหนดเวบ็ โครงสรา้ งเว็บไซต์

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

14

รปู ที่ 2.8 การออกแบบเวบ็ เพจ
ข้ันตอนที่ 6 การสรา้ งเวบ็ เพจเมื่อจดั วางองค์ประกอบของเวบ็ แต่ละหนา้ แล้ว ต่อไป
คือข้ันตอนการเขียนเว็บด้วยโปรแกรมภาษา HTML เพื่อกาหนดให้แต่ละหน้าเว็บเพจนาเสนอ
ข้อความรูปภาพ วดี โี อ และเสียง ให้อย่ใู นรูปแบบการทตี่ อ้ งการ

รูปท่ี 2.9 การเขียนโปรแกรมด้วยภาษา HTML
ขั้นตอนท่ี 7 การลงทะเบียนขอพ้ืนท่ีเว็บไซต์เมื่อทาการออกแบบและสร้างเว็บไซต์
เสรจ็ แลว้ ขัน้ ตอนต่อไป คือ การเผยแพร่เว็บไซต์ส่โู ลกของอนิ เทอร์เน็ตใหค้ นอนื่ เขา้ มาเยยี่ มชม วิธีการ
คือการนาเว็บไซต์ไปฝากกับผู้ให้บริการพ้ืนท่ีเว็บไซต์ท้ังแบบเสียค่าใช้จ่ายหรือบริการ และแบบพื้นที่
เว็บไซต์ฟรี ซ่งึ วนั นี้เราจะขอแนะนาเวบ็ ไซตท์ ี่ให้บริการฟรพี ้นื ทฝี่ ากเวบ็ คือhttp://www.thcity.com

15

รูปที่ 2.10 การลงทะเบยี นขอพื้นทเี่ วบ็ ไซต์
ขั้นตอนที่ 8 การอัพโหลดเว็บไซต์เม่ือเราทาการสมัครบริการพื้นที่ฝากเว็บแล้ว
ข้ันตอนต่อไป คือการอัพโหลดไฟล์เว็บไซต์ของเราไปยังเว็บไซต์ที่ให้บริการพ้ืนท่ีฝากเว็บซ่ึงอาจจะทา
การอัพโหลดผ่านเว็บบราวเซอร์เว็บที่ให้บริการ หรือการอัพโหลดด้วยโปรแกรม เช่น CuteFTP,
Filezilla,WS_FTP เป็นต้น เพื่อให้ผู้คนได้เข้าเยี่ยมชมโดยสามารถดูในเว็บไซต์ของเราผ่านเครือข่าย
อนิ เทอรเ์ น็ต

รูปที่ 2.11 การอัพโหลดเว็บไซต์

16

2.2.7 การใชส้ ี
2.2.7.1 สีฟ้าและสีน้าเงิน ให้ความรู้สึกสงบ สุขุม สุภาพ หนักแน่น เคร่งขรึม

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

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

2.2.7.3 สีเหลือง เป็นสีแห่งความเบิกบาน เร้าอารมณ์ และเรียกร้องความสนใจ
ให้ความรู้สึกแจ่มใส ความสดใส ความร่าเริง ความเบิกบานสดช่ืน ชีวิตใหม่ ความสด ใหม่ความ
สุกสวา่ ง การแผก่ ระจายอานาจบารมี

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

2.2.7.5 สีขาว ให้ความรู้สึก บริสุทธ์ิ สะอาด สดใส เบาบาง อ่อนโยนเปิดเผย
การเกดิ ความรัก ความหวงั ความจริง ความเมตตา ความศรทั ธา ความดีงาม

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

2.3 โปรแกรมทใ่ี ชใ้ นการพัฒนาระบบงาน
2.3.1 โปรแกรม Adobe Photoshop CS6

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

17
2.3.1.1 วธิ ีการติดต้งั โปรแกรม Adobe Photoshop cs6
รูปที่ 2.12 แสดงเข้าไปยังโฟลเดอร์ของ Photoshop ตามภาพ ดับเบลิ้ คลิก Set-up
รปู ที่ 2.13 แสดงการตรวจสอบก่อนทาการติดตงั้ โปรแกรม

รปู ท่ี 2.14 แสดงโปรแกรมตรวจสอบเสร็จแลว้ จะเข้าสหู่ น้าจอ เลือก Try

รปู ท่ี 2.15 แสดงการกรอก Serial Number แลว้ คลกิ ที่ปุ่ม คลิก Accept

18
รูปที่ 2.16 แสดงการเลือกการติดตง้ั ของโปรแกรม ใหเ้ ลือก Installs

รูปท่ี 2.17 แสดงหน้าการโหลดของโปรแกรม
รูปที่ 2.18 แสดงการเสรจ็ สน้ิ การตดิ ตั้งโปรเเกรม Adobe Photoshop CS6

19
2.3.1.2 การเรม่ิ ตน้ ใช้งาน Adobe Photoshop CS6

การเริ่มต้นใช้งาน Adobe Photoshop CS6 เบ้ืองต้นหลังจากที่ทาการ
ตดิ ตงั้ Adobe Photoshop CS6 เรียบร้อยแลว้ ก็สามารถเรยี กใช้งานโปรแกรมด้วยวิธกี ารต่อไปน้ี

1) Click Mouse ทป่ี ุ่ม
2) เลอื กคาสงั่ All Program > Adobe Photoshop CS6

รูปท่ี 2.19 แสดงขั้นตอนการเข้าสู่โปรแกรม Adobe Photoshop CS6

รูปที่ 2.20 แสดงหนา้ ต่างโปรแกรม Adobe Photoshop CS6

รอสักครจู่ ะปรากฏหนา้ ต่างการทางาน 20

Menu Palettes
bar
Tool options
bar

Toolb
ox

รปู ที่ 2.14 แสดงหนา้ จอหลกั การทางานของโปรแกรม Adobe Photoshop CS6
2.3.1.3 เครื่องมอื ต่างๆ (Toolbox)

รปู ที่ 2.15 แสดงเคร่อื งมอื ตา่ งๆ (Toolbox) Adobe Photoshop CS6

21

ตารางท่ี 2.1 ตารางอธบิ ายเครือ่ งมือTool ตา่ งๆ

สัญลกั ษณ์ ความหมาย

Marquee Tool

เปน็ การเลือกแบบสเ่ี หลยี่ มผืนผ้า, วงกลม, แถวขนาด 1 Pixel หรือคอลมั น์ 1

Pixel

Move Tool
ใชเ้ พอื่ เล่ือนสว่ นท่ีเลอื ก หรือไวเ้ ลอื่ น Layer และ Guide ต่างๆ

Lasso Tool
จะใช้เพือ่ สร้าง Selection แบบอิสระ, แบบ Polygonal (ตามจุดที่คลกิ )
และ Magnetic (ดึงเข้าหาขอบรปู ภาพ)
Magic Wand Tool
ใช้เลอื กพ้ืนทบ่ี รเิ วณทมี่ ีสีเดียวกัน
Crop T Crop Tool
ใช้ในการเลือกบางสว่ นของรูปภาพ
Slice Tool
ใช้ในการสร้าง Slice
Healing Brush Tool
ใช้ในการระบายสี เพ่ือซอ่ มแซมรูปภาพใหส้ มบรู ณแ์ บบ
Patch Tool
ใช้เฉพาะในบรเิ วณท่เี ลือกไวเ้ ท่าน้ัน เพือ่ ให้เกิดความสมบูรณ์ของรปู ภาพ โดย
ใช้ลวดลาย หรอื ใชส้ ่วนทเ่ี ลือกในภาพเป็นต้นฉบบั
Brush Tool
ใชใ้ นการวาดเส้น Brush ตา่ งๆ
Pencil Tool
ใชใ้ นการวาดเส้นท่มี ีขอบชดั เจน

22

ตารางที่ 2.1 ตารางอธบิ ายเครื่องมอื Tool ต่างๆ (ตอ่ )

สญั ลกั ษณ์ ความหมาย

Clone Stamp Tool

ใชก้ ็อปปร้ี ูปโดยอาศยั รูปภาพตน้ ฉบับ

Pattern Stamp Tool

ใชเ้ พอื่ วาดรูปโดยใชบ้ างส่วนของรปู ภาพที่มอี ยูเ่ ปน็ ต้นฉบบั

Art History Brush Tool

ใช้ในการวาดรูป จาก State หรอื Snapshot ของรปู น้ีโดยอาศัยรูปแบบของ

Stoke ที่มสี ไตล์หลากหลาย ช่วยให้สไตล์ ของภาพดตู ่างออกไป

Eraser Tool

ใชล้ บรูปภาพหรือลบบางส่วนของพกิ เซลและทาการเกบ็ ส่วนต่างๆ เป็น

State ต่างๆ ใน History Palette

Magic Eraser Tool

ใชล้ บรูปภาพบริเวณที่มสี เี ดียวกนั ให้กลายเปน็ พน้ื ทโ่ี ปร่งใส (Transparent)

โดยการคลิกเพียงคร้ังเดียว

Background Eraser Tool

ใชล้ บรูปภาพบางสว่ นใหก้ ลายเปน็ พื้นทโี่ ปร่งใสโดยการลากเมาส์

Gradient Tools

ใชเ้ พ่อื ไลส่ ีระหว่างสีหลายๆ สี ในแบบตา่ งๆ Straight-line, Radial, Angle,

Reflected และ Diamond

Paint Bucket Tool ใช้ในการเตมิ สี Fill ในบริเวณทเ่ี ป็นสีเดยี วกนั ด้วยสี

ของForeground

Sponge Tool

Sponge Tool

ใชเ้ ปลีย่ นสใี นส่วนต่างๆ ของรปู ภาพ โดยการปรบั คา่ ความเขม้ สี

Path Selection Tool
ใช้เพื่อเลอื ก Shape หรอื Path เพอื่ แสดง Anchor Paint, Direction Line
และ Direction Paint

23

ตารางท่ี 2.1 ตารางอธบิ ายเครอ่ื งมอื Tool ต่างๆ (ต่อ)

สัญลกั ษณ์ ความหมาย

Type Tool

ใช้ในการสรา้ งตัวหนังสอื ลงบนรูปภาพ

Type Mask Tool

ใช้สร้าง Selection เป็นรปู ร่างตัวหนังสือ

Pen Tools

ใช้ในการลากเสน้ Path ซ่งึ สามารถดัดโคง้ ตามรปู ภาพได้

Custom Shape Tool

ใช้เลอื กรปู ภาพเลอื กรปู ภาพทีม่ ีรปู ร่างเฉพาะจาก Custom Shape List

Animations Tool

ใช้เขียนโนต๊ หรอื แนบเสียงไปกับรูปภาพได้

Eyedropper Tool

ใช้ในการดูดสีจากรปู ภาพเพอื่ ใช้เปน็ ตน้ แบบของสกี บั งานชิ้นอ่ืนๆ

Measure Tool

ใชว้ ัดระยะหา่ ง, ตาแหน่งและมุมองศาระหว่างภาพ

Hand Tool

ใช้เล่อื นภาพทอ่ี ยู่ในหน้าต่างเดียวกัน

Zoom Tool

ใชใ้ นการขยายและย่อสว่ นการแสดงภาพบนหนา้ จอ

2.3.1.4 การเปดิ ไฟล์ภาพ (Open)
1) คลิกท่เี มนูคาส่ัง File ทแี่ ถบ Menu bar จากนั้นเลอื กคาส่งั Open

รปู ที่ 2.16 แสดงการเปดิ ไฟล์ภาพ (Open)

24

ตอ้ งการเปดิ มาใชง้ าน 2) จะปรากฏ Dialog แสดงรายช่ือไฟล์ตา่ ง ๆ ดังภาพ เพ่อื เลอื กไฟลท์ ่ี
3) คลกิ เลือกไฟลท์ ี่ต้องการเปดิ ใชง้ าน จากน้นั คลกิ ป่มุ Open

Open

รปู ที่ 2.17 แสดงการเปดิ ไฟล์ภาพ (Open)
2.3.1.5 การสร้างไฟล์ใหม่ (New)

1) คลิกท่ีเมนูคาส่ัง File ทแี่ ถบ Menu bar จากน้ันเลอื กคาส่งั New

รปู ที่ 2.18 การสรา้ งไฟล์ใหม่ (New)
2) จะปรากฏ Dialog สาหรบั กาหนดคุณสมบตั ติ ่าง ๆ ของไฟลภ์ าพดังนี้

25

รูปท่ี 2.19 แสดงการกาหนดขนาดของกระดาษ

- Name คือ ช่ือของช้ินงาน สามารถกาหนดใหม่เองได้ ช่ือนี้จะไป
ระบทุ ช่ี ่ือไฟล์ตอ่ ไป

- Preset คือ ขนาดงานท่ีโปรแกรมกาหนดมาให้ ซ่ึงมีหลากหลาย
ขนาดใหเ้ ลอื กหรือสามารถกาหนดเองจากช่อง Width และ Height ได้

- Width คือ ขนาดความกว้างของงาน (จากซ้ายไปขวา) โดยกาหนด
หนว่ ยและขนาดไดเ้ อง จากรูป คือ 1024 Pixels

- Height คือ ขนาดความกว้างของงาน (จากบนลงล่าง) โดยกาหนด
หน่วยและขนาดไดเ้ อง จากรูป คือ 768 Pixels

- Resolution คือ ความละเอียดของภาพ โดยใส่ตัวเลขค่าความ
ละเอียดของภาพ เช่น งานเว็บหรือรูปท่ีแสดงบนคอมพิวเตอร์เท่ากับ 72 pixels/inch งานส่ิงพิมพ์
เทา่ กบั 150-200 pixels/inch

- Color Mode คือ โหมดสีของภาพ ซึ่งประกอบไปด้วย โหมดสี
Bitmap, Grayscale, RGB Color, CMYK Color, Lab Color

- Background Contents คือ สีพืน้ หลงั ของภาพ เมือ่ เริ่มชนิ้ งานใหม่ มดี ังนี้
- White กาหนดใหส้ ีพื้นหลงั เปน็ สขี าว
- Background Color กาหนดใหส้ พี ื้นหลังเปน็ สเี ดียวกับ Background
- Transparent ไมม่ ีพ้ืนหลัง
3) หลงั จากกาหนดคณุ สมบัตติ ่างๆ ใหค้ ลกิ ปุ่ม OK เพอื่ เร่ิมชิ้นงานใหม่

26

2.3.1.6 การบันทกึ ข้อมลู ลงบนไฟล์ (Save)
หลังจากตกแต่งไฟล์ภาพเรียบร้อย จะต้องเก็บบันทึกข้อมูลลงบนไฟล์

(Save) สาหรับการเรียกใช้งานในครั้งต่อไป โปรแกรมมีการบันทึกข้อมูลลงบนไฟล์ (Save)
อยู่ 3 ลกั ษณะ คือ

1) Save บันทึกไฟล์ในรูปแบบ (Format) ปกติ
2) Save As บนั ทึกไฟล์ในรูปแบบ (Format) อืน่ ๆ ได้ เชน่ JPEG, BMP, GIF
3) Save for Web บันทึกไฟล์ในรูปแบบ (Format) สาหรับการใช้งานบนเว็บ
เช่น ไฟล์ Html และไฟลร์ ปู ภาพ JPEG, GIF, PGN เปน็ ตน้
2.3.1.7 การใช้งานของ Save และ Save As
1) คลิกท่ีเมนูคาสั่ง File ท่ีแถบ Menu bar จากน้ันเลือกคาสั่ง Save
หรอื Save As หรอื Save for Web & Devices

รูปท่ี 2.20 แสดงการบันทึกข้อมลู ลงบนไฟล์ (Save)
2) จะปรากฏ Dialog สาหรบั กาหนดคณุ สมบตั ิต่าง ๆ ของไฟล์ภาพ ดงั นี้

27

รูปท่ี 2.21 แสดงการบันทึกข้อมูลลงบนไฟล์ (Save)
- ชือ่ ไฟล์ (File Name)
- รปู แบบของไฟล์ (Format)
- กาหนดคณุ สมบตั ิของการบนั ทกึ ไฟล์ (Save Options)

3) As a Copy บันทึกไฟล์เป็นช่ืออื่น รูปแบบ (Format) อ่ืน ขณะท่ีไฟล์
เดิมกาลังเปิดใช้งาน

4) Layers จะเก็บคุณสมบตั ขิ อง Layer ตา่ ง ๆ
5) Use Proof setup เกบ็ คา่ โหมดสีทจ่ี ะใช้แสดงสีของภาพก่อนจะพิมพ์
6) Thumbnail กาหนดใหไ้ ฟล์ท่บี นั ทกึ (Save) สามารถแสดงภาตวั อย่าง
ใน Dialog ของการเปิดไฟล์
7) Use Lower Case Extension กาหนดใหน้ ามสกลุ ไฟล์เป็นอักษรตัวเล็ก
8) หลงั จากกาหนดคุณสมบตั ิต่าง ๆ ให้คลิกปมุ่ Save เพือ่ บนั ทึกขอ้ มลู
2.3.1.8 การปรับคา่ ความสวา่ ง/ความคมชดั (Brightness/Contrast)
การปรับความสว่าง-ความมดื ของภาพ และการตดั กันของสีที่ชัดเจนข้ึนนน้ั สามารถ
ทาได้โดยใช้คาสั่ง Brightness/Contrast โดยเลอื กคลกิ ที่ Image > Adjust > Brightness/Contrast
Training Service

Original Brightness Contrast

รูปท่ี 2.22 แสดงการปรับค่าความสวา่ ง/ความคมชัด

28

2.3.2 ขนั้ ตอนการตดิ ตั้งโปรแกรม Microsoft Office 2010
โปรแกรมไมโครซอฟต์เวริ ด์ ซึง่ เปน็ โปรแกรมประมวลผลคาแบบพเิ ศษ ชว่ ยให้สรา้ ง

เอกสารแบบมืออาชีพอย่างมีประสิทธิภาพและประหยัด เช่น เหมาะกับงานด้านการพิมพ์เอกสาร
ทุกชนิด สามารถพิมพ์เอกสารออกมาเป็นชุด ๆ ซ่ึงเอกสารอาจเป็นจดหมาย บันทึกข้อความ รายงาน
บทความ ประวัติย่อ และยังสามารถตรวจสอบ ทบทวน แก้ไข ปรับปรุงความถูกต้องในการพิมพ์
เอกสารได้อย่างง่ายดาย สามารถตรวจสอบ สะกดคา และหลักไวยากรณ์ เพิ่มตาราง เพิ่มกราฟิก
ในเอกสารได้อย่างง่ายดาย หรือเพิ่มเติมข้อมูลได้ตลอดเวลา สามารถใช้ลักษณะของการจัดพิมพ์ด้วย
คอมพิวเตอร์แบบต้ังโต๊ะ (Desktop Publishing) เพ่ือสร้างโบชัวร์ (Brochures) ด้านส่ือโฆษณา
(Advertisements) และจดหมายข่าว ( Newsletters) ได้ด้วยโปรแกรมประมวลผลคา (word
Processor)

2.3.2.1 การตดิ ต้ัง Microsoft Office 2010 มขี ้ันตอนดงั น้ี
1) ในโฟลเดอร์ที่เก็บไฟล์ติดตั้ง Microsoft Office Professional Plus

2010 Beta ให้ดับเบิลคลิกไฟล์ ProfessionalPlus.exe
2) ในหน้าเดอะลอ็ กบ็อกซ์ User Account Control (UAC) ให้คลกิ Continue

รปู ท่ี 2.23 แสดงหน้าต่าง User Account Control
3) รอจนโปรแกรมเตรียมการเซ็ตออัพ ระบบแล้วเสร็จ จากน้ันในหน้า

Read the Microsoft Software License Terms ให้เลือกเช็คบ็อกซ์หน้า I accept the terms
in this agreement เสรจ็ แล้วคลิก Continue

29

รูปที่ 2.24 แสดงหนา้ ตา่ ง Microsoft Software License Terms
4) ในหน้า Choose the installation you want โปรแกรมจะให้เลือก

ว่าจะติดต้ังแบบDefault หรือทาการติดต้ังโดยปรับแต่งเอง ในท่ีน้ีเลือก Install Now เพื่อติดตั้งแบบ
Default

รูปท่ี 2.25 แสดงหน้าตา่ ง Choose the installation

30

5) ในหน้าเดอะล็อกบ็อกซ์ Installation Progress รอจนการติดต้ัง

โปรแกรมแลว้ เสร็จ

รูปที่ 2.26 แสดงหนา้ ตา่ ง Installation Progress
6) ในหน้าเดอะล็อกบ็อกซ์ถัดไปคลิก Close เพื่อจบการติดตั้ง Microsoft
Office Professional Plus 2010 Beta

รปู ที่ 2.27 แสดงหนา้ ต่าง Successfully Installed
2.3.2.2 เริม่ ตน้ ใช้งาน Microsoft Office 2010

31

1) หลังจากทาการติดต้ัง Microsoft Office 2010 เสร็จเรียบร้อยแล้ว
จากนัน้ ให้คลกิ Start

2) คลิก Start แล้วคลิก All Programs คลิก Microsoft Office แล้วคลิก
Microsoft Word 2010

รปู ที่ 2.28 หนา้ ตา่ ง Office Professional Plus 2010
2.3.3 โปรแกรม WordPress

WordPress (เวิร์ดเพรสส์) คือ โปรแกรมสาเร็จรูปท่ีใช้สร้างและจัดการเนื้อหา
เว็บไซต์ประเภท Contents Management System หรือเรียกย่อๆ ว่า "CMS" ซ่ึงเขียนด้วยภาษา
PHP และใช้ระบบจัดการฐานข้อมูล MySQL โดยมีส่วนประกอบหลักๆ คือWordPress Core
เป็นซอฟแวร์หลัก ใช้จัดการเว็บไซต์ เน้ือหาและบทความต่างๆTheme เป็นส่วนท่ีกาหนดดีไซน์หรือ
รูปแบบการแสดงผลPlugin เป็นส่วนท่ีช่วยเพ่ิมความสามารถให้กับ WordPress เช่น ระบบสร้างหนา้
เว็บไซต์ ระบจัดการสินค้าWordPress มีระบบจัดการบทความ หรือที่เรียกว่า “ระบบหลังบ้าน
(Dashboard)” เอาไว้จัดการข้อมูลบนอินเตอร์เน็ต ทาให้ง่ายและสะดวกต่อการใช้งานมาก สามารถ
ใช้สร้างและจัดการเน้ือหาเว็บไซต์ โดยใช้งานบนอินเตอร์เน็ตได้เลย ไม่จาเป็นต้องดาวน์โหลด
โปรแกรมมาตดิ ตั้งในเครื่อง และผูใ้ ชไ้ ม่ตอ้ งเสียเวลาเขยี นโค้ดเอง

32

2.3.3.1 ขั้นตอนการตดิ ตง้ั WordPress

รูปท่ี 2.29 dowload WordPress ตัวล่าสดุ ลงมาที่เคร่ืองเรากอ่ นท่ี wordpress.org

รปู ที่ 2.30 แตก zip ไฟลอ์ อกมาจะได้ folder ท้ังหมดลักษณะนี้

- yourfolder คอื folder ที่จะติดตง้ั WordPress (ตง้ั ไดเ้ องตามใจชอบ – สว่ นใหญ่
กจ็ ะตั้งตามช่ือเวบ็ ไซต์ หรอื ชอื่ โปรเจค)

33

รูปท่ี 2.31 โยนทกุ อย่างเข้าไปท่ี path: XAMPP/htdocs/wp_yuikdev

รปู ท่ี 2.32 start Apache และ MySQL
- ต้งั แต่ WordPress 4.2 ขึ้นไป collation: utf8mb4_unicode_ci
- ใช้ browser เรยี ก XAMPP ขน้ึ มา โดยพมิ พl์ ocalhost ที่ช่อง url แลว้ กด Enter

34

- เข้าไปที่ เมนูphpMyAdmin เพอ่ื เขา้ ไปสร้าง database

รูปที่ 2.33 สรา้ ง database / collation: utf8_general_ci
สาหรับวิธีแมนนวลใช้กับ WP เวอร์ช่ันเก่า (บทความนี้พี่ยุ้ยเขียนนานแล้ว
กอ่ น Gutenberg) แตส่ าหรับคนที่อยากรทู้ ีม่ าที่ไป คา่ config แต่ละตวั คืออะไร ก็ดูได้เรมิ่ กนั เลย
ดับเบล้ิ คลกิ ทไี่ ฟล์ wp-config-sample.php เพื่อเข้าไปต้งั ค่าขอ้ มูล database ทีเ่ ราสรา้ งมาเมอ่ื ก้ี

รูปท่ี 2.34 ต้งั ค่าไฟล์ wp-config.php
url –http://localhost/yourfolder/wp-admin/install.php
(เอาwp-admin/install.php มาต่อท้าย)

35
-ตวั อย่าง http://localhost/wp_yuikdev/wp-admin/install.php

รูปที่ 2.35 เรยี กหน้า Install WordPress ข้นึ มา
คร้ังต่อไปเวลาเข้าหน้า Login ก็ใช้ url นี้ http://localhost/yourfolder/wp-
login.php (เอา wp-login.php มาต่อท้าย)
ตวั อยา่ ง http://localhost/wp_yuikdev/wp-login.php
Trick : save ใส่ bookmark ของ browser เอาไวเ้ ลย คราวหน้าจะไดไ้ ม่ตอ้ งพมิ พย์ าวๆ

รูปที่ 2.36 Login เข้า WordPress เป็นอนั เสร็จเรียบรอ้ ย

36

2.3.4 โฮสติ้ง (Hosting)
เว็บโฮสติ้ง เป็นคอมพิวเตอร์ขนาดใหญ่ (เซิร์ฟเวอร์) ซ่ึงเก็บเว็บไซต์ของพวกเขา

เป็นพ้ืนท่ีในการใช้งานในอินเทอร์เน็ต สาหรับเว็บไซต์ท่ัวไป โฮสติ้งมีลักษณะท่ีเปรียบเทียบได้
เหมือนกับฮาร์ดดิสก์ ในเครื่องคอมพิวเตอร์ ฉะนั้นถ้ามีพื้นที่การใช้งานโฮสต้ิงท่ีมาก ก็จะสามารถเก็บ
ไฟล์ ,รูปภาพ, เอกสาร และอื่นๆ ได้มากตามไปด้วยเช่นกัน จึงอาจเรียกได้อีกหลายแบบ
เช่น โฮสติง้ เว็บโฮสต้ิง โฮส แตท่ ้ังหมดก็มีความหมายเหมือนกันโฮสติง้ จะมีการตดิ ตง้ั โปรแกรมตา่ งๆ
ท่ีทาหน้าที่หลากหลาย เช่น WebServer, FTP,Database, DNS, E-mail, Subdomain, Cronjob
และอืน่ ๆ ซ่ึงผู้ท่ตี อ้ งการสรา้ งระบบ

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

รปู ที่ 2.37 แสดงการหาเวบ็ โฮสตง้ิ ทด่ี ตี ้องคานงึ ถึงสิ่งใดบา้ ง
2.2.5 โดเมนเนม (domain name)

โดเมนเนม ความหมายโดยท่ัวๆ ไป หมายถึง ช่ือท่ีใช้ในการอ้างอิงเพื่อไปยัง
Website ต่างๆ ที่อยู่บนเครือข่ายอินเตอร์เน็ต ท้ังในการเข้าชมผ่านบราวเซอร์ของผู้ใช้ทั่วไป ยังรวม
ไปถึงผู้ดูแลระบบโดเมนเนมซีสเทมที่สามารถแก้ไขไอพีแอดเดรสของชื่อโดเมนเนมน้ันๆ ได้ทันที
โดยท่ีผู้ใช้ทั่วไปไม่จาเป็นต้องรับรู้หรือจดจาไอพีแอดเดรสที่มีการเปล่ียนแปลงช่ือ Domain Name
จะเป็นตัวอักษรพิมพ์ใหญ่หรือพิมพ์เล็ก ไม่แตกต่างกันเพราะ ระบบอินเตอร์เน็ตจะรับรู้ตัวอักษรเป็น
ตัวเล็กท้ังหมดเช่น hostneverdie.com หรือ Hostneverdie .com ถือว่าเป็นชื่อเดียวกัน โดนเมน
เนม มีด็อทอยู่หลายประเภทแตท่ ่ีนิยมมากที่สุดนั้นก็คือ .com เพราะเป็นด็อทในยุคแรกๆ ที่เร่ิมใช้กนั
และง่ายตอ่ การจดจา

37

2.4.7 Google Form
Google Form เป็นส่วนหนึ่งในบริการของกลุ่ม Google Docs ที่ช่วยให้เราสร้าง

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

การใชง้ าน Google Form นน้ั ผู้ใช้งานหรือผู้ทีจ่ ะสรา้ งแบบฟอรม์ จะตอ้ งมบี ัญชีของ
Gmail หรอื Account ของ Google เสยี กอ่ น ผใู้ ช้งานสามารถเข้าใช้งานสร้างแบบฟอร์ม ผ่าน Web
Browser ได้เลยโดยทไ่ี ม่ตอ้ งติดตง้ั โปรแกรมใดๆ ทัง้ สนิ้

2.4.8 โปรแกรม SPSS
โปรแกรม SPSS (Statistical Package for the Social Science for Windows)

เป็นโปรแกรมท่ีมีประสิทธิภาพสูง ในการวิเคราะห์ข้อมูลทางสถิติ และการจัดการข้อมูลต่างๆ
ผู้ใช้โปรแกรมสามารถวิเคราะห์ข้อมูลโดยใช้สถิติประเภทต่าง ๆ และแสดงผลการวิเคราะห์ข้อมูล
ออกมาในรูปของตารางหรือแผนภูมิชนิดต่าง ๆ ได้ทั้งแบบ ๒ มิติ และ ๓ มิติ การใช้งานโปรแกรมไม่
ซับซ้อน เหมาะสาหรับผู้ใช้ที่ต้องการประมวลผลข้อมูลท่ีถูกต้องแม่นยาและรวดเร็ว แต่ก็ยังมีคนอยู่
จานวนไม่น้อยที่ยังมีแนวคิดที่ว่าการวิเคราะห์ข้อมูลด้วยโปรแกรม SPSS เป็นเรื่องท่ียากและต้องใช้
ความรู้ทางสถิติเป็นอย่างดีบา้ ง โอกาสในการนาไปใช้ในการปฏิบัติงานค่อนข้างน้อยบ้าง แตผ่ ู้เขียนไม่
เห็นด้วยกับแนวคิดดังกล่าวข้างต้นเน่ืองจากการใชโ้ ปรแกรม SPSS ไม่จาเปน็ ตอ้ งมีความรู้พืน้ ฐานทาง
สถิติเป็นอย่างดีเสมอไป แต่ขอให้มีความรู้พ้ืนฐานเกี่ยวกับการนาเสนอข้อมูลด้วยสถิติเบ้ืองต้น เช่น
ค่าความถ่ี (Frequency) ค่าร้อยละ(Percentage) ค่าเฉลี่ยเลขคณิต (Mean) และค่าส่วนเบ่ียงเบน
มาตรฐาน (Standard Deviation) เป็นต้นโดยส่วนใหญ่แล้วการใช้งานโปรแกรม SPSS มักจะ
เก่ียวข้องกับการวิเคราะห์ข้อมูลในงานวิจัย แต่ก็ไม่เสมอไป กล่าวคือ SPSS สามารถนาไปประยุกต์ใช้
ในการดาเนินชีวิตได้เป็นอย่างดี เช่น การทาบัญชีและคานวณรายรับรายจ่ายในครอบครัว ใช้สาหรับ
การวิเคราะห์เพื่อประเมินการปฏิบัติงานของบุคลากรในหน่วยงาน วิเคราะห์ทัศนคติ และความพึง
พอใจต่อสิง่ ต่างๆ นอกจากนี้ SPSS ยงั สามารถนามาใชเ้ ปน็ เครอื่ งมือทช่ี ว่ ยในการตดั สินใจของผู้บรหิ าร
หรือบุคคลในระดับอ่ืน ๆ อยู่ท่ีว่าจะรู้จักประยุกต์ใช้เทคโนโลยีท่ีทันสมัยและมีประสิทธิภาพดังกล่าว
นัน้ อย่างไร