การสร้างเว็บไซต์ศูนย์พัฒนาเด็กเล็กบ้านคำฮี ตำยบโพนทราย อำเภอเมือง จังหวัดมุกดาหาร

การสรา้ งเวบ็ ไซต์ศนู ย์พัฒนาเดก็ เลก็ บา้ นคาฮี ตาบลโพนทราย อาเภอเมือง จังหวดั มกุ ดาหาร Creation of Website on Child Development Center, Ban Khamhee, Phonsai Sub – district, Muang District, Mukdahan Province นายณฐั พล กงนะ นางสาววาสิตา แซอ่ งึ โครงการนเี้ ป็นสว่ นหนึ่งของการศึกษาตามหลกั สูตรประกาศนยี บัตรวิชาชีพช้ันสงู (ปวส.) สาขาวชิ าคอมพิวเตอร์ธุรกิจ วทิ ยาลยั การอาชพี นวมนิ ทราชินมี กุ ดาหาร ปีการศกึ ษา 2563

การสรา้ งเวบ็ ไซต์ศนู ย์พัฒนาเดก็ เลก็ บา้ นคาฮี ตาบลโพนทราย อาเภอเมือง จังหวดั มกุ ดาหาร Creation of Website on Child Development Center, Ban Khamhee, Phonsai Sub – district, Muang District, Mukdahan Province นายณฐั พล กงนะ นางสาววาสิตา แซอ่ งึ โครงการนเี้ ป็นสว่ นหนึ่งของการศึกษาตามหลกั สูตรประกาศนยี บัตรวิชาชีพช้ันสงู (ปวส.) สาขาวชิ าคอมพิวเตอร์ธุรกิจ วทิ ยาลยั การอาชพี นวมนิ ทราชินมี กุ ดาหาร ปีการศกึ ษา 2563





ค หัวขอ้ โครงการ การสร้างเว็บไซต์ศูนย์พัฒนาเด็กเล็กบ้านคาฮี ตาบลโพนทราย อาเภอเมือง จังหวัดมกุ ดาหาร Creation of Website on Child Development Center, Ban Khamhee, Phonsai Sub – district, Muang District, Mukdahan Province ผู้ดาเนินโครงการ นายณฐั พล กงนะ รหัสประจาตัวนักศึกษา 6232040001 นางสาววาสติ า แซ่องึ รหัสประจาตัวนักศึกษา 6232040007 ครูท่ีปรกึ ษา สิบเอกโกศล โสดา ครูผ้สู อน นางประเสรฐิ ศรี สทุ ธพิ นั ธ์ สาขาวิชา คอมพิวเตอรธ์ ุรกิจ ปกี ารศึกษา 2563 …………………………………………………………………………………………………..…………………………………………… บทคัดยอ่ โครงการการเว็บไซตศ์ ูนย์พฒั นาเดก็ เลก็ บา้ นคาฮี ตาบลโพนทราย อาเภอเมอื ง จงั หวดั มกุ ดาหาร จดั ทาข้ึนโดยมวี ัตถปุ ระสงค์ 1) เพื่อจัดทาเว็บไซต์ศูนย์พัฒนาเด็กเล็กบ้านคาฮี ตาบลโพนทราย อาเภอเมือง จังหวัดมกุ ดาหาร 2) เพือ่ เผยแพรข่ ้อมลู ขา่ วสารศูนยพ์ ฒั นาเด็กเล็กบ้านคาฮี ตาบลโพนทราย อาเภอเมือง จงั หวัดมุกดาหาร 3) เพื่อศกึ ษาความพึงพอใจของเวบ็ ไซตศ์ นู ยพ์ ฒั นาเดก็ เล็กบา้ นคาฮี ตาบลโพนทราย อาเภอเมือง จงั หวดั มุกดาหาร กลุ่มตัวอย่างในการวิจัยคร้ังนี้ จานวน 40 คน ได้มาโดยวิธีการส่งตัวอย่าง แบบง่าย โดยใชว้ ิธีประเมินแบบสอบถามออนไลน์ เครอ่ื งมือทใ่ี ชใ้ นการวจิ ยั ครงั้ น้ีไดแ้ ก่ 1) เว็บไซต์ศูนย์พัฒนา เด็กเล็กบ้านคาฮี ตาบลโพนทราย อาเภอเมือง จังหวัดมุกดาหาร ที่ผู้วิจัยสร้างขึ้น 2) ความพึงพอใจ ของกลุ่มตัวอย่างที่มีต่อคุณภาพเว็บไซต์ศูนย์พัฒนาเด็กเล็กบ้านคาฮี ตาบลโพนทราย อาเภอเมือง จังหวัดมุกดาหาร สถิติที่ใช้ในการวิจัยครั้งน้ีได้แก่ ค่าเฉล่ีย (������̅) และค่าส่วนเบ่ียงเบนมาตรฐาน (S.D.) ผลการจัดทาโครงการได้เล็งเห็นความสาคัญในการใช้เทคโนโลยีสารสนเทศมาช่วยในการ จัดเก็บฐานข้อมูลผู้เรียน และเพื่อเผยแพร่ข้อมูลข่าวสารศูนย์พัฒนาเด็กเล็กบ้านคาฮี ตาบลโพนทราย อาเภอเมือง จังหวัดมุกดาหารข้ึน เพื่อจัดเก็บฐานข้อมูลผู้เรียน และเผยแพร่ข้อมูลข่าวสารในรูปแบบ สารสนเทศผา่ นระบบอนิ เทอร์เนต็ ผลการวจิ ัยพบว่า ความพงึ พอใจของกลุ่มตัวอย่างท่ีมีต่อเว็บไซต์ศูนย์พัฒนาเด็กเล็กบ้านคาฮี ตาบลโพนทราย อาเภอเมอื ง จงั หวดั มกุ ดาหาร มีระดบั ความพึงพอใจ อยูใ่ นระดับมาก (������̅= 4.34 , S.D.= 0.78)

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

สารบญั จ เรือ่ ง หน้า ใบรบั รองโครงการ ก ใบแหง่ ลิขสิทธ์ิ ข บทคัดย่อภาษาไทย ค กิตตกิ รรมประกาศ ง สารบญั จ สารบญั (ต่อ) ฉ สารบัญตาราง ช สารบญั รูป ซ สารบญั รูป (ต่อ) ฌ บทท่ี 1 บทนา 1 1 1.1 ความเปน็ มา และความสาคัญของปัญหา 2 1.2 วตั ถุประสงคข์ องโครงการ 2 1.3 เป้าหมายและขอบเขตของโครงการ 3 1.4 แผนงานและระยะเวลาดาเนนิ การ 3 1.5 ประโยชนท์ ีค่ าดวา่ จะได้รับ 4 1.6 นิยามศัพทเ์ ฉพาะ 5 บทที่ 2 ทฤษฎีท่ีเก่ยี วข้อง 5 2.1 ความรูเ้ บือ้ งตน้ เกย่ี วกับเวบ็ ไซต์ 6 2.2 การออกแบบ และพฒั นาเว็บไซต์ 20 2.3 การออกแบบ และพฒั นาระบบ 24 2.4 งานวจิ ัยท่ีเกย่ี วขอ้ ง 26 บทท่ี 3 วิธดี าเนินการจัดทาโครงการ 26 3.1 ประชากร และกล่มุ ตัวอย่าง 26 3.2 เครือ่ งมือท่ใี ช่ในการพัฒนาระบบ/วจิ ัย 28 3.3 การเกบ็ รวบรวมข้อมลู 28 3.4 ขนั้ ตอนการวิเคราะห์ข้อมลู 29 3.5 ขั้นตอนการดาเนินการสร้างเว็บ

สารบญั (ต่อ) ฉ เรอ่ื ง หน้า บทที่ 4 ผลการพัฒนาระบบ/ผลการวิเคราะหข์ ้อมลู 34 34 4.1 ผลการพฒั นาระบบ 44 4.2 ผลการวิเคราะหข์ ้อมลู 49 บทท่ี 5 สรุปผลการศึกษา อภิปรายผล และข้อเสนอแนะ 49 5.1 สรปุ ผลการศกึ ษา 50 5.2 อภิปรายผล 50 5.3 ข้อเสนอแนะ 51 บรรณานกุ รม 52 ภาคผนวก 53 ภาคผนวก ก แบบเสนอเค้าโครงโครงการ 67 ภาคผนวก ข รายงานการพบครูที่ปรกึ ษาโครงการ 69 ภาคผนวก ค แบบประเมินความพงึ พอใจ 72 ภาคผนวก ง แบบประเมนิ ความพึงพอใจออนไลน์ 76 ภาคผนวก จ เอกสารเผยแพร่/สง่ มอบ 79 ภาคผนวก ฉ คู่มือการใช้งานเว็บไซต์ 90 ภาคผนวก ช ตารางแสดงผลการวิเคราะห์ข้อมูลดว้ ยโปรแกรมทางสถิติ 94 ภาคผนวก ซ ภาพกิจกรรมการดาเนินโครงการ 97 ภาคผนวก ฌ ประวตั ิผจู้ ดั ทา

ช สารบัญตาราง ตารางท่ี หน้า ตารางที่ 1.1 ตารางแสดงแผนการดาเนนิ งาน 3 ตารางที่ 2.1 ความร้สู กึ เกยี่ วกับสี 8 ตารางที่ 2.2 แสดงขน้ั สที ่ี 1 แมส่ ี 9 ตารางท่ี 2.3 แสดงขนั้ สีท่ี 2 การผสมสี 9 ตารางท่ี 2.4 ตารางอธบิ ายเคร่ืองมอื Tool ต่าง ๆ 13 ตารางที่ 3.1 ตารางแสดงระยะเวลาดาเนินงาน 29 ตารางท่ี 4.1 ตารางการทางานหน้าแรก 35 ตารางท่ี 4.2 ตารางทดสอบการทางานหน้าบุคคล 35 ตารางที่ 4.3 ตารางทดสอบการทางานหน้าผ้จู ดั ทาเวบ็ ไซต์ 36 ตารางที่ 4.4 ตารางทดสอบการทางานเกยี่ วกบั หน้าโรงเรยี น 37 ตารางที่ 4.5 ตารางทดสอบการทางานหน้าตราสญั ลักษณ์ 37 ตารางที่ 4.6 ตารางทดสอบการทางานหน้าประวัติโรงเรยี น 38 ตารางท่ี 4.7 ตารางทดสอบการทางานหน้าปรชั ญาโรงเรียน 38 ตารางท่ี 4.8 ตารางทดสอบการทางานหนา้ วิสยั ทัศน์ 39 ตารางท่ี 4.9 ตารางทดสอบการทางานหน้าอัตลักษณ์ 39 ตารางท่ี 4.10 ตารางทดสอบการทางานหน้าสญั ลักษณ์ 40 ตารางท่ี 4.11 ตารางทดสอบการทางานหน้าเอกลักษณ์ 40 ตารางที่ 4.12 ตารางทดสอบการทางานหน้าคาขวัญ 41 ตารางที่ 4.13 ตารางทดสอบการทางานหนา้ อดุ มการณ์ 41 ตารางที่ 4.14 ตารางทดสอบการทางานหนา้ จุดเด่น/จุดเน้น 42 ตารางท่ี 4.15 ตารางทดสอบการทางานหนา้ แผนท่ีโรงเรียน 42 ตารางท่ี 4.16 ตารางทดสอบการทางานหนา้ ขอ้ มลู หอ้ งเรียน 43 ตารางท่ี 4.17 ตารางทดสอบการทางานหนา้ รูปภาพ/กจิ กรรม 43 ตารางท่ี 4.18 ตารางทดสอบการทางานหน้าตดิ ตอ่ เรา 44 ตารางที่ 4.19 ตารางแสดงค่ารอ้ ยละของขอ้ มลู ท่วั ไปของผู้ตอบแบบประเมิน 44 ตารางที่ 4.20 ตารางแสดงค่าคะแนนเฉลย่ี และส่วนเบย่ี งเบนมาตรฐาน ดา้ นเน้ือหา 46 ตารางที่ 4.21 ตารางแสดงค่าคะแนนเฉล่ยี และส่วนเบยี่ งเบนมาตรฐาน ดา้ นการออกแบบ 47 และการจดั รปู แบบเวบ็ ไซต์ 47 ตารางท่ี 4.22 ตารางแสดงค่าคะแนนเฉล่ยี และส่วนเบย่ี งเบนมาตรฐาน ดา้ นการนาไปใช้

สารบญั รูป ซ รูปท่ี หน้า รปู ที่ 2.1 แสดงเข้าไปยงั โฟลเดอร์ของ Photoshop ตามภาพ ดบั เบิ้ลคลิก Set-up 9 รปู ท่ี 2.2 แสดงการตรวจสอบกอ่ นทาการตดิ ตั้งโปรแกรม 10 รปู ที่ 2.3 แสดงโปรแกรมตรวจสอบเสร็จแลว้ จะเข้าส่หู นา้ จอ เลือก Try 10 รปู ท่ี 2.4 แสดงการกรอก Serial Number แล้วคลกิ ที่ปุ่ม คลิก Accept 10 รปู ที่ 2.5 แสดงการเลือกการตดิ ต้ังของโปรแกรม 11 รูปท่ี 2.6 แสดงหนา้ การโหลดของโปรแกรม 11 รูปท่ี 2.7 แสดงการเสรจ็ ส้ินการตดิ ต้ังโปรแกรม Adobe Photoshop CS6 11 รูปที่ 2.8 แสดงขน้ั ตอนการเข้าสู่โปรแกรม Adobe Photoshop CS6 12 รูปท่ี 2.9 แสดงหน้าตา่ งโปรแกรม Adobe Photoshop CS6 12 รปู ท่ี 2.10 แสดงหนา้ จอหลักการทางานของโปรแกรม Adobe Photoshop CS6 12 รปู ท่ี 2.11 แสดงเครอ่ื งมือต่าง ๆ (Toolbox) Adobe Photoshop CS6 13 รปู ที่ 2.12 แสดงการเปิดไฟล์ภาพ (Open) 16 รปู ท่ี 2.13 แสดงการเปิดไฟลภ์ าพ (Open) 16 รปู ท่ี 2.14 แสดงการสร้างไฟล์ใหม่ (New) 16 รปู ท่ี 2.15 แสดงการกาหนดขนาดของกระดาษ 17 รปู ที่ 2.16 แสดงการบนั ทึกขอ้ มูลลงบนไฟล์ (Save) 18 รปู ที่ 2.17 แสดงการบันทึกข้อมูลลงบนไฟล์ (Save) 19 รปู ท่ี 2.18 แสดงการปรบั ค่าความสว่าง/ความคมชดั 19 รปู ท่ี 2.19 แสดงหนา้ ตา่ งของโปรแกรมสรา้ งเวบ็ ไซต์สาเร็จรปู Wix 20 รูปท่ี 2.20 แสดงหน้าต่างสาหรับลงทะเบยี นเข้าใช้งาน wix 20 รปู ท่ี 2.21 แสดงหน้าต่างเริ่มตนการสร้างเว็บไซต์ wix 21 รปู ท่ี 2.22 แสดงเลอื กวธิ ีการสร้างเว็บไซต์ wix 21 รปู ท่ี 2.23 แสดงเลือก Templates ใหก้ ับเว็บไซต์ wix 22 รูปที่ 2.24 แสดงหน้าหลกั การทางานของโปรแกรมสรา้ งเว็บไซต์สาเรจ็ รปู wix 22 รูปท่ี 2.25 แสดงหน้าส่วนเมนูโปรแกรมสร้างเวบ็ ไซตส์ าเร็จรูป wix 23 รูปที่ 2.26 แสดงการเพม่ิ ข้อความ 24 รูปที่ 3.1 แสดงรูปภาพแผนภูมกิ ้างปลา 29 รูปท่ี 3.2 แสดงแผนผังโครงสรา้ งการทางานของเวบ็ ไซต์ศนู ย์พัฒนาเด็กเลก็ บา้ นคาฮี 31 ตาบลโพนทราย อาเภอเมือง จังหวัดมกุ ดาหาร 31 รปู ท่ี 3.3 แสดง User Interface Design

สารบัญรูป (ต่อ) ฌ รูปที่ หน้า รูปท่ี 3.4 แสดงรปู E-R Diagram Model ระบบงานใหม่ 32 รปู ท่ี 3.5 แสดงรปู E-R Diagram Model สมัครเรียนออนไลน์ 32 รปู ที่ 3.6 แสดงรูป E-R Diagram Model ใบรายงานตวั ออนไลน์ 33 รูปท่ี 3.7 แสดงรปู E-R Diagram Model การประเมนิ พฒั นาเด็ก 33 รปู ที่ 4.1 แสดงการทดสอบหน้าแรก 35 รูปท่ี 4.2 แสดงการทดสอบหน้าบุคลากร 35 รูปที่ 4.3 แสดงการทดสอบหนา้ โครงสร้างผูบ้ รหิ าร 36 รปู ที่ 4.4 แสดงการทดสอบหนา้ เกี่ยวกับโรงเรียน 36 รปู ท่ี 4.5 แสดงการทดสอบหนา้ ตราสัญลกั ษณ์ 37 รปู ที่ 4.6 แสดงการทดสอบหน้าประวติ ิโรงเรยี น 37 รปู ที่ 4.7 แสดงการทดสอบหนา้ ปรชั ญาโรงเรียน 38 รูปที่ 4.8 แสดงการทดสอบหน้าวิสยั ทศั น์ 38 รูปท่ี 4.9 แสดงการทดสอบหน้าอตั ลักษณ์ 39 รูปที่ 4.10 แสดงการทดสอบหนา้ สญั ลกั ษณ์ 39 รปู ท่ี 4.11 แสดงการทดสอบหนา้ เอกลักษณ์ 40 รปู ที่ 4.12 แสดงการทดสอบหนา้ คาขวัญ 40 รปู ท่ี 4.13 แสดงการทดสอบหนา้ อดุ มการณ์ 41 รูปท่ี 4.14 แสดงหนา้ ระบบการจดุ เด่น/จุดเนน้ 41 รปู ท่ี 4.15 แสดงหนา้ แผนทโ่ี รงเรียน 42 รูปที่ 4.16 แสดงหน้าข้อมลู ห้องเรียน 42 รปู ที่ 4.17 แสดงหน้าข้อมลู หนา้ รปู ภาพ/กิจกรรม 43 รปู ท่ี 4.18 แสดงหนา้ ข้อมูลหนา้ ติดต่อเรา 43

บทท่ี 1 บทนา 1.1 ความเป็นมาและความสาคญั ของปัญหา รฐั ธรรมนูญแห่งราชอาณาจักรไทย พุทธศกั ราช 2540 กาหนดให้การศึกษาเป็นเครื่องมือสาคัญ ในการพัฒนาคน จึงต้องมีการจัดการศึกษาให้สอดคล้องกับเจตนารมณ์ของรัฐธรรมนูญ สาระสาคัญ คือ มุ่งเน้นให้มีการปฏิรูประบบบริหาร และการจัดการศึกษาให้มีประสิทธิภาพ และประสิทธิผลโดยมี เอกภาพในเชงิ นโยบาย และองค์กรปกครองส่วนท้องถิ่นรวมท้ังส่งเสริมให้เอกชนร่วมจัดการศึกษา และให้มี ความอสิ ระในการบริหารจดั การภายใตก้ ารกากบั ดแู ลจากรัฐ นโยบายของรัฐบาลได้แสดงเจตนารมณ์ที่ จะปฏิรูปการศึกษา เพ่ือพัฒนาสังคมไทยให้เป็นสังคมแห่งการเรียนรู้ เพ่ือนาไปสู่การพัฒนาระบบ เศรษฐกิจคนไทยท้ังปวงได้รับโอกาสเท่าเทียมกันท่ีจะเรียนรู้ และพัฒนาคุณภาพชีวิตได้อย่างต่อเน่ือง ตลอดชีวิตและมีปัญญาเป็นทุนไว้สร้างงาน และสร้างรายได้นาประเทศให้อยู่รอดจากระบบเศรษฐกิจ และสงั คมท่ผี นั แปรอยู่ตลอดเวลา โดยยึดหลักวา่ การศึกษาสร้างคน สร้างงาน และสร้างชาติเด็กต้ังแต่ แรกเกิดถึง 5 ปี เป็นช่วงระยะเวลาท่ีสาคัญท่ีสุดในการพัฒนาด้านต่าง ๆ ถือเป็นหน้าท่ีหลักของพ่อแม่ ผู้ปกครอง ผู้ดูแลเด็ก ตลอดจนชุมชนที่เด็กอาศัยอยู่ในการส่งเสริม และพัฒนาการทุก ๆ ด้านอย่างเต็มที่ ตามศักยภาพ การจัดการศึกษาปฐมวัย จึงเป็นภารกิจสาคัญขององค์กรปกครองส่วนท้องถ่ินที่จะต้อง บริหารจดั การและดาเนนิ งานพฒั นาเด็กในทอ้ งถนิ่ ชมุ ชนให้เปน็ ไปอย่างมีคุณภาพ การสร้างเว็บไซต์ศูนย์พัฒนาเด็กเล็กบ้านคาฮี ตาบลโพนทราย อาเภอเมือง จังหวัดมุกดาหาร อยูภ่ ายใต้การกากบั ดูแลขององค์การบริหารส่วนตาบลโพนทราย อาเภอเมือง จังหวัดมุกดาหารเป็นสถานที่ สาหรบั ดแู ลเด็กก่อนวยั เรยี น จึงต้องมีการเก็บบันทึกข้อมูล โดยมีวัตถุประสงค์ในการดาเนินการเพ่ือเพิ่มโอกาส ให้เด็กได้รับการเตรียมความพร้อม เด็กมีพัฒนาการทางด้านร่างกาย จิตใจ อารมณ์สังคม และสติปัญญา อยา่ งเหมาะสม นอกจากน้ียังเปน็ การแบ่งเบาภาระผู้ปกครองที่ไม่มีผู้เล้ียงดูเด็กในช่วงเวลากลางวันทา ให้เด็กต้องอยู่ในความดูแลของผู้ดูแลเด็กภายในศูนย์พัฒนาเด็กเล็กถึงวันละ 6 – 8 ชั่วโมง ตามพระราชบัญญัติ คมุ้ ครองเด็ก พุทธศักราช 2546 ได้มีการกาหนดให้เด็กจะต้องได้รับการดูแลเอาใจใส่ด้วยการอยู่อาศัย ในสถานที่ท่ีเหมาะสม ปลอดภัยไม่ก่อให้เกิดอันตราย เด็กต้องได้รับสารอาหารอย่างมากที่สุดตามความต้องการ ของร่างกายทีก่ าหนดตามวัย และไดร้ ับการสง่ เสริมสุขภาพพัฒนาการรวมถึงได้รับการป้องกันโรคและ ภัยทส่ี ามารถหลกี เล่ียงได้ (พระราชบัญญัติคุ้มครองเด็ก , 2546) โดยมีพื้นท่ีบริการในการควบคุม ดูแล จานวน 3 หมบู่ ้าน ประกอบดว้ ย หมู่ 7 บ้านคาฮี , หมู่ 11 บา้ นบูรพา, หมู่ 12 บ้านดอนม่วง มีครูผู้ดูแล เด็ก จานวน 3 คน และมีเด็กก่อนวัยเรียน จานวน 40 คน ปัจจุบันยังขาดช่องทางในการจัดเก็บการฐานข้อมูล และขาดชอ่ งทางในการการเผยแพร่ข้อมูลข่าวสาร กิจกรรมของศูนย์พัฒนาเด็กเล็กบ้านคาฮี ตาบลโพนทราย อาเภอเมอื ง จังหวัดมุกดาหาร ดังน้ันคณะผู้จัดทาโครงการได้เล็งเห็นความสาคัญ ในการใช้เทคโนโลยีสารสนเทศมาช่วยในการจัดเก็บ ฐานข้อมูลผู้เรียน และเพื่อเผยแพร่ข้อมูลข่าวสารศูนย์พัฒนาเด็กเล็กบ้านคาฮี ตาบลโพนทราย อาเภอเมือง จังหวัดมุกดาหารข้ึนเพื่อจัดเก็บฐานข้อมูลผู้เรียน และเผยแพร่ข้อมูลข่าวสารในรูปแบบสารสนเทศ ผา่ นระบบอนิ เทอร์เน็ต

-2- 1.2 วตั ถุประสงคข์ องโครงการ 1.2.1 เพอื่ จดั ทาเวบ็ ไซต์ศูนย์พฒั นาเด็กเล็กบ้านคาฮี ตาบลโพนทราย อาเภอเมอื ง จังหวดั มุกดาหาร 1.2.2 เพอื่ เผยแพร่ขอ้ มูลขา่ วสารศนู ยพ์ ฒั นาเด็กเล็กบ้านคาฮี ตาบลโพนทราย อาเภอเมือง จงั หวดั มุกดาหาร 1.2.3 เพ่ือศึกษาความพึงพอใจของผู้ใช้เว็บไซต์ศูนย์พัฒนาเด็กเล็กบ้านคาฮี ตาบลโพนทราย อาเภอเมือง จงั หวดั มุกดาหาร 1.3 เปา้ หมายและขอบเขตของโครงการ 1.3.1 เปา้ หมายของโครงการ 1.3.1.1 เปา้ หมายเชิงปริมาณ 1) เว็บไซต์เผยแพร่ข้อมูลข่าวสารเกี่ยวกับศูนย์พัฒนาเด็กเล็กบ้านคาฮี ตาบลโพนทราย อาเภอเมือง จังหวดั มกุ ดาหาร 1.3.1.2 เปา้ หมายเชงิ คุณภาพ 1) เป็นสือ่ กลางในการเผยแพร่ข้อมูลข่าวสาร ผา่ นระบบเครอื ขา่ ยอินเตอร์เนต็ 2) ศนู ย์พฒั นาเด็กเล็กบ้านคาฮี ตาบลโพนทราย อาเภอเมือง จังหวัดมุกดาหาร มกี ารประชาสัมพันธก์ จิ กรรมขา่ วสารตา่ ง ๆ ทาใหเ้ พ่ิมปรมิ าณผู้เรียน 3) ผู้เข้าใช้งานเวบ็ ไซต์ศนู ย์พัฒนาเด็กเล็กบ้านคาฮี ตาบลโพนทราย อาเภอเมือง จังหวดั มกุ ดาหาร มีความพงึ พอใจในการเขา้ ใชง้ านอย่ใู นระดับมาก 1.3.2 ขอบเขตของโครงการ 1.3.2.1 ส่วนระบบ Admin สามารถจัดการได้ ดังน้ี - เขา้ สู่ระบบ - ตรวจสอบข้อมูลสมาชกิ - เพม่ิ /ลบ/แก้ไข ข้อมูลสมาชิก - รายงานข้อมลู ขึ้นเวบ็ ไซต์ - ออกจากระบบ 1.3.2.2 ส่วนของผู้ลงทะเบียน - เขา้ สู่ระบบ - ลงทะเบยี น - จัดทาเป็น PDF - ส่งข้อมูลถึงผปู้ กครอง - สามารถดูขอ้ มลู ผ้ปู กครอง และเดก็ ได้ - ออกจากระบบ

-3- 1.3.2.3 หนา้ เวบ็ ไซตท์ ง้ั หมด - หน้าแรก - เกยี่ วกับโรงเรียน - การจัดกิจกรรม - ตดิ ต่อเรา 1.4 แผนงานและระยะเวลาดาเนินการ เวลาเร่ิมต้นการทางานในแต่ละวันไมแ่ น่นอน โดยเฉลยี่ 1 วัน ทางาน 6 ชั่วโมง รวมทั้งส้ิน ในการศึกษา และการพัฒนาเว็บไซต์ใช้เวลาโดยประมาณ 4 เดือน (1 กรกฎาคม 2563 ถึง 23 ตุลาคม 2563) ซ่ึงสามารถแสดงรายละเอยี ดตารางแผนการดาเนินงาน ดังต่อไปนี้ ตารางที่ 1.1 ตารางแสดงแผนการดาเนินงาน กิจกรรม/ ระยะเวลาดาเนินงาน (สัปดาหท์ ี่) ข้นั ตอนการดาเนินงาน กรกฎาคม สงิ หาคม กนั ยายน ตุลาคม 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 ขัน้ เตรยี มการ สอบเค้าโครง ศกึ ษาขอ้ มูล ข้นั ดาเนินการ สร้างช้ินงาน ตรวจสอบความสมบรู ณ์ ขัน้ สรปุ และประเมินผล สรปุ ผล จดั ทารปู เลม่ นาเสนอ/เผยแพร่ 1.5 ประโยชน์ทคี่ าดว่าจะไดร้ ับ 1.5.1 ได้เว็บไซตศ์ ูนย์พัฒนาเด็กเลก็ บ้านคาฮี ตาบลโพนทราย อาเภอเมอื ง จงั หวดั มุกดาหาร 1.5.2 ได้เผยแพรเ่ วบ็ ไซต์ศูนยพ์ ัฒนาเด็กเล็กบ้านคาฮี ตาบลโพนทราย อาเภอเมือง จังหวัดมกุ ดาหาร 1.5.3 ไดร้ ะดบั ความพงึ พอใจจากการสร้างเว็บไซต์ศูนย์พัฒนาเด็กเล็กบ้านคาฮี ตาบลโพนทราย อาเภอเมืองจังหวัดมกุ ดาหาร 1.5.4 ได้ศึกษาวิธีการออกแบบ และสร้างเว็บไซต์ศูนย์พัฒนาเด็กเล็กบ้านคาฮี ตาบลโพนทราย อาเภอเมือง จังหวดั มกุ ดาหาร

-4- 1.6 นิยามศัพทเ์ ฉพาะ 1.6.1 เว็บไซต์ (Website, Web site) หมายถึง หน้าเว็บเพจหลายหน้า ซ่ึงเชื่อมโยงกัน ผ่านทางไฮเปอรล์ งิ คส์ ่วนใหญ่จดั ทาขนึ้ เพื่อนาเสนอข้อมูลผ่านคอมพวิ เตอร์ โดยถกู จัดเกบ็ ไว้ในเวิลด์ไวด์เว็บ หน้าแรกของเว็บไซต์ท่เี ก็บไว้ที่ชื่อหลักจะเรยี กวา่ โฮมเพจ 1.6.2 กเู กล้ิ ฟอร์ม (Google Form) หมายถึง ส่วนหนึ่งในบริการของกลุ่ม Google Docs ทช่ี ่วยใหเ้ ราสร้างแบบสอบถามออนไลน์ หรือใช้สาหรับรวบรวมข้อมูลได้อย่างรวดเร็ว โดยที่ไม่ต้องเสีย ค่าใช้จ่ายในการใช้งาน Google Form ผู้ใช้สามารถนาไปปรับประยุกต์ใช้งานได้หลายรูปแบบ เช่น การทาแบบฟอรม์ สารวจความคดิ เห็น การทาแบบฟอรม์ สารวจความพึงพอใจ การทาแบบฟอร์มลงทะเบียน และการลงคะแนนเสยี ง 1.6.3 กูเกิ้นชีท (Google Sheets) หมายถึง ช่วยให้ข้อมูลดูโดดเด่นด้วยแผนภูมิ และกราฟ สีสวยสตู รในตัว ตาราง Pivot และตัวเลือกการจัดรูปแบบตามเงื่อนไขจะช่วยประหยัดเวลา และทาให้ งานทที่ าประจาในสเปรดชที ง่ายขึ้น 1.6.4 กูเก้ลิ ไซต์ (Google Site) หมายถึง โปรแกรมของ Google ทใี่ หบ้ รกิ ารสร้างเว็บไซต์ฟรี สามารถสร้างเว็บไซต์ได้ง่าย ปรับแต่งรูปลักษณ์ได้อย่างอิสระ และสามารถรวบรวมความหลากหลาย ของข้อมูลไว้ในท่ีเดียว เช่น วิดีโอ, ปฏิทิน, เอกสาร อ่ืน ๆ สามารถนามาแทรกในหน้าเว็บเพจได้ เป็นการ เพิ่มลูกเลน่ ใช้งานได้ง่าย ทาให้ช่วยอานวยความสะดวกได้เป็นอยา่ งมาก 1.6.5 ศนู ยพ์ ฒั นาเดก็ เล็ก หมายถึง สถานศกึ ษาที่ใหก้ ารอบรมเลี้ยงดูจดั ประสบการณ์ และสง่ เสริม พฒั นาการการเรียนร้ใู หเ้ ดก็ เล็กมคี วามพร้อม ด้านร่างกาย อารมณ์-จิตใจ สังคม และสตปิ ญั ญาสังกัดองค์กร ปกครองส่วนทอ้ งถิน่ 1.6.6 เด็กเล็ก หมายถึง เด็กอายุระหว่าง ๒–๕ ปีที่เข้ารับการอบรมเล้ียงดู และพัฒนา ความพร้อม ด้านร่างกาย อารมณ์-จิตใจ สังคม และสติปัญญา ในศูนย์พัฒนาเด็กเล็กสังกัดองค์กรปกครอง ส่วนท้องถ่นิ 1.6.7 Wix คือ เป็นเว็บสาหรับทาเว็บท่ีไม่จาเป็นต้องมีความรู้ด้านภาษา PHP หรือภาษาในการ เขยี นเวบ็

บทที่ 2 ทฤษฎีท่เี ก่ยี วขอ้ ง โครงการการสรา้ งเวบ็ ไซต์ศูนยพ์ ฒั นาเด็กเล็กบ้านคาฮี ตาบลโพนทราย อาเภอเมือง จังหวัดมุกดาหาร ผู้จัดทาโครงการได้ทาการศึกษาหลักการทฤษฎี และเทคโนโลยีที่เก่ียวข้องท่ีสามารถนามาประยุกต์ใช้งาน โดยแบง่ ออกเปน็ หวั ขอ้ ต่าง ๆ ดังต่อไปนี้ 2.1 ความรู้เบื้องตน้ เกย่ี วกับเวบ็ ไซต์ 2.2 การออกแบบ และพัฒนาเวบ็ ไซต์ 2.3 การออกแบบ และพฒั นาระบบ 2.4 งานวิจัยทเ่ี กย่ี วข้อง 2.1 ความรู้เบือ้ งต้นเกย่ี วกับเว็บไซต์ 2.1.1 ความหมายของเวบ็ ไซต์ เวบ็ ไซตแ์ ห่งแรกของโลกถูกสร้างขึ้นเมื่อ 30 เมษายน พ.ศ. 2536 โดยวิศวกรของเซิร์น คาว่า เว็บไซต์ ในภาษาอังกฤษ มีการสะกดคาว่า เว็บไซต์หลายแบบ ต้ังแต่ Web site, website และ web site เริ่มแรกสุดคาว่าเว็บไซต์นั้น สะกดด้วยการแยกคา และใช้ตัว W พิมพ์ใหญ่ เป็น Web site เนื่องจากคาว่า “Web” เป็นคานามเฉพาะ ย่อมาจากคาว่า “World Wide Web” ดังน้ันจึงใช้คาว่า “Web site” ซึ่งสามารถเห็นได้ทั่วไปตามส่ือมวลชน และพจนานุกรมภาษาอังกฤษ และภายหลังได้มี คาว่า “web site” และ “website”(เว็บไซต)์ 2.1.1.1 เวบ็ ไซต์ (Web site) หน้าเว็บเพจหลายหน้า ซึ่งเชื่อมโยงกันผ่านทางไฮเปอร์ลิงก์ ส่วนใหญ่จัดทา ข้นึ เพ่ือนาเสนอข้อมูลผ่านคอมพิวเตอร์ โดยถูกจัดเก็บไว้ในเวิลด์ไวด์เว็บ หน้าแรกของเว็บไซต์ที่เก็บไว้ท่ี ชื่อหลักจะเรียกว่า โฮมเพจ เว็บไซต์โดยท่ัวไปจะให้บริการต่อผู้ใช้ฟรี แต่ในขณะเดียวกันบางเว็บไซต์ จาเป็นต้องมีการสมัครสมาชิกและเสียค่าบริการเพ่ือท่ีจะดูข้อมูล ในเว็บไซต์นั้น ซ่ึงได้แก่ข้อมูลทาง วชิ าการ ข้อมลู ตลาดหลกั ทรัพย์ หรือขอ้ มูลสอื่ ต่างๆ ผู้ทาเว็บไซต์มหี ลากหลายระดบั ตั้งแตส่ ร้างเว็บไซต์ สว่ นตวั จนถึงระดบั เว็บไซต์สาหรับธุรกิจหรือองค์กรต่างๆ การเรียกดูเว็บไซต์โดยทั่วไปนิยมเรียกดูผ่าน ซอฟตแ์ วรใ์ นลกั ษณะของ เว็บเบราวเ์ ซอร์ 2.1.1.2 เวบ็ เพจ (Web Page) สานักงานเลขานกุ ารคณะกรรมการเทคโนโลยีสารสนเทศแห่งชาติศูนย์เทคโนโลยี อิเล็กทรอนิกส์ และคอมพิวเตอร์แห่งชาติ (2540) ได้ให้ความหมายของเว็บเพจไว้ดังน้ี เว็บเพจ คือ หน้าหนังสืออเิ ลก็ ทรอนิกส์บนเว็บที่เจ้าของเว็บเพจต้องการจะใส่ลงไปในหน้าหนังสืออิเล็กทรอนิกส์นั้น เชน่ ข้อมลู แนะนาตวั เองซ่ึงอาจเป็นบุคคลหรือองค์กรที่ต้องการให้ผู้อ่ืน ได้ทราบหรือข้อมูลที่น่าสนใจ โดยที่ข้อมูลที่แสดงเป็นได้ท้ังข้อความ เสียง ภาพน่ิง และภาพเคล่ือนไหว และข้อมูลที่สามารถเช่ือมโยง ในรูปของไฮเพอร์เท็กซ์ คือเชื่อมโยงไปยังเว็บเพจอื่นที่จะให้ข้อมูลนั้น ๆ ในระดับลึกลงไปได้เรื่อย ๆ ซึ่งแหลง่ ทอ่ี ย่นู ้เี รยี กว่า URL (Uniform Resource Locator)

-6- 2.1.2 ประโยชน์ของเว็บไซต์ 2.1.2.1 ส่งเสริมศักยภาพทางด้านธรุ กิจ การมีเว็บไซต์สามารถช่วยในการเพ่ิมเสริม ศกั ยภาพของธรุ กิจของคุณใหแ้ ข็งแกรง่ มากยิ่งข้นึ ได้ เนื่องจากเป็นโลกท่ีเปิดกว้างทางด้านข้อมูลทาให้สินค้า และบรกิ ารของคณุ เปน็ ทร่ี ูจ้ ักในทอ้ งตลาดมากยง่ิ ข้ึนไปได้ 2.1.2.2 การเข้าถึงกลุ่มลูกค้าที่ง่ายมากย่ิงขึ้น สามารถท่ีจะมีเว็บไซต์เป็นของตนเอง และสามารถที่จะทาให้กลุ่มลูกค้าของคุณค้นเว็บของคุณเจอผ่าน Search Engine โดยกลุ่มคาท่ีเจาะจง กับธุรกจิ ของคุณได้เป็นการเพ่ิมกลุ่มลูกค้าที่กาลังสนใจกับสินค้า และบริการของคุณให้ตรงเป้าหมายมากย่ิงข้ึน ตลอด 24 ช่วั โมง แมว้ า่ จะเปน็ วันหยดุ ก็ตาม 2.1.2.3 ช่วยใหค้ ุณขายสินคา้ ได้โดยไมต่ อ้ งมีหน้าร้าน เว็บไซต์เปรียบเสมอร้านค้าออนไลน์ หรอื สานกั งานที่ใคร ๆ ก็สามารถเข้ามาเย่ียมชม และค้าหาข้อมูลของสินค้าได้โดยที่ไม่ต้องลงทุนเปิดหน้าร้าน ที่ต้องมีการเชา่ หอ้ ง และมคี ่าใช้จา่ ยสูงอีกดว้ ย 2.1.2.4 ช่วยสรา้ งภาพลกั ษณท์ ี่ดใี ห้กบั องค์กร สมัยนี้บริษัทท่ีไม่มีเว็บเป็นของตนเอง เปรียบเสมอื นบรษิ ทั ที่ดีตอ่ โลกภายนอก การมเี ว็บไซต์บริษัทสามารถแสดงให้กล่มุ ลกู คา้ ของคุณเข้าใจถึง ภาพลักษณ์ท่ีดีของบริษัทได้ และเว็บไซต์ยังช่วยในการสร้างความรู้สึกประทับใจกับผู้เยี่ยมชมได้อีกด้วย 2.1.3.5 ช่วยลดค่าใช้จ่ายในการประชาสัมพันธ์จะดีหรือไม่ถ้าคุณไม่ต้องเสียค่าโฆษณา ที่แพงผ่านส่อื ตา่ ง ๆ เช่น โทรทัศน์ วิทยุ หนงั สือพิมพ์ 2.2 การออกแบบ และพฒั นาเวบ็ ไซต์ 2.2.1 หลักการในการออกแบบเวบ็ ไซต์ การสร้างเว็บไซต์สิ่งสาคัญอยู่ที่การออกแบบเว็บ เพราะเว็บไซต์ท่ีมีรูปแบบสวยงามจะสามารถ ดึงดูดความสนใจจากผู้คนได้ดีกว่า ทาให้ผู้คนเกิดความรู้สึกประทับใจอยากกลับมาใช้งานเว็บไซต์อีกคร้ัง ในอนาคต ดงั นัน้ เรม่ิ แรกกอ่ นทาเว็บไซต์ จงึ จาเป็นต้องทาความเข้าใจกับหลักการออกแบบ และรูปแบบ โครงสร้างของเว็บกอ่ น 2.2.2 องคป์ ระกอบในการออกแบบเว็บไซต์ การออกแบบเว็บไซต์เพื่อให้มีประสิทธิภาพ และสามารถดึงดูดความสนใจของผู้คนได้ดี จะต้องมอี งคป์ ระกอบของเว็บไซต์อยา่ งครบถว้ นซึ่งไดแ้ ก่ 2.2.2.1 ความเรยี บง่าย เข้าใจง่าย การออกแบบเว็บไซต์ท่ีดีจะต้องเน้นท่ีความเรียบง่าย โดยเลือกนาเสนอเฉพาะส่ิงที่ต้องการนาเสนอจริง ๆ ในรูปแบบท่ีหลากหลาย โดยอาจจะเป็นสีสัน กราฟิก ภาพเคลื่อนไหวหรือตัวอักษร ท่ีสาคัญจะต้องมีการนาเสนอท่ีไม่ดูรกหน้าเว็บจนเกินไป เพื่อไม่ให้เกิด ความร้สู ึกรกสายตาหรอื สรา้ งความเบอ่ื หนา่ ย นา่ ราคาญให้กบั ผู้ทเ่ี ขา้ ชมเวบ็ ไซต์ 2.2.2.2 ความสม่าเสมอ ไม่สับสน ควรออกแบบเว็บไซต์ด้วยความสม่าเสมอ คือจะต้องมี รูปแบบ กราฟิก โทนสีและการตกแต่งต่าง ๆ ให้แต่ละหน้าบนเว็บไซต์มีความคล้ายคลึงกัน และเป็นแนว เดยี วกันไปตลอดท้ังเวบ็ ไซต์

-7- 2.2.2.3 สร้างความโดดเด่น เป็นเอกลักษณ์ การออกแบบเว็บไซต์เพื่อสามารถส่ือถึง จุดประสงค์ในการนาเสนอเว็บได้ดี จะต้องมีการสร้างความเป็นเอกลักษณ์และจุดเด่นให้กับเว็บไซต์ เพ่อื ใหส้ ามารถสะท้อนถงึ ลักษณะขององค์กรได้มากทสี่ ุด 2.2.2.4 เนื้อหาต้องดี ครบถ้วน เน้ือหาเป็นส่ิงท่ีสาคัญท่ีสุดของการสร้างเว็บไซต์เพราะ สงิ่ ท่ีทาให้ผ้คู นเกิดความสนใจ และติดตามเว็บไซต์ ก็คือเน้ือหาท่ีมีความสมบูรณ์ และน่าสนใจ นอกจากน้ี จะตอ้ งมกี ารปรับปรงุ พฒั นาเนื้อหาบนเว็บให้มีความทันสมัยอยู่เสมอ รวมถงึ ขอ้ มูลตอ้ งมีความถูกต้องท่สี ดุ 2.2.3 ข้ันตอนในการจัดทาเว็บไซต์ 2.2.3.1 การสรา้ งเว็บไซต์ อาจเรม่ิ ตง้ั แตก่ ารกาหนดเน้ือหารายละเอียดต่าง ๆ ในหนา้ เว็บเพจ จนถึงการอพั โหลดเวบ็ ไซต์ขน้ึ บนอนิ เทอรเ์ นต็ จะมีข้นั ตอน ดงั นี้ ขั้นตอนท่ี 1 วางแผนจัดทาเว็บไซต์ กาหนดเนื้อหา แบ่งเนื้อหาเป็น หมวดหมู่ต่าง ๆ ตามลาดับก่อนหลัง และรายละเอียดของเว็บท่ีเราจะจัดทาเพื่อให้เห็นมุมมองคร่าว ๆ ก่อนจะลงมือสรา้ งเวบ็ ไซต์ ขั้นตอนท่ี 2 การกาหนดโครงสร้างของเว็บ ขั้นตอนการกาหนดผังของเว็บไซต์ หรอื ทเ่ี รยี กวา่ Site Map เพ่ือให้ทราบองค์ประกอบท้งั หมดของเว็บไซต์ ข้ันตอนท่ี 3 กาหนดการเช่ือมโยงระหว่างเว็บเพจ เป็นการกาหนดการ เชอื่ มโยงในแต่ละหนา้ เว็บเพจใหส้ ามารถเชื่อมโยงกลับไปกลบั มาระหว่างหนา้ เวบ็ เพจต่าง ๆ ได้ ขั้นตอนท่ี 4 ออกแบบหน้าเว็บเพจแต่ละหน้า ออกแบบโครงสร้างหน้า เวบ็ เพจในแตล่ ะหนา้ เพือ่ จะได้ร้วู า่ ในเวบ็ เพจแต่ละหน้ามีรายละเอียดอะไรบ้าง ไม่ว่าจะเป็น ข้อมูล รูปภาพ จากน้นั ทาการออกแบบหน้าเวบ็ เพจหน้าตอ่ ไป 2.2.4 ทฤษฎสี ใี นการออกแบบ 2.2.4.1 ความหมายของทฤษฎีสี 1) ทฤษฎี หมายถงึ ความจรงิ ที่ไดพ้ สิ จู นแ์ ลว้ หรอื หลกั วชิ า 2) สี หมายถึง แสงทม่ี ากระทบวัตถุแลว้ สะท้อนเขา้ ตาเรา ทาให้เหน็ เปน็ สตี ่าง ๆ 3) ทฤษฎสี ี หมายถึง หลักวชิ าเกี่ยวกับสที สี่ ามารถมองเห็นได้ด้วยสายตา 2.2.4.2 ความสัมพันธ์ของมนุษย์กับสีสรรพส่ิงท้ังหมายในจักรวาลประกอบไปด้วยสี ดังน้นั สิ่งแวดลอ้ มรอบตวั มนุษย์จึงประกอบไปด้วยสี สจี าแนกออกเป็น 2 ประเภท คือ 1) สีท่ีเกิดจากปรากฏการณ์ตามธรรมชาติ เช่น สีของแสง สีผิวของวัตถุ 2) สีทเ่ี กิดจากการสร้างสรรค์ของมนุษย์ เช่น สีของแสงไฟฟ้า สีของพลุ สี ที่ใช้เขียนภาพ และย้อมสีวัสดุต่างๆ เหตุที่มนุษย์รู้จักใช้สี เพราะมนุษย์มีธรรมชาติรักสวยรักงาม เม่ือ เห็นความงามตามธรรมชาติ เช่น ดอกไม้ ใบไม้ สัตว์ วัตถุ ตลอดจนทิวทัศน์ที่งดงาม มนุษย์ก็อยากจะเก็บ ความงามเอาไว้ จงึ ได้นาเอาใบไม้ หินสี เปลือกหอย ฯลฯ มาประดับร่างกาย หรือขีดเขียนส่วนท่ีต้องการ ใหง้ าม รวมท้งั การเขยี นภาพตามผนงั ถ้า อีกด้วย สาหรับในปัจจุบันได้มีการสังเคราะห์สีจากวัตถุขึ้นมาใช้ ในงานต่าง ๆ อย่างกว้างขวางทั่วไป

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

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

- 10 - รูปท่ี 2.10 แสดงการตรวจสอบก่อนทาการตดิ ตัง้ โปรแกรม รปู ท่ี 2.11 แสดงโปรแกรมตรวจสอบเสร็จแล้วจะเขา้ สหู่ น้าจอ เลอื ก Try รปู ท่ี 2.12 แสดงการกรอก Serial Number แลว้ คลิกท่ปี ุ่ม คลิก Accept

- 11 - รูปท่ี 2.13 แสดงการเลอื กการตดิ ตั้งของโปรแกรม ให้เลอื ก Installs (สีฟ้า : คือการตดิ ตง้ั แบบ 64 bit สเี หลอื ง : คอื การติดต้งั เเบบ 32 bit หรือจะเลอื กติดต้ังทั้งสองแบบกไ็ ด้) รปู ท่ี 2.14 แสดงหนา้ การโหลดของโปรแกรม

- 12 - รปู ที่ 2.15 แสดงการเสร็จส้ินการตดิ ตง้ั โปรเเกรม Adobe Photoshop CS6 2.2.5.2.1 การเริม่ ตน้ ใชง้ าน Adobe Photoshop CS6 การเร่ิมต้นใช้งาน Adobe Photoshop CS6 เบ้ืองต้นหลังจากที่ทา การติดตั้ง Adobe Photoshop CS6 เรียบร้อยแล้ว ก็สามารถเรียกใช้งานโปรแกรมด้วยวิธีการต่อไปน้ี 1) Click Mouse ทีป่ มุ่ 2) เลือกคาสัง่ All Program > Adobe Photoshop CS6 รูปท่ี 2.16 แสดงขน้ั ตอนการเขา้ สโู่ ปรแกรม Adobe Photoshop CS6

- 13 - รปู ท่ี 2.17 แสดงหนา้ ต่างโปรแกรม Adobe Photoshop CS6 Menu bar Tool options bar Toolbo x Palettes รูปท่ี 2.18 แสดงหน้าจอหลักการทางานของโปรแกรม Adobe Photoshop CS6

- 14 - 2.2.5.2.2 เคร่ืองมือต่าง ๆ (Toolbox) รูปท่ี 2.19 แสดงเครื่องมือต่าง ๆ (Toolbox) Adobe Photoshop CS6 ตารางท่ี 2.1 ตารางอธิบายเคร่ืองมอื Tool ตา่ ง ๆ สญั ลกั ษณ์ ความหมาย Marquee Tool เปน็ การเลือกแบบสเี่ หลีย่ มผนื ผา้ , วงกลม, แถวขนาด 1 พกิ เซลส์ หรอื คอลมั น์ 1 พิก เซลส์ Move Tool ใช้เพื่อเลอื่ นส่วนที่เลือก หรือไวเ้ ล่ือน Layer และ Guide ต่างๆ Lasso Tool จะใชเ้ พอื่ สร้าง Selection แบบอสิ ระ, แบบ Polygonal (ตามจดุ ทค่ี ลิก) และ Magnetic (ดงึ เขา้ หาขอบรูปภาพ) Magic Wand Tool ใช้เลอื กพนื้ ทบ่ี ริเวณท่มี สี เี ดียวกนั Crop T Crop Tool ใช้ในการเลอื กบางสว่ นของรูปภาพ Slice Tool ใช้ในการสร้าง Slice Slice Selection Tool ใชเ้ ลอื ก Slice ท่ีคุณสร้างข้นึ มา

- 15 - ตารางท่ี 2.1 ตารางอธบิ ายเครื่องมอื 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 ใช้ลบรูปภาพหรือลบบางส่วนของพิกเซลส์และทาการเกบ็ ส่วนตา่ งๆ เป็น State ตา่ งๆ ใน History Palette Magic Eraser Tool ใช้ลบรปู ภาพบรเิ วณที่มสี เี ดยี วกนั ให้กลายเป็นพน้ื ทโี่ ปร่งใส (Transparent) โดยการ คลิกเพียงครง้ั เดยี ว Background Eraser Tool ใชล้ บรูปภาพบางสว่ นใหก้ ลายเป็นพน้ื ที่โปรง่ ใสโดยการลากเมาส์ Gradient Tools ใช้เพื่อไลส่ ีระหว่างสหี ลายๆ สี ในแบบตา่ งๆ Straight-line, Radial, Angle, Reflected และ Diamond Paint Bucket Tool ใช้ในการเติมสี Fill ในบริเวณทเ่ี ปน็ สีเดยี วกนั ดว้ ยสีของ Foreground Burn Tool ใชล้ ดความสวา่ งทาใหร้ ูปภาพดมู ืดลง

- 16 - ตารางท่ี 2.1 ตารางอธิบายเครอ่ื งมือ 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 ใช้เล่อื นภาพท่ีอยใู่ นหนา้ ต่างเดยี วกนั Zoom Tool ใชใ้ นการขยายและยอ่ ส่วนการแสดงภาพบนหนา้ จอ

- 17 - 2.2.5.2.3 การเปดิ ไฟล์ภาพ (Open) 1) คลกิ ท่เี มนูคาสั่ง File ที่แถบ Menu bar จากนัน้ เลือกคาสง่ั Open ต้องการเปดิ มาใช้งาน รปู ท่ี 2.20 แสดงการเปิดไฟลภ์ าพ (Open) 2) จะปรากฏ Dialog แสดงรายช่ือไฟล์ต่าง ๆ ดังภาพ เพ่ือเลือกไฟล์ท่ี 3) คลิกเลือกไฟลท์ ่ตี ้องการเปิดใช้งาน จากนน้ั คลิกปมุ่ Open Open รปู ที่ 2.21 แสดงการเปิดไฟลภ์ าพ (Open)

- 18 - 2.2.5.2.4 การสรา้ งไฟลใ์ หม่ (New) 1) คลิกที่เมนูคาส่ัง File ทีแ่ ถบ Menu bar จากนัน้ เลอื กคาสงั่ New รปู ท่ี 2.22 การสร้างไฟล์ใหม่ (New) 2) จะปรากฏ Dialog สาหรบั กาหนดคุณสมบัติต่าง ๆ ของไฟลภ์ าพ ดังน้ี รูปที่ 2.23 แสดงการกาหนดขนาดของกระดาษ - Name คือ ช่ือของชิ้นงาน สามารถกาหนดใหม่เองได้ ช่ือน้ีจะไป ระบทุ ีช่ อื่ ไฟล์ต่อไป - Preset คือ ขนาดงานท่ีโปรแกรมกาหนดมาให้ ซ่ึงมีหลากหลาย ขนาดใหเ้ ลอื ก หรอื สามารถกาหนดเองจากช่อง Width และ Height ได้

- 19 - - 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 เพ่ือเริ่มชน้ิ งานใหม่ 2.2.5.2.5 การบันทกึ ข้อมลู ลงบนไฟล์ (Save) หลังจากตกแต่งไฟล์ภาพเรียบร้อย จะต้องเก็บบันทึกข้อมูลลงบนไฟล์ (Save) สาหรับการเรียกใช้งานในคร้ังต่อไป โปรแกรมมีการบันทึกข้อมูลลงบนไฟล์ (Save) อยู่ 3 ลกั ษณะ คอื 1) Save บันทึกไฟลใ์ นรูปแบบ (Format) ปกติ 2) Save As บันทึกไฟล์ในรูปแบบ (Format) อื่น ๆ ได้ เช่น JPEG, BMP, GIF เปน็ ตน้ 3) Save for Web บันทึกไฟล์ในรูปแบบ (Format) สาหรับการใช้งานบน เว็บเชน่ ไฟล์ Html และไฟล์รูปภาพ JPEG, GIF, PGN เป็นตน้ 2.2.5.2.6 การใช้งานของ Save และ Save As 1) คลิกท่ีเมนูคาสั่ง File ท่ีแถบ Menu bar จากนั้นเลือกคาส่ัง Save หรือSave As หรือ Save for Web & Devices

- 20 - รปู ท่ี 2.24 แสดงการบนั ทกึ ขอ้ มูลลงบนไฟล์ (Save) 2) จะปรากฏ Dialog สาหรบั กาหนดคุณสมบตั ติ ่าง ๆ ของไฟล์ภาพ ดงั นี้ รปู ที่ 2.25 แสดงการบนั ทกึ ขอ้ มลู ลงบนไฟล์ (Save) - ชื่อไฟล์ (File Name) - รูปแบบของไฟล์ (Format) - กาหนดคุณสมบัติของการบันทึกไฟล์ (Save Options)

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

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

- 23 - 2.3.1.2 เริม่ ตนการสรางเว็บไซต 1) เขาสูระบบการใชงาน Wix.com เรียบรอยแลวใหคลิกปุม Create Your Website เพ่ือสรางเว็บไซต จากนนั้ ใหเลือกประเภทของเว็บไซตที่ตองการสราง รปู ท่ี 2.3 แสดงหนาตางเรม่ิ ตนการสรางเวบ็ ไซต์ 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.4 แสดงเลอื กวิธกี ารสรางเว็บไซต wix 2.3.1.4 Template ของ Wix.com นั้นจะอพั เดทรูปแบบใหม ๆ มีท้ังแบบมีคาใช้จ่าย และแบบท่ีไมมี คาใชจายโดยจะแบงเปนประเภทตาง ๆ ใหเลือกรูปแบบ Templates ที่ตองการ หรือ ใส Keyword เพอื่ คนหาท่ีชอง 2.3.1.5 สามารถดูตัวอยาง Templates ของเว็บไซตกอนตัดสินใจเลือกใช้งานไดดวย การคลิกปุม View แตถาตองการใชงาน Templates นัน้ ๆ ใหคลกิ ปมุ Edit

- 24 - รปู ท่ี 2.5 แสดงเลอื ก Templates ให้กบั เว็บไซต wix 2.3.1.6 ระบบจะทาการ Generate หนาเว็บไซต และเม่ือเสร็จแลวจะไดผลดัง ภาพด้านลางซง่ึ เรยี กวา Wix Editor ซึง่ จะมสี วนประกอบตาง ๆ ดงั น้ี Page Tools Hel Preview s p Upgra Site de save Pub lish รูปที่ 2.6 แสดงหน้าหลักการทางานของโปรแกรมสร้างเวบ็ ไซต์สาเรจ็ รปู wix 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 กาหนดรปู แบบการแสดงหนาจอ ซึ่งมีทั้งรูปแบบมือถือ และรูปแบบ เคร่ืองคอมพวิ เตอร (Desktop) ใหเลือกใชงาน 7) Save สาหรับบนั ทกึ การแกไขปรับปรงุ Page 8) Preview สาหรับดู Web Page ในมุมมองเสมอื นจริง 9) Publish สาหรับประกาศใชเม่อื สราง Web Site เสรจ็ แลว

- 25 - Pages Background Add App Market My Uploads Start Blogging Booking รูปท่ี 2.7 แสดงหนา้ สว่ นเมนูโปรแกรมสรา้ งเวบ็ ไซตส์ าเรจ็ รูป wix 2.3.1.8 Side Menu ประกอบดวย 1) Pages เมนูและหน้าเพจ เพ่ิมลบหน้าเว็บ สามารถใส่เป็นเมนูย่อยได้ พร้อมกาหนด SEO แต่ละหนา้ 2) Background การออกแบบและแกไขรปู แบบพ้นื หลงั หนาเว็บไซต์ 3) Add สาหรับการเพิม่ Component ตางๆ ลงใน Page 4) App Market การสงเสรมิ การตลาดของ Wix เพื่อเพ่ิมเขาไปในเว็บไซต 5) My Uploads การอัพโหลดรปู ภาพ วิดโี อ รปู แบบตัวอักษร และเอกสาร 6) Start Blogging เรมิ่ ตนการสรางบล็อคบนเวบ็ ไซต์ 7) Booking การจองทางออนไลน์เป็นวิธีที่สะดวกสบายในการค้นหาและ เปน็ การจองผา่ นอินเทอรเ์ นต็ 2.3.1.9 การเพิม่ ขอ้ ความลงในหนา Web และการลบขอ้ ความ เลือกที่ Text 1) ขอความ (Text) การเพ่ิมขอความ คลิกปุม Add จากนัน้ ใหคลกิ เลอื กรปู แบบของ ขอความท่ตี องการ ซงึ่ มที ั้งหมด 3 รปู แบบ คือ

- 26 - - Themed Text คือรปู แบบขอความที่เปนแกนขอความ - Title คือรูปแบบขอความทเี่ ปนหัวขอ - Paragraphs คอื รปู แบบขอความทีเ่ ปนเน้ือหา 2) จะแสดงหนาตาง Text Settings และกรอบขอความข้ึนมาให้คลิกเลือก Edit Text เพ่ือทาการแกไขขอความตามเน้ือหาท่ีตองการ ถาแกไขเสร็จแลวใหคลิกปุมเคร่ืองหมาย กากบาท 3) ถาตองการเพ่ิมลูกเลนหรือ Effect ใหกับขอความ คลิกปุมธีมข้อความ และเลือก รูปแบบทีต่ องการ หรือจะคลิกทชี่ อื เรอ่ื ง เพ่อื ทาการปรับแตงตัวอักษร 4) การลบขอความใหเลือกขอความที่ตองการลบแลวคลิกขวาเลือกคาสั่ง Delete หรือคลกิ ปมุ Delete ท่ี Keyboard เพ่อื ลบขอความน้ันท้ิง รูปท่ี 2.8 แสดงการเพม่ิ ข้อความ

- 27 - 2.4 งานวจิ ัยทีเ่ กย่ี วข้อง สุธรรม ธรรมทัศนานนท์ (2553 : 26-27) ได้อธิบายว่าการบริหารสถานศึกษา คือ การดาเนินงาน ของกลมุ่ บคุ คล เพ่ือพฒั นาคนให้มีคุณภาพทั้งความรู้ความคิด ความสามารถ และความเป็นคนดี และจะต้อง มกี ารดาเนนิ การในการเรยี นการสอนการจดั กิจกรรม การวัดผล การจัดอาคารสถานที่ และพัสดุครุภัณฑ์ การสรรหาบุคคลมาดาเนินการ หรือมาทาการสอนในสถาบันการศึกษา การปกครองนักเรียน เพื่อให้ นกั เรียนเปน็ คนดมี ีวนิ ัยและอื่น ๆ ซ่ึงการดาเนินงานเหล่าน้ีรวมเรียกว่า “ภารกิจทางการบริหารการศึกษา” หรอื “งานบรหิ ารการศกึ ษา” มณีรัตน์ พลิ าพรม (2557 : 10) ได้ให้ความหมายของการบริหารไว้ว่า การบริหาร หมายถึงกระบวน การทางานโดยให้บุคคลต้ังแต่ 2 คนข้ึนไปร่วมมือกันดาเนินการให้บรรลุวัตถุประสงค์อย่างใดอย่างหน่ึง หรือหลายๆ อย่างเป็นระบบ เป็นขั้นตอนให้บรรลุวัตถุประสงค์ท่ีกาหนดไว้อย่างมีประสิทธิภาพ และ ประสิทธิผล จากการทบทวนวรรณกรรมเก่ียวกับความหมายของการบริหาร สรุปได้ว่า การบริหาร หมายถึง การดาเนินการปฏิบัติงานของบุคคลต้ังแต่สองคนข้ึนไป โดยมีวัตถุประสงค์ร่วมกันแต่กิจกรรม นนั้ จะเป็นไปในลกั ษณะทแี่ ตกต่างกัน คือมีฝ่ายหน่ึงเป็นผู้ทาหน้าที่ตัดสินใจส่ังการอีกฝ่ายหนึ่งทาหน้าที่ ปฏิบัติเพื่อให้บรรลุวัตถุประสงค์อย่างใดอย่างหนึ่งท่ีบุคคลในองค์การร่วมกันวางไว้โดยมีระเบียบแบบ แผน หลกั ปฏบิ ตั มิ กี ารใชท้ รพั ยากรและเทคนิคตา่ ง ๆ อยา่ งเหมาะสม หวน พินธุพันธ์ (2549 : 3 กลา่ วว่า การบริหารการศึกษา คือกิจกรรมที่บุคคลหลายคนร่วมมือ กนั ดาเนินการ เพือ่ พฒั นาเด็ก เยาวชน ประชาชน หรือสมาชิกของสังคมในทุก ๆ ด้าน เช่น ความสามารถ ทัศนคติพฤติกรรม ค่านิยมหรือคุณธรรม ท้ังในด้านการสังคมการเมือง และเศรษฐกิจ เพ่ือให้บุคคล ดังกล่าว เป็นสมาชิกท่ีดีและมีประสิทธิภาพของสังคม โดยกระบวนการต่าง ๆ ท้ังที่เป็นระเบียบแบบ แผนและไม่เป็นระเบียบแบบแผน และได้กล่าวอีกนัยหนึ่งว่า การบริหารการศึกษา คือ กิจกรรมต่าง ๆ ที่บุคคลหลายคนร่วมมือกันดาเนินการ เพ่ือพัฒนาสมาชิกของสังคมในทุกๆ ด้านนับต้ังแต่บุคลิกภาพ ความรู้ความสามารถ พฤติกรรมและคุณธรรม เพื่อให้มีค่านิยมตรงกันกับความต้องการของสังคม โดย กระบวนการต่าง ๆ ที่อาศัยการควบคุมสิ่งแวดล้อมให้มีต่อบุคคล เพ่ือให้บุคคลพัฒนาตรงตามเป้าหมาย ของสงั คมทีต่ นดารงชีวติ อยู่ อรพรรณ รัตนวงศ์ (2551 : 9) กล่าวว่า การจัดการศึกษาปฐมวัย เป็นการจัดการศึกษาให้แก่ เด็กต้งั แต่แรกเกดิ จนถึง 6 ปเี พราะเดก็ ในวัยนเี้ ป็นวยั ทส่ี าคญั ตอ่ การวางรากฐานบุคลิกภาพ และพัฒนา การทางสมอง ซึง่ จะต่างไปจากการศึกษาระดับอ่ืนเพ่ือมุ่งหวังให้เด็กได้รับการพัฒนาในทุก ๆ ด้านเพ่ือ เปน็ พ้ืนฐานในการที่จะก้าวเข้าสู่ระดับก่อนประถมศึกษา ซ่ึงถือเป็นจุดสาคัญท่ีควรมีการวางแผน และ จดั โปรแกรมการศึกษาให้เหมาะสม และสอดคลอ้ งกบั ธรรมชาตขิ องเดก็ สมศรี สายอุราช (2556 : 10) กล่าวว่า การจัดการศึกษาปฐมวัย หมายถึง การจัดการศึกษา ให้แก่ เด็กต้ังแตแ่ รกเกิดจนถึง 6 ปีเพื่อเปน็ การดูแลและสร้างเสรมิ เด็กให้มีพัฒนาเต็มศักยภาพด้วยการ เรยี นรทู้ ่ีถูกตอ้ งชัดเจน ตาม ความสามารถและความเหมาะสมกับวัยของเด็ก ซึ่งจะทาให้เด็กเกิดการพัฒนา ไปได้อย่างเต็มที่ทุกด้าน จากการทบทวนวรรณกรรมเกี่ยวกับความหมายของการจัดการศึกษาสาหรับ เด็กเลก็ สรุปไดว้ ่า การจดั การศึกษาปฐมวัย คือ การจัดการศึกษาสาหรับเด็กที่มีอายุตั้งแต่แรกเกิดจนถึง 6 ปซี ึ่งการจดั การศึกษาจะมีลักษณะท่ีแตกต่างกันไปเพราะเด็กในวัยน้ีเป็นวัยที่สาคัญต่อการวางรากฐาน บุคลกิ ภาพ และการพัฒนาทางสมอง การจัดการศึกษาสาหรบั เดก็ จงึ ต้องสง่ เสริมกระบวนการเรยี นรู้

-28- บทที่ 3 วิธกี ารดาเนินงาน การสร้างเวบ็ ไซต์ศนู ย์พฒั นาเด็กเล็กบ้านคาฮี ตาบลโพนทราย อาเภอเมือง จังหวัดมุกดาหาร เพอื่ สร้างเวบ็ ไซต์ของศนู ยพ์ ัฒนาเดก็ เลก็ บ้านคาฮี ตาบลโพนทราย อาเภอเมือง จงั หวัดมุกดาหาร และ การเผยแพร่ข้อมลู ข่าวสารแบบเต็มรปู แบบของศนู ย์พัฒนาเด็กเล็กบ้านคาฮี สกู่ ารเผยแพรข่ อ้ มูลข่าวสาร ผา่ นระบบเครือขา่ ยอินเทอร์เน็ต โดยระบบจะสามารถจัดเก็บข้อมูล เพื่อชว่ ยในการพัฒนาปรบั ปรุง แก้ไข และตัดสนิ ใจต่อผบู้ รหิ าร และบุคลากร โดยการออกแบบระบบแบ่งออกเปน็ ข้นั ตอนต่าง ๆ ดงั นี้ 3.1 ประชากร และกลุ่มตวั อย่าง 3.2 เคร่ืองมอื ที่ใช่ในการพฒั นาระบบ/วจิ ัย 3.3 แผนการดาเนนิ งาน 3.4 การศกึ ษาระบบงานเดมิ 3.5 การวเิ คราะหค์ วามต้องการของผู้ใช้ 3.6 การวิเคราะห์ และออกแบบระบบ 3.1 ประชากรและกล่มุ ตวั อย่าง 3.1.1 ประชากร ประชากรในการศึกษาในครงั้ นีค้ ือ ประชากรหมู่ 7 บ้านคาฮี, หมู่ 11 บ้านบูรพาเหนือ และหมู่ 12 บ้านดอนม่วง ตาบลโพนทราย อาเภอเมอื ง จังหวัดมุกดาหาร จานวน 738 คน 3.1.2 กลมุ่ ตัวอย่าง กลุ่มตัวอย่าง คือผู้ปกครองของเด็กท้ัง 3 หมู่บ้าน ได้แก่ หมู่ 7 บ้านคาฮี, หมู่ 11 บ้านบูรพาเหนือ และหมู่ 12 บา้ นดอนม่วง จานวน 45 คน ซึ่งไดมาจากการสุ่มตัวอย่างแบบแบ่งกลุ่ม (Stratified Sampling) 3.2 เคร่อื งมอื ทใ่ี ช่ในการพฒั นาระบบ/วิจัย 3.2.1 เครอ่ื งมือในการพัฒนาระบบ (Hardware) 3.2.1.1 Hardware 1) Intel core i3 2) HDD 1 TB 3) DDR3 4 GB Memory

-29- 3.2.2 เคร่อื งมือในการพฒั นาระบบ (Software) 3.2.2.1 Software 1) ระบบปฏิบัติการ Windows 10 Pro 2) เว็บไซตส์ าเร็จรูป Wix 3) โปรแกรม Adobe Photoshop CS6S 4) โปรแกรม microsoft word 2010 5) โปรแกรม SPSS 3.2.3 เคร่อื งมือการวิจัย/วิธีการวเิ คราะหขอมูล 3.2.3.1 การสร้างเคร่ืองมือในการเก็บรวบรวมข้อมูล ในการศึกษาครั้งน้ี ผู้ศึกษา ได้ใช้แบบประเมนิ ความพงึ พอใจในการชม เว็บไซต์ศนู ย์พัฒนาเด็กเลก็ บ้านคาฮี ตาบลโพนทราย อาเภอเมือง จังหวัดมุกดาหาร ซ่ึงสร้างข้ึนมาเป็นเคร่ืองมือในการเก็บรวบรวมข้อมูลเพ่ือนามาวิเคราะห์ โดยมี รายละเอียด การสร้างเคร่ืองมือ ดงั น้ี 3.2.3.2 การสรา้ งแบประเมนิ ความพึงพอใจ ในการสร้างแบประเมินความพึงพอใจใน การเขา้ ชมเว็บไซตศ์ ูนย์พัฒนาเด็กเล็กบา้ นคาฮี ตาบลโพนทราย อาเภอเมืองจังหวัดมุกดาหาร ให้ครอบคลุม เนื้อหา ท่ีต้องการศึกษา โดยออกแบบเป็นแบบมาตราส่วนประมาณค่า (Rating Scales) โดยใช้แบบ ประเมินความพึงพอใจในการเข้าใช้บริการเว็บไซต์ศูนย์พัฒนาเด็กเล็กบ้านคาฮี ตาบลโพนทราย อาเภอเมือง จังหวัดมุกดาหาร ท่ีผ่านการประเมินความตรงเชิงโครงสร้างและเน้ือหาแล้วโดยแบบ ประเมินความพึงพอใจที่ปรับปรุงนั้นได้ให้ผู้ตอบแบบประเมินความพึงพอใจแสดงความเห็นเก่ียวกับ ความพงึ พอใจ ในการใหช้ มเว็บไซต์ศูนย์พัฒนาเดก็ เล็กบ้านคาฮี ตาบลโพนทราย อาเภอเมืองจังหวัด มกุ ดาหาร โดยมหี ลักเกณฑ์ในการให้คะแนนแบบประเมินความพึงพอใจในการเข้าใชบ้ ริการ 5 ระดบั ดังนี้ 5 หมายถึง มคี วามพึงพอในในระดับ ดีมาก 4 หมายถงึ มคี วามพึงพอใจในระดับ ดี 3 หมายถึง มคี วามพงึ พอใจในระดับ ปานกลาง 2 หมายถงึ มีความพงึ พอใจในระดบั พอใช้ 1 หมายถงึ มคี วามพงึ พอใจในระดับ ปรบั ปรุง 3.2.3.3 นาแบบประเมินความพึงพอในไปทดลองใช้ (Try out) กับกลุ่มประชากรท่ีเป็น ตัวอย่างท่ีจะศึกษา จานวน 50 คน เพ่ือหาความเชื่อม่ัน (Reliability) โดยวิธีหาค่าสัมประสิทธิ์ สหสัมพันธ์ แอลฟา (Alpha Coefficient) ได้ค่าเช่ือมั่นเท่ากับ 0.7957 และนาแบบประเมินความพึงพอใจ นนั้ ไปใชใ้ นการเกบ็ รวบรวมขอ้ มลู จากประชากรทตี่ อ้ งการศกึ ษาต่อไป สาหรับลักษณะของแบบประเมินความพึงพอใจในการเข้าใช้บริการเว็บไซต์ศูนย์พัฒนา เดก็ เลก็ บา้ นคาฮี ตาบลโพนทราย อาเภอเมือง จงั หวดั มุกดาหาร ท่ใี ชใ้ นการศกึ ษาแบ่งออกเปน็ 2 ตอนดังนี้ ตอนท่ี 1 ความพงึ พอใจในการออกแบบเว็บไซต์ ตอนที่ 2 ขอ้ มูลความพงึ พอใจในการเข้าใช้บริการเว็บไซต์ศูนย์พัฒนาเด็กเล็ก บา้ นคาฮี ตาบลโพนทราย อาเภอเมอื ง จงั หวัดมุกดาหาร

-30- 3.2.4 การเกบ็ รวบรวมข้อมูล นาเวบ็ ไซตท์ ี่ได้ผา่ นการประเมินผลคุณภาพ/ประสิทธิภาพ และแก้ไขความถูกต้อง ตามขอ้ เสนอแนะของผู้เช่ียวชาญเผยแพร่ผ่านเครือข่ายอินเทอร์เน็ตโดยใช้ชื่อโดเมนเมน (Domain name) www.soonpattana123.wixsite.com เพื่อใช้กับกลุ่มตัวอย่างท่ีเข้าใช้งานเว็บไซต์ประเมินความพึงพอใจ ตามระยะเวลาท่ีกาหนด นาคะแนนผลการประเมิน จากการตอบแบบสอบถามออนไลน์ ของผู้เข้าใช้ บรกิ ารเว็บไซตศ์ นู ย์พัฒนาเด็กเล็กบ้านคาฮี ตาบลโพนทราย อาเภอเมือง จงั หวัดมุกดาหาร มาวิเคราะห์ หาค่าเฉล่ีย และส่วนเบี่ยงเบนมาตรฐาน เพื่อนาไปสรุปผลความพึงพอใจ ท่ีได้จากการใช้งานเว็บไซต์ ศูนย์พฒั นาเดก็ เล็กบา้ นคาฮี ตาบลโพนทราย อาเภอเมอื ง จงั หวัดมกุ ดาหาร ทส่ี ร้างขนึ้ 3.2.5 ขนั้ ตอนการวิเคราะห์ขอ้ มูล การศึกษาความพึงพอใจในการชมศูนย์พัฒนาเด็กเล็กบ้านคาฮี ตาบลโพนทราย อาเภอเมือง จังหวัดมุกดาหาร โดยนาข้อมูลที่ได้จากการเก็บรวบรวมข้อมูล มาวิเคราะห์ด้วยโปรแกรม SPSS for Windows (โปรแกรมสาเร็จรูป เพ่ือการศึกษาทางสังคมศาสตร์ Statistical Package for the Social Science) 3.2.6 สถติ ทิ ่ีใชใ้ นการศึกษา 3.2.6.1 ในการศึกษาครั้งน้ีผู้จัดทาได้ใช้สถิติ เพ่ืออธิบายลักษณะของกลุ่มตัวอย่าง ในเร่ืองเก่ียวกบั ปัจจัยทวั่ ไปดา้ นบคุ คล ของผตู้ อบแบบประเมิน และร้อยละของความพึงพอใจ โดยการหาค่า แจกแจงความถ่ี การหาค่าร้อยละ การคา่ เฉลีย่ ส่วนเบ่ยี งเบนมาตรฐาน 3.2.6.2 การวเิ คราะห์ระดับความพึงพอใจของผู้ใช้บริการ ผู้จัดทาได้ทาการวิเคราะห์ โดยใชค้ ่าเฉลี่ย และกาหนดเกณฑ์ในการตีความหมายไว้ ดงั น้ี ค่าเฉลี่ย 1.00 – 1.49 หมายถึง มคี วามพงึ พอใจในระดบั ปรับปรุง ค่าเฉลีย่ 1.50 – 2.49 หมายถงึ มคี วามพงึ พอใจในระดับ พอใช้ คา่ เฉล่ยี 2.50 – 3.49 หมายถงึ มคี วามพึงพอใจในระดับ ปานกลาง คา่ เฉลีย่ 3.50 – 4.49 หมายถึง มคี วามพงึ พอใจในระดับ ดี คา่ เฉลย่ี 4.50 – 5.00 หมายถึง มคี วามพึงพอใจในระดบั ดมี าก 3.2.6.3 ข้อเสนอแนะในการให้บริหาร จากผู้ตอบแบบประเมินความพึงพอใจ ผู้จัดทาใช้การวิเคราะห์เชิงคุณภาพ

-31- 3.3 แผนการดาเนินงาน 3.3.1 ระยะเวลาในการพฒั นาระบบ เวลาเริ่มต้นการทางานในแต่ละวันไม่แน่นอน โดยเฉล่ีย 1 วัน ทางาน 6 ช่ัวโมง รามท้ังสิ้น ในการศึกษาและการพัฒนาเว็บไซต์ใช้เวลาโดยประมาณ 4 เดือน (1 กรกฎาคม 2563 ถึง 23 ตลุ าคม 2563) ซ่งึ สามารถแสดงรายละเอียดตารางแผนการดาเนินงาน ดังตอ่ ไปน้ี ตารางท่ี 3.1 แสดงระยะเวลาในการพัฒนาระบบ กิจกรรม/ ระยะเวลาดาเนินงาน (สัปดาห์ท)่ี ขนั้ ตอนการดาเนินงาน กรกฎาคม สิงหาคม กันยายน ตุลาคม 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 ขั้นเตรยี มการ สอบเค้าโครง ศกึ ษาข้อมลู ข้นั ดาเนนิ การ สรา้ งช้นิ งาน ตรวจสอบความสมบรู ณ์ ขน้ั สรุปและประเมินผล สรุปผล จัดทารูปเล่ม นาเสนอ/เผยแพร่ 3.4 การศึกษาระบบงานเดิม จากการสอบถามจากผู้ปกครองเด็ก ท่ีนามาเด็กมาเรียนศูนย์พัฒนาเด็กเล็กบ้านคาฮี ตาบลโพนทรายอาเภอเมือง จังหวัดมุกดาหาร ไม่มีช่องทางในการรับรู้ข่าวสาร กิจกรรมการจัดการ เรยี นการสอน จากปญั หาดงั กลา่ วสามารถเขียนเป็นแผนภูมิก้างปลา (Cause-Effect Diagram) ได้ดังน้ี ครูผสู้ อน ไม่มชี ่องทางในการ รบั ความรูเ้ พมิ่ เตมิ ไมม่ ีช่องทางในการ แลกเปลี่ยนความรู้ ไม่มีช่องทางในการ ไมม่ไมชี ม่ ่อชี งอ่ ทงทาางงใในนกกาารร ศูนยพ์ ัฒนาเด็กเล็กบา้ นคาฮี แลกเปลี่ยนความรู้ รบั รคบั วคาวมามรรเู้ พู้เพ่ิมม่ิ เเตตมิ ิม ตาบลโพนทราย อาเภอเมอื ง จงั หวัดมุกดาหาร ยงั ไม่มเี วบ็ ไซต์ ผูป้ กครอง เกย่ี วกบั ศูนยพ์ ัฒนาเดก็ เล็ก รูปที่ 3.1 แสดงรูปภาพแผนภมู กิ ้างปลา

-32- 3.5 การวเิ คราะห์ความตอ้ งการของผูใ้ ช้ 3.5.1 สามารถเผยแพรข่ ้อมูล ประชาสัมพันธ์ศนู ย์พฒั นาเด็กเล็กบ้านคาฮี ตาบลโพนทราย อาเภอเมือง จังหวดั มุกดาหาร 3.5.2 สามารถติดตามผลการดาเนนิ งานขององค์กรได้อยา่ งตอ่ เนือ่ ง 3.5.3 สามารถลดความซ้าซอ้ นในการเผยแพรข่ อ้ มลู ข่าวสาร 3.5.4 สามารถลดความยุง่ ยากในการเก็บรวบรวมข้อมูล 3.5.5 สามารถจัดเก็บข้อมลู เพื่อในการพัฒนา ปรับปรุง แก้ไข 3.5.6 สามารถสมัครเรยี นทางออนไลนไ์ ด้ 3.6 การวเิ คราะหแ์ ละออกแบบระบบ 3.6.1 แนวทางและวธิ กี ารพฒั นา 3.6.1.1 ระบบงานสาหรบั ผู้ดูแลระบบ ผู้ดูแลระบบสามารถจัดการเก็บข้อมูลในการ เพ่ิม ลบ และแก้ไขขอ้ มูลได้ 3.6.1.2 ระบบงานสาหรับสมาชกิ ผใู้ ชท้ ี่เป็นสมาชิกและไมเ่ ปน็ สมาชกิ สามารถเขา้ มา ดูเว็บไซต์ศนู ยพ์ ฒั นาเดก็ เลก็ บา้ นคาฮี ตาบลโพนทราย อาเภอเมือง จังหวัดมุกดาหาร ได้และสามารถ สมคั รเรียนทางออนไลน์ได้ 3.6.2 การออกแบบระบบ การจัดทาเว็บไซต์ศูนย์พัฒนาเด็กเล็กบ้านคาฮี ตาบลโพนทราย อาเภอเมือง จังหวัดมุกดาหาร ไดส้ ร้างเวบ็ ไซตแ์ บบเรยี บง่าย เข้าถึงได้ และเข้าใจอย่างถี่ถ้วน ในหน้าแรก มีเน้ือหา การประชาสัมพันธ์ ข้อมูลข่าวสาร หน้าการเรียนการสอน มีการโพสต์ประสาสัมพันธ์ เก่ียวกับการเรียน การสอน และกจิ กรรมต่าง ๆ หน้าเก่ียวกับโรงเรียน มีท่ีอยู่ ประวัติ และคาขวัญของศูนย์พัฒนาเด็กเล็กฯ หน้าติดต่อเรา จะมีเน้ือหาเก่ียวกับครูผู้ดูแลเด็ก ประวัติส่วนตัว ประวัติการศึกษา ประวัติการอบรม และยังมไี ฟล์งานตา่ ง ๆ ให้ดาวน์โหลด โดยเลือกนาเสนอเฉพาะส่ิงที่ต้องการ นาเสนอจริง ๆ ในรูปแบบ ทห่ี ลากหลาย โดยอาจจะเปน็ สสี นั กราฟกิ ภาพเคลอื่ นไหว หรือตัวอักษรแตล่ ะหนา้ บนเว็บไซต์มีความ คล้ายคลึงกนั และเป็นแนวเดยี วกนั ไปตลอดทั้งเวบ็ ไซต์ และมคี วามโดดเดน่ เป็นเอกลักษณ์ 3.6.2.1 แผนผังโครงสร้างเว็บไซต์ศูนย์พัฒนาเด็กเล็กบ้านคาฮี ตาบลโพนทราย อาเภอเมอื ง จงั หวัดมุกดาหาร ดังนี้ 1) หนา้ แรก เปดิ รบั สมคั รนักเรยี น กรอกข้อมูลผ้ปู กครอง ประเมินการดูแลเดก็ 2) การเรียนการสอน รปู การสอน รูปการเรยี น

-33- รปู การทากิจกรรม 3) เกีย่ วกบั โรงเรยี น ท่ีอยู่ของศูนยพ์ ฒั นาเด็กเล็กฯ ประวัตขิ องศูนย์พฒั นาเด็กเลก็ ฯ คาขวญั ของศูนยพ์ ฒั นาเด็กเล็กฯ 4) ตดิ ต่อเรา หัวหนา้ ศูนย์พัฒนาเดก็ เลก็ ฯ ครผู ูด้ ูแลเด็ก 1 ครผู ู้ดแู ลเด็ก 2 เขา้ สูเ่ ว็บไซต์ หนา้ แรก การเรียนการสอน เกยี่ วกับโรงเรียน ติดตอ่ เรา เปดิ รับสมัครนกั เรยี น รูปการสอน ทอ่ี ย่ขู องศูนย์ฯ หวั หนา้ ศูนย์ฯ กรอกข้อมลู ผ้ปู กครอง รูปการเรียน ประวัตขิ องศูนยฯ์ ครผู ดู้ แู ลเดก็ 1 ประเมินการดแู ลเดก็ รูปการทากจิ กรรม คาขวญั ของศนู ยฯ์ ครูผดู้ แู ลเด็ก 2 รูปที่ 3.2 แสดงแผนผังโครงสร้างการทางานของเวบ็ ไซต์ศูนย์พัฒนาเด็กเล็กบา้ นคาฮี ตาบลโพนทราย อาเภอเมือง จังหวดั มุกดาหาร

-34- รปู ท่ี 3.3 แสดงรูป E-R Diagram Model ระบบงานใหม่ รปู ท่ี 3.4 แสดงรปู E-R Diagram Model สมัครเรียนออนไลน์

-35- รูปท่ี 3.5 แสดงรปู E-R Diagram Model ใบรายงานตวั ออนไลน์ รูปที่ 3.6 แสดงรูป E-R Diagram Model การประเมนิ พัฒนาเด็ก

-36- ส่วนหัวของเวบ็ ไซต์ สว่ นแสดงเมนู สว่ นแสดงเน้ือหา แบบฟอรม์ ตา่ ง ๆ สว่ นท้ายของเว็บไซต์ รปู ท่ี 3.7 แสดง User Interface Design

บทที่ 4 ผลการพฒั นาระบบ / ผลการวิเคราะหข์ ้อมูล การสรา้ งเวบ็ ไซตศ์ นู ย์พฒั นาเดก็ เลก็ บ้านคาฮี ตาบลโพนทราย อาเภอเมือง จังหวัดมุกดาหาร ผจู้ ดั ทาไดใ้ ช้เครอ่ื งมอื ต่าง ๆ ในการดาเนนิ งาน และไดผ้ ่านการทดสอบผลการพัฒนาตลอดจนผลการ สารวจความพงึ พอใจของกล่มุ ผใู้ ชง้ านที่มสี ว่ นเก่ยี วขอ้ งในการเข้าใช้บริการเว็บไซต์ศูนย์พัฒนาเด็กเล็ก บ้านคาฮี ตาบลโพนทราย อาเภอเมือง จังหวดั มกุ ดาหาร ดังนี้ 4.1 ผลการพฒั นาระบบ 4.2 ผลการวิเคราะหข์ อ้ มูล 4.1 ผลการพัฒนาระบบ ในการพัฒนาระบบมกี ารจาลองเครื่องคอมพิวเตอร์เป็นเคร่ือง Server และเคร่ืองClient เขา้ มาทางานกบั การสร้างเว็บไซต์ศูนย์พัฒนาเด็กเล็กบ้านคาฮี คณะผู้จัดทาได้เลือกใช้ภาษา HTML ในการ พฒั นาระบบและใช้ Appserv-win 32-5.10 ในการจาลอง Server จากการสร้างเว็บไซต์ศูนย์พัฒนาเด็กเล็กบ้านคาฮี ส่งผลให้การเผยแพร่ความรู้ ข้อมูล ข่าวสารตลอดจนเป็นส่ือในการแลกเปล่ียนข้อมูลข่าวสารได้รับความสะดวกรวดเร็ว โดยได้มีการ ทดสอบการใชง้ านระบบซ่งึ สามารถแบง่ ออกเปน็ 13 สว่ น คือ 4.4.1 การทดสอบหนา้ แรก 4.4.2 การทดสอบหน้าบคุ ลากร 4.4.3 การทดสอบหน้าโครงสร้างผบู้ ริหาร 4.4.4 การทดสอบหน้าเก่ียวกับโรงเรียน 4.4.5 การทดสอบหนา้ ตราสัญลักษณ์ 4.4.6 การทดสอบหนา้ ประวตั ิโรงเรยี น 4.4.7 การทดสอบหนา้ ปรัชญาโรงเรยี น 4.4.8 การทดสอบหน้าวิสยั ทัศน์ 4.4.9 การทดสอบหนา้ อตั ลักษณ์ 4.4.10 การทดสอบหนา้ สญั ลักษณ์ 4.4.11 การทดสอบหน้าเอกลกั ษณ์ 4.4.12 การทดสอบหนา้ คาขวญั 4.4.13 การทดสอบหนา้ อุดมการณ์ 4.4.14 การทดสอบหน้าจุดเด่น/จดุ เนน้ 4.4.15 การทดสอบหน้าแผนท่ีโรงเรยี น 4.4.16 การทดสอบหน้าข้อมูลห้องเรียน 4.4.17 การทดสอบหน้ารปู ภาพ/กจิ กรรม 4.4.18 การทดสอบตดิ ต่อเรา

-38- 4.4.1 การทดสอบหน้าแรก รปู ท่ี 4.1 แสดงการทดสอบหน้าแรก ตารางที่ 4.1 การทางานหน้าแรก การทางาน เง่ือนไขการทดสอบ ผลการทางาน หนา้ หลัก การแสดงข้อมูลประเภท ข้อความ ผลการทดสอบไม่พบปัญหา การแสดงข้อมูลประเภทรปู ภาพ ผลการทดสอบไม่พบปัญหา การเชอื่ มโยงลงิ ค์ขอ้ มลู เมนูตา่ งๆ จากการทดสอบพบ เมนูตา่ งๆ ในหนา้ หลัก จะตอ้ งนาเข้าหน้า สามารถเช่อื มโยงไปยงั ลงิ ค์หน้า เพจย่อยถกู ต้อง เพจอืน่ ไดถ้ ูกตอ้ งตามเงือ่ นไข 4.4.2 การทดสอบหน้าบุคลากร รปู ท่ี 4.2 แสดงการทดสอบหนา้ บคุ ลากร

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