การสร้างเว็บไซต์โรงเรียนบ้านเหล่าคราม

การสร้างเว็บไซตโ์ รงเรียนบ้านเหล่าคราม ตาบลคาอาฮวน อาเภอเมอื ง จงั หวัดมกุ ดาหาร Creation Website of Banlaokhram School Kam-Ahuan Sub-district, Mueang District, Mukdahan Province นางสาววราภรณ์ สุวรรณศรี นางสาวสลินดา สีระโคตร์ โครงการนเ้ี ป็นสว่ นหนงึ่ ของการศึกษาตามหลกั สตู รประกาศนียบตั รวิชาชีพ (ปวส.) สาขาวชิ าคอมพิวเตอร์ธรุ กิจ วิทยาลยั การอาชพี นวมนิ ทราชนิ มี ุกดาหาร ปกี ารศึกษา 2563

ก ใบรบั รองโครงการ หวั ขอ้ โครงการ การสรา้ งเวบ็ ไซต์โรงเรยี นบา้ นเหลา่ คราม ตาบลคาอาฮวน อาเภอเมืองมุกดาหาร จงั หวัดมุกดาหาร Creation Website of Banlaokhram School Kam-Ahuan Sub-district, Mueang District, Mukdahan Province ผดู้ าเนนิ โครงการ นางสาววราภรณ์ สวุ รรณศรี รหสั ประจาตัวนักศกึ ษา 6232040017 นางสาวสลนิ ดา สีระโคตร์ รหสั ประจาตวั นักศึกษา 6232040020 ครูทีป่ รกึ ษา นายวชั รนิ ทร์ พนั ธส์ าโรง ครูผู้สอน นางประเสริฐศรี สทุ ธพิ นั ธ์ สาขาวชิ า คอมพิวเตอร์ธรุ กจิ ปกี ารศึกษา 2563 ……………………………………………………………………………………………………………………………………………….. คณะกรรมการใหค้ วามเหน็ ชอบโครงการฉบับน้ี ................................................... กรรมการ / ครทู ปี่ รกึ ษาโครงการ (นายวัชรนิ ทร์ พนั ธ์สาโรง) .................................................... กรรมการ / ครผู สู้ อนวชิ าโครงการ (นางประเสรฐิ ศรี สุทธิพันธ)์ .................................................... ประธานกรรมการ / หัวหน้าสาขาวิชาคอมฯ (นางสดุ ารัตน์ วงศ์คาพา) คณะกรรมการสาขาวิชาคอมพิวเตอร์ธุรกิจ วิทยาลัยการอาชีพนวมินทราชินีมุกดาหาร ได้อนุมัติโครงการน้ี เป็นส่วนหน่ึงของการศึกษาตามหลักสูตรประกาศนียบัตรวิชาชีพช้ันสูง (ปวส.) พทุ ธศกั ราช 2557 สาขาวิชาคอมพวิ เตอรธ์ รุ กจิ .................................................... ประธานกรรมการฝ่ายวิชาการ (นายปัญญา มุ่งด)ี วันท่ี .......เดอื น .................พ.ศ..........

ข ใบแห่งลขิ สทิ ธิ์ หวั ขอ้ โครงการ การสร้างเว็บไซต์โรงเรียนบา้ นเหลา่ คราม ตาบลคาอาฮวน อาเภอเมอื งมกุ ดาหาร จังหวัดมุกดาหาร Creation Website of Banlaokhram School Kam-Ahuan Sub-district, Mueang District, Mukdahan Province ผ้ดู าเนินโครงการ นางสาววราภรณ์ สวุ รรณศรี รหสั ประจาตวั นักศกึ ษา 6232040017 นางสาวสลนิ ดา สรี ะโคตร์ รหสั ประจาตวั นกั ศึกษา 6232040020 ครทู ี่ปรกึ ษา นายวัชรนิ ทร์ พันธ์สาโรง ครูผสู้ อน นางประเสรฐิ ศรี สทุ ธิพันธ์ สาขาวชิ า คอมพวิ เตอร์ธุรกจิ ปีการศกึ ษา 2563 …………………………………………………………………………………………………..…………………………………………… ผลงานท่ีได้จาการทาวิชาโครงการนี้ท้ังหมดข้าพเจ้ายินยอม ขอยกให้เป็นลิขสิทธิ์แด่ สาขาวิชาคอมพิวเตอรธ์ รุ กจิ เป็นระยะเวลา 5 ปี นับจากวนั ท่รี ะบุในโครงงานเลม่ น้ี ผู้มอบ ................................................ (นางสาวสลนิ ดา สรี ะโคตร์) ................................................ (นางสาววราภรณ์ สวุ รรณศรี) ................................................ (นางประเสรฐิ ศรี สทุ ธพิ นั ธ)์ ผรู้ บั มอบ ครูผู้สอนวิชาโครงการ ................................................ (นายวชั รินทร์ พนั ธส์ าโรง) ครทู ่ีปรึกษาโครงการ

ค หัวข้อโครงการ การสรา้ งเว็บไซต์โรงเรียนบา้ นเหล่าคราม ตาบลคาอาฮวน อาเภอเมอื งมกุ ดาหาร จงั หวัดมุกดาหาร Creation Website of Banlaokhram School Kam-Ahuan Sub-district, Mueang District, Mukdahan Province ผู้ดาเนนิ โครงการ นางสาววราภรณ์ สวุ รรณศรี รหัสประจาตัวนกั ศกึ ษา 6232040017 นางสาวสลนิ ดา สีระโคตร์ รหัสประจาตัวนกั ศึกษา 6232040020 ครูทป่ี รกึ ษา นายวชั รินทร์ พันธ์สาโรง ครผู สู้ อน นางประเสรฐิ ศรี สุทธิพันธ์ สาขาวิชา คอมพวิ เตอรธ์ รุ กจิ ปกี ารศกึ ษา 2563 …………………………………………………………………………………………………..…………………………………………… บทคัดยอ่ โครงการการสร้างเว็บไซต์โรงเรยี นบ้านเหล่าคราม ตาบลคาอาฮวน อาเภอเมอื งมุกดาหาร จังหวัดมุกดาหาร จัดทาขึ้นโดยมีวัตถุประสงค์ 1) เพื่อจัดทาเว็บไซต์เว็บไซต์โรงเรียนบ้านเหล่าคราม ตาบลคาอาฮวน อาเภอเมอื งมกุ ดาหาร จงั หวัดมุกดาหาร 2) เพ่อื เผยแพร่ขอ้ มูลข่าวสารเวบ็ ไซต์โรงเรยี น บ้านเหล่าคราม ตาบลคาอาฮวน อาเภอเมืองมุกดาหาร จังหวัดมุกดาหาร 3) เพื่อศึกษาความพึงพอใจ ของเว็บไซต์โรงเรียนบ้านเหล่าคราม ตาบลคาอาฮวน อาเภอเมืองมุกดาหาร จังหวัดมุกดาหาร กลุ่มตวั อยา่ งในการวิจัยครั้งนี้ จานวน 320 คน ได้มาโดยวิธกี ารสุ่มตัวอย่างแบบง่าย โดยใช้วิธีประเมิน แบบสอบถามออนไลน์ เครื่องมือที่ใช้ในการวิจัยคร้ังนี้ได้แก่ 1) เว็บไซต์โรงเรียนบ้านเหล่าคราม ตาบลคาอาฮวน อาเภอเมอื งมกุ ดาหาร จงั หวดั มุกดาหาร ทีผ่ ู้วิจยั สรา้ งขนึ้ 2) ความพึงพอใจของกล่มุ ตัวอยา่ ง ท่ีมีต่อคุณภาพเว็บไซต์โรงเรียนบ้านเหล่าคราม ตาบลคาอาฮวน อาเภอเมืองมุกดาหาร จังหวัดมุกดาหาร สถิติที่ใช้ในการวิจัยครั้งน้ีได้แก่ ค่าเฉลี่ย (������̅) และค่าส่วนเบี่ยงเบนมาตรฐาน (S.D.) ผลการจัดทา โครงการได้เล็งเห็นความสาคัญในการใช้เทคโนโลยีสารสนเทศมาช่วยในการจัดเก็บ ฐานข้อมูลผู้เรียน และเพอ่ื เผยแพรข่ ้อมูลข่าวสารเว็บไซต์โรงเรยี นบ้านเหล่าคราม ตาบลคาอาฮวน อาเภอเมืองมุกดาหาร จังหวัดมุกดาหารขึ้น เพื่อจัดเก็บฐานข้อมูลผู้เรียน และเผยแพร่ข้อมูลข่าวสาร ในรูปแบบสารสนเทศ ผ่านระบบอนิ เทอรเ์ นต็ ผลการวิจัยพบว่า ความพึงพอใจของกลุ่มตัวอย่างที่มีต่อเว็บไซต์โรงเรียนบ้านเหล่าคราม ตาบลคาอาฮวน อาเภอเมืองมุกดาหาร จังหวัดมุกดาหาร มีระดับความพึงพอใจ อยู่ในระดับดีมาก (������̅= 4.70 , S.D.= 0.40)

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

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

สารบัญ (ตอ่ ) ฉ เรือ่ ง หน้า บทท่ี 4 ผลการพฒั นาระบบ/ผลการวเิ คราะห์ขอ้ มูล 47 47 4.1 ผลการพัฒนาระบบ 58 4.2 ผลการวิเคราะห์ข้อมูล 63 บทที่ 5 สรุปผลการศึกษา อภปิ รายผล และขอ้ เสนอแนะ 63 5.1 สรปุ ผลการศกึ ษา 64 5.2 อภปิ รายผล 65 5.3 ข้อเสนอแนะ 66 บรรณานกุ รม 67 ภาคผนวก 68 ภาคผนวก ก แบบเสนอเคา้ โครงโครงการ 81 ภาคผนวก ข รายงานการพบครูท่ีปรึกษาโครงการ 83 ภาคผนวก ค แบบประเมนิ ความพึงพอใจ 86 ภาคผนวก ง แบบประเมนิ ความพงึ พอใจออนไลน์ 90 ภาคผนวก จ เอกสารเผยแพร/่ สง่ มอบ 93 ภาคผนวก ฉ คมู่ อื การใช้งานเว็บไซต์โรงเรยี นบ้านเหลา่ คราม 101 ภาคผนวก ช ตารางแสดงผลการวิเคราะห์ข้อมลู ด้วยโปรแกรมทางสถิติ 105 ภาคผนวก ซ ภาพกจิ กรรมการดาเนนิ โครงการ 108 ภาคผนวก ฌ ประวัติผจู้ ัดทาโครงการ

ช สารบญั ตาราง ตารางที่ หน้า ตารางที่ 1.1 ตารางแสดงแผนการดาเนนิ งาน 3 ตารางท่ี 1.2 ตารางงบประมาณ 3 ตารางท่ี 2.1 ความรู้สกึ เก่ียวกับสี 10 ตารางที่ 2.2 แสดงข้นั สีท่ี 1 แมส่ ี 11 ตารางที่ 2.3 แสดงขั้นสที ี่ 2 การผสมสี 11 ตารางที่ 2.4 ตารางอธบิ ายเคร่ืองมือ Tool ต่าง ๆ 15 ตารางที่ 2.4 ตารางอธบิ ายเครอื่ งมือ Tool ต่าง ๆ (ตอ่ ) 16 ตารางท่ี 3.1 เครจซีและเมอรแ์ กน (Krejcie & Morgan) 40 ตารางท่ี 3.2 ตารางแสดงระยะเวลาในการพัฒนาระบบ 42 ตารางท่ี 4.1 ตารางการทดสอบการทางานหนา้ แรก 48 ตารางที่ 4.2 ตารางการทดสอบหน้าประวัติโรงเรยี น 49 ตารางท่ี 4.3 ตารางการทดสอบหนา้ เกยี่ วกับโรงเรยี น 49 ตารางที่ 4.4 ตารางการทดสอบหนา้ ทตี่ ั้งของโรงเรยี น 50 ตารางที่ 4.5 ตารางการทดสอบหนา้ ข้อมูลนกั เรียน 51 ตารางที่ 4.6 ตารางการทดสอบหน้าผลงานครู 51 ตารางที่ 4.7 ตารางการทดสอบหน้าผลงานนกั เรยี น 52 ตารางที่ 4.8 ตารางการทดสอบหน้าดาวน์โหลดเอกสาร 53 ตารางที่ 4.9 ตารางการทดสอบหนา้ สมคั รเรียนออนไลน์ 53 ตารางท่ี 4.10 ตารางการทดสอบหน้าแบบประเมินความพึงพอใจของผู้ใชเ้ ว็บไซต์ 54 ตารางท่ี 4.11 ตารางการทดสอบหน้า Admin 55 ตารางท่ี 4.12 ตารางการทดสอบหน้าคณะผบู้ ริหาร 55 ตารางที่ 4.13 ตารางการทดสอบหนา้ ขา่ วประชาสัมพนั ธ์ 56 ตารางท่ี 4.14 ตารางการทดสอบหน้ากิจกรรม 57 ตารางที่ 4.15 ตารางการทดสอบหนา้ ตดิ ต่อเรา 57 ตารางที่ 4.16 ตารางค่ารอ้ ยละของข้อมลู ทวั่ ไปของผตู้ อบแบบประเมนิ 58 ตารางท่ี 4.16 ตารางค่ารอ้ ยละของข้อมลู ท่วั ไปของผู้ตอบแบบประเมิน (ตอ่ ) 59 ตารางท่ี 4.17 ตารางแสดงค่าคะแนนเฉลย่ี และส่วนเบยี่ งเบนมาตรฐาน ด้านเนอื้ หา 60 ตารางที่ 4.18 ตารางแสดงค่าคะแนนเฉลีย่ และส่วนเบีย่ งเบนมาตรฐาน ด้านการออกแบบ 61 และการจดั รปู แบบเวบ็ ไซต์ 61 ตารางท่ี 4.18 ตารางแสดงค่าคะแนนเฉล่ยี และส่วนเบีย่ งเบนมาตรฐาน ด้านการนาไปใช้

สารบัญรูป ซ รปู ท่ี หน้า รปู ที่ 2.1 แสดงเขา้ ไปยังโฟลเดอร์ของ Photoshop ตามภาพ ดับเบล้ิ คลิก Set-up 11 รูปท่ี 2.2 แสดงการตรวจสอบก่อนทาการตดิ ตง้ั โปรแกรม 12 รูปที่ 2.3 แสดงโปรแกรมตรวจสอบเสร็จแล้วจะเขา้ สู่หนา้ จอ เลอื ก Try 12 รปู ที่ 2.4 แสดงการกรอก Serial Number แลว้ คลิกท่ปี ุ่ม คลกิ Accept 12 รูปท่ี 2.5 แสดงการเลือกการติดตง้ั ของโปรแกรม ให้เลอื ก Installs 12 รปู ที่ 2.6 แสดงหน้าการโหลดของโปรแกรม 13 รปู ที่ 2.7 แสดงการเสร็จสนิ้ การติดตัง้ โปรแกรม Adobe Photoshop CS6 13 รปู ที่ 2.8 แสดงข้นั ตอนการเขา้ สโู่ ปรแกรม Adobe Photoshop CS 13 รูปที่ 2.9 แสดงหน้าต่างโปรแกรม Adobe Photoshop CS6 14 รูปที่ 2.10 แสดงหนา้ จอหลักการทางานของโปรแกรม Adobe Photoshop CS6 14 รูปที่ 2.11 แสดงเคร่ืองมือต่าง ๆ (Toolbox) Adobe Photoshop CS6 14 รูปที่ 2.12 แสดงการเปดิ ไฟล์ภาพ (Open) 17 รูปท่ี 2.13 แสดงการเปิดไฟลภ์ าพ (Open) 17 รูปท่ี 2.14 แสดงการสรา้ งไฟล์ใหม่ (New) 17 รูปท่ี 2.15 แสดงการกาหนดขนาดของกระดาษ 18 รูปท่ี 2.16 แสดงการบันทึกขอ้ มูลลงบนไฟล์ (Save) 19 รปู ท่ี 2.17 แสดงการบนั ทึกข้อมลู ลงบนไฟล์ (Save) 20 รปู ท่ี 2.18 หน้าเวบ็ ไซต์ 21 รปู ท่ี 2.19 หน้าตา่ งสาหรับลงทะเบยี นเข้าใชง้ าน 22 รูปท่ี 2.20 เขา้ ส่รู ะบบการใชง้ าน Wix.com 22 รปู ที่ 2.21 เลือกวิธกี ารสร้างเวบ็ ไซต์ 23 รปู ที่ 2.22 ตัวอย่าง Templates ของเว็บไซต์ 23 รูปที่ 2.23 ภาพ Wix Editor 24 รูปที่ 2.24 การเพ่ิมข้อความ 24 รปู ที่ 2.25 การเพ่ิมรูปภาพ 25 รปู ที่ 2.26 การเพ่ิมพนื้ หลัง 26 รปู ท่ี 2.27 หนา้ เวบ็ ไซต์ขณะสรา้ ง 27 รปู ท่ี 2.28 การ Pubish เวบ็ ไซต์ 28 รปู ท่ี 2.29 การอัพโหลด Font 28 รปู ท่ี 2.30 เลอื กเมนู Drive เลอื ก “เพมิ่ เติม”>”Google ฟอร์ม 29 รปู ท่ี 2.31 ตั้งชือ่ แบบฟอร์ม และเลือก ธีม ท่ีเราตอ้ งการ 29 รปู ท่ี 2.32 ส่วนเขียนคาถามในแบบฟอรม์ 30 รูปท่ี 2.33 ส่วนกาหนดยืนยันการบนั ทึกของข้อมูลหรอื การอนญุ าตใหส้ ่งลิงคต์ อบกลับ 30 รูปที่ 2.34 ส่วนของการสรา้ งคาถาม 30

ฌ สารบัญรปู (ต่อ) รปู ท่ี หน้า รปู ท่ี 2.35 การสรา้ งคาถามในแต่ละข้อ 31 รูปที่ 2.36 สรา้ งคาถามต่อไปกใ็ ห้เลอื ก เพิ่มรายการ 31 รปู ท่ี 2.37 คาถามทง้ั หมดแบบนี้ทเี่ ราสร้างขนึ้ มา 31 รปู ที่ 2.38 สว่ นท่เี ราตอ้ งการแกไ้ ข 32 รปู ท่ี 2.39 สว่ นของ ขอ้ ความยนื ยนั 32 รปู ท่ี 2.40 ส่วนเราต้องการที่จะเผยแพร่ ซง่ึ จะเอาลิงค์นี้ไปให้คนใน องคก์ รหรือแชร์ผ่าน 32 Social Network หรือกาหนดบคุ คลทเ่ี ราต้องการส่งแบบฟอร์มน้ีให้ จากนน้ั กด \" เสร็จ \" รปู ที่ 2.41 เลอื กที่ “การตอบกลับ”> “เปลยี่ นแปลงทางการตอบกลับ” 33 รปู ท่ี 2.42 จากนน้ั กาหนด โดยเลอื กวา่ จะให้สร้าง สเปรดชีตใหม่ หรือ สเปรดชีตเดมิ ที่มีอยู่ 33 รูปท่ี 2.43 ดูใน Drive ของเราก็จะเหน็ ไฟล์ทจ่ี ดั เก็บขอ้ มลู ตอบกลับสร้างขน้ึ มาใหเ้ ราอกี 1 ไฟล์ 33 รูปท่ี 2.44 การอัพโหลดไฟล์ 36 รปู ท่ี 3.1 แสดงรปู ภาพแผนภูมิก้างปลา 43 รปู ท่ี 3.2 แสดงแผนผงั โครงสรา้ งการทางานของเวบ็ ไซต์โรงเรยี นบา้ นเหล่าครา 44 ตาบลคาอาฮวน อาเภอเมอื งมุกดาหาร จงั หวดั มุกดาหาร รูปที่ 3.3 แสดง User Interface Design 45 รูปที่ 3.4 แสดงรูป E-R Diagram Model ระบบงานใหม่ 45 รูปท่ี 3.5 แสดงรปู E-R Diagram Model สมคั รเรียนออนไลน์ 46 รูปที่ 4.1 แสดงการทดสอบหนา้ แรก 48 รูปท่ี 4.2 แสดงการทดสอบหนา้ ประวัตโิ รงเรียน 48 รูปท่ี 4.3 แสดงการทดสอบหน้าเกี่ยวกับโรงเรยี น 49 รูปท่ี 4.4 แสดงการทดสอบหน้าท่ีตงั้ ของโรงเรยี น 50 รูปที่ 4.5 แสดงการทดสอบหน้าข้อมูลนักเรยี น 50 รปู ที่ 4.6 แสดงการทดสอบหนา้ ผลงานครู 51 รูปที่ 4.7 แสดงการทดสอบหน้าผลงานนกั เรยี น 52 รปู ที่ 4.8 แสดงการทดสอบหนา้ ดาวน์โหลดเอกสาร 52 รูปท่ี 4.9 แสดงการทดสอบหน้าสมคั รเรยี นออนไลน์ 53 รปู ท่ี 4.10 แสดงการทดสอบหน้าแบบประเมินความพงึ พอใจของผู้ใช้เว็บไซต์ 54 รปู ท่ี 4.11 แสดงการทดสอบหน้า Admin 54 รูปท่ี 4.12 แสดงการทดสอบหน้าคณะผู้บรหิ าร 55 รูปท่ี 4.13 แสดงการทดสอบหนา้ ข่าวประชาสัมพนั ธ์ 56 รูปท่ี 4.14 แสดงการทดสอบหน้ากิจกรรม 56 รูปที่ 4.15 แสดงการทดสอบหน้าติดตอ่ เรา 57

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

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

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

4 1.7 ผลท่คี ำดวำ่ จะได้รับ 1.7.1 ได้เว็บไซต์โรงเรียนบ้านเหล่าคราม ตาบลคาอาฮวน อาเภอเมืองมุกดาหาร จังหวัดมุกดาหาร 1.7.2 ได้เผยแพร่ขอ้ มูลข่าวสาร ประชาสัมพนั ธ์ โรงเรียนบ้านเหล่าคราม ตาบลคาอาฮวน อาเภอเมืองมุกดาหาร จงั หวดั มกุ ดาหาร ผา่ นทางเวบ็ ไซต์ 1.7.3 ไดร้ ะดบั ความพงึ พอใจการเขา้ ใชบ้ ริการเว็บไซต์โรงเรียนบ้านเหลา่ คราม ตาบลคาอาฮวน อาเภอเมอื งมุกดาหาร จงั หวดั มกุ ดาหาร 1.7.4 ได้ศึกษาวิธีการออกแบบ และสร้างเว็บไซต์โรงเรียนบ้านเหล่าคราม ตาบลคาอาฮวน อาเภอเมืองมกุ ดาหาร จงั หวัดมุกดาหาร 1.8 นิยำมศัพทเ์ ฉพำะ 1.8.1 เว็บไซต์ (Website) หมายถึง หน้าเว็บเพจที่จัดทาขึ้น เพ่ือนาเสนอข้อมูลต่างๆ ผ่านทางคอมพิวเตอรแ์ ละอนิ เทอร์เน็ต โดยจะมหี น้าเวบ็ เพจหลายๆ หน้าที่เชือ่ มโยงเข้ากบั ไฮเปอร์ลิ้งค์ เพ่ือให้สามารถเปิดไปยังหน้าเพจต่างๆ ได้อย่างง่ายดายและถูกจัดเก็บไว้ใน www. (เวิลด์ไวด์เว็บ) โดยเว็บไซต์ส่วนใหญ่น้ันก็มีท้ังเว็บไซต์ที่เปิดให้เข้าชมได้ฟรี และเว็บไซต์ท่ีต้องสมัครสมาชิกและ เสียค่าบริการ จึงจะเข้าใช้งานเว็บได้ ซึ่งข้อมูลในเว็บก็จะมีหลากหลายแบบ ข้ึนอยู่กับความต้องการ นาเสนอของเจา้ ของเว็บไซต์ การเรยี กดเู วบ็ ไซตจ์ ะเรยี กดูผ่านทางซอฟต์แวร์ ในลกั ษณะของเบราว์เซอร์ 1.8.2 Wix.com คอื เวบ็ ไซตท์ ่ีให้บรกิ ารสร้างเวบ็ ไซต์ฟรี ชว่ ยใหค้ ุณสามารถสร้างเว็บไซต์ ที่กาหนดเองได้อย่างง่ายดาย ลาก ใช้งานง่ายและสามารถเลือกรูปแบบและแก้ไขได้ด้วยตัวคุณเอง โดยไม่จาเป็นต้องมีความรู้ด้านการเขียน Code ในการสร้างเว็บ คุณสามารถทาเว็บไซต์ฟรีของคุณ ตัง้ แต่เริ่มต้นและปรับแต่งตามคณุ ไป หรือเรม่ิ ต้นโดยการสารวจของแกลเลอร่ีของเราแม่แบบเวบ็ ไซต์ฟรี Wix สามารถใช้โปรแกรมแก้ไข Wix แทนท่ีรายการในแม่แบบที่มีข้อความเนื้อหาของคุณเองและ การเชื่อมโยง เลือกจากตันฟรีภาพตัดปะ, ไอคอน, เคร่ืองมือ, ภาพเคล่ือนไหวและอ่ืน ๆ ที่พบภายใน ตวั สร้างเวบ็ ไซต์ ง่ายต่อการใช้ 1.8.3 เวบ็ เพจ (Webpage) คอื หนา้ เวบ็ หมายถึง หน้าหนึ่ง ๆ ของเวบ็ ไซต์ ทเี่ ราเปิดข้ึนมาใชง้ าน โดยท่ัวไป เว็บเพจส่วนใหญ่จะอยู่ในรูปของเอกสาร HTML หรือ XHTML (ซึ่งมักมีนามสกุลไฟล์เป็น htm หรือ html) มีลิงก์สาหรับเช่ือมโยงไปยังเว็บเพจหน้าอ่ืน ๆ สามารถใส่ข้อความบทความและรูปภาพ หรือวีดีโอได้ นอกจากนี้ยังสามารถใส่โปรแกรมขนาดเล็กแสดงภาพเคล่ือนไหว มีปฏิสัมพันธ์กับผู้ใช้ หรือ สร้างเสียง ไดอ้ กี ด้วย 1.8.4 โฮมเพจ (Homepage) คือ คาท่ใี ช้เรียกหน้าแรกของเวบ็ ไซต์ โดยเปน็ ทางเข้าหลัก ของเว็บไซต์ เม่ือเปิดเว็บไซต์น้ันข้ึนมา โฮมเพจ ก็จะเปรียบเสมือนกับเป็นสารบัญและคานาที่เจ้าของ เว็บไซต์นั้นได้สร้างข้ึน เพอ่ื ใช้ประชาสัมพันธ์องคก์ รของตน นอกจากน้ี ภายในโฮมเพจก็อาจมีเอกสาร หรอื ขอ้ ความท่เี ช่ือมโยงตอ่ ไปยังเว็บเพจอนื่ ๆอีกด้วย 1.8.5 บราวเซอร์ (Browser) คือ “บราวเซอร์” ย่อมาจากคาเต็มว่า “เว็บบราวเซอร์” ซึ่งหมายถึง แอพพลิเคชัน (ซอฟต์แวร์ประยุกต์ที่พัฒนาขึ้นมา เพื่อใช้งานเฉพาะทาง) ท่ีใช้สาหรับสืบค้น (Browse) และแสดงหน้าเว็บ (Webpage) ต่างๆ ท่อี ย่ใู นเวบ็ เซิร์ฟเวอร์บนอินเทอร์เน็ตโดยบราวเซอร์

5 ยอดนิยมจะมีอยู่ 2 ตัวด้วยกันคือ Internet Explorer และ Firefox ซึ่งบราวเซอร์พวกนี้จะสามารถ แสดงผลหนา้ เว็บท่ีจัดทาออกมาในรปู แบบของมลั ตมิ เี ดีย (ขอ้ ความ ภาพ เสียง และวิดโี อ) ไดอ้ ยา่ งสมบรู ณ์ 1.8.6 FTP (File Transfer Protocol) คือ FTP (File Transfer Protocol ) FTP ย่อมาจาก File Transfer Protocol คือ โปรโตคอลเครือข่ายชนิดหน่ึง ถูกนาใช้ในการถ่ายโอนไฟล์ ระหว่าง เคร่ืองคอมพิวเตอร์ อย่างการถ่ายโอนไฟล์ระหว่าง ไคลเอนต์ (Client) กับเคร่ืองคอมพิวเตอร์ที่เป็นแม่ข่าย เรียกวา่ โฮสตงิ (Hosting) หรือ เซริ ์ฟเวอร์ ซึ่งทาให้การถ่ายโอนไฟลง์ ่ายและปลอดภยั ในการแลกเปล่ยี นไฟล์ ผ่านอินเตอร์เน็ต การใช้ FTP ท่ีพบบ่อยสดุ ก็เช่น การดาวนโ์ หลดไฟลจ์ ากอนิ เทอร์เนต็ ความสามารถ ในการถ่ายโอนไฟล์ ทาให้ FTP เป็นส่ิงจาเป็นสาหรับทุกคนท่ีสร้างเว็บเพจ ท้ังมือสมัครเล่นและมืออาชีพ โดยท่ีการติดต่อกันทาง FTP เราจะต้องติดต่อกันทาง Port 21 ซึ่งก่อนท่จี ะเข้าใช้งานไดน้ ั้น จะต้องเป็นสมาชิก และมชี ือ่ ผ้เู ข้าใช้ (User) และรหัสผู้เข้าใช้ (Password) ก่อนและโปรแกรมสาหรบั ติดตอ่ กับแม่ขา่ ย (Server) ส่วนมากจะใช้โปรแกรมสาเร็จรูป เช่น โปรแกรม Filezilla,CuteFTP หรอื WSFTP ในการตดิ ตอ่ เป็นต้น

บทท่ี 2 ทฤษฎีที่เกย่ี วข้อง โครงการ การสร้างเว็บไซต์โรงเรียนบ้านเหล่าคราม ตาบลคาอาฮวน อาเภอเมืองมุกดาหาร จังหวัดมุกดาหาร ผู้จัดทาโครงการ ได้ทาการศึกษาหลักการ ทฤษฎีท่ีและเทคโนโลยีท่ีเก่ียวข้อง ท่สี ามารถนามาประยุกต์ใชง้ าน โดยแบ่งออกเป็นหัวขอ้ ตา่ งๆดงั ต่อไปน้ี 2.1 ความร้ทู ว่ั ไปเกี่ยวกบั เว็บไซต์ 2.2 หลักการออกแบบและพัฒนาเวบ็ ไซต์ 2.3 เครื่องมือทีใ่ ชใ้ นการพฒั นาเวบ็ ไซต์ 2.4 เครื่องมอื ทใ่ี ชใ้ นการพัฒนาระบบ 2.5 การขอพนื้ ทแ่ี ละการอัพโหลดเว็บไซต์ 2.6 ขอ้ มลู พื้นฐานโรงเรียนบ้านเหล่าคราม 2.7 งานวจิ ัยที่เกยี่ วข้อง 2.1 ความรูท้ ่ัวไปเกยี่ วกบั เวบ็ ไซต์ 2.1.1 ความหมายของเวบ็ ไซต์ เว็บไซต์แห่งแรกของโลกถูกสร้างข้ึนเมื่อ 30 เมษายน พ.ศ. 2536 โดยวิศวกรของ เซิร์นคาว่า เว็บไซต์ ในภาษาอังกฤษ มีการสะกดคาวา่ เว็บไซต์หลายแบบ ตง้ั แต่ 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) ได้ให้ความหมายของเว็บเพจไว้ดังน้ี เว็บเพจคือหน้าหนังสืออิเล็กทรอนิกส์บนเว็บที่เจ้าของเว็บเพจต้องการจะใส่ลงไปในหน้าหนังสือ

7 อิเลก็ ทรอนกิ ส์นนั้ เชน่ ขอ้ มลู แนะนาตวั เองซง่ึ อาจเปน็ บุคคลหรือองค์กรทีต่ ้องการใหผ้ ู้อ่นื ได้ทราบหรอื ขอ้ มูล ท่ีน่าสนใจโดยท่ีข้อมูลที่แสดงเป็นได้ท้ังข้อความ เสียง ภาพนิ่ง และภาพเคลื่อนไหว ข้อมูลที่สามารถ เช่ือมโยงในรูปของไฮเพอร์เท็กซ์ คือเช่ือมโยงไปยังเว็บเพจอื่นท่ีจะให้ข้อมูลน้ันๆ ในระดับลึกลงไปไดเ้ ร่ือยๆ ซง่ึ แหล่งทีอ่ ยนู่ ีเ้ รยี กวา่ URL (Uniform Resource Locator) 1) สว่ นประกอบของหน้าเว็บเพจ ส่วนประกอบของหน้าเว็บเพจแบง่ ออกเป็นส่วน ดงั นี้ - ส่วนหัวของหน้า (Page Header) จะอยู่บริเวณบนสุดของหน้าเว็บเพจ เปน็ ส่วนท่ีแสดงชื่อเวบ็ ไซต์ โลโก้ แบนเนอรโ์ ฆษาลงิ คส์ าหรับขา้ มไปยังหนา้ เวบ็ อน่ื - ส่วนของเนื้อหา (Page Body) จะอยู่บริเวณตอนกลางของหน้าเว็บเพจ ซึ่งเป็นสว่ นที่แสดงเนอื้ หาในหน้าเวบ็ เพจนน้ั โดยประกอบด้วยข้อความ ขอ้ มลู ภาพเคลือ่ นไหว เป็นต้น - ส่วนท้ายกระดาษ (Page Footer) จะอยู่บริเวณด้านล่างสุดของ หน้าเว็บเพจ ส่วนมากใช้สาหรับลิงค์ข้อความสั้นๆเข้าใจง่าย หรือจะมีช่ือเจ้าของเว็บไซต์ อีเมล์แอดเดรส ของผดู้ แู ลเวบ็ ไซตส์ าหรบั ติดต่อกบั ทางเวบ็ ไซต์ 2) รปู แบบของเว็บไซต์ รปู แบบของเว็บไซตส์ ามารถแบง่ ได้เป็นรปู แบบหลกั ๆ คอื - Static Website หมายถึงเวบ็ ไซตท์ ่ีสร้างดว้ ยภาษา HTML ธรรมดา และบันทึกเป็นไพลน์ ามสกุล .html เน้ือหาข้อความ รปู ภาพในหน้าเวบ็ เพจน้นั จะไปตามที่เราเขยี นกาหนดไว้ - Dynamic Website หมายถึง เว็บไซต์ที่หน้าเว็บเพจสามารถเปล่ียนแปลง ขอ้ มูลเองได้โดยไมต่ ้องเขียนแต่ละหน้าเว็บเพจเอง เช่น กระดาษข่าว (Webboard), ระบบสบื ค้นข้อมูลเว็บไซต์ รูปแบบน้ีจะถูกสร้างด้วยภาษาสคริปต์ (Script) แบบ Sever Side Script เช่น PHP,ASP,ASP.NET,JSP และ ขอ้ มูลอ่ืน ๆ ไพล์เอกสารท่ีได้จะมีนามสกุล .php, .asp เป็นตน้ และมักจะมีการติดต่อกบั ฐานข้อมลู เพ่ือบันทึก ขอ้ มลู ลงในฐานขอ้ มูล หรือนาข้อมลู จากฐานข้อมลู ขน้ึ มาแสดงผลเป็นหนา้ เวบ็ เพจ 2.1.2 ความหมายของอนิ เตอร์เนต็ อินเตอร์เน็ต (Internet) น้ันย่อมาจากคาว่า“International Network” หรือ “Inter Connection Network” ซ่ึงหมายถึง เครือข่ายคอมพิวเตอร์ขนาดใหญ่ที่เช่ือมโยงเครือข่าย คอมพิวเตอร์ทั่วโลกเข้าไว้ด้วยกัน เพื่อให้เกิดการส่ือสาร และการแลกเปล่ียนข้อมูลร่วมกัน โดยอาศัย ตัวเชือ่ มเครือขา่ ยภายใต้มาตรฐานการเชอ่ื มโยงเดียวกัน นนั่ กค็ ือ TCP/IP Protocol ซ่งึ เปน็ ข้อกาหนด วิธีการติดต่อส่ือสารระหว่างคอมพวิ เตอร์ในระบบเครือข่าย ซ่ึงโปรโตคอลน้จี ะช่วยให้คอมพิวเตอร์ท่ีมี ฮารด์ แวร์ทแ่ี ตกตา่ งกันสามารถติดตอ่ ถึงกนั ได้ การทมี่ ีระบบอินเตอร์เน็ต ทาให้สามารถเคล่ือนย้ายข่าวสารข้อมูลจากที่หน่ึงไปยัง อีกท่ีหน่ึงได้ โดยไม่จากัดระยะทาง ส่งข้อมูลได้หลายรูปแบบ ท้ังข้อความตัวหนังสือ ภาพ และ เสียง โดยอาศัยเครือข่ายโทรคมนาคมเป็นตัวเชื่อมต่อเครือข่ายอินเตอร์เน็ตนับเป็นอภิระบบเครือข่ายที่ ยงิ่ ใหญ่มาก มีเคร่ืองคอมพิวเตอร์หลายล้านเครื่องท่วั โลกเชื่อมต่อกับระบบ ทาใหค้ นในโลกทุกชาติทุก ภาษาสามารถตดิ ตอ่ สื่อสารกนั ได้ โดยไมต่ ้องเดนิ ทางไป โลกทั้งโลกเปรยี บเสมือนเปน็ บ้านหนึ่งท่ีทุกคน ในบ้านสามารถพูดคุยกันได้ตลอด 24 ช่ัวโมง ประหยัดเวลา ค่าใช้จ่าย แต่เกิดประโยชน์ต่อสังคมโลก ปัจจบุ นั มาก

8 2.2 หลกั การออกแบบและพัฒนาเวบ็ ไซต์ 2.2.1 หลกั การในการออกแบบเว็บไซต์ การสร้างเว็บไซต์ส่ิงสาคัญอยู่ที่การออกแบบเว็บ เพราะเว็บไซต์ที่มีรูปแบบ สวยงามจะสามารถดึงดูดความสนใจจากผู้คนได้ดีกว่าทาให้ผู้คนเกิดความรู้สึกประทับใจอยากกลับมาใช้ งานเว็บไซตอ์ กี คร้ังในอนาคต ดังนนั้ เร่มิ แรกกอ่ นทาเวบ็ ไซต์ จึงจาเป็นต้องทาความเขา้ ใจกับหลกั การออกแบบ และรูปแบบโครงสรา้ งของเว็บกอ่ น 2.2.2 องค์ประกอบในการออกแบบเวบ็ ไซต์ การออกแบบเว็บไซต์เพ่ือให้มีประสิทธิภาพ และสามารถดึงดูดความสนใจของผู้คนได้ ดีจะตอ้ งมอี งคป์ ระกอบของเวบ็ ไซตอ์ ย่างครบถ้วนซ่ึงไดแ้ ก่ 2.2.2.1 ความเรียบง่าย เข้าใจง่าย การออกแบบเว็บไซต์ที่ดีจะต้องเน้นท่ีความเรียบ ง่ายโดยเลือกนาเสนอเฉพาะสิ่งที่ต้องการนาเสนอจริง ๆ ในรูปแบบที่หลากหลาย โดยอาจจะเป็นสีสัน กราฟิกภาพเคลื่อนไหวหรอื ตัวอักษร ที่สาคัญจะต้องมกี ารนาเสนอที่ไม่ดูรกหน้าเว็บจนเกินไป เพ่ือไม่ให้เกิด ความรูส้ ึกรกสายตา หรอื สรา้ งความเบ่ือหน่าย นา่ ราคาญให้กับผ้ทู ี่เขา้ ชมเวบ็ ไซต์ 2.2.2.2 ความสม่าเสมอ ไม่สับสน ควรออกแบบเว็บไซต์ด้วยความสม่าเสมอ คือจะต้องมรี ูปแบบกราฟิก โทนสี และการตกแตง่ ต่างๆ ให้แต่ละหนา้ บนเว็บไซต์มีความคล้ายคลึงกัน และเป็นแนวเดยี วกนั ไปตลอดท้ังเว็บไซต์ 2.2.2.3 สร้างความโดดเดน่ เป็นเอกลักษณ์ การออกแบบเว็บไซต์ เพ่อื สามารถส่ือ ถึงจุดประสงคใ์ นการนาเสนอเว็บได้ดี จะตอ้ งมีการสรา้ งความเปน็ เอกลกั ษณ์ และจดุ เดน่ ให้กับเว็บไซต์ เพ่อื ให้สามารถสะท้อนถึงลกั ษณะขององค์กรได้มากท่สี ุด 2.2.2.4 เน้ือหาต้องดี ครบถ้วน เนื้อหาเป็นส่ิงท่ีสาคัญท่ีสุดของการสร้างเว็บไซต์ เพราะส่ิงที่ทาให้ผู้คนเกิดความสนใจ และติดตามเว็บไซต์ ก็คือเน้ือหาท่ีมีความสมบูรณ์ และน่าสนใจ นอกจากนี้จะต้องมีการปรับปรุงพัฒนาเน้ือหาบนเว็บ ให้มีความทันสมัยอยู่เสมอรวมถึงข้อมูลต้องมี ความถูกตอ้ งทีส่ ุด 2.2.3 ขน้ั ตอนในการจดั ทาเว็บไซต์ 2.2.3.1 การสร้างเว็บไซต์ อาจเริ่มต้ังแต่การกาหนดเน้ือหารายละเอียดต่างๆ ในหน้าเว็บเพจ จนถงึ การอัพโหลดเว็บไซต์ข้นึ บนอนิ เทอรเ์ น็ตจะมีขั้นตอน ดังน้ี ขั้นตอนท่ี 1 วางแผนจัดทาเว็บไซต์ กาหนดเนื้อหา แบ่งเนื้อหาเป็นหมวดหมู่ ตามลาดับก่อนหลงั และรายละเอียดของเวบ็ ท่เี ราจะจัดทา เพือ่ ใหเ้ ห็นมุมมองครา่ ว ๆ กอ่ นจะลงมือสรา้ งเว็บไซต์ ขั้นตอนท่ี 2 การกาหนดโครงสร้างของเว็บ ขั้นตอนการกาหนดผังเว็บไซต์หรือ ทีเ่ รยี กว่า Site Map เพอื่ ให้ทราบองคป์ ระกอบท้ังหมดของเวบ็ ไซต์ ขนั้ ตอนท่ี 3 กาหนดการเช่อื มโยงระหว่างเวบ็ เพจ เป็นการกาหนดการเชอ่ื มโยงใน แต่ละหนา้ เว็บเพจใหส้ ามารถเช่ือมโยงกลับไปกลับมาระหวา่ งหน้าเวบ็ เพจตา่ งๆ ได้ ข้ันตอนที่ 4 ออกแบบหน้าเว็บเพจแตล่ ะหนา้ ออกแบบโครงสร้างหน้าเว็บเพจ ในแต่ละหนา้ เพ่ือจะได้รูว้ ่าในเว็บเพจแต่ละหน้ามีรายละเอยี ดอะไรบ้าง ไมว่ า่ จะเป็น ขอ้ มูล รูปภาพ จากนั้น ทาการออกแบบหนา้ เว็บเพจหน้าตอ่ ไป

9 2.2.4 กระบวนการในการสร้างและออกแบบเวบ็ ไซต์ มกี ระบวนการพื้นฐานอยู่ด้วยกนั 5 ขน้ั ตอน คือ 2.2.4.1 การวางแผน (Planning) เปน็ ข้ันตอนท่ีผู้สรา้ งเวบ็ จะตอ้ งรวบรวมขอ้ มลู ที่ต้องการ จะนามาสรา้ งเวบ็ กาหนดวัตถุประสงค์และกลุ่มเปา้ หมาย จากน้ันกาหนดขอบเขตและความต้องการของเว็บว่า จะตอ้ งมอี ะไรบา้ ง เช่น ขนาดของหนา้ จอภาพบราวเซอรท์ ี่จะใช้ ฯลฯ องค์ประกอบและเครื่องมอื ท่จี ะตอ้ งใช้ ตอ้ งการมีกระดานข่าว ห้องสนทนา ฯลฯ รวมถึงขั้นตอนและกระบวนการในการบารุงรักษาอย่างเป็นระบบ การวางแผนเบ้ืองต้นของการสร้างเว็บสาหรับ Dreamweaver คือ 1) กาหนดพน้ื ท่ีจดั เก็บเวบ็ ในเคร่ืองคอมพวิ เตอร์ 2) กาหนดพ้ืนท่ีตดิ ต้ังเวบ็ เมื่อสร้างเสร็จ 2.2.4.2 การออกแบบ (Design) เปน็ ข้ันตอนท่ีนาขอ้ มูลและแผนทวี่ างไว้ไปปฏบิ ตั ิ โดยการลงมือปฏิบัติโดยจัดพิมพ์เน้ือหา กาหนดการเช่ือมโยง และคุณลักษณะอื่นที่ต้องใช้ในเว็บ การออกแบบกจ็ ะเนน้ ทกี่ ารจดั หนา้ จอของเวบ็ ให้สอดคลอ้ งกนั และระมดั ระวังปัญหาต่าง ๆ ในการออกแบบ 2.2.4.3 การพัฒนา (Development) เป็นข้ันตอนที่ต่อเนื่องจากการออกแบบและ การสร้าง โดยเน้นไปท่ีการตกแตง่ และเสริมเครื่องมือต่างๆ สาหรบั เวบ็ เช่น การกาหนดสี ภาพ การใช้ Flash ช่วยใหเ้ วบ็ เรา้ ความสนใจ และเพ่ิมเตมิ เทคนคิ ตา่ งๆ ของโปรแกรมสนบั สนุนการสรา้ งเว็บ 2.2.4.4 การติดต้ัง (Publishing) เป็นข้ันตอนทจี่ ะนาเอาเวบ็ ท่ีได้สร้างขึ้นเขา้ ไปติดตัง้ ใน เว็บเซอร์เวอร์เพ่อื ให้แสดงผลได้ในระบบอินเทอร์เน็ต หรือจะเรียกว่า การอับโหลด (Upload) ซึ่งเป็นข้ันตอน ทจี่ ะตอ้ งดาเนนิ การอยู่เสมอเม่ือสร้างเวบ็ เสรจ็ 2.2.4.5 การบารุงรักษา (Maintenance) เป็นข้ันตอนประเมินผลและติดตามผลการ ตดิ ตั้งเว็บไซต์ว่ามขี ้อขัดข้องหรือต้องปรับปรุงเปล่ียนแปลงเว็บเพิ่มเตมิ ให้ทนั สมัยอยู่เสมอ อาจจะเรียกได้ว่า ขั้นตอนการอับเดท (Update) การกาหนดรูปแบบเว็บไซต์ (Web-site) เว็บไซต์ (Web-site) หมายถึง เว็บที่ ประกอบด้วยเว็บเพจหลายๆ เว็บเพจมารวมกัน อยู่ภายในพ้ืนที่เดียวกันและเชื่อมโยงระหว่างกันภายใต้ โดเมนเนมเดยี วกนั โดยมีโฮมเพจเปน็ หนา้ แรกของเว็บไซตท์ าหน้าท่เี ช่ือมโยงไปยงั เว็บเพจตา่ งๆ 2.2.5 ทฤษฎสี ใี นการออกแบบ 2.2.5.1 ความหมายของทฤษฎีสี 1) ทฤษฎี หมายถึง ความจริงทไี่ ด้พิสจู นแ์ ล้ว หรือ หลักวชิ า 2) สี หมายถึง แสงที่มากระทบวัตถุแล้วสะท้อนเขา้ ตาเรา ทาใหเ้ ห็นเป็นสตี า่ ง ๆ 3) ทฤษฎสี ี หมายถึง หลักวชิ าเกย่ี วกับสีทส่ี ามารถมองเหน็ ไดด้ ้วยสายตา 2.2.5.2 ความสัมพันธ์ของมนุษย์กับสีสรรพส่ิงท้ังหมายในจักรวาลประกอบไปด้วยสี ดังนนั้ สงิ่ แวดลอ้ มรอบตัวมนษุ ย์จงึ ประกอบไปดว้ ยสี สีจาแนกออกเป็น 2 ประเภท คือ 1) สีทเี่ กดิ จากปรากฏการณต์ ามธรรมชาติ เชน่ สีของแสง สีผิวของวตั ถุ 2) สีท่ีเกิดจากการสร้างสรรค์ของมนุษย์ เช่น สีของแสงไฟฟ้า สีของพลุ สีที่ใช้เขียนภาพ และย้อมสีวัสดุต่าง ๆ เหตุที่มนุษย์รู้จักใช้สี เพราะมนุษย์มีธรรมชาติรักสวยรักงาม เมอื่ เห็นความงามตามธรรมชาติ เช่น ดอกไม้ ใบไม้ สัตว์ วตั ถุ ตลอดจนทวิ ทศั น์ที่งดงาม มนุษย์ก็อยากจะเก็บ ความงามเอาไว้จึงได้นาเอาใบไม้ หินสี เปลือกหอย ฯลฯ มาประดับร่างกาย หรือขีดเขียนส่วนที่ต้องการ

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

11 ตารางท่ี 2.2 แสดงขน้ั สที ี่ 1 แม่สี สแี ดง (Red) สีน้าเงนิ (Blue) สเี หลือง (Yellow) ตารางที่ 2.3 แสดงขั้นสีที่ 2 การผสมสี 2.2.6 โปรแกรมทีใ่ ช้ในการพฒั นาและออกแบบเว็บไซต์ 2.2.6.1 โปรแกรม Adobe Photoshop CS6 โปรแกรม Adobe Photoshop CS6 เป็นโปรแกรมในตระกูล Adobe ท่ีใช้ สาหรับตกแต่งภาพถ่าย และภาพกราฟิกได้อย่างมีประสิทธิภาพ ไม่ว่าจะเป็นงานด้านส่ิงพิมพ์ นิตยสารและงานด้านมลั ติมีเดีย อีกท้ังยังสามารถ retouching ตกแต่งภาพและการสร้างภาพ ซ่ึงกาลัง เป็นท่ีนิยมสูงมากในขณะนี้เราสามารถใช้โปรแกรม Photoshop ในการตกแต่งภาพการใส่ Effect ต่าง ๆ ใหก้ ับภาพและตัวหนังสอื การทาภาพขาวดา การทาภาพถา่ ยเปน็ ภาพเขยี น การนาภาพมารวมกัน การ Retouchตกแต่งภาพต่าง โปรแกรม Adobe Photoshop เป็นโปรแกรมที่สามารถท่ีจะเรียนรู้ได้ด้วยตนเอง และทาการแก้ไขภาพ ตกแต่งภาพ ซอ้ นภาพในรูปแบบต่าง ๆ ไดอ้ ย่างง่ายดาย และสิ่งทข่ี าดไม่ได้น้ัน ก็คือการใส่ข้อความประกอบลงในภาพด้วย และเนื่องด้วย Adobe Photoshop มีการพัฒนาโปรแกรม มาอย่างต่อเน่ืองทาให้จาเป็นต้องศึกษาคาส่ังต่าง ๆ ให้เข้าใจแต่ท่ีสาคัญเม่ือได้เรียนรู้การใช้คาสั่งใน เวอรช์ ั่นเกา่ แตก่ ็ยงั คงสามารถนาไปประยุกตใ์ ช้กบั เวอรช์ ่ันใหม่ ๆ ได้ด้วย 2.2.6.2 วิธีการตดิ ตง้ั โปรแกรม Adobe Photoshop CS6 รปู ที่ 2.1 แสดงเขา้ ไปยังโฟลเดอร์ของ Photoshop ตามภาพ ดับเบิ้ลคลิก Set-up

12 รปู ท่ี 2.2 แสดงการตรวจสอบก่อนทาการติดต้งั โปรแกรม รปู ท่ี 2.3 แสดงโปรแกรมตรวจสอบเสรจ็ แลว้ จะเข้าสหู่ นา้ จอ เลอื ก Try รูปที่ 2.4 แสดงการกรอก Serial Number แลว้ คลิกท่ปี ุ่ม คลิก Accept รูปท่ี 2.5 แสดงการเลือกการตดิ ต้ังของโปรแกรม ให้เลอื ก Installs

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

14 รปู ที่ 2.9 แสดงหน้าตา่ งโปรแกรม Adobe Photoshop CS6 Menu bar Tool options bar Toolbo Palettes x รูปที่ 2.10 แสดงหนา้ จอหลักการทางานของโปรแกรม Adobe Photoshop CS6 2.2.6.4 เคร่ืองมือตา่ ง ๆ (Toolbox) รูปที่ 2.11 แสดงเคร่ืองมือต่าง ๆ (Toolbox) Adobe Photoshop CS6

15 ตารางที่ 2.4 ตารางอธบิ ายเคร่ืองมือ Tool ตา่ ง ๆ สญั ลักษณ์ ความหมาย Marquee Tool เป็นการเลือกแบบสเ่ี หลีย่ มผนื ผา้ , วงกลม, แถวขนาด 1 Pixel หรือคอลัมน์ 1 Pixel Move Tool ใช้เพื่อเล่ือนสว่ นทเ่ี ลอื ก หรือไว้เลอื่ น Layer และ Guide ตา่ ง ๆ Lasso Tool จะใช้เพ่ือสรา้ ง Selection แบบอิสระ, แบบ Polygonal (ตามจดุ ทีค่ ลิก) และ Magnetic (ดงึ เขา้ หาขอบรปู ภาพ) Magic Wand Tool ใชเ้ ลือกพน้ื ทบ่ี ริเวณทม่ี ีสเี ดียวกนั Crop T Crop Tool ใช้ในการเลือกบางสว่ นของรูปภาพ Slice Tool ใช้ในการสร้าง Slice Slice Selection Tool ใชเ้ ลือก Slice ที่คณุ สรา้ งขนึ้ มา 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

16 ตารางท่ี 2.4 ตารางอธิบายเคร่อื งมือ Tool ตา่ ง ๆ (ต่อ) สญั ลกั ษณ์ ความหมาย Magic Eraser Tool ใช้ลบรปู ภาพบริเวณท่ีมสี ีเดียวกนั ใหก้ ลายเป็นพนื้ ทโี่ ปร่งใส (Transparent) โดย การคลิกเพยี งครั้งเดยี ว Background Eraser Tool ใชล้ บรปู ภาพบางสว่ นใหก้ ลายเปน็ พนื้ ท่โี ปร่งใสโดยการลากเมาส์ Gradient Tools ใชเ้ พือ่ ไล่สรี ะหว่างสีหลายๆ สี ในแบบตา่ งๆ Straight-line, Radial, Angle, Reflected และ Diamond Paint Bucket Tool ใชใ้ นการเตมิ สี Fill ในบริเวณทเ่ี ปน็ สีเดยี วกนั ดว้ ยสขี อง Foreground Burn 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.6.5 การเปดิ ไฟล์ภาพ (Open) 1) คลิกทเี่ มนคู าส่ัง File ทีแ่ ถบ Menu bar จากนน้ั เลอื กคาส่งั Open ท่ตี อ้ งการเปิดมาใชง้ าน รูปท่ี 2.12 แสดงการเปิดไฟล์ภาพ (Open) 2) จะปรากฏ Dialog แสดงรายช่ือไฟล์ต่าง ๆ ดังภาพ เพื่อเลือกไฟล์ 3) คลิกเลือกไฟลท์ ต่ี ้องการเปดิ ใช้งาน จากนั้นคลิกปมุ่ Open Open รูปท่ี 2.13 แสดงการเปิดไฟลภ์ าพ (Open) 2.2.6.6 การสรา้ งไฟล์ใหม่ (New) 1) คลิกทีเ่ มนูคาสงั่ File ที่แถบ Menu bar จากนน้ั เลอื กคาสง่ั New รูปท่ี 2.14 การสร้างไฟล์ใหม่ (New)

18 2) จะปรากฏ Dialog สาหรบั กาหนดคุณสมบตั ิต่าง ๆ ของไฟล์ภาพ ดังนี้ รูปที่ 2.15 แสดงการกาหนดขนาดของกระดาษ - Name คอื ช่ือของชิ้นงาน สามารถกาหนดใหม่เองได้ ชื่อน้ีจะไป ระบุทชี่ ื่อไฟลต์ อ่ ไป - Preset คือ ขนาดงานที่โปรแกรมกาหนดมาให้ ซึ่งมีหลากหลาย ขนาดใหเ้ ลือก หรอื สามารถกาหนดเองจากชอ่ ง Width และ Height ได้ - Width คือ ขนาดความกว้างของงาน (จากซ้ายไปขวา) โดยกาหนด หนว่ ยและขนาดได้เอง จากรูป คอื 1024 Pixels - Height คือ ขนาดความกว้างของงาน (จากบนลงล่าง) โดยกาหนด หน่วยและขนาดไดเ้ อง จากรูป คือ 768 Pixels - Resolution คอื ความละเอยี ดของภาพ โดยใสต่ ัวเลขคา่ ความละเอียด ของภาพ เช่น งานเว็บหรือรูปที่แสดงบนคอมพิวเตอร์เท่ากับ 72 Pixels/Inch งานสิ่งพิมพ์เท่ากับ 150-200 pixels/inch - Color Mode คือ โหมดสีของภาพ ซ่ึงประกอบไปด้วย โหมดสี Bitmap, Grayscale, RGB Color, CMYK Color, Lab Color - Background Contents คือ สพี ้ืนหลังของภาพ เม่อื เริ่มชิน้ งานใหม่ มีดงั นี้ - White กาหนดใหส้ พี นื้ หลังเปน็ สขี าว - Background Color กาหนดใหส้ พี ื้นหลงั เปน็ สเี ดยี วกบั Background - Transparent ไม่มีพืน้ หลงั 3) หลังจากกาหนดคณุ สมบัติตา่ ง ๆ ให้คลิกปุ่ม OK เพอื่ เร่ิมชิ้นงานใหม่

19 2.2.6.7 การบนั ทึกข้อมลู ลงบนไฟล์ (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.6.8 การใชง้ านของ Save และ Save As 1) คลิกท่เี มนูคาสง่ั File ทแ่ี ถบ Menu Bar จากนน้ั เลอื กคาสั่ง Save หรือ Save As หรือ Save for Web & Devices รปู ท่ี 2.16 แสดงการบันทกึ ข้อมลู ลงบนไฟล์ (Save)

20 2) จะปรากฏ Dialog สาหรับกาหนดคณุ สมบตั ติ ่าง ๆ ของไฟลภ์ าพ ดงั น้ี รปู ท่ี 2.17 แสดงการบันทกึ ข้อมูลลงบนไฟล์ (Save) เดิมกาลงั เปิดใช้งาน - ช่อื ไฟล์ (File Name) Dialog ของการเปดิ ไฟล์ - รปู แบบของไฟล์ (Format) - กาหนดคณุ สมบัตขิ องการบนั ทกึ ไฟล์ (Save Options) 3) As a Copy บันทึกไฟล์เป็นช่ืออื่น รูปแบบ (Format) อ่ืน ขณะท่ีไฟล์ 4) Layers จะเก็บคณุ สมบตั ิของ Layer ตา่ ง ๆ 5) Use Proof setup เก็บค่าโหมดสที ี่จะใช้แสดงสขี องภาพกอ่ นจะพมิ พ์ 6) Thumbnail กาหนดให้ไฟล์ทบ่ี ันทึก (Save) สามารถแสดงภาพตวั อยา่ งใน 7) Use Lower Case Extension กาหนดใหน้ ามสกุลไฟล์เป็นอกั ษรตัวเล็ก 8) หลงั จากกาหนดคณุ สมบัติตา่ ง ๆ ให้คลิกปมุ่ Save เพ่ือบนั ทกึ ขอ้ มลู 2.2.7 การพัฒนาเว็บไซต์ 2.2.7.1 กระบวนการพัฒนาเว็บไซต์ แนวทางหลักการออกแบบเว็บไซต์สามารถแบ่งออกเป็นขั้นตอนต่าง ๆ เพ่อื ให้เหมาะสมกบั ผู้เร่มิ ต้นใช้เป็นแนวทาง ในการสร้างและพฒั นาเวบ็ ไซต์ 1) การวางแผน การวางแผนนับว่ามีความสาคัญมากในการสร้างเว็บไซต์ เพ่อื ให้การทางานในขัน้ ตอนต่าง ๆ มีแนว ทางทช่ี ัดเจนและสามารถปฏิบัติไดต้ ามท่ตี งั้ เป้าไว้ ซ่ึงประกอบด้วย 2) การกาหนดเน้ือหาและจุดประสงค์ของเว็บไซต์ การกาหนดเน้ือหา และจดุ ประสงคข์ องเว็บไซตท์ ี่จะสร้าง นบั เปน็ สิ่งสาคัญอย่างมากในการเริ่มต้นสรา้ งเว็บไซตเ์ ลยทีเดียว เพื่อใหเ้ หน็ ภาพว่าเราต้องการนาเสนอขอ้ มลู แบบใด เช่น เวบ็ ไซต์เพื่อใหข้ ้อมูลข่าวสาร การบริการด้านต่าง ๆ หรือขายสินค้า เป็นต้น เมื่อสามารถกาหนดจุดประสงค์ของเว็บไซต์ได้แล้ว เงื่อนไขเหล่านี้จะเป็นตัวกาหนด โครงสรา้ งรูปแบบรวมถึงหนา้ ตา และสเี วบ็ ไซต์ของเราดว้ ย

21 3) การกาหนดกลุ่มเป้าหมาย เพื่อให้การสร้างและออกแบบเว็บไซต์ ได้รับความนิยม การกาหนดกลุ่มเป้าหมายในการเข้าชมเว็บไซต์ก็นับว่ามีส่วนสาคัญไม่น้อย เช่น เวบ็ ไซต์สาหรบั เยาวชน นักเรียน นักศึกษาในการคน้ หาขอ้ มูล หรือเว็บไซต์สาหรับบุคคลทัว่ ไปทเี่ ข้าไป ใช้บริการตา่ ง ๆ เป็นตน้ 4) การเตรียมข้อมลู เน้ือหาหรอื ข้อมูลจัดวา่ เปน็ ส่ิงท่ีเชิญชวนใหผ้ ู้อ่ืนเข้า มาเยี่ยมชมเว็บไซต์ และต้องทราบว่าข้อมูลข่าวสารต่าง ๆ สามารถนามาจากแหล่งใดบ้าง เช่น การคิดนาเสนอข้อมูลด้วยตัวเอง หรือนาข้อมูลท่ีน่าสนใจมาจากส่ืออ่ืน เช่น หนังสือพิมพ์ แมกกาซีน เวบ็ ไซต์ และทสี่ าคัญ ขออนญุ าตเจ้าของบทความกอ่ นเพอ่ื ป้องกนั เร่ืองลิขสทิ ธิ์ดว้ ย 5) การเตรียมสิ่งต่าง ๆ ที่จาเป็น ในการออกแบบเว็บไซต์ต้องอาศัย ความสามารถต่าง ๆ เช่น โปรแกรมสาหรับสร้าง เว็บไซต์ ภาพเคล่ือนไหว มัลติมีเดีย การจัดโดเมนเนม การหาผู้ให้บรกิ ารรบั ฝากเวบ็ ไซต์ (Web Hosting) เป็นต้น 6) การจัดโครงสร้างข้อมูล เมื่อได้ข้อมูลต่าง ๆ เช่น กาหนดเน้ือหาและ จดุ ประสงค์ของเวบ็ ไซต์ การกาหนดกล่มุ เปา้ หมาย การเตรยี มข้อมูล การเตรียมสงิ่ ตา่ ง ๆ ทจี่ าเป็นจาก ข้นั แรกเรยี บรอ้ ยแล้ว ในขั้นตอนนี้ เราจะจดั ระบบเพื่อใชเ้ ป็นกรอบสาหรบั การออกแบบและดาเนนิ การ 2.3 เคร่ืองมอื ที่ใชใ้ นการพัฒนาเวบ็ ไซต์ 2.3.1 คูมอื การใชง้ าน Wix เครื่องมือสาหรับสร้างเว็บไซต์ออนไลน์ สามารถสร้างงานไดหลายประเภท เช่น เว็บไซต์สวนตัวBusiness, Portfolio หรอื Blog เป็นต้น ซึ่งรูปแบบการใช้งานไมซับซ้อนเพียงแคลาก วางอีกทั้งมีเครื่องมือและ ฟงกชันให้เลือกใช้งานมากมายท้ัง Template, Sound, Animation และ Effects ผู้ใช้สามารถกาหนดปรับแต่งเนื้อหาและแกไขไดด้วยตัวเองตั้งแต่ต้นจนจบโดยไมจาเป็นต้อง มีความรูหรือทักษะทางด้านการเขียนโค้ดนอกจากน้ี Wix ยังสามารถสร้าง Flash Animation จากหน้าเวบ็ ไซตไดโดยตรงไมจาเป็นต้องติดต้ัง โปรแกรมใดๆ รวมทั้งรองรบั การใชงานกับทุกอปุ กรณ์ เชื่อมต่ออินเตอร์เน็ต เชน่ เคร่ืองคอมพิวเตอร์ และมอื ถอื สมาร์ทโฟน เป็นต้น 2.3.1.1 การลงทะเบยี นเขาใชงาน 1) เขา้ ไปท่ีเว็บไซต์ https://www.wix.com 2) คลิกปมุ Start Now เพอ่ื สรา้ งเว็บไซต์ รปู ท่ี 2.18 หน้าเวบ็ ไซต์

22 3. จะปรากฏหน้าตา่ งสาหรับลงทะเบียนเข้าใช้งาน 1) คลิกที่ Sign Up เพื่อสร้างบัญชีผู้ใช้ใหม่ จากนั้นให้ใสช่ือท่ีอยู่ อีเมล์ ในช่อง Email และช่อง Type your email again อีกครั้ง ถัดมาให้กาหนดรหัสผ่านในช่อง Passwordและชอ่ ง Type your password again เพือ่ ยืนยนั รหสั ผา่ นอีกครั้ง แลว้ คลิกปมุ่ Sign Up 2) สาหรับการลงทะเบียนเข้าใช้งานผ่านช่องทาง Facebook และ Google+ รูปท่ี 2.19 หน้าต่างสาหรับลงทะเบียนเขา้ ใช้งาน 2.3.1.2 เริ่มต้นการสรา้ งเว็บไซต์ 1) เข้าสู่ระบบการใช้งาน Wix.com เรียบร้อยแล้วคลิกปุ่ม Create Your Website เพือ่ สร้างเว็บไซต์ จากนน้ั ให้เลอื กประเภทของเวบ็ ไซตท์ ต่ี ้องการสร้าง รูปท่ี 2.20 เขา้ สูร่ ะบบการใช้งาน Wix.com

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

24 3) ระบบจะทาการ Generate หน้าเว็บไซต์ และเม่ือเสร็จแลวจะไดผล ดงั ภาพดา้ นล่างซ่ึงเรียกว่า Wix Editor ซึ่งจะมีส่วนประกอบตา่ งๆ ดงั น้ี - Head Menu ประกอบด้วย - Side Menu ประกอบดว้ ย รูปที่ 2.23 ภาพ Wix Editor 2.3.1.3 การเพ่มิ Component ลงในหนา Web 1 ขอ้ ความ ( Text ) 1.1 การเพ่ิมข้อความ คลิกปุม Add เลือกท่ี Text จากนั้นให้คลิกเลือก รปู แบบของข้อความทีต่ ้องการ มที ัง้ หมด 3 รปู แบบ คอื - Themed Text คอื รปู แบบขอ้ ความที่เปน็ แกนข้อความ - Title คือรปู แบบขอ้ ความที่เป็นหัวขอ้ - Paragraphs คอื รปู แบบข้อความที่เปน็ เนอ้ื หา 1.2 จะแสดงหน้าต่าง Text Settings และกรอบข้อความขึ้นมา คลิกเลือก Edit Text 1.3 ถ้าตอ้ งการเพม่ิ ลกู เล่นหรอื Effect ใหก้ ับข้อความคลิกปมุ Animate 1.4 การลบข้อความให้เลือกท่ีข้อความท่ีต้องการลบแล้วคลิกขวา เลอื กคาสั่ง Delete รูปที่ 2.24 การเพ่ิมข้อความ

25 2. รปู ภาพ (Image) 2.1 การเพ่ิมรูปภาพ คลิกปุม Add เลือกท่ี Image ซ่ึงสามารถเลือก วิธกี ารเพิ่มรูปภาพได 4 รปู แบบ คือ - My Uploads คอื การนารูปภาพจากเคร่ืองคอมพวิ เตอร์ของคุณ - Image Collections คือการนารปู ภาพ หรอื Clip Art ทม่ี อี ยู่ในระบบ Wix - My Social Images คอื การนารปู ภาพมาจากชองทาง Social Media - Related Apps คอื การใช้แอพพลเิ คช่นั สาเร็จรูปเพ่ือปรับแต่งรูปภาพ 2.2 กรณีท่ีเลือก My Uploads จะปรากฏหน้าต่าง Choose Images ให้คลิกปุม Upload Images และเลือกรูปภาพท่ีต้องการ โดยระบบจะรองรับไฟล์ประเภท JPEG PNG และ GIF ทีม่ ขี นาดไฟล์ไมเกิน 15 MB เม่อื อพั โหลดเสรจ็ ให้คลิกปุม Done และคลิกปุม Add 2.3 ถ้าต้องการเปล่ียนรูปภาพให้คลิกที่รูปภาพแลวเลือก Change Image จากน้นั เลือกรูปภาพใหมทต่ี องการ และคลกิ ปุม Choose Images เพอ่ื เพิ่มรปู ภาพเข้าหนา้ เว็บไซต์ รปู ที่ 2.25 การเพ่มิ รูปภาพ

26 3. พ้นื หลงั (Page Background) 3.1 การออกแบบและแกไขรูปแบบพื้นหลังของหนาเว็บไซต์คลิกปุม Background 3.2 หากต้องการใช้สี (Color) เป็นพ้ืนหลังให้คลิกปุม Color จะปรากฏ หนา้ ต่างColor Picker ให้เลอื กโทนสที ีต่ อ้ งการหรือสามารถคดั ลอกโคด้ สีทีต่ ้องการมาใสได 3.3 การใช้รูปภาพ (Image) สามารถอัพโหลดรูปภาพมาเป็นพ้ืนหลัง ไดดว้ ยการคลิกปุม Imageและเลอื กรูปภาพท่ีตอ้ งการ 3.4 กรณีทต่ี อ้ งตั้งค่าเป็นไฟลว์ ดิ โี อ (Video) ให้คลิกปุม Video จะปรากฏ หนา้ ตา่ ง Choose a Video for Your Background ให้คลิกปมุ่ Upload Videos และเลอื กไฟล์วิดโี อทีต่ ้องการ ซึ่ง Wix จะรองรับไฟล์ประเภท MP4 MOV และ WebM ท่ีมีขนาดไฟล์ไมเกิน 50 MB และขนาด ความละเอียดสูงสุดของวิดีโออยู่ที่ 1920 x 1080 (Full HD) เมื่ออัพโหลดเสร็จให้คลิกปุม Done และ คลิกปมุ Change Background 3.5 นอกจากนี้สามารถใช้ภาพพ้ืนหลังที่มีอยู่ในระบบไดโดยการคลิก เลอื กไฟล์วิดโี อหรอื รปู ภาพทตี่ ้องการในชอ่ ง Selected Backgrounds และคลกิ ปุม Apply to Other Page รปู ที่ 2.26 การเพิ่มพนื้ หลัง

27 2.3.1.4 การ Preview & Save หนา้ เว็บไซต์ขณะที่สร้าง 1) การดูตัวอย่างให้ คลิกปุม Preview จะปรากฏหน้าต่างเว็บไซต์ เพ่อื ดู ภาพรวมของเว็บไซต์ก่อนใชง้ านจรงิ และเมื่อต้องการกลบั ไปแกไขเว็บไซตใ์ หค้ ลิกปมุ Back to Editor 2) จากนั้นคลิกปุม Save เพ่ือทาการบันทึกหน้าเว็บไซต์ ซึ่งจะปรากฏ หนา้ ตา่ ง Choose a domainto save your site มาให้เลือกการกาหนด Domain - Get a Free Wix.com domain คือการใช้ Domain ฟรีของระบบ ซ่ึงสามารถตง้ั ชือ่ Domain ได - Connect your own customized domain คือการเชื่อมต่อ Domain ทก่ี าหนดรายละเอยี ดตา่ งๆ ขนึ้ เอง 3) เม่ือกาหนดโดเมนเรียบร้อยแล้วคลิกปุ่ม Save & Continue เพื่อบันทึก Domain ของเว็บไซต์ 4) ถ้าต้องการแกไขช่ือ Domain ให้คลิกปุม Saved ท่ีมุมบนขวาของเว็บ Wix จะปรากฏหนา้ ต่างYour changes were saved คลิกท่ปี ุม Edit เพ่อื แกไขชอ่ื Domain เสรจ็ แลวคลิกปุม Done รูปที่ 2.27 หน้าเว็บไซต์ขณะสร้าง

28 2.3.1.5 การ Publish เว็บไซต์ 1) การเผยแพรหน้าเว็บไซตใ์ ห้คลกิ ปุม Publish ระบบจะทาการประมวลผลสักครู 2) จะปรากฏหน้าตา่ ง Congratulations ถ้าต้องการดูเว็บไซต์คลิกปุม View Site 3) จากนั้นคลิกปุม Done การเผยแพรเวบ็ ไซต์ก็เสร็จสมบูรณ์ รปู ท่ี 2.28 การ Publish เว็บไซต์ 2.3.1.6 การอพั โหลด Font เพือ่ นาไปใช้ งานบนเวบ็ ไซต์ 1) คลิกปุม My Uploads เลอื ก Font จะปรากฎหนาตาง Manage Your Fonts 2) แลวคลิกปุม Upload Fonts เพอ่ื อัพโหลด Font ตามท่ีตองการ 3) เมื่ออพั โหลด Font เสรจ็ เรียบรอยใหคลกิ ปมุ Close รปู ที่ 2.29 การอัพโหลด Font

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

30 4) ตอ่ ไปจะแสดงหน้าตา่ งให้สรา้ งแบบฟอร์ม ซง่ึ จะมที ัง้ หมด 2 สว่ น ไดแ้ ก่ - ส่วนเขียนคาถามในแบบฟอร์ม กจ็ ะใหเ้ ราใส่คาถามท่เี ราต้องการถาม - สว่ นยนื ยัน คอื ส่วนท่ีให้เรากาหนดยนื ยันการบนั ทึกของข้อมูลหรอื การอนุญาต ใหส้ ่งลิงค์ตอบกลบั รปู ท่ี 2.32 ส่วนเขยี นคาถามในแบบฟอรม์ รูปท่ี 2.33 สว่ นกาหนดยืนยันการบนั ทึกของข้อมลู หรอื การอนุญาตใหส้ ง่ ลิงคต์ อบกลับ 5) จากน้ันในสว่ นของการสร้างคาถามจะประกอบดว้ ย - หวั ขอ้ คาถาม คอื คาถามที่เราจะถาม - ประเภทคาถาม คอื รูปแบบคาตอบท่ตี อ้ งการ - ในส่วนของ ประเภทคาถาม กม็ ีให้เลือกหลายแบบ ตามรูปแบบทต่ี ้องการ คาตอบในทนี่ ีข้ อเลอื กเปน็ \"เลือกจากรายการ\" รูปท่ี 2.34 ส่วนของการสรา้ งคาถาม

31 6) จากน้นั กก็ ด \"เสร็จ\" เพอื่ เสร็จในการสรา้ งคาถามในเเตล่ ะขอ้ รูปที่ 2.35 การสรา้ งคาถามในเเต่ละขอ้ 7) จากนั้นเม่ือเราจะสร้างคาถามต่อไปก็ให้เลือก เพ่ิมรายการ ก็จะปรากฏ รปู แบบคาถามข้นึ มาก็เลอื กตามที่ต้องการ รูปที่ 2.36 สร้างคาถามตอ่ ไปกใ็ หเ้ ลอื ก เพ่ิมรายการ 8) จากนนั้ กจ็ ะได้คาถามทั้งหมดแบบนี้ทเ่ี ราสร้างข้นึ มา รูปท่ี 2.37 คาถามทงั้ หมดแบบนี้ที่เราสรา้ งขนึ้ มา

32 9) หรอื หากเราตอ้ งการแกไ้ ขกส็ ามารถทาได้ ดงั รูป รปู ที่ 2.38 ส่วนทเ่ี ราตอ้ งการแกไ้ ข 10) ในสว่ นของ ข้อความยืนยัน คอื สว่ นที่เราเขียนข้อความคาเชิญท่ีจะถูกส่งไป ยงั ผู้ท่ีเราเชิญให้เข้ามาตอบแบบฟอร์มของเรา เม่ือเขยี นเสร็จแล้วก็กด \"ส่งฟอร์ม\" เพื่อที่กาหนดท่ีอยู่อีเมล์ ของผู้ท่ีเราต้องการท่จี ะสง่ แบบ from นไ้ี ปให้ รูปท่ี 2.39 ส่วนของ ข้อความยนื ยนั 11) จากนั้นจะแสดงหน้าต่างๆ ที่เราต้องการท่ีจะเผยแพร่ ซ่ึงจะเอาลิงค์น้ีไปให้คนใน องค์กรหรือ แชร์ผ่าน Social Network หรือกาหนดบุคคลท่ีเราต้องการส่งแบบฟอร์มน้ีให้ จากน้ันกด \" เสร็จ \" เราสามารถเเชรใ์ หบุุ้คคลในองค์กรเราเข้ามารว่ มแก้ไขในแบบ ฟอร์ม น้ีของเราได้โดยเลอื ก \" เพ่ิมผทู้ างานรว่ ม \" รปู ที่ 2.40 สว่ นเราต้องการท่จี ะเผยแพร่ ซึ่งจะเอาลิงคน์ ไ้ี ปใหค้ นใน องคก์ รหรือ แชร์ผ่าน Social Network หรอื กาหนดบคุ คลท่เี ราต้องการส่งแบบฟอรม์ น้ีให้ จากน้ันกด \" เสร็จ \"

33 12) นอกจากน้ีแลว้ เรายังสามารถกาหนดได้อีกว่าเม่ือมีผู้ตอบกลบั มาแล้ว จะใหค้ าตอบ อยูท่ ่ีไหนโดยเลอื กท่ี \"การตอบกลบั \" > \"เปลี่ยนแปลงทางการตอบกลบั \" รปู ที่ 2.41 เลือกที่ \"การตอบกลบั \" > \"เปลยี่ นแปลงทางการตอบกลบั \" 13) จากน้ันกาหนด โดยเลือกว่าจะให้สรา้ ง สเปรดซีตใหม่หรือ สเปรดชีตเดิมที่มีอยู่แล้ว ซงึ่ ในท่นี กี้ ็ให้เลือกเป็น สเปรดชีตใหม่ จากนั้นกต็ ัง้ ชอ่ื ของ สเปรดชีต รูปที่ 2.42 จากนัน้ กาหนด โดยเลอื กวา่ จะใหส้ ร้าง สเปรดชตี ใหม่ หรอื สเปรดชตี เดมิ ท่ีมอี ยู่ 14) และเม่ือมาดูใน Drive ของเราก็จะเห็นไฟล์ท่ีจัดเก็บข้อมูลตอบกลับสร้าง ขึ้นมาให้เราอกี 1 ไฟล์ รปู ที่ 2.43 ดใู น Drive ของเราก็จะเห็นไฟลท์ จ่ี ัดเก็บข้อมลู ตอบกลบั สรา้ งข้นึ มาใหเ้ ราอีก 1 ไฟล์

34 2.5 การขอพ้ืนท่ีและการอพั โหลดเวบ็ ไซต์ 2.5.1 ขน้ั ตอนการอพั โหลดไฟลส์ ่เู ว็บไซต์ ขัน้ ตอนที่ 1 การจัดโครงสร้างเว็บและตรวจสอบการทางาน การจดั โครงสร้างเว็บและตรวจสอบการทางาน ของไฟลต์ า่ งๆ จดั ไฟล์ ให้ถกู ต้อง เพ่ือให้สะดวกตอ่ การลบและการแก้ไข การคน้ หาไฟล์ต่างๆได้อย่างรวดเร็ว การจัดโครงร่าง เวบ็ ทดี่ ี เปน็ หัวใจสาคญั ต่อการอัพโหลดไฟลง์ านข้นึ ส่เู ว็บไซต์ ขน้ั ตอนที่ 2 การขอพน้ื ท่ีบนเวบ็ เซริ ฟ์เวอร์ 1) ตดิ ตัง้ Web Server ดว้ ยตนเอง วิธีน้ีเสียค่าใช้จ่ายสูงท่ีสุด เพราะเราต้องซ้ือเคร่ืองคอมพิวเตอร์ มาจัดทาเป็นเครื่องให้บริการเอง นอกจากน้ันยังต้องเสียค่าใช้จ่ายในการเช่ือมต่อเครื่อง Sever ของเรากับอินเทอร์เน็ตแบบตลอด 24 ชั่วโมง และจะต้องเป็นอินเทอร์เน็ตแบบความเร็วสูง จึงจะสามารถ รองรับการบรกิ ารได้อย่างรวดเร็ว 2) ขอเชา่ พืน้ ทใ่ี น Web Server ของผอู้ นื่ หรือเรียกวา่ Web Hosting เป็นวิธีที่เสียค่าใช้จ่ายน้อยกว่าแบบที่ 1 เหมาะสาหรับผู้ท่ีมี งบประมาณในการจัดสร้างเว็บไซต์ท่ีอาจจะจ่ายเงินเป็นรายเดือนหรือรายปี โดยการบริการแบบน้ี จะสนบั สนุนคณุ สมบตั ติ ่าง ๆ ตามงบประมาณ(Package) ที่เราได้ซ้อื บริการ 3) ขอพื้นท่ีฟรใี น Web Server เป็นการบริการทเ่ี หมาะสาหรับผู้ท่ีเริ่มตน้ ฝึกหดั การสร้างเว็บไซต์ ของตัวเองก่อน ซึ่งการขอพ้ืนทบ่ี ริการฟรีน้ี จะมีข้อจากัดท่ีแตกต่างกันตามผใู้ ห้บริการ เช่น อาจจะติด ปา้ ยโฆษณา หรือมพี ้ืนที่บรกิ ารจากัด หรือมีความจากดั ในการติดต่อข้อมูล (Bandwidth) เว็บไซต์ท่ใี ห้ พ้ืนท่ีฟรีมีจานวนมากทั้งในประเทศและต่างประเทศ สามารถขอพ้ืนที่โฮสต์ฟรี ซ่ึงมีอยู่มากมาย เช่น www.thaicity.com , www.freeserver.com , www.topcities.com , www.000webhost.com , www.150m.com , www.50megs.com เปน็ ตน้ (แตล่ ะเวบ็ ไซตม์ วี ิธีการสมคั รในเวบ็ ไซตค์ ะ่ ) ขน้ั ตอนท่ี 3 การจดทะเบยี นโดเมนเนม (Domain Name) การจดทะเบียนโดเมนเมนแบง่ ออกเปน็ 2 ประเภท คือ 1) การจดทะเบยี นโดนเมนเนมภายในประเทศ .co.th เป็นเว็บไซต์ของบริษัท ห้างร้านโดยทั่วไป การจดทะเบียน ช่ือโดเมน ต้องเปน็ ชอ่ื เดียวกับช่ือบริษัท หรอื ชอื่ ยอ่ ของชอ่ื บรษิ ัท ซง่ึ จดทะเบยี นไวก้ ับกระทรวงพาณิชย์ .or.th ใช้ทาเว็บไซต์ของส่วนราชการ และช่ือโดเมนต้องเป็น ชื่อขององกร หรอื ตวั ยอ่ ของชื่อองค์กรนั้น ๆ ต้องใช้สาเนาเอกสารทางราชการเป็นหลักฐานการจดทะเบียน .ac.th เป็นเวบ็ ไซตข์ องสถานศึกษาต่าง ๆ ชอ่ื ของโดเมนท่ีจดทะเบียน ตอ้ งเป็นชื่อของสถานศกึ ษานนั้ ๆ หรือชือ่ ยอ่ ของช่ือสถานศกึ ษา ใช้สาเนาเอกสารการขออนญุ าตกอ่ ต้ัง สถานศกึ ษาเป็นหลักฐาน .in.th เป็นเว็บไซต์ของบุคคลธรรมดาโดยท่ัวไป ช่ือโดเมนจะใช้ ช่ืออะไรก็ได้ ใชส้ าเนาบัตรประชาชน หรือสาเนาใบขบั ข่เี ปน็ หลกั ฐานการจดทะเบยี น

35 .go.th เป็นเว็บไซตข์ องสว่ นราชการของประเทศไทย โดยปกติจะเป็น องคก์ รขนาดใหญ่ .net.th เป็นเว็บไซต์เก่ียวกับบริษัทที่เก่ียวกับระบบ Network หรือ ISP (ผูใ้ ห้บรกิ ารอินเตอรเ์ นต็ ) ในประเทศไทย 2) การจดทะเบยี นโดเมนเนมตา่ งประเทศ .com ใช้ทาเว็บไซต์ของบริษัท ห้างร้านโดยทั่วไป รวมทั้งเว็บไซต์ส่วนตัว และมบี างคร้งั นาไปใช้ทาเว็บไซต์ (web site) ประเภทอ่ืนๆ ดว้ ย .net ใช้ทาเว็บไซต์เกี่ยวกับระบบเนต็ เวริ ค์ (network) ของคอมพวิ เตอร์ หรือเว็บไซต์บรกิ ารอนิ เตอรเ์ น็ต แต่บางครงั้ กน็ าไปใช้ดา้ นอ่ืนด้วย .org ใช้ทาเวบ็ ไซต์ของส่วนราชการ .biz สาหรับเว็บไซต์ธุรกิจโดยท่ัวไป เป็นโดเมนน้องใหม่พึงเกิดข้ึน จากการรวมกลุ่มธรุ กจิ ที่เป็น ธุรกจิ จรงิ ๆ ซงึ่ กไ็ ด้รบั ความสนใจและเป็นท่ีรจู้ กั คอ่ นขา้ งเร็ว .info ใช้สาหรับเว็บไซต์ท่ีให้รายละเอียดเก่ียวกับข้อมูลต่าง ๆ เชน่ ขอ้ มูลของประเทศต่าง ๆ เป็นตน้ ขัน้ ตอนท่ี 4 การอัพโหลดไฟล์ขึ้นเวบ็ เซิร์ฟเวอร์ หลังจากจัดการขอพ้ืนท่ีเว็บไซต์บนเซิร์ฟเวอร์แล้ว (เสียเงินค่าเว็บ Hosting หรือจะทดลองใช้ฟรี) ขั้นตอนต่อไปคือการโอนข้อมูลไปยัง Hosting ที่เราใช้บริการ โดยทวั่ ไปแลว้ รปู แบบการอัพโหลดเวบ็ ไซต์จะมีอยู่ดว้ ยกนั 3 รปู แบบ ไดแ้ ก่ 1) การอพั โหลดผา่ นบราวเซอร์ 2) การอพั โหลดด้วยโปรแกรม Adobe Dreamweaver CS6 3) การอัพโหลดดว้ ยโปรแกรม FTP ซงึ่ เปน็ โปรแกรมช่วยในการอัพโหลด 2.5.2 การอัพโหลดไฟล์โดยใชโ้ ปรแกรมไฟล์ซลิ ลา (FileZilla Client) FTP ย่อมาจาก (File Transfer Protocol) คือ รูปแบบมาตรฐานบนโครงข่าย (Standard Network Protocol) ชนิดหน่ึง ท่ีใช้สาหรับการส่งไฟล์ หรือรับไฟล์ (Receive file) ระหว่างเครื่องคอมพิวเตอร์ท่ีเป็นลูกข่ายท่ีส่วนใหญ่จะเรียกว่าไคลเอนต์ (Client) กับเครื่องคอมพิวเตอร์ ท่เี ป็นแม่ขา่ ยทีส่ ่วนใหญจ่ ะเรียกว่า โฮสติง (Hosting) หรอื เซิร์ฟเวอร์ (Server) โดยท่ีการตดิ ตอ่ กันทาง FTP เราจะต้องติดต่อกันทาง Port 21 ซึ่งก่อนท่ีจะเข้าใช้งานได้นั้น จะต้องเป็นสมาชิกและมีช่ือผู้เข้าใช้ (User) และ รหัสผู้เข้าใช้ (password) ก่อน โปรแกรมสาหรับติดต่อกับแม่ข่าย (server) ส่วนมาก จะใช้โปรแกรมสาเรจ็ รูป เชน่ โปรแกรม ไฟลซ์ ิลลา FileZilla , WSFTP , CuteFTP 2.5.2.1 วธิ ีการตง้ั คา่ บนโปรแกรม FileZilla Client และวิธีการใช้งานเบ้ืองต้น 1) เปิดโปรแกรม แล้วไปท่ีเมนู File เลือก Site Manager เพ่ือทาการต้ังค่า FTP Site 2) คลิกเลือก New Site จากน้ันทาการต้ังค่าชื่อไซต์ของคุณ จากน้ันให้ ทาการระบคุ ่า FTP Server ตามขอ้ มูลท่ีได้รับจากเซิรฟ์ เวอร์ทูเดย์ (คุณสามารถตั้งชื่อ Site ได้ตามต้องการ ระบบจะทาการบนั ทกึ คา่ ทงั้ หมดภายใตช้ อ่ื Profile นี้ สะดวกสาหรบั การใชง้ านในคร้งั ตอ่ ไป)

36 3) Host Address: ให้ป้อนค่าตาแหน่ง FTP Server โดยระบุเป็นชื่อ ftp.yourdomain.com หรือ ในกรณีท่ี DNS ยังไม่ Update คุณสามารถระบุเป็นหมายเลข Ip ของ เซริ ฟ์ เวอร์กจ็ ะได้ผลเช่นเดยี วกัน 4) Port: ใหป้ อ้ นค่าเปน็ 21 5) Protocol: ให้เลือกเปน็ FTP - File Transfer Protocol 6) Encryption: ใหเ้ ลือกเป็น Only Use Plain FTP (insecure) (ปญั หา การเชือ่ มตอ่ ไม่ได้ ส่วนมากพบเนอ่ื งจากเลือก Encryption ผิด) 7) Logon Type: ใหเ้ ลือกเปน็ Normal 8) User: ให้ป้อนค่า FTP User ที่ได้รับจากเซิร์ฟเวอร์ทูเดย์ หรือ ค่าบัญชี การใช้งานท่ีได้จากการตัง้ ค่าใน FTP Management 9) Password: ใหป้ อ้ นคา่ รหสั ผ่านของ FTP 10) เมือ่ ทาการป้อนค่าทง้ั หมดแล้ว สามารถคลิกเลือกท่ี Connect เพ่ือ ทาการเชื่อมต่อกบั Host 11) เมื่อทาการเช่ือมตอ่ สาเรจ็ จะปรากฏขอ้ มูลบนฝ่ังเซิรฟ์ เวอรด์ ้านขวามือ ให้ทาการดบั เบลิ คลิกท่ี public_html 12) หน้าต่างด้านซ้ายเป็นข้อมูลบนฝั่งเครื่องคอมพิวเตอร์ของคุณสามารถ อัพโหลดไฟลไ์ ด้โดยเลอื กไฟล์แลว้ คลกิ ขวา จากนั้นเลือก Upload โปรแกรมกจ็ ะทาการส่งไฟลข์ องคุณ ขน้ึ ไปบน Server ทงั้ นี้ คุณสามารถเลือกอัพโหลดหลายไฟล์พร้อมกันหรือจะเลือกอพั โหลดเปน็ โฟล์เดอร์ ก็ทาไดเ้ ช่นกัน รปู ท่ี 2.44 การอพั โหลดไฟล์

37 2.6 ขอ้ มูลพ้นื ฐานโรงเรยี นบ้านเหล่าคราม 2.6.1 ข้อมลู ทัว่ ไปของโรงเรยี น โรงเรยี นบ้านเหลา่ คราม ต้ังอยเู่ ลขท่ี 200 หมู่ที่ 12 ตาบลคาอาฮวน อาเภอเมืองมุกดาหาร จังหวัดมุกดาหาร รหัสไปรษณีย์ 49000 สังกัดสานักงานเขตพื้นที่การศึกษาประถมศึกษามุกดาหาร สานักงานคณะกรรมการการศึกษาขั้นพื้นฐาน กระทรวงศึกษาธิการ โทรศัพท์ โทรสาร เปิดสอน ระดับชั้นอนุบาล 1 ถึงระดับช้ันมัธยมศึกษาปีท่ี 3 ผู้บริหารสถานศึกษา ชื่อ นายพิเชษฐ มหาวงศ์ วุฒิการศึกษา ปริญญาโท สาขา บริหารการศึกษา ดารงตาแหน่งน้ีท่ีโรงเรียนตั้งแต่ 29 เดือน พฤศจกิ ายน พ.ศ. 2556 จนถึงปจั จุบัน เปน็ เวลา 5 ปี 5 เดือน 2.6.2 ประวตั โิ รงเรียนโดยย่อ โรงเรียนบ้านเหล่าคราม ก่อตั้งขึ้นเม่ือวันที่ 11 เดือนมิถุนายน พ.ศ. 2481 โดยการนา ของนายเรน พาลึก และกานัน ผู้ใหญ่บ้าน ร่วมกับชาวบ้าน เป็นผู้จัดต้ังขึ้นโดยใช้ศาลาวัดโพธ์ิศิลา บ้านเหล่าคราม เป็นสถานท่ีศึกษาเล่าเรียนโดยมี นายเรน พาลึก เป็นครูใหญ่คนแรก และในเวลา ต่อมาจึงได้ย้าย สถานที่เรียนมายังสถานท่ีปัจจุบัน พ.ศ. 2515 ทางโรงเรียนได้รับความช่วยเหลือจาก ชาวบ้านร่วมกับนิสิตนักศกึ ษา จุฬาลงกรณ์มหาวิทยาลัย ไดก้ ่อสร้างอาคารเรียนช่วั คราวให้ จานวน 1 หลัง 4 หอ้ งเรยี น พร้อมท้ังโตะ๊ เก้าอี้ กระดานดา คิดเป็นมลู ค่า 80,000.- บาท (-แปดหม่นื บาทถ้วน-) พ.ศ. 2523 ได้รับงบประมาณจากองคก์ ารบริหารสว่ นจังหวัด ไดก้ ่อสรา้ งอาคารเรียน ป. 1 ฉ จานวน 1 หลงั 3 หอ้ งเรยี น ต่อจากน้ันไดร้ ับงบประมาณเพ่ิมข้นึ เร่ือยๆ ตามลาดบั มีอาคารอเนกประสงค์ อาคารเรยี น สปช. 105/2526 บา้ นพักครู สปช. แบบ 301/2526 ส้วมแบบ สปช. 601/2526 ถังน้าฝน และอาคารเรียนแบบ สปช. 105/2529 ปีการศึกษา 2535 โรงเรียนเปิดเป็นโรงเรียนขยายโอกาสทางการศึกษา ทาการสอน ต้ังแต่ระดับชั้น อนุบาล 1 ถึงระดับช้ันมัธยมศึกษาปีท่ี 3 ปีการศึกษา 2558 ได้รับงบประมาณจากมูลนิธิอายิโนะโมะโต๊ะ สร้างโรงอาหาร จานวน เงิน 500,000 บาท (ห้าแสนบาทถ้วน) ปีการศึกษา 2559 ได้รับงบประมาณจาก มูลนิธิเอสซีจี สร้างห้องน้าชาย จานวนเงิน 80,000 บาท (แปดหม่ืนบาทถ้วน) ปีการศึกษา 2560 ได้รับ งบประมาณจากหน่วยงานต้นสังกัด สร้างลานกีฬาอเนกประสงค์ (แบบกรมพละศึกษา) จานวนเงิน 157,500 บาท (หนง่ึ แสนห้าหมื่นเจ็ดพันหา้ รอ้ ยบาทถ้วน) และ ส้วมนักเรียนชาย 4 ท่ี 49 จานวนเงิน 505,000 บาท (หา้ แสนหา้ พันบาทถ้วน) 2.7 งานวจิ ยั ทเี่ กีย่ วขอ้ ง ชลลดา สาครวิศวะ (2548) ศกึ ษาเรอ่ื ง การพฒั นาเวบ็ ไซต์การประชาสมั พันธ์ของ บัณฑิต วิทยาลัย สถาบันเทคโนโลยีพระจอมเกล้าคุณทหารลาดกระบัง โดยกาหนดกลุ่มตัวอย่าง เป็นผู้ที่ใช้ บริการเว็บไซต์ประชาสัมพันธ์ของบัณฑิตวิทยาลัย สถาบันสถาบันเทคโนโลยีพระจอม เกล้าคุณทหาร ลาดกระบัง แบ่งเป็น 4 กลุ่ม ได้แก่ อาจารย์ประจาบัณฑิต นักศึกษามหาบัณฑิต นักศึกษาระดับ บัณฑิต และบุคคลท่ัวไป พบว่าเว็บไซต์ประชาสัมพันธ์ของบัณฑิตวิทยาลัย สถาบัน เทคโนโลยีพระ จอมเกล้าคุณทหารลาดกระบังมีคุณภาพตามเกณฑ์การประเมินของผู้ทรงคุณวุฒิ อยู่ในเกณฑ์ดี และ ความพึงพอใจของผู้ใช้บริการเว็บไซต์ประชาสมั พันธ์ของบณั ฑิตวิทยาลัย สถาบันเทคโนโลยีพระ จอมเกลา้ คณุ ทหารลาดกระบงั ที่ผวู้ จิ ัยสรา้ งขึน้ อยู่ในระดับ

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

บทที่ 3 วธิ ีการดาเนินงาน การสรา้ งเว็บไซต์โรงเรยี นบ้านเหลา่ คราม ตาบลคาอาฮวน อาเภอเมืองมกุ ดาหาร จังหวัดมกุ ดาหาร มวี ัตถุประสงค์ การจดั ทาเว็บไซต์และการเผยแพรข่ ้อมลู ขา่ วสารแบบเตม็ รูปแบบของโรงเรยี นบ้านเหล่าคราม เพ่อื พฒั นาสกู่ ารเผยแพร่ ขอ้ มูลขา่ วสารผ่านระบบเครือข่ายอินเทอร์เน็ต โดยระบบจะสามารถจดั เก็บข้อมูล เพื่อช่วยในการพัฒนาปรับปรุง แก้ไข และตัดสินใจต่อผู้บริหารและบุคลากร โดยการออกแบบระบบ แบง่ ออกเป็นข้ันตอนตา่ ง ๆ ดังนี้ 3.1 ประชากรและกลุม่ ตวั อยา่ ง 3.2 เครอ่ื งมือทใ่ี ช่ในการพฒั นาระบบ/วจิ ัย 3.3 แผนการดาเนินงาน 3.4 การศกึ ษาระบบงานเดมิ 3.5 การวิเคราะหค์ วามตอ้ งการของผูใ้ ช้ 3.6 การวิเคราะหแ์ ละออกแบบระบบ 3.1 ประชากรและกลมุ่ ตัวอย่าง 3.1.1 ประชากร ประชากรในการศึกษาในครั้งนี้คือ ผู้อานวยการโรงเรียน คณะคุณครู ผู้ปกครอง และ นักเรยี นระดับชนั้ ประถมศึกษาปีที่ 1- 6 และ นักเรียนระดับชั้นมัธยมศึกษาปีท่ี 1–3 โรงเรียน บ้านเหล่าคราม อาเภอเมืองมุกดาหาร จงั หวัดมกุ ดาหาร รวมทัง้ หมด 452 คน 1) ผอู้ านวยการ จานวน 1 คน 2) คณะครู จานวน 17 คน 3) นกั เรยี นระดับชั้นประถมศึกษาปีท่ี 1- 6 จานวน 169 คน 4) นกั เรียนระดบั ชนั้ มัธยมศึกษาปีที่ 1–3 จานวน 48 คน 5) ผ้ปู กครองของนกั เรียน จานวน 217 คน 3.1.2 กลุ่มตัวอย่าง กลุ่มตัวอย่าง คือ ผู้อานวยการโรงเรียน คณะคุณครู ผู้ปกครอง และ นักเรียน ระดบั ชั้นประถมศกึ ษาปที ี่ 1- 6 และ นกั เรียนระดับชัน้ มัธยมศึกษาปที ี่ 1–3 โรงเรยี นบ้านเหลา่ คราม อาเภอเมืองมุกดาหาร จังหวัดมุกดาหาร ประชากร จานวน 320 คน ซ่ึงไดมาจากการสุม ตัวอยาง แบบเครจซแี ละมอรแ์ กน (Krejcie & Morgan) ดังน้ี 1) ผูอ้ านวยการ จานวน 1 คน 2) คณะครู จานวน 17 คน 3) นักเรียนระดับช้ันประถมศึกษาปีที่ 1- 6 จานวน 118 คน 4) นักเรยี นระดับชั้นมัธยมศึกษาปีท่ี 1–3 จานวน 44 คน 5) ผปู้ กครองของนกั เรยี น จานวน 140 คน

40 ตารางท่ี 3.1 เครจซีและมอรแ์ กน (Krejcie & Morgan) 3.2 เครอื่ งมือท่ใี ช่ในการพัฒนาระบบ/วจิ ัย 3.2.1 เครอื่ งมือในการพัฒนาระบบ (Hardware) 3.2.1.1 ไมโครคอมพิวเตอร์ 1) Intel core i3 2) HDD 1 TB 3) DDR3 4 GB Memory 3.2.2 เคร่อื งมือในการพฒั นาระบบ (Software) 3.2.2.1 ระบบปฏบิ ัติการ Windows 10 Pro 3.2.2.2 เวบ็ ไซตส์ าเร็จรูป Wix 3.2.2.3 โปรแกรม Adobe Photoshop CS6S 3.2.2.4 โปรแกรม Microsoft word 2010 3.2.2.5 โปรแกรมสาหรบั สร้างผงั งานต่าง ๆ Microsoft Visio 2013 3.2.2.6 Google Drive 3.2.2.7 Google From