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

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

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

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

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

5 แผนการจัดการเรียนรแู้ บบบรู ณาการท่ี 1(ต่อ) หน่วยที่ 1 รหสั 2204-2009 การสร้างเวบ็ ไซต์ (2-2-3) สอนครัง้ ที่ 1 (2-4) ชอื่ หน่วย/เร่อื ง ความรู้เบอ้ื งตน้ เกย่ี วกบั เว็บไซต์ จานวน 3 ช่ัวโมง สาระสาคัญ การสร้างเว็บไซต์ เมือ่ เสร็จแล้วจะเปน็ การสอ่ื สารขอ้ มูลให้แกค่ นทั่วไป ความเขา้ ใจถึงความหมายของ เวลิ ดไ์ วดเ์ ว็บ เวบ็ ไซต์ ประเภท และจดุ ประสงคข์ องการสรา้ งเว็บไซต์ นนั้ มคี วามสาคญั อันจะทาให้ วตั ถปุ ระสงค์ของการสร้างเว็บไซตน์ ้นั บรรลุวตั ถุประสงค์ได้ จดุ ประสงค์การเรียนรู้ 1. บอกความหมายของคาศัพทพ์ ื้นฐานเก่ยี วกับอินเทอรเ์ นต็ ได้ 2. บอกความหมายของอนิ เทอรเ์ นต็ ได้ 3. บอกความหมายของเวลิ ดไ์ วด์เว็บได้ 4. บอกความหมายของเว็บไซตไ์ ด้ 5. สามารถแยกประเภทของเวบ็ ไซตไ์ ด้ 6. มคี ุณธรรม จริยธรรม และคา่ นิยมทดี่ ีในการใช้คอมพิวเตอร์ 7. มกี ารพัฒนาคณุ ธรรม จรยิ ธรรม คา่ นยิ ม และคุณลักษณะอันพึงประสงค์ของผ้สู าเร็จการศึกษา สานกั งานคณะกรรมการการอาชีวศกึ ษา ทีค่ รสู ามารถสังเกตได้ขณะทาการสอนในเร่ือง 7.1 ความมมี นุษยสมั พนั ธ์ 7.2 ความมีวนิ ยั 7.3 ความรับผดิ ชอบ 7.4 ความซอ่ื สตั ย์สุจรติ 7.5 ความเชื่อม่ันในตนเอง 7.6 การประหยัด 7.7 ความสนใจใฝร่ ู้ 7.8 การละเว้นสง่ิ เสพติดและการพนนั 7.9 ความรักสามัคคี 7.10 ความกตัญญกู ตเวที สมรรถนะรายวิชา 1. แสดงความรู้เกย่ี วกบั กระบวนการ โครงสรา้ งการทางาน และไวยากรณ์ ของโปรแกรมภาษาในการสร้างเวบ็ ไซต์ 2. ประยกุ ต์ใชโ้ ปรแกรมภาษาหรือโปรแกรมสาเร็จรูปสาหรับสร้างเว็บไซต์ และการติดต้งั และอัพโหลด (Upload) เว็บไซต์

6 เน้ือหาสาระ 1. คาศัพท์พ้ืนฐานเกย่ี วกบั อินเทอร์เนต็ 2. ความหมายของอินเทอร์เน็ต 3. ความหมายของเวิลด์ไวดเ์ ว็บ 4. ความหมายของเว็บไซต์ 5. ประเภทของเว็บไซต์ กจิ กรรมการเรยี นรู้ ขั้นนาเขา้ สู่บทเรยี น 1.ครสู นทนากับผู้เรยี นเพอื่ ให้เหน็ ความสาคญั ของการสรา้ งเวบ็ ไซต์วา่ สามารถนาไปประยุกตใ์ ช้ได้ หลากหลายวตั ถุประสงค์ และสามารถนามาใช้ประกอบอาชพี ได้อกี ดว้ ย 2.ครแู นะนาใหผ้ ู้เรียนมกี ารวางแผนเรียนวชิ าการสร้างโปรแกรม 3.ผเู้ รยี นทาแบบประเมินผลการเรียนร้กู ่อนเรียน แลว้ สลับกนั ตรวจเพ่อื เกบ็ คะแนนสะสมไว้ ขน้ั สอน 4.ครใู ช้สือ่ Power Point ประกอบการอธิบายเร่อื งคาศพั ท์พน้ื ฐานเก่ยี วกับอินเทอรเ์ นต็ ซงึ่ ไดแ้ ก่ - ไคลเอนท์-เซริ ์ฟเวอร์ (Client Server) คือการติดต่อสือ่ สารกันบนเครือข่ายอนิ เทอร์เน็ต โดยประกอบไปดว้ ยเคร่ืองคอมพวิ เตอร์ท่ีสง่ สารข้อมูล และเครอื่ งทีร่ บั ข้อมูล โดยเครื่องที่ส่งข้อมลู เรียกว่าเครอ่ื งใหบ้ รกิ าร (Server) และเครื่องที่รับขอ้ มูลเรยี กว่า เคร่อื งรับบริการ (Client) - เว็บเพจ (Web Page) คือ หนา้ ๆ หนึ่งทเี่ ปิดดูผา่ นเวิลด์ไวดเ์ วบ็ โดยจะถูกสร้างขึ้นมาบน พน้ื ฐานของภาษาคอมพิวเตอร์ เช่น HTML หรอื อ่ืนๆ เชน่ Flash เปน็ ตน้ - โฮมเพจ (Home Page) คอื เวบ็ เพจหน่งึ หน้าทีม่ ักเป็นหน้าแรกและหน้าหลักเมื่อเขา้ ชม โดยมกั แสดงถึงภาพรวมของเน้อื หาทงั้ หมดวา่ มีอะไรบ้าง และทาหน้าทเี่ ช่ือมโยงไปยังเวบ็ เพจอืน่ ๆ ทเี่ กย่ี ว ของในเวบ็ ไซต์ - เว็บเบราเซอร์ (Web Brower) คือ โปรแกรมบนคอมพวิ เตอร์ หรอื อปุ กรณ์อื่น ท่ใี ชเ้ ข้าสู่ เวลิ ด์ไวด์เวบ็ และระบบอนิ เทอรเ์ น็ตโดยจะใช้ผ่านเคร่ืองรบั ข้อมลู หรือ Client โดยทาหน้าทร่ี อ้ งขอ ข้อมลู จากเคร่ืองส่งข้อมลู หรือ Server เพ่อื นามาแสดงบนหนา้ จอใหใ้ ชง้ าน เว็บเบราเซอรท์ ่นี ยิ มใชง้ านใน ปัจจบุ นั ไดแ้ ก่ Internet Explorer, Firefox,Chrome และ Safari - เว็บเซิร์ฟเวอร์ (Web Server) คือ เคร่ืองคอมพิวเตอรท์ เี่ ก็บข้อมูลของเวบ็ ไซตไ์ ว้ และทา หน้าท่ีสง่ ข้อมลู กลบั ไปยังเวบ็ เบราเซอร์ของเครือ่ งรับบริการ (Client) เม่ือไดร้ บั การร้องขอข้อมูล คือ ข้อมูลทั้งหมดท่ีใชง้ านผา่ นเวลิ ด์ไวดเ์ วบ็ จะดึงมาจากเวบ็ เซิร์ฟเวอร์ - เวบ็ โฮสติ้ง (Web Hosting) คอื พน้ื ท่บี นเครือข่ายทว่ี า่ งและเปดิ ให้บรกิ ารสาหรับเกบ็ ขอ้ มูลที่แสดงบนเวบ็ ไซต์ โดยจะมที ้งั ในรูปแบบฟรีและรูปแบบที่ตอ้ งเสียคา่ บริการ โดยจะมขี ้อดีข้อเสยี แตกต่างกันไป

7 - ยูอาร์แอล URL (Uniform Resource Locator) URL (Uniform Resource Locator) คอื ที่อย่ขู องขอ้ มลู ตา่ งๆ บนอินเทอรเ์ น็ต มีสองรูปแบบคอื รูปแบบไอพแี อดเดรส (IP Address) ท่มี ี ลกั ษณะเป็นตัวเลขยาวๆ และในรปู แบบโดเมนเนม ซง่ึ เปน็ คาและตัวอักษรโรมนั ซึง่ เวบ็ ไซตห์ นึ่งจะต้องมีท้ัง สองรูปแบบ แตโ่ ดยทั่วไปนิยมใช้ระบแุ บบโดเมนเนมมากกว่า - ไอพแี อดเดรส (IP Address) คอื รูปแบบหนึง่ ของการระบุทต่ี ้งั ของข้อมลู ในเครือขา่ ย รวมถึงอนิ เทอร์เนต็ โดยจะอยู่ในรูปของ x.x.x.x แทนด้วยตัวเลข โดยอาจมีรปู แบบอ่นื ตามลักษณะท่ีใช้งาน - โดเมนเนม (Domain Name) คือ ช่อื ของเว็บไซตท์ ่ใี ช้เรยี กบนอินเทอร์เน็ต และใช้ในการ ระบุเพ่ือเข้าถึงเวบ็ ไซตต์ า่ งๆ โดยในระยะแรกนนั้ จะเปน็ ไอพีแอดเดรสท่ีใชใ้ นการทางาน ซ่ึงเป็นตัวเลขทีย่ าว ยากต่อการจดจา ตอ่ มาจงึ ได้มีการนาโดเมนเนมมาใช้แทนที่ ซงึ่ เป็นตัวอักษรท่ีอา่ นและจดจาได้งา่ ยกว่า โดย การตงั้ ช่ือโดเมนเนมจะต้องไม่ซา้ กับท่ีเคยมีคนตัง้ และใชง้ านไปแลว้ 5.ครูใชเ้ ทคนคิ วิธีสอนแบบบรรยาย (Lecture Method) อธบิ ายโดยให้ผเู้ รยี นเป็นผฟู้ ังและเปิดโอกาสให้ ผู้เรียนซักถามปัญหาได้ในตอนทา้ ยของการบรรยายความหมายของอนิ เทอร์เนต็ ซงึ่ หมายถึง กล่มุ ของเครอื ขา่ ย คอมพวิ เตอร์ท่วั โลกที่เช่ือมต่อเข้าด้วยกนั และอนญุ าตให้มีการเขา้ ถึงสารสนเทศและการบริการในรูปแบบ สาธารณะ (Public Access) อินเทอร์เนต็ เป็นระบบเครือข่ายคอมพิวเตอรท์ มี่ ีขนาดใหญ่ เครอ่ื งคอมพวิ เตอร์ทกุ เคร่ืองท่วั โลกสามารถตดิ ต่อส่ือสารถึงกันไดโ้ ดยใช้มาตรฐานในการรับสง่ ข้อมลู ทีเ่ ป็นหนึ่งเดียวหรือทเ่ี รียกวา่ โปรโตคอล(Protocol) ซ่ึงโปรโตคอลทใี่ ช้บนระบบเครือขา่ ยอินเทอรเ์ น็ตมีชอ่ื ว่าทีซพี ี/ไอพี (TCP/IP : Transmission Control Protocol/Internet Protocol) 6.ครูใช้เทคนิควธิ ีการจัดการเรยี นรแู้ บบอภปิ ราย (Discussion Method) เพื่อมงุ่ ให้ผู้เรียนมีโอกาส สนทนาแลกเปล่ียนความคิดเห็นหรือระดมความคิด โดยมีวธิ กี ารคอื ให้ผู้เรียนช่วยกนั อภิปรายความหมาย ของคาว่า “เวลิ ด์ไวดเ์ ว็บ (World Wide Web : WWW)” และ “เวบ็ ไซต์ (Website) “ ซง่ึ ตาม หนังสอื นิยามความหมายไว้ ดงั น้ี เวิลด์ไวดเ์ วบ็ (World Wide Web : WWW) คือ คอมพวิ เตอรส์ ว่ นหนงึ่ บนอินเทอร์เนต็ ท่ถี ูก เชือ่ มต่อกันในแบบพเิ ศษท่ีทาให้คอมพวิ เตอร์เหลา่ น้ันสามารถใช้บริการเข้าถงึ ข้อมูลเนื้อหาท่ีเกบ็ ไว้ภายใน ของแต่ละเคร่ืองได้ เปน็ สงิ่ ทเี่ ช่อื มโยงเครือ่ งคอมพิวเตอรเ์ ซิรฟ์ เวอร์ท่ีใช้เกบ็ ข้อมูลต่างๆ ให้สามารถเข้าถึง ไดผ้ า่ นอนิ เทอรเ์ นต็ เว็บไซต์ (Website) คือ กลุ่มขอ้ มลู ของเว็บเพจ (Web Page) กล่าวคือ เปน็ หนา้ หนึ่งๆ ท่แี สดงผล บนอินเทอร์เน็ต ใช้นาเสนอข้อมูลตา่ งๆ หลายหน้าท่ีเกีย่ วข้องกัน ตงั้ อยบู่ นเวบ็ โดเมน หรอื ช่อื ท่ีต้ังของเวบ็ ซึง่ อย่บู นเวลิ ดไ์ วด์เว็บบนเครือข่ายอนิ เทอรเ์ น็ตซ่งึ สามารถเขา้ ถึงไดจ้ ากอปุ กรณ์ต่างๆ ไม่วา่ จะเป็นคอมพิวเตอร์ พีซี สมาร์ทโฟน แทบเลท็ และอปุ กรณ์อเิ ล็กทรอนิกส์อืน่ ๆ ทส่ี ามารถเชือ่ มต่อเครือข่ายอินเทอร์เนต็ ไดโ้ ดย ผ่านแอพพลิเคชั่นท่เี รียกว่า เวบ็ เบราเซอร์ (Web Browser) เวบ็ ไซต์ โดยส่วนใหญจ่ ดั ทาขึ้นมาเพื่อนาเสนอ ข้อมูลผา่ นทางคอมพิวเตอร์ ใหผ้ ู้ใช้คอมพิวเตอรท์ ุกคนสามารถเขา้ ถึงได้ ประกอบดว้ ยหน้าหลกั (Home Page) หนงึ่ หน้า ซ่งึ จะมีการเชื่อมโยง (Link) ไปหน้าเว็บเพจยอ่ ยๆ อ่ืนๆ เพอ่ื เขา้ ใช้ข้อมลู ได้ โดยทวั่ ไป เว็บไซต์จะเปดิ ให้ผ้ใู ชส้ ามารถเข้าถงึ และใช้งานข้อมูลได้ฟรี แต่ในขณะเดยี วกนั ก็มบี างเวบ็ ไซต์ท่จี าเป็นตอ้ งมี การสมัครสมาชกิ เพ่ือเข้าถึงข้อมูล ซงึ่ อาจเป็นข้อมลู ที่มีความสาคัญ หรอื เปน็ ขอ้ มูลที่ใชใ้ นการคา้ เปน็ ต้น

8 7.ครใู ช้สอ่ื Power Point แสดงภาพตัวอยา่ งเว็บไซตต์ า่ งๆ 8.ครูใช้สอื่ Power Point ประกอบการอธิบายเร่ืองประเภทของเว็บไซต์ โดยทว่ั ไปแบง่ ได้ 8 ประเภทดงั น้ี 1). เวบ็ ทา่ (Portal Site) เว็บทา่ อาจเรียกได้อกี อยา่ งหนึ่งว่า เว็บวาไรตี้ (Variety Web) คอื เว็บทร่ี วมบริการและขอ้ มลู ต่างๆ ในหลายแขนง มักจะมีบริการเครื่องมือค้นหา สาหรับค้นหาขอ้ มลู ท่ี ตอ้ งการในเวบ็ ได้ และอาจมีบริการตา่ งๆ ท้งั ด้านสาระและบันเทงิ ไม่ว่าจะเปน็ ดูหนัง ฟังเพลง ท่องเท่ยี ว สขุ ภาพ ไอที เกม เป็นต้น นอกจากน้ีเวบ็ ท่าอาจมีลักษณะเปน็ สถานทร่ี วมตัวกันใหส้ มาชิกพดู คุย แลกเปลยี่ นความคิดเห็นเกีย่ วกบั ประเดน็ ต่างๆ โดยเรียกวา่ เป็นเวบ็ ชุมชน (Community Web)

9 2). เวบ็ ขา่ ว (News Site) เป็นเวบ็ ที่นาเสนอขา่ วและสาระท่เี ปน็ การสรปุ ใจความสาคญั หรือ รวบรวมเนือ้ หาจากข่าวตา่ งๆในรอบเดือนหรือรอบปีไม่วา่ จะเป็นข่าวการเมือง ข่าวเศรษฐกจิ ข่าวกีฬา ขา่ วบนั เทงิ ข่าวในพระราชสานกั ข่าวตา่ งประเทศ ขา่ วอาชญากรรม เปน็ ต้น ซึง่ ชว่ ยใหผ้ ู้ใช้สามารถคน้ หา ขอ้ มูลและตดิ ตามขา่ วสารได้ทุกท่ีทุกเวลาไมว่ า่ จะอย่ทู ่ีใดก็ตาม 3). เวบ็ ข้อมลู (Information Site) เปน็ เวบ็ ทใ่ี หบ้ รกิ ารเกี่ยวกบั การสบื ค้นข้อมลู ขา่ วสารหรือ ข้อเท็จจรงิ ตา่ งๆ

10 4).เว็บธุรกิจหรอื การตลาด (Business/Marketing Site) เป็นเว็บไซต์ทม่ี ักสร้างขึ้นโดยองคก์ ร ธุรกิจตา่ งๆ มีจุดมงุ่ หมายหลกั ในการประชาสมั พันธ์องคก์ รและเพิ่มผลกาไรทางการค้าโดยเนอื้ หาสว่ น ใหญ่หรอื เกือบทั้งหมดมักจะเปน็ การนาเสนอที่มีความน่าสนใจและตรงใจกลมุ่ เปา้ หมายมากทส่ี ดุ 5). เว็บการศึกษา (Education Site) เปน็ เว็บท่สี ร้างขน้ึ โดยสถาบันการศึกษาต่างๆ หรือองค์กร ท้งั ภาครัฐและเอกชนท่ีมนี โยบายในการเผยแพรค่ วามร้แู ละใหโ้ อกาสในการค้นควา้ หาข้อมูลด้าน การศกึ ษาแกน่ ักเรยี นนสิ ิต นกั ศึกษารวมถึงประชาชนทั่วไป

11 6). เวบ็ บันเทิง (Entertainment Site) เว็บบันเทิงน้ันมุ่งเสนอและใหบ้ รกิ ารตา่ งๆ เพอ่ื เสริมสรา้ ง ความบนั เทิงโดยทั่วไปอาจนาเสนอเร่อื งราวเกยี่ วกบั การบันเทงิ ทวั่ ไป เชน่ ดนตรี ภาพยนตร์ ดารา กีฬา ความรกั บทกลอน การ์ตนู เร่อื งขาขนั รวมถึงการใหบ้ ริการดาวน์โหลดโลโกแ้ ละรงิ โทนสาหรบั โทรศัพทเ์ คลือ่ นที่ 7). เวบ็ องคก์ รทีไ่ ม่แสวงหาผลกาไร (None-profi t organization Site) มักเป็นเวบ็ ทส่ี ร้างขน้ึ โดยกล่มุ บคุ คลหรือองคก์ รต่างๆ ทม่ี ีนโยบายในการสรา้ งสรรคท์ ี่ช่วยเหลือสงั คมโดยท่ีไมห่ วังผลกาไรหรือ ค่าตอบแทน ซึง่ กลุม่ บคุ คลหรอื องค์กรเหลา่ นี้ไดแ้ ก่ สมาคม ชมรม มูลนธิ ิ และโครงการตา่ งๆ โดยอาจมี จุดประสงค์เฉพาะทแี่ ตกต่างกัน เช่น เพ่ือทาความดี สรา้ งสรรคส์ งั คม พทิ ักษ์สิ่งแวดลอ้ ม หรอื อาจรวมตัว กนั เพื่อดแู ลผลประโยชนข์ องสมาชิกในกลุม่

12 8). เวบ็ ส่วนตัว (Personal Site) อาจเปน็ เวบ็ ของคนๆ เดียว กลุ่มเพ่ือนหรือครอบครวั ก็ได้ โดย อาจจัดทาขึ้นดว้ ยเหตผุ ลทแ่ี ตกต่างกัน เช่น แนะนากลุ่มเพื่อน โชว์รปู ภาพ แสดงความคิดเหน็ เขยี น ไดอารีป่ ระจาวนั นาเสนอผลงานถา่ ยทอดประสบการณเ์ กยี่ วกับส่ิงที่เชี่ยวชาญหรือสนใจโดยทั้งหมดน้ีอาจ ทาเป็นเวบ็ ไซต์หรือเป็นเพียงเวบ็ เพจหนา้ เดียวกไ็ ด้ หรืออาจเป็นเวบ็ บลอ็ ก (Blog) 9.ผู้เรียนบอกเว็บไซต์ที่ตนใชง้ านเป็นประจา พร้อมระบุเหตุผล และบอกประเภทของเวบ็ ไซตน์ ั้นๆ 10. ผเู้ รียนบอกเว็บไซต์ที่ร้จู ักหรอื ค้นคว้าเพม่ิ เติม 5 เวบ็ ไซต์ ตามประเภทของเวบ็ ไซต์ ดังน้ี 1) เวบ็ ท่า (Portal Site) 2) เวบ็ ข่าว (News Site) 3) เว็บขอ้ มลู (Information Site) 4) เวบ็ ส่วนตวั (Personal Site) 5) เว็บการศึกษา (Education Site) 6) เวบ็ บันเทงิ (Entertainment Site) 7) เว็บองค์กรที่ไมแ่ สวงหาผลกาไร 8) (None-profi t organization Site) 9) เว็บธรุ กจิ หรือการตลาด 10) (Business/Marketing Site) 11.ผู้เรยี นตัง้ ช่ือเวบ็ ไซต์และบอกจุดประสงค์ของชื่อที่ต้ังและจดุ ประสงคใ์ นไปใช้ในการสร้าง เว็บไซต์ รวมทง้ั ระบุประเภทของเว็บไซต์ และนาเสนอหนา้ ชั้นเรียน 12.ครูแนะนาเพ่ิมเติมให้ผู้เรียนรจู้ กั บนั ทึกบญั ชีรายรับ-รายจา่ ยในชีวติ ประจาวันของตนเอง เพ่ือ สรา้ งนสิ ัยความประหยดั ความพอเพยี งให้แกต่ นเองและครอบครัว

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

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

15 จงเลือกคาตอบทถ่ี กู ต้องที่สุดเพยี งข้อเดยี ว 1. ข้อใดหมายถึงเครือ่ งใหบ้ ริการ ก. Social Network ข. Server ค. Client ง. URL 2. บรกิ ารรูปแบบหน่งึ บนอนิ เทอร์เนต็ เป็นการให้บริการเช่ือมต่อเคร่ืองคอมพิวเตอร์กับเคร่ืองอ่ืนๆ บนเครือข่ายแบบใยแมงมุมขนาดใหญ่ โดยการใช้บริการน้ัน จาเปน็ ตอ้ งกระทาผ่านโปรแกรม เวบ็ เบราเซอรต์ ่างๆ และระบุ URL เพื่อใชใ้ นการอา้ งท่อี ยู่ของทเี่ กบ็ เว็บไซต์ เรยี กวา่ อะไร ก. WWW ข. Web Page ค. Home Page ง. Face Book 3. เวบ็ ไซต์ คอื อะไร ก. เว็บเพจหนา้ แรกหรือหน้าหลกั ข. โปรแกรมบนคอมพวิ เตอร์ หรืออปุ กรณ์อืน่ ที่ใช้เขา้ สู่เวิลด์ไวดเ์ วบ็ และระบบอนิ เทอรเ์ น็ต ค. ลักษณะทร่ี วมเวบ็ เพจหลายๆ เว็บเพจ รวมไปถงึ โฮมเพจ เข้าดว้ ยกนั เปน็ โครงสรา้ ง เปรียบ เหมือนกบั หน้ากระดาษหลายๆ หนา้ มารวมกนั เป็นหนังสือ ง. เครอ่ื งคอมพวิ เตอร์ท่เี กบ็ ข้อมลู ของเว็บไซตไ์ ว้ และทาหนา้ ที่สง่ ข้อมูลกลับไปยังเว็บเบราเซอร์ ของเครื่องไคลเอนท์ เมือ่ ได้รับการร้องขอขอ้ มูล 3. ขอ้ ใดคือเว็บเบราเซอรท์ น่ี ิยมใช้งานในปัจจุบนั ก. Internet Explorer และ Firefox ข. Chrome และ Safari ค. Firefox และ Chrome ง. Internet Explorer, Firefox และ Chrome 4. ทอี่ ยูข่ องข้อมูลต่างๆ บนอินเทอร์เน็ต ซงึ่ มลี กั ษณะเป็นคาและตวั อักษรโรมนั เรียกว่าอะไร ก. อีเมล แอดเดรส ข. IP Address ค. Domain Name ง. Web server

16 5. อินเทอรเ์ น็ตเป็นระบบเครือขา่ ยคอมพวิ เตอร์ ท่ีมขี นาดใหญ่ เครอ่ื งคอมพวิ เตอร์ทกุ เครื่องท่วั โลก สามารถ ตดิ ต่อสอื่ สารถึงกันได้โดยใช้มาตรฐานในการรบั ส่งข้อมูลทีเ่ ป็นหนึ่งเดียวหรอื ทเี่ รียกวา่ อะไร ก. Protocol ข. IP Address ค. Web Page ง. Web server 6. ข้อใดคือเว็บไซต์แห่งแรกของโลก ก. http://info.cern.ch ข. www.google.com ค. www.sanook.com ง. www.hotmail.com 7. เว็บบอร์ดทีใ่ หญ่ท่ีสดุ ในประเทศไทยคือเวบ็ ใด ก. www.google.com ข. www.pantip.com ค. www.sanook.com ง. www.hotmail.com 8. เว็บไซตส์ ารานุกรมท่ีมชี ื่อเสยี ง โดยใหบ้ รกิ ารด้านข้อมูลในหลากหลายแขนง โดยผใู้ ชส้ ามารถคน้ หา ข้อมลู ในเว็บได้ และสามารถแก้ไขปรบั ปรงุ เน้อื หาให้สมบูรณข์ ึน้ ได้ดว้ ยตัวเอง ให้บรกิ ารในหลายภาษา รวมถงึ ภาษาไทยคือเวบ็ ไซด์ใด ก. www.google.com ข. www.pantip.com ค. www.wikipedia.org ง. www.sanook.com 9. ข้อใดไม่ใช่เวบ็ ขา่ ว (News Site) ก. www.naewna.com ข. www.thairath.co.th ค. www.dailynews.co.th ง. www.google.com 10. ขอ้ ใดคอื เวบ็ ธรุ กจิ หรือการตลาด (Business/Marketing Site) ก. www.shopat7.com ข. www.pantip.com ค. www.thairath.co.th ง. www.sanook.com

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

18 แผนการจัดการเรียนร้แู บบบูรณาการที่ 2 หน่วยที่ 2 รหัส 2204-2009 การสรา้ งเวบ็ ไซต์ (2-2-3) สอนคร้งั ท่ี 2 (5-8) ช่อื หน่วย/เรื่อง กระบวนการสร้างเวบ็ ไซต์ จานวน 4 ช.ม. สาระสาคัญ การสรา้ งเวบ็ ไซต์ให้ประสบความสาเรจ็ นั้น ขัน้ ตอนการสรา้ งเวบ็ ไซต์ มีความสาคัญดจุ เข็มทิศนา ทางใหเ้ ว็บไซต์นนั้ เดินในทิศทางท่ถี ูกตอ้ งและตรวจสอบได้ ซึง่ ผ้สู รา้ งเวบ็ ไซต์จะต้องรู้ตง้ั แต่ ขัน้ ตอน กระบวนการเตรียมข้อมูล กระบวนการออกแบบและสร้างเว็บไซต์ สว่ นประกอบของเว็บเพจ การ ออกแบบโครงสร้างเลย์เอาท์ การเลือกใชส้ ี รูปแบบตวั อกั ษร ตลอดจนถึงกระบวนการพัฒนาและเผยแพร่ เว็บไซต์ จุดประสงคก์ ารเรียนรู้ 1. สามารถเตรยี มข้อมูลเพือ่ ใชใ้ นการเขียนเว็บไซตจ์ ริงได้ 2. สามารถเขียนกระบวนการออกแบบและสร้างเวบ็ ไซต์ได้ 3. มีความเข้าใจในหลกั การออกแบบเวบ็ ไซต์ 4. มีความเขา้ ใจในกระบวนการพฒั นาและเผยแพรเ่ ว็บไซต์ 5. มีคุณธรรม จรยิ ธรรม และคา่ นยิ มท่ีดีในการใช้คอมพิวเตอร์ 6. มีการพัฒนาคณุ ธรรม จรยิ ธรรม ค่านิยม และคุณลักษณะอนั พงึ ประสงคข์ องผูส้ าเร็จการศึกษา สานกั งานคณะกรรมการการอาชีวศกึ ษา ทคี่ รสู ามารถสังเกตได้ขณะทาการสอนในเร่ือง 6.1 ความมมี นุษยสมั พันธ์ 6.6 การประหยัด 6.2 ความมีวินยั 6.7 ความสนใจใฝร่ ู 6.3 ความรบั ผดิ ชอบ 6.8 การละเว้นสงิ่ เสพตดิ และการพนัน 6.4 ความซ่ือสตั ยส์ จุ รติ 6.9 ความรักสามัคคี 6.5 ความเชอื่ มัน่ ในตนเอง 6.10 ความกตัญญกู ตเวที สมรรถนะรายวิชา 1. แสดงความรู้เกย่ี วกบั กระบวนการ โครงสรา้ งการทางาน และไวยากรณ์ ของโปรแกรมภาษาในการสร้างเวบ็ ไซต์ 2. ประยุกตใ์ ชโ้ ปรแกรมภาษาหรอื โปรแกรมสาเรจ็ รปู สาหรับสร้างเว็บไซต์ และการติดต้ังและอัพโหลด (Upload) เว็บไซต์ เน้อื หาสาระ 1. กระบวนการเตรียมข้อมูล 2. กระบวนการออกแบบและสรา้ งเวบ็ ไซต์ 3. กระบวนการพฒั นาและเผยแพรเ่ วบ็ ไซต์

19 กิจกรรมการเรยี นรู้ ขนั้ นาเขา้ สู่บทเรยี น 1.ครแู ละผเู้ รยี นสนทนาเกย่ี วกับการสร้างเว็บไซต์ให้ประสบความสาเร็จไดน้ ้นั ผู้สรา้ งเว็บไซตต์ ้องให้ ความสาคญั กบั ข้นั ตอนการสร้างเว็บไซต์อยา่ งมาก ซึ่งผู้สรา้ งเวบ็ ไซต์จะต้องรู้ตง้ั แต่ ขัน้ ตอนกระบวนการ เตรียมข้อมูล กระบวนการออกแบบและสรา้ งเว็บไซต์ ส่วนประกอบของเว็บเพจ การออกแบบโครงสรา้ ง เลยเ์ อาท์ การเลือกใช้สี รูปแบบตัวอกั ษร ตลอดจนถึงกระบวนการพัฒนาและเผยแพร่เว็บไซต์ 2.ผูเ้ รียนยกตัวอยา่ งเวบ็ ไซตท์ ี่ประสบความสาเรจ็ พร้อมระบุจดุ แข็งของเวบ็ ไซตน์ นั้ ๆ 3.ผู้เรยี นวิเคราะหป์ ัจจัยที่ทาให้เวป็ ไซตป์ ระสบความสาเร็จ ขน้ั สอน 4.ครูใช้เทคนิควธิ สี อนแบบบรรยาย (Lecture Method) อธบิ ายเรอ่ื งกระบวนการเตรยี มขอ้ มลู ซ่ึง เปน็ ขน้ั ตอนแรกในการสรา้ งเว็บไซต์ เปน็ การรวบรวมข้อมูลตา่ งๆ ท่สี าคัญของเวบ็ ไซต์ วา่ ตอ้ งการมีข้อมลู ใดบ้างในเว็บไซต์ การเตรียมข้อมลู อาจมกี ารสารวจข้อมลู ของเว็บไซต์อน่ื เพือ่ ใช้ในการตัดสนิ ใจวา่ ต้องการ ฟเี จอร์หรือเนื้อหาที่แตกต่างกันอย่างไรบ้าง รวมไปถงึ การช่วยในการตัดสินใจเลอื กโทนสีของเว็บให้ เหมาะสมกับเว็บไซต์ได้อีกดว้ ย หลงั จากการรวบรวมขอ้ มลู แล้ว จะตอ้ งนาข้อมลู ที่ได้มาแยกย่อยเปน็ ประเดน็ ต่างๆ แล้วจึงนามากลน่ั กรองเตรียมสาหรบั การใช้จรงิ ในเวบ็ ไซต์ให้ครบถ้วนตามหัวข้อที่กาหนด 5.ครใู ช้สอื่ Power Point ประกอบการอธบิ ายเรอื่ งแนวทางในการออกแบบเวบ็ ไซต์ที่ดี ซง่ึ มี องค์ประกอบดงั นี้ 1). มีความเปน็ เอกภาพ รูปลกั ษณต์ ่างๆ ในเวบ็ ไซต์ ควรออกแบบมาให้ไปในทิศทางเดยี วกนั 2. มปี ระโยชน์ การเลือกสรรข้อมลู ตา่ งๆ ที่ใชเ้ ป็นเนือ้ หาในเวบ็ ควรคดั มาเฉพาะขอ้ มูลที่จะ เป็นประโยชน์ตอ่ ผใู้ ช้ 3). มีระบบเชื่อมโยงทีด่ ี ในทุกเว็บเพจควรจะมีปุ่มท่สี ามารถเชือ่ มโยง กลับมายังเวบ็ เพจ หลักไดเ้ สมอ และปุ่มดงั กล่าวควรอยใู่ นตาแหน่งเดียวกันทงั้ หมด 4). มีรูปลักษณ์ท่ดี ึงดดู การออกแบบเว็บไซตใ์ ห้น่าดงึ ดูด จาเปน็ ต้องมีการเลือกใชส้ ี แบบ อักษร เลยเ์ อาท์ต่างๆ ให้เหมาะสมโดยคานึงถงึ กลุ่มเปา้ หมายผทู้ ่ีจะเขา้ มาใชง้ านเว็บไซต์ 5). มภี าพลกั ษณ์ที่นา่ เชื่อถือ การมีภาพลักษณ์ทนี่ ่าเชื่อถือ เกดิ ไดจ้ ากการเลือกใช้ ภาพประกอบที่เหมาะสมกบั เน้อื หาและกล่มุ ผใู้ ชง้ านเปา้ หมาย ควรใช้ภาพทคี่ มชดั ไมแ่ ตก เบลอ หรอื บีบ จนสดั สว่ นผิดไป นอกจากน้ยี ังรวมไปถึงการออกแบบเลยเ์ อาท์ไม่ให้มากหรือน้อยเกนิ ไป ไปจนถงึ รายละเอียดเล็กๆ น้อยๆ เชน่ การสะกดคาผิด หรือการใชค้ าไมเ่ หมาะสมกับบริบททาใหค้ วามนา่ เชอ่ื ลดลงไปได้ 6). มภี าพประกอบและลิงก์ครบถว้ น ผใู้ ชต้ ้องสามารถดรู ูปประกอบท้งั หมดได้และการ เชื่อมโยงทงั้ หมดตอ้ งคลกิ ดเู นื้อหาได้ทง้ั หมด ดงั้ นผ้ั ู้ดแู ลเวบ็ ไซตค์ วรตรจวอบอยา่ งสมา่ เสมอ 7). ใช้งานไดท้ ันทีกับทุกคน ควรออกแบบเว็บไซต์ใหท้ างานไดโ้ ดยไม่ต้องใหผ้ ู้ใช้ตดิ ต้ังปล๊กั อินเสริม เชน่ Flash Player หรอื Java ก่อนถึงจะเขา้ ใชง้ านได้ รวมถึงออกแบบเว็บทร่ี องรบั เบราเซอร์ ตา่ งๆ ได้ แสดงผลไม่ผดิ พลาด และในปจั จบุ นั อาจจะมีการเพิม่ เตมิ ให้รองรบั กับอปุ กรณ์อ่ืนๆ เช่น สมาร์ท โฟนและแทบเล็ทด้วย

20 6.ครใู ช้เทคนิควิธกี ารจดั การเรียนรแู้ บบอภิปราย (Discussion Method) คือกระบวนการทผ่ี ้สู อน มงุ่ ใหผ้ เู้ รียนมโี อกาสสนทนาแลกเปลีย่ นความคิดเห็นหรือระดมความคิด โดยมวี ธิ กี ารคอื ให้ผเู้ รียนช่วยกนั คดิ ชอ่ื และประเภทเวบ็ ไซตท์ ่ีต้องการสรา้ ง และช่วยกันอภิปรายเน้อื หาท่ีควรมใี นเวบ็ ไซต์นน้ั ๆ ตามหัวข้อ ดงั น้ี 1) เนอื้ หาหลักของเวบ็ ไซต์ 2). ข้อมลู เกย่ี วกบั องค์กร บรษิ ทั หรือผจู้ ัดทาเว็บไซต์ 3). ข่าวสารของเวบ็ ไซต์ 4). คาถามท่พี บบ่อย (Frequently Asked Question; FAQ) 5). ขอ้ มลู สาหรบั การติดต่อเป็นขอ้ มลู สาคัญทีต่ ้องมี 7.ครใู ชแ้ สดงภาพเพื่ออธบิ ายสว่ นประกอบของเวบ็ เพจ ผา่ นส่ือ Power Point 1). Page Header คือ สว่ นท่อี ยดู่ ้านบนสดุ ของเวบ็ เพจ อาจเป็นส่วนทีใ่ ชก้ ราฟฟิก เช่น โล โก้ของเวบ็ ไซต์ หรอื แอนเิ มชนั เพื่อตกแตง่ สว่ นนใี้ หม้ ีความสวยงาม เพอ่ื สร้างความประทับใจใหก้ บั ผ้เู ขา้ ใช้งานเว็บไซต์ โดยการออกแบบสว่ น Page Header น้ี ควรสอดคล้องกบั เน้ือหาอื่นๆ ทงั้ หมดในเวบ็ ไซต์ 2). Navigation Bar คอื แผงที่ใชเ้ ชื่อมโยงไปยังส่วนย่อยต่างๆ ในเว็บไซต์ โดยท่ัวไปแลว้ ส่วน Navigation Bar น้จี ะอย่ตู ดิ กบั สว่ น Page Header หรอื อาจออกแบบใหเ้ ปน็ สว่ นเดียวกนั เลย 3). Page Body คอื ส่วนทีใ่ ช้แสดงเนื้อหาตา่ งๆ ในเวบ็ เพจ โดยทั่วไปจะวางไวต้ รงกลางเวบ็ เพจอาจประกอบไปด้วยทง้ั ข้อความ รปู ภาพ แอนิเมชัน เป็นตน้ โดยการออกแบบสว่ น Page Body นนั้ จะตอ้ งออกแบบใหเ้ ปน็ ระเบียบ อา่ นงา่ ย

21 4). Page Footer คือ ส่วนทีจ่ ะอยูด่ า้ นล่างสดุ ของเว็บเพจเสมอ มกั ใช้แสดงข้อความ เช่ือมโยงไปยังสว่ นต่างๆ ของเว็บไซต์ทลี่ ะเอยี ดกว่า Navigation Bar หรอื อาจจะใช้แสดงขอ้ ความลขิ สทิ ธ์ิ หรือข้อมลู สาหรบั ติดต่อทางเวบ็ ไซต์ 8. ครใู ชส้ ื่อ Power Point อธิบายวธิ ีการออกแบบโครงสร้างเวบ็ ไซต์ซ่งึ มี 3 ลกั ษณะดังนี้ 1). แบบเรยี งลาดับ (Sequence) 2). แบบระดบั ช้นั (Hierarchy) 3). แบบผสม (Combination) 9.ผเู้ รียนอภิปรายรปู แบบเลยเ์ อาท์ทน่ี ิยมทัง้ 3 รปู แบบ และแสดงความคิดเหน็ วา่ ถา้ ผ้เู รยี น ต้องการสร้างเวบ็ ไซต์ รูปแบบเลยเ์ อาทแ์ บบใดทเ่ี หมาสมต่อเวบ็ ไซต์ที่ผู้เรียนต้องการสร้างมากท่สี ุด เพราะ เหตใุ ด รูปแบบเลยเ์ อาท์ มีดังน้ี 1). แบ่งแบบอสิ ระ เปน็ การแบง่ แบบไมม่ ีการกาหนดตาแหน่งเนื้อหาที่แนช่ ัด วางไว้ตรงไหนก็ ไดม้ ักใชก้ ับเว็บทใี่ ช้ Flash เพราะจัดวางเลยเ์ อาท์ได้งา่ ยและเป็นอิสระมากกวา่

22 2). แบง่ เปน็ 2 สว่ น โดยกาหนดให้ทางซ้ายของเนือ้ หาเปน็ ส่วนของลิงก์ และทางขวาเป็น เนือ้ หาหลกั โดยทว่ั ไปนยิ มใชเ้ ลยเ์ อาท์แบบนี้ เพราะมีสดั ส่วนชดั เจน ไมซ่ บั ซ้อน 3). แบง่ เปน็ 3 ส่วน โดยอาจใช้ดา้ นซา้ ยเป็นลิงก์ ตรงกลางเป็นเน้ือหา และทางขวาเป็นแบน เนอร์โฆษณาหรอื ข้อมูลหรือลิงกเ์ สริม เหมาะกบั เวบ็ ไซต์ขนาดใหญท่ ีม่ ีขอ้ มูลจานวนมาก 10.ครแู สดงรูปภาพเพ่ืออธบิ ายเร่ืองการใช้สี

23 11.ครูใช้เทคนิควธิ ีสอนแบบบรรยาย (Lecture Method) บอกหลักการการเลือกใชร้ ปู แบบ ตวั อักษรตา่ งๆ ดังนี้ 1). ใชร้ ปู แบบตัวอักษร Font ให้เหมาะสม เช่น หากเป็นเน้ือความส่วนทต่ี ้องอา่ นมากๆ ควร เลือกใช้รูปแบบตัวอกั ษรประเภทมหี วั ซ่ึงทาใหเ้ กิดความสบั สนนอ้ ยกว่าแบบไม่มหี ัว เนน้ ความเรยี บง่าย ในการอ่าน

24 โดยท่ัวไปทน่ี ิยมใชส้ าหรบั เน้ือความจะเปน็ AngsanaNews,THSarabunPSK, Tahoma เป็น ตน้ ส่วนการใชร้ ปู แบบตวั อักษรบรเิ วณทีเ่ ปน็ หวั ข้อหรอื กราฟิกน้นั สามารถใช้รปู แบบตวั อักษรท่มี ีลูกเล่น สวยงามได้ 2). เลือกขนาดรปู แบบตัวอักษรให้เหมาะสม หากใชต้ วั อักษรทีม่ ขี นาดเล็กหรือใหญเ่ กินไป จะทาให้อา่ นได้ยาก โดยทั่วไปขนาดที่นิยมใช้และอา่ นง่ายอยทู่ ่ี 14-18 pt. 3). เลือกรปู แบบการจดั แถวข้อความ (Align) ใหเ้ หมาะสม โดยจะมีสามแบบ คือ ชดิ ซ้ายอยู่ กงึ่ กลาง และชิดขวา เชน่ หากเปน็ หัวขอ้ อาจจะไวต้ รงกลางหนา้ กระดาษ เป็นต้น 12.ครแู ละผู้เรยี นรว่ มกนั อภิปรายเน้อื หาเร่ืองกระบวนการพัฒนาและเผยแพร่เวบ็ ไซต์ ซ่ึงมีข้ันตอน ดังน้ี 1). การตรวจสอบเว็บไซต์ 2). การลงทะเบยี นโดเมนเนมและเวบ็ โฮสตงิ้ 3). การอัพโหลดเว็บไซต์ 13.ผเู้ รียนออกแบบหนา้ โฮมเพจ (Home page) โดยมีส่วนประกอบดังน้ี 1). Page Header 2). Navigation Bar 3). Page Body 4). Page Footer 14.ครสู อนเพ่มิ เติมเกยี่ วกับการทาหน้าท่เี ปน็ พลเมืองดีของสังคมไทย รู้จักเอื้อเฟื้อเผ่อื แผ่ต่อผูอ้ ื่น สรุปและการประยุกต 15.ครูและผู้เรยี นช่วยกนั สรปุ เนอื้ หาที่เรียน 16.ผู้เรียนทากจิ กรรมใบงาน และแบบประเมิณผลหลงั เรยี น 17.ผู้เรียนวิเคราะหเ์ นื้อหาการเรยี นการสอนและหาข้อสรปุ เปน็ ความคิดรวบยอดเพ่ือนาไป ประยุกตใ์ ช้ต่อไป พรอ้ มข้อเสนอแนะตนเอง

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

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

27 จงเลือกคาตอบที่ถูกต้องท่ีสดุ เพียงข้อเดียว 1. ข้อใดคือข้นั ตอนทตี่ ้องทาก่อนการออกแบบและสร้างเวบ็ ไซต์ ก. การเลือกโทนสีพื้นหลงั ข. การเตรียมข้อมูล ค. การเลือกโทนสีตวั อักษร ง. การจัดวางข้อมูลในเว็บ 2. กลุม่ เป้าหมายของเว็บไซต์บันเทิงคือบคุ คลกลมุ่ ใด ก. วยั รุ่น ข. วัยกลางคน ค. วยั สงู อายุ ง. ทกุ วยั 3. กลมุ่ เปา้ หมายของเวบ็ ไซด์ออกกาลังกายคือบคุ คลกลมุ่ ใด ก. วัยรนุ่ ข. วัยกลางคน ค. วยั สูงอายุ ง. ทุกวยั 4. การใชร้ ะบบเช่ือมโยง (Link) ในเวบ็ ไซต์มีความจาเป็นอย่างไร ก. ไม่มีความจาเป็นเพราะผูใ้ ช้อาจใชง้ านไมเ่ ปน็ ข. ไม่มีความจาเปน็ เพราะทาให้เว็บไซดผ์ ู้ใช้อาจใชง้ านไมเ่ ป็น ค. มคี วามจาเป็นเพราะชว่ ยให้การใช้งานในเว็บไซตส์ ะดวกและรวดเรว็ ง. มคี วามจาเปน็ เพราะต้องโฆษณาสินค้าหรือบริการต่างๆ ให้กับผู้สนบั สนนุ 5. แนวทางในการออกแบบเว็บไซตท์ ี่ดีมีองค์ประกอบใดบา้ ง ก. มีความเรยี บงา่ ย มีความเป็นเอกภาพและมปี ระโยชน์ ข. มีระบบเช่อื มโยงที่ดี มีรปู ลักษณ์ท่ีดงึ ดดู และมภี าพลักษณ์ที่น่าเช่ือถอื ค. มีภาพประกอบและลงิ ก์ครบถว้ นและใช้งานได้ทันทีกับทุกคน ง. ถูกทกุ ขอ้ 6. FAQ หมายถงึ อะไร ก. ขอ้ มลู เกย่ี วกบั องคก์ ร บรษิ ัท หรอื ผู้จดั ทาเวบ็ ไซต์ ข. ขา่ วสารของเว็บไซต์ ค. ขอ้ มูลสาหรับการตดิ ต่อ ง. คาถามที่พบบ่อย

28 7. ข้อใดหมายถงึ สว่ นทีใ่ ช้แสดงเนื้อหาต่างๆ ในเวบ็ เพจ ก. Page Header ข. Navigation Bar ค. Page Body ง. Page Footer 8. โครงสรา้ งเวบ็ ไซตแ์ บบเชอื่ มโยงเวบ็ เพจแตล่ ะหนา้ เปน็ ลาดบั ๆ เหมือนเรียงหน้าหนงั สือ เป็นโครงสร้าง แบบใด ก. แบบเรยี งลาดบั (Sequence) ข. แบบระดับชน้ั (Hierarchy) ค. แบบผสม (Combination ง. ไม่มีข้อใดถูก 9. ในการเลือกใชโ้ ทนสี สที ใ่ี หค้ วามรสู้ ึกเป็นมติ ร อบอุ่น สดใส และความสรา้ งสรรค์ คือโทนสีใด ก. โทนสแี ดง ข. โทนสีส้ม ค. โทนสเี หลือง ง. โทนสีฟา้ -นา้ เงนิ 10. ขอ้ ใดหมายถึง ชอื่ ของเวบ็ ไซต์ ซึง่ เปน็ ชอื่ ท่ีต้งั ขน้ึ เพ่ือให้จดจาและนาไปใช้ เขา้ ถงึ ได้งา่ ย โดยกอ่ นที่จะ ใช้งานตอ้ งทาการจดทะเบียน ก. Domain Name ข. Mock Up ค. IP Address ง. Web Hosting

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

30 แผนการจดั การเรยี นรู้แบบบูรณาการท่ี 3 หน่วยที่ 3 รหสั 2204-2009 การสร้างเว็บไซต์ (2-2-3) สอนครัง้ ที่ 3 (9-12) ชอ่ื หน่วย/เร่อื ง ภาษาและเคร่อื งมือในการสร้างเว็บไซต์ จานวน 4 ช.ม. สาระสาคญั ภาพรวมของการสร้างเวบ็ ไซต์นั้น มีความจาเปน็ จะต้องทราบวา่ ภาษาและโปรแกรมต่างๆ ทใี่ ช้ใน การสรา้ งเว็บไซตน์ น้ั มีอะไรบ้างในภาพกว้างๆ เพ่ือให้ผู้สรา้ งเวบ็ ไซต์สามารถเลือกเครื่องมือในการสรา้ ง เวบ็ ไซตไ์ ด้อย่างมปี ระสิทธิภาพ และตรงความต้องการของผู้ว่าจา้ งหรอื เจ้าของเว็บไซต์ จดุ ประสงค์การเรียนรู้ 1. มีความเขา้ ใจในภาษาท่ีใช้ในการสรา้ งเวบ็ ไซตเ์ บ้ืองต้น 2. รูจ้ กั เครือ่ งมอื ในการสร้างเว็บไซต์ 3. สามารถคดั เลอื กโปรแกรมสาหรับสร้างเว็บไซตไ์ ด้ 4. สามารถเขียนภาษา HTML เบ้อื งตน้ ได้ 5. มคี ุณธรรม จรยิ ธรรม และคา่ นิยมทีด่ ใี นการใชค้ อมพิวเตอร์ 6. มีการพัฒนาคุณธรรม จริยธรรม ค่านิยม และคุณลักษณะอันพึงประสงค์ของผู้สาเร็จการศึกษา สานกั งานคณะกรรมการการอาชีวศึกษา ทคี่ รูสามารถสงั เกตได้ขณะทาการสอนในเรื่อง 6.1 ความมีมนุษยสมั พนั ธ์ 6.6 การประหยดั 6.2 ความมีวินัย 6.7 ความสนใจใฝร่ ู้ 6.3 ความรบั ผิดชอบ 6.8 การละเวน้ สิ่งเสพติดและการพนนั 6.4 ความซอื่ สัตยส์ จุ ริต 6.9 ความรักสามัคคี 6.5 ความเช่ือมัน่ ในตนเอง 6.10 ความกตัญญกู ตเวที สมรรถนะรายวิชา 1. แสดงความรู้เกี่ยวกับกระบวนการ โครงสรา้ งการทางาน และไวยากรณ์ ของโปรแกรมภาษาในการสร้างเวบ็ ไซต์ 2. ประยกุ ต์ใชโ้ ปรแกรมภาษาหรือโปรแกรมสาเร็จรูปสาหรับสร้างเวบ็ ไซต์ และการตดิ ต้ังและอัพโหลด (Upload) เว็บไซต์ เนื้อหาสาระ 1. ภาษาและเคร่ืองมือท่ีใช้ในการสร้างเว็บไซต์ 2. โปรแกรมท่ีใชใ้ นการสรา้ งเวบ็ ไซต์ 3. การใช้ภาษา HTML เบ้ืองตน้

31 กิจกรรมการเรยี นรู้ ข้ันนาเขา้ สูบ่ ทเรียน 1. ครแู ละผเู้ รยี นสนทนาเกี่ยวกบั ภาษาและโปรแกรมตา่ งๆ ทีม่ คี วามจาเปน็ ในการสรา้ งเว็บไซต์นั้น เพื่อให้ผู้สรา้ งเวบ็ ไซต์สามารถเลอื กเคร่ืองมือในการสร้างเว็บไซตไ์ ดอ้ ย่างมีประสิทธภิ าพ และตรงความ ตอ้ งการของผวู้ า่ จา้ งหรอื เจา้ ของเว็บไซต์ 2. ผู้เรยี นยกตัวอย่างภาษาที่ใชใ้ นการเขียนเว็บไซต์ 3. ครูแสดงรฟู ภาพโปรแกรมท่ใี ชส้ รา้ งเว็บไซต์ ขัน้ สอน 4.ครูใช้สื่อ Power Point ประกอบการสอนเรื่องภาษาและเครื่องมือที่ใชใ้ นการสร้างเวบ็ ไซต์ ซ่งึ มี สาระสาคญั ดงั นี้ 1). ภาษา HTML และ XHTML HTML (Hypertext Markup Language) เปน็ ภาษาหลักที่ใช้ในการเขียนเว็บไซตท์ ว่ั ไป หมายถึงภาษาที่ใช้ Tag ในการกาหนดการแสดงผลเว็บเพจที่ตา่ งกเ็ ช่ือมถึงกนั ใน Hyperspace ผ่าน Hyperlink นั่นเอง XHTML (Extensible Hypertext Markup Language) คอื การนาเอาภาษา HTML มา ปรบั ปรุงใหม่ โดยใชม้ าตรฐานของ Extensible Markup Language (XML) สามารถสร้างคาส่ัง (Tag) ใหมๆ่ ขนึ้ ได้เอง และเลอื กได้ว่าจะให้คาสง่ั นน้ั แสดงผลอยา่ งไร นอกจากนั้นยงั รองรบั ภาษาอนื่ ที่มี XML เป็นพ้นื ฐานอีกด้วย 2). มาตรฐาน CSS3 CSS (Cascading Style Sheet) มีหน้าที่คอื ใช้ในการตกแต่งเอกสารของ HTML หรอื XHTML หรือ XML ให้มหี นา้ ตาสสี นั ตัวอักษร เส้นขอบ พนื้ หลงั ระยะห่างฯลฯ CSS3 มคี ุณสมบัตทิ ีเ่ ปน็ จุดเด่นดังนี้ -สรา้ งแสงและเงา (Drop Shadow) ใหภ้ าพหรือตวั อกั ษร -ทาให้มมุ ของรูปสเี่ หลยี่ มผนื ผ้าท่เี หล่ียมกลายเปน็ มุมมนได้ (Rounded Corners) -สามารถใช้ภาพพ้ืนหลงั หลายๆ ภาพได้ (Multiple Backgrounds) -สามารถกาหนดความโปร่งแสง (Opacity) ได้ โดยสามารถแสดงผลทัง้ แบบจางและ ทบึ ได้

32 -สามารถปรับแต่งแก้ไขรูปภาพ เช่น ทาให้ภาพเบลอ ทาให้ภาพคมข้นึ หรือเปลยี่ นสี ภาพได้ 3). เว็บแอพพลเิ คชัน่ คือ กลุม่ ของเว็บเพจทส่ี ามารถทางานในลักษณะโตต้ อบ กับผู้ใช้ได้ ไมใ่ ช่เวบ็ เพจทแ่ี ค่นาเสนอข้อมลู เพียงด้านเดียว โดยเว็บแอพพลิเคช่ันจะมแี นวคิดใกลเ้ คียงกบั แอพพลเิ คช่นั ท่ัวไปแต่มีความซบั ซ้อนน้อยกวา่ เปรียบเสมอื นการนาแอพพลิเคชัน่ โปรแกรมไปตดิ ตงั้ ไวบ้ น เวบ็ ไซต์นน่ั เอง 4). แฟลช เปน็ เครอื่ งมือที่ถกู พัฒนาสาหรบั สร้างสอ่ื ตา่ งๆ ท้ังภาพเคล่ือนไหว การนาเสนอ แบบทดสอบ หนงั สืออิเล็กทรอนิกส์ และส่ือกราฟิกอิเลก็ ทรอนกิ ส์อ่ืนๆ โดยการใชแ้ ฟลชในการสรา้ งสอ่ื ตา่ งๆรวมไปถงึ เว็บไซต์นน้ั ไดร้ ับการยอมรับกันอย่างกว้างขวางในวงการนกั ออกแบบกราฟิก นกั ออกแบบ เว็บไซต์ นักออกแบบมลั ติมเี ดีย เน่ืองจากมลี กั ษณะการสรา้ งทีอ่ สิ ระ และตกแตง่ รวมถงึ สร้างส่วนโต้ตอบ (Interactive) ได้ในตัว 5.ครใู ช้สอ่ื วิดที ศั น์แสดงการทางานอย่างคร่าวๆของโปรแกรมแบบ WYSIWYG , CMS และโปรแกรม แฟลช 1). โปรแกรมแบบ WYSIWYG 2). โปรแกรมแบบ CMS 3). โปรแกรมแฟลช

33 6.ผู้เรยี นวเิ คราะหค์ วามเหมือนและความแตกต่างของโปแกรมท้งั 3 ไดแ้ ก่ โปรแกรมแบบ WYSIWYG , CMS และโปรแกรมแฟลช 7.ผ้เู รียนเลือกโปรแกรมทจี่ ะใชส้ ร้างเว็บไซต์ พร้อมท้งั บอกเหตผุ ลประกอบ 8.ครูใชส้ ่อื Power Point ประกอบการอธิบายเรอ่ื งหลักการใช้งานภาษา HTML (Hypertext Markup Language) ซง่ึ เปน็ ภาษาหลักทีน่ ิยมใช้ในการสร้างเวบ็ โดยมีหลักการใช้งานเบื้องต้นดังนี้ 1). คาสัง่ (Tag) คอื ลักษณะเฉพาะทโี่ ดดเดน่ ของภาษา HTML ทใ่ี ช้ในการระบคุ าส่งั โดยใช้ คาสง่ั เขยี นลงในเครอื่ งหมาย less-than bracket (<) และ greater-than bracket (>) โดยท่ี Tag จะ แบง่ ได้เปน็ สองลักษณะคือ 1.1 Tag เดย่ี ว เป็น Tag ท่ีมแี ค่ตวั เดยี ว ไมต่ ้องมกี ารปิดรหสั เชน่ 1.2 Tag เปิด-ปิด เป็น Tag ที่มลี ักษณะการใชง้ านที่ต้องใชเ้ ป็นคดู่ ังนี้ เป็น Tag เปิด และ เป็น Tag ปิด และจะมีลกั ษณะการใชง้ านในรปู แบบ 2). ลักษณะ (Attribute) คอื ตวั บอกรายละเอียดของ Tag น้ัน โดยจะเขียนระบุไวใ้ น Tag เปิด เชน่ เปน็ การระบวุ า่ ตวั อักษรใน Tag น้ี ให้ชดิ ซา้ ย เป็นตน้ 3). Non-Case Sensitive คอื การใช้ตัวพิมพ์ใหญ่ เช่น <BR> หรือตวั พิมพ์เล็ก เช่น <br> จะให้ผลลัพธท์ ี่ไมต่ ่างกัน 9.ครแู สดงรูปภาพเพ่ืออธบิ ายโครงสรา้ งภาษา HTML เบอ้ื งต้น ภาษา HTML มโี ครงสร้างพ้ืนฐานคือ เร่มิ ต้นดว้ ย Tag <html> จะจบดว้ ย </html> เสมอ ก่อนทีจ่ ะใสค่ าส่ังอนื่ ๆ ลงไป ซึง่ มีอยู่ 2 กลุม่ หลักไดแ้ ก่

34 1). Head คาสั่งส่วนนีจ้ ะอยดู่ ้านบนของโค้ด โดยทเี่ ป็นคาส่ังทใ่ี ชอ้ ธบิ ายและกาหนดลักษณะ รายละเอยี ดเก่ยี วกบั เวบ็ เพจ โดยจะไมแ่ สดงผลท่เี ว็บเพจโดยตรง 2). Body คาสง่ั สว่ นนจี้ ะเปน็ คาสั่ง ตา่ งๆ ทใี่ ช้เก่ียวกับการแสดงผลโดยตรงและรปู แบบ ตา่ งๆ โดยทท่ี ุกอยา่ งจะแสดงผลบนเวบ็ เบราเซอร์โดยตรง 10.ครใู ช้สือ่ Power Point ประกอบการอธิบายเรอื่ งคาสงั่ HTML เบ้อื งตน้ ได้แก่ 1). คาสง่ั ในส่วนของ Head (Head Section Tag)Head Section เปน็ คาสงั่ ทง้ั หมดภายใต้ Tag <head></head> เป็นสว่ นทใ่ี ช้อธบิ ายเกี่ยวกับข้อมูลเฉพาะของหน้าเว็บน้ันๆ เชน่ ช่อื เรื่องของ หน้าเวบ็ (Title), ช่ือผจู้ ัดทาเวบ็ (Author), คยี เ์ วริ ์ดสาหรบั การค้นหา (Keyword) โดยมี Tag ทส่ี าคัญใน เบอ้ื งต้น ไดแ้ ก่ 2). คาสัง่ ในสว่ นของ Body (Body Section Tag) คอื คาสั่งทง้ั หมดภายใต้ Tag <body></body> และแบ่งกลมุ่ คาส่ังไดด้ ังน้ี เป็นสว่ นเนื้อหาหลกั ของหน้าเวบ็ ซง่ึ การแสดงผลจะมีการ ใช้ Tag จานวนมากขึ้นอยู่กับลกั ษณะของข้อมูล เช่น รปู ภาพ เสียง วิดโี อหรือมลั ตมิ เิ ดยี ต่างๆ รวมถึง ข้อความเนื้อหาเว็บซึ่งเปน็ ส่วนการทางานหลักของเว็บดังน้ี 11.ครูใหค้ วามรเู้ พิม่ เติมนอกเหนอื จากเนื้อหาการเรียนการสอน เกยี่ วกบั เงื่อนไขตามหลัก เศรษฐกิจพอเพียง ในการตัดสินใจและการปฏบิ ัติกิจกรรมต่าง ๆ ให้อย่ใู นระดบั พอเพียงน้นั ตอ้ งอาศยั ทง้ั ความรู้ และคุณธรรมเป็นพืน้ ฐาน กล่าวคอื (1) เงื่อนไขความรู้ เป็นความรอบรเู้ กยี่ วกับวิชาการต่าง ๆ ทเ่ี ก่ยี วข้อง ความรอบคอบท่จี ะนา ความรเู้ หลา่ น้ันมาพิจารณาให้เชอ่ื มโยงกนั เพื่อการวางแผน และความระมัดระวงั ในขัน้ ปฏิบตั ิ

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

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

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

38 แผนการจดั การเรยี นรแู้ บบบรู ณาการที่ 4 หนว่ ยท่ี 3 รหัส 2204-2009 การสรา้ งเว็บไซต์ (2-2-3) สอนครัง้ ท่ี 4 (13-16) ชอ่ื หน่วย/เร่ือง ภาษาและเคร่อื งมือในการสรา้ งเว็บไซต์ จานวน 4 ช.ม. สาระสาคัญ ภาพรวมของการสรา้ งเว็บไซต์นน้ั มคี วามจาเปน็ จะต้องทราบว่า ภาษาและโปรแกรมต่างๆ ที่ใช้ ในการสรา้ งเวบ็ ไซตน์ ั้น มีอะไรบา้ งในภาพกวา้ งๆ เพ่ือให้ผสู้ รา้ งเว็บไซต์สามารถเลอื กเครื่องมือในการ สร้างเวบ็ ไซตไ์ ด้อย่างมปี ระสทิ ธภิ าพ และตรงความต้องการของผู้วา่ จ้างหรือเจ้าของเวบ็ ไซต์ จดุ ประสงคก์ ารเรียนรู้ 4. สามารถเขยี นภาษา HTML เบื้องต้นได้ 5. มีคุณธรรม จริยธรรม และค่านยิ มทด่ี ีในการใช้คอมพิวเตอร์ 6. มีการพัฒนาคณุ ธรรม จริยธรรม คา่ นิยม และคุณลักษณะอนั พึงประสงคข์ องผสู้ าเรจ็ การศกึ ษา สานกั งานคณะกรรมการการอาชีวศกึ ษา ที่ครูสามารถสงั เกตได้ขณะทาการสอนในเร่ือง 6.1 ความมมี นุษยสัมพนั ธ์ 6.2 ความมีวินัย 6.3 ความรบั ผดิ ชอบ 6.4 ความซ่อื สัตย์สจุ ริต 6.5 ความเช่ือมัน่ ในตนเอง 6.6 การประหยดั 6.7 ความสนใจใฝ่รู้ 6.8 การละเวน้ สงิ่ เสพตดิ และการพนัน 6.9 ความรกั สามัคคี 6.10 ความกตัญญูกตเวที สมรรถนะรายวิชา 1. แสดงความรูเ้ กยี่ วกบั กระบวนการ โครงสรา้ งการทางาน และไวยากรณ์ ของโปรแกรมภาษาในการสร้างเวบ็ ไซต์ 2. ประยกุ ตใ์ ช้โปรแกรมภาษาหรอื โปรแกรมสาเรจ็ รปู สาหรับสร้างเวบ็ ไซต์ และการติดตัง้ และอัพโหลด (Upload) เว็บไซต์ เนอื้ หาสาระ 3. การใช้ภาษา HTML เบือ้ งต้น(ตอ่ )

39 กิจกรรมการเรยี นรู้ ขั้นนาเข้าสบู่ ทเรียน 1.ครใู ช้เทคนิคการสอนแบบซิปปาโมเดล (CIPPA MODEL) โดยการทบทวนความรู้เดิมจาก สัปดาห์ท่ีผา่ นมา โดยดึงความรู้เดิมของผ้เู รียนในเร่อื งท่จี ะเรยี น เพ่ือช่วยให้ผเู้ รียนมคี วามพรอ้ มในการ เช่ือมโยงความรใู้ หม่กบั ความรู้เดมิ ของตน ผู้สอนใชก้ ารสนทนาซกั ถามให้ผ้เู รยี นเลา่ ประสบการณ์เดิม หรอื ใหผ้ ูเ้ รียนแสดงโครงความรูเ้ ดมิ (Graphic Organizer) ของตน 2.ผู้เรียนบอกความสาคัญของการศึกษาภาษา HTML เบอื้ งต้น 3.ครแู นะนาให้ผ้เู รียนมีสมาธิในการเรียนและปฏบิ ัติตามอย่างมสี ติ ขน้ั สอน 4.ครใู ชเ้ ทคนคิ วิธสี อนแบบสาธิต (Demonstration Method) สาธติ และอธิบายตัวอยา่ งการใช้ งานภาษา HTML เบ้ืองต้น โดยผเู้ รยี นปฏิบัตติ าม ซง่ึ มีขัน้ ตอนการปฏิบัตดิ งั นี้ 1). เปิดโปรแกรม Notepad และ เขียนโคด้ ดงั กล่าวลงไป 2). คลกิ ท่ี File > Save As หรอื Save (กรณีทบี่ นั ทึกไฟล์ครง้ั แรก) จะปรากฏหนา้ ตา่ ง Save As 2.1 ไปทโี่ ฟลเดอร์ท่ีต้องการบันทกึ ไฟล์ 2.2 เลอื ก Save as type เป็น All Files จากน้นั ต้งั ชือ่ File Name ว่า newyear.html 2.3 เลอื ก Encoding เป็น Unicode 2.4 กด Save

40 3). ไปยังโฟลเดอรท์ ี่บนั ทึกไฟล์ html ไว้ ให้คลิกขวาท่ีไฟล์แล้วไปที่ Open with > Internet Explorer 4). Internet Explorer จะเปดิ หนา้ เว็บเพจที่ไดเ้ ขียนไวข้ น้ึ มา ซ่ึงจะแสดงผลได้ดังน้ี 5.ครูใช้ส่ือ Power Point ประกอบการอธิบายตัวอยา่ งคาส่ังต่างๆ เกยี่ วกบั ข้อความ ซ่งึ มีดงั น้ี เป็นการตดั ข้อความข้ึนบรรทัดใหม่ โดยพมิ พ์ไวก้ ่อนหน้าขอ้ ความที่ต้องการตัดขึน้ บรรทดั ใหม่ เป็นคาสงั่ ข้ึนย่อหน้าใหม่ เปน็ คาสง่ั เวน้ วรรค โดย &nbsp; 1 ตวั มคี ่าเทา่ กับการกด spacebar 1 ครัง้ เปน็ คาส่งั จัดให้ข้อความอยกู่ ึ่งกลางหน้าจอ เปน็ คาสงั่ กาหนดขนาดตวั อักษร แทนดว้ ยตัวเลข เปน็ คาสั่งกาหนดสตี ัวอักษร แทนดว้ ยสใี นภาษาอังกฤษหรือโคด้ สี เปน็ การกาหนดรปู แบบตวั อักษร เชน่ Arial

41 เปน็ การทาตวั หนา (Bold) เปน็ การทาตวั เอยี ง (Italic) เปน็ การทาตวั ขดี เสน้ ใต้ (Underline) ในกรณีท่ีตอ้ งการกาหนดลักษณะหลายลักษณะให้แก่ข้อความหน่งึ ทาไดโ้ ดยการซ้อน Tag โดยการนา Tag เขียนไวใ้ นอีก Tag หนง่ึ ทาแบบนีซ้ อ้ นกนั ไปเร่อื ยๆ เชน่ 6.ผูเ้ รยี นแกไ้ ขโค้ดเว็บเพจโดยใชไ้ ฟล์เดิม จากข้อ 4 ใหเ้ ป็นดงั ภาพด้านล่างนี้ 7.ครแู ละผเู้ รยี นสาธิตการใสส่ ีพ้นื หลงั ใหเ้ ว็บเพจซึ่งการใส่สใี ห้กบั พ้ืนหลงั ของเว็บเพจ สามารถทาได้ โดยการพิมพ์ Tag นล้ี งใน<body></body> เชน่ เมอ่ื ตอ้ งการให้พ้นื หลงั เป็นสี แดงใหใ้ ส่ Tag ลงไปใน <body></body> ดังตัวอยา่ งน้ี 8.ผเู้ รียนสรา้ งเว็บเพจขอ้ มลู ส่วนตัวของผู้เรยี นด้วยภาษา HTML ตามคาสัง่ ดงั ต่อไปน้ี 1). สรา้ งไฟล์ช่อื data.html 2). กาหนดชอื่ เรื่องของหน้าเว็บ (Title) เป็นขอ้ มลู สว่ นตวั 3). บรรทัดแรกให้แสดง ชื่อ-นามสกลุ และช่อื เล่น 4). บรรทดั ทสี่ องใหแ้ สดง วันเกดิ และอายุ 5). กาหนดรปู แบบตัวอกั ษรเป็นตวั หนาและสตี วั อกั ษรเปน็ สีขาว 6). กาหนดสพี ้ืนหลังเปน็ สดี า 7). แสดงผลลพั ธ์ทางโปรแกรม Web Browser

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

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

44 จงเลือกคาตอบทถี่ ูกต้องที่สุดเพยี งข้อเดยี ว 1. ขอ้ ใดเปน็ ภาษาหลักทใี่ ชใ้ นการเขยี นเวบ็ ไซต์ทว่ั ไป ทม่ี ีการใช้กนั มาอย่างแพรห่ ลายและยาวนานต้งั แต่ ตน้ ทศวรรษท่ี 90 ก. HTML ข. XHTML ค. BASIC ง. PASCAL 2. HTML และ CSS ทาหน้าที่คนละอย่างในเวลาเดียวกนั จะมผี ลอย่างไร ก. รบกวนซ่ึงกันและกัน และแยกจากกันอยา่ งเดด็ ขาด ข. รบกวนซ่ึงกนั และกัน และไมแ่ ยกจากกนั อย่างเด็ดขาด ค. ไมร่ บกวนซ่งึ กันและกัน และแยกจากกันอย่างเดด็ ขาด ง. ไม่รบกวนซงึ่ กันและกนั แต่ไมแ่ ยกจากกันอยา่ งเดด็ ขาด 3. ขอ้ ใดคือองค์กรกลางที่คอยกาหนดมาตรฐานตา่ งๆ เก่ยี วกับอนิ เทอรเ์ นต็ ก. WWW ข. WC3 ค. C3W ง. W3C 4. ข้อใดคือเวบ็ แอพพลิเคช่นั ทใี่ ช้โดยทว่ั ไป ก. Media Player ข. สว่ นทีน่ บั จานวนผู้เข้าชมเวบ็ ไซต์ (Visitor Count) ค. MP3 ง. Chrome 5. สัญลกั ษณ์นี้คืออะไร ก. โปรแกรมเกยี่ วกบั การนาเสนอผลงาน ข. โปรแกรมเกย่ี วกับการจัดการฐานข้อมูล ค. โปรแกรมสาหรบั สรา้ งสื่อต่างๆ ท้งั ภาพเคล่ือนไหว การนาเสนอ แบบทดสอบ หนังสือ อิเล็กทรอนิกสแ์ ละส่ือกราฟิกอิเลก็ ทรอนกิ ส์อืน่ ๆ ง. โปรแกรมเกย่ี วกับการประมวลผลคา

45 6. สญั ลักษณน์ ค้ี ืออะไร ก. โปรแกรมสร้างเว็บไซต์ทใี่ ช้สร้างไดโ้ ดยสะดวก ไมซ่ บั ซ้อน และปรับแตง่ รายละเอียดตา่ งๆ ชอื่ Dreamweaver ข. โปรแกรมเกย่ี วกับการจัดการฐานข้อมูล ค. โปรแกรมเกยี่ วกบั การนาเสนอผลงาน ง. โปรแกรมเกย่ี วกบั การประมวลผลคา 7. หากตอ้ งการใสส่ ีให้กับพื้นหลังของเว็บเพจเปน็ สีเหลือง ตอ้ งใช้คาสัง่ ใด ก.<body bgcolor=\"red\" ></body> ข. <body bgcolor=\"yellow\" ></body> ค. <body bgYellow \"yellow\" ></body> ง. <body bgYellow=\"Hello\" ></body> 8. <html></html> คาสง่ั นีห้ มายถึงอะไร ก. คาสั่งเรม่ิ ต้นทใ่ี ช้กาหนดจุดเรม่ิ ต้นและสน้ิ สุดของโคด้ ภาษา HTML ข. คาส่ังเพื่อกาหนดว่า คาสั่งภายในคาสั่งนเ้ี ป็นคาสง่ั ในส่วนของ Head ค. คาสงั่ เพื่อกาหนดช่ือของหนา้ เวบ็ เพจ ง. คาสง่ั เพือ่ กาหนดวา่ คาส่ังภายในคาส่ังนีเ้ ป็นคาส่งั ในสว่ นของ Body 9. จงเลอื กข้อท่เี ป็น Tag เด่ยี ว ก. <body bgYellow=\"Hello” ></body> ข. <title>yellow</title> ค. <BR> ง. <bodybgcolor=\"red”></body> 10. Tag <p> ขอ้ ความ </p> เปน็ คาสงั่ ให้ทาอะไร ก. เปน็ คาสง่ั ขึน้ ย่อหนา้ ใหม่ ข. เป็นการตดั ข้อความข้ึนบรรทัดใหม่ ค. เป็นการทาตัวหนา ง. เปน็ การกาหนดรปู แบบตวั อักษร

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

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

48 เนอื้ หาสาระ 1. แนะนาโปรแกรม Adobe Dreamweaver CS6 2. ความสามารถของโปรแกรม Adobe Dreamweaver CS6 3. การตดิ ต้งั โปรแกรม Adobe Dreamweaver CS65. แผนภมู โิ ครงสร้าง (Structure chart) กิจกรรมการเรยี นรู้ ข้ันนาเข้าส่บู ทเรียน 1. ครกู ลา่ วว่าโปรแกรม Adobe Dreamweaver เปน็ โปรแกรมสาหรับสรา้ งเวบ็ ไซต์ทีน่ ิยมใช้ กนั เปน็ จานวนมาก ดว้ ยเหตผุ ลทีว่ า่ โปรแกรม Adobe Dreamweaver นน้ั ครอบคลมุ และสะดวกต่อการ ใช้งาน 2.ผเู้ รยี นบอกประสบการณ์การการใชง้ านโปรแกรม Adobe Dreamweaver หรือโปรแกมทใี่ ช้ สรา้ งเวบ็ ไซต์อืน่ 3.ผเู้ รียนทาแบบประเมิณผลก่อนเรยี น ขัน้ สอน 4.ครใู ช้เทคนิควธิ สี อนแบบบรรยาย (Lecture Method) เพือ่ แนะนาใหผ้ ู้เรยี นรู้จักกับโปรแกรม Adobe Dreamweaver CS6 ซึ่งเป็นโปรแกรมสาหรับสรา้ งและพัฒนาเวบ็ ไซตท์ ี่พฒั นาโดยบริษัท Adobe โดยเป็นท่ีนิยมมากในปจั จุบนั เพราะว่ามหี น้าตาการใชง้ านทเี่ รียนรไู้ ดง้ ่ายสาหรบั ทุกคน ไมว่ ่าจะ เปน็ มือใหมห่ รือมืออาชีพในด้านการสร้างเวบ็ ไซต์ก็ตาม เพราะวา่ สามารถใช้งานได้ครอบคลุมตัง้ แต่สร้าง เว็บไซตต์ กแต่ง พฒั นา ไปถงึ ขนั้ ตอนการอัพโหลดและนาไปใช้ โดยในการสร้างเวบ็ ไซตน์ ั้น ไมจ่ าเปน็ ที่ จะต้องเขยี นโค้ดภาษา HTML ด้วยตัวเอง สามารถใช้โปรแกรมในการออกแบบและจดั วางเน้อื หาใน เวบ็ ไซตโ์ ดยที่โปรแกรมจะเขยี นโคด้ ใหโ้ ดยอตั โนมตั ิ ทาใหส้ ามารถทางานได้อย่างรวดเรว็ ข้ึน นอกจากนั้น ยงั รองรบั ภาษาอื่นๆ อีกมากมาย รวมถงึ รองรับเครือ่ งมอื อ่ืนๆ ในการสร้างเว็บไซต์ เช่น CSS เป็นตน้ และ ใช้ประยกุ ตร์ ว่ มกบั เว็บแอพพลเิ คชั่นอน่ื ๆ ได้ ปัจจบุ ัน Dreamweaver มเี วอรช์ น่ั ล่าสุดคือ Adobe Dreamweaver CC แต่ยงั ไม่เป็นท่ีนิยมนกั โดยในเลม่ นจ้ี ะกลา่ วถงึ การสร้างเว็บไซตโ์ ดยใชเ้ วอร์ชั่น CS6 เปน็ หลกั ซ่ึงได้รบั ความนิยมมากกว่า โดยมี ท้งั เวอรช์ ่ันสาหรับ Windows และ Mac OS

49 5.ครใู ช้สื่อ Power Point ประกอบการอธิบายความสามารถพื้นฐานของโปรแกรม Adobe Dreamweaver CS6 ซง่ึ มีดงั น้ี 1). มีการทางานแบบ WYSIWYG (What You See Is What You Get) คือ สามารถใช้ อนิ เตอรเ์ ฟสของโปรแกรมในการสรา้ งเวบ็ เพจได้เลย และโปรแกรมจะเขียนโค้ด HTML 2). ในกรณีท่ีไม่ต้องการทางานแบบ WYSIWYG และต้องการเขียนโคด้ เองสามารถใช้งาน เป็น Editor แบบเดียวกันกับโปรแกรม Notepad ได้ โดยจะมเี คร่ืองมือตา่ งๆ ท่จี ะชว่ ยใหเ้ ขยี นโค้ดไดง้ ่าย และยดื หยุน่ ขน้ึ