คำนำ เอกสารประกอบการอบรมหลักสูตร การจัดการเรียนรู้ผ่านบทเรียนออนไลน์ด้วย New Google Sites รหัสหลักสูตร 651011026 เป็นหลักสูตรรับรองโดยสำนักงานคณะกรรมการการอาชีวศึกษา (ส.อ.ศ) โดยเนื้อหา ประกอบด้วยแผนการจัดกิจกรรมทั้งหมด 6 กิจกรรมคือ ความรู้เกี่ยวกับบทเรียนออนไลน์การบทเรียนออนไลน์ ด้วย New Google Site การเพิ่มเนื้อหาในบทเรียนออนไลน์ การแทรกวัตถุและสื่อในบทเรียนออนไลน์ การแสดงผลบทเรียนออนไลน์ ด้วย QR Code การนำเสนอบทเรียนออนไลน์ โดยเนื้อหาในเอกสารประกอบ การอบรมประกอบด้วยเนื้อหาสำหรับอบรมเชิงปฏิบัติการ มีขั้นตอนใน สร้างบทเรียนออนไลน์Step by Step พร้อมไฟล์ฝึกปฏิบัติ ประกอบด้วย ตัวอย่างบทเรียนออนไลน์ที่ใช้เป็นต้นแบบในการฝึกปฏิบัติในแต่ละหัวข้อ ได้อธิบายวิธีทำ แต่ละขั้นตอน อย่างละเอียด ผู้เข้ารับการอบรมสามารถทำตามและฝึกเพิ่มเติมหลังจากอบรม ผู้เรียบเรียงหวังเป็นอย่างยิ่งว่าเอกสารประกอบการอบรมเล่มนี้จะเป็นประโยชน์ และเป็นแนวทาง ในการสร้างบทเรียนออนไลน์ เพื่อนำไปใช้ในการจัดการเรียนรู้ให้กับผู้เรียนสามารถเข้าเรียนได้ทุกที่ทุกเวลา ทบทวนหัวข้อที่ไม่เข้าใจและส่งข้อความหาครูผู้สอนผ่านฟอร์มในบทเรียนออนไลน์ได้สะดวกและรวดเร็ว หากมีข้อเสนอแนะ ประการใด ผู้เรียบเรียง ยินดีรับไว้เพื่อปรับปรุงข้อมูลให้สมบูรณ์ในในครั้งต่อไป ดร.มงคล แสงอรุณ นางนันทา เพ็ตมาน กันยายน 2565
สารบัญ เนื้อหา หน้า คำนำ สารบัญ แผนการจัดกิจกรรมที่1 ความรู้เกี่ยวกับบทเรียนออนไลน์ 1 ความหมายบทเรียนออนไลน์หรือบทเรียนผ่านเว็บด้วย Google Sites 2 ส่วนประกอบบทเรียนออนไลน์ 3 การออกแบบบทเรียนผ่านเว็บไซต์ 4 ลักษณะและประเภทของการเรียนการสอนผ่านเว็บ 8 ประโยชน์ของการเรียนการสอนผ่านเว็บ 9 ตัวอย่างบทเรียนออนไลน์ที่สร้างจาก New Google Sites 10 แผนการจัดกิจกรรมที่2 การสร้างบทเรียนออนไลน์ด้วย New Google Sites 14 เริ่มต้นสร้าง บทเรียนออนไลน์ด้วย Google Sites 15 การสร้างบทเรียนออนไลน์ด้วย New Google Site แบบที่ 1 (ผ่าน Google App) 17 การสร้างบทเรียนออนไลน์ด้วย New Google Site แบบที่ 2 (ผ่าน URL https://sites.google.com/) 18 การสร้างบทเรียนออนไลน์ด้วย New Google Site แบบที่ 3 (สร้างในโฟลเดอร์ที่กำหนด) 20 ส่วนประกอบของ Google Site 22 การวางโครงสร้างและรายละเอียดของบทเรียนออนไลน์ 23 การกำหนด Header Type 25 การเปลี่ยนรูปภาพ Header 27 การเปลี่ยนรูปแบบธีม (Theme) บทเรียนออนไลน์ 28
แผนการจัดกิจกรรมที่3 การเพิ่มเนื้อหาในบทเรียนออนไลน์ 31 การเพิ่มหน้าเว็บเพจ 32 การเพิ่มเมนูย่อย 35 รูปแบบในการเพิ่มเนื้อหาในเว็บเพจ 38 การเพิ่มข้อความ 39 การเพิ่มรูปภาพ 40 การเพิ่ม Embed 42 การ Upload 53 การเพิ่มข้อมูลจาก Google Drive 54 แผนการจัดกิจกรรมที่4 การแทรกวัตถุและสื่อลงในบทเรียนออนไลน์ 55 การเพิ่มลิงก์หรือการเชื่อมโยง 56 การสร้าง Photo Gallery 59 การสร้าง Slide Show 62 การสร้างภาพหมุน 66 การแทรก Google Form แสดงความคิดเห็นของผู้เรียน 71 การแบ่งปันการมอบสิทธิ์และการแก้ไข 86 การคัดลอกบทเรียนออนไลน์ 89 แผนการจัดกิจกรรมที่5 การแสดงผลบทเรียนออนไลน์ด้วย QR Code 97 การเผยแพร่บทเรียนออนไลน์ 98 การสร้าง QR Code บทเรียนออนไลน์ 101 การแสดงผลบทเรียนออนไลน์ด้วย QR Code 105 ฝึกปฏิบัติCase study ตามตัวอย่าง 106 แสดงผลบทเรียนออนไลน์ตัวอย่าง ด้วยQR Code 106
แผนการจัดกิจกรรมที่6 การนำเสนอบทเรียนออนไลน์ 107 การออกแบบบทเรียนออนไลน์1 รายวิชา 108 การสร้างบทเรียนออนไลน์ด้วย New Google Sites ตามที่ออกแบบ 108 แสดงผลบทเรียนออนไลน์ด้วย QR Code 108 การนำเสนอบทเรียนออนไลน์ที่สมบูรณ์ด้วย Loom 108 ประเมินผลการอบรมด้านความรู้ทักษะ และความเป็นครู 114 ประเมินความพึงพอใจผู้เข้ารับการอบรม 114
แผนการจัดกิจกรรมที่ 1 ความรู้เกี่ยวกับบทเรียนออนไลน์ จำนวน 3 ชั่วโมง วัตถุประสงค์ 1. เพื่อให้ครูผู้เข้ารับการอบรมมีความรู้และความเข้าใจความรู้เบื้องต้นเกี่ยวกับบทเรียนออนไลน์ 2. เพื่อให้ครูผู้เข้ารับการอบรมมีความรู้และความเข้าใจส่วนประกอบของบทเรียนออนไลน์ และสามารถออกแบบบทเรียนออนไลน์ได้ พฤติกรรมการเรียนรู้ของครูที่จะเกิดขึ้น ครูผู้เข้ารับการอบรมมีความรู้ความเข้าใจความรู้เบื้องต้นเกี่ยวกับบทเรียนออนไลน์ และสามารถออกแบบ บทเรียนออนไลน์ได้ สาระหัวข้อการพัฒนา 1. ความหมายบทเรียนออนไลน์หรือบทเรียนผ่านเว็บด้วย Google Sites 2. ส่วนประกอบบทเรียนออนไลน์ 3. การออกแบบบทเรียนผ่านเว็บไซต์ 4. ลักษณะและประเภทของการเรียนการสอนผ่านเว็บ 5. ประโยชน์ของการเรียนการสอนผ่านเว็บ 6. ตัวอย่างบทเรียนออนไลน์ที่สร้างจาก New Google Sites หลักสูตร การจัดการเรียนรู้ผ่านบทเรียนออนไลน์ด้วย New Google Sites รหัสหลักสูตร 651011026 1 โดย อาชีวศึกษาจังหวัดอุทัยธานีวันที่ 19-21 กันยายน 2565 ณ วิทยาลัยเทคนิคอุทัยธานี
1. ความหมายบทเรียนออนไลน์หรือบทเรียนผ่านเว็บด้วย Google Sites คาน (Khan, 1997) ได้ให้คำจำกัดความของการเรียนการสอนผ่านเว็บ (Web-Based Instruction)ไว้ว่าเป็น การเรียนการสอนที่อาศัยโปรแกรมไฮเปอร์มีเดียที่ช่วยในการสอน โดยการใช้ประโยชน์จากคุณลักษณะและทรัพยากร ของอินเทอร์เน็ต มาสร้างให้เกิดการเรียนรู้อย่างมีความหมาย โดยส่งเสริมและสนับสนุนการเรียนรู้อย่างมากมายและ สนับสนุนการเรียนรู้ในทุกทาง คลาร์ก (Clark, 1996) ได้ให้คำจำกัดความของการเรียนการสอนผ่านเว็บว่า เป็นการเรียนการ สอนรายบุคคลที่ นำเสนอโดยการใช้เครือข่ายคอมพิวเตอร์สาธารณะหรือส่วนบุคคล และแสดงผลในรูป ของการใช้เว็บบราวเซอร์สามารถ เข้าถึงข้อมูลที่ติดตั้งไว้ได้โดยผ่านเครือข่าย พาร์สัน (Parson, 1997) ได้ให้ความหมายของการเรียนการสอนผ่านเว็บว่า เป็นการสอนที่ นำเอาสิ่งที่ต้องการ ส่งให้บางส่วนหรือทั้งหมดโดยอาศัยเว็บ โดยเว็บสามารถกระทำได้ในหลากหลาย รูปแบบและหลายขอบเขตที่เชื่อมโยง กัน ทั้งการเชื่อมต่อบทเรียน วัสดุช่วยการเรียนรู้และการศึกษา ทางไกล ดริสคอล (Driscoll, 1997) ได้ให้ความหมายของการเรียนการสอนผ่านเว็บว่า เป็นการใช้ทักษะหรือความรู้ต่างๆ ถ่ายโยงไปสู่ที่ใดที่หนึ่งโดยการใช้เวิลด์ไวด์เว็บเป็นช่องทางในการเผยแพร่สิ่งเหล่านั้น แคมเพลสและแคมเพลส (Camplese and Camplese, 19100) ให้ความหมายของการเรียน การสอนผ่าน เว็บว่าเป็นการจัดการเรียนการสอนทั้งกระบวนการหรือบางส่วน โดยใช้เวิลด์ไวด์เว็บ เป็น สื่อกลางในการถ่ายทอด ความรู้แลกเปลี่ยนข่าวสารข้อมูลระหว่างกัน เนื่องจากเวิลด์ไวด์เว็บมีความ สามารถในการถ่ายทอดข้อมูลได้หลาย ประเภทไม่ว่าจะเป็น ข้อความ ภาพนิ่ง ภาพเคลื่อนไหว และเสียง จึงเหมาะแก่การเป็นสื่อกลาง ในการถ่ายทอดเนื้อหา การเรียนการสอน ลานเพียร์ (Laanpere, 1997) ได้ให้ความหมายของการเรียนการสอนผ่านเว็บว่า เป็นการจัดการเรียนการสอน ผ่านสภาพแวดล้อมของเวิลด์ไวด์เว็บ ซึ่งอาจเป็นเพียงส่วนหนึ่งของ การเรียนการสอนในหลักสูตรมหาวิทยาลัย ส่วนประกอบการบรรยายในชั้นเรียน การสัมมนาโครงการ กลุ่มหรือการสื่อสารระหว่างผู้เรียนกับผู้สอนหรืออาจเป็น ลักษณะของหลักสูตรที่เรียนผ่านเวิลด์ไวด์เว็บ โดยตรงทั้งกระบวนการเลยก็ได้ การเรียนการสอนผ่านเว็บนี้เป็นการ รวมกันระหว่างการศึกษาและ การฝึกอบรมเข้าไว้ด้วยกันโดยให้ความสนใจต่อการใช้ในระดับ การเรียนที่สูงกว่าระดับ มัธยมศึกษา พรทิพย์ ชูศรี (2556: 46) ได้ให้ความหมายของการเรียนการสอนบนเครือข่ายอินเทอร์เน็ต การเรียนการสอน ผ่านเว็บไว้ว่า การเรียนการสอนบนเครือข่ายอินเทอร์เน็ต (Online Instruction) เป็น การจัดการเรียนการสอนที่มี สภาพการเรียนที่ต่างไปจากรูปแบบเดิม โดยอาศัยทั้งศักยภาพและ ความสามารถของอินเทอร์เน็ต ซึ่งเป็นการเรียนการ สอนที่มีเทคโนโลยีสูงสุดในขณะนี้ ให้เข้ามาช่วย เอื้ออ านวยเป็นเครื่องมือและเป็นแหล่งสนับสนุนการเรียนการสอน ให้ เกิดการเรียนรู้อย่างมีความหมาย เชื่อมโยงเครือข่ายที่สามารถเรียนรู้ได้ทุกสถานที่ทุกเวลา ซึ่งให้มีชื่อเรียกหลายลักษณะ ได้แก่การทดสอบผ่านเว็บ (Web-based Instruction) การเรียนรู้ผ่านเว็บ (Web-based Training) การสอน ผ่าน หลักสูตร การจัดการเรียนรู้ผ่านบทเรียนออนไลน์ด้วย New Google Sites รหัสหลักสูตร 651011026 2 โดย อาชีวศึกษาจังหวัดอุทัยธานีวันที่ 19-21 กันยายน 2565 ณ วิทยาลัยเทคนิคอุทัยธานี
อินเทอร์เน็ต (Internet-based Instruction) การสอนผ่านเวิลด์ไวด์เว็บ (Web-based Instruction) การเรียนรู้ผ่าน เวิลด์ไวด์เว็บ (Web Training) การเรียนผ่านเว็บ (Web-based Leaning) ศรันย์ พรมสวัสดิ์ (2557: 19) ได้ให้ความหมายของการเรียนการสอนผ่านเว็บไว้ว่า การเรียน การสอนผ่านเว็บ หมายถึง บทเรียนผ่าน (Web based instruction) คือ การเรียนการสอนผ่านระบบ เครือข่ายอินเทอร์เน็ต ที่มีรูปแบบ ของไฮเปอร์มีเดีย โดยอาศัยประโยชน์ทรัพยากรของอินเทอร์เน็ต และ เวิลด์ ไวด์ เว็บ ซึ่งรวมทั้งเครื่องมือสื่อสารในการ สร้างสรรค์กิจกรรมการเรียนทำให้เกิดการเรียนรู้สามารถเรียนรู้ได้ทุกที่ทุกเวลา นิตยา มั่นศักดิ์ (2560: 19) ได้ให้ความหมายของการเรียนการสอนผ่านเว็บไว้ว่า บทเรียนที่ถูก พัฒนาขึ้นมา ประกอบด้วยภาพนิ่ง ภาพเคลื่อนไหว ข้อความ และเสียง โดยผ่านการเชื่อมโยงผ่าน เครือข่ายอินเทอร์เน็ตความเร็วสูง สรุปได้ว่า การเรียนการสอนผ่านเว็บหรือการสอนด้วยบทเรียนออนไลน์ เป็นการใช้เครื่องมือหรือสื่อที่จัดทำขึ้นใน ลักษณะสื่อหลายมิติมาช่วยในการเรียนรู้โดยใช้เทคโนโลยีของเว็บและเบราเซอร์เป็นตัวจัดการให้เกิดประสิทธิภาพสูงสุด สามารถปรับปรุงพัฒนาเนื้อหาให้ทันสมัยได้อย่างรวดเร็วและตลอดเวลาเป็นสื่อที่นักเรียนสามารถเรียนรู้ได้ด้วยตนเอง ได้ทุกที่ทุกเวลา 2. ส่วนประกอบบทเรียนออนไลน์ ส่วนประกอบของการเรียนการสอนผ่านเว็บด้วยบทเรียนออนไลน์ประกอบด้วย 4 ส่วน ดังนี้ 1. สื่อสำหรับนำเสนอ (Presentation media) หมายถึง ตัวบทเรียนที่นำเสนอผ่านเครือข่าย อินเทอร์เน็ตไปยัง ผู้เรียนในลักษณะของสื่ออิเล็กทรอนิกส์ได้แก่ข้อความ (Text), ภาพนิ่ง (Still image), กราฟิก (Graphic), ภาพเคลื่อนไหว (Animation), วีดีทัศน์(Video) และเสียง (Sound) 2. การปฏิสัมพันธ์(Interactivity) หมายถึง การโต้ตอบที่เกิดขึ้นระหว่างผู้เรียนกับบทเรียน 3. การจัดการฐานข้อมูล (Database management) หมายถึง การจัดการเกี่ยวกับบทเรียน เริ่มตั้งแต่การ ลงทะเบียนจนถึงการประเมินผลการเรียน 4. ส่วนสนับสนุนการเรียนการสอน (Course support) หมายถึง การบริการต่าง ๆ ที่มีอยู่ใน เครือข่ายอินเทอร์เน็ต เพื่อสนับสนุนการเรียนการสอน จำแนกออกเป็น 2 ประเภทใหญ่ๆ ได้แก่ 4.1 Asynchronous หมายถึง ส่วนสนับสนุนการเรียนการสอนที่ใช้งานในลักษณะ Off-line สำหรับการ ติดต่อสื่อสารระหว่างผู้เรียนกับบทเรียน หรือผู้อื่นที่เกี่ยวข้อง ได้แก่ 1. อิเล็กทรอนิกส์บอร์ด (Electronic board) เช่น BBS, Web board 2. จดหมายอิเล็กทรอนิกส์(E-mail) หลักสูตร การจัดการเรียนรู้ผ่านบทเรียนออนไลน์ด้วย New Google Sites รหัสหลักสูตร 651011026 3 โดย อาชีวศึกษาจังหวัดอุทัยธานีวันที่ 19-21 กันยายน 2565 ณ วิทยาลัยเทคนิคอุทัยธานี
4.2 Synchronous หมายถึง ส่วนสนับสนุนการเรียนการสอนที่ใช้งานในลักษณะ On-line สำหรับการ ติดต่อสื่อสารระหว่างผู้เรียนกับบทเรียนหรือผู้อื่นที่เกี่ยวข้อง ได้แก่ 1. การสนทนาผ่านเครือข่าย (Internet relay chat) เช่น Chat room, ICQ 2. การประชุมทางไกลด้วยภาพ (Video conferencing) 3. การบรรยายสด (Live lecture) 4. การติดต่อสื่อสารผ่านเครือข่าย เช่น Internet phone, Net meeting นอกจากนี้ยังมีส่วน สนับสนุนการ เรียนการสอน ซึ่งเป็นการใช้เครื่องมือหรือการบริการ ที่มีอยู่บนเครือข่ายอินเทอร์เน็ต อำนวยความสะดวกในการศึกษา บทเรียน WBI: Web based instruction ได้แก่ เครื่องมือสำหรับค้นหาข้อมูล ได้แก่ Search engine tool ต่าง ๆ 3. การออกแบบบทเรียนผ่านเว็บไซต์ บทเรียนผ่านเว็บมีการนำเสนอรูปแบบที่หลากหลายเพื่อให้ผู้เรียนได้เกิดการเรียนรู้ที่ง่ายต่อ ความเข้าใจ ซึ่ง ผู้เรียนสามารถเรียนรู้ได้ด้วยตนเองจึงจำเป็นต้องมีการออกแบบ การเรียนการสอนตาม ขั้นตอนต่าง ๆ ดังต่อไปนี้ ดิลลอน (Dillon, 1997 : 221-224) ได้ให้แนวคิดเกี่ยวกับขั้นตอนในการสร้างบทเรียนที่มีลักษณะเป็นสื่อหลาย มิติ (Hypermedia) ซึ่งหลักการนี้สามารถนำไปประยุกต์ใช้ในการออกแบบและ พัฒนาเว็บเพื่อการเรียนการสอน แนวคิดดังกล่าวมีขั้นตอนดังนี้ 1. ศึกษาเกี่ยวกับผู้เรียนและเนื้อหาที่จะนำมาพัฒนาเพื่อกำหนดวัตถุประสงค์และแนวทางในการจัดกิจกรรม 2. วางแผนเกี่ยวกับการจัดรูปแบบโครงสร้างของเนื้อหาศึกษาคุณลักษณะของเนื้อหาที่จะ นำมาใช้เป็นบทเรียน ว่าควรจะนำเสนอในลักษณะใด 3. ออกแบบโครงสร้างเพื่อการเข้าถึงข้อมูลอย่างมีประสิทธิภาพโดยผู้ออกแบบควรศึกษาทำ ความเข้าใจกับ โครงสร้างของบทเรียนแบบต่างๆโดยพิจารณาจากลักษณะผู้เรียนและเนื้อหาว่า โครงสร้างลักษณะใดจะเอื้ออำนวยต่อ การเข้าถึงข้อมูลของผู้เรียนได้ดีที่สุด 4. ทดสอบรูปแบบเพื่อหาข้อผิดพลาดจากนั้นทำการปรับปรุงแก้ไขและทดสอบซ้ำอีกครั้งจน แน่ใจว่าเป็น บทเรียนที่มีประสิทธิภาพก่อนที่จะนำไปใช้งาน วิธีดำเนินการ 5 ขั้นตอนเพื่อการออกแบบและพัฒนาการเรียนการสอนผ่านเว็บที่มีประสิทธิภาพ คือ 1. ทำการวิเคราะห์ความต้องการของผู้เรียนรวมทั้งจุดแข็งและจุดอ่อนของผู้เรียน 2. การกำหนดเป้าหมายวัตถุประสงค์และกิจกรรม 3. ควรเลือกเนื้อหาที่จะใช้นำเสนอพร้อมกับหางานวิจัยอื่น ๆ ที่เกี่ยวข้องและช่วยสนับสนุน เนื้อหา 4. การวางโครงสร้างและจัดเรียงลำดับข้อมูลรวมทั้งกำหนดสารบัญเครื่องมือการเข้าสู่เนื้อหา 5. ดำเนินการสร้างเว็บไซต์โดยอาศัยแผนโครงเรื่องการออกแบบการเรียนการสอนผ่านเครือข่าย อินเทอร์เน็ตมี หลายขั้นตอนซึ่งในการออกแบบนั้นควรศึกษาขั้นตอนการออกแบบ ศึกษาเนื้อหา และ ผู้เรียน ซึ่งต้องออกแบบให้มี ความสัมพันธ์กันจึงจะช่วยให้ได้บทเรียนที่มีคุณภาพ หลักสูตร การจัดการเรียนรู้ผ่านบทเรียนออนไลน์ด้วย New Google Sites รหัสหลักสูตร 651011026 4 โดย อาชีวศึกษาจังหวัดอุทัยธานีวันที่ 19-21 กันยายน 2565 ณ วิทยาลัยเทคนิคอุทัยธานี
อาแวนิติส (Arvanitis, 1997) ได้ให้ข้อเสนอแนะว่าในการสร้างเว็บไซต์นั้น ควรจะดำเนินการ ตามขั้นตอนต่อไปนี้ 1. กำหนดวัตถุประสงค์ โดยพิจารณาว่าเป้าหมายของการสร้างเว็บไซต์นี้เพื่ออะไร 2. ศึกษาคุณลักษณะของผู้ที่จะเข้ามาใช้ ว่ากลุ่มเป้าหมายใดที่ผู้สร้างต้องการสื่อสาร ข้อมูล อะไรที่พวก เขาต้องการ โดยขั้นตอนนี้ควรจะปฏิบัติควบคู่ไปกับขั้นตอนที่หนึ่ง 3. วางลักษณะโครงสร้างของเว็บ 4. ก าหนดรายละเอียดให้กับโครงสร้าง ซึ่งพิจารณาจากวัตถุประสงค์ที่ตั้งไว้โดยตั้งเกณฑ์ใน การใช้ เช่น ผู้ใช้ควรจะทำอะไรบ้าง จำนวนหน้าควรมีเท่าใด มีการเชื่อมโยงมากน้อยเพียงไร 5. หลังจากนั้นจึงทำการสร้างเว็บแล้วนำไปทดลอง เพื่อหาข้อผิดพลาดและทำการปรับปรุง แก้ไข แล้วจึง ค่อยนำเข้าสู่เครือข่ายอินเทอร์เน็ตเป็นขั้นตอนสุดท้าย เพอร์นิสิ และ คาสาติ (Pernici and Casati, 1997) ได้แยกย่อยกระบวนออกเป็น 4 ขั้นตอน ดังนี้ 1. การวิเคราะห์องค์ประกอบต่าง ๆ ที่จ าเป็นต่อการออกแบบ ซึ่งประกอบด้วยการตั้ง วัตถุประสงค์ การก าหนดผู้เรียน และสิ่งที่จ าเป็นในด้านฮาร์ดแวร์และซอฟต์แวร์ 2. ผู้สอนต้องก าหนดแนวทางในการสร้างเว็บไซต์ ได้แก่ เนื้อหาที่จะใช้ กิจกรรมต่าง ๆ ขั้นตอน การเรียน การสอน 3. เป็นการออกแบบในแนวกว้าง (Design in the Large) โดยผู้สอนจะต้องวางแผนลักษณะ การเข้าสู่ เนื้อหา (Navigation) ซึ่งรวมถึงการก าหนดรายการต่าง ๆ (Menus) และการเรียงลำดับของข้อมูล 4. เป็นการออกแบบในแนวแคบ (Design in the Small) คือการกำหนดรายละเอียดต่าง ๆ ที่ มีในแต่ละ หน้า ไบเลย์และไบรท์ (Bailey and Blythe, 19100) ได้เสนอกระบวนการ 3 ขั้นตอนง่าย ๆ ใน การ น าไปใช้ ออกแบบเว็บไซต์เพื่อการเรียนการสอน ดังนี้ 1. ร่างเค้าโครงแนวคิดเบื้องต้นในด้านการนำเสนอ การเชื่อมโยงและจัดเรียงเนื้อหา 2. การวางแผนผังแสดงโครงสร้างของเว็บไซต์ ซึ่งโดยทั่วไปจะมีโครงสร้างอยู่ 3 ลักษณะ คือ โครงสร้างแบบ เส้นตรง (Linear) ซึ่งกำหนดเส้นทางเดียวให้แก่ผู้เรียนคือเริ่มจากหน้าแรกไปสู่หน้าต่อ ๆ ไปโครงสร้างแบบล าดับขั้น (Hierarchical) ซึ่งจะแบ่งระดับความสำคัญของข้อมูลลดหลั่นกันลงมาเป็น ขั้น ๆ และโครงสร้างแบบแตกกิ่ง (Branching) ซึ่งจะมีเส้นทางที่แตกต่างกันในการเข้าสู่เนื้อหาแต่ละ ส่วน 3. เขียนแผนโครงเรื่อง โดยแสดงรายละเอียดที่จะมีอยู่ในแต่ละหน้าไม่ว่าจะเป็นตัวอักษร เสียง วีดิทัศน์ และกราฟิก หลักสูตร การจัดการเรียนรู้ผ่านบทเรียนออนไลน์ด้วย New Google Sites รหัสหลักสูตร 651011026 5 โดย อาชีวศึกษาจังหวัดอุทัยธานีวันที่ 19-21 กันยายน 2565 ณ วิทยาลัยเทคนิคอุทัยธานี
คาน (Khan, 1997) ได้กล่าวไว้ว่า การออกแบบเว็บที่ดีมีความสำคัญต่อการเรียนการสอน เป็น อย่างมากดังนั้นจึง ควรทำความเข้าใจถึงคุณลักษณะ 2 ประการของโปรแกรมการเรียนการสอนผ่านเว็บ 1. คุณลักษณะหลัก (Key Features) เป็นคุณลักษณะพื้นฐานของโปรแกรมการเรียนการสอน ผ่านเว็บทุก โปรแกรม ตัวอย่างเช่น การสนับสนุนให้ผู้เรียนมีปฏิสัมพันธ์กับบทเรียน ผู้สอน หรือผู้เรียน คนอื่น ๆ การนำเสนอ บทเรียนในลักษณะของสื่อหลายมิติ (Multimedia) การนำเสนอบทเรียนระบบ เปิด (Open System) กล่าวคือ อนุญาตให้ผู้เรียนสามารถเชื่อมโยงเข้าสู่เว็บเพจอื่น ๆ ที่เกี่ยวข้องได้ผู้เรียนสามารถสืบค้นข้อมูลบนเครือข่ายได้ (Online Search) ผู้เรียนควรที่จะสามารถเข้าสู่โปรแกรม การสอนผ่านเว็บจากที่ใดก็ได้ทั่วโลก รวมทั้งผู้เรียนควรที่จะ สามารถควบคุมการเรียนของตนเองได้ 2. คุณลักษณะเพิ่มเติม (Additional Features) เป็นคุณลักษณะประกอบเพิ่มเติม ซึ่งขึ้นอยู่กับคุณภาพ และความยากง่ายของการออกแบบ เพื่อนำมาใช้งานและการนำมาประกอบกับคุณลักษณะ หลักของโปรแกรมการเรียน การสอนผ่านเว็บ ตัวอย่างเช่น ความง่ายในการใช้งานของโปรแกรมมีระบบ ป้องกันการลักลอบข้อมูล รวมทั้งระบบให้ ความช่วยเหลือบนเครือข่ายมีความสะดวกในการแก้ไข ปรับปรุงโปรแกรม เป็นต้น ฮอลล์ (Hall, 1910) ได้กล่าวถึงการใช้เว็บในด้านการเรียนการสอนว่า การศึกษาทดลองหา วิธีการสร้างเว็บอย่างมี ประสิทธิภาพยังอยู่ในระดับที่น้อย แต่จากการรวบรวมจากประสบการณ์และ การนำเสนอของบรรดานักออกแบบเว็บ เพื่อการเรียนการสอน สรุปได้ว่าเว็บเพื่อการเรียนการสอนที่ดีจะต้องมีลักษณะดังนี้ 1. ต้องสะดวกและไม่ยุ่งยากต่อการสืบค้นของผู้เรียน 2. ต้องมีความสอดคล้องตรงกันในแต่ละเว็บรวมถึงการเชื่อมโยงระหว่างเว็บต่าง ๆ 3. เวลาในการแสดงผลแต่ละหน้าจอจะต้องน้อยที่สุด หลีกเลี่ยงการใช้ภาพกราฟิกขนาดใหญ่ ที่จะทำให้ เสียเวลาในการดาวน์โหลด 4. มีส่วนที่ทำหน้าที่ในการจัดระบบในการเข้าสู่เว็บ นักออกแบบควรกำหนดให้ผู้เรียนได้เข้าสู่ หน้าจอแรกที่ มีคำอธิบาย มีการแสดงโครงสร้างภายในเว็บ เพื่อทราบถึงขอบเขตที่ผู้เรียนจะสืบค้น 5. ควรมีความยืดหยุ่นในการสืบค้น แม้จะมีการแนะนำว่าผู้เรียนควรจะเรียนอย่างไรตามลำดับ ขั้นตอน ก่อนหลังแต่ก็ควรเพิ่มความยืดหยุ่นให้ผู้เรียนสามารถกำหนดเส้นทางการเรียนรู้ได้เอง 6. ต้องมีความยาวในหน้าจอให้น้อย แม้นักออกแบบส่วนใหญ่จะบอกว่าสามารถใช้ไฮเปอร์เท็กซ์ช่วยในการ เลื่อนไปมาในพื้นที่ส่วนต่าง ๆ ในหน้าจอ แต่ในความเป็นจริงแล้วหน้าจอที่สั้น เป็นสิ่งที่ดีที่สุด 7. ไม่ควรมีจุดจบหรือกำหนดจุดสิ้นสุดที่ผู้เรียนไปไหนต่อไม่ได้ ควรมีการสร้างในแบบวนเวียน ให้ผู้เรียน สามารถหาเส้นทางไปกลับระหว่างหน้าต่างๆได้ง่าย นอกจากนี้ยังควรให้ผู้เรียนสามารถกลับ ไปเรียนในจุดเริ่มต้นได้ด้วย โดยการคลิกเพียงครั้งเดียว หลักสูตร การจัดการเรียนรู้ผ่านบทเรียนออนไลน์ด้วย New Google Sites รหัสหลักสูตร 651011026 6 โดย อาชีวศึกษาจังหวัดอุทัยธานีวันที่ 19-21 กันยายน 2565 ณ วิทยาลัยเทคนิคอุทัยธานี
โจนส์และฟาร์เควอร์ (Jones and Farquar, 1997) ได้แนะนำหลักการออกแบบเบื้องต้นที่จะ เป็นจุดเริ่มในการ พัฒนาเว็บเพื่อการเรียนการสอน ดังนี้ 1. ควรมีการจัดโครงสร้างหรือจัดระเบียบข้อมูลที่ชัดเจน การที่เนื้อหามีความต่อเนื่องไปไม่สิ้นสุดหรือกระจาย มากเกินไปอาจทำให้เกิดความสับสนต่อผู้ใช้ได้ ฉะนั้นจึงควรออกแบบให้มีลักษณะที่ ชัดเจนแยกย่อยออกเป็นส่วนต่าง ๆ จัดหมวดหมู่ในเรื่องที่สัมพันธ์กัน รวมทั้งอาจมีการแสดงให้ผู้ใช้เห็น แผนที่โครงสร้างเพื่อป้องกันความสับสนได้ 2. กำหนดพื้นที่สำหรับการเลือก (Selectable Areas) ให้ชัดเจนซึ่งโดยทั่วไปจะมีมาตรฐานที่ชัดเจนอยู่แล้ว เช่น ลักษณะของไฮเปอร์เท็กซ์ที่เป็นค าสีฟ้าและขีดเส้นใต้ พยายามหลีกเลี่ยง การออกแบบที่ขัดแย้งกับมาตรฐานทั่วไป ที่คนส่วนใหญ่ใช้ยกเว้นจะมีความจำเป็นที่ต้องใช้ นอกจากนี้ยัง รวมไปถึงการทำให้ตัวเลือกเกิดการเปลี่ยนแปลง ซึ่งปกติ เมื่อมีการคลิกค าหรือข้อความใด ๆ เมื่อกลับมา ที่หน้าเดิมคำหรือข้อความนั้น ๆ ก็จะเปลี่ยนจากสีฟ้าเป็นสีแดงเข้มเพื่อ บอกให้ทราบว่าผู้ใช้ได้เลือกส่วน นั้นไปแล้ว ในการออกแบบจึงควรใช้มาตรฐานเดิมแบบนี้เช่นกัน 3. กำหนดให้แต่หน้าจอภาพสั้น ๆ ทั้งนี้จากการวิจัยพบว่าผู้ใช้ไม่ชอบการเลื่อนขึ้นลง (Scroll) (Nielsen, 1996 อ้างถึงใน Jones and Farquar, 1997) อีกทั้งยังเสียเวลาในการโหลดนานและยุ่งยาก ต่อการพิมพ์ที่ผู้ใช้ต้องการ เนื้อหาเพียงบางส่วน แต่ถ้ามีความจ าเป็นต้องใช้หน้ายาวก็ควรก าหนดเป็น พื้นที่แต่ละส่วนของหน้า โดยให้ผู้เรียน สามารถเลือกไปยังจุดต่าง ๆ ได้ในหน้าเดียวในลักษณะของบุ๊ค มาร์ค (Bookmark) 4. ลักษณะการเชื่อมโยงที่ปรากฏในแต่ละหน้า หากมีทั้งการเชื่อมโยงในหน้าเดียวกันและ การเชื่อมโยงไปยัง หน้าอื่น ๆ หรือออกจากหน้าจอไปยังหน้าจอใหม่จะก่อให้เกิดการสับสนได้ โดยเฉพาะ อย่างยิ่งถ้าผู้เรียนใช้ปุ่มมาตรฐาน ที่มีอยู่ในโปรแกรมค้นผ่าน (Web Browser) อาจทำให้ผู้เรียนหลงทาง ได้ ฉะนั้นจึงต้องออกแบบให้มีความแตกต่างและ ชัดเจน 5. ต้องระวังเรื่องของตำแหน่งในการเชื่อมโยง การที่จำนวนการเชื่อมโยงมากและกระจัด กระจายอยู่ทั่วไปใน หน้าอาจก่อให้เกิดความสับสน การออกแบบที่ดีควรจัดการเชื่อมโยงไปยังหน้าอื่น ๆ อยู่รวมกันเป็นสัดส่วนมีล าดับ ก่อนหลังหรือมีหมายเหตุประกอบ เช่น จัดรวมไว้ส่วนล่างของหน้าจอ เป็นต้น 6. ความเหมาะสมของคำที่ใช้เชื่อมโยง คำที่ใช้สำหรับการเชื่อมโยงจะต้องเข้าใจง่ายมีความชัดเจนและไม่สั้น จนเกินไป 7.ความสำคัญของข้อมูลควรอยู่ส่วนบนของหน้าจอภาพ หลีกเลี่ยงการใช้กราฟิกด้านบนของ หน้าจอเพราะ ถึงแม้จะดูดีแต่ผู้เรียนจะเสียเวลาในการได้รับข้อมูลที่ต้องการ สรุปได้ว่าการเรียนการสอนผ่านเว็บ เป็นการจัดการอย่าง จงใจและนำเสนอข้อมูลที่มีเป้าหมาย เพื่อพัฒนาการเรียนรู้โดยเฉพาะ ดังนั้นการออกแบบบทเรียนออนไลน์ ผ่านเว็บด้วย Google Sites ควรจัดเตรียมบทเรียน กิจกรรม แบบฝึกหัด และแบบทดสอบ เพื่อให้นักเรียนได้เรียนรู้ อย่างมีประสิทธิภาพ หลักสูตร การจัดการเรียนรู้ผ่านบทเรียนออนไลน์ด้วย New Google Sites รหัสหลักสูตร 651011026 7 โดย อาชีวศึกษาจังหวัดอุทัยธานีวันที่ 19-21 กันยายน 2565 ณ วิทยาลัยเทคนิคอุทัยธานี
4. ลักษณะและประเภทของการเรียนการสอนผ่านเว็บ การเรียนการสอนผ่านเว็บมีรูปแบบที่แตกต่างกันไปลักษณะของการเรียนการสอนผ่านเว็บมีนักการศึกษากล่าวถึง การแบ่งประเภทของการเรียนการสอนผ่านเว็บไว้ดังนี้ พาร์สัน (Parson, 1997) ได้แบ่งประเภทของการเรียนการสอนผ่านเว็บออกเป็น 3 ลักษณะ 1. การเรียนการสอนผ่านเว็บแบบรายวิชาเดียว (Stand-alone courses) เป็นรายวิชาที่มีเครื่องมือและ แหล่งที่เข้าไปถึงและเข้าหาได้โดยผ่านระบบอินเทอร์เน็ตอย่างมากที่สุด ถ้าไม่มีการสื่อสาร ก็สามารถที่จะไปผ่านระบบ การสื่อสารได้ ลักษณะของการเรียนการสอนผ่านเว็บแบบนี้มีลักษณะเป็น แบบวิทยาเขตมีนักศึกษาจำนวนมากเข้ามาใช้ จริงแต่จะมีการส่งข้อมูลจากรายวิชาทางไกล 2. การเรียนการสอนผ่านเว็บแบบเว็บสนับสนุนรายวิชา (Web supported courses) เป็นรายวิชาที่มี ลักษณะเป็นรูปธรรมที่มีการพบปะระหว่างครูกับนักเรียนและมีแหล่งให้มาก เช่น การกำหนดงานให้ทำบนเว็บ การกำหนดให้อ่าน การสื่อสารผ่านระบบคอมพิวเตอร์ หรือการมีเว็บที่ สามารถชี้ตำแหน่งบนพื้นที่ของเว็บไซต์โดยรวม กิจกรรมต่าง ๆ เอาไว้ 3. การเรียนการสอนผ่านเว็บแบบศูนย์กลางการศึกษา (Web pedagogical resources) เป็น ชนิดของ เว็บไซต์ที่มีวัตถุดิบ เครื่องมือ ซึ่งสามารถรวบรวมวิชาขนาดใหญ่เข้าไว้ด้วยกันหรือเป็นแหล่ง สนับสนุนกิจกรรมทาง การศึกษา ซึ่งผู้ที่เข้ามาใช้ก็จะมีสื่อให้บริการหลายรูปแบบอย่างเช่น เป็นข้อความ เป็นภาพกราฟิก การสื่อสารระห่าง บุคคลและการท าภาพเคลื่อนไหวต่าง ๆ เป็นต้น ใจทิพย์ ณ สงขลา (2554: 15) ได้กล่าวถึงการแบ่งประเภทการใช้เว็บเพื่อการเรียนการสอน 4 ลักษณะ ดังนี้ 1. เว็บเพื่อเสริมการสอนรายวิชา การเรียนโดยใช้เว็บเพื่อการสอนเสริมเป็นการจัดทำเพื่อให้เป็นแหล่งข้อมูล หรือสารสนเทศเพิ่มเติมเสริมจากการเรียนปกติรวมทั้งอาจมีการจัดกิจกรรมการสื่อสาร นอกเวลาการเรียนโดยใช้เว็บ เป็นช่องทางการสื่อสารหลักซึ่งอาจปิดเฉพาะให้กับผู้เรียนรายวิชานั้นหรือ อาจเผยแพร่ให้กับผู้สนใจทั่วไปเข้าศึกษา 2. เว็บเพื่อการเรียนการสอนในหลักสูตร เว็บเพื่อการเรียนการสอนในหลักสูตร เป็นการ กำหนดรายวิชา ประกอบเข้าเป็นหลักสูตรมีการจัดเป็นระบบการเรียนการสอน การติดตามผลการเรียน การบริหารจัดการ และบริการ สารสนเทศให้กับผู้เรียน โดยผู้เรียนจะต้องลงทะเบียนในหลักสูตรดังกล่าว เว็บในลักษณะนี้มักปรากฏในลักษณะ การศึกษาทางไกล ซึ่งอาจกำหนดเป็นโปรแกรมการเรียนการสอน ทั้งหมดผ่านเครือข่ายหรือควบคู่ไปกับการศึกษาจาก สื่อสารเรียน หรือการเรียนที่ผู้เรียนผู้สอนต้อง พบปะกันจริง (On line/off line) ในลักษณะผสมผสาน (Blended หรือ Hybrid learning) 3 เว็บเพื่อการจัดการเรียนแบบดีกรีร่วม การจัดการเรียนแบบดีกรีร่วมด้วยเว็บเป็นการพัฒนา เว็บเพื่อเป็น สื่อกลางระหว่างการเรียนการสอนของสถาบันมากกว่าหนึ่งสถาบันร่วมกัน โดยทั่วไปอาจจัดเป็นหลักสูตรร่วมกรณีที่ สถาบันการศึกษามีความชำนาญเฉพาะเรื่องแตกต่างกันหรือการจัดการเป็น หลักสูตรความร่วมมือระหว่างสถาบันในแต่ ละประเทศมีข้อตกลงเรื่องของการบริหารจัดการแตกต่างกัน ไปในแต่ละกรณี หลักสูตร การจัดการเรียนรู้ผ่านบทเรียนออนไลน์ด้วย New Google Sites รหัสหลักสูตร 651011026 8 โดย อาชีวศึกษาจังหวัดอุทัยธานีวันที่ 19-21 กันยายน 2565 ณ วิทยาลัยเทคนิคอุทัยธานี
4. เว็บที่เป็นแหล่งข้อมูล เว็บที่เป็นแหล่งข้อมูลสารสนเทศทางการศึกษา หรือบทเรียนที่จัดไว้เพื่อให้ผู้สนใจ ทั่วไปเข้าไปศึกษาอยู่ในลักษณะของแหล่งข้อมูลหรือฐานข้อมูล 5.ประโยชน์ของการเรียนการสอนผ่านเว็บ ประโยชน์ของการจัดการเรียนการสอนผ่านเว็บ มีดังนี้(ใจทิพ ณ สงขลา, 2554: 41) 1. ช่วยตอบสนองความแตกต่างในการเรียนรู้ของบุคคลและสามารถให้สาระได้มากกว่าการใช้เพียงสื่อชนิดเดียว 2. ช่วยให้ผู้เรียนเกิดการเรียนรู้ด้วยหลาย ๆ วิธีการ ท าให้เรียนรู้ได้ดีกว่าและมีความคงทนใน ความได้นานกว่า 3. ช่วยสนองความแตกต่างของสไตล์การเรียนรู้และความชอบของผู้เรียน 4. ช่วยสร้างแรงจูงใจกับผู้เรียน ข้อคำนึงในการเรียนการสอนบทเรียนผ่านเครือข่ายอินเทอร์เน็ต 1. ความพร้อมของอุปกรณ์และระบบเครือข่าย เนื่องจากการเรียนการสอนผ่านเว็บเป็น การปรับเนื้อเดิมสู่รูปแบบ ใหม่ จะเป็นต้องมีเครื่องมือ อุปกรณ์ ระบบเครือข่ายที่พร้อมและสมบูรณ์เพื่อให้บทเรียนได้มีคุณภาพ และทันต่อความ ต้องการของผู้เรียน ผู้เรียนสามารถเลือกเวลาเรียนได้ทุก เวลา 2. ทักษะการใช้คอมพิวเตอร์และอินเทอร์เน็ต ผู้เรียนและผู้สอนต้องมีความรู้และทักษะทั้งด้าน คอมพิวเตอร์และ ครือข่ายอินเทอร์เน็ต โดยเฉพาะผู้สอนจ าเป็นต้องทักษะอื่น ๆ ประกอบเพื่อสร้าง เว็บไซต์การสอนที่น่าสนใจให้กับ ผู้เรียน 3. ความพร้อมของผู้สอน ผู้สอนจะต้องเปลี่ยนบทบาทจากผู้แนะนำมาเป็นผู้อำนวยความสะดวกยึดผู้เรียนเป็น ศูนย์กลาง กระตุ้นให้ผู้เรียนเกิดความอยากรู้อยากเห็น อยากเรียนรู้กระตุ้นกระทำกิจกรรมเตรียมเนื้อหาและแหล่ง ค้นคว้าที่คุณภาพ รวมทั้งความพร้อมด้านการใช้คอมพิวเตอร์การผลิต การผลิตบทเรียนผ่านเว็บ และเผยแพร่บทเรียน ผ่านด้วยตนเอง มีความกระตือรือร้น ตื่นตัว ใฝ่รู้ มีความ รับผิดชอบ กล้าแสดงความคิดเห็นและศึกษาความรู้ใหม่ ๆ 4. ความพร้อมของผู้สอน ผู้สอนจะต้องเปลี่ยนบทบาทจากผู้แนะนำมาเป็นผู้อำนวยความสะดวก ยึดผู้เรียนเป็น ศูนย์กลาง กระตุ้นให้ผู้เรียนเกิดความอยากรู้อยากเห็น อยากเรียนรู้กระตุ้นกระทำกิจกรรมเตรียมเนื้อหาและแหล่ง ค้นคว้าที่มีคุณภาพ รวมทั้งความพร้อมด้านการใช้คอมพิวเตอร์การผลิต บทเรียนผ่านเว็บ และการเผยแพร่บทเรียนผ่าน เว็บบนเครือข่ายอินเทอร์เน็ต 5. เนื้อหาบทเรียนจะต้องเหมาะสมกับผู้เรียนให้มากกว่ากลุ่มที่สุด มีหลากหลายให้ผู้เรียนแต่ละกลุ่มที่สุด มี หลากหลายให้ผู้เรียนแต่ละกลุ่มเลือกเรียนได้ด้วยตนเอง มีกิจกรรมวัตถุประสงค์ที่ชัดเจน เลือกใช้สื่อการสอนที่เหมาะ กับความพร้อมของเทคโนโลยี การลำดับเนื้อหาชัดเจนมีประสิทธิภาพใน การเรียนการสอน สรุปได้ว่า ประโยชน์และ ข้อดีของการจัดการเรียนการสอนผ่านเว็บได้ว่าการเรียนการสอนผ่าน เว็บนั้นเป็นการจัดการเรียนการสอนที่ไม่จำกัด เวลาและสถานที่ ผู้เรียนและผู้สอนไม่จำเป็นจัดการสอน ในห้องเรียนปกติ สามารถเรียนรู้ได้ด้วยตนเอง สามารถเรียนซ้ำ ในส่วนที่ต้องการเรียนในบทเรียนเดิม และยังสามารถหาความรู้เพิ่มเติมหามีข้อสงสัยจากครูผู้สอนผ่านไปรษณีย์ หลักสูตร การจัดการเรียนรู้ผ่านบทเรียนออนไลน์ด้วย New Google Sites รหัสหลักสูตร 651011026 9 โดย อาชีวศึกษาจังหวัดอุทัยธานีวันที่ 19-21 กันยายน 2565 ณ วิทยาลัยเทคนิคอุทัยธานี
อิเล็กทรอนิกส์หรือการพูดคุย บนเครือข่ายอินเทอร์เน็ตได้ทันที ซึ่งช่วยให้แก้ไขปัญหาการเรียนของผู้เรียนได้ ผู้สอน สามารถปรับปรุง บทเรียนของตนเองได้ตลอดเวลาเพื่อให้เกิดการพัฒนาบทเรียนให้มีความทันสมัยอยู่เสมอ ที่มา: https://webportal.bangkok.go.th/upload/user/00000116/4-techno/research/640820/3.pdf 6. ตัวอย่างบทเรียนออนไลน์ที่สร้างจาก New Google Sites ตัวอย่างที่ 1 URL บทเรียนออนไลน์ QR Code https://bit.ly/web22564 วิชา การพัฒนาเว็บไซต์ทางธุรกิจ รหัสวิชา 302042103 หลักสูตร การจัดการเรียนรู้ผ่านบทเรียนออนไลน์ด้วย New Google Sites รหัสหลักสูตร 651011026 10 โดย อาชีวศึกษาจังหวัดอุทัยธานีวันที่ 19-21 กันยายน 2565 ณ วิทยาลัยเทคนิคอุทัยธานี
ตัวอย่างที่ 2 URL บทเรียนออนไลน์ QR Code https://sites.google.com/mvc.ac.th /300012003tecnoforwork วิชา เทคโนโลยีสารสนเทศเพื่องานอาชีพ รหัสวิชา 300012003 หลักสูตร การจัดการเรียนรู้ผ่านบทเรียนออนไลน์ด้วย New Google Sites รหัสหลักสูตร 651011026 11 โดย อาชีวศึกษาจังหวัดอุทัยธานีวันที่ 19-21 กันยายน 2565 ณ วิทยาลัยเทคนิคอุทัยธานี
ตัวอย่างที่ 3 URL บทเรียนออนไลน์ QR Code https://bit.ly/eismvc2018 การจัดการเรียนการสอนภาษาอังกฤษ ด้วยครูไทยเพื่อเด็กไทยสู่สากล หลักสูตร การจัดการเรียนรู้ผ่านบทเรียนออนไลน์ด้วย New Google Sites รหัสหลักสูตร 651011026 12 โดย อาชีวศึกษาจังหวัดอุทัยธานีวันที่ 19-21 กันยายน 2565 ณ วิทยาลัยเทคนิคอุทัยธานี
ตัวอย่างที่ 4 URL บทเรียนออนไลน์ QR Code https://bit.ly/krununcourse การจัดการเรียนการสอนออนไลน์ ครูนันทา เพ็ตมาน หลักสูตร การจัดการเรียนรู้ผ่านบทเรียนออนไลน์ด้วย New Google Sites รหัสหลักสูตร 651011026 13 โดย อาชีวศึกษาจังหวัดอุทัยธานีวันที่ 19-21 กันยายน 2565 ณ วิทยาลัยเทคนิคอุทัยธานี
แผนการจัดกิจกรรมที่ 2 การสร้างบทเรียนออนไลน์ด้วย New Google Sites จำนวน 4 ชั่วโมง วัตถุประสงค์ 1. เพื่อให้ครูผู้เข้ารับการอบรมมีความรู้และความเข้าใจในการสร้างการสร้างบทเรียนออนไลน์ ด้วย New Google sites 2. เพื่อให้ครูผู้เข้ารับการอบรมมีทักษะสร้างบทเรียนออนไลน์ด้วย New Google Sites พฤติกรรมการเรียนรู้ของครูที่จะเกิดขึ้น 1. ครูผู้เข้ารับอบรมสามารถบทเรียนออนไลน์ ด้วย New Google Sites ได้ทั้ง 2 แบบ 2. ครูผู้เข้ารับการอบรมออกแบบบทเรียนออนไลน์และวางโครงสร้างบทเรียนออนไลน์ได้ สาระหัวข้อการพัฒนา 1. เริ่มต้นสร้าง บทเรียนออนไลน์ด้วย Google Sites 2. การสร้างบทเรียนออนไลน์ด้วย New Google Site แบบที่ 1 (สร้างผ่าน Google App) 3. การสร้างบทเรียนออนไลน์ด้วย New Google Site แบบที่ 2 (สร้างผ่าน URL https://sites.google.com/) 4. การสร้างบทเรียนออนไลน์ด้วย New Google Site แบบที่ 3 (สร้างในโฟลเดอร์ที่กำหนด) 5. ส่วนประกอบของ Dashboard 6. การวางโครงสร้างและรายละเอียดของบทเรียนออนไลน์ 7. การกำหนด Header Type 8. การเปลี่ยนรูปภาพ Header 9. การเปลี่ยนรูปแบบธีม (Theme) บทเรียนออนไลน์ หลักสูตร การจัดการเรียนรู้ผ่านบทเรียนออนไลน์ด้วย New Google Sites รหัสหลักสูตร 651011026 14 โดย อาชีวศึกษาจังหวัดอุทัยธานีวันที่ 19-21 กันยายน 2565 ณ วิทยาลัยเทคนิคอุทัยธานี
1. เริ่มต้นสร้างบทเรียนออนไลน์ด้วย New Google Sites 1.1 รู้จักกับ New Google Sites New Google Sites เป็นแอพพลิเคชั่นบนเทคโนโลยีคลาวด์ของ Google ใชสำหรับสร้างเว็บไซต์ ได้ง่ายและฟรีผ่านเบราว์เซอร์ โดยไม่จำเป็นต้องรู้ภาษาเขียนเว็บ สามารถนำสื่อต่าง ๆ มาจัดวางให้สวยงาม เช่น รูปภาพ วีดีโอ แผนที่ และอื่น ๆ ที่รองรับการค้นหาจากเว็บไซต์ google ให้บริการฟรี ปรับแต่งรูปแบบข้อมูลได้อย่างอิสระ สามารถรวบรวมข้อมูลได้หลายรูปแบบไว้ในที่เดียวกัน การแก้ไขข้อมูลสามารถกำหนดให้แก้ไขได้หลายคนโดยการกำหนดสิทธิ์ หรือแบ่งปันการเข้าถึง สามารถกำหนดรูปลักษณ์ของเว็บไซต์ได้รวมทั้งสร้างเพจย่อยเพื่อให้เนื้อหาน่าสนใจ และกำหนดเว็บไซต์ เป็นส่วนตัวหรือสาธารณะได้ Google Sites ให้บริการครั้งแรก เดือน พฤษภาคม 2551 1.2 จุดเด่นของ New Google Sites 1.) Google sites สามารถรวมเอกสาร งานนําเสนอ สเปรดชีต วิดีโอ ภาพสไลด์ เพื่อช่วยในทํางานอย่างเป็นระเบียบ 2.) มีเทมเพลตให้เลือกหลากหลาย 3.) สามารถเข้าถึงได้ทุกที่ที่มีอินเทอร์เนต 4.) ทํางานได้หลายระบบปฏิบัติการ เช่นทํางานได้หลายระบบปฏิบัติการ เช่น Window, Mac, Linux โดยการทํางานผ่านเบราว์เซอร์ต่างๆ 5.) ระบบมีความรักษาความปลอดภัยที่ดี โดยผู้ดูแลระบบสามารถจัดการสิทธิในการแบ่งปันไซต์ได้ 6.) กำหนดรูปลักษณ์ของเว็บไซต์ได้ 7.) สร้างเพจย่อยเพื่อให้เนื้อหาน่าสนใจ 8.) กำหนดเว็บไซต์เป็นส่วนตัวหรือสาธารณะ 9.) พื้นที่จัดเก็บ 10 Gb เฉพาะพื้นที่เว็บไซต์ไม่เกิน 100MB แต่หากรวมเป็นสมาชิกบริการอื่นๆ ของ Google ตัวอื่นๆเช่น youtube, calendar ไม่เกิน 10 GB 10.) ขนาดไฟล์สูงสุด 10 MB 11.) ให้บริการฟรี ไม่เสียค่าใช้จ่าย 12.) สามารถเผยแพร่ข้อมูลที่เป็นประโยชน์ เป็นความรู้ บทเรียน และอื่น ๆ อีกหลายอย่างใน Google Sites ที่มา: https://webportal.bangkok.go.th/upload/user/00000116/4-techno/research/640820/3.pdf หลักสูตร การจัดการเรียนรู้ผ่านบทเรียนออนไลน์ด้วย New Google Sites รหัสหลักสูตร 651011026 15 โดย อาชีวศึกษาจังหวัดอุทัยธานีวันที่ 19-21 กันยายน 2565 ณ วิทยาลัยเทคนิคอุทัยธานี
2. เริ่มต้นสร้างบทเรียนออนไลน์ ด้วย New Google Site ขั้นตอนที่ 1. พิมพ์ URL http://gmail.com ขั้นตอนที่ 2 ลงชื่อเข้าใช้งาน Gmail คลิก เลือกอีเมล์ที่เคยใช้งานหรือ เลือก ใช้บัญชีอื่น โดยกรอก E-mail และ Password ขั้นตอนที่ 3 จะเข้าสู่ Mail box และ อีเมล์ที่ทำการ log in หลักสูตร การจัดการเรียนรู้ผ่านบทเรียนออนไลน์ด้วย New Google Sites รหัสหลักสูตร 651011026 16 โดย อาชีวศึกษาจังหวัดอุทัยธานีวันที่ 19-21 กันยายน 2565 ณ วิทยาลัยเทคนิคอุทัยธานี
2. การสร้างเว็บไซต์ด้วย Google Sites ผ่าน Google App (แบบที่1) หลักสูตร การจัดการเรียนรู้ผ่านบทเรียนออนไลน์ด้วย New Google Sites รหัสหลักสูตร 651011026 17 โดย อาชีวศึกษาจังหวัดอุทัยธานีวันที่ 19-21 กันยายน 2565 ณ วิทยาลัยเทคนิคอุทัยธานี
ขั้นตอนที่ 5 จะเข้าสู่ หน้าแรกของ Google Sites 3. การสร้างเว็บไซต์ด้วย Google Site ผ่าน URL https://sites.google.com/ (แบบที่2) ขั้นตอนที่ 1. พิมพ์ URL https://sites.google.com/ ขั้นตอนที่ 2. จะเข้าสู่ Google Sites และแสดง Web Site ที่เคยสร้างไว้แล้ว หลักสูตร การจัดการเรียนรู้ผ่านบทเรียนออนไลน์ด้วย New Google Sites รหัสหลักสูตร 651011026 18 โดย อาชีวศึกษาจังหวัดอุทัยธานีวันที่ 19-21 กันยายน 2565 ณ วิทยาลัยเทคนิคอุทัยธานี
ขั้นตอนที่ 3. สร้างใหม่โดยการคลิกที่ + จะแสดงหน้าแรกในการสร้างเว็บไซต์ คลิกที่ + หลักสูตร การจัดการเรียนรู้ผ่านบทเรียนออนไลน์ด้วย New Google Sites รหัสหลักสูตร 651011026 19 โดย อาชีวศึกษาจังหวัดอุทัยธานีวันที่ 19-21 กันยายน 2565 ณ วิทยาลัยเทคนิคอุทัยธานี
4. การสร้างเว็บไซต์ในโฟลเดอร์ที่กำหนด แบบที่3 การสร้างบทเรียนออนไลน์ให้อยู่ในโฟลเดอร์ที่กำหนดใน Google Drive ให้ทำตามขั้นตอนดังนี้ ขั้นตอนที่ 1 คลิกที่ Google App 9 จุด เลือก Google Drive ขั้นตอนที่ 2 คลิกที่ โฟลเดอร์ใหม่ ใน Google Drive ตั้งชื่อ บทเรียนออนไลน์ตามด้วยเลขที่คลิกสร้าง จะได้โฟลเดอร์ตามชื่อที่กำหนดดังรูป หลักสูตร การจัดการเรียนรู้ผ่านบทเรียนออนไลน์ด้วย New Google Sites รหัสหลักสูตร 651011026 20 โดย อาชีวศึกษาจังหวัดอุทัยธานีวันที่ 19-21 กันยายน 2565 ณ วิทยาลัยเทคนิคอุทัยธานี
ขั้นตอนที่ 3 ดับเบิ้ลคลิกที่ชื่อโฟลเดอร์ บทเรียนออนไลน์101 ขั้นตอนที่ 4 จะเข้าสู่โฟลเดอร์บทเรียนออนไลน์101 ให้คลิกขวาพื้นที่ในโฟลเดอร์ > คลิก เพิ่มเติม จะแสดงเมนูดังภาพ ให้เลือก Google Sites ขั้นตอนที่ 5 จะแสดงหน้าจอเว็บไซต์หน้าแรกพร้อมใช้งานดังภาพ หลักสูตร การจัดการเรียนรู้ผ่านบทเรียนออนไลน์ด้วย New Google Sites รหัสหลักสูตร 651011026 21 โดย อาชีวศึกษาจังหวัดอุทัยธานีวันที่ 19-21 กันยายน 2565 ณ วิทยาลัยเทคนิคอุทัยธานี
5. ส่วนประกอบของ Google Sites 1. ตั้งชื่อไซต์ 2. ตั้งชื่อหน้าเว็บเพจ 3. Undo 4. แสดงตัวอย่าง 5. แชร์กับผู้อื่น 6. เมนูเผยแพร่ 7. กลุ่มพาเนลใช้แทรกวัตถุ หน้าเว็บเพจ และเลือกธีม 8. พื้นที่ในการเพิ่มเนื้อหาประเภทต่าง ๆ หลักสูตร การจัดการเรียนรู้ผ่านบทเรียนออนไลน์ด้วย New Google Sites รหัสหลักสูตร 651011026 22 โดย อาชีวศึกษาจังหวัดอุทัยธานีวันที่ 19-21 กันยายน 2565 ณ วิทยาลัยเทคนิคอุทัยธานี
6. การวางโครงสร้างและรายละเอียดของบทเรียนออนไลน์ 6.1 ตัวอย่างโครงสร้างบทเรียนออนไลน์ 6.2 ตัวอย่างการออกแบบหน้าเว็บเพจ ส่วนหัวเว็บไซต์ ส่วนเมนูเว็บไซต์ รูปภาพ ส่วนท้ายเว็บไซต์ ข้อมูลเนื้อหาในเว็บเพจ โลโก หลักสูตร การจัดการเรียนรู้ผ่านบทเรียนออนไลน์ด้วย New Google Sites รหัสหลักสูตร 651011026 23 โดย อาชีวศึกษาจังหวัดอุทัยธานีวันที่ 19-21 กันยายน 2565 ณ วิทยาลัยเทคนิคอุทัยธานี
6.3 ตัวอย่าง บล็อกเนื้อหาใน Google Sites 7.การปรับแต่งหน้าแรก New Google Sites (Home Page) หลักสูตร การจัดการเรียนรู้ผ่านบทเรียนออนไลน์ด้วย New Google Sites รหัสหลักสูตร 651011026 24 โดย อาชีวศึกษาจังหวัดอุทัยธานีวันที่ 19-21 กันยายน 2565 ณ วิทยาลัยเทคนิคอุทัยธานี
7.1 การสร้างบทเรียนออนไลน์ด้วย New Google Sites ขั้นตอนที่ 1 ให้สร้างบทเรียนออนไลน์โดยเลือกรูปแบบวิธีที่ 1 หรือ วิธีที่ 2 (ทำตามขั้นตอนหน้า 4 - 6) จะได้หน้าจอดังภาพ ขั้นตอนที่ 2 ตั้งชื่อให้เว็บไซต์(Sites Name) ให้คลิกที่ ไซต์ไม่มีชื่อ ขั้นตอนที่ 3. พิมพ์ชื่อเว็บไซต์ เป็น เลขที่ผู้เข้าอบรมตามด้วย OnlineCourse (No101OnlineCourse) จะแสดงชื่อเว็บไซต์ดังภาพ หลักสูตร การจัดการเรียนรู้ผ่านบทเรียนออนไลน์ด้วย New Google Sites รหัสหลักสูตร 651011026 25 โดย อาชีวศึกษาจังหวัดอุทัยธานีวันที่ 19-21 กันยายน 2565 ณ วิทยาลัยเทคนิคอุทัยธานี
ขั้นตอนที่ 4. คลิกที่ ชื่อของหน้า และลบข้อความคลิกที่ รูปถังขยะ ขั้นตอนที่ 5 จะแสดงหน้าจอดังภาพ ให้คลิกประเภทส่วนหัว จะแสดงประเภทส่วนหัว 4 แบบ คลิกที่ ลบคลิกถังขยะ หลักสูตร การจัดการเรียนรู้ผ่านบทเรียนออนไลน์ด้วย New Google Sites รหัสหลักสูตร 651011026 26 โดย อาชีวศึกษาจังหวัดอุทัยธานีวันที่ 19-21 กันยายน 2565 ณ วิทยาลัยเทคนิคอุทัยธานี
ขั้นตอนที่ 6 เลือกประเภทส่วนหัวเป็นแบบ แบนเนอร์ดังภาพ และคลิก < เพื่อเปลี่ยนรูปภาพส่วนหัว ขั้นตอนที่ 7 คลิกที่เปลี่ยนรูปภาพ จะแสดงให้เมนูให้เลือก อัปโหลด (เป็นการอัปโหลดรูปจากเครื่องคอมพิวเตอร์) ขั้นตอนที่ 8 เลือกรูปภาพที่ต้องการให้เป็นส่วนหัวเว็บไซต์ คลิก Open หลักสูตร การจัดการเรียนรู้ผ่านบทเรียนออนไลน์ด้วย New Google Sites รหัสหลักสูตร 651011026 27 โดย อาชีวศึกษาจังหวัดอุทัยธานีวันที่ 19-21 กันยายน 2565 ณ วิทยาลัยเทคนิคอุทัยธานี
ขั้นตอนที่ 9 จะได้รูปภาพที่เลือกเป็นส่วนหัวเว็บไซต์ดังภาพ ขั้นตอนที่ 10 เลือกเมนูธีม เพื่อเลือกรูปแบบธีมให้กับบทเรียนออนไลน์ ธีมให้เลือกมีทั้งหมด 6 แบบ และสร้างใหม่จาก Google หรือ Upload หลักสูตร การจัดการเรียนรู้ผ่านบทเรียนออนไลน์ด้วย New Google Sites รหัสหลักสูตร 651011026 28 โดย อาชีวศึกษาจังหวัดอุทัยธานีวันที่ 19-21 กันยายน 2565 ณ วิทยาลัยเทคนิคอุทัยธานี
ขั้นตอนที่ 11 ตัวอย่างการเลือกธีม ให้เลือกรูปแบบธีมเป็นแบบ Vision ให้กับบทเรียนออนไลน์ ขั้นตอนที่ 12 จะแสดงรูปแบบธีมเป็นแบบ Vision มีแถบเมนูดังภาพ หลักสูตร การจัดการเรียนรู้ผ่านบทเรียนออนไลน์ด้วย New Google Sites รหัสหลักสูตร 651011026 29 โดย อาชีวศึกษาจังหวัดอุทัยธานีวันที่ 19-21 กันยายน 2565 ณ วิทยาลัยเทคนิคอุทัยธานี
Workshop 2 1. สร้างบทเรียนออนไลน์ ด้วย New Google Sites อย่างน้อย 2 แบบ โดยให้ตั้งชื่อเว็บไซต์เป็น เลขที่ตามด้วย OnlineCourse ตัวอย่าง 100onlinecourse1 (แบบที่1) ตั้งชื่อเว็บไซต์เป็น เลขที่ตามด้วย OnlineCourse ตัวอย่าง 100onlinecourse2 (แบบที่2) 2. สร้างโฟลเดอร์ใน Google Drive ตั้งชื่อ บทเรียนออนไลน์ตามด้วยเลขที่ (ย้ายเว็บไซต์จากข้อ1 มาไว้) 3. เปลี่ยน Header ให้กับบทเรียนออนไลน์โดยเลือกจาก Header ตัวอย่าง หรือกำหนดเอง 3. เปลี่ยน ธีม ให้กับบทเรียนออนไลน์ 6.ส่ง Capture หน้าจอ folder บทเรียนออนไลน์ตามด้วยเลขที่ (ส่งWorkshop2/1) 7. แชร์โฟลเดอร์ข้อ 2 และให้ส่ง link ในกระดานส่งงานตามเลขที่ (ส่งWorkshop2/2) หลักสูตร การจัดการเรียนรู้ผ่านบทเรียนออนไลน์ด้วย New Google Sites รหัสหลักสูตร 651011026 30 โดย อาชีวศึกษาจังหวัดอุทัยธานีวันที่ 19-21 กันยายน 2565 ณ วิทยาลัยเทคนิคอุทัยธานี
แผนการจัดกิจกรรมที่3 การเพิ่มเนื้อหาในบทเรียนออนไลน์ จำนวน 3 ชั่วโมง วัตถุประสงค์ 1. เพื่อให้ครูผู้เข้ารับการอบรมมีความรู้และความเข้าใจการเพิ่มเนื้อหาในบทเรียนออนไลน์ 2. เพื่อให้ครูผู้เข้ารับการอบรมเพิ่มเนื้อหาประเภทต่าง ๆ ในบทเรียนออนไลน์ได้ พฤติกรรมการเรียนรู้ของครูที่จะเกิดขึ้น ครูผู้เข้ารับการอบรมมีความรู้และความเข้าใจการเพิ่มเนื้อหาในเว็บเพจและสามารถเพิ่มเนื้อหาประเภทต่าง ๆ ลงในบทเรียนออนไลน์ได้ สาระหัวข้อการพัฒนา 1. การเพิ่มหน้าเว็บเพจ 2. การเพิ่มเมนูย่อย 3. รูปแบบในการเพิ่มเนื้อหาในเว็บเพจ 4. การเพิ่มข้อความ 5. การเพิ่มรูปภาพ 6.การเพิ่ม Embed URL 7. การ Upload 8. การเพิ่มข้อมูลจาก Google Drive หลักสูตร การจัดการเรียนรู้ผ่านบทเรียนออนไลน์ด้วย New Google Sites รหัสหลักสูตร 651011026 31 โดย อาชีวศึกษาจังหวัดอุทัยธานีวันที่ 19-21 กันยายน 2565 ณ วิทยาลัยเทคนิคอุทัยธานี
1. การเพิ่มหน้าเว็บเพจ เว็บเพจ (Web Page) คือหน้าเอกสารที่ใช้ในการเผยแพร่ข้อมูล หรือแสดงข้อมูล ซึ่งประกอบด้วยข้อมูลหลายรูปแบบ เช่น ข้อความ รูปภาพ สื่อมัลติมีเดียต่าง ๆ และไฟล์ประเภทอื่น ๆ จำนวนหน้าเว็บเพจมากหรือน้อยขึ้นอยู่กับการออกแบบ โครงสร้างเว็บไซต์ของเนื้อหาแต่ละเรื่องที่ต้องการจัดทำ ตัวอย่าง โครงสร้างบทเรียนออนไลน์ หลักสูตร การจัดการเรียนรู้ผ่านบทเรียนออนไลน์ด้วย New Google Sites รหัสหลักสูตร 651011026 32 โดย อาชีวศึกษาจังหวัดอุทัยธานีวันที่ 19-21 กันยายน 2565 ณ วิทยาลัยเทคนิคอุทัยธานี
การเพิ่มหน้าเว็บเพจให้ทำตามขั้นตอนดังนี้ ขั้นตอนที่ 1. ไปที่เมนู หน้าเว็บ (Pages) ขั้นตอนที่ 2. คลิก + จะแสดงหน้าต่างให้ตั้งชื่อหน้าเว็บเพจใหม่ คลิกหน้าเว็บ ง่าย คลิก + ง่าย ตั้งชื่อหน้าเว็บเพจ ง่าย หลักสูตร การจัดการเรียนรู้ผ่านบทเรียนออนไลน์ด้วย New Google Sites รหัสหลักสูตร 651011026 33 โดย อาชีวศึกษาจังหวัดอุทัยธานีวันที่ 19-21 กันยายน 2565 ณ วิทยาลัยเทคนิคอุทัยธานี
ขั้นตอนที่ 3. พิมพ์ คำอธิบายรายวิชา และคลิก เสร็จสิ้น ขั้นตอนที่ 4. จะได้หน้าเว็บเพจมีชื่อเว็บเพจตามที่กำหนดและแสดงเมนูอยู่ด้านบนและมีชื่อเว็บเพจในเมนูหน้าเว็บ ขั้นตอนที่ 5. คลิกข้อความที่แสดงในส่วนของ Header จะแสดงเครื่องมือจัดการกับข้อความให้คลิกที่รูปถังขยะเพื่อลบ ข้อความออกจากส่วนหัว จะแสดงผลดังภาพถัดไป สร้างหน้าเว็บเพจต่อไปตามโครงสร้างให้ครบ (ทำตามขั้นตอนที่1-5) หลักสูตร การจัดการเรียนรู้ผ่านบทเรียนออนไลน์ด้วย New Google Sites รหัสหลักสูตร 651011026 34 โดย อาชีวศึกษาจังหวัดอุทัยธานีวันที่ 19-21 กันยายน 2565 ณ วิทยาลัยเทคนิคอุทัยธานี
2. การสร้างเมนูย่อย ขั้นตอนที่ 1. สร้างเมนูย่อย ในเมนูหลัก แบบทดสอบ ประกอบด้วย แบบทดสอบก่อนเรียน แบบทดสอบหลังเรียน ให้ทำตามลำดับดังนี้ 1) คลิกที่ จุดสามจุด 2) จะแสดงเมนูให้เลือก เพิ่มหน้าย่อย หลักสูตร การจัดการเรียนรู้ผ่านบทเรียนออนไลน์ด้วย New Google Sites รหัสหลักสูตร 651011026 35 โดย อาชีวศึกษาจังหวัดอุทัยธานีวันที่ 19-21 กันยายน 2565 ณ วิทยาลัยเทคนิคอุทัยธานี
3) พิมพ์ แบบทดสอนก่อนเรียน คลิกเสร็จสิ้น 4) สร้างเมนูย่อย แบบทดสอบหลังเรียนโดยทำตามข้อ 1 -3 อีกครั้ง จะได้เมนูย่อยดังรูป หลักสูตร การจัดการเรียนรู้ผ่านบทเรียนออนไลน์ด้วย New Google Sites รหัสหลักสูตร 651011026 36 โดย อาชีวศึกษาจังหวัดอุทัยธานีวันที่ 19-21 กันยายน 2565 ณ วิทยาลัยเทคนิคอุทัยธานี
ขั้นตอนที่ 2. สร้างเมนูย่อย ในเมนูหลัก หน่วยการเรียนรู้ ประกอบด้วย หน่วยที่ 1, หน่วยที่2, ….ทำตามลำดับ 1) คลิกที่ จุดสามจุดเมนูหน่วยการเรียนรู้ 2) จะแสดงเมนูให้เลือก เพิ่มหน้าย่อย 3) พิมพ์ หน่วยที่1 คลิกเสร็จสิ้น 4) สร้างเมนูย่อยเมนูต่อไปทำตามข้อ 1-3 อีกครั้ง ขั้นตอนที่ 3. จะได้เมนูย่อยตามที่สร้างดังภาพ หลักสูตร การจัดการเรียนรู้ผ่านบทเรียนออนไลน์ด้วย New Google Sites รหัสหลักสูตร 651011026 37 โดย อาชีวศึกษาจังหวัดอุทัยธานีวันที่ 19-21 กันยายน 2565 ณ วิทยาลัยเทคนิคอุทัยธานี
3.รูปแบบในการเพิ่มเนื้อหา 3.1 การเพิ่มเนื้อหาแบบที่ 1 เปิดหน้าเว็บเพจ ดับเบิ้ลคลิกที่ตำแหน่งที่ต้องการเพิ่มเนื้อหา จะปรากฏเมนูให้เพิ่ม เนื้อหาประเภทต่างๆ ดังรูป 3.2 การเพิ่มเนื้อหาแบบที่ 2 เปิดหน้าเว็บเพจ คลิกเลือกเมนูแทรกจะแสดงรายการให้เพิ่มเนื้อหาประเภทต่างๆ ได้ ดังรูป ดับเบิ้ลคลิกที่ตำแหน่งที่ต้องการเพิ่มเนื้อหา จะแสดง รายการให้เพิ่ม เนื้อหาประเภท ต่าง ๆ หลักสูตร การจัดการเรียนรู้ผ่านบทเรียนออนไลน์ด้วย New Google Sites รหัสหลักสูตร 651011026 38 โดย อาชีวศึกษาจังหวัดอุทัยธานีวันที่ 19-21 กันยายน 2565 ณ วิทยาลัยเทคนิคอุทัยธานี
4. การเพิ่มข้อความ ขั้นตอนที่ 1 เปิดหน้าเว็บเพจที่ต้องการเพิ่มข้อความ และดับเบิ้ลคลิกตำแหน่งที่ต้องการเพิ่มข้อความ จะปรากฏหน้าจอ ดังรูป คลิกที่ข้อความ ขั้นตอนที่ 2 จะแสดงหน้าจอให้พิมพ์ข้อความที่ต้องการและสามารถกำหนดขนาดตัวอักษรได้ จัดรูปแบบ และเพิ่มการเชื่อมโยงได้(เลือกเมนูคำอธิบายรายวิชา พิมพ์ชื่อวิชาที่จะทำบทเรียนออนไลน์) จัดรูปแบบข้อความได้เช่นเดียวกันกับโปรแกรม Microsoft Word หลักสูตร การจัดการเรียนรู้ผ่านบทเรียนออนไลน์ด้วย New Google Sites รหัสหลักสูตร 651011026 39 โดย อาชีวศึกษาจังหวัดอุทัยธานีวันที่ 19-21 กันยายน 2565 ณ วิทยาลัยเทคนิคอุทัยธานี
ขั้นตอนที่ 3 ปรับสีพื้นหลังข้อความ ทำสำเนาหรือ ลบข้อความได้ 5. การเพิ่มรูปภาพ ขั้นตอนที่ 1 ดับเบิ้ลคลิกตำแหน่งที่จะใส่รูปภาพจะปรากฏหน้าจอให้เลือกรูปภาพ ดับเบิ้ลคลิกตำแหน่งที่ จะใส่รูปภาพจะ ปรากฏหน้าจอให้เลือก รูปภาพ หลักสูตร การจัดการเรียนรู้ผ่านบทเรียนออนไลน์ด้วย New Google Sites รหัสหลักสูตร 651011026 40 โดย อาชีวศึกษาจังหวัดอุทัยธานีวันที่ 19-21 กันยายน 2565 ณ วิทยาลัยเทคนิคอุทัยธานี
ขั้นตอนที่ 2 เลือกรูปภาพจาก แหล่งข้อมูลต่าง ๆ ตัวอย่างที่ 1 เลือกรูปภาพจากการเมนูค้นหา เป็นรูปภาพที่ต้องการ ตัวอย่างที่ 2 เลือกรูปภาพจาก Google Drive คลิก Google Drive จะแสดงรูปภาพให้เลือกดังภาพ หลักสูตร การจัดการเรียนรู้ผ่านบทเรียนออนไลน์ด้วย New Google Sites รหัสหลักสูตร 651011026 41 โดย อาชีวศึกษาจังหวัดอุทัยธานีวันที่ 19-21 กันยายน 2565 ณ วิทยาลัยเทคนิคอุทัยธานี
6.การเพิ่ม Embed URL เป็นการฝังเว็บไซต์ลงในหน้าเว็บเพจ ขั้นตอนที่ 1 เตรียม URLหรือเว็บไซต์ที่ต้องการเพิ่มหรือฝังลงในหน้าเว็บเพจ ตัวอย่าง แนะนำเว็บไซต์เกี่ยวกับการจัดการเรียนการสอนด้วยบทเรียนออนไลน์ URL : https://bit.ly/krununcourse ขั้นตอนที่ 2 จะแสดงหน้าจอให้เลือก ใช้ URL และ ฝังโค้ด ดับเบิ้ลคลิกตำแหน่งที่ จะฝัง URL จะปรากฏ หน้าจอให้เลือกรูปภาพ หลักสูตร การจัดการเรียนรู้ผ่านบทเรียนออนไลน์ด้วย New Google Sites รหัสหลักสูตร 651011026 42 โดย อาชีวศึกษาจังหวัดอุทัยธานีวันที่ 19-21 กันยายน 2565 ณ วิทยาลัยเทคนิคอุทัยธานี
ตัวอย่างที่ 1 การทำตัวอักษรวิ่ง (แทรก Code HTML <marquee> Tag แบบฝัง Code) ทำตามขั้นตอนดังนี้ 1) เปิดเว็บไซต์https://www.w3docs.com/learn-html/html-marquee-tag.html 2) คลิก Try it yourself คลิก หลักสูตร การจัดการเรียนรู้ผ่านบทเรียนออนไลน์ด้วย New Google Sites รหัสหลักสูตร 651011026 43 โดย อาชีวศึกษาจังหวัดอุทัยธานีวันที่ 19-21 กันยายน 2565 ณ วิทยาลัยเทคนิคอุทัยธานี
3) พิมพ์ข้อความ <marquee> ยินดีต้อนรับเข้าสู่บทเรียนออนไลน์ครูนันทา </marquee>ใน Tag body 4) คลิก Submit 5) คัดลอก HTML Code ทั้งหมด โดยการ เลือกข้อมูลทั้งหมด คลิกขวา Copy หรือ Ctrl A และ Ctrl C 4 3 หลักสูตร การจัดการเรียนรู้ผ่านบทเรียนออนไลน์ด้วย New Google Sites รหัสหลักสูตร 651011026 44 โดย อาชีวศึกษาจังหวัดอุทัยธานีวันที่ 19-21 กันยายน 2565 ณ วิทยาลัยเทคนิคอุทัยธานี
6) กลับสู่เว็บไซต์บทเรียนออนไลน์ เปิดหน้าเว็บเพจหน้าแรกเพื่อการแทรก HTML Code ให้ทำตามขั้นตอนดังนี้ 1. ดับเบิ้ลคลิกพื้นที่เว็บเพจ 2. เลือก Embed Code 3. จะแสดงหน้าจอดังภาพเลือก ฝังโค้ด 1 2 หลักสูตร การจัดการเรียนรู้ผ่านบทเรียนออนไลน์ด้วย New Google Sites รหัสหลักสูตร 651011026 45 โดย อาชีวศึกษาจังหวัดอุทัยธานีวันที่ 19-21 กันยายน 2565 ณ วิทยาลัยเทคนิคอุทัยธานี