การวิเคราะห์และออกแบบโครงสร้างเว็บไซต์

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

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

เนื้อหาสาระการสอน/การเรียนรู้• ด้านความรู้(ทฤษฎ)ี ความสําคญั ของการวเิ คราะห์และออกแบบโครงสร้างเวบ็ ไซต์ (จุดประสงค์เชิงพฤติกรรมข้อที่ 1) การวเิ คราะห์และออกแบบโครงสร้างเวบ็ ไซตน์ ้นั มีความสาํ คญั ในการพฒั นาระบบเวบ็ ไซตเ์ ป็ นอยา่ งมาก เนื่องจากในการพฒั นาระบบใด ๆ ก็ตาม จะตอ้ งมีการวางแผนงานระบบ การศึกษาขอ้ มูล การ ศึกษาความ เป็นไปไดข้ องระบบ วา่ การพฒั นาระบบน้นั ๆ มีความเป็นไปไดม้ ากนอ้ ยเพียงใด มีความคุม้ ค่ากบั ระบบท่ีจะ พฒั นาข้ึนมาใหมห่ รือไม่หรือพฒั นาข้ึนมาเพื่อทดแทนระบบเดิมหรือไม่ มีความตรงกบั ความตอ้ งการของผูใ้ ช้ ตรงกบั วตั ถุประสงคห์ รือความตอ้ งการของหน่วยงานของระบบท่ีจะพฒั นามากนอ้ ยเพยี งใด ลกั ษณะโครงสร้างของเวบ็ ไซต์(จุดประสงค์เชิงพฤติกรรมข้อท่ี 2) ในการออกแบบเวบ็ ไซตท์ ่ีดีควรจะตอ้ งวางโครงสร้างให้มีความสมดุลมีการออกแบบโครงสร้างเน้ือหาโดยตอ้ งวางแผนโครงสร้างให้ดี มีการเชื่อมต่อสัมพนั ธ์กนั ระหวา่ งรายการ )Menu)หรือโฮมเพจ)Home Page)กบั หนา้ เน้ือหาอื่นๆ รวมถึงการเช่ือมโยงไปสู่ภาพส่ือมลั ติมีเดียและขอ้ ความต่างๆ ไดอ้ ยา่ งเหมาะสม เพ่ือป้องกนัไม่ให้ผูใ้ ช้งานระบบหลงทางในขณะ เขา้ สู่เน้ือหาต่างๆ ในเวบ็ ไซต์ จากหลกั การน้ีแสดงว่าโครงสร้างของเวบ็ ไซตเ์ ป็นส่วนท่ีควรใหค้ วามสาํ คญั โครงสร้างที่ดีจะช่วยส่งผลดีต่อผใู้ ชง้ านระบบ เพราะขอ้ มูลท่ีมีอยมู่ ากมายน้นั ตอ้ งอาศยั การเชื่อมโยงเน้ือหา หรือการจดั ระเบียบของเน้ือหาใหก้ บั การสืบคน้ ภายในเวบ็ ไซต์ การจดั ระเบียบท่ีดี จะช่วยให้ผูใ้ ช้มีความสะดวก รวดเร็วในการเขา้ ถึงเน้ือหา ในขณะเดียวกนั โครงสร้างท่ีไม่ เหมาะสมก็ย่อมส่งผลเสียตอ่ ผใู้ ชเ้ ช่นกนั ในท่ีน้ี จะขอนาํ เสนอรูปแบบโครงสร้างของเวบ็ ไซตต์ ามแนวคิดของ Lynch and Hortonดงั น้ี .1โครงสร้างของเวบ็ ไซตแ์ บบเรียงตามลาํ ดบั )Sequential Structure) .2โครงสร้างของเวบ็ ไซตแ์ บบลาํ ดบั ข้นั )Hierarchical Structure) 3.โครงสร้างของเวบ็ ไซตแ์ บบตาราง )Grid Structure) .4โครงสร้างเวบ็ ไซตแ์ บบใยแมงมุม )Web Structure) ข้นั ตอนในการพฒั นาเวบ็ ไซต์(จุดประสงค์เชิงพฤติกรรมข้อท่ี 3) ในการพฒั นาเวบ็ ไซตน์ ้นั จะตอ้ งมีการออกแบบแต่ละเพจเพือ่ ใหผ้ พู้ ฒั นาประหยดั เวลาในการพฒั นาระบบเพราะทาํ ใหไ้ ดม้ องเห็นภาพและองคป์ ระกอบของระบบน้นั ไดอ้ ยา่ งครบถว้ นตามความตอ้ งการของผใู้ ชง้ านหลงั จากที่ไดม้ ีการออกแบบระบบสมบูรณ์แลว้ ผพู้ ฒั นาระบบจาํ เป็นตอ้ งศึกษาข้นั ตอนในการพฒั นาระบบเวบ็ ไซตต์ ามข้นั ตอนต่อไปน้ี ข้นั ตอนที่ 1การกาํ หนดโครงสร้างของเวบ็ ไซต์ ข้นั ตอนท่ี 2 กาํ หนดการเชื่อมโยงระหวา่ งเวบ็ เพจ

ข้นั ตอนท่ี 3 การออกแบบเวบ็ เพจแต่ละหนา้ ข้นั ตอนที่ 4 การสร้างเวบ็ เพจแตล่ ะหนา้ ข้นั ตอนที่ 5 การลงทะเบียนขอพ้ืนท่ีเวบ็ ไซต์ ข้นั ตอนที่ 6 การอพั โหลดเวบ็ ไซต์ ภาษา C++ จะมีรูปแบบการเขียนท้งั แบบฟังกช์ นั และแบบเชิงวตั ถุ จากตวั อยา่ งโปรแกรม 2.1 จะมีฟังก์ชนั main ( ) โดยทุกโปรแกรมจะตอ้ งมี เป็ นฟังก์ชนั หลกั ซ่ึงระบบจะเร่ิมตน้ ทาํ งานท่ีฟังกช์ นั main ( ) ซ่ึงฟังก์ชนั main ( ) ไปเรียกใชฟ้ ังก์ชนั อ่ืน ๆ ภายในโปรแกรมโดยแต่ละฟังก์ชนั เมื่อเราสร้างข้ึนมาใชง้ าน จะประกอบดว้ ย 2 ส่วน คือ หวั ฟังกช์ นั ประกอบดว้ ย ชื่อฟังกช์ นั , คา่ ท่ีรับเขา้ และชนิดขอ้ มูล ตวั ฟังก์ชนั เป็ นส่วนประกอบที่ประกอบไปด้วยตวั แปร และคาํ สั่งในการทาํ งาน โดยจะครอบดว้ ยสัญลกั ษณ์วงเล็บปี กกา และกาํ หนดใหส้ ่งค่าคืนกลบั ดว้ ยคียเ์ วริ ์ด return หลกั การจัดเตรียมข้อมูลและจัดเกบ็ ไฟล์(จุดประสงค์เชิงพฤติกรรมข้อท่ี 4 ) การจดั เตรียมเน้ือหาสาํ หรับแสดงผลบนหนา้ เวบ็ ไซต์ ถือเป็ นจุดเร่ิมตน้ และเป็ นหวั ใจสาํ คญั ในการสร้างเวบ็ ไซต์ เนื่องจากส่วนของเน้ือหาเป็ นส่วนที่ทาํ ให้ผูใ้ ช้งานทราบถึงจุดประสงค์ในการพฒั นาระบบเว็บไซต์ตอ้ งการนาํ เสนอสินคา้ บริการ หรือขอ้ มูลดา้ นใดเป็ นสาํ คญั เป็ นการสร้างความเขา้ ใจต่อผูช้ มเวบ็ ไซต์ และอยากที่จะกลบั เขา้ มาเยยี่ มชมเวบ็ ไซตบ์ อ่ ย ๆ โดยมีข้นั ตอนการเตรียมขอ้ มูล ดงั น้ี 1.การจดั เตรียมขอ้ มูลส่วนของเน้ือหา 2.การจดั เกบ็ ไฟลข์ อ้ มูลหลกั การเลือกสีท่ีเหมาะสมกับงานพฒั นาเวบ็ ไซต์(จุดประสงค์เชิงพฤติกรรมข้อท่ี 5 ) สีน้นั มีความสําคญั อยา่ งย่ิงในการออกแบบและพฒั นาระบบเวบ็ ไซต์ การเลือกสีให้เขา้ กบั เน้ือหาของเวบ็ ไซต์ จะทาํ ให้เวบ็ ไซตม์ ีความน่าเชื่อถือย่ิงข้ึน และยงั ส่งผลอย่างมากกบั ความสวยงามความเป็ นเอกลกั ษณ์ใหก้ บั เวบ็ ไซตห์ รือองคก์ รได้ จึงมีความจาํ เป็ นตอ้ งศึกษาเก่ียวกบั ทฤษฎีสี เพื่อให้สามารถออกแบบและเลือกใชส้ ีได้อย่างเหมาะสมดงั รูปวงล้อความสัมพนั ธ์ของสีท่ีบรรจุสีท่ีนิยมใช้ในเว็บไซต์ไวจ้ าํ นวนท้งั หมด สี 20 โดยผอู้ อกแบบสามารถใชค้ วามสัมพนั ธ์ของวงลอ้ ขอสีน้ีใหเ้ กิดประโยชน์ไดอ้ ยา่ งมากมาย เช่นตอ้ งการออกแบบใหเ้ วบ็ ไซตท์ ่ีใหค้ วามรู้สึกตดั กนั โดยสิ้นเชิงอาจใชช้ ุดสี องศา เช่น 90 สีท่ีทาํ มุมกนั 4ถา้ เลือกชุดสี 1 , 6 , 11 , สีที่ไดจ้ ะตดั กนั ชดั เจน ถา้ ตอ้ งการใหเ้ วบ็ ไซตด์ ูกลมกลืนก็อาจเลือกชุดสีใกลเ้ คียงกนั ก็ไดเ้ ช่น 16เลือกชุดสีเขียวเบอร์5, 6, 7,8 ก็จะไดส้ ีในโทนสีเหลืองสวา่ ง เป็นตน้ ไฟลร์ ูปภาพท่ีใชอ้ ยใู่ นปัจจุบนั น้ีมีหลายประเภท(จุดประสงค์เชิงพฤติกรรมข้อที่ 6 ) แต่ไฟลร์ ูปภาพที่นิยมใชก้ บั การพฒั นาเวบ็ เพจมี 3 ประเภทคือ

1)ไฟลป์ ระเภท GIF (Graphics Interchange Format)2)ไฟลป์ ระเภท JPEG หรือ JPG (Joint Photographic Expert Group)3)ไฟลป์ ระเภท PNG (Portable Network Graphic)• ด้านทกั ษะ(ปฏบิ ัต)ิ (จดุ ประสงค์เชิงพฤติกรรมข้อที่ 7) 1. แบบฝึกหดั ทา้ ยบทที่ 2 2. กิจกรรมการเรียนรู้• ด้านคุณธรรม/จริยธรรม/จรรยาบรรณ/บูรณาการเศรษฐกจิ พอเพยี ง (จุดประสงค์เชิงพฤติกรรมข้อท8ี่ -9) 8. การเตรียมความพร้อมด้านการเตรียม วสั ดุ อุปกรณ์นักศึกษาจะต้องทาํ ความสะอาดห้องเรียน มีการจดั เตรียมสถานท่ี ส่ือ วสั ดุ อุปกรณ์ไวอ้ ยา่ งพร้อมเพรียง (ด้านคุณธรรม จริยธรรม/บรู ณาการเศรษฐกิจพอเพยี ง) 9. ความมีเหตุมีผลในการปฏิบตั ิงาน ตามหลกั ปรัชญาของเศรษฐกิจพอเพียงนกั ศึกษาจะตอ้ งมีการใช้ ความรู้ทกั ษะวชิ าชีพนาํ ไปประยกุ ตใ์ ช้ อยา่ งคุม้ ค่าและประหยดั (ด้านคุณธรรม จริยธรรม/บูรณาการเศรษฐกิจพอเพยี ง) กจิ กรรมการเรียนการสอนหรือการเรียนรู้ข้นั ตอนการสอนหรือกจิ กรรมของครู ข้นั ตอนการเรียนรู้หรือกจิ กรรมของนักเรียน1. ข้ันนําเข้าสู่บทเรียน (15 นาท)ี 1. ข้ันนําเข้าสู่บทเรียน(15 นาท)ี1. ผูส้ อนจดั เตรียมเอกสาร พร้อมกบั แนะนาํ 1. ผเู้ รียนเตรียมอุปกรณ์และ ฟังครูผสู้ อนแนะนาํรายวิชา วธิ ีการให้คะแนนและวธิ ีการเรียน เรื่องการ รายวิชา วิธีการให้คะแนนและวิธีการเรียนเร่ือง การวเิ คราะห์และออกแบบโครงสร้างเวบ็ ไซต์ วเิ คราะห์และออกแบบโครงสร้างเวบ็ ไซต์2. ผสู้ อนแจง้ จุดประสงคก์ ารเรียนของหน่วย 2. ผูเ้ รียนทาํ ความเขา้ ใจเกี่ยวกบั จุดประสงค์การเรียนท่ี 2และขอให้ผูเ้ รียนร่วมกันทาํ กิจกรรมการ เรียนของหน่วยเรียนท่ี 2และการให้ความร่วมมือใน การทาํ กิจกรรมเรียนการสอน 3. ผูเ้ รียนแสดงความรู้ว่า การวิเคราะห์และ3. ผูส้ อนให้ผูเ้ รียนแสดงความรู้ โดยต้งัคําถามว่า การวิเคราะห์และออกแบบโครงสร้าง ออกแบบโครงสร้างเวบ็ ไซต์ คืออะไร พร้อมใหเ้ หตุผลเวบ็ ไซต์ คืออะไร พร้อมใหเ้ หตุผลประกอบ ประกอบ

2. ข้ันให้ความรู้ (75 นาท)ี 2. ข้ันให้ความรู้(75 นาท)ี1. ผูส้ อนทดสอบความรู้ความเข้าใจเกี่ยวกับ 1. ผูเ้ รียนตอบคาํ ถามจากผูส้ อน เพื่อแสดงความรู้การวิเคราะห์และออกแบบโครงสร้างเว็บไซต์โดย และความเข้าใจก่อนการเรี ยน การวิเคราะห์และการถาม – ตอบ ออกแบบโครงสร้างเวบ็ ไซต์2. ผูส้ อนอธิบายเน้ือหาเก่ียวกับบทเรียนวิชา 2. ผูเ้ รียนศึกษาบทเรียนวิชาการสร้างเว็บไซต์การสร้างเวบ็ ไซต์ หน่วยที่ 2 เร่ือง การวิเคราะห์และ หน่วยที่ 2 เรื่อง การวเิ คราะห์และออกแบบโครงสร้างออกแบบโครงสร้างเว็บไซต์ และให้ผูเ้ รียนศึกษา เวบ็ ไซตแ์ ละศึกษาเอกสารประกอบการสอน หน่วยที่ 2เอกสารประกอบการสอน หน่วยที่ 2 3. ผูเ้ รียนอธิบายและยกตวั อย่างถึง โครงสร้าง3. ผู้สอนและผู้เรี ยนร่ วมกันอธิบายพร้อม ภาษา C++ตามที่ไดศ้ ึกษาจากบทเรียนคอมพิวเตอร์ช่วยยกตวั อย่างถึงการวิเคราะห์และออกแบบโครงสร้าง สอนเวบ็ ไซตต์ ามที่ไดศ้ ึกษาจากบทเรียนคอมพิวเตอร์ช่วยสอน 3. ข้ันประยกุ ต์ใช้ (75 นาท)ี3. ข้ันประยุกต์ใช้ (75 นาท)ี 1. ผเู้ รียนทาํ แบบฝึกหดั ทา้ ยบทที่ 21. ผสู้ อนใหผ้ เู้ รียนทาํ แบบฝึกหดั ทา้ ยบทท่ี 2 กจิ กรรมการเรียนการสอนหรือการเรียนรู้ข้นั ตอนการสอนหรือกจิ กรรมของครู ข้นั ตอนการเรียนรู้หรือกจิ กรรมของนักเรียน1. ผู้สอนให้ผู้เรี ยนแบ่งกลุ่ม ๆ ละเท่า ๆ กัน 2. ผเู้ รียนแบง่ กลุ่ม ๆ ละเท่า ๆ กนั ทาํ การศึกษาทาํ การศึกษาเรื่องการวเิ คราะห์และออกแบบโครงสร้าง เร่ืองการวิเคราะห์และออกแบบโครงสร้างเวบ็ ไซต์ แลว้เวบ็ ไซต์ ปฏิบตั ิตาม4. ข้ันสรุปและประเมินผล(75 นาท)ี 4. ข้ันสรุปและประเมินผล (75 นาท)ี1. ผูส้ อนและผูเ้ รียนร่วมกนั สรุปเน้ือหาท่ีได้ 1. ผสู้ อนและผเู้ รียนร่วมกนั สรุปเน้ือหาท่ีไดเ้ รียนเรียนใหม้ ีความเขา้ ใจในทิศทางเดียวกนั เพอ่ื ใหม้ ีความเขา้ ใจในทิศทางเดียวกนั2. ผสู้ อนใหผ้ ูเ้ รียนศึกษาเพิ่มเติมนอกห้องเรียน 2. ผูเ้ รียนศึกษาเพิ่มเติมนอกห้องเรียน ด้วยดว้ ยบทเรียนคอมพวิ เตอร์ช่วยสอนที่จดั ทาํ ข้ึน บทเรียนคอมพิวเตอร์ช่วยสอนที่จดั ทาํ ข้ึน(บรรลจุ ุดประสงค์เชิงพฤติกรรมข้อที่ 1-8) (บรรลจุ ุดประสงค์เชิงพฤติกรรมข้อที่ 1-8) (รวม 240นาที หรือ 4 คาบเรียน)

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

สมรรถนะทพี่ งึ ประสงค์ ผเู้ รียนสร้างความเขา้ ใจเก่ียวกบั การวเิ คราะห์และออกแบบโครงสร้างเวบ็ ไซต์ 1. วเิ คราะห์และตีความหมาย 2. ต้งั คาํ ถาม 3. อภิปรายแสดงความคิดเห็นระดมสมอง 4. การประยกุ ตค์ วามรู้สู่งานอาชีพสมรรถนะการสร้างค่านิยม การปลูกฝังใหม้ ีความรับผดิ ชอบ มีความคิดริเร่ิมสร้างสรรค์ และมีความซ่ือสตั ยใ์ นอาชีพของตนสมรรถนะการปฏบิ ัตงิ านอาชีพ 1. นาํ ความรู้เกี่ยวกบั การวเิ คราะห์และออกแบบโครงสร้างเวบ็ ไซตไ์ ปประยกุ ตใ์ ชใ้ นการดาํ เนิน ชีวติ ประจาํ วนัสมรรถนะการขยายผล ความสอดคล้อง การวิเคราะห์และออกแบบโครงสร้างเวบ็ ไซต์ทาํ ให้ผูเ้ รียนมีความรู้เพ่ิมข้ึน เม่ือผเู้ รียนไดเ้ รียนรู้ทาํ ให้มีความรู้ในเร่ืองการสร้างเวบ็ ไซตม์ ากข้ึน

ส่ือการเรียนการสอน/การเรียนรู้สื่อส่ิงพมิ พ์ 1. เอกสารประกอบการสอนวิชา การสร้างเว็บไซต์ (ใช้ประกอบการเรียนการสอนจุดประสงค์เชิงพฤติกรรมขอ้ ท่ี 1-8)2. ใบความรู้และใบงานสื่อโสตทศั น์ (ถ้าม)ี 1. บทเรียนคอมพิวเตอร์ช่วยสอน เร่ืองการวเิ คราะห์และออกแบบโครงสร้างเวบ็ ไซต์สื่อของจริง เวบ็ ไซตว์ ทิ ยาลยั ฯแหล่งการเรียนรู้ในสถานศึกษา 1. หอ้ งสมุดวทิ ยาลยั 2. หอ้ งปฏิบตั ิการคอมพวิ เตอร์ ศึกษาหาขอ้ มูลทางอินเทอร์เน็ต นอกสถานศึกษาผปู้ ระกอบการ สถานประกอบการ ในทอ้ งถ่ินการบูรณาการ/ความสัมพนั ธ์กบั วชิ าอื่น1. บูรณาการกบั วิชาชีวิตและวฒั นธรรมไทย ดา้ นการพูด การอ่าน การเขียนและการฝึ กปฏิบตั ิตนทางสังคมดา้ นการเตรียมความพร้อม ความรับผดิ ชอบ และความสนใจใฝ่ รู้2. บูรณาการกบั วชิ าภาษาองั กฤษ การใชค้ าํ ศพั ท์ ความหมาย การสืบคน้ ขอ้ มูล3. บูรณาการกบั วชิ ากีฬาเพือ่ พฒั นาสุขภาพและบุคลิกภาพ ดา้ นบุคลิกภาพในการนาํ เสนอหนา้ ช้นั เรียน

การประเมินผลการเรียนรู้ • หลกั การประเมินผลการเรียนรู้ ก่อนเรียน 1. ตรวจแบบทดสอบก่อนเรียนขณะเรียน 1. สังเกตการทาํ งานกลุ่มหลงั เรียน 1. ตรวจแบบฝึกหดั ทา้ ยบท 2. สรุปผลการรายงานหนา้ ช้นั เรียนผลงาน/ชิน้ งาน/ผลสําเร็จของผ้เู รียนตรวจผลงาน กิจกรรม- กิจกรรม “วเิ คราะห์และออกแบบโครงสร้างเวบ็ ไซตก์ ารขายสินคา้ คอมพวิ เตอร์ ”- รายงาน เรื่อง การวเิ คราะห์และออกแบบโครงสร้างเวบ็ ไซต์รายละเอยี ดการประเมินผลการเรียนรู้• จุดประสงคเ์ ชิงพฤติกรรม ขอ้ ท่ี 1 อธิบายความสําคัญของการวิเคราะห์และออกแบบโครงสร้างเวบ็ ไซตไ์ ด้1. วธิ ีการประเมิน : ทดสอบ2. เคร่ืองมือ : แบบทดสอบ3. เกณฑก์ ารใหค้ ะแนน: อธิบายความสาํ คญั ของการวเิ คราะห์และออกแบบโครงสร้างเวบ็ ไซตไ์ ด้ จะได้ 1 คะแนน• จุดประสงคเ์ ชิงพฤติกรรม ขอ้ ที่ 2 บอกลกั ษณะโครงสร้างของเวบ็ ไซต์1. วธิ ีการประเมิน : ทดสอบ

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

เกณฑก์ ารใหค้ ะแนน : การเตรียมความพร้อมดา้ นการเตรียม วสั ดุ อุปกรณ์นกั ศึกษาจะตอ้ งทาํ ความสะอาดหอ้ งเรียน มีการจดั เตรียมสถานที่ ส่ือ วสั ดุ อุปกรณ์ไวอ้ ยา่ งพร้อมเพรียง จะได้ 2 คะแนน แบบฝึ กหดั หน่วยที่ 2 การวเิ คราะห์และออกแบบโครงสร้างเวบ็ ไซต์จงตอบคาํ ถามต่อไปน้ีใหม้ ีใจความสมบูรณ์1.จงอธิบายถึงความสาํ คญั ในการวเิ คราะห์และออกแบบโครงสร้างเวบ็ ไซต์……………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………2. จงบอกลกั ษณะโครงสร้างของเวบ็ ไซตว์ า่ มีอะไรบา้ ง………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………3. จงบอกข้นั ตอนในการพฒั นาเวบ็ ไซต์………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………4. จงบอกส่วนประกอบหลกั ในการออกแบบหนา้ เวบ็ เพจ………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………5. การจดั เตรียมขอ้ มูลส่วนของเน้ือหาตอ้ งคาํ นึงถึงขอ้ มูลประเภทใดบา้ ง………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………

6. ไฟลข์ อ้ มูลรูปภาพแบบใดบา้ งท่ีนิยมนาํ มาใชใ้ นงานพฒั นาระบบเวบ็ ไซต์………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………7. จงอธิบายความแตกตา่ งระหวา่ งไฟลข์ อ้ มูลประเภท GIF และ JPEG……………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………8. ไฟลร์ ูปภาพประเภท PNG มีคุณสมบตั ิอยา่ งไร………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………9. การเลือกสีท่ีเหมาะสมกบั งานมีผลตอ่ การพฒั นาระบบเวบ็ ไซตอ์ ยา่ งไร………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………10. จงอธิบายถึงความรู้สึกที่แตกตา่ งระหวา่ งชุดสีขาวกบั ชุดสีแดง……………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………

แบบประเมินผลการนําเสนอผลงานชื่อกลุ่ม……………………………………………ช้นั ………………………หอ้ ง...........................รายช่ือสมาชิก 1……………………………………เลขที่……. 2……………………………………เลขที่……. 3……………………………………เลขที่……. 4……………………………………เลขท่ี…….ที่ รายการประเมิน คะแนน ขอ้ คดิ เห็น 32 11 เน้ือหาสาระครอบคลุมชัดเจน (ความรู้เกี่ยวกบั เน้ือหา ความถูกตอ้ ง ปฏิภาณในการตอบ และการแกไ้ ขปัญหาเฉพาะหนา้ )2 รูปแบบการนาํ เสนอ3 การมีส่วนร่วมของสมาชิกในกลุ่ม4 บุคลิกลกั ษณะ กิริยา ท่าทางในการพูด น้าํ เสียง ซ่ึงทาํ ให้ผูฟ้ ังมีความ สนใจรวม ผปู้ ระเมิน…………………………………………………เกณฑ์ การให้ คะแนน1. เน้ือหาสาระครอบคลุมชดั เจนถูกตอ้ ง 3 คะแนน = มสี าระสาํ คญั ครบถว้ นถูกตอ้ ง ตรงตามจุดประสงค์ 2 คะแนน = สาระสาํ คญั ไมค่ รบถว้ น แต่ตรงตามจุดประสงค์ 1 คะแนน= สาระสาํ คญั ไม่ถูกตอ้ ง ไมต่ รงตามจุดประสงค์2. รูปแบบการนาํ เสนอ 3 คะแนน = มรี ูปแบบการนาํ เสนอท่ีเหมาะสม มีการใชเ้ ทคนิคท่ีแปลกใหม่ ใชส้ ื่อและเทคโนโลยี ประกอบการ นาํ เสนอท่ีน่าสนใจ นาํ วสั ดุในทอ้ งถ่ินมาประยกุ ตใ์ ชอ้ ยา่ งคุม้ ค่าและประหยดั คะแนน = มีเทคนิคการนาํ เสนอที่แปลกใหม่ ใชส้ ื่อและเทคโนโลยปี ระกอบการนาํ เสนอท่ีน่าสน ใจ แต่ขาด การประยกุ ตใ์ ช้ วสั ดุในทอ้ งถ่ิน1 คะแนน= เทคนิคการนาํ เสนอไม่เหมาะสม และไม่น่าสนใจ3. การมีส่วนร่วมของสมาชิกในกลุ่ม 3 คะแนน= สมาชิกทุกคนมบี ทบาทและมสี ่วนร่วมกิจกรรมกลุ่ม 2 คะแนน = สมาชิกส่วนใหญม่ บี ทบาทและมสี ่วนร่วมกิจกรรมกลุ่ม 1 คะแนน = สมาชิกส่วนนอ้ ยมบี ทบาทและมสี ่วนร่วมกิจกรรมกลุ่ม4. ความสนใจของผฟู้ ัง 3 คะแนน = ผฟู้ ังมากกวา่ ร้อยละ 90 สนใจ และใหค้ วามร่วมมือ 2 คะแนน= ผฟู้ ังร้อยละ 70-90 สนใจ และใหค้ วามร่วมมือ 1 คะแนน= ผฟู้ ังนอ้ ยกวา่ ร้อยละ 70 สนใจ และใหค้ วามร่วมมอื

บันทกึ หลงั การสอน หน่วยที่ 2 การวเิ คราะห์และออกแบบโครงสร้างเวบ็ ไซต์ผลการใช้แผนการเรียนรู้ 1. เน้ือหาสอดคลอ้ งกบั จุดประสงคเ์ ชิงพฤติกรรม 2. สามารถนาํ ไปใชป้ ฏิบตั ิการสอนไดค้ รบตามกระบวนการเรียนการสอน 3. ระยะเวลาท่ีจดั ไวม้ ีความเหมาะสมกบั การเรียนรู้ผลการเรียนของนักเรียน 1. นกั ศึกษาส่วนใหญ่มีความสนใจใฝ่ รู้ เขา้ ใจในบทเรียน อภิปรายตอบคาํ ถามในกลุ่ม และร่วมกนั ปฏิบตั ิใบงานที่ไดร้ ับมอบหมาย 2. นกั ศึกษากระตือรือร้นและรับผดิ ชอบในการทาํ งานกลุ่มเพอื่ ใหง้ านสาํ เร็จทนั เวลาท่ีกาํ หนด 3. นกั ศึกษาเลือกสามารถนาํ ความรู้ไปใชไ้ ดจ้ ริงในชีวติ ประจาํ วนัผลการสอนของครู 1. สอนเน้ือหาไดค้ รบตามหลกั สูตร 2. แผนการสอนและวธิ ีการสอนครอบคลุมเน้ือหาการสอนทาํ ใหผ้ สู้ อนสอนไดอ้ ยา่ งมน่ั ใจ 3. สอนไดท้ นั ตามเวลาท่ีกาํ หนดลงชื่อ............................................... ลงชื่อ....................................................... ( ………………………….) ( …………………………………) ครูผสู้ อน รองผอู้ าํ นวยการฝ่ ายวชิ าการ