การสร้างเว็บไซต์

100 บันทึกหลังการสอน ขอ้ สรปุ หลังการสอน .................................................................................................................. .............................. ................................................................................................................................................ .................................................................................................................. .............................. ................................................................................................................................................ .................................................................................................................. .............................. .................................................................................................................. .............................. .............................................................................................................. .................................. .................................................................................................................. .............................. ................................................................................................................................................ .................................................................................................................. .............................. ปัญหาท่ีพบ .................................................................................................................. .............................. .................................................................................................................. .............................. .................................................................................................................. .............................. ............................................................................................................ .................................... .................................................................................................................. .............................. ................................................................................................................................................ .................................................................................................................. .............................. ................................................................................................................................................ .................................................................................................................. .............................. .................................................................................................................. .............................. แนวทางแก้ปัญหา .................................................................................................................. .............................. ................................................................................................ ................................................ .................................................................................................................. .............................. ................................................................................................................................................ .................................................................................................................. .............................. .................................................................................................................. .............................. ............................................................................................................................. ................... .................................................................................................................. .............................. ......................................................................................................... ....................................... .................................................................................................................. ..............................

101 แผนการจัดการเรียนรู้แบบบรู ณาการท่ี 9 หนว่ ยที่ - รหัส 2204-2009 การสรา้ งเว็บไซต์ (2-2-3) สอนคร้งั ที่ 9 (33-36) ชือ่ หน่วย/เรอื่ ง ทบทวน/สอบกลางภาคเรียน จานวน 4 ช.ม. สาระสาคญั - จุดประสงคก์ ารเรียนรู้ 1.ผเู้ รียนเกดิ การเรยี นรใู้ นเน้ือหาสาระ และนาความคดิ รวบยอดไปประยกุ ต์ใชต้ ่อไป 2.มีการพัฒนาคุณธรรม จริยธรรม คา่ นิยม และคุณลกั ษณะอันพึงประสงค์ของผสู้ าเร็จการศึกษา สานกั งานคณะกรรมการการอาชวี ศกึ ษา ท่ีครูสามารถสงั เกตได้ขณะทาการสอนในเร่ือง 2.1 ความมมี นุษยสัมพนั ธ์ 2.6 การประหยัด 2.2 ความมีวนิ ัย 2.7 ความสนใจใฝร่ ู้ 2.3 ความรบั ผิดชอบ 2.8 การละเว้นสิ่งเสพติดและการพนัน 2.4 ความซื่อสตั ย์สจุ ริต 2.9 ความรักสามคั คี 2.5 ความเช่ือมั่นในตนเอง 2.10 ความกตัญญกู ตเวที สมรรถนะรายวิชา 1. แสดงความร้เู ก่ียวกบั กระบวนการ โครงสร้างการทางาน และไวยากรณ์ ของโปรแกรมภาษาในการสร้างเวบ็ ไซต์ 2. ประยุกตใ์ ชโ้ ปรแกรมภาษาหรอื โปรแกรมสาเร็จรปู สาหรับสร้างเว็บไซต์ และการตดิ ตั้งและอัพโหลด (Upload) เวบ็ ไซต์ เน้อื หาสาระ ทบทวน/สอบกลางภาคเรียน

102 บันทึกหลังการสอบ ข้อสรุปหลงั การสอน .................................................................................................................. .............................. .................................................................................................................. .............................. ......................................................................................... ....................................................... .................................................................................................................. .............................. ................................................................................................................................................ ............................................................................................................................. ................... .................................................................................................................. .............................. .................................................................................................................. .............................. ปัญหาที่พบ .................................................................................................................. .............................. ....................................................................................... ......................................................... .................................................................................................................. .............................. ................................................................................................................................................ ........................................................................................................................ ........................ .................................................................................................................. .............................. .................................................................................................................. .............................. .................................................................................................................. .............................. ................................................................................................ ................................................ แนวทางแก้ปญั หา ............................................................................................................................. ................... ................................................................................................................................................ .................................................................................................................. .............................. .................................................................................................................. .............................. .................................................................................................................. .............................. .................................................................................................................. .............................. .......................................................................................... ......................................................

103 แผนการจัดการเรยี นรู้แบบบูรณาการที่ 10 หน่วยที่ 6 รหัส 2204-2009 การสร้างเวบ็ ไซต์ (2-2-3) สอนครง้ั ที่ 10 (37- ชอื่ หน่วย/เร่อื ง การแทรกและจดั รูปแบบข้อความ 40) จานวน 4 ช.ม. สาระสาคญั การแทรกและการจัดรปู แบบข้อความให้เหมาะสมและสวยงาม จะทาให้เว็บเพจมีความสวยงาม โดดเดน่ นา่ อ่าน น่าสนใจ และน่าติดตาม จดุ ประสงคก์ ารเรยี นรู้ 1. สามารถแทรกข้อความลงในเว็บเพจได้ 2. มคี ณุ ธรรม จริยธรรม และคา่ นยิ มท่ดี ีในการใช้คอมพวิ เตอร์ 3. มกี ารพฒั นาคุณธรรม จริยธรรม ค่านิยม และคุณลกั ษณะอันพงึ ประสงคข์ องผสู้ าเรจ็ การศึกษา สานกั งานคณะกรรมการการอาชีวศกึ ษา ทีค่ รูสามารถสงั เกตได้ขณะทาการสอนในเรื่อง 3.1 ความมีมนษุ ยสัมพนั ธ์ 3.2 ความมีวนิ ัย 3.3 ความรับผิดชอบ 3.4 ความซ่อื สตั ยส์ จุ ริต 3.5 ความเชอ่ื มน่ั ในตนเอง 3.6 การประหยดั 3.7 ความสนใจใฝ่รู้ 3.8 การละเว้นสิง่ เสพติดและการพนนั 3.9 ความรกั สามคั คี 3.10 ความกตัญญกู ตเวที สมรรถนะรายวิชา 1. แสดงความร้เู กี่ยวกับกระบวนการ โครงสรา้ งการทางาน และไวยากรณ์ ของโปรแกรมภาษาในการสร้างเวบ็ ไซต์ 2. ประยุกตใ์ ชโ้ ปรแกรมภาษาหรอื โปรแกรมสาเร็จรปู สาหรับสรา้ งเว็บไซต์ และการติดต้ังและอัพโหลด (Upload) เว็บไซต์ เนื้อหาสาระ 1. การแทรกขอ้ ความลงในเว็บเพจ

104 กิจกรรมการเรียนรู้ ขั้นนาเขา้ สู่บทเรียน 1.ครูกล่าวว่าการแทรกและการจัดรูปแบบข้อความให้เหมาะสมและสวยงาม จะทาให้เว็บเพจมี ความสวยงาม โดดเด่น น่าอา่ น น่าสนใจ และน่าตดิ ตาม 2.ผู้เรียนยกตัวอย่างเว็บเพจท่ีผู้เรียนคิดว่ามีความสวยงามและโดดเด่นกว่าเว็บเพจอ่ืนๆ พร้อม ระบุเหตผุ ล 3.ผ้เู รียนทาแบบประเมิณผลกอ่ นเรยี น ขั้นสอน 4.ครใู ช้เทคนิควธิ สี อนแบบบรรยาย (Lecture Method) บอกความสาคญั ของการแทรกข้อความ ลงในเว็บเพจ กล่าวคือในการสรา้ งเวบ็ เพจนน้ั ข้อความนั้นถือว่าเปน็ ส่วนประกอบท่ีสาคัญ เวบ็ เพจทุก หน้าจะตอ้ งมขี ้อความเป็นส่วนประกอบหลักเสมอ ซ่ึงการพิมพ์ข้อความนน้ั จะมีวธิ กี ารทต่ี ่างจากโปรแกรม อืน่ ท้ังวธิ ีพิมพ์ การเว้นวรรคตอน การข้ึนบรรทัดใหม่ รวมทง้ั การจดั รปู แบบขอ้ ความซงึ่ สามารถทาไดต้ าม รูปแบบตามหัวข้อตา่ งๆ 5.ครใู ช้เทคนิควิธสี อนแบบสาธิต (Demonstration Method) สาธติ การแทรกข้อความลงในเวบ็ เพจและให้ผเู้ รยี นปฏิบตั ิตามทีละขนั้ ตอนตามหวั ขอ้ ต่างๆ ดงั นี้ -การเวน้ ชอ่ งไฟ การเว้นชอ่ งไฟใหข้ ้อความในโปรแกรม Dreamweaver สามารถทาได้โดยกดปุ่ม Spacebar ตามปกติ แต่การเว้นช่องไฟโดย Spacebar นั้น จะสามารถใช้เว้นได้ 1 ครง้ั หรอื 1 ชอ่ งเท่านัน้ ในกรณีที่ ต้องการเวน้ ช่องไฟมากกวา่ 1 ช่องสามารถทาไดโ้ ดยมี 3 วธิ ดี งั นี้ 1). ใช้คีย์ลัด กด Shift + Ctrl + Spacebar บนคียบ์ อรด์ ตามจานวนชอ่ งไฟท่ตี ้องการ 2). ใช้พาเนล Insert 2.1 เลือกชดุ คาสง่ั บนพาเนล Insert เปน็ แบบ Text

105 2.2 เลอื กท่ีปุ่ม (Characters) 2.3 ทาตามข้ันตอนที่ 2.1-2.2 จนได้ชอ่ งวา่ งทตี่ ้องการ 3). แทรก Tag ใน Code View 3.1 เปลี่ยนเปน็ มุมมอง Code หรือ Split 3.2 พิมพ์ Tag คาส่งั   แทรกลงไประหว่างข้อความทตี่ อ้ งการเว้นชอ่ งไฟ โดย 1 Tag จะเท่ากบั เวน้ ช่องไฟ 1 ชอ่ ง เชน่     เทา่ กับเว้นชอ่ งไฟ 3 ชอ่ ง เมื่อทาตามวธิ ีใดวธิ ีหนงึ่ ข้างต้นแลว้ จะได้ช่องไฟตามที่ต้องการ อย่างไรกต็ าม ไม่ควรใช้ ช่องไฟหลายช่องในการขนึ้ ย่อหน้าใหม่ เน่อื งจากจะทาใหแ้ สดงผลบนเบราเซอรผ์ ิดเพี้ยนได้

106 - ขึ้นบรรทัดใหม่ในยอ่ หน้าเดมิ การตัดคาขน้ึ บรรทัดใหม่ใน Dreamweaver น้นั สามารถทาไดด้ ้วยกัน 2 วิธี 1). ใช้คยี ล์ ดั กดปุ่ม Shift + Enter หนา้ ขอ้ ความที่ต้องการขนึ้ บรรทัดใหม่ในมุมมอง Design 2). แทรก Tag ใน Code View 2.1 เปลย่ี นเป็น Code View หรือ Split View 2.2 พิมพ์ Tag คาส่งั <br/> หนา้ ขอ้ ความทีต่ ้องการขน้ึ บรรทดั ใหม่ - การข้ึนย่อหนา้ ใหม่ การข้นึ ย่อหนา้ ใหม่ใน Dreamweaver นนั้ มหี ลักการเหมือนกบั โปรแกรมสร้างเอกสารอ่นื ๆ เชน่ กนั โดยสามารถทาได้ 2 วธิ ี ดังนี้ 1). ใชค้ ียล์ ัด กดปุ่ม Enter หนา้ ข้อความท่ีต้องการข้ึนย่อหน้าใหม่ในมมุ มอง Design 2). แทรก Tag ใน Code View 2.1 เปล่ียนเปน็ Code View หรอื Split View 2.2 พิมพ์ Tag คาสง่ั <p></p> ดา้ นหนา้ และด้านหลังข้อความท่ีต้องการขึน้ ย่อหนา้ ใหม่

107 6.ผเู้ รยี นพิมพ์ข้อความท่ีกาหนดให้และบนั ทึกงานชื่อ 6.1-ชอ่ื ผ้เู รียน.html สะระแหน่ มแี หลง่ กาเนิดในแถบทวปี ยโุ รปตอนใตแ้ ละในแถบทะเลเมดิเตอร์เรเนียน ลักษณะใบจะ คล้ายคลึงกบั พชื ใตระกูลมิน้ ตม์ าก มีกลิน่ หอมคลา้ ย มะนาว รสชาตจิ ะคล้าย ๆ กับตะไครห้ อมและ มะนาว ประโยชนข์ องสะระแหน่ 1. ชว่ ยให้ผิวชมุ่ ช้ืนดว้ ยการนาใบสะระแหน่มาบดแล้วนามาทาผิว 2. ช่วยกาจดั อนมุ ลู อิสระออกจากรา่ งกาย 3. ใช้เป็นยาเยน็ ดบั ร้อน และขับเหง่อื ในร่างกาย 4. ชว่ ยบารงุ และรกั ษาสายตา 5. ชว่ ยลดรอยคลา้ ใตต้ าดว้ ยการนาใบสะระแหน่มาบดใหล้ ะเอียดโดยเตมิ นา้ ระหวา่ งบดดว้ ย เลก็ น้อย แล้วใส่นา้ ผงึ้ ตามลงไปคลกุ เคล้าใหเ้ ข้ากนั แลว้ นามาทาใต้ตาทิง้ ไวป้ ระมาณ 15 นาทแี ล้ว ลา้ งออก 6. ชว่ ยบรรเทาอาการเครยี ด 7. ช่วยรกั ษาอาการปวดศรี ษะ ไมเกรน ช่วยให้สมองปลอดโปรง่ โล่งคอ ด้วยการด่ืมนา้ ใบ สะระแหน่ 5 กรัมกบั น้า 1 ถว้ ย ผสมเกลือเล็กน้อย วันละ 2 คร้งั 8. ชว่ ยแกอ้ าการหน้ามืดตาลาย ดว้ ยการด่ืมนา้ ต้มใบสะระแหน่กบั ขิงสด 9. ช่วยบรรเทาอาการและแกห้ วัด นา้ มูกไหล อาการไอ 10. ช่วยรักษาโรคหอบหดื

108 7.ครูแนะนาให้ผู้เรียนบันทึกบัญชีครวั เรือน เพื่อใหเ้ กิดการปฏิบตั พิ ฒั นาความรู้ ความคดิ และปฏบิ ตั ิ ถูกต้อง กอ่ ใหเ้ กิดความเจรญิ ในด้านอาชพี หรือเศรษฐกิจ สังคม และวัฒนธรรม ซง่ึ การทาบญั ชคี รวั เรือน เปน็ เรือ่ งการบันทึกรายรบั รายจ่ายประจาวนั /เดอื น/ปี วา่ มีรายรบั รายจา่ ยจากอะไรบา้ ง จานวนเทา่ ใด รายการใดจ่ายน้อยจ่ายมาก จาเปน็ น้อยจาเปน็ มาก ก็อาจลดลงหรอื เพ่ิมขึน้ ตามความจาเปน็ ถา้ ทุกคนคิด ได้กแ็ สดงวา่ เปน็ คนรู้จกั พฒั นาตนเอง มเี หตุมีผล รูจ้ ักพอประมาณ รักตนเอง รักครอบครวั รักชุมชน และ รกั ประเทศชาตมิ ากข้นึ จึงเห็นได้ว่าการทาบัญชีครวั เรือน คอื วถิ แี ห่งการเรยี นรเู้ พอ่ื พฒั นาชีวิตตาม ปรัชญาเศรษฐกิจพอเพียง ข้นั สรุปและการประยุกต์ 8.ครูและผู้เรียนสรุปโดยผเู้ รียนตอบคาถามเกยี่ วกับการแทรกขอ้ ความลงในเวบ็ เพจ 9.ครูใช้สอ่ื Power Point สรุปเนอื้ หาที่เรยี น สื่อและแหล่งการเรยี นรู้ 1.หนงั สอื เรียน วชิ าการสรา้ งเว็บไซต์ ของสานกั พมิ พ์เอมพันธ์ 2.รปู ภาพ 3.กิจกรรมการเรยี นการสอน 4.แผ่นใส 5. ส่ือ PowerPoint หลักฐาน 1.บันทกึ การสอน 2.ใบเชค็ รายชือ่ 3.แผนจดั การเรียนรู้ 4.การตรวจประเมินผลงาน การวัดผลและการประเมนิ ผล วธิ วี ดั ผล 1. สังเกตพฤติกรรมรายบุคคล 2. ประเมินพฤติกรรมการเข้าร่วมกิจกรรมกลุ่ม 3. สังเกตพฤติกรรมการเข้าร่วมกิจกรรมกลมุ่ 4. ตรวจใบงาน 5. ตรวจแบบประเมนิ ผลการเรยี นรู้ และแบบฝึกปฏบิ ตั ิ 6. การสงั เกตและประเมนิ พฤติกรรมด้านคุณธรรม จรยิ ธรรม ค่านิยม และคุณลักษณะอนั พึง ประสงค์

109 เคร่อื งมอื วดั ผล 1. แบบสังเกตพฤติกรรมรายบคุ คล 2. แบบประเมนิ พฤติกรรมการเข้าร่วมกิจกรรมกล่มุ (โดยครู) 3. แบบสงั เกตพฤติกรรมการเขา้ ร่วมกิจกรรมกลุ่ม (โดยผู้เรยี น) 4. แบบประเมินกจิ กรรมใบงาน 5. แบบประเมนิ ผลการเรยี นรู้ และแบบฝึกปฏิบัติ 6. แบบประเมินคุณธรรม จรยิ ธรรม คา่ นยิ ม และคุณลักษณะอันพึงประสงค์ โดยครแู ละ ผเู้ รยี นรว่ มกันประเมนิ เกณฑ์การประเมนิ ผล 1. เกณฑ์ผา่ นการสงั เกตพฤตกิ รรมรายบคุ คล ต้องไมม่ ชี อ่ งปรบั ปรงุ 2. เกณฑ์ผ่านการประเมินพฤติกรรมการเขา้ ร่วมกจิ กรรมกลมุ่ คอื ปานกลาง (50 % ขนึ้ ไป) 3. เกณฑผ์ ่านการสังเกตพฤตกิ รรมการเข้ารว่ มกิจกรรมกลุ่ม คือ ปานกลาง (50% ข้นึ ไป) 4. กจิ กรรมใบงาน เกณฑ์ผา่ น คือ 50% 5. แบบประเมินผลการเรียนรู้ และแบบฝึกปฏิบัติมเี กณฑ์ผา่ น 50% 6 แบบประเมนิ คุณธรรม จรยิ ธรรม คา่ นิยม และคุณลักษณะอันพงึ ประสงค์ คะแนน ขึ้นอยูก่ ับการประเมินตามสภาพจรงิ กิจกรรมเสนอแนะ 1.แนะนาให้ฝึกทกั ษะในกิจกรรมใบงาน แบบฝกึ ปฏิบัติ เพื่อฝึกทักษะในการเรยี นรู้ 2.อ่านและทบทวนเน้ือหา และฝกึ ปฏิบัติ

110 บันทึกหลังการสอน ขอ้ สรุปหลังการสอน .................................................................................................................. .............................. .................................................................................................................. .............................. ............................................................................................................................. ................... .................................................................................................................. .............................. .................................................................................................... ............................................ .................................................................................................................. .............................. ................................................................................................................................................ .................................................................................................................. .............................. ................................................................................................................................................ ............................................................................................................................ .................... ปญั หาท่ีพบ .................................................................................................................. .............................. .................................................................................................... ............................................ .................................................................................................................. .............................. ................................................................................................................................................ .................................................................................................................. .............................. ................................................................................................................................................ ............................................................................................................................. ................... .................................................................................................................. .............................. ............................................................................................................. ................................... .................................................................................................................. .............................. แนวทางแกป้ ัญหา ................................................................................................................................................ .................................................................................................................. .............................. .................................................................................................................. .............................. .................................................................................................................. .............................. .................................................................................................................. .............................. ....................................................................................................... ......................................... .................................................................................................................. .............................. ................................................................................................................................................ ............................................................................................................................. ................... ................................................................................................................................................

111 แผนการจัดการเรียนรู้แบบบูรณาการที่ 11 หนว่ ยท่ี 6 รหัส 2204-2009 การสร้างเวบ็ ไซต์ (2-2-3) สอนคร้ังที่ 11 (41-44) ชอ่ื หน่วย/เรื่อง การแทรกและจดั รูปแบบข้อความ จานวน 4 ช.ม. สาระสาคญั การแทรกและการจดั รูปแบบขอ้ ความใหเ้ หมาะสมและสวยงาม จะทาให้เวบ็ เพจมีความสวยงาม โดดเดน่ น่าอา่ น นา่ สนใจ และนา่ ตดิ ตาม จุดประสงค์การเรียนรู้ 2. สามารถจัดรปู แบบข้อความและแกไ้ ขไดด้ ว้ ยวิธีการต่างๆ 3. มคี ุณธรรม จริยธรรม และค่านิยมท่ดี ีในการใช้คอมพวิ เตอร์ 4. มกี ารพัฒนาคุณธรรม จริยธรรมค่านยิ ม และคุณลักษณะอันพึงประสงค์ของผู้สาเร็จการศกึ ษา สานักงานคณะกรรมการการอาชีวศึกษา ทีค่ รสู ามารถสังเกตได้ขณะทาการสอนในเร่ือง 4.1 ความมีมนษุ ยสัมพันธ์ 4.2 ความมีวนิ ัย 4.3 ความรับผิดชอบ 4.4 ความซ่อื สัตย์สุจริต 4.5 ความเชือ่ มัน่ ในตนเอง 4.6 การประหยัด 4.7 ความสนใจใฝ่รู้ 4.8 การละเวน้ ส่ิงเสพติดและการพนัน 4.9 ความรักสามคั คี 4.10 ความกตัญญูกตเวที สมรรถนะรายวิชา 1. แสดงความรู้เกย่ี วกบั กระบวนการ โครงสรา้ งการทางาน และไวยากรณ์ ของโปรแกรมภาษาในการสร้างเวบ็ ไซต์ 2. ประยกุ ต์ใช้โปรแกรมภาษาหรือโปรแกรมสาเรจ็ รูปสาหรับสร้างเวบ็ ไซต์ และการติดตงั้ และอัพโหลด (Upload) เว็บไซต์ เน้อื หาสาระ 2. การจัดรูปแบบข้อความ

112 กิจกรรมการเรยี นรู้ ขน้ั นาเข้าส่บู ทเรียน 1.ครูใชเ้ ทคนิคการสอนแบบซิปปาโมเดล (CIPPA MODEL) โดยการทบทวนความรู้เดิมจาก สัปดาหท์ ีผ่ ่านมา โดยดึงความรู้เดิมของผ้เู รียนในเร่ืองที่จะเรียน เพ่ือช่วยให้ผู้เรียนมคี วามพรอ้ มในการ เชื่อมโยงความรู้ใหมก่ ับความรูเ้ ดิมของตน ผูส้ อนใชก้ ารสนทนาซักถามให้ผู้เรยี นเลา่ ประสบการณ์เดิม 2.ครูเปดิ โอกาสใหผ้ ู้เรยี นซักถามปัญหาหรอื ขอ้ สงสัยเก่ียวกับเนื้อหาท่ีได้ศึกษาจากสปั ดาห์กอ่ น ข้ันสอน 3.ครูใชเ้ ทคนิควธิ ีสอนแบบสาธิต (Demonstration Method) สาธิตวิธกี ารจดั รูปแบบข้อความ แบง่ ออกเป็น 3 แบบดว้ ยกนั ดังนี้ - การจดั รูปแบบข้อความท้ังเว็บเพจ สามารถจดั การได้ดังขั้นตอนต่อไปนี้ 1). กดปุม่ Page Properties บนพาเนล Properties 2). เลอื กตั้งคา่ รูปแบบตัวอกั ษร ขนาด และสขี องตัวอกั ษรไดต้ ามที่ตอ้ งการ จากนนั้ กด OK

113 3). จะได้ข้อความทีม่ ีรปู แบบตามทีก่ าหนดและเมอ่ื พิมพ์ข้อความใหมเ่ ข้าไป กจ็ ะมี ลักษณะเดียวกับท่ีตงั้ ค่าไวใ้ น Page Properties - การจดั รปู แบบเฉพาะส่วนแบบ HTML มรี ปู แบบการปรับแต่งต่างๆ ดังน้ี 1) การใช้งาน Heading การเปลีย่ นรูปแบบ Heading ของข้อความสามารถทาได้โดยการเลอื กข้อความ จากนน้ั เลือกเปลย่ี นจากคาส่งั Format ในพาเนล Properties ดังรปู

114 นอกจากนน้ั ยงั สามารถปรับเปล่ยี นขนาดและสีของ Heading แต่ละลาดบั ได้ โดย กาหนดค่าในPage Properties ในหัวขอ้ ของ Heading CSS ทีไ่ ดก้ ลา่ วถงึ ไปแลว้ ในเร่ืองของการ กาหนดค่าเริ่มตน้ เว็บเพจ ดังรูป เม่อื กด OK แล้ว สแี ละขนาด Heading ท่ีเลือกไวจ้ ะแสดงผลตามทกี่ าหนดทันที 2) การทาตัวหนาและตัวเอยี งให้ข้อความสามารถทาไดด้ ้วยขัน้ ตอนดงั นี้ 2.1. เลอื กขอ้ ความ (Highlight) บนเว็บเพจท่ีตอ้ งการทาตัวหนาหรือตวั เอยี ง

115 2.2. เลือกคลิกปุ่ม (Bold) หรอื (Italic) ตามท่ตี ้องการโดยปมุ่ (Bold) จะให้ผลกบั ข้อความดังน้ี Bold และปุ่ม (Italic) จะใหผ้ ลกับข้อความดังนี้ Italic หรือในกรณที ต่ี ้องการทั้งสองรปู แบบบนขอ้ ความเดียว สามารถทาได้และจะให้ผลดงั น้ี Bold and Italic - การจดั รปู แบบข้อความแบบ CSS การจัดรปู แบบข้อความแบบ CSS นั้นจะมคี วามซับซ้อนมากกว่าแบบ HTML แต่จะมีความยืดหยนุ่ สงู กวา่ และสามารถตกแต่งได้อย่างสวยงามกว่า ทส่ี าคญั สามารถเก็บคา่ ที่ปรบั แตง่ มาใช้งานซ้าได้โดยไม่ ต้องตัง้ คา่ ใหม่ การปรับแต่งข้อความแบบ CSS นน้ั จะทาบนพาเนล Properties เช่นกนั กบั HTML การจดั รูปแบบข้อความแบบ CSS นน้ั จะตา่ งจากแบบ HTML เนือ่ งจากทกุ ครัง้ ทป่ี รบั เปลย่ี นรปู แบบ ขอ้ ความ โปรแกรมจะบงั คับให้กาหนดและตั้งช่ือการตง้ั ค่านน้ั ไว้ เพ่ือนามาใช้อ้างอิงหรือนามาใชก้ ับ ข้อความอ่ืนๆ ในเว็บเพจ โดยมีรูปแบบการทางานต่างๆ ดงั น้ี 1) การใสส่ ใี หข้ ้อความ สามารถทาได้ด้วยวิธีดังน้ี 1.1. ลากเมาสค์ ลุมข้อความท่ีต้องการเปลี่ยนสี 1.2. คลิกที่ปมุ่ CSS

116 1.3. คลิกปุ่ม แล้วเลือกสีตามท่ีตอ้ งกา 1.4. จะปรากฏหนา้ ตา่ งขึ้นมา เลือก CSS เปน็ แบบ Class จากน้นั ตั้งชื่อแลว้ คลกิ OK 1.5. ข้อความจะเปลี่ยนเปน็ สเี ดยี วกบั ท่เี ลือกไว้ 1.6. เมื่อต้องการเปลยี่ นข้อความอน่ื ให้เปน็ สีเดยี วกัน ใหล้ ากเมาส์คลุม ข้อความน้ัน

117 1.7. เลอื กช่อื CSS ทตี่ ง้ั ไวใ้ นชอ่ ง Targeted Rule 1.8. ตัวอักษรจะเปล่ียนไปใช้สีตาม CSS ทบ่ี ันทึกไว้ ขน้ั ตอนต่อไปนี้ 2) การกาหนดขนาดตัวอกั ษร การระบขุ นาดและหนว่ ยของตวั อักษรสามารถทาไดด้ งั 2.1. ลากเมาสค์ ลุมข้อความที่ต้องการกาหนดขนาดตัวอักษร

118 2.2. เลอื กขนาดตัวอกั ษรทตี่ ้องการบนพาเนล Properties 2.3. ต้ังช่ือให้ CSS แล้วคลกิ OK 2.4. ขอ้ ความที่เลือกจะเปลยี่ นเป็นขนาดตามทกี่ าหนด 2.5. เมื่อต้องการกาหนดข้อความอ่ืนให้มขี นาดเทา่ กนั ให้ลากเมาสค์ ลุมข้อความ ดงั กลา่ ว

119 2.6. เลอื กชือ่ ของ CSS ในชอ่ ง Targeted Rule 2.7. ข้อความจะเปลีย่ นเป็นขนาดตามท่ีกาหนดทนั ที 3) การจัดระเบยี บข้อความ ,uรูปแบบต่างๆ ของการจดั ระเบยี บขอ้ ความมีดงั นี้ - (Align Left) เป็นการจัดข้อความชิดซา้ ย - (Align Center) เป็นการจดั ขอ้ ความไวก้ ึ่งกลาง

120 - (Align Right) เป็นการจดั ข้อความชดิ ขวา 4.ผู้เรยี นพมิ พ์ขอ้ ความที่กาหนดใหแ้ ละบนั ทึกงานช่ือ 6.2-ชอื่ ผเู้ รยี น.html สาเหตกุ ารเกดิ สวิ อุดตนั หลายคนสงสยั ว่าเจา้ สิวอดุ ตันน้นั มนั เกิดข้ึนมาไดอ้ ย่างไร เป็นเพราะเราสกปรกเกนิ ไป อย่างนั้นหรือ จริงๆ แลว้ เจ้าสวิ อดุ ตันนั้นมสี าเหตุมาจากต่อมไขมันทาการสรา้ งนา้ มนั มากเกินไปนนั่ เอง โดยส่งิ ทคี่ วบคุมการผลติ นา้ บนใบหนา้ ก็คือ ฮอรโ์ มนแอนโดรเจน (androgen)เมื่อเจ้าต่อมน้ีผลติ น้ามนั ออกมาเยอะจนเหลือใช้แล้วตกค้างอยู่ในรขู มุ ขน มันก็จะไปรวมตวั กับเซลลผ์ วิ ที่ตายแล้ว เหตนุ ้ีเองจงึ ทาใหน้ ้ามนั นัน้ ข้นหนดื จนระบาย ออกไปไม่ได้ 5.ให้นักเรียนพิมพ์ข้อความท่กี าหนดใหแ้ ละบนั ทึกงานช่ือ 6.3-ชอื่ ผ้เู รียน.html วธิ กี ำจดั สิวอดุ ตนั 1. ดแู ลตวั เอง ไมว่ า่ จะเปน็ การรกั ษาความสะอาดบนใบหนา้ เลือกใช้เคร่ืองสาอาง ให้เหมาะกบั สภาพผวิ เพราะความสกปรกท่ีเกิดขึ้นมาจากความไม่ตงั้ ใจของเรา 2. หลีกเล่ียงแสงแดด แสงแดดเปน็ สาเหตหุ นึ่งทที่ าให้ผวิ หนา้ ท่ีเปน็ สิวอยู่แลว้ เผชิญ กับภาวะที่รุนแรงมากข้ึน หากเราไมป่ ้องกันแสงแดดท่จี ะกระทบต่อผวิ หน้าของเรา โดยตรง 3. ควบคุมความมันบนใบหน้า เม่ือเราผา่ นขั้นตอนการกาจัดสิวอุดตนั ออกมาจาก ผวิ ไดแ้ ล้ว สิ่งทค่ี วรทาอีกอยา่ งกค็ ือ ควรลดน้ามันบนใบหน้าควบคูไ่ ปดว้ ย และอยา่ ใหอ้ ะไร มาอดุ ตันรูขุมขนของเราได้

121 6.ครูแนะนาให้ผู้เรยี นบนั ทึกบัญชีครัวเรือน เพ่ือใหเ้ กิดการปฏบิ ตั ิพฒั นาความรู้ ความคิด และ ปฏิบตั ิ ถูกต้อง กอ่ ให้เกิดความเจริญในดา้ นอาชีพหรือเศรษฐกจิ สังคม และวฒั นธรรม ซง่ึ การทาบญั ชคี รัวเรือน เปน็ เรอื่ งการบนั ทึกรายรบั รายจ่ายประจาวนั /เดือน/ปี ว่ามรี ายรับรายจา่ ยจากอะไรบ้าง จานวนเท่าใด รายการใดจ่ายน้อยจ่ายมาก จาเปน็ น้อยจาเป็นมาก ก็อาจลดลงหรอื เพ่ิมข้ึนตามความจาเปน็ ถ้าทุกคนคดิ ได้ก็แสดงว่าเปน็ คนรูจ้ กั พัฒนาตนเอง มีเหตุมีผล รู้จกั พอประมาณ รักตนเอง รกั ครอบครัว รกั ชมุ ชน และ รักประเทศชาตมิ ากขึน้ จงึ เหน็ ได้ว่าการทาบัญชีครัวเรอื น คอื วถิ แี ห่งการเรียนรู้เพื่อพัฒนาชวี ติ ตาม ปรัชญาเศรษฐกจิ พอเพียง ขน้ั สรุปและการประยุกต์ 7.ครแู ละผูเ้ รียนสรุปเนอื้ หาท่เี รยี น 8.ครูใช้วิธสี ่มุ ผู้เรยี นทุกกล่มุ ตอบคาถามและอธบิ ายให้เพื่อนฟงั ท้ังช้นั เรยี น 9.ผู้เรียนทาใบงาน และแบบประเมินผลหลังเรยี น ส่อื และแหล่งการเรียนรู้ 1.หนงั สอื เรยี น วชิ าการสรา้ งเวบ็ ไซต์ ของสานักพมิ พเ์ อมพันธ์ 2.รปู ภาพ 3.กิจกรรมการเรยี นการสอน 4.ส่อื PowerPoint หลักฐาน 1.บันทึกการสอน 2.ใบเช็ครายชอ่ื 3.แผนจัดการเรยี นรู้ 4.การตรวจประเมนิ ผลงาน การวดั ผลและการประเมนิ ผล วธิ วี ดั ผล 1. สงั เกตพฤติกรรมรายบุคคล 2. ประเมนิ พฤติกรรมการเขา้ รว่ มกจิ กรรมกล่มุ 3. สงั เกตพฤตกิ รรมการเขา้ ร่วมกิจกรรมกลมุ่ 4. ตรวจใบงาน 5. ตรวจแบบประเมนิ ผลการเรียนรู้ และแบบฝึกปฏบิ ัติ 6. การสงั เกตและประเมนิ พฤติกรรมด้านคุณธรรม จริยธรรม ค่านยิ ม และคุณลักษณะอัน พึงประสงค์

122 เครื่องมือวัดผล 1. แบบสังเกตพฤติกรรมรายบุคคล 2. แบบประเมินพฤติกรรมการเข้าร่วมกจิ กรรมกลมุ่ (โดยครู) 3. แบบสงั เกตพฤติกรรมการเขา้ ร่วมกจิ กรรมกลุ่ม (โดยผู้เรียน) 4. แบบประเมนิ กิจกรรมใบงาน 5. แบบประเมินผลการเรยี นรู้ และแบบฝึกปฏิบตั ิ 5. แบบประเมนิ คุณธรรม จรยิ ธรรม ค่านิยม และคุณลักษณะอันพงึ ประสงค์ โดยครแู ละ ผู้เรยี นรว่ มกันประเมนิ เกณฑก์ ารประเมินผล 1. เกณฑผ์ ่านการสังเกตพฤตกิ รรมรายบุคคล ต้องไมม่ ชี อ่ งปรับปรงุ 2. เกณฑผ์ ่านการประเมนิ พฤติกรรมการเขา้ ร่วมกิจกรรมกลุม่ คือ ปานกลาง (50 % ขน้ึ ไป) 3. เกณฑผ์ ่านการสังเกตพฤติกรรมการเขา้ รว่ มกิจกรรมกลุ่ม คือ ปานกลาง (50% ขน้ึ ไป) 4. กจิ กรรมใบงาน เกณฑผ์ า่ น คือ 50% 5. แบบประเมินผลการเรียนรู้ และแบบฝกึ ปฏบิ ัติมีเกณฑผ์ ่าน 50% 6 แบบประเมินคุณธรรม จริยธรรม ค่านิยม และคุณลักษณะอันพึงประสงค์ คะแนน ข้ึนอยู่กับการประเมนิ ตามสภาพจริง กิจกรรมเสนอแนะ 1.ทากจิ กรรมใบงาน 2.อา่ นและทบทวนเน้อื หา

123 จงเลอื กคาตอบทถ่ี ูกต้องที่สดุ เพยี งข้อเดยี ว 1. การเว้นชอ่ งไฟให้ข้อความในโปรแกรม Dreamweaver ถา้ ตอ้ งการเวน้ ชอ่ งว่างมากกวา่ 1 ช่องจะต้อง ปฏิบัตอิ ยา่ งไร ก. กด Spacebar ข. กด Shift + Spacebar ค. กด Shift + Ctrl + Spacebar ง. กด Ctrl + Spacebar 2. การข้นึ บรรทัดใหม่ในย่อหนา้ เดมิ โดยใชค้ ีย์ลดั ต้องปฏบิ ัติอย่างไร ก. กดปุ่ม Shift + Enter หนา้ ขอ้ ความท่ตี ้องการข้นึ บรรทัดใหม่ ข. กดปุ่ม Alt +Enter ท้ายข้อความที่ต้องการข้นึ บรรทดั ใหม่ ค. กดปมุ่ Shift + Ctrl + Spacebar หนา้ ขอ้ ความทีต่ ้องการขนึ้ บรรทัดใหม่ ง. กดปมุ่ Shift +Ctrl + Enter ท้ายข้อความท่ีต้องการขึ้นบรรทดั ใหม่ 3. จากหนา้ จอต่อไปนี้แสดงว่าตอ้ งการให้คาวา่ วิทยาลัยการอาชพี บางววั แสดงผลอยา่ งไร ก. จดั กง่ึ กลาง ข. ขึ้นยอ่ หน้าใหม่ ค. จดั ชดิ ซา้ ย ง. จดั ชิดขวา จากหน้าจอจงตอบคาถามข้อ 4-ข้อ 5 4. แบบอักษรท่ผี ู้ใชต้ งั้ คา่ ไวค้ ืออะไร ก. Angsana New ข. Browallia New ค. Cordia New ง. Courier New 5. ขนาดแบบอักษรท่ผี ใู้ ช้ตั้งค่าไว้คอื เทา่ ใด ก. 16 pt. ข. 18 pt. ค. 24 pt. ง. 26 pt.

124 6. หนา้ จอต่อไปน้ี ใชท้ าอะไร ก. จดั รูปแบบข้อความเฉพาะสว่ นแบบ HTML ข. เปลยี่ นเฉพาะ FONT ค. ปรับเฉพาะตัวหนา ง. ปรบั เฉพาะตัวเอียง 7. จากรูปอยากทราบว่าหัวข้อหรอื หวั เร่ืองระดบั ใดเป็นลาดบั หวั ข้อใหญ่ทส่ี ุด ก. Heading 1 ข. Heading 3 ค. Heading 4 ง. Heading 6 8. ขนาดตัวอกั ษรแบบ larger คือขนาดใด ก. ขนาดตัวอักษรทใี่ หญ่ทสี่ ดุ ข. ขนาดตัวอกั ษรท่ใี หญ่กวา่ มาตรฐาน 2 เทา่ ค. ขนาดตัวอกั ษรมาตรฐาน ง. ขนาดตัวอักษรทเ่ี ลก็ กวา่ มาตรฐาน 1 เท่า 9. ขอ้ ใดคือขนาดตวั อักษรมาตรฐาน ก. small ข. xx-small ค. x-large ง. medium 10. จากรูป ถ้าต้องการจัดขอ้ ความให้ชิดซา้ ยต้องเลอื กหมายเลขใด ก. หมายเลข 1 ข. หมายเลข 2 ค. หมายเลข 3 ง. หมายเลข 4

125 บนั ทึกหลังการสอน ข้อสรปุ หลงั การสอน ............................................................................................................................. ................... .................................................................................................................. .............................. ...................................................................................................... .......................................... .................................................................................................................. .............................. ................................................................................................................................................ .................................................................................................................. .............................. ................................................................................................................................................ ........................................................................................................................ ........................ .................................................................................................................. .............................. ............................................................................................................... ................................. ปัญหาที่พบ .................................................................................................................. .............................. ................................................................................................................................................ ............................................................................................................................. ................... ................................................................................................................................................ .................................................................................................................. .............................. .................................................................................................................. .............................. ............................................................................................................. ................................... .................................................................................................................. .............................. ................................................................................................................................................ ............................................................................................................................. ................... แนวทางแก้ปญั หา .................................................................................................................. .............................. .................................................................................................................. .............................. .................................................................................................................. .............................. ....................................................................................................... ......................................... .................................................................................................................. .............................. ................................................................................................................................................ ..................................................................................................................... ........................... ................................................................................................................................................ .................................................................................................................. .............................. .................................................................................................................. .............................

126 แผนการจดั การเรยี นรแู้ บบบรู ณาการที่ 12 หนว่ ยที่ 7 รหสั 2204-2009 การสรา้ งเวบ็ ไซต์ (2-2-3) สอนคร้ังท่ี 12 (45- ช่ือหน่วย/เรือ่ ง การแทรกไฟลม์ ัลติมีเดียและการสร้างการเช่ือมโยง 48) จานวน 4 ช.ม. สาระสาคญั การสร้างเวบ็ ไซต์ให้มีสีสัน น่าสนใจ น่าติดตาม เป็นเร่ืองสาคัญต่อความสาเร็จในการสร้างเว็บไซต์ โปรแกรม Adobe Dreamweaver ได้มีการออกแบบให้ผู้สร้างเว็บไซต์นั้นสามารถแทรกไฟล์ภาพนิ่ง ภาพเคล่ือนไหว ตลอดจนเสียง และวิดีโอ เพ่ือส่งเสริมให้เว็บไซต์นั้นน่าดู และน่าติดตามมากข้ึน นอกจากนน้ั ยังจาเปน็ ต้องมกี ารเช่อื มโยงระหวา่ งเว็บเพจที่เหมาะสม เพอื่ เชอ่ื มโยงและรวมเปน็ เวบ็ ไซต์ จดุ ประสงค์การเรยี นรู้ 1. สามารถแทรกภาพนิ่งภาพเคลอื่ นไหว เสียง และวดิ ีโอลงในเวบ็ เพจได้ 2. สามารถปรับแตง่ ภาพบนเวบ็ เพจได้ 4. มีคณุ ธรรม จริยธรรม และคา่ นยิ มทด่ี ีในการใช้คอมพิวเตอร์ 5. มกี ารพัฒนาคณุ ธรรม จรยิ ธรรม คา่ นิยม และคุณลักษณะอันพึงประสงคข์ องผสู้ าเร็จการศกึ ษา สานักงานคณะกรรมการการอาชวี ศกึ ษา ทคี่ รสู ามารถสงั เกตได้ขณะทาการสอนในเร่ือง 5.1 ความมมี นษุ ยสัมพนั ธ์ 5.2 ความมีวินัย 5.3 ความรับผิดชอบ 5.4 ความซ่อื สัตย์สุจรติ 5.5 ความเชอื่ มนั่ ในตนเอง 5.6 การประหยดั 5.7 ความสนใจใฝร่ ู้ 5.8 การละเวน้ สงิ่ เสพติดและการพนัน 5.9 ความรกั สามัคคี 5.10 ความกตัญญูกตเวที สมรรถนะรายวิชา 1. แสดงความรูเ้ ก่ยี วกับกระบวนการ โครงสร้างการทางาน และไวยากรณ์ ของโปรแกรมภาษาในการสร้างเว็บไซต์ 2. ประยุกต์ใชโ้ ปรแกรมภาษาหรอื โปรแกรมสาเร็จรูปสาหรับสรา้ งเว็บไซต์ และการตดิ ตัง้ และอัพโหลด (Upload) เวบ็ ไซต์

127 เนอ้ื หาสาระ 1. การแทรกภาพประกอบ 2. การปรบั แตง่ ภาพ 3. การแทรกเสียง 4. การแทรกภาพเคล่ือนไหว กิจกรรมการเรียนรู้ ข้ันนาเขา้ สูบ่ ทเรยี น 1.ครูกลา่ วว่าภาพนิ่ง ภาพเคล่ือนไหวตลอดจนเสียงและวิดีโอบนเว็บไซต์ทาใหเ้ ว็บไซตน์ า่ ดู และ น่าตดิ ตาม เป็นเร่ืองสาคัญต่อความสาเร็จในการสร้างเวบ็ ไซต์อย่างมาก 2.ครแู ละผูเ้ รียนสนทนาเกย่ี วกับโปรแกรม Adobe Dreamweaver ไดม้ ีการออกแบบให้ผสู้ ร้าง เว็บไซต์นั้นสามารถแทรกไฟล์ภาพนง่ิ ภาพเคล่ือนไหว ตลอดจนเสยี ง และวดิ ีโอ เพ่ือสง่ เสรมิ ให้เว็บไซตน์ ัน้ นา่ ดู และน่าติดตามมากขนึ้ นอกจากน้ันยงั จาเปน็ ต้องมีการเชื่อมโยงระหว่างเวบ็ เพจทเ่ี หมาะสม เพ่ือ เชอ่ื มโยงและรวมเป็นเวบ็ ไซต์ 3.ผูเ้ รียนทาแบบประเมิณผลก่อนเรียน ขน้ั สอน 4.ครูใช้เทคนคิ วิธสี อนแบบสาธติ (Demonstration Method) สาธติ วธิ ีการแทรกภาพประกอบ ซง่ึ มีขั้นตอนดังนี้ 1) การจดั เตรียมโฟลเดอร์ภาพ มขี ั้นตอนดังน้ี 1.1. สร้างโฟลเดอร์ชอ่ื images (คลกิ ขวา> New > Folder แล้วตง้ั ชื่อ) สาหรับเกบ็ ภาพประกอบไวใ้ นโฟลเดอร์ของเวบ็ ไซต์ เพ่อื ความสะดวกในการใชง้ าน เมอ่ื ต้องการนาภาพมาใชง้ านในเว็บไซต์ ควรบนั ทกึ ภาพ เก็บไวใ้ นโฟลเดอร์ Images ก่อนนาไปใชง้ านในเว็บเพจ

128 1.2. โฟลเดอร์ images จะมาปรากฏในพาเนล Files พร้อมใช้งานได้ทันที 2) วธิ ีแทรกภาพลงในเว็บเพจสามารถทาไดห้ ลายวิธี ดังน้ี - แทรกภาพจากโฟลเดอรเ์ กบ็ ภาพ สามารถทาได้โดยนาภาพจากโฟลเดอร์ images ท่ี เตรยี มไว้โดยมขี ัน้ ตอนต่างๆ ดังนี้ 2.1. คลิกเลือกบรเิ วณท่ตี ้องการแทรกภาพ

129 2.2. คลกิ พาเนล Insert แล้วเลือก Common 2.3. ไปทค่ี าสั่ง Image แล้วเลอื ก Image 2.4. เลือกภาพทต่ี ้องการ แลว้ คลกิ OK 2.5. ใส่คาอธบิ ายภาพ แล้วคลิกปมุ่ OK

130 2.6. ภาพท่เี ลือกจะปรากฏลงในเวบ็ เพจทนั ที -การแทรกภาพจากพาเนล Files โดยมวี ิธีการดงั น้ี 2.1. คลกิ พาเนล Files แลว้ เลอื กไฟลภ์ าพที่ต้องการ 2.2. ใชเ้ มาส์ลากภาพไปวางในจุดที่ต้องการ 2.3. ภาพท่เี ลือกจะถูกวางในจดุ ทเี่ ลือกทันที

131 5.ครใู ช้เทคนคิ วิธสี อนแบบสาธิต (Demonstration Method) สาธิตวิธีการปรับแตง่ ภาพ และให้ ผ้เู รียนปฏบิ ัตติ ามดังนี้ 1) การปรับขนาดภาพ ในกรณีทภ่ี าพทีน่ ามาวางมีขนาดเล็กหรอื ใหญ่เกินไป สามารถปรบั ขนาดภาพได้โดยการคลกิ ค้างทจ่ี ดุ ส่เี หลี่ยมบรเิ วณมมุ ของรปู ภาพ และลากปรับขนาดไดต้ ามตอ้ งการทนั ที หากต้องการย่อ-ขยายภาพโดยใหค้ งอัตราส่วนกว้าง-ยาวเดิม ใหก้ ด Shift คา้ งขณะที่กาลัง ปรับขนาดภาพ ทาให้ภาพไม่เสยี อตั ราส่วน (ภาพบบี ผิดสดั ส่วน) ได้ 2) การครอปภาพ เม่ือในภาพที่นามาวางนนั้ มีสว่ นเกินท่ไี ม่ต้องการ ในบรเิ วณขอบท่ีต้องการตดั ออก หรือที่ เรยี กว่า ครอป (Crop) สามารถทาได้ด้วยขัน้ ตอนดงั น้ี 2.1. เลือกทีร่ ปู ภาพ จากนั้นเลอื กป่มุ (Crop) บนพาเนล Properties

132 2.2. เลือกปรับขนาดของการครอปภาพตามที่ต้องการ จากน้ันกด Enter 2.3. ภาพจะถกู ครอปส่วนที่ไมต่ อ้ งการออกไป เหลอื แตส่ ่วนที่เลือกไวท้ ันที

133 6.ครใู ช้สือ่ Power Point ประกอบการอธิบายเรือ่ งการใส่ภาพฉากหลังใหเ้ ว็บเพจ และใหผ้ ้เู รยี น ปฏิบตั ิตามขั้นตอน ดงั น้ี 1). ไปท่ีเมนู Modify > Page Properties 2). คลกิ ท่ี Browse 3). เลือกภาพท่ีต้องการแล้วคลิกท่ี OK 4). คลิก Apply เพ่อื ทดสอบผล เมื่อเสรจ็ แลว้ คลิกปุม่ OK

134 5). จะได้ภาพพื้นหลงั ท่ีเลอื กไวท้ นั ที 7.ครใู ช้เทคนคิ วธิ ีสอนแบบสาธิต (Demonstration Method) สาธิตเร่อื งการแทรกเสยี งลงใน เว็บเพจ และใหผ้ ู้เรยี นปฏิบตั ิตามทีละขัน้ ตอนดังนี้ 1). เลือกตาแหน่งทีต่ ้องการแทรก แลว้ ไปทเ่ี มนู Insert > Media > Plugin 2). เลอื กไฟล์ที่ต้องการแทรก แลว้ คลกิ OK

135 3). จากนัน้ ใหบ้ นั ทึกไฟลเ์ ว็บเพจ และเมื่อเปิดไฟล์น้ดี ว้ ยเว็บเบราเซอร์จะสามารถเลน่ เสียงได้ดงั ภาพ 8.ครใู ช้ส่ือ Power Point ประกอบการอธบิ ายและสาธิตขั้นตอนการแทรกภาพเคล่ือนไหวลงใน เวบ็ เพจ และให้ผเู้ รียนปฏิบัติตามทีละข้นั ตอนดงั น้ี 1). เลือกบริเวณที่ต้องการแทรก จากนน้ั ไปที่ Insert > Media >SWF 2). เลอื กไฟล์ทต่ี ้องการแทรก 3). ต้ังช่ือไฟล์ แลว้ คลิก OK 4). เม่อื บนั ทึกและเปดิ ในเวบ็ เบราเซอร์จะแสดงภาพเคล่อื นไหวทีแ่ ทรกไว้ทันที

136 9.ครเู นน้ การนาความรู้ทางด้านคอมพิวเตอร์ไปใช้ในการประกอบอาชีพอย่างมีคณุ ธรรมไม่ เบยี ดเบยี นผู้อ่ืน เชน่ ไม่มีพฤตกิ รรมทฉี่ ้อโกง ไมป่ ฏเิ สธความรับผดิ ชอบ จนเกดิ ความเดอื ดร้อน ดงั นั้น เมอื่ ผเู้ รียนจบการศกึ ษาไปแล้ว และไปประกอบอาชีพเปน็ ผปู้ ระกอบการ หรือลูกจ้างก็ตาม ควรยึดหลกั คณุ ธรรมตามเง่อื นไขแห่งปรชั ญาเศรษฐกิจพอเพยี ง ขนั้ สรุปและการประยุกต์ 10.ครูใช้วธิ ีสมุ่ ผ้เู รียนตอบคาถามและอธิบายให้เพ่อื นฟงั ทงั้ ชั้นเรยี น 11.ครูใช้สือ่ Power Point สรปุ เน้อื หาท่ีศึกษา สือ่ และแหล่งการเรียนรู้ 1.หนังสอื เรยี น วิชาการสรา้ งเว็บไซต์ ของสานกั พิมพเ์ อมพันธ์ 2.รปู ภาพ 3.กจิ กรรมการเรยี นการสอน 4.แผน่ ใส 5.ส่ือ VDO , ส่ือ PowerPoint หลกั ฐาน 1.บนั ทกึ การสอน 2.ใบเช็ครายช่อื 3.แผนจัดการเรียนรู้ 4.การตรวจประเมินผลงาน การวดั ผลและการประเมินผล วิธีวดั ผล 1. สังเกตพฤตกิ รรมรายบุคคล 2. ประเมินพฤติกรรมการเขา้ ร่วมกจิ กรรมกลุ่ม 3. สังเกตพฤตกิ รรมการเข้าร่วมกิจกรรมกลมุ่ 4. ตรวจใบงาน 5. ตรวจแบบประเมินผลการเรยี นรู้ และแบบฝึกปฏบิ ัติ

137 6. การสงั เกตและประเมินพฤติกรรมด้านคุณธรรม จริยธรรม ค่านยิ ม และคุณลักษณะอันพึง ประสงค์ เครื่องมือวดั ผล 1. แบบสงั เกตพฤติกรรมรายบคุ คล 2. แบบประเมินพฤตกิ รรมการเข้าร่วมกจิ กรรมกลมุ่ (โดยครู) 3. แบบสงั เกตพฤติกรรมการเข้าร่วมกจิ กรรมกลุ่ม (โดยปผู้เรียน) 4. แบบประเมินกจิ กรรมใบงาน 5. แบบประเมนิ ผลการเรยี นรู้ และแบบฝึกปฏบิ ตั ิ 6. แบบประเมินคุณธรรม จริยธรรม ค่านิยม และคุณลักษณะอันพงึ ประสงค์ โดยครแู ละ ผู้เรยี นรว่ มกนั ประเมนิ เกณฑก์ ารประเมนิ ผล 1. เกณฑ์ผา่ นการสงั เกตพฤติกรรมรายบุคคล ต้องไมม่ ชี อ่ งปรบั ปรงุ 2. เกณฑผ์ ่านการประเมินพฤติกรรมการเข้ารว่ มกิจกรรมกลุ่ม คอื ปานกลาง (50 % ขนึ้ ไป) 3. เกณฑ์ผ่านการสงั เกตพฤติกรรมการเขา้ ร่วมกิจกรรมกลุ่ม คือ ปานกลาง (50% ขึน้ ไป) 4. กิจกรรมใบงาน เกณฑ์ผ่าน คือ 50% 5. แบบประเมนิ ผลการเรียนรู้ และแบบฝกึ ปฏิบัติมเี กณฑผ์ ่าน 50% 6 แบบประเมินคุณธรรม จรยิ ธรรม ค่านยิ ม และคุณลักษณะอันพึงประสงค์ คะแนน ขึ้นอย่กู ับการประเมินตามสภาพจริง กิจกรรมเสนอแนะ 1.ฝกึ ปฏบิ ตั ิเพิ่มเติมเพื่อให้เกิดความชานาญ 2.อา่ นและทบทวนเนอ้ื หา

138 บันทึกหลังการสอน ข้อสรุปหลังการสอน .................................................................................................................. .............................. .................................................................................................................. .............................. .................................................................................................................. .............................. .................................................................................................................. .............................. ............................................................................................ .................................................... .................................................................................................................. .............................. ................................................................................................................................................ ................................................................................................................. ............................... ................................................................................................................................................ .................................................................................................................. .............................. ปัญหาท่ีพบ .................................................................................................................. .............................. .......................................................................................... ...................................................... .................................................................................................................. .............................. ................................................................................................................................................ ............................................................................................................................. ................... .................................................................................................................. .............................. .................................................................................................................. .............................. .................................................................................................................. .............................. ................................................................................................... ............................................. .................................................................................................................. .............................. แนวทางแก้ปญั หา ................................................................................................................................................ .................................................................................................................. .............................. .................................................................................................................. .............................. .................................................................................................................. .............................. .................................................................................................................. .............................. ............................................................................................. ................................................... ............................................................................................................................. ................... ................................................................................................................................................ .................................................................................................................. .............................. .................................................................................................................. ..............................

139 แผนการจดั การเรยี นรแู้ บบบูรณาการท่ี 13 หน่วยที่ 7 รหสั 2204-2009 การสร้างเว็บไซต์ (2-2-3) สอนครัง้ ที่ 13 (49- ชอื่ หน่วย/เรื่อง การแทรกไฟล์มัลติมเี ดยี และการสร้างการเชื่อมโยง 52) จานวน 4 ช.ม. สาระสาคัญ การสร้างเวบ็ ไซต์ให้มีสีสัน น่าสนใจ น่าติดตาม เป็นเรื่องสาคัญต่อความสาเร็จในการสร้างเว็บไซต์ โปรแกรม Adobe Dreamweaver ได้มีการออกแบบให้ผู้สร้างเว็บไซต์น้ันสามารถแทรกไฟล์ภาพน่ิง ภาพเคล่ือนไหว ตลอดจนเสียง และวิดีโอ เพื่อส่งเสริมให้เว็บไซต์นั้นน่าดู และน่าติดตามมากข้ึน นอกจากนั้นยงั จาเปน็ ต้องมีการเชอื่ มโยงระหวา่ งเว็บเพจทเี่ หมาะสม เพือ่ เช่อื มโยงและรวมเป็นเวบ็ ไซต์ จุดประสงค์การเรยี นรู้ 1. สามารถแทรกภาพนง่ิ ภาพเคลื่อนไหว เสยี ง และวิดีโอลงในเว็บเพจได้ 3. มคี วามรคู้ วามเข้าใจและสามารถสรา้ งการเช่ือมโยงเว็บเพจได้ 4. มีคุณธรรม จริยธรรม และค่านยิ มทีด่ ีในการใช้คอมพวิ เตอร์ 5. มกี ารพฒั นาคณุ ธรรม จริยธรรม คา่ นิยม และคุณลกั ษณะอันพึงประสงคข์ องผ้สู าเร็จการศกึ ษา สานกั งานคณะกรรมการการอาชวี ศึกษา ที่ครสู ามารถสังเกตได้ขณะทาการสอนในเรื่อง 5.1 ความมมี นษุ ยสัมพนั ธ์ 5.2 ความมีวินยั 5.3 ความรับผดิ ชอบ 5.4 ความซ่อื สตั ย์สุจริต 5.5 ความเช่อื ม่ันในตนเอง 5.6 การประหยดั 5.7 ความสนใจใฝร่ ู้ 5.8 การละเว้นสิง่ เสพตดิ และการพนัน 5.9 ความรกั สามัคคี 5.10 ความกตัญญูกตเวที สมรรถนะรายวิชา 1. แสดงความรู้เก่ียวกับกระบวนการ โครงสร้างการทางาน และไวยากรณ์ ของโปรแกรมภาษาในการสร้างเว็บไซต์ 2. ประยกุ ต์ใชโ้ ปรแกรมภาษาหรอื โปรแกรมสาเรจ็ รูปสาหรับสรา้ งเวบ็ ไซต์ และการติดตั้งและอัพโหลด (Upload) เวบ็ ไซต์

140 เนอ้ื หาสาระ 5. การแทรกไฟล์วิดีโอ 6. การสร้างการเชอ่ื มโยง กิจกรรมการเรียนรู้ ข้ันนาเข้าสู่บทเรยี น 1.ครูใชเ้ ทคนคิ การสอนแบบซิปปาโมเดล (CIPPA MODEL) โดยการทบทวนความรเู้ ดิมจาก สัปดาห์ทผ่ี า่ นมา โดยดึงความรเู้ ดิมของผู้เรียนในเรือ่ งทีจ่ ะเรยี น เพ่ือช่วยให้ผ้เู รยี นมีความพรอ้ มในการ เช่อื มโยงความรู้ใหมก่ ับความรเู้ ดิมของตน ผูส้ อนใช้การสนทนาซักถามให้ผเู้ รยี นเล่าประสบการณเ์ ดิม 2.ครูกล่าวว่าในการทาเว็บเพจที่นาเสนอเน้ือหาโดยตอ้ งการมวี ิดีโอเพ่ือประกอบเนื้อหา หรอื เป็น การใชว้ ิดโี อในการอ้างอิงน้ัน สามารถทาได้ โดยทัว่ ไปนยิ มใชว้ ดิ โี อไฟล์ FLV สาหรบั เล่นบนเวบ็ เพจ 3.ผ้เู รียนยกตวั อยา่ งข้อดขี องการมีวิดีโอในเว็บเพจ ขั้นสอน 4.ครใู ช้เทคนิควิธสี อนแบบสาธิต (Demonstration Method) สาธิตการแทรกไฟล์ FLV และให้ ผู้เรียนผฏบิ ัติตามดงั นี้ 1). เลือกบรเิ วณท่ีตอ้ งการแทรกไฟล์ FLV และไปที่ Insert > Media > FLV 2). จะปรากฏหน้าตา่ งขึ้นมา 2.1 คลกิ Browse เพ่ือเลือกไฟล์ 2.2 กาหนดขนาดของภาพเคลื่อนไหวที่ Width และ Height 2.3 คลกิ OK

141 3). เมอ่ื บันทึกและนาไปเปิดในเวบ็ เบราเซอรจ์ ะสามารถคลกิ เพื่อเลน่ ไฟล์ FLV ได้ทันที 5.ครใู ชเ้ ทคนคิ วธิ สี อนแบบบรรยาย (Lecture Method ) ประกอบการอธบิ ายองค์ประกอบของ ลงิ ก์ ซง่ึ จะมอี งค์ประกอบหลักอยูด่ ้วยกัน 2 ส่วนดังนี้ 1). ลงิ ก์ตน้ ทาง คอื จดุ เช่อื มโยงท่ีใช้ในการใหผ้ ใู้ ชค้ ลกิ อาจเปน็ รปู ภาพหรอื ข้อความหรือปุ่ม โดยเมอื่ คลิกแล้วจะเปดิ ลิงก์ปลายทางข้ึนมาทนั ที 2). ลงิ ก์ปลายทาง คอื สิ่งท่ีถกู กาหนดไวใ้ ห้เปดิ ขน้ึ มาใช้งาน เมื่อคลิกลงิ กต์ ้นทาง ไมว่ า่ จะเปน็ เว็บเพจ เวบ็ ไซต์ โปรแกรม อีเมล หรือคาสงั่ อ่นื ๆ 6.ผูเ้ รยี นศกึ ษาข้ันตอนการสร้างการเชือ่ มโยงอยา่ งคร่าวๆจากในคู่มือเรียน ในหัวข้อการสรา้ งลงิ ก์ เชอ่ื มโยงระหวา่ งเว็บเพจ การสรา้ งลิงก์เชอ่ื มโยงกับเว็บไซต์อ่ืน และการทดสอบลิงก์ 7.ครใู ชเ้ ทคนิควิธีสอนแบบสาธติ (Demonstration Method) สาธิตขน้ั ตอนการสร้างการ เช่อื มโยง และให้ผเู้ รียนปฏิบตั ิตามทลี ะขัน้ ตอน 1) การสรา้ งลงิ ก์เชอื่ มโยงระหว่างเว็บเพจ มีข้นั ตอนการสรา้ งดังนี้ 1.1. คลิกบรเิ วณท่ีต้องการใส่ข้อความลิงก์ 1.2. คลกิ พาเนล Insert เลอื ก Common แลว้ เลอื กคาส่ัง Hyperlink

142 1.3. พิมพข์ ้อความท่ตี ้องการใชเ้ ปน็ ขอ้ ความลงิ ก์ จากนั้นคลกิ ปุ่ม (Browse) 1.4. เลือกไฟล์ Html ของเวบ็ เพจ ท่ีตอ้ งการใหล้ งิ ก์เปดิ ไปถึง จากน้ันคลิก OK 1.5. จะได้ข้อความลงิ ก์ท่ีพร้อมใชง้ าน

143 2) การสร้างลงิ ก์เชอ่ื มโยงกับเวบ็ ไซต์อน่ื มีข้นั ตอนดังนี้ 2.1. คลิกเลือกคลุมข้อความหรอื เลอื กรูปภาพทตี่ ้องการสร้างลงิ ก์ 2.2. ไปทแี่ ถบ Properties เลอื กเปน็ แบบ Html แล้วกรอก URL ที่ต้องการเปิดลงใน ชอ่ ง Link 2.3. จะได้ข้อความหรือรูปลิงก์ ทพี่ ร้อมเช่ือมโยงไปยงั เวบ็ ไซตท์ กี่ าหนดไว้ทันที

144 3) การทดสอบลงิ ก์ ,uขัน้ ตอนดังนี้ 3.1. บนั ทึกหน้าเว็บเพจใหเ้ รียบรอ้ ย (File > Save) Explorer 3.2. ไปยงั โฟลเดอร์ท่ีเก็บไฟล์เว็บเพจ จากน้ันคลิกขวาที่ไฟล์ > Open With > Internet 3.3. ทดสอบคลกิ ที่ลิงกว์ า่ ใช้งานได้หรอื ไม่

145 3.4. ในกรณีทใี่ ชไ้ ด้ จะต้องเปิดเว็บออกมาได้ถูกตอ้ งตามทตี่ ้ังค่าไว้ 4) กาหนดรูปแบบการเปิดลงิ ก์ โดยมที ง้ั หมด 5 แบบดังน้ี 4.1. _blank เป็นการกาหนดใหเ้ ปิดเวบ็ เพจเป็นหนา้ ต่างหรือแท็บใหม่ทุกครั้งทคี่ ลิกลิงก์ 4.2. new เปน็ การกาหนดใหเ้ ปดิ เวบ็ เพจเป็นหน้าต่างหรือแทบ็ ใหม่ แตเ่ มอื่ คลิกที่ลงิ ก์ อื่นๆที่กาหนด Target เป็น new เหมือนกัน เวบ็ เพจเหล่านั้นจะโหลดในหน้าเดิมทีเ่ ปิดไว้แลว้ 4.3. _parent เป็นการกาหนด Target สาหรับเวบ็ เพจท่ีออกแบบโครงสร้างด้วย Frameโดยเปน็ การระบุให้เปิดเว็บเพจในเฟรมหลักที่ครอบเฟรมท้ังหมดไว้ 4.4. _self เปน็ การกาหนด Target สาหรบั เว็บเพจที่ออกแบบโครงสร้างด้วย Frame โดยเปน็ การระบุให้เปิดเว็บเพจในเฟรมที่ลิงกน์ ้นั แสดงอยู่ 4.5. _top เปน็ การกาหนด Target สาหรับเวบ็ เพจทอ่ี อกแบบโครงสรา้ งดว้ ย Frame โดยยกเลิกโครงสรา้ งเฟรมท้ังหมดออกไป 5) การกาหนดสสี นั ให้ขอ้ ความลงิ ก์ มีข้นั ตอนดงั น้ี 5.1. คลกิ ปุม่ Page Properties บนพาเนล Properties

146 5.2. คลิกเลือกที่ Links (CSS) และกาหนดค่าต่างๆ ดงั น้ี 5.3. ขอ้ ความลงิ ก์ทง้ั หมดจะมีสีสนั สวยงามตามที่กาหนด 8.ผเู้ รยี นสรา้ งเว็บไซต์ตามโครงสร้างทีค่ รูกาหนดให้ดังนี้ โครงสร้างที่ 1

147 หน้า index.html 1. กาหนดใหแ้ สดงชอ่ื และรูปภาพนกั แสดงที่นกั เรียนช่ืนชอบ จานวน ๒ คน 2. สรา้ งการเชอื่ มโยงจากรูปภาพนักแสดงไปยังหน้าต่างๆ ใหถ้ ูกต้อง 3. ตกแต่งเว็บเพจใหส้ วยงาม หน้า h1.html, h2.html 1. กาหนดใหแ้ สดงชือ่ และรปู ภาพนักแสดงให้ถูกต้อง 2. สรา้ งการเชอ่ื มโยงให้ทุกๆ หน้า เชื่อมโยงไปหนา้ ต่างๆ ได้ครบถ้วน 3. ตกแตง่ เว็บเพจให้สวยงาม โครงสรา้ งที่ 2 หนา้ home.html 1. กาหนดให้แสดงชอื่ เพลงและรูปภาพนกั ร้องทน่ี ักเรียนช่ืนชอบ จานวน ๓ เพลง 2. สร้างการเชอ่ื มโยงจากชื่อเพลงไปยงั หนา้ ตา่ งๆ ให้ถูกต้อง 3. ตกแตง่ เวบ็ เพจใหส้ วยงาม หน้า p1.html, p2.html, p3.html 1. กาหนดให้แสดงชือ่ เพลง รูปภาพนักรอ้ งและเสียงเพลงใหถ้ กู ต้อง 2. สรา้ งการเช่อื มโยงให้ทุกๆ หนา้ เช่ือมโยงไปหนา้ ตา่ งๆ ได้ครบถว้ น 3. ตกแต่งเวบ็ เพจให้สวยงาม 9.ครแู นะนาให้ผ้เู รยี นเขยี นโปรแกรมด้วยความละเอียดรอบคอบ มีความเพียรพยายามในการนา ความรูไ้ ปใชใ้ หป้ ระสบความสาเรจ็ และมีความระมดั ระวงั ข้อผดิ พลาดที่อาจจะเกดิ ขนึ้ ไดใ้ นระหวา่ งการ ทางาน หรือหลงั จากปฏบิ ตั หิ น้าท่ดี ้วยความรับผิดชอบ ซึง่ เป็นการสรา้ งภูมคิ ุ้มกันที่ดีในตัวเองตาม แนวทางปรัชญาเศรษฐกิจพอเพยี ง ดังนัน้ ปรัชญาเศรษฐกิจพอเพยี ง จึงเปน็ หลกั การดาเนนิ ชีวิต การ ทางาน การบรหิ าร การพฒั นา รวมถงึ การดาเนินกิจกรรมในดา้ นตา่ งๆ ของมนุษย์ ท่เี นน้ แนวทางสาย กลางยึดหลกั ความพอประมาณ ความมเี หตผุ ล และมีภมู ิคุ้มกนั ท่ีดี ภายใตเ้ ง่ือนไขความรอบรู้ รอบคอบ ระมัดระวัง และเงื่อนไขคุณธรรม ความซือ่ สตั ย์สจุ รติ ความเพยี ร ขยันอดทน และการแบง่ ปัน

148 ขั้นสรปุ และการประยกุ ต์ 10.ครูและผเู้ รยี นสรปุ เน้อื หาทเี่ รยี น 11.ผเู้ รยี นทาแบบประเมนิ ผลหลังเรยี น ส่อื และแหล่งการเรยี นรู้ 1.หนงั สอื เรียน วชิ าการสรา้ งเว็บไซต์ ของสานกั พมิ พ์เอมพันธ์ 2.รูปภาพ 3.กจิ กรรมการเรียนการสอน 4.แผน่ ใส 5.สอื่ PowerPoint หลกั ฐาน 1.บนั ทึกการสอน 2.ใบเช็ครายช่อื 3.แผนจัดการเรียนรู้ 4.การตรวจประเมินผลงาน การวดั ผลและการประเมินผล วิธวี ัดผล 1. สงั เกตพฤตกิ รรมรายบุคคล 2. ประเมินพฤติกรรมการเขา้ รว่ มกจิ กรรมกลุ่ม 3. สังเกตพฤตกิ รรมการเข้าร่วมกิจกรรมกลมุ่ 4. ตรวจใบงาน 5. ตรวจแบบประเมนิ ผลการเรยี นรู้ และแบบฝึกปฏบิ ตั ิ 6. การสงั เกตและประเมนิ พฤติกรรมด้านคุณธรรม จริยธรรม ค่านิยม และคุณลักษณะอันพงึ ประสงค์ เครอื่ งมอื วดั ผล 1. แบบสงั เกตพฤติกรรมรายบุคคล 2. แบบประเมินพฤตกิ รรมการเข้ารว่ มกิจกรรมกลุ่ม (โดยครู) 3. แบบสงั เกตพฤติกรรมการเขา้ รว่ มกจิ กรรมกลุ่ม (โดยผู้เรยี น) 4. แบบประเมินกิจกรรมใบงาน 5. แบบประเมนิ ผลการเรียนรู้ และแบบฝึกปฏิบตั ิ 6. แบบประเมินคุณธรรม จรยิ ธรรม คา่ นิยม และคุณลักษณะอันพงึ ประสงค์ โดยครูและ ผู้เรียนรว่ มกนั ประเมิน

149 เกณฑก์ ารประเมินผล 1. เกณฑผ์ ่านการสงั เกตพฤตกิ รรมรายบุคคล ต้องไม่มชี ่องปรับปรงุ 2. เกณฑ์ผ่านการประเมนิ พฤติกรรมการเข้ารว่ มกิจกรรมกล่มุ คอื ปานกลาง (50 % ขึ้นไป) 3. เกณฑผ์ ่านการสงั เกตพฤตกิ รรมการเขา้ ร่วมกิจกรรมกลุ่ม คือ ปานกลาง (50% ข้นึ ไป) 4. กิจกรรมใบงาน เกณฑผ์ า่ น คือ 50% 5. แบบประเมินผลการเรียนรู้ และแบบฝกึ ปฏิบัติมเี กณฑ์ผา่ น 50% 6 แบบประเมินคุณธรรม จริยธรรม คา่ นิยม และคุณลักษณะอันพงึ ประสงค์ คะแนน ข้นึ อยู่กับการประเมนิ ตามสภาพจริง กิจกรรมเสนอแนะ 1.ทากจิ กรรม แบบฝึกปฏบิ ตั ิ เพือ่ นาไปใช้ได้จริง 2.อ่านและทบทวนเนือ้ หา