การสร้างเว็บไซต์ประชาสัมพันธ์โรงเรียนพลังราษฏ์พิทยาสรรค์

การสรา้ งเว็บไซต์ประชาสมั พนั ธโ์ รงเรยี นพลงั ราษฎรพ์ ิทยาสรรพ์ Creation Website of Palangrat Pittayasun School นางสาวธิดาทิพย์ บรรจง นายวิฆเณศร์ ศรีใสคำ โครงการน้ีเป็นสว่ นหนึง่ ของการศกึ ษาตามหลักสูตรประกาศนียบัตรวชิ าชีพ (ปวส.) สาขาวิชาคอมพวิ เตอร์ธุรกจิ วทิ ยาลัยการอาชพี นวมนิ ทราชนิ มี ุกดาหาร ปกี ารศกึ ษา 2563

การสร้างเว็บไซต์ประชาสัมพันธโ์ รงเรียนพลังราษฎร์พิทยาสรรพ์ Creation Website of Palangrat Pittayasun School นางสาวธดิ าทพิ ย์ บรรจง นายวฆิ เณศร์ ศรีใสคำ โครงการนเ้ี ปน็ ส่วนหนง่ึ ของการศกึ ษาตามหลักสตู รประกาศนียบัตรวิชาชีพช้ันสูง (ปวส.) สาขาวิชาคอมพิวเตอรธ์ รุ กจิ วทิ ยาลยั การอาชพี นวมินทราชนิ มี ุกดาหาร ปีการศกึ ษา 2563





ค หัวข้อโครงการ การสรา้ งเว็บไซต์ประชาสัมพันธโ์ รงเรยี นพลังราษฎร์พทิ ยาสรรพ์ ผูจ้ ดั ทำโครงการ Creation website of Palangrat Pittayasan School ครูทีป่ รึกษา นายวิฆเณศร์ ศรใี สคำ รหสั ประจำตัวนักศึกษา 6232040019 ครูผู้สอน สาขาวชิ า นางสาวธดิ าทิพย์ บรรจง รหสั ประจำตวั นกั ศึกษา 6232040015 ปกี ารศกึ ษา นางประเสริฐศรี สุทธพิ ันธ์ นางประเสริฐศรี สทุ ธิพนั ธ์ คอมพวิ เตอร์ธรุ กิจ 2563 …………….………………………………………………………………………………………..……………………………………… บทคดั ย่อ โครงการการสร้างเว็บไซต์ประชาสัมพันธ์โรงเรียนพลังราษฎร์พิทยาสรรพ์ จัดทำขึ้น โดยมีวัตถุประสงค์ 1) เพื่อสร้างเว็บไซต์ประชาสัมพันธ์โรงเรียนพลังราษฎร์พิทยาสรรพ์ 2) เพ่ือ เผยแพร่ประชาสัมพันธ์ข้อมูลข่าวสารของโรงเรียนพลังราษฎร์พิทยาสรรพ์ 3) เพื่อศึกษา ความพึงพอใจของผู้ใช้บริการเว็บไซต์โรงเรียนพลังราษฎร์พิทยาสรรพ์ ในการวิจัยกลุ่มตัวอย่าง ในการวิจัย ครั้งนี้ ประชากรคือ คณะครู ผู้ปกครอง และนักเรียน ในโรงเรียนพลังราษฎรพ์ ิทยาสรรพ์ จำนวน 175 คน ได้มาโดยวิธีการสุ่มตัวอย่างแบบง่าย โดยใช้วิธีประเมินแบบสอบถามออนไลน์เครื่องมือ ที่ใช้ ในการวิจัยครั้งน้ี ได้แก่ 1) เว็บไซต์ประชาสัมพันธ์โรงเรียนพลังราษฎร์พิทยาสรรพ์ ท่ีผู้วิจัยสร้าง ขึ้น 2) แบบประเมนิ ความพึงพอใจของกลมุ่ ตวั อย่างท่ีมีต่อคุณภาพเวบ็ ไซต์ประชาสัมพันธโ์ รงเรียนพลัง ราษฎร์พทิ ยาสรรพ์ สถิติท่ใี ชใ้ นการวจิ ัยครั้งน้ี ไดแ้ ก่ คา่ เฉลีย่ และค่าสว่ นเบยี่ งเบนมาตรฐาน (S.D.) ผลการจัดทำโครงการเว็บไซต์ประชาสัมพันธ์โรงเรียนพลังราษฎร์พิทยาสรรพ์ พบว่า สามารถเผยแพร่ข้อมูลข่าวสารและกิจกรรมต่างๆของทางโรงเรียน มีการจัดเก็บฐานข้อมูลผู้เรียน มีระบบเพิ่มความสะดวกในการใหบ้ ริการต่อผู้ใช้งานอยา่ งมีประสิทธภิ าพ ผลการวิจัยพบว่า ความพึงพอใจของกลุ่มตัวอย่างที่มีต่อเว็บไซต์ประชามสัมพันธ์โรงเรียน พลังราษฎร์พิทยาสรรพ์ ตำบลบ้านเปา้ อำเภอหนองสูง จังหวัดมุกดาหาร มีระดับความพึงพอใจอยูใ่ น ระดบั ดมี าก (������̅= 4.55 , S.D.= 0.48)

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

สารบัญ จ เร่อื ง หน้า ใบรบั รองโครงการ ก ใบแห่งลิขสิทธิ์ ข บทคดั ย่อภาษาไทย ค กิตติกรรมประกาศ ง สารบญั จ สารบัญ (ต่อ) ฉ สารบัญตาราง ช สารบญั รูป ซ สารบญั รูป (ต่อ) ฌ บทที่ 1 บทนำ 1 1 1.1 ความเปน็ มา และความสำคญั ของปญั หา 1 1.2 วัตถุประสงค์ของโครงการ 2 1.3 เป้าหมายและขอบเขตของโครงการ 3 1.4 แผนงานและระยะเวลาดำเนินการ 4 1.5 ประโยชน์ท่ีคาดว่าจะได้รบั 4 1.6 นยิ ามศพั ท์เฉพาะ 6 บทที่ 2 ทฤษฎีที่เกย่ี วข้อง 6 2.1 ความรูเ้ บอ้ื งต้นเก่ียวกับเวบ็ ไซต์ 8 2.2 การออกแบบ และพัฒนาเวบ็ ไซต์ 21 2.3 เครือ่ งมือในการพฒั นาเว็บไซต์ 23 2.4 เครือ่ งมือท่ีใช้ในการพัฒนาระบบ 31 2.5 การเผยแพร่เวบ็ ไซตข์ นึ้ สู่ระบบอินเทอร์เนต็ 32 2.6 ข้อมลู พนื้ ฐานของโรงเรียนพลงั ราษฎร์พิทยาสรรพ์ 35 2.7 งานวจิ ัยทเี่ ก่ยี วขอ้ ง 37 บทที่ 3 วิธีดำเนินการจดั ทำโครงการ 37 3.1 ประชากร และกล่มุ ตวั อย่าง 38 3.2 เครอ่ื งมือท่ใี ช่ในการพัฒนาระบบ/วิจัย 40 3.3 แผนการดำเนินงาน

สารบญั (ต่อ) ฉ เรอ่ื ง หน้า 3.4 การศึกษาระบบงานเดมิ 41 3.5 การวิเคราะห์ความตอ้ งการของผูใ้ ช้ 41 3.6 การวิเคราะหแ์ ละออกแบบ 42 46 บทท่ี 4 ผลการพฒั นาระบบ/ผลการวิเคราะห์ข้อมลู 46 4.1 ผลการพฒั นาระบบ 57 4.2 ผลการวิเคราะหข์ ้อมลู 62 62 บทที่ 5 สรปุ ผลการศึกษา อภปิ รายผล และข้อเสนอแนะ 62 5.1 สรุปผลการศกึ ษา 63 5.2 อภปิ รายผล 65 5.3 ขอ้ เสนอแนะ 66 67 บรรณานกุ รม 80 ภาคผนวก 82 85 ภาคผนวก ก แบบเสนอเคา้ โครงโครงการ 89 ภาคผนวก ข รายงานการพบครทู ่ปี รึกษาโครงการ 92 ภาคผนวก ค แบบประเมินความพึงพอใจ 104 ภาคผนวก ง แบบประเมินความพงึ พอใจออนไลน์ 108 ภาคผนวก จ เอกสารเผยแพร/่ สง่ มอบ 111 ภาคผนวก ฉ คมู่ ือการใช้งานเว็บไซต์ ภาคผนวก ช ตารางแสดงผลการวเิ คราะหข์ ้อมลู ด้วยโปรแกรมทางสถติ ิ ภาคผนวก ซ ภาพกิจกรรมการดำเนินโครงการ ภาคผนวก ฌ ประวัติผูจ้ ัดทำ

ช สารบญั ตาราง ตารางท่ี หน้า ตารางท่ี 1.1 ตารางแสดงแผนการดำเนินงาน 3 ตารางท่ี 1.2 ตารางงบประมาณ 4 ตารางท่ี 2.1 ความร้สู กึ เก่ียวกับสี 12 ตารางท่ี 2.2 แสดงขั้นสที ี่ 1 แมส่ ี 13 ตารางท่ี 2.3 แสดงขน้ั สที ี่ 2 การผสมสี 13 ตารางที่ 2.4 ตารางอธบิ ายเคร่ืองมือ Tool ต่าง ๆ 19 ตารางท่ี 3.1 ตารางขนาดของกลมุ่ ตวั อย่างของ เคอร์ซี่ มอร์แกน 38 ตารางที่ 3.2 ตารางแสดงระยะเวลาดำเนินงาน 40 ตารางที่ 4.1 ตารางการทำงานหน้าแรก 47 ตารางท่ี 4.2 ตารางทดสอบคณะผูบ้ รหิ าร 48 ตารางท่ี 4.3 ตารางทดสอบหน้าขา่ วประชาสัมพนั ธ์ 48 ตารางท่ี 4.4 ตารางทดสอบหน้าติดต่อเรา 49 ตารางท่ี 4.5 ตารางทดสอบการทำงานหน้าวิสัยทศั น์ 50 ตารางท่ี 4.6 ตารางทดสอบการทำงานหน้าพันธกิจ 50 ตารางที่ 4.7 ตารางทดสอบการทำงานหนา้ ประวัติโรงเรยี น 51 ตารางที่ 4.8 ตารางทดสอบการทำงานหน้าเพลงประจำโรงเรยี น 52 ตารางท่ี 4.9 ตารางทดสอบการทำงานหนา้ สัญลักษณ์ประจำโรงเรยี น 52 ตารางท่ี 4.10 ตารางทดสอบการทำงานหน้าทีต่ ัง้ โรงเรยี น 53 ตารางท่ี 4.11 ตารางทดสอบการทำงานหน้าคณะกรรมการสภานักเรียน 54 ตารางท่ี 4.12 ตารางทดสอบการทำงานหน้ากลุม่ สาระการเรียนรู้ 54 ตารางที่ 4.13 ตารางทดสอบการทำงานหน้าภาพกจิ กรรม 55 ตารางที่ 4.14 ตารางทดสอบการทำงานหน้าการสมัครเรียนออนไลน์ 56 ตารางที่ 4.15 ตารางทดสอบการทำงานหน้าการเชค็ ช่อื มาเรยี นออนไลน์ 56 ตารางท่ี 4.16 ตารางค่าร้อยละของข้อมูลทวั่ ไปของผู้ตอบแบบประเมนิ 57 ตารางที่ 4.17 ตารางแสดงค่าคะแนนเฉล่ียและส่วนเบีย่ งเบนมาตรฐาน ดา้ นเนื้อหา 59 ตารางที่ 4.18 ตารางแสดงค่าคะแนนเฉล่ียและสว่ นเบีย่ งเบนมาตรฐาน ดา้ นการออกแบบ 60 และการจดั รูปแบบเว็บไซต์ 61 ตารางที่ 4.19 ตารางแสดงค่าคะแนนเฉล่ยี และสว่ นเบยี่ งเบนมาตรฐาน ดา้ นการนำไปใช้

ซ สารบญั รปู รปู ที่ หน้า รปู ที่ 2.1 แสดงเข้าไปยงั โฟลเดอรข์ อง Photoshop ตามภาพ ดบั เบ้ิลคลกิ Set-up 14 รปู ท่ี 2.2 แสดงเมือ่ ปรากฏหน้าต่างตามภาพด้านล่างคลิกปุ่ม Try 14 รปู ที่ 2.3 แสดงโปรแกรมตรวจสอบเสร็จแลว้ จะเข้าสู่หนา้ จอ เลือก Try 14 รปู ท่ี 2.4 แสดงการกรอก Serial Number แล้วคลิกทป่ี มุ่ คลิก Accept 15 รูปท่ี 2.5 แสดงการเลอื กการตดิ ตงั้ ของโปรแกรม ให้เลอื ก Installs 15 รปู ท่ี 2.6 แสดงหน้าการโหลดของโปรแกรม 16 รปู ท่ี 2.7 แสดงการเสรจ็ สน้ิ การตดิ ต้ังโปรแกรม Adobe Photoshop CS6 16 รปู ที่ 2.8 แสดงหนา้ ตา่ งโปรแกรม 17 รปู ที่ 2.9 แสดงหน้าตา่ งของโปรแกรมสรา้ งเว็บไซต์สำเร็จรปู Wix 21 รูปที่ 2.10 แสดงหน้าตา่ งสำหรับลงทะเบียนเขา้ ใช้งาน Wix 21 รปู ที่ 2.11 แสดงหน้าต่างเร่ิมต้นการสร้างเว็บไซต์ Wix 22 รูปท่ี 2.12 แสดงเลือก Templates ใหก้ บั เว็บไซต์ Wix 22 รูปท่ี 2.13 แสดงหนา้ หลกั การทำงานของโปรแกรมสร้างเว็บไซต์สำเรจ็ รูป Wix.com 23 รปู ที่ 2.14 แสดงเลอื กเมนู Drive เลือก \"เพม่ิ เติม\" > \"Google ฟอร์ม 24 รปู ท่ี 2.15 แสดงธีม ของ ฟอรม์ ท่ีเราต้องการ 24 รูปท่ี 2.16 แสดงสว่ นเขียนคำถามในแบบฟอร์ม 25 รปู ที่ 2.17 แสดงกำหนดยนื ยันการบันทึกของข้อมูลหรอื การอนญุ าตให้สง่ ลิงคต์ อบกลับ 25 รปู ท่ี 2.18 แสดงสว่ นของการสร้างคำถาม 26 รูปที่ 2.19 แสดงการสรา้ งคำถามในเเตล่ ะข้อ 26 รปู ท่ี 2.20 แสดงสรา้ งคำถามตอ่ ไปก็ใหเ้ ลือก เพิ่มรายการ 27 รูปที่ 2.21 แสดงแบบน้ที เ่ี ราสร้างขึ้นมา 27 รูปที่ 2.22 แสดงการแก้ไขแบบความพงึ พอใจ 28 รูปท่ี 2.23 แสดงสว่ นของ ข้อความยืนยัน คือส่วนท่ีเราเขียนข้อความคำเชิญ 28 รปู ท่ี 2.24 แสดงเอาลงิ คน์ ีไ้ ปใหค้ นใน องคก์ ร 29 รูปท่ี 2.25 แสดงเปล่ยี นแปลงทางการตอบกลับ 29 รูปที่ 2.26 แสดงเปลย่ี นแปลงทางการตอบกลับ 30 รปู ที่ 2.27 แสดงไฟลท์ ี่จัดเก็บขอ้ มลู ตอบกลับ 30 รูปที่ 2.28 แสดงตราสญั ลกั ษณโ์ รงเรยี น 34

สารบัญรูป (ต่อ) ฌ รูปท่ี หน้า รูปที่ 2.29 แสดงเพลงมาร์ชประจำโรงเรยี นพลงั ราษฎรพ์ ิทยาสรรพ์ 35 รูปท่ี 3.1 แสดงรูปภาพแผนภูมิก้างปลาการศกึ ษาระบบงานเดิม 41 รปู ที่ 3.2 แสดงแสดงรูป E-R Diagram โครงสร้างฐานขอ้ มลู ของเว็บไซต์ 42 รูปที่ 3.3 แสดงแผนผงั โครงสร้างการทำงานของเว็บไซตป์ ระชาสัมพันธโ์ รงเรียน 43 พลงั ราษฎรพ์ ิทยาสรรพ์ 43 รปู ที่ 3.4 แสดงรูป E-R Diagram Model สมคั รเรียนออนไลน์ 44 รปู ที่ 3.5 แสดง User Interface Design 44 รูปที่ 3.6 แสดงหนา้ หลกั ของเว็บไซต์ 45 รูปที่ 3.7 แสดงระบบสมคั รเรยี นออนไลน์ 45 รูปที่ 3.8 แสดงหนา้ ระบบเช็คชอ่ื ออนไลน์ 47 รูปที่ 4.1 แสดงการทดสอบหนา้ แรก 47 รูปท่ี 4.2 แสดงการทดสอบหน้าคณะผู้บริหาร 48 รปู ท่ี 4.3 แสดงการทดสอบหน้าข่าวประชาสมั พันธ์ 49 รปู ท่ี 4.4 แสดงการทดสอบหนา้ ติดต่อเรา 49 รูปท่ี 4.5 แสดงการทดสอบหน้าวิสยั ทศั น์ 50 รูปที่ 4.6 แสดงการทดสอบหน้าพนั ธกิจ 51 รปู ที่ 4.7 แสดงการทดสอบหน้าประวตั โิ รงเรียน 51 รูปที่ 4.8 แสดงการทดสอบหนา้ เพลงประจำโรงเรยี น 52 รปู ที่ 4.9 แสดงการทดสอบหนา้ สัญลกั ษณ์ประจำโรงเรียน 53 รปู ที่ 4.10 แสดงการทดสอบหนา้ ทต่ี ง้ั โรงเรยี น 53 รปู ท่ี 4.11 แสดงการทดสอบหน้าคณะกรรมการสภานักเรยี น 54 รปู ท่ี 4.12 แสดงการทดสอบหน้ากลุม่ สาระการเรียนรู้ 55 รปู ท่ี 4.13 แสดงการทดสอบหน้าภาพกจิ กรรม 55 รูปท่ี 4.14 แสดงการทดสอบหน้าการสมคั รเรยี นออนไลน์ 56 รูปท่ี 4.15 แสดงการทดสอบหน้าการเช็คชอื่ มาเรียนออนไลน์

หัวข้อโครงการ การสร้างเวบ็ ไซต์ประชาสมั พันธโ์ รงเรียนพลังราษฎรพ์ ทิ ยาสรรพ์ ผู้จดั ทำโครงการ Creation website of Palangrat Pittayasan School ครูท่ีปรึกษา นายวิฆเณศร์ ศรใี สคำ รหสั ประจำตัวนกั ศึกษา 6232040019 ครูผู้สอน สาขาวิชา นางสาวธดิ าทิพย์ บรรจง รหสั ประจำตวั นักศึกษา 6232040015 ปีการศกึ ษา นางประเสริฐศรี สทุ ธิพนั ธ์ นางประเสริฐศรี สุทธพิ ันธ์ คอมพวิ เตอร์ธุรกิจ 2563 …………….………………………………………………………………………………………..……………………………………… บทคัดย่อ โครงการการสร้างเว็บไซต์ประชาสัมพันธ์โรงเรียนพลังราษฎร์พิทยาสรรพ์ จัดทำขึ้นโดยมี วัตถุประสงค์ 1) เพื่อสร้างเว็บไซต์ประชาสัมพันธ์โรงเรียนพลังราษฎร์พิทยาสรรพ์ 2) เพื่อเผยแพร่ ประชาสัมพันธ์ข้อมูลข่าวสารของโรงเรียนพลังราษฎร์พิทยาสรรพ์ 3) เพื่อศึกษา ความพึงพอใจ ของผู้ใช้บริการเว็บไซต์โรงเรียนพลังราษฎร์พิทยาสรรพ์ ในการวิจัยกลุ่มตัวอย่าง ในการวิจัย ครั้งนี้ ประชากรคอื คณะครู ผู้ปกครอง และนักเรยี น ในโรงเรยี นพลังราษฎร์พทิ ยาสรรพ์ จำนวน 175 คน ได้มา โดยวิธกี ารสุ่มตัวอยา่ งแบบง่าย โดยใช้วธิ ีประเมินแบบสอบถามออนไลน์เครื่องมือ ทใ่ี ช้ ในการวิจัยคร้ังน้ี ได้แก่ 1) เว็บไซต์ประชาสมั พนั ธโ์ รงเรยี นพลงั ราษฎร์พทิ ยาสรรพ์ ท่ีผู้วิจัยสร้างข้นึ 2) แบบประเมนิ ความพึงพอใจ ของกลุ่มตัวอย่างที่มีต่อคุณภาพเว็บไซต์ประชาสัมพันธ์โรงเรียนพลังราษฎร์พิทยาสรรพ์ สถิติที่ใช้ในการ วจิ ยั คร้ังนี้ ได้แก่ คา่ เฉลี่ย และค่าส่วนเบยี่ งเบนมาตรฐาน (S.D.) ผลการจัดทำโครงการเว็บไซต์ประชาสัมพันธ์โรงเรียนพลังราษฎร์พิทยาสรรพ์ พบว่าสามารถ เผยแพร่ข้อมูลข่าวสารและกิจกรรมต่างๆของทางโรงเรียน มีการจัดเก็บฐานข้อมูลผู้เรียน มีระบบเพิม่ ความสะดวกในการให้บรกิ ารต่อผ้ใู ชง้ านอย่างมปี ระสทิ ธิภาพ ผลการวิจัยพบว่า ความพึงพอใจของกลุ่มตัวอย่างที่มีต่อเว็บไซต์ประชามสมั พันธ์โรงเรียนพลัง ราษฎร์พิทยาสรรพ์ ตำบลบ้านเป้า อำเภอหนองสูง จังหวัดมุกดาหาร มีระดับความพึงพอใจอยู่ในระดับดี มาก (������̅= 4.55 , S.D.= 0.48)



สารบัญ ก เรอ่ื ง หน้า ใบรับรองโครงการ ก ใบแห่งลขิ สิทธิ์ ข บทคดั ย่อภาษาไทย ค กิตตกิ รรมประกาศ ง สารบัญ จ สารบัญ (ต่อ) ฉ สารบัญตาราง ช สารบญั รปู ซ สารบัญรปู (ต่อ) ฌ บทท่ี 1 บทนำ 1 1 1.1 ความเปน็ มา และความสำคัญของปัญหา 1 1.2 วตั ถุประสงคข์ องโครงการ 2 1.3 เป้าหมายและขอบเขตของโครงการ 3 1.4 แผนงานและระยะเวลาดำเนินการ 4 1.5 ประโยชน์ทค่ี าดว่าจะได้รบั 4 1.6 นิยามศัพท์เฉพาะ 6 บทท่ี 2 ทฤษฎีที่เก่ียวข้อง 6 2.1 ความรเู้ บอื้ งตน้ เกย่ี วกบั เวบ็ ไซต์ 8 2.2 การออกแบบ และพฒั นาเว็บไซต์ 21 2.3 เครอ่ื งมือในการพฒั นาเว็บไซต์ 23 2.4 เคร่อื งมือที่ใช้ในการพฒั นาระบบ 31 2.5 การเผยแพรเ่ วบ็ ไซตข์ น้ึ สู่ระบบอินเทอร์เนต็ 32 2.6 ข้อมูลพ้ืนฐานของโรงเรียนพลงั ราษฎรพ์ ิทยาสรรพ์ 35 2.7 งานวจิ ัยทีเ่ กีย่ วข้อง 37 บทท่ี 3 วิธดี ำเนินการจดั ทำโครงการ 37 3.1 ประชากร และกลุ่มตวั อยา่ ง 38 3.2 เครือ่ งมือท่ใี ช่ในการพฒั นาระบบ/วิจัย 40 3.3 แผนการดำเนินงาน

สารบัญ (ต่อ) ข เรอ่ื ง หน้า 3.4 การศกึ ษาระบบงานเดิม 41 3.5 การวิเคราะหค์ วามตอ้ งการของผู้ใช้ 41 3.6 การวิเคราะหแ์ ละออกแบบ 42 46 บทท่ี 4 ผลการพฒั นาระบบ/ผลการวิเคราะหข์ อ้ มลู 46 4.1 ผลการพัฒนาระบบ 57 4.2 ผลการวิเคราะหข์ ้อมูล 62 62 บทที่ 5 สรปุ ผลการศกึ ษา อภิปรายผล และข้อเสนอแนะ 62 5.1 สรปุ ผลการศึกษา 63 5.2 อภิปรายผล 65 5.3 ข้อเสนอแนะ 66 67 บรรณานกุ รม 80 ภาคผนวก 82 85 ภาคผนวก ก แบบเสนอเคา้ โครงโครงการ 89 ภาคผนวก ข รายงานการพบครูท่ปี รกึ ษาโครงการ 92 ภาคผนวก ค แบบประเมินความพึงพอใจ 104 ภาคผนวก ง แบบประเมินความพึงพอใจออนไลน์ 108 ภาคผนวก จ เอกสารเผยแพร่/สง่ มอบ 111 ภาคผนวก ฉ คูม่ อื การใช้งานเวบ็ ไซต์ ภาคผนวก ช ตารางแสดงผลการวิเคราะห์ข้อมลู ด้วยโปรแกรมทางสถิติ ภาคผนวก ซ ภาพกิจกรรมการดำเนนิ โครงการ ภาคผนวก ฌ ประวตั ิผจู้ ัดทำ

ค สารบญั ตาราง ตารางท่ี หน้า ตารางท่ี 1.1 ตารางแสดงแผนการดำเนินงาน 3 ตารางท่ี 1.2 ตารางงบประมาณ 4 ตารางท่ี 2.1 ความร้สู กึ เก่ียวกับสี 12 ตารางท่ี 2.2 แสดงขั้นสที ี่ 1 แมส่ ี 13 ตารางท่ี 2.3 แสดงขน้ั สที ี่ 2 การผสมสี 13 ตารางที่ 2.4 ตารางอธบิ ายเคร่ืองมือ Tool ต่าง ๆ 19 ตารางท่ี 3.1 ตารางขนาดของกลมุ่ ตวั อย่างของ เคอร์ซี่ มอร์แกน 38 ตารางที่ 3.2 ตารางแสดงระยะเวลาดำเนินงาน 40 ตารางที่ 4.1 ตารางการทำงานหน้าแรก 47 ตารางท่ี 4.2 ตารางทดสอบคณะผูบ้ รหิ าร 48 ตารางท่ี 4.3 ตารางทดสอบหน้าขา่ วประชาสัมพนั ธ์ 48 ตารางท่ี 4.4 ตารางทดสอบหน้าติดต่อเรา 49 ตารางท่ี 4.5 ตารางทดสอบการทำงานหน้าวิสัยทศั น์ 50 ตารางท่ี 4.6 ตารางทดสอบการทำงานหน้าพันธกิจ 50 ตารางที่ 4.7 ตารางทดสอบการทำงานหนา้ ประวัติโรงเรียน 51 ตารางที่ 4.8 ตารางทดสอบการทำงานหน้าเพลงประจำโรงเรยี น 52 ตารางท่ี 4.9 ตารางทดสอบการทำงานหนา้ สัญลักษณ์ประจำโรงเรยี น 52 ตารางท่ี 4.10 ตารางทดสอบการทำงานหน้าทีต่ ัง้ โรงเรียน 53 ตารางท่ี 4.11 ตารางทดสอบการทำงานหน้าคณะกรรมการสภานักเรียน 54 ตารางท่ี 4.12 ตารางทดสอบการทำงานหน้ากลุม่ สาระการเรียนรู้ 54 ตารางที่ 4.13 ตารางทดสอบการทำงานหน้าภาพกจิ กรรม 55 ตารางที่ 4.14 ตารางทดสอบการทำงานหน้าการสมัครเรียนออนไลน์ 56 ตารางที่ 4.15 ตารางทดสอบการทำงานหน้าการเชค็ ชอ่ื มาเรยี นออนไลน์ 56 ตารางท่ี 4.16 ตารางค่าร้อยละของข้อมูลทวั่ ไปของผ้ตู อบแบบประเมนิ 57 ตารางที่ 4.17 ตารางแสดงค่าคะแนนเฉล่ียและสว่ นเบยี่ งเบนมาตรฐาน ดา้ นเนื้อหา 59 ตารางที่ 4.18 ตารางแสดงค่าคะแนนเฉล่ียและสว่ นเบี่ยงเบนมาตรฐาน ดา้ นการออกแบบ 60 และการจดั รูปแบบเว็บไซต์ 61 ตารางที่ 4.19 ตารางแสดงค่าคะแนนเฉล่ยี และส่วนเบีย่ งเบนมาตรฐาน ดา้ นการนำไปใช้

ง สารบญั รปู รปู ที่ หน้า รูปที่ 2.1 แสดงเข้าไปยงั โฟลเดอร์ของ Photoshop ตามภาพ ดบั เบ้ิลคลกิ Set-up 14 รปู ท่ี 2.2 แสดงเมอ่ื ปรากฏหนา้ ต่างตามภาพด้านล่างคลิกปุ่ม Try 14 รปู ที่ 2.3 แสดงโปรแกรมตรวจสอบเสรจ็ แล้วจะเข้าสู่หนา้ จอ เลือก Try 14 รูปท่ี 2.4 แสดงการกรอก Serial Number แล้วคลิกทป่ี มุ่ คลิก Accept 15 รูปที่ 2.5 แสดงการเลือกการตดิ ต้ังของโปรแกรม ให้เลอื ก Installs 15 รปู ท่ี 2.6 แสดงหนา้ การโหลดของโปรแกรม 16 รปู ที่ 2.7 แสดงการเสรจ็ สน้ิ การติดตั้งโปรแกรม Adobe Photoshop CS6 16 รูปท่ี 2.8 แสดงหนา้ ตา่ งโปรแกรม 17 รูปท่ี 2.9 แสดงหน้าตา่ งของโปรแกรมสรา้ งเว็บไซต์สำเร็จรปู Wix 21 รปู ท่ี 2.10 แสดงหนา้ ต่างสำหรบั ลงทะเบียนเขา้ ใช้งาน Wix 21 รปู ที่ 2.11 แสดงหน้าตา่ งเริ่มต้นการสรา้ งเว็บไซต์ Wix 22 รปู ที่ 2.12 แสดงเลือก Templates ให้กบั เวบ็ ไซต์ Wix 22 รูปท่ี 2.13 แสดงหนา้ หลักการทำงานของโปรแกรมสร้างเว็บไซต์สำเรจ็ รูป Wix.com 23 รปู ที่ 2.14 แสดงเลอื กเมนู Drive เลือก \"เพมิ่ เติม\" > \"Google ฟอร์ม 24 รปู ที่ 2.15 แสดงธมี ของ ฟอร์ม ทเี่ ราต้องการ 24 รูปท่ี 2.16 แสดงสว่ นเขยี นคำถามในแบบฟอรม์ 25 รูปที่ 2.17 แสดงกำหนดยืนยนั การบนั ทกึ ของข้อมูลหรอื การอนญุ าตให้สง่ ลิงคต์ อบกลับ 25 รูปท่ี 2.18 แสดงสว่ นของการสร้างคำถาม 26 รปู ที่ 2.19 แสดงการสรา้ งคำถามในเเตล่ ะข้อ 26 รูปท่ี 2.20 แสดงสร้างคำถามต่อไปกใ็ หเ้ ลือก เพิ่มรายการ 27 รูปที่ 2.21 แสดงแบบนท้ี เ่ี ราสร้างขึน้ มา 27 รปู ที่ 2.22 แสดงการแก้ไขแบบความพึงพอใจ 28 รปู ท่ี 2.23 แสดงส่วนของ ข้อความยนื ยนั คือส่วนท่ีเราเขียนข้อความคำเชิญ 28 รูปท่ี 2.24 แสดงเอาลิงคน์ ีไ้ ปใหค้ นใน องคก์ ร 29 รปู ที่ 2.25 แสดงเปลยี่ นแปลงทางการตอบกลบั 29 รปู ท่ี 2.26 แสดงเปลย่ี นแปลงทางการตอบกลบั 30 รูปท่ี 2.27 แสดงไฟล์ที่จัดเก็บข้อมูลตอบกลับ 30 รูปที่ 2.28 แสดงตราสญั ลกั ษณ์โรงเรยี น 34

สารบัญรูป (ต่อ) จ รูปท่ี หน้า รูปที่ 2.29 แสดงเพลงมารช์ ประจำโรงเรยี นพลงั ราษฎรพ์ ิทยาสรรพ์ 35 รูปท่ี 3.1 แสดงรปู ภาพแผนภมู กิ ้างปลาการศกึ ษาระบบงานเดิม 41 รปู ที่ 3.2 แสดงแสดงรปู E-R Diagram โครงสร้างฐานขอ้ มลู ของเว็บไซต์ 42 รูปที่ 3.3 แสดงแผนผังโครงสร้างการทำงานของเว็บไซตป์ ระชาสัมพันธโ์ รงเรียน 43 พลงั ราษฎรพ์ ิทยาสรรพ์ 43 รปู ที่ 3.4 แสดงรปู E-R Diagram Model สมคั รเรียนออนไลน์ 44 รปู ที่ 3.5 แสดง User Interface Design 44 รูปที่ 3.6 แสดงหนา้ หลักของเว็บไซต์ 45 รูปที่ 3.7 แสดงระบบสมคั รเรยี นออนไลน์ 45 รูปที่ 3.8 แสดงหนา้ ระบบเช็คชอื่ ออนไลน์ 47 รูปที่ 4.1 แสดงการทดสอบหนา้ แรก 47 รูปท่ี 4.2 แสดงการทดสอบหน้าคณะผู้บริหาร 48 รปู ท่ี 4.3 แสดงการทดสอบหน้าข่าวประชาสมั พันธ์ 49 รปู ท่ี 4.4 แสดงการทดสอบหนา้ ติดต่อเรา 49 รูปท่ี 4.5 แสดงการทดสอบหน้าวสิ ัยทศั น์ 50 รูปที่ 4.6 แสดงการทดสอบหน้าพนั ธกิจ 51 รปู ที่ 4.7 แสดงการทดสอบหนา้ ประวตั โิ รงเรียน 51 รูปที่ 4.8 แสดงการทดสอบหน้าเพลงประจำโรงเรยี น 52 รปู ที่ 4.9 แสดงการทดสอบหน้าสัญลกั ษณ์ประจำโรงเรียน 53 รปู ที่ 4.10 แสดงการทดสอบหน้าท่ตี ง้ั โรงเรยี น 53 รปู ท่ี 4.11 แสดงการทดสอบหนา้ คณะกรรมการสภานักเรยี น 54 รปู ท่ี 4.12 แสดงการทดสอบหน้ากลุม่ สาระการเรียนรู้ 55 รปู ท่ี 4.13 แสดงการทดสอบหนา้ ภาพกจิ กรรม 55 รูปท่ี 4.14 แสดงการทดสอบหนา้ การสมคั รเรยี นออนไลน์ 56 รูปท่ี 4.15 แสดงการทดสอบหน้าการเช็คชอื่ มาเรียนออนไลน์

บทที่ 1 บทนำ 1.1 ความเปน็ มาและความสำคญั ของปญั หา ปัจจุบันความก้าวหน้าทางเทคโนโลยีและสารสนเทศ ทำให้มนุษย์หันมาให้ความสำคัญ ต่อการติดต่อสื่อสารผ่านระบบเครือข่ายอินเตอร์เน็ต ทำให้มนุษย์สามารถเชื่อมโยงข้อมูลถึงกันได้ ทั่วโลกในช่วงระยะเวลาอันรวดเร็ว ก่อให้เกิดการนำเทคโนโลยีมาใช้ในวงการธุรกิจต่าง ๆ ส่งผลให้ ผดู้ ำเนนิ ธุรกจิ สามารถลดตน้ ทุนลดเวลาในการตดิ ต่อส่ือสาร ส่งเสริมใหเ้ กดิ ความเข้าใจตรงกันเกิดการ ใช้ทรัพยากรร่วมกัน ซึ่งเหมาะสมกับสภาพขององค์กรในปัจจุบันที่ต้องการ การแข่งขันที่ค่อนข้างสูง สำหรับหน่วยงานภาครัฐ ได้นำเอาเทคโนโลยีสารสนเทศสมัยใหม่ มาช่วยในการส่งเสริมกระบวนการ ทำงานของหน่วยงานให้มีประสิทธิภาพมากขึ้นเช่น ใช้ในการเผยแพร่ประชาสัมพันธ์ข้อมูลข่าวสาร การติดตอ่ ส่อื สารผ่านเวบ็ ไซต์ของหนว่ ยงาน โรงเรียนพลังราษฎร์พิทยาสรรพ์ ตั้งอยู่ที่ 149 หมูที่ 2 ตำบลบ้านเป้า อำเภอหนองสูง จังหวัดมุกดาหาร สังกัดสำนักงานเขตพื้นที่การศึกษามัธยมศึกษา เขต 22 เป็นโรงเรียนและสถานที่ ที่ได้ให้ความรู้กับเด็กนักเรียน ซึ่งปัจจุบันยังไม่มีเว็บไซต์ของโรงเรียนและทำให้ในปัจจุบัน ก็ยังไม่มี ช่องทางในการประชาสมั พันธ์ข้อมูลของโรงเรียนและขา่ วสารตา่ งๆ ดังนนั้ คณะผ้จู ัดทำโครงการได้เล็งเห็นความสำคัญในการใชเ้ ทคโนโลยสี ารสนเทศมาช่วย ในการเผยแพร่ข้อมูลข่าวสารของโรงเรยี นพลังราษฎร์พิทยาสรรพ์ จึงได้ดำเนินโครงการสร้างเว็บไซต์ ประชาสัมพันธ์โรงเรียนพลังราษฎร์พิทยาสรรพ์ เพื่อให้เกิดประโยชน์ด้านการศึกษาและสร้างความ สะดวกสบายในการประชาสัมพันธ์ข้อมูล กิจกรรมและข่าวสารต่างๆของทางโรงเรียน พลังราษฎร์ พิทยาสรรพ์ ให้แก่นักเรียนและผู้ปกครองได้รับรู้เกี่ยวกับข้อมูลข่าวสารต่างๆ ของทางโรงเรียน พลังราษฎรพ์ ิทยาสรรพ์ ผา่ นทางเครอื ขา่ ยอินเทอรเ์ นต็ 1.2 วตั ถุประสงคข์ องโครงการ 1.2.1 เพอ่ื สร้างเว็บไซต์ประชาสมั พันธ์ โรงเรยี นพลังราษฎร์พทิ ยาสรรพ์ 1.2.2 เพ่อื เผยแพร่ประชาสัมพันธ์ข้อมลู ขา่ วสารของโรงเรยี นพลังราษฎร์พิทยาสรรพ์ 1.2.3 เพือ่ ศึกษาความพึงพอใจของผใู้ ชบ้ ริการเวบ็ ไซตโ์ รงเรียนพลังราษฎรพ์ ิทยาสรรพ์

2 1.3 เป้าหมายและขอบเขตของโครงการ 1.3.1 เปา้ หมายของโครงการ 1.3.1.1 เปา้ หมายเชิงปริมาณ 1) เวบ็ ไซต์ประชาสมั พนั ธ์ข้อมลู ข่าวสารกจิ กรรมโรงเรยี นพลงั ราษฎร์ พทิ ยาสรรพ์ จำนวน 1 เว็บไซต์ 2) คู่มือการใช้งาน Admin ของเว็บไซต์ประชาสัมพันธ์ โรงเรียน พลังราษฎร์พทิ ยาสรรพ์ จำนวน 1 เล่ม 3) รายงานวิจัยศึกษาความพึงพอใจของผู้ใช้บริการเว็บไซต์ ประชาสมั พันธ์ โรงเรยี นพลังราษฎรพ์ ิทยาสรรพ์ จำนวน 1 เล่ม 1.3.1.2 เป้าหมายเชิงคณุ ภาพ 1) เพอ่ื เป็นสื่อกลางในการเผยแพรข่ ้อมูลข่าวสารและกจิ กรรมผา่ นระบบ เครือข่ายอินเตอรเ์ นต็ 2) เพอื่ จะได้ประชาสัมพนั ธ์ข้อมลู ขา่ วสารให้บุคคลท่ีเกี่ยวข้องได้มากขึน้ 3) ผ้เู ข้าใชง้ านเวบ็ ไซต์โรงเรยี นพลังราษฎรพ์ ิทยาสรรพ์ มีความพึงพอใจ ในการเขา้ ใชบ้ รกิ ารเว็บไซต์ อยู่ในระดบั มาก 1.3.2 ขอบเขตของโครงการ 1.3.2.1 สว่ นระบบ Admin สามารถจดั การได้ดงั นี้ 1) เข้าสู่ระบบ/ออกจากระบบ 2) เพม่ิ ขอ้ มลู ข่าวสาร/แก้ไขข้อมลู 1.3.2.2 หน้าเวบ็ ไซต์ประกอบดว้ ยหัวข้อดงั ต่อไปน้ี 1) หนา้ แรก 2) คณะผ้บู ริหาร 3) ขา่ วประชาสมั พนั ธ์ 4) ติดตอ่ เรา 5) โครงสรา้ งการบริหาร 6) คณะกรรมการสถานศกึ ษา 7) วิสยั ทัศน/์ ปรชั ญา 8) พันธกจิ /เป้าหมาย 9) ประวัตขิ องโรงเรยี น 10) เพลงประจำโรงเรยี น 11) สัญลกั ษณ์ประจำโรงเรยี น

3 12) ทตี่ ง้ั โรงเรียน 13) คณะกรรมการสภานกั เรียน 14) กลุม่ สาระการเรยี นรู้ 15) มมุ กจิ กรรม 16) สมัครเรยี นออนไลน์ 17) สถติ ิผูเ้ ยยี่ มชม/เวลา 18) Admin 1.4 แผนงานและระยะเวลาดำเนนิ การ เวลาเร่ิมตน้ การทำงานในแต่ละวนั โดยเฉลี่ย 1 วนั ทำงาน 4 ช่ัวโมง รวมทั้งส้ิน ในการศึกษา และการพฒั นาเวบ็ ไซต์ใชเ้ วลาโดยประมาณ 4 เดือน (16 พฤศจิกายน 2563 ถงึ 13 มีนาคม 2564) ซง่ึ สามารถแสดงรายละเอียดตารางแผนการดำเนนิ งาน ดังต่อไปนี้ 1.5 แผนการดำเนนิ งาน ตารางท่ี 1.1 ตารางแผนการดำเนินงาน ระยะเวลาดำเนินงาน (สัปดาห์ที่) หมาย แผนการดำเนินงาน พ.ศ.2563 พ.ศ.2564 เหตุ พ.ย. ธ.ค. ม.ค. ก.พ. ม.ี ค. ขน้ั เตรียมการ 12 3 4 56789 1 1 1 1 1 1 1 1 1 0 1 2 3 4 5 6 7 8 1.เสนอเค้าโครง 2.ศึกษาข้อมลู โครงการ ขั้นดำเนินการ 3. สรา้ งชิน้ งาน 4. ประเมินความ สมบูรณช์ ิน้ งาน ขั้นสรุปและ ประเมินผล 5. สรปุ ผล 6.จัดทำรูปเลม่ 7. นำเสนอ

4 1.6 งบประมาณ ราคาที่สบื ได้ ชอ่ื ร้านคา้ และ ตารางท่ี 1.2 ตารางแสดงงบประมาณ จำนวน หนว่ ยละ รวม หมายเลขโทรศพั ท์ ที่ รายการ (บาท) (บาท) (ถา้ ม)ี 1 โดเมนเนม (Domain Name) 1 ชือ่ 559 559 HOSTINGER,UAB 2 เข้ารูปเล่ม 1 เลม่ 350 350 เอ๋ ก็อปป้ี รวมทัง้ ส้ิน 909 1.7 ประโยชนท์ ีค่ าดว่าจะไดร้ ับ 1.7.1 ไดเ้ วบ็ ไซต์ประชาสัมพนั ธข์ องโรงเรียนพลังราษฎร์พิทยาสรรพ์ 1.7.2 ได้เผยแพร่ประชาสัมพันธข์ ้อมูลขา่ วสารของโรงเรียนพลังราษฎร์พทิ ยาสรรพ์ 1.7.3 ได้ระดับความพึงพอใจของผู้ใช้บริการเว็บไซต์ประชาสัมพันธ์ข้อมูลข่าวสารของ โรงเรียนพลังราษฎร์พทิ ยาสรรพ์ ระดับมาก 1.8 นิยามศัพทเ์ ฉพาะ 1.8.1 เวบ็ ไซต์ (Website) หมายถงึ หนา้ เว็บเพจทจ่ี ดั ทำขึ้น เพ่ือนำเสนอขอ้ มลู ต่างๆ ผ่าน ทางคอมพิวเตอร์และอินเทอร์เน็ต โดยจะมีหน้าเว็บเพจหลายๆ หน้าที่เชื่อมโยงเข้ากับไฮเปอร์ลิ้งค์ เพือ่ ให้สามารถเปดิ ไปยงั หน้าเพจตา่ งๆ ไดอ้ ย่างง่ายดายและถูกจดั เก็บไว้ใน www. (เวลิ ด์ไวด์เวบ็ ) โดย เว็บไซต์ส่วนใหญ่นั้นก็มีทั้งเว็บไซต์ที่เปิดให้เข้าชมได้ฟรี และเว็บไซต์ที่ต้องสมัครสมาชิกและ เสียค่าบริการ จึงจะเข้าใช้งานเว็บได้ ซึ่งข้อมูลในเว็บก็จะมีหลากหลายแบบ ขึ้นอยู่กับความต้องการ นำเสนอของเจ้าของเว็บไซต์ การเรียกดูเว็บไซต์จะเรียกดูผ่านทางซอฟต์แวร์ ในลักษณะของ เบราวเ์ ซอร์ 1.8.2 Photoshop คือ เป็นโปรแกรมในตระกูล Adobe ที่ใช้สำหรับตกแต่งภาพถ่าย และภาพกราฟฟิก ได้อย่างมีประสิทธิ์ภาพ ไม่ว่าจะเป็นงานด้านสิ่งพิมพ์ นิตยสาร และงานด้าน มัลติมีเดีย อีกทั้งยังสามารถ retouching ตกแต่งภาพและสร้างภาพ ซึ่งกำลังเป็นที่นิยมสูงมาก ในขณะน้ี 1.8.3 โดเมนเนม (อังกฤษ: Domain Name) หมายถึง ชื่อที่ใช้ระบุลงในคอมพิวเตอร์ (เช่นเป็นส่วนหนึ่งของที่อยู่เว็บไซต์ หรืออีเมล์แอดเดรส) เพื่อไปค้นหาในระบบโดเมนเนมซีสเทม เพื่อระบุถึงเลขที่อยู่ไอพี ของชื่อนั้น ๆ เป็นชื่อที่ผู้จดทะเบียนระบุเว็บไซต์ของตน บางครั้งอาจใช้ \"ที่อยู่เว็บไซต์\" แทนได้ ชื่อโดเมนเป็นชื่อที่ตั้งขึ้นเพื่อให้ง่ายต่อการจดจำ เนื่องจากไอพีแอดเดรสน้ัน

5 จดจำได้ยากกว่า และเมื่อการเปลี่ยนแปลงไอพีแอดเดรส ผู้ใช้ไม่จำเป็นต้องรับรู้หรือจดจำ ไอพแี อดเดรสใหม่ ยังคงใชโ้ ดเมนเนมเดิมได้ตอ่ ไป 1.8.4 โฮมเพจ (Home Page) คือเว็บเพจหนึ่งหน้าที่มักเป็นหน้าแรก และหน้าหลัก เมื่อเข้าชมโดยมักแสดงถึงภาพรวมของเนื้อหาทั้งหมดว่ามีอะไรบ้าง และทำหน้าที่เชื่อมโยงไปยัง เว็บเพจอ่ืน ๆ ทเี่ ก่ยี วขอ้ งในเว็บไซต์ 1.8.5 เว็บเซิร์ฟเวอร์ (Web Server) คือเครื่องคอมพิวเตอร์ที่เก็บข้อมูลของเว็บไซต์ และทำหน้าที่ส่งข้อมูลกลับไปยังเว็บเบราว์เซอร์ของเครื่องรับบริการ (Client) เมื่อได้รับการร้องขอ ข้อมูลทัง้ หมดท่ใี ชง้ านผ่านเวิลด์ไวดเ์ วบ็ จะดึงมาจากเว็บเซิร์ฟเวอร์ 1.8.6 เว็บโฮสติ้ง (Web Hosting) คือพื้นที่บนเครือข่ายที่ว่าง และเปิดให้บริการสำหรับ เก็บข้อมลู ทีแ่ สดงบนเว็บไซต์ โดยจะมีทงั้ ในรูปแบบฟรีและรูปแบบท่ีต้องเสียค่าบริการ โดยจะมีข้อดี ขอ้ เสียแตกต่างกันไป 1.8.7 PHP MySQL หมายถึงโปรแกรมระบบจัดการฐานข้อมูล มีหน้าที่เก็บข้อมูลอย่าง เป็นระบบ รองรับคำสั่งเป็นเครื่องมือสำหรับเก็บข้อมูล ที่ต้องใช้ร่วมกับเครื่องมือหรือโปรแกรมอ่ืน อยา่ งบรู ณาการ เพอื่ ใหไ้ ดร้ ะบบงานท่ีรองรับ ความตอ้ งการของผู้ใช้

6 บทท่ี 2 ทฤษฎีท่ีเก่ยี วข้อง การสร้างเว็บไซต์ประชาสัมพันธ์โรงเรียนพลงั ราษฎร์พิทยาสรรพ์ ตำบลบ้านเป้า อำเภอหนอง สูง จังหวัดมุกดาหาร คณะผู้จัดทำโครงการได้ทำการศึกษาหลักการทฤษฎี และเทคโนโลยีที่เกี่ยวข้องที่ สามารถนำมาประยกุ ตใ์ ช้งานโดยแบ่งออกเปน็ หัวข้อต่าง ๆ ดงั ต่อไปนี้ 2.1 ความรเู้ บ้ืองตน้ เก่ยี วกับเวบ็ ไซต์ 2.2 หลกั การออกแบบและพัฒนาเว็บไซต์ 2.3 เครื่องมอื ในการพฒั นาเวบ็ ไซต์ 2.4 เครือ่ งมอื ทใ่ี ช้ในการพัฒนาระบบ 2.5 การเผยแพร่เวบ็ ไซต์ข้ึนสรู่ ะบบอนิ เทอร์เน็ต 2.6 ขอ้ มูลพน้ื ฐานของโรงเรียนพลงั ราษฎร์พทิ ยาสรรพ์ 2.7 งานวิจยั ท่เี ก่ียวขอ้ ง 2.1 ความรู้เบือ้ งต้นเกี่ยวกับเว็บไซต์ 2.1.1 ความหมายของเวบ็ ไซต์ เว็บไซต์ (อังกฤษ: Website, Web Site หรือ Site) หมายถึง หน้าเว็บเพจหลายหน้า ซ่ึงเชือ่ มโยงกนั ผา่ นทางไฮเปอรล์ ิงก์ จัดทำขน้ึ เพื่อนำเสนอข้อมลู ผ่านคอมพวิ เตอร์ ถูกจัดเก็บไว้หน้าแรก ของเว็บไซต์ที่เก็บไว้ที่ชื่อหลักจะเรียกว่า โฮมเพจ เว็บไซต์โดยทั่วไปจะให้บริการต่อผู้ใช้ฟรี แตใ่ นขณะเดียวกนั บางเวบ็ ไซต์จำเป็นต้องมกี ารสมคั รสมาชิกและเสียค่าบรกิ ารเพื่อท่จี ะดูข้อมลู ในเว็บไซต์ นั้น ซึ่งได้แก่ข้อมูลทางวิชาการ ข้อมูลตลาดหลักทรัพย์ หรือข้อมูลสื่อต่าง ๆ ผู้ทำเว็บไซต์มีหลากหลาย ระดับ ตั้งแต่สร้างเว็บไซต์ส่วนตัว จนถึงระดับเว็บไซต์สำหรับธุรกิจหรือองค์กรต่าง ๆ การเรียกดูเว็บไซต์ โดยทั่วไปนิยมเรียกดูผ่านซอฟต์แวร์ในลักษณะของเว็บเบราว์เซอร์ เว็บไซต์แห่งแรกของโลกถูกสร้างขึ้น เมอื่ 30 เมษายน พ.ศ. 2536 โดยวิศวกรของเว็บไซต์ประกอบดว้ ย 3 องคป์ ระกอบ

7 2.1.1.1 เว็บไซต์ (Web Site) เว็บไซต์ (Web Site) หน้าเว็บเพจที่จัดทำขึ้น เพื่อนำเสนอข้อมูลต่างๆ ผ่านทางคอมพิวเตอร์และอินเทอร์เน็ต โดยจะมีหน้าเว็บเพจหลายๆ หน้าที่เชื่อมโยงเข้ากับไฮเปอร์ลิงก์ เพื่อให้สามารถเปิดไปยังหน้าเพจต่างๆ ได้อย่างง่ายดายและถูกจัดเก็บไว้ใน www. (เวิลด์ไวด์เว็บ) โดยเว็บไซต์ส่วนใหญ่นั้นก็มีทั้งเว็บไซต์ที่เปิดให้เข้าชมได้ฟรี และเว็บไซต์ที่ต้องสมัครสมาชิกและ เสียค่าบริการ จึงจะเข้าใช้งานเว็บได้ ซึ่งข้อมูลในเว็บก็จะมีหลากหลายแบบ ขึ้นอยู่กับความต้องการ นำเสนอของเจา้ ของเวบ็ ไซต์ การเรียกดูเวบ็ ไซต์จะเรยี กดผู ่านทางซอฟต์แวร์ ในลกั ษณะของเบราวเ์ ซอร์ 2.1.1.2 เวบ็ เพจ (Web Page) เว็บเพจ (Web Page) ก็คือหน้าเอกสารต่างๆ ที่อยู่ในรูปของ HTML โดย จะนำเสนอขอ้ มูลหรอื เร่อื งราวต่างๆ เป็นหน้าๆ ไป และใช้การเชอื่ มโยงเพ่ือให้สามารถคลกิ ไปหน้าเว็บเพจ แตล่ ะหนา้ ไดง้ า่ ยขึน้ 2.1.1.3 อนิ เตอรเ์ นต็ อินเตอร์เน็ต (Internet) เป็นตัวกลางในการเชื่อมต่อให้ผู้คนสามารถท่อง เว็บไซต์ต่างๆ ได้อย่างง่ายดาย และช่วยให้กลุ่มองค์กร ธุรกิจหรือบริษัทสามารถนำเสนอข้อมูลของตน ลงบนอินเทอร์เน็ต ผ่านทางเว็บไซต์ เป็นการให้ความรู้และแลกเปลี่ยนข้อมูลข่าวสารต่อกันได้ อยา่ งมปี ระสิทธภิ าพ 2.1.2 ประโยชนข์ องเวบ็ ไซต์ 2.1.2.1 ส่งเสริมศักยภาพทางด้านการเผยแพร่ข้อมูล ข่าวสาร การมีเว็บไซต์สามารถ ช่วยในการเพิ่มเสริมศักยภาพของศูนย์พัฒนาโรงเรียน ของคุณให้แข็งแกร่งยิ่งขึ้นได้ เนื่องจากเป็นโลก ท่ีเปิดกวา้ งทางด้านขอ้ มลู ข่าวสาร ทำใหเ้ ปน็ ทร่ี ู้จักมากยง่ิ ขึน้ ไปได้ 2.1.2.2 การเข้าถึงกลุ่มผู้ปกครองที่ง่ายมากยิ่งขึ้น สามารถที่จะมีเว็บไซต์ เป็นของตนเองและสามารถที่จะทำให้กลุ่มผู้ปกครองของคุณค้นเว็บของคุณเจอผ่าน Search Engine โดยกลุ่มคำที่เจาะจงกับเว็บไซต์ของคุณได้เป็นการเพิ่มกลุ่มผู้ปกครองที่กำลังสนใจเว็บไซต์ของคุณให้ตรง เป้าหมายมากยิง่ ขน้ึ ตลอด 24 ช่วั โมง แมว้ ่าจะเป็นวนั หยุดกต็ าม 2.1.2.3 ช่วยลดค่าใช้จ่ายในการประชาสมั พันธ์จะดหี รือไมถ่ า้ คุณไมต่ อ้ งเสียค่าโฆษณา ทแ่ี พงผา่ นสอ่ื ต่าง ๆ เชน่ โทรทศั น์ วทิ ยุ หนงั สือพมิ พ์ 2.1.2.4 ช่วยสร้างภาพลักษณ์ที่ดีให้กับองค์กร สมัยนี้สำนักงานที่ไม่มีเว็บไซต์ เป็นของตนเองเปรียบเสมือนสำนักงานที่ดีต่อโลกภายนอก การมีเว็บไซต์สำนักงานสามารถแสดงให้กลุ่ม

8 ผู้เข้าชมของคุณเข้าใจถึงภาพลักษณ์ที่ดีของโรงเรียนได้ และเว็บไซต์ยังช่วยในการสร้างความรู้สึก ประทบั ใจกับผเู้ ย่ียมชมได้อีกด้วย 2.2 หลักการออกแบบและพฒั นาเว็บไซต์ 2.2.1 หลักการออกแบบเวบ็ ไซต์ การสร้างเว็บไซต์สิ่งสำคัญอยู่ที่การ ออกแบบเว็บ เพราะเว็บไซต์ที่มีรูปแบบสวยงาม จะสามารถดึงดูดความสนใจจากผู้คนได้ดีกว่า ทำให้ผู้คนเกิดความรู้สึกประทับใจ อยากกลับมาใช้งาน เวบ็ ไซต์อีกครงั้ ในอนาคต ดงั น้นั เรม่ิ แรกก่อนทำเว็บไซต์ จึงจำเป็นตอ้ งทำความเข้าใจ กบั หลกั การออกแบบ และรปู แบบโครงสร้างของเวบ็ กอ่ น 2.2.1.1 องค์ประกอบการออกแบบเว็บไซต์ 1) ความเรียบง่าย เข้าใจงา่ ย การออกแบบเวบ็ ไซต์ท่ดี ี จะตอ้ งเน้นที่ความเรยี บง่ายเป็นหลกั โดยเลอื ก นำเสนอเฉพาะสิ่งที่ต้องการนำเสนอจริงๆ ในรูปแบบที่หลากหลาย โดยอาจจะเป็นสีสัน กราฟิก ภาพเคลื่อนไหวหรือตัวอักษร ที่สำคัญจะต้องมีการนำเสนอที่ไม่ดูรกหน้าเว็บจนเกินไป เพื่อไม่ให้เกิด ความรู้สึกรกสายตา หรือสร้างความเบื่อหน่าย น่ารำคาญให้กับผู้ที่เข้าชมเว็บไซต์ มีตัวอย่างเว็บไซต์ที่มี การออกแบบโดยเน้นความเรียบงา่ ยไดด้ ี คอื Apple, Nokia และ Microsoft เป็นตน้ 2) ความสม่ำเสมอ ไม่สับสนควรออกแบบเว็บไซต์ด้วยความสม่ำเสมอ คือจะต้องมีรูปแบบ กราฟิก โทนสีและการตกแต่งต่างๆ ให้แต่ละหน้าบนเว็บไซต์มีความคล้ายคลึงกัน และเป็นแนวเดียวกัน ไปตลอดทั้งเว็บไซต์ 3) สรา้ งความโดดเดน่ เปน็ เอกลกั ษณ์ การออกแบบเว็บไซต์เพื่อให้สามารถสื่อถึงจุดประสงค์ในการนำเสนอ เว็บได้ดี จะต้องมีการสร้างความเป็นเอกลักษณ์และจุดเด่นให้กับเว็บไซต์ เพื่อให้สามารถสะท้อน ถึงลักษณะขององค์กรได้มากที่สุด โดยการสร้างเอกลักษณ์ดังกล่าวนั้น อาจใช้ชุดสี รูปภาพ ตัวอักษร หรือกราฟิก นอกจากนี้ก็ต้องขึ้นอยู่กับว่า เป็นเว็บไซต์แบบทางการหรือไม่ เพื่อจะได้ออกแบบได้อย่าง เหมาะสมทส่ี ดุ 4) เนอื้ หาต้องดี ครบถ้วน เนื้อหาเป็นสิ่งที่สำคัญที่สุดของการสร้างเว็บไซต์ เพราะสิ่งที่ทำให้ผู้คน เกิดความสนใจ และหมั่นติดตามเว็บไซต์เหล่านั้นอยู่เสมอ ก็คือเนื้อหาที่มีความสมบูรณ์และน่าสนใจ

9 นอกจากนจ้ี ะต้องมีการปรับปรงุ พฒั นาเน้ือหาบนเวบ็ ให้มีความทันสมยั อยเู่ สมอ รวมถึงข้อมูลต้องมีความ ถูกตอ้ งทส่ี ุด 5) ระบบเนวิเกชน่ั ใช้งา่ ย ระบบเนวิเกชั่น เป็นเสมือนป้ายบอกทางเพื่อให้ผู้ใช้งาน ไม่เกิดความ สับสนในขณะใช้งานเว็บไซต์ ซ่ึงการออกแบบเนวิเกชัน่ ก็จะต้องเนน้ ท่ีความเรยี บงา่ ย ใช้งานสะดวก และมี ความเข้าใจได้ง่าย ที่สำคัญจะต้องมีตำแหน่งการวางท่ีสม่ำเสมอเพื่อให้ดูเป็นแนวทางเดียวกัน ทำให้ ผู้ใช้งานหรือผู้ชมรู้สึกประทับใจ และจดจำเว็บไซต์ได้ง่ายขึ้น ส่วนใครที่มีการนำกราฟิกมาใช้ ในระบบเนวิเกชั่น ก็จะตอ้ งเลือกกราฟกิ ที่สามารถสือ่ ความหมายไดด้ ีเช่นกัน 6) คณุ ภาพของเว็บไซต์ เว็บไซต์ที่ดีจะต้องมีคุณภาพ ทั้งสิ่งที่ปรากฏให้เห็นบนเว็บไซต์ ไม่ว่า จะเป็นกราฟิก ชนิดตัวอักษร รูปภาพหรือสีสนั ที่ใช้ เนื้อหาที่นำมาแสดงผล ซึ่งหากเว็บไซต์มีคณุ ภาพก็จะ สร้างความน่าเชื่อถือ และเป็นจุดเด่นที่ทำให้ผู้คนส่วนใหญ่เกิดความสนใจได้ดี เพราะฉะนั้นห้ามละเลย ในส่วนของคุณภาพเดด็ ขาด 7) ความสะดวกในการเขา้ ใช้งาน เว็บไซต์ควรให้ความสะดวกสบายแก่ผู้ใช้งานได้ดี คือจะต้องมี การแสดงผลได้ในทุกระบบปฏิบัติการ ไม่ว่าจะเป็นเว็บเบราว์เซอร์ คอมพิวเตอร์ โน๊ตบุ๊คหรือบน โทรศพั ทม์ อื ถือ ทีส่ ำคญั จะต้องมคี วามละเอยี ดของการแสดผลและสามารถใชง้ านไดโ้ ดยไมม่ ีปญั หาดว้ ย 2.2.1.2 ขนั้ ตอนในการจดั ทำเว็บไซต์ ขั้นตอนท่ี 1 วางแผนการจดั ทำเว็บไซต์ สำหรับขั้นตอนแรก เราจะต้องเตรียมข้อมูลสำหรับเว็บไซต์เสียก่อน ไม่ว่า จะเป็นชื่อเว็บ, เป้าหมายของเว็บไซต์, ลุ่มผู้ชมเป้าหมาย, เนื้อหาภายในเวบ็ ไซต์ และรายละเอียดของเวบ็ เพื่อให้เห็นมุมมองคร่าวๆ ก่อนค่อยลงมือทำ นอกจากนี้เราก็ควรต้องแบ่งเนื้อหาเป็นหมวดหมู่ต่างๆ ตามลำดับกอ่ นหลัง เพ่อื ให้งา่ ยต่อการจัดทำโครงร่างของเวบ็ ขน้ั ตอนท่ี 2 กำหนดโครงสรา้ งของเว็บ หลังจากการประชุมเพื่อวางแผนการจัดทำเว็บไซต์เรียบร้อยแล้ว ต่อไป ก็เข้าสู่ขั้นตอนของการกำหนดผังของเว็บไซต์ เพื่อให้เราสามารถมองเห็นภาพรวม และองค์ประกอบ ทั้งหมดของเว็บไซต์ หรือที่เรียกว่า Flowchart โดยหน้าแรกของเว็บหรือโฮมเพจ จะต้องใช้ชื่อว่า index ส่วนนามสกุลให้ใส่ตามลักษณะของภาษาที่ใช้ในการสร้างเว็บ ส่วนการตั้งชื่อเว็บเพจแต่ละหน้า

10 ก็ให้กำหนดชื่อเป็นภาษาอังกฤษตามด้วยนามสกุลของภาษาที่เราสร้างเว็บ เช่น index.html, home.html, history.html เปน็ ตน้ ขน้ั ตอนที่ 3 กำหนดการเชอื่ มโยงเวบ็ เพจ ถือเป็นอีกหนึ่งขั้นตอนที่สำคัญเช่นเดียวกัน เพราะการกำหนดการเชื่อม เว็บเพจจะเป็นการเชอ่ื มโยงในแตล่ ะหนา้ เว็บ เพื่อใหผ้ ใู้ ช้งานสามารถคลกิ กลับไปกลบั มาระหวา่ งหน้าต่างๆ ไดโ้ ดยแตล่ ะไฟลก์ จ็ ะมีความสมั พนั ธ์กนั นนั่ เอง ข้นั ตอนที่ 4 การออกแบบเว็บเพจแต่ละหนา้ ในเวบ็ ไซต์ สำหรับการออกแบบเว็บเพจแตล่ ะหนา้ ในเวบ็ ไซตน์ ั้น จะมอี ยูท่ ัง้ หมด 3 ส่วน หลักๆ ดว้ ยกนั ดงั นี้ 1) Page Header คอื ส่วนทอ่ี ยูต่ อนบนสดุ และเปน็ ส่วนที่สำคัญท่ีสุด ของหน้า เพราะเป็นส่วนที่สามารถดึงดูดผู้ชมให้ติดตามเนื้อหาภายในเว็บไซต์ได้ โดยปกติจุดนี้ก็มักจะ ประกอบด้วยโลโก้, ช่อื เวบ็ ไซต์, เมนหู ลกั หรอื ลิงก์ 2) Page Body คอื สว่ นทอี่ ยตู่ อนกลางของหนา้ เวบ็ เพจ โดยจะแสดง เนื้อหาของเว็บไซต์ ไม่ว่าจะเป็นข้อความ, ตารางข้อมูล, ภาพกราฟิก, วิดีโอ และอื่นๆ โดยในส่วนของ เน้ือหานนั้ ควรจะแสดงใจความสำคัญซึง่ เป็นหวั เร่ืองไวบ้ นสุด ข้อมลู ควรมีความกระชับ ใช้ฟอนต์ตัวอักษร ทเี่ ปน็ ระเบยี บและอา่ นง่าย รวมถึงการจัดเลย์เอาท์ดว้ ยเชน่ เดียวกนั 3) Page Footer คือส่วนที่อยู่ด้านล่างสุดของหน้าเว็บเพจ ตรงน้ี ส่วนใหญ่จะเอาไวใ้ ช้วางระบบนำทาง หรือเนวเิ กช่ัน โดยทำเป็นลงิ ก์ข้อความง่ายๆ รวมถงึ อาจแสดงข้อมูล เนื้อหาเพิ่มเติมภายในเว็บไซต์ เช่น ข้อความแสดงลิขสิทธ์ิ, วิธีการติดต่อกับผู้ดูแลเว็บไซต์, คำแนะนำ การใช้เวบ็ ไซต์ เป็นต้น ขน้ั ตอนท่ี 5 การสร้างเว็บเพจ หลังจากที่จัดองค์ประกอบของแต่ละหน้าเว็บเสร็จเรียบร้อย ขั้นตอนต่อไป ก็คือการเขียนเว็บ ไม่ว่าจะเป็นการเขียนด้วยโปรแกรมภาษา HTML หรือโปรแกรม WordPress หรือWix.Com ท่ีใช้งานง่ายและได้รบั ความนยิ มเปน็ อยา่ งสูงในปจั จบุ นั น้ี เพอ่ื กำหนดใหแ้ ตล่ ะหน้าเว็บเพจ นำเสนอขอ้ ความ รูปภาพ และวดิ โี อ ให้อยูใ่ นรปู แบบตามทีเ่ ราต้องการ ขัน้ ตอนท่ี 6 ลงทะเบยี นขอพน้ื ท่ีเว็บไซต์ หลังจากออกแบบและสร้างเว็บไซต์เสร็จเรียบร้อยแล้ว ก็มาถึงขั้นตอนของ การเผยแพร่หน้าเว็บของเราเข้าสู่โลกอินเทอร์เน็ต เพื่อเปิดให้ผู้อื่นเข้ามาชมและใช้งานภายในเว็บไซต์ แล้วโดยจุดนี้เราจะต้องนำเว็บไซต์ที่สร้างขึ้นมาใหม่นีไ้ ปฝากไว้กับผูใ้ ห้บริการพื้นที่เว็บไซต์ หรือที่เรียกว่า

11 เว็บโฮสติ้ง พร้อมกับการจดทะเบียนโดเมนเนม ซึ่งปัจจุบันก็มีหลายเจ้าที่ให้บริการ ส่วนราคานั้นก็ ข้ึนอยกู่ บั พื้นทก่ี ารใชง้ าน รวมถึงออปชัน่ อนื่ ๆ ทีเ่ พ่มิ เขา้ มา ขนั้ ตอนท่ี 7 อัพโหลดเว็บไซต์ เมือ่ เราไดท้ ำการสมัครเว็บโฮสติง้ และโดเมนเนมเรยี บร้อยแลว้ ข้นั ตอนต่อไป ก็คือการอัพโหลดไฟล์เว็บไซต์ของเราไปยังเว็บไซต์ที่ให้บริการพื้นที่ฝากเว็บ โดยอาจจะทำการอัพโหลด ผ่านเว็บเบราว์เซอร์ของเว็บที่ให้บริการ หรืออาจจะอัพโหลดด้วยโปรแกรมอื่นๆ อย่างเช่น CuteFTP, Filezilla, WS_FTP, WordPress เป็นต้น เพื่อให้ผู้ใช้งานสามารถคลิกเข้าไปดูเว็บไซต์ของเราผ่าน เครือขา่ ยอนิ เทอร์เน็ตน่นั เอง ขนั้ ตอนที่ 8 การเรยี กดูเวบ็ ไซต์ หลังจากที่เราทำการอัพโหลดไฟล์เว็บไซต์ขึ้นบนเว็บไซต์ที่ให้บริการพื้นท่ี ฝากเว็บเสร็จแลว้ ตอ่ ไปเราก็สามารถเปดิ ดูเวบ็ ไซต์ผ่านทางโปรแกรมเวบ็ เบราว์เซอรต์ ่างๆ ไดแ้ ล้ว ไม่ว่าจะ เป็น Internet Explorer, Mozilla Firefox หรือ Google Chrome ก็ตาม โดยการพิมพ์ที่อยู่เว็บไซต์ ตรง Address Bar จากนน้ั ก็กด Enter กเ็ ป็นอนั เรียบร้อย 2.2.1.3 ทฤษฎีสีในการออกแบบ 1) ความหมายของทฤษฎีสี - ทฤษฎี หมายถึง ความจรงิ ที่ไดพ้ ิสจู น์แลว้ หรือ หลักวชิ า - สี หมายถงึ แสงทีม่ ากระทบวตั ถุแลว้ สะท้อนเข้าตาเรา ทำให้เห็นเปน็ สี - ทฤษฎีสี หมายถึง หลกั วิชาเกย่ี วกบั สที สี่ ามารถมองเห็นได้ดว้ ยสายตา 2) ความสัมพันธ์ของมนุษย์กับสีสรรพสิ่งทั้งหมายในจักรวาลประกอบ ไปดว้ ยสีดงั นนั้ ส่งิ แวดล้อมรอบตัวมนุษยจ์ ึงประกอบไปด้วยสี สีจำแนกออกเป็น 2 ประเภท คอื - สีทเ่ี กิดจากปรากฏการณ์ตามธรรมชาติ เช่น สีของแสง สผี วิ ของวตั ถุ - สีที่เกิดจากการสร้างสรรค์ของมนุษย์ เช่น สีของแสงไฟฟ้า สีของพลุ สีที่ใช้เขียนภาพ และย้อมสีวัสดุต่าง ๆ เหตุที่มนุษย์รู้จักใช้สี เพราะมนุษย์มีธรรมชาติรักสวยรักงาม เมื่อเห็นความงามตามธรรมชาติ เช่น ดอกไม้ ใบไม้ สัตว์ วัตถุ ตลอดจนทิวทัศน์ที่งดงาม มนุษย์ก็อยากจะ เก็บความงามเอาไว้จึงได้นำเอาใบไม้ หินสี เปลือกหอย ฯลฯ มาประดับร่างกาย หรือขีดเขียนส่วน ที่ต้องการให้งามรวมทั้งการเขียนภาพตามผนังถ้ำอีกด้วย สำหรับในปัจจุบันได้มีการสังเคราะห์สีจากวัตถุ ขึ้นมาใช้ ในงานตา่ ง ๆ อย่างกวา้ งขวางทวั่ ไป

12 3) จิตวิทยาแห่งสี (psychology of colors) การใช้สีให้สอดคล้องกับ หลักจิตวิทยาจะต้องเข้าใจว่าสีใดให้ความรู้สึกต่อมนุษย์อย่างไร จึงจะใช้ได้อย่างเหมาะสม ความรู้สึก เกย่ี วกับสี สามารถจำแนกออกไดด้ งั น้ี ตารางที่ 2.1 ความรสู้ กึ เกีย่ วกับสี สีแดง ให้ความรสู้ กึ อันตราย เรา่ รอ้ น รุนแรง ม่นั คง อดุ มสมบรู ณ์ สสี ้ม ให้ความร้สู ึกสวา่ ง เร่าร้อน ฉดู ฉาด สเี หลอื ง ใหค้ วามรสู้ ึกสว่าง สดใส สดชืน่ ระวงั สีเขียว ให้ความรู้สึกงอกงาม พักผ่อน สดชืน่ สนี ้ำเงนิ ให้ความรู้สกึ สงบ ผอ่ นคลาย สงา่ งาม ทมึ สมี ว่ ง ให้ความรู้สกึ หนกั สงบ มีเลศนัย สนี ำ้ ตาล ให้ความร้สู ึกเกา่ หนัก สงบเงียบ สขี าว ใหค้ วามรู้สกึ บริสทุ ธิ์ สะอาด ใหม่ สดใส สดี ำ ให้ความรสู้ กึ หนัก หดหู่ เศร้าใจ ทบึ ตนั 1) การใช้สตี ามหลักจิตวิทยา สามารถก่อให้เกิดประโยชน์ได้หลายประการทั้งน้ีข้ึนอยู่ กับลกั ษณะการใช้งาน ประโยชน์ท่ไี ด้รบั นน้ั สามารถสรุปได้ดังนี้ - ประโยชน์ในด้านแสดงเวลาของบรรยากาศในภาพเขียน เพราะสีบรรยากาศ ในภาพเขียนน้นั จะแสดงใหร้ วู้ ่าเปน็ ภาพตอนเช้า ตอนกลางวันหรือตอนบ่าย เปน็ ตน้ - ประโยชน์ในด้านการค้า คือ ทำให้สินค้าสวยงาม น่าซื้อหา นอกจากนี้ยังใช้ กบั งานโฆษณา เช่น โปสเตอร์ต่าง ๆ ช่วยให้จำหนา่ ยสนิ คา้ ไดม้ ากข้นึ - ประโยชน์ในด้านประสิทธิภาพของการทำงาน เช่น โรงงานอุตสาหกรรมถ้าทาสี สถานที่ทำงานใหถ้ ูกหลกั จิตวทิ ยา จะเป็นทางหนึง่ ทช่ี ว่ ยสรา้ งบรรยากาศใหน้ ่าทำงานคนงานจะทำงานมาก - ประโยชน์ในด้านการตกแต่ง สีของห้อง และสีของเฟอร์นิเจอร์ช่วยแก้ปัญหา เรื่องความสว่างของห้องรวมทั้งความสุขในการใช้ห้อง ถ้าเป็นโรงเรียนเด็กจะเรียนได้ผลดีขึ้นถ้าเป็น โรงพยาบาลคนไข้จะหายเร็วขึ้น แม่สีของวัตถุธาตุแม่สีของวัตถุธาตุสังเคราะห์มาจากวัตถุโดยนักเคมี ซ่ึงนำมาใชก้ ับวงการศิลปะ วงการอุตสาหกรรม โดยกำหนดแม่สีไว้ 3 สี คือ

13 ตารางท่ี 2.2 แสดงขัน้ สที ่ี 1 แม่สี สแี ดง (red) ตารางท่ี 2.3 แสดงขน้ั สที ี่ 2 การผสมสี สนี ้ำเงนิ (blue) สเี หลอื ง (yellow) 2.2.2 หลกั การพฒั นาเวบ็ ไซต์ 2.2.2.1 โปรแกรม Adobe Photoshop CS6 โปรแกรม Adobe Photoshop cs6 เป็นโปรแกรมในตระกูล Adobe ที่ใช้ สำหรับตกแต่งภาพถ่าย และภาพกราฟิกได้อย่างมีประสิทธิภาพ ไม่ว่าจะเป็นงานด้านสิ่งพิมพ์ นิตยสาร และงานด้านมัลติมีเดีย อีกทั้งยังสามารถ retouching ตกแต่งภาพและการสร้างภาพ ซึ่งกำลังเป็นที่นิยม สูงมากในขณะนี้เราสามารถใช้โปรแกรม Photoshop ในการตกแต่งภาพการใส่ Effect ต่าง ๆ ให้กับ ภาพและตัวหนังสือ การทำภาพขาวดำ การทำภาพถ่ายเป็นภาพเขียน การนำภาพมารวมกัน การ Retouchตกแตง่ ภาพตา่ ง โปรแกรม Adobe Photoshop เป็นโปรแกรมท่สี ามารถท่จี ะเรียนรู้ได้ด้วย ตนเอง และทำการแกไ้ ขภาพ ตกแตง่ ภาพ ซอ้ นภาพในรปู แบบตา่ ง ๆ ได้อยา่ งงา่ ยดาย และสง่ิ ที่ขาดไม่ได้ นั้นก็คือการใส่ข้อความประกอบลงในภาพด้วย และเนื่องด้วย Adobe Photoshop มีการพัฒนา โปรแกรมมาอย่างต่อเนื่องทำให้จำเป็นต้องศึกษาคำสั่งต่าง ๆ ให้เข้าใจแต่ที่สำคัญเมื่อได้เรียนรู้การใช้ คำสัง่ ในเวอรช์ ัน่ เก่าแตก่ ย็ งั คงสามารถนำไปประยุกตใ์ ช้กบั เวอรช์ ่ันใหม่ ๆ ไดด้ ว้ ย

14 2.2.2.2 วิธกี ารตดิ ตั้ง โปรแกรม Adobe Photoshop cs6 รปู ท่ี 2.1 แสดงเขา้ ไปยังโฟลเดอร์ของ Photoshop ตามภาพ ดบั เบิ้ลคลกิ Set-up ท่ี 2.2 เมื่อปรากฏหนา้ ตา่ งตามภาพด้านล่างคลิกปุม่ Try รปู ที่ 2.3 แสดงโปรแกรมตรวจสอบเสร็จแล้วจะเข้าสู่หน้าจอ เลอื ก Try

15 รูปท่ี 2.4 แสดงการกรอก Serial Number แล้วคลิกทป่ี ุม่ คลกิ Accept รูปท่ี 2.5 แสดงการเลือกการตดิ ต้ังของโปรแกรม ใหเ้ ลอื ก Installs

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

17 2.2.2.3 ความสามารถพืน้ ฐานของ Adobe Photoshop ที่ควรทราบ 1) ตกแตง่ หรือแกไ้ ขรูปภาพ 2) ตดั ต่อภาพบางส่วน หรือทเี่ รียกวา่ crop ภาพ 3) เปลี่ยนแปลงสีของภาพ จากสหี นึง่ เป็นอีกสีหน่งึ ได้ 4) สามารถลากเส้น แบบฟรีสไตล์ หรอื ใสร่ ูปภาพ สเ่ี หล่ียม วงกลม หรือ สรา้ งภาพได้อย่างอสิ ระ 5) มกี ารแบ่งช้ันของภาพเป็น Layer สามารถเคลื่อนย้ายภาพได้เปน็ อสิ ระ 6) การทำ cloning ภาพ หรือการทำภาพซำ้ ในรูปภาพเดยี วกนั 7) เพิ่มเติมข้อความ ใส่ effect ของข้อความได้ 8 Brush หรือแปรงทาสี ทส่ี ามารถเลือกรปู แบบสำเรจ็ รปู ในการสรา้ งภาพได้และอื่นๆ อกี มากมายโปรแกรม Adobe Photoshop CS6 เมอ่ื ทำการเปิดโปรแกรมแลว้ จะพบหนา้ ตาของโปรแกรมดังรปู รูปท่ี 2.8 หนา้ ต่างโปรแกรม

18 มีสว่ นสำคัญหลกั ที่ที่ต้องรู้ดังนี้ 1. เมนขู องโปรแกรม Application menu หรอื Menu bar ประกอบด้วย 1) File หมายถึง รวมคำสั่งที่ใช้จัดการกับไฟล์รูปภาพ เช่น สร้างไฟล์ใหม่, เปิด, ปิด, บนั ทกึ ไฟล์, นำเข้าไฟล์, ส่งออกไฟล์ และอืน่ ๆ ที่เก่ยี วกับไฟล์ 2) Edit หมายถึง รวมคำสั่งที่ใช้สำหรับแก้ไขภาพ และปรับแต่งการทำงานของ โปรแกรมเบื้องต้น เชน่ ก๊อปปี้, วาง, ยกเลกิ คำสง่ั , แก้ไขเคร่อื งมอื และอืน่ ๆ 3) Image หมายถึง รวมคำสั่งที่ใช้ปรับแต่งภาพ เช่น สี, แสง, ขนาดของภาพ (image size), ขนาดของเอกสาร (canvas), โหมดสขี องภาพ, หมนุ ภาพ และอืน่ ๆ 4) Layer หมายถึง รวมคำสง่ั ทใี่ ชจ้ ัดการกับเลเยอร์ ทั้งการสรา้ งเลเยอร์, แปลงเลเยอร์ และการจดั การกับเลเยอร์ในด้านตา่ ง ๆ 5) select รวม คำสั่งเกี่ยวกับการเลือกวัตถุหรือพื้นที่บนรูปภาพ (Selection) เพ่ือ นำไปใช้งานรว่ มกับคำส่ังอ่ืน ๆ เช่น เลอื กเพื่อเปล่ียนสี, ลบ หรอื ใชเ้ อฟเฟก็ ต์ตา่ ง ๆ กบั รูปภาพ 6) Filter เป็นคำสั่งการเล่น Effects ต่างๆสำหรับรปู ภาพและวตั ถุ 7) View เป็นคำสั่งเกี่ยวกับมุมมองของภาพและวัตถุในลักษณะต่างๆ เช่น การขยาย ภาพและย่อภาพใหด้ ูเล็ก 8) Window เป็นส่วนคำสั่งในการเลือกใช้อุปกรณ์เสริมต่างๆที่จำเป็นในการใช้สร้าง Effects ต่างๆ 9) Help เป็นคำสั่งเพื่อแนะนำเกี่ยวกับการใช้โปรแกรมฯและจะมีลายละเอียดของ โปรแกรมอยใู่ นน้นั 2. เมนขู องพ้ืนท่ที ำงาน Panel menu Panel (พาเนล) เปน็ วินโดวย์ อ่ ย ๆ ทีใ่ ชเ้ ลือกรายละเอยี ด หรือคำสัง่ ควบคุมการทำงาน ต่าง ๆ ของโปรแกรม ใน Photoshop มีพาเนลอยู่เป็นจำนวนมาก เช่น พาเนล Color ใช้สำหรับเลือกสี, พาเนล Layers ใชส้ ำหรบั จดั การกับเลเยอร์ 3. พนื้ ทที่ ำงาน Stage หรือ Panel เป็นพื้นทว่ี า่ งสำหรับแสดงงานทีก่ ำลังทำอยู่ 4. เคร่อื งมอื ทใ่ี ชง้ าน Tools panel หรือ Tools box Tool Panel (ทูลพาเนล) หรือ กล่องเครื่องมือ จะประกอบไปด้วยเครื่องมือต่าง ๆ ที่ใชใ้ นการวาด ตกแตง่ และแกไ้ ขภาพ เครอื่ งมือเหล่าน้ีมจี ำนวนมาก 5. สง่ิ ท่ีควบคมุ เครื่องมอื ทใ่ี ชง้ าน Tools control menu หรอื Option bar Option Bar (ออปชั่นบาร์) เป็นส่วนที่ใช้ปรับแต่งค่าการทำงานของเครื่องมือต่าง ๆ โดยรายละเอียดในออปชนั่ บาร์จะเปลี่ยนไปตามเคร่ืองมือท่ีเราเลือกจากทลู บ็อกซ์ในขณะนัน้

19 ตารางที่ 2.4 ตารางอธิบายเครอ่ื งมือTool ต่าง ๆ สัญลักษณ์ ความหมาย Healing Brush Tool ใช้ในการระบายสี เพ่อื ซ่อมแซมรปู ภาพใหส้ มบรู ณ์แบบ Patch Tool ใช้เฉพาะในบรเิ วณทเี่ ลือกไวเ้ ทา่ นน้ั เพื่อให้เกดิ ความสมบูรณ์ของรูปภาพ โดยใช้ลวดลาย หรือใช้ส่วนที่เลือกในภาพเป็นต้นฉบับ Brush Tool ใช้ในการวาดเสน้ Brush ต่างๆ Pencil Tool ใช้ในการวาดเสน้ ทมี่ ีขอบชัดเจน Clone Stamp Tool ใช้ก็อปปีร้ ูปโดยอาศยั รูปภาพต้นฉบับ Pattern Stamp Tool ใชเ้ พื่อวาดรปู โดยใช้บางสว่ นของรปู ภาพที่มอี ยูเ่ ป็นตน้ ฉบับ Art History Brush Tool ใชใ้ นการวาดรปู จาก State หรือ Snapshot ของรูปนโ้ี ดยอาศัยรปู แบบของ Stoke ทมี่ ี สไตลห์ ลากหลาย ชว่ ยให้สไตล์ ของภาพดูต่างออกไป Eraser Tool ใชล้ บรูปภาพหรือลบบางสว่ นของ pixel และทำการเก็บสว่ นต่างๆ เป็น State ตา่ งๆ ใน History Palette Magic Eraser Tool ใชล้ บรูปภาพบรเิ วณที่มสี เี ดียวกนั ใหก้ ลายเปน็ พน้ื ทโี่ ปร่งใส (Transparent) โดยการคลิก เพียงคร้งั เดียว Background Eraser Tool ใชล้ บรูปภาพบางสว่ นใหก้ ลายเปน็ พื้นท่โี ปร่งใสโดยการลากเมาส์

20 ตารางที่ 2.4 ตารางอธิบายเครื่องมือ Tool ตา่ ง ๆ (ตอ่ ) สญั ลกั ษณ์ ความหมาย Sponge Tool Sponge Toolใช้เปลี่ยนสใี นส่วนต่างๆ ของรปู ภาพ โดยการปรับค่าความเข้มสี Path Selection Tool ใชเ้ พือ่ เลือก Shape หรอื Path เพื่อแสดง Anchor Paint, Direction Line และ Direction Paint Type Tool ใช้ในการสรา้ งตัวหนงั สือลงบนรปู ภาพ Type Mask Tool ใช้สร้าง Selection เปน็ รปู ร่างตวั หนังสือ Pen Tools ใช้ในการลากเสน้ Path ซง่ึ สามารถดัดโคง้ ตามรปู ภาพได้ Custom Shape Tool ใช้เลือกรูปภาพเลือกรูปภาพท่ีมรี ูปรา่ งเฉพาะจาก Custom Shape List Animations Tool ใชเ้ ขยี นโนต๊ หรอื แนบเสียงไปกบั รูปภาพได้ Eyedropper Tool ใช้ในการดดู สีจากรปู ภาพเพื่อใชเ้ ปน็ ต้นแบบของสีกับงานชิ้นอน่ื ๆ Measure Tool ใช้วดั ระยะหา่ ง, ตำแหน่งและมมุ องศาระหว่างภาพ Hand Tool ใชเ้ ลอ่ื นภาพที่อย่ใู นหน้าต่างเดยี วกัน

21 2.3 เครือ่ งมอื ในการพัฒนาเวบ็ ไซต์ 2.3.1 โปรแกรมสาํ เร็จรูป Wix การลงทะเบยี นเขา้ ใชง้ าน Wix มีขนั้ ตอน ดงั นี้ 1) เขา้ ไปทเ่ี ว็บไซต์ https://www.wix.com 2) คลิกปมุ่ Start Now เพ่ือสรา้ งเวบ็ ไซต์ รูปท่ี 2.9 แสดงหน้าต่างของโปรแกรมสร้างเว็บไซต์สำเร็จรูป Wix 2.3.1.1 ลงทะเบยี นเข้าใช้งาน 1) คลิกที่ Sign Up เพื่อสร้างบัญชีผู้ใช้งานใหม่ จากนั้นให้ใส่ชื่อที่อยู่อีเมล์ ในช่อง Email และ ชอ่ ง Type your email again อกี ครั้ง ถัดมาให้กำหนดรหสั ผ่านลงในชอ่ ง Password และชอ่ ง Type your password again เพอ่ื ยืนยันรหัสผา่ นอกี คร้ัง แล้วคลิกปมุ่ Sign Up 2) สำหรับการลงทะเบียนเข้าใช้งานผ่านช่องทาง Facebook และ Google+ ก็ได้ รูปท่ี 2.10 แสดงหนา้ ต่างสำหรบั ลงทะเบยี นเขา้ ใช้งาน wix

22 2.3.1.2 เร่มิ ต้นการสร้างเว็บไซต์ 1) เขา้ ส่รู ะบบการใช้งาน Wix.com เรียบร้อยแลว้ ให้คลิกปุ่ม Create Your Website เพอ่ื สรา้ งเวบ็ ไซต์ จากน้ันให้เลอื กประเภทของเวบ็ ไซต์ทีต่ ้องการสร้าง รูปที่ 2.11 แสดงหน้าต่างเร่มิ ต้นการสร้างเว็บไซต์ wix 2.3.1.3 เลอื กวธิ กี ารสรา้ งเวบ็ ไซต์ ซง่ึ มี 2 วธิ ี ดงั น้ี 1) Let Wix ADI Create a Website for you การสร้างเว็บไซต์ผ่าน การตอบคำถามงา่ ย ๆ และระบบจะออกแบบเว็บไซตส์ ำหรบั คณุ โดยอตั โนมัติ 2) Create a Website Yourself with the Wix Editor การสร้างเว็บไซต์ โดยใช้ Templates สำเรจ็ รปู ด้วยการคลิกปุ่ม Choose a Template 2.3.1.4 Template ของ Wix.com นั้นจะอัพเดทรูปแบบใหม่ ๆ มีทั้งแบบ มีค่าใช้จ่ายและแบบที่ไม่มีค่าใช้จ่ายโดยจะแบ่งเป็นประเภทต่าง ๆ ให้เลือกรูปแบบ Templates ท่ี ต้องการ หรอื ใส่ Keyword เพือ่ คน้ หาท่ีชอ่ ง 2.3.1.5 สามารถดตู ัวอยา่ ง Templates ของเว็บไซต์กอ่ นตัดสินใจเลอื กใช้งานได้ ด้วยการคลกิ ปมุ่ View แต่ถ้าต้องการใชง้ าน Templates นัน้ ๆ ให้คลิกปุ่ม Edit รูปท่ี 2.12 แสดงเลือก Templates ให้กบั เว็บไซต์ wix

23 2.3.1.6 ระบบจะทำการ Generate หน้าเว็บไซต์ รูปที่ 2.13 แสดงหนา้ หลักการทำงานของโปรแกรมสร้างเว็บไซตส์ ำเร็จรปู wix.com 2.3.1.7 Head Menu ประกอบด้วย 1) Pages การเพ่ิมแกไ้ ข Web Page ตา่ งๆ เช่น Home, About Us 2) Site การจดั การขอ้ มลู เบื้องต้นในเว็บไซต์ 3) Tools การแสดงชดุ เครื่องมือต่างๆ เช่น Toolbar, Rulers 4) Help ความชว่ ยเหลอื 5) Upgrade สำหรบั เพม่ิ ประสทิ ธภิ าพของเว็บไซต์ (มคี ่าใชจ้ า่ ย) 6) Mobile กำหนดรูปแบบการแสดงหน้าจอ 7) Save สำหรับบนั ทกึ การแกไ้ ขปรับปรงุ Page 8) Preview สำหรบั ดู Web Page ในมุมมองเสมอื นจริง 9) Publish สำหรับประกาศใช้เมื่อสร้าง Web Site เสร็จแลว้ 2.4 เครือ่ งมอื ทใ่ี ช้ในการพฒั นาระบบ 2.4.1 ค่มู อื การใช้ Google Form Form ใน Google Drive เปน็ การสรา้ งแบบฟอร์มที่ตอ้ งการคำตอบจากผตู้ อบ เพราะ การทำงานของ Form นั้นเมื่อเราทำการส่งไปถึงผู้รับ โดยให้ผู้รับตอบและส่งคำตอบกลับมา เราจะสามารถรู้ว่าผู้ที่ตอบแบบฟอร์มได้เลือกคำตอบ หรือตอบอะไรบ้าง แต่ผู้ที่ตอบแบบสอบถามจะไม่รู้

24 วา่ คำตอบทต่ี วั เองตอบนั้นผิดหรือถกู ซงึ่ ประโยชน์นสี้ ามารถนำไปใชไ้ ด้กับการทำแบบสอบถามออนไลน์ใน องค์กร แบบสอบถามความพึงพอใจในองค์กร หรือการทำข้อสอบออนไลน์ก็สามารถทำได้เช่นกัน ซึ่ง การเก็บข้อมูลทั้งหมดไม่ว่าจะเป็นคำถามและคำตอบของผู้ตอบ ทั้งหมดจะถูกเก็บไว้ที่ Drive ของเรา โดยอัตโนมตั ิและถกู จัดเก็บไว้ในไฟล์ Spreadsheet ซ่ึงการสรา้ งแบบสอบถามออนไลนส์ ามารถทำได้ดงั น้ี 1. Login เขา้ สู่ระบบ Google Apps Business ดว้ ย Username และ Password 2. เลือกเมนู Driveเลอื ก \"เพ่ิมเติม\" > \"Google ฟอรม์ \" รปู ที่ 2.14 เลือกเมนู Drive เลือก \"เพ่มิ เตมิ \" > \"Google ฟอร์ม 3. จากนั้นจะแสดงหน้าต่างให้เราตั้งชื่อแบบ ฟอร์ม ให้ตั้งชื่อแบบ ฟอร์ม และเลือกธีม ของ ฟอร์ม ทีเ่ ราต้องการ จากน้นั กด \"OK\" รูปท่ี 2.15 ธมี ของ ฟอรม์ ที่เราต้องการ

25 4. ตอ่ ไปจะแสดงหนา้ ต่างให้สรา้ งแบบฟอร์ม ซงึ่ จะมีทัง้ หมด 2 ส่วน ไดแ้ ก่ 1) สว่ นเขยี นคำถามในแบบฟอร์ม กจ็ ะให้เราใสค่ ำถามท่เี ราต้องการถาม 2) ส่วนยืนยัน คือส่วนที่ให้เรากำหนดยืนยันการบันทึกของข้อมูลหรือการอนุญาตให้ สง่ ลิงคต์ อบกลบั รปู ที่ 2.16 สว่ นเขียนคำถามในแบบฟอร์ม รูปที่ 2.17 กำหนดยนื ยันการบันทึกของข้อมลู หรือการอนุญาตใหส้ ่งลงิ ค์ตอบกลับ

26 5. จากนน้ั ในสว่ นของการสร้างคำถามจะประกอบดว้ ย 1) หัวข้อคำถาม คือ คำถามทเ่ี ราจะถาม 2) ประเภทคำถาม คอื รูปแบบคำตอบที่ต้องการ 3) ในส่วนของ ประเภทคำถาม ก็มีให้เลือกหลายแบบ ตามรูปแบบที่ต้องการคำตอบ ในทน่ี ีข้ อเลือกเป็น \"เลอื กจากรายการ\" รปู ท่ี 2.18 สว่ นของการสร้างคำถาม 6. จากนน้ั กก็ ด \"เสรจ็ \" เพอ่ื เสร็จในการสรา้ งคำถามในเเตล่ ะข้อ รปู ท่ี 2.19 การสรา้ งคำถามในเเตล่ ะข้อ

27 7. จากนั้นเมื่อเราจะสร้างคำถามต่อไปก็ให้เลือก เพิ่มรายการ ก็จะปรากฏรูปแบบคำถาม ขึน้ มา ก็ เลอื กตามที่ต้องการ รูปท่ี 2.20 สรา้ งคำถามตอ่ ไปก็ให้เลอื ก เพิม่ รายการ 8. จากนน้ั กจ็ ะไดค้ ำถามทงั้ หมดแบบนท้ี ่เี ราสร้างขนึ้ มา รูปท่ี 2.21 แบบนีท้ ีเ่ ราสร้างขึน้ มา

28 9. หรือหากเราต้องการแก้ไขก็สามารถทำได้ ดังรปู รปู ที่ 2.22 การแก้ไขแบบความพงึ พอใจ 10. ในส่วนของข้อความยืนยันคือส่วนที่เราเขียนข้อความคำเชิญที่จะ ถูกส่งไป ยังผู้ที่ เราเชิญให้เข้ามาตอบแบบฟอร์มของเรา เมื่อเขียนเสร็จแล้วก็กด \"ส่งฟอร์ม\" เพื่อกำหนดที่อยู่ อเี มลข์ องผู้ทเ่ี ราต้องการทจี่ ะสง่ แบบ from น้ไี ปให้ รปู ท่ี 2.23 สว่ นของ ข้อความยนื ยัน คือส่วนท่ีเราเขยี นข้อความคำเชญิ

29 11. จากนั้นจะแสดงหน้าต่างๆ ที่เราต้องการที่จะเผยแพร่ ซึ่งจะเอาลิงค์นี้ไปให้คนใน องค์กร หรอื แชรผ์ ่าน Social Network หรือกำหนดบุคคลทเี่ ราตอ้ งการส่งแบบฟอรม์ นี้ให้ จากนนั้ กด “เสรจ็ ” เราสามารถเเชร์ให้บุคคลในองค์กรเราเข้ามาร่วมแก้ไขในแบบ ฟอร์ม นี้ของเราได้โดยเลือก \" เพิ่มผู้ทำงานร่วม รปู ที่ 2.24 เอาลิงคน์ ้ีไปให้คนใน องค์กร 12. นอกจากนี้แล้วเรายังสามารถกำหนดได้อีกว่าเมื่อมีผู้ตอบกลับมาแล้ว จะให้คำตอบอยู่ท่ี ไหน โดยเลือกท่ี \"การตอบกลับ\" > \"เปลีย่ นแปลงทางการตอบกลบั \" รปู ที่ 2.25 เปล่ียนแปลงทางการตอบกลับ

30 13. จากนั้นกำหนด โดยเลือกว่าจะให้สร้าง สเปรดชีตใหม่ หรือ สเปรดชีตเดิมที่มีอยู่แล้ว ซึ่งในท่นี ้ีกใ็ ห้เลอื กเป็น สเปรดชีตใหม่ จากนั้นก็ต้ังชอ่ื ของ สเปรดชตี รปู ท่ี 2.26 เปลย่ี นแปลงทางการตอบกลับ 14. และเมื่อมาดูใน Drive ของเราก็จะเห็นไฟล์ที่จัดเก็บข้อมูลตอบกลับสร้างขึ้นมาให้เราอีก 1 ไฟล์ รูปท่ี 2.27 ไฟล์ท่ีจัดเก็บข้อมูลตอบกลบั

31 2.5 การเผยแพร่เวบ็ ไซต์ข้ึนสู่ระบบอินเทอร์เน็ต 2.5.1 โฮสต้ิง (Hosting) เว็บโฮสติ้งเป็นคอมพิวเตอร์ขนาดใหญ่ (เซิร์ฟเวอร์) ซึ่งเก็บเว็บไซต์ของพวกเขา เป็นพื้นที่ในการใช้งานในอินเทอร์เน็ต สำหรับเว็บไซต์ทั่วไป โฮสติ้งมีลักษณะที่เปรียบเทียบได้ เหมอื นกบั ฮาร์ดดสิ ก์ ในเคร่ืองคอมพิวเตอร์ โฮสตง้ิ จะมกี ารตดิ ตงั้ โปรแกรมตา่ งๆ ท่ีทำหนา้ ท่หี ลากหลาย เช่น Web Server, FTP, Database, DNS, E-mail, Subdomain, Cronjob และอน่ื ๆ ซึง่ ผทู้ ี่ต้องการสร้างระบบโฮสต้งิ เอง อาจจะ มีค่าใช้จ่ายสูง หากต้องการแค่จะมีเว็บไซต์เล็กๆ ก็เพียงเช่าบริการโฮสติ้ง และจ่ายค่าบริการรายปีแค่ ไม่กี่บาท และข้อดีของระบบโฮสติ้งคือ ผู้ให้บริการจะตั้งคา่ ทกุ อย่างให้ท่านพรอ้ มใช้งาน ท่านมีหน้าทีแ่ ค่ อัพโหลดไฟล์เว็บไซด์ที่ท่านได้สร้างไว้ขึ้นระบบ โฮสติ้ง และสามารถทำให้เว็บไซด์ของท่านทำงานได้ทันที หรือจะง่ายยิ่งกว่านั้น ถ้าท่านใช้ระบบเว็บไซด์สำเร็จรูปไม่ต้องเขียนเว็บไซด์ขึ้นมาเอง ก็สามารถกดติดต้ัง เว็บไซต์สำเร็จรูปได้จากระบบจัดการโฮสติ้ง (DirectAdmin) เพียงไม่กี่คลิก ก็ได้เว็บไซด์ทันที แต่ถ้าท่าน ต้องการทำเว็บไซดข์ นาดใหญ่ ใช้พื้นที่เยอะ คนเข้าใช้งานเยอะ อาจจะใช้บริการโฮสติ้งไม่ได้ ท่านต้องเช่า บรกิ ารแบบ VPS ซ่ึงราคาอาจจะเพม่ิ สูงขนึ้ แต่กจ็ ะมีความเป็นสว่ นตวั และรองรบั ผู้เข้าใชง้ านเยอะๆ ได้ 2.5.2 โดเมนเนม (domain name) 2.5.2.1 การจดทะเบียนโดเมนเนม (Domain Name) โดเมนเนม (Domain Name) หรือ โดเมน เป็นชื่อเฉพาะที่ใช้ระบุเป็นช่ือ ของเว็บไซต์หนึ่ง ๆ การจดทะเบียนโดเมนเนมจึงเป็นการลงทะเบียนชื่อให้กับเว็บไซต์ของเรา ในโลกของอินเทอร์เน็ต โดยโดเมนเนมที่ขอจดทะเบียนจะต้องไม่ซ้ำกัน และควรตั้งชื่อให้เกี่ยวข้องกับ เนอ้ื หาภายในเว็บไซต์ เชน่ dkd.ac.th, ktb.go.th, kruwan-d.info เปน็ ต้น 2.5.3 ประเภทของโดเมนเนม .com หรือ Comercial สำหรับเว็บไซต์ของ บริษัท ห้างร้าน เอกชน ท่ีจัดทำข้ึนเพื่อการโปรโมทสินค้า หรือ ขายสินค้า โดยหวังผลประโยชน์ทางด้านธุรกิจ เป็นหลัก .net หรือ Network เว็บไซต์ที่เกี่ยวกับการให้บริการระบบเครือข่าย หรือ อน่ื ๆ ที่เกีย่ วขอ้ งกบั ระบบเครอื ขา่ ย

32 .org หรือ Organization เว็บไซต์ที่เกี่ยวกับ หน่วยงาน องค์กร มูลนิธิ ที่ไม่หวังผลตอบแทนทางธุรกิจ .biz หรือ Bussiness มีความหมายเช่นเดียวกันกับ .com โดยมากมักจะ นิยมจดเฉพาะในกรณีทีช่ ่อื โดเมนเนม.com ทที่ า่ นตอ้ งการ มีผู้อ่นื จดไปแลว้ .info หรือ Information เว็บไซต์ที่จัดทำขึ้นเพื่อเผยแพร่ข้อมูล ข่าวสารท่ัวไป เช่น เว็บไซต์ที่ให้ข้อมูลแหล่งท่องเที่ยวของจังหวัดต่างๆ เป็นต้น 2.5.4 จดโดเมนเนม ภายใต้หมวดหมู่ .th (ประเทศไทย) .ac.th หรือ ACademy สำหรับเว็บไซต์ของ โรงเรียน และ สถาบันการศึกษาต่างๆ ที่ต้ังอยู่ในประเทศไทย .co.th หรือ COmercial สำหรับเว็บไซต์ของ บริษัท ห้างร้าน เอกชน ที่จดทะเบียนเปน็ นิตบิ ุคคลและตั้งอยู่ในประเทศไทย .go.th หรือ GOvernment สำหรับเว็บไซต์ของ หน่วยงาน และองค์กร ภาครฐั รวมถึง อบต. , อบจ. , เทศบาลตำบล , เทศบาลเมอื ง ฯลฯ .in.th หรอื INdividual สำหรับเว็บไซตส์ ว่ นบุคคล รวมถงึ หา้ งร้าน เอกชน หน่วยงานภาครัฐ (ความหมายอกี นัยหนึ่งที่มผี นู้ ิยมจดกันมากก็คือ .in.th หมายถึง \"IN THAILAND\") .or.th หรือ ORganization เว็บไซต์ที่เกี่ยวกับ หน่วยงาน องค์กร มูลนิธิ ท่ตี ้งั อยใู่ นประเทศไทยและไม่หวังผลตอบแทนทางธุรกิจ 2.6 ข้อมลู พ้ืนฐานของโรงเรียนพลังราษฎรพ์ ทิ ยาสรรพ์ 2.6.1 ประวัติความเปน็ มา โรงเรียนพลังราษฎร์พิทยาสรรพ์ เป็นโรงเรียนมัธยมศึกษา สังกัดกรมสามัญศึกษา กระทรวงศึกษาธกิ าร ได้รบั อนุมตั จิ ัดต้ังขึ้นเมื่อวนั ที่ 6 มถิ นุ ายน 2518 ณ ตำบลหนองสงู ใต้ อำเภอคำชะอี จังหวัดนครพนม ในสมัยนั้น ปัจจุบันแยกเป็นตำบลบ้านเป้า อำเภอหนองสูง จังหวัดมุกดาหาร โดยได้รับ ความร่วมมือจากราษฎร กำนัน ผู้ใหญ่บ้านในเขตตำบลบ้านเป้า ตำบลหนองสูงใต้ ปรึกษาหารือเพื่อที่จะ จดั ต้ังโรงเรยี นมัธยมศกึ ษาข้ึน และได้เสนอเรอ่ื งไปยงั กรมสามญั ศกึ ษากระทรวงศกึ ษาธิการ ต่อมา นายสุวรรณ ธนกัญญา รัฐมนตรีช่วยว่าการกระทรวงศึกษาธิการในสมัยนั้น ได้เดินทางมาดูข้อมลู ตา่ ง ๆ ซึ่งนายคำบง ปทั ทมุ และนายรัตน์ อาจวชิ ัย ไดบ้ ริจาคทดี่ ินจำนวน 41 ไร่ 32 ตารางวา โดยราษฎรได้รว่ มมอื กนั สร้างอาคารเรยี นช่วั คราวขึ้น 1 หลัง รับนกั เรียนแบบสหศกึ ษาจากความ