ชุดที่9

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

2 การจัดสร้างเฟรม บัตรคาส่งั สาหรับนักเรยี น ชุดการเรียนร้กู ารสรา้ งเวบ็ เพจด้วยภาษา HTML รายวชิ าเทคโนโลยี 3 รหัสวิชา ง23102 ชั้นมัธยมศกึ ษาปีท่ี 3 กลุ่มสาระการเรยี นรู้การงานอาชพี และเทคโนโลยี ชุดที่ 9 เร่ือง การจัดสร้าง เฟรม ใชเ้ วลาจานวน 2 ช่วั โมง ให้นักเรยี นปฏบิ ัตดิ ังน้ี 1. นกั เรยี นแบ่งกลุม่ กล่มุ ละ 4 – 5 คน โดยคละกันระหวา่ งเกง่ ปานกลางและอ่อน แลว้ เลอื กประธานกลมุ่ และเลขานุการกลุม่ พร้อมตัง้ ช่อื กลุ่ม 2. นักเรยี นรับชดุ การเรยี นรู้การสรา้ งเวบ็ เพจดว้ ยภาษา HTML รายวชิ าเทคโนโลยี 3 รหสั วชิ า ง23102 ชนั้ มธั ยมศึกษาปีที่ 3 กลุม่ สาระการเรียนรู้การงานอาชพี และเทคโนโลยี ชุดท่ี 9 เรือ่ ง การจดั สรา้ งเฟรม กลมุ่ ละ 1 ชุด 3. นกั เรียนศึกษาบัตรคาสัง่ ให้เข้าใจอยา่ งละเอยี ด และปฏบิ ัติตามขั้นตอนท่กี าหนดให้ 4. นักเรียนอา่ นมาตรฐานการเรยี นรู้ ตัวช้ีวดั สาระสาคัญและ จุดประสงคก์ ารเรียนรู้ 5. นักเรยี นทาแบบทดสอบก่อนเรยี นด้วยความซ่ือสัตยไ์ มเ่ ปดิ ดเู ฉลยกอ่ น จานวน 10 ข้อ เวลา 15 นาที ลงในกระดาษคาตอบก่อนเรยี น 6. ตรวจแบบทดสอบกอ่ นเรียนดว้ ยตนเอง และเขียนคะแนนที่ได้ในชอ่ งคะแนนท่ไี ดใ้ น กระดาษคาตอบก่อนเรยี น 7. นักเรียนศึกษาบัตรเนอื้ หา ทาบัตรกิจกรรม แลว้ ทาตามคาชีแ้ จงตามลาดบั ดว้ ยความตัง้ ใจ และความซ่ือสัตย์ไมเ่ ปิดดเู ฉลยกอ่ น 8. เม่ือเสรจ็ ทกุ ขั้นตอน ใหเ้ ปิดดบู ัตรเฉลยกจิ กรรม และตรวจคาตอบ หากตอบผิด หรอื ไม่แนใ่ จให้กลบั ไปศึกษาใหม่อกี คร้งั 9. นกั เรยี นทาแบบทดสอบหลงั เรียนด้วยความซ่ือสตั ย์ไม่เปดิ ดเู ฉลย จานวน 10 ขอ้ เวลา 15 นาที ลงในกระดาษคาตอบหลงั เรียน 10. ตรวจแบบทดสอบหลงั เรียนดว้ ยตนเอง และเขียนคะแนนที่ได้ในชอ่ งคะแนนทไี่ ดใ้ น กระดาษคาตอบหลังเรียน 11. สง่ ชุดการเรียนรกู้ ารสรา้ งเว็บเพจดว้ ยภาษา HTML รายวชิ าเทคโนโลยี 3 รหสั วชิ า ง23102 ช้นั มัธยมศกึ ษาปที ่ี 3 กลมุ่ สาระการเรยี นรู้การงานอาชพี และเทคโนโลยี ใหค้ รผู สู้ อนเพื่อตรวจ คาตอบอกี คร้ังและตรวจสอบคะแนนกอ่ นเรยี น ระหว่างเรียน และหลังเรยี น

3 การจัดสร้างเฟรม แผนผังแสดงขนั้ ตอนการใช้ ชุดการเรยี นรู้การสรา้ งเว็บเพจดว้ ยภาษา HTML มีดังนี้ อ่านคาชี้แจง / บัตรคาสงั่ ศึกษาตวั ชว้ี ัด และจดุ ประสงค์การเรยี นรู้ ทาแบบทดสอบก่อนเรยี น ศึกษาบัตรเน้ือหา และทากิจกรรมตามบตั รกจิ กรรม ทาแบบทดสอบหลงั เรียน ผา่ นเกณฑ์ 80% ไม่ผา่ นเกณฑ์ ศกึ ษาชุดการเรยี นรกู้ ารสรา้ งเวบ็ เพจด้วยภาษา HTML ชดุ ตอ่ ไป

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

5 การจดั สร้างเฟรม แบบทดสอบกอ่ นเรียน เร่อื ง การสรา้ งเว็บเพจดว้ ยภาษา HTML รายวชิ าเทคโนโลยี 3 รหัสวิชา ง23102 ชั้นมัธยมศึกษาปที ี่ 3 กลุม่ สาระการเรียนรู้การงานอาชีพและเทคโนโลยี ชุดที่ 9 เร่ือง การจดั สรา้ งเฟรม คาช้แี จง นกั เรียนเลอื กคาตอบที่ถูกต้องที่สุดเพียงคาตอบเดียว แลว้ ทาเคร่ืองหมาย  ลงในกระดาษคาตอบ (10 คะแนน) 1. ขอ้ ใดกลา่ วถงึ ความหมายของเฟรม (Frame) ได้ถูกต้องมากทส่ี ุด ก. ณิชารยี ์ แบ่งพ้ืนทขี่ องข้อมลู เอกสารเอชทเี อ็มแอล ข. ปรณิ ดา ตกแต่งของจอภาพให้มคี วามน่าสนใจมากย่ิงขน้ึ ค. วราลี ปรบั ขนาดสว่ นแสดงผลของโปรแกรมเว็บเบราวเ์ ซอร์ ง. เกวลนิ แบ่งส่วนแสดงผลของโปรแกรมเวบ็ เบราว์เซอร์ออกเปน็ ส่วน 2. ข้อใดกลา่ วไม่ถูกต้องเกี่ยวกบั คาสัง่ เฟรม (Frame) ของภาษาแอชท่เี อ็มแอล ก. สามารถแบง่ ออกเปน็ ส่วนไดม้ ากกว่า 2 ส่วน ข. ลกั ษณะของเฟรมจะประกอบขึ้นจากรปู สเ่ี หล่ยี ม ค. การแบ่งหน้าจอการแสดงผลแตล่ ะสว่ น มคี วามเปน็ อิสระต่อกัน ง. สามารถทาการแบ่งส่วนของหนา้ จอออกเปน็ สามเหลีย่ ม ห้าเหลย่ี ม หรือวงกลมได้ 3. เมือ่ ใช้คาส่งั ในการแบง่ สว่ นของจอภาพออกเป็นเฟรม คาสั่งในเอกสารเอชทีเอ็มแอลในข้อใด ไม่มคี วามจาเปน็ ก. คาสั่ง <Title> ข. คาส่งั <Body> ค. คาสง่ั <Html> ง. คาส่ัง <Frame>

6 การจดั สร้างเฟรม 4. คาส่ังเร่มิ ตน้ ท่ีใช้สาหรับการสร้างเฟรม (Frame) คือข้อใด ก. คาสง่ั <Frame> ข. คาส่ัง <Frameset> ค. คาสัง่ <FrameBorder> ง. คาสงั่ <FrameBody> 5. ในการกาหนดเฟรม (frame) ตามจานวนแถว โดยแบ่งใหเ้ ป็น 3 เฟรม จะใชค้ าส่ังในขอ้ ใด ก. <Frameset rows = \" 50,*\"> ข. <Frameset cols = \" 50,*\"> ค. <Frameset cols = \" 400, 200, 200 \"> ง. <Frameset rows = \"200, 200, 200\"> 6. จากคาสั่งต่อไปนี้ (Frameset Cols = \"20%,30%,*\") ข้อใดกลา่ วไมถ่ ูกต้อง ก. ส่วนแสดงผลของโปรแกรมเว็บเบราวเ์ ซอรจ์ ะถูกแบ่งออกเป็น 3 สว่ น ข. เฟรมแรกจะมขี นาด 20% ของส่วนแสดงผลของโปรแกรมเว็บเบราวเ์ ซอร์ ค. เฟรมสุดทา้ ยจะมขี นาด 50% ของส่วนแสดงผลของโปรแกรมเว็บเบราว์เซอร์ ง. ส่วนแสดงผลของโปรแกรมเวบ็ เบราว์เซอรจ์ ะถูกแบ่งออกทางแนวนอนของหนา้ จอ 7. ในการกาหนดเฟรม (FRAME) ตามแนวตง้ั โดยแบง่ ใหเ้ ปน็ 2 เฟรม จะใชค้ าสัง่ ในขอ้ ใด ก. <Frameset rows = \" 50,*\"> ข. <Frameset cols = \" 50,*\"> ค. <Frameset cols = “ 50,*,50”> ง. <Frameset rows = “ 50,*,50”> 8. การกาหนดเส้นขอบของเฟรม สามารถทาได้โดยการใชค้ าส่ังในข้อใด ก. <Frame Border= \"yes\"> ข. <Frameset Border= \"yes\"> ค. <Frame FrameBorder= \"yes\"> ง. <Frameset FrameBorder = \"yes\">

7 การจดั สรา้ งเฟรม 9. การกาหนดเส้นขอบของเฟรม จะตอ้ งอยู่ภายใต้คาสง่ั ในข้อใด ก. คาสั่ง Frame ข. คาส่ัง Border ค. คาสั่ง Noframe ง. คาสั่ง Frameset 10. ขอ้ ใดคือประโยชน์ของการนาเฟรมเขา้ มาใช้ในเอกสารเวบ็ ก. เพม่ิ ความเรว็ ในการดึงของเอกสารเว็บ ข. เพื่อลดพื้นทข่ี องการแสดงผลข้อมูลของเอกสารเวบ็ ค. สามารถแสดงขอ้ มูลได้หลายแฟ้มข้อมูลในหน้าตา่ ง เดียวกนั ง. ไมส่ ิน้ เปลอื งหนา้ จอ ในกรณีที่เชื่อมโยงข้อมลู ไปยังเอกสารใหม่

8 การจดั สรา้ งเฟรม กระดาษคาตอบแบบทดสอบกอ่ นเรียน เรอื่ ง การสร้างเว็บเพจดว้ ยภาษา HTML รายวชิ าเทคโนโลยี 3 รหัสวิชา ง23102 ชน้ั มธั ยมศึกษาปที ่ี 3 กลุ่มสาระการเรียนรู้การงานอาชพี และเทคโนโลยี ชดุ ที่ 9 เรือ่ ง การจดั สร้างเฟรม ช่ือ – นามสกุล ........................................................................ช้นั มัธยมศึกษาปีท่ี 3 เลขที่ ........ ขอ้ ก ข ค ง คะแนนเต็ม 10 1 คะแนนได้ 2 3 ผลการประเมิน 4  ดีมาก 5  ดี 6  ปานกลาง 7  ปรบั ปรุง 8 9 (ลงชอ่ื ).....................................ผู้ประเมนิ 10 (นายณัฐวุฒิ ณรงคเ์ ดชา) วนั ท่ี ........เดอื น.....................พ.ศ.......... เกณฑก์ ารประเมนิ อยูใ่ นเกณฑ์ ดมี าก คะแนนระหว่าง 9 - 10 อยูใ่ นเกณฑ์ ดี คะแนนระหว่าง 7 - 8 อยู่ในเกณฑ์ ปานกลาง คะแนนระหวา่ ง 5 - 6 อยใู่ นเกณฑ์ ปรบั ปรงุ คะแนนระหว่าง 0 - 4

9 การจัดสรา้ งเฟรม บตั รเน้ือหา การจดั สร้างเฟรม 1. การสรา้ งเฟรม เฟรม คือ การแบ่งหนา้ เว็บเพจออกเปน็ ส่วน ๆ รูปแบบโครงสร้างเฟรมมดี งั น้ี <html> <head><title></title></head> <Frameset> <Frame> ... </Frameset> </html> 2. การกาหนดคณุ สมบตั ิของเฟรม กาหนดเส้นขอบของเฟรมได้ 2 วิธี คือ แสดงเสน้ ขอบของเฟรมหรือไม่แสดงเสน้ ขอบของเฟรม ท้ัง 2 วธิ ีสามารถใช้แอตทรบิ วิ ต์ FrameBorder ชื่อแอตทรบิ วิ ต์: frameborder รูปแบบ : <frameset frameborder =\"แสดงเส้นขอบ ของเฟรม (yes หรือ no)\"> border=\"ขนาดของเส้นขอบของเฟรม\"> ...</frameset> ตาแหนง่ ทใ่ี ช้ : อยู่ภายในแท็กเปิด <frameset>

10 การจดั สรา้ งเฟรม การตรงึ แนวหรือล็อกขนาดของเฟรม ชอ่ื แอตทริบวิ ต:์ Noresize รูปแบบ : <frameset><frame noresize> ...</frameset> ตาแหน่งที่ใช:้ อยู่ภายในแท็กเปดิ <frameset> การเปลย่ี นสขี องขอบเฟรม ชอ่ื แอตทรบิ วิ ต:์ Bordercolor รูปแบบ : <frameset bordercolor=\"ชอ่ื สีหรอื รหัสส\"ี > ...</frameset> ตาแหน่งทใ่ี ช้: อยภู่ ายในแท็กเปิด <frameset> การกาหนดแถบเลื่อน ชอ่ื แอตทริบิวต:์ Scrolling รปู แบบ : <frame Scrolling =\"Yes หรอื no\"> ...</frameset> ตาแหนง่ ทีใ่ ช้: อยู่ภายในแท็กเปิด <frame> การแทรกเฟรมไวภ้ ายในเว็บเพจ ช่ือแท็ก : iframe รปู แบบ : <iframe src =\"ชื่อไฟล์ HTML หรือช่อื เว็บไซต\"์ > ...</iframe> ตาแหนง่ ทใ่ี ช้: อยูภ่ ายในแท็กเปดิ <iframe>

11 การจดั สรา้ งเฟรม 3. การเช่ือมเว็บเพจระหว่างเฟรม การกาหนดเฟรมเปา้ หมาย ช่อื แอตทรบิ ิวต:์ Name รูปแบบ : <a href =\"ชือ่ ไฟลห์ รอื เว็บเพจ\" target=\"ช่อื ของเฟรมเปา้ หมาย\"> ...</a> ตาแหนง่ ทใี่ ช้: อยู่ภายในแท็กเปดิ <a> 4. กาหนดสีของจุดลงิ ค์ ช่ือแทก็ : Body รูปแบบ : <Body n = ชอื่ สีมาตรฐาน (n หมายถงึ Text, Link, VLink, Alink)> Text คอื กาหนดสีตัวอักษรปกติ Link คือ กาหนดสีตัวอักษรก่อนมีการเชอ่ื มโยง VLink คอื กาหนดสีจดุ เชื่อมโยงหลังจากคลิกใชง้ านแลว้ ALink คือ กาหนดสตี ัวอกั ษรขณะถูกเลอื ก ตาแหน่งทใ่ี ช้: อยู่ระหว่างแทก็ <Body> 5. การเช่ือมโยงอเี มลแอดเดรส สามารถสรา้ งจดุ เช่อื มโยงไปยังอีเมล์แอดเดรสไดโ้ ดยกาหนดค่าแอตทรบิ วิ ต์ ชื่อแท็ก: A แอตทริบวิ ต:์ Href รปู แบบ : <a href =\"mailto:ชื่ออเี มล์แอดเดรส\">...</a> ตาแหนง่ ท่ใี ช:้ อยรู่ ะหวา่ งแทก็ <Body

12 การจดั สรา้ งเฟรม ตัวอย่าง การสร้าง FRAME

13 การจัดสรา้ งเฟรม ตวั อยา่ ง การสรา้ ง FRAME <html> <head> <title> การสรา้ งเว็บ </title> </head> <frameset rows=\"30%,70%\"> <frame name=\"hard\" src=\"ok.html\"frameborder=\"yes\" > <frameset cols=\"23%,77%\"> <frame name=\"menu\" src=\"link.html\"frameborder=\"yes\" noresize> <frame name=\"chapter\" src=\"pp1.html\"frameborder=\"yes\"> </frameset> </frameset> <noframes></noframes> </html>

14 การจดั สร้างเฟรม บตั รกิจกรรมที่ 1 จงเขียนคาสั่งภาษา HTML ทม่ี ีความหมายตรงกับขอ้ ความทกี่ าหนด ดงั ตอ่ ไปน้ี (10 คะแนน) 1. การแบ่งเฟรมในแนวนอนออกเป็น 2 เฟรม เฟรมแรกหา่ งจากขอบ 140 พิกเซล (1 คะแนน) คาสั่ง คือ …………………………………………………………………………………………………………………. 2. การแบง่ เฟรมในแนวตงั้ ออกเปน็ 2 เฟรม เฟรมแรกห่างจากขอบ 200 พิกเซล และไมม่ ีแถบเล่ือน คาส่ัง คือ (1 คะแนน) …………………………………………………………………………………………….. 3. การแบ่งเฟรมในแนวนอนออกเปน็ 3 เฟรม เฟรมแรกขนาด 140 พิกเซล และเฟรมท่ี 2 ขนาด 450 พกิ เซล อีกส่วนคือพน้ื ที่ทีเหลือ (1 คะแนน) คาสั่ง คือ ............................................................................................................................. .... 4. การแบง่ เฟรมในแนวนอนออกเปน็ 2 สว่ น สว่ นบนสงู ขนาด 25% ของหนา้ จอ และกาหนดให้ ขอบเฟรมหายไป (1 คะแนน) คาส่ัง คอื ............................................................................................................................. .... 5. การแบง่ เฟรมในแนวต้งั ออกเปน็ 2 ส่วน สว่ นบนสงู ขนาด 30% ของหนา้ จอ และปอ้ งกันไมใ่ หผ้ ู้ใช้ ปรับขนาดของเฟรมได้ (1 คะแนน) คาสง่ั คือ ............................................................................................................................. .... 6. การแบ่งเฟรมในแนวนอนออกเปน็ 3 เฟรม ท่ีมีขนาดเท่ากนั (1 คะแนน) คาส่งั คอื ............................................................................................................................. .... 7. การแบง่ เฟรมในแนวตง้ั ออกเปน็ 3 เฟรม ที่มขี นาดเทา่ กนั (1 คะแนน) คาส่ัง คือ ............................................................................................................................. .... 8. การกาหนดใหเ้ ฟรมแสดงไฟลเ์ วบ็ เพจท่ชี อ่ื ว่า web.html (1 คะแนน) คาส่งั คือ ............................................................................................................................. .... 9. การกาหนดให้เฟรมแสดงไฟล์เว็บเพจที่ช่ือวา่ nut.html และตัง้ ชื่อเฟรมเพื่อการแสดงผลวา่ data_area (1 คะแนน) คาสงั่ คือ ............................................................................................................................. .... 10. การสั่งให้เชือ่ มโยงไฟล์ web2.html ให้ไปปรากฏในเฟรมที่ตงั้ ชอ่ื data_area (1 คะแนน) คาสัง่ คือ ............................................................................................................................. ....

15 การจดั สร้างเฟรม บัตรกิจกรรมท่ี 2 คาสง่ั ให้นักเรียนแบ่งกล่มุ กลุ่มละ่ 4-5 คน ใหท้ าเว็บไซด์ เกี่ยวกับเนือ้ หาวิชาท่ีเรยี น เชน่ วชิ าภาษาไทย คณิตศาสตร์ วทิ ยาศาสตร์ ฯลฯ ท้งั หมดข้นั ต่า 6 หน้า ประกอบดว้ ยเนอื้ หา 5 หนา้ และหนา้ ผู้จัดทา 1 หนา้ แลว้ นาไฟลเ์ วบ็ เชือ่ มโยง เอกสารเขา้ หากนั ส่งครูในรปู แบบรายงาน (รูปเลม่ 20 คะแนน) รปู แบบไฟล์ ตัวโปรแกรม Write CD และส่งมาท่ี Classroom (30 คะแนน) บนั ทึกช่ือไฟล์ : ช่ือเรอ่ื ง.html (web.html) ส่งงานมาท่ี E-mail: : https://classroom.google.com สง่ ห้องเรียนของตนเอง พมิ พ์หวั ข้อ ส่งงาน Project HTML ชือ่ นักเรียน ชั้น.. เลขที่............

16 การจัดสร้างเฟรม แบบทดสอบหลังเรียน เรอื่ ง การสร้างเว็บเพจด้วยภาษา HTML รายวชิ าเทคโนโลยี 3 รหัสวิชา ง23102 ชน้ั มธั ยมศกึ ษาปีที่ 3 กล่มุ สาระการเรยี นรู้การงานอาชีพและเทคโนโลยี ชดุ ที่ 9 เรือ่ ง การจดั สรา้ งเฟรม คาชีแ้ จง นักเรียนเลือกคาตอบที่ถูกต้องทีส่ ดุ เพียงคาตอบเดียว แล้วทาเครอื่ งหมาย  ลงในกระดาษคาตอบ (10 คะแนน) 1. การกาหนดเสน้ ขอบของเฟรม สามารถทาไดโ้ ดยการใชค้ าสงั่ ในข้อใด ก. <Frame Border= \"yes\"> ข. <Frameset Border= \"yes\"> ค. <Frame FrameBorder= \"yes\"> ง. <Frameset FrameBorder = \"yes\"> 2. จากคาสงั่ ต่อไปนี้ (Frameset Cols = \"20%,30%,*\") ขอ้ ใดกลา่ วไมถ่ ูกตอ้ ง ก. สว่ นแสดงผลของโปรแกรมเวบ็ เบราว์เซอรจ์ ะถูกแบ่งออกเป็น 3 สว่ น ข. เฟรมแรกจะมขี นาด 20% ของสว่ นแสดงผลของโปรแกรมเวบ็ เบราวเ์ ซอร์ ค. เฟรมสดุ ทา้ ยจะมขี นาด 50% ของส่วนแสดงผลของโปรแกรมเว็บเบราว์เซอร์ ง. สว่ นแสดงผลของโปรแกรมเวบ็ เบราวเ์ ซอร์จะถูกแบ่งออกทางแนวนอนของหนา้ จอ 3. ขอ้ ใดกลา่ วถงึ ความหมายของเฟรม (Frame) ได้ถูกตอ้ งมากที่สดุ ก. ณิชารีย์ แบ่งพ้ืนท่ีของข้อมลู เอกสารเอชทเี อ็มแอล ข. ปริณดา ตกแตง่ ของจอภาพให้มคี วามน่าสนใจมากยิ่งขึน้ ค. วราลี ปรับขนาดส่วนแสดงผลของโปรแกรมเว็บเบราว์เซอร์ ง. เกวลิน แบง่ สว่ นแสดงผลของโปรแกรมเว็บเบราวเ์ ซอร์ออกเป็นส่วน

17 การจัดสร้างเฟรม 4. เมื่อใชค้ าสงั่ ในการแบง่ ส่วนของจอภาพออกเป็นเฟรม คาสัง่ ในเอกสารเอชทีเอ็มแอลในขอ้ ใด ไมม่ คี วามจาเปน็ ก. คาสั่ง <Title> ข. คาสั่ง <Body> ค. คาสัง่ <Html> ง. คาสั่ง <Frame> 5. คาสัง่ เร่ิมตน้ ที่ใช้สาหรบั การสรา้ งเฟรม (Frame) คอื ข้อใด ก. คาส่ัง <Frame> ข. คาสัง่ <Frameset> ค. คาสัง่ <FrameBorder> ง. คาส่งั <FrameBody> 6. ในการกาหนดเฟรม (frame) ตามจานวนแถว โดยแบง่ ใหเ้ ปน็ 3 เฟรม จะใช้คาสั่งในข้อใด ก. <Frameset rows = \" 50,*\"> ข. <Frameset cols = \" 50,*\"> ค. <Frameset cols = \" 400, 200, 200 \"> ง. <Frameset rows = \"200, 200, 200\"> 7. ขอ้ ใดกลา่ วไม่ถกู ต้องเกี่ยวกับคาสงั่ เฟรม (Frame) ของภาษาแอชท่ีเอ็มแอล ก. สามารถแบง่ ออกเป็นส่วนไดม้ ากกวา่ 2 สว่ น ข. ลกั ษณะของเฟรมจะประกอบขึ้นจากรปู สี่เหลี่ยม ค. การแบง่ หน้าจอการแสดงผลแตล่ ะส่วน มีความเปน็ อิสระต่อกัน ง. สามารถทาการแบ่งส่วนของหนา้ จอออกเปน็ สามเหล่ียม ห้าเหล่ยี ม หรอื วงกลมได้ 8. ในการกาหนดเฟรม (FRAME) ตามแนวตัง้ โดยแบ่งให้เปน็ 2 เฟรม จะใชค้ าสง่ั ในขอ้ ใด ก. <Frameset rows = \" 50,*\"> ข. <Frameset cols = \" 50,*\"> ค. <Frameset cols = “ 50,*,50”> ง. <Frameset rows = “ 50,*,50”>

18 การจดั สรา้ งเฟรม 9. การกาหนดเสน้ ขอบของเฟรม จะตอ้ งอยู่ภายใต้คาสั่งในข้อใด ก. คาส่ัง Frame ข. คาสงั่ Border ค. คาสง่ั Noframe ง. คาสง่ั Frameset 10. ข้อใดคือประโยชน์ของการนาเฟรมเขา้ มาใช้ในเอกสารเวบ็ ก. เพ่มิ ความเรว็ ในการดึงของเอกสารเวบ็ ข. เพอ่ื ลดพน้ื ท่ีของการแสดงผลขอ้ มลู ของเอกสารเว็บ ค. สามารถแสดงข้อมลู ได้หลายแฟม้ ข้อมูลในหน้าต่าง เดยี วกัน ง. ไมส่ น้ิ เปลอื งหน้าจอ ในกรณที เี่ ช่ือมโยงข้อมูลไปยังเอกสารใหม่

19 การจดั สรา้ งเฟรม กระดาษคาตอบแบบทดสอบหลงั เรยี น เร่อื ง การสรา้ งเว็บเพจดว้ ยภาษา HTML รายวชิ าเทคโนโลยี 3 รหัสวิชา ง23102 ชน้ั มธั ยมศกึ ษาปที ่ี 3 กล่มุ สาระการเรียนรู้การงานอาชีพและเทคโนโลยี ชดุ ที่ 9 เร่อื ง การจัดสร้างเฟรม ช่ือ – นามสกุล ........................................................................ชั้นมธั ยมศึกษาปที ่ี 3 เลขที่ ........ ขอ้ ก ข ค ง คะแนนเต็ม 10 1 คะแนนได้ 2 3 ผลการประเมิน 4  ดมี าก 5  ดี 6  ปานกลาง 7  ปรบั ปรุง 8 9 (ลงชือ่ ).....................................ผ้ปู ระเมิน 10 (นายณฐั วฒุ ิ ณรงค์เดชา) วนั ท่ี ........เดือน.....................พ.ศ.......... เกณฑก์ ารประเมิน อย่ใู นเกณฑ์ ดมี าก คะแนนระหวา่ ง 9 - 10 อยใู่ นเกณฑ์ ดี คะแนนระหว่าง 7 - 8 อยใู่ นเกณฑ์ ปานกลาง คะแนนระหวา่ ง 5 - 6 อย่ใู นเกณฑ์ ปรับปรุง คะแนนระหวา่ ง 0 - 4

20 การจัดสร้างเฟรม เฉลยแบบทดสอบก่อนเรียน เรื่อง การสร้างเว็บเพจด้วยภาษา HTML รายวิชาเทคโนโลยี 3 รหัสวิชา ง23102 ชนั้ มธั ยมศกึ ษาปีที่ 3 กล่มุ สาระการเรยี นรู้การงานอาชพี และเทคโนโลยี ชุดที่ 9 เร่ือง การจดั สรา้ งเฟรม 1. ข 2. ค 3. ก 4. ข 5. ง 6. ง 7. ข 8. ง 9. ง 10. ค

21 การจัดสร้างเฟรม เฉลยแบบทดสอบหลังเรยี น เรอ่ื ง การสร้างเว็บเพจด้วยภาษา HTML รายวชิ าเทคโนโลยี 3 รหัสวิชา ง23102 ชน้ั มธั ยมศกึ ษาปีที่ 3 กลุ่มสาระการเรยี นรู้การงานอาชีพและเทคโนโลยี ชดุ ท่ี 9 เรื่อง การจัดสร้างเฟรม 1. ง 2. ง 3. ข 4. ก 5. ข 6. ง 7. ค 8. ข 9. ง 10. ค

22 การจัดสร้างเฟรม

23 การจัดสร้างเฟรม บัตรเฉลยกจิ กรรมที่ 1 จงเขียนคาส่ังภาษา HTML ทีม่ คี วามหมายตรงกบั ข้อความที่กาหนด ดงั ต่อไปนี้ (10 คะแนน) 1. การแบ่งเฟรมในแนวนอนออกเป็น 2 เฟรม เฟรมแรกหา่ งจากขอบ 140 พิกเซล (1 คะแนน) คาส่งั คือ <frameset rows = \"140,* \"> </frameset> 2. การแบง่ เฟรมในแนวตัง้ ออกเปน็ 2 เฟรม เฟรมแรกหา่ งจากขอบ 200 พิกเซล และไมม่ ีแถบเลื่อน คาสัง่ คือ (1 คะแนน) <frameset cols = \"200,* \" scrolling = \"no\"> </frameset> 3. การแบง่ เฟรมในแนวนอนออกเป็น 3 เฟรม เฟรมแรกขนาด 140 พิกเซล และเฟรมท่ี 2 ขนาด 450 พกิ เซล อีกสว่ นคือพื้นทท่ี ีเหลอื (1 คะแนน) คาสั่ง คือ <frameset rows = \"140,450,* \"> </frameset> 4. การแบ่งเฟรมในแนวนอนออกเป็น 2 สว่ น สว่ นบนสูงขนาด 25% ของหนา้ จอ และกาหนดให้ ขอบเฟรมหายไป (1 คะแนน) คาสง่ั คือ <frameset rows = \"25%,* \" frameborder = \"no\"> </frameset> 5. การแบง่ เฟรมในแนวต้ังออกเปน็ 2 สว่ น สว่ นบนสูงขนาด 30% ของหนา้ จอ และป้องกนั ไม่ใหผ้ ู้ใช้ ปรบั ขนาดของเฟรมได้ (1 คะแนน) คาสง่ั คือ <frameset cols = \"30%,* \" noresize = \"noresize\"> </frameset> 6. การแบ่งเฟรมในแนวนอนออกเป็น 3 เฟรม ที่มีขนาดเท่ากัน (1 คะแนน) คาสัง่ คอื <frameset rows = \" \",*, \" \" > </frameset> 7. การแบง่ เฟรมในแนวตง้ั ออกเป็น 3 เฟรม ที่มขี นาดเทา่ กนั (1 คะแนน) คาสั่ง คือ <frameset cols = \" \",*, \" \" > </frameset> 8. การกาหนดให้เฟรมแสดงไฟลเ์ ว็บเพจทชี่ ื่อว่า web.html (1 คะแนน) คาสง่ั คือ <frame src = \"web.html\"> 9. การกาหนดใหเ้ ฟรมแสดงไฟลเ์ ว็บเพจทชี่ อ่ื วา่ nut.html และตัง้ ชอ่ื เฟรมเพ่ือการแสดงผลวา่ data_area (1 คะแนน) คาสั่ง คือ <frame src = \"nut.html\" name = \"data_area\"> 10. การสั่งใหเ้ ชือ่ มโยงไฟล์ web2.html ให้ไปปรากฏในเฟรมทตี่ ัง้ ชอ่ื data_area (1 คะแนน) คาส่ัง คือ <A Href = \"web2.html\" target = \"data_area\">

24 การจดั สร้างเฟรม บัตรกิจกรรมท่ี 2 คาสัง่ ให้นกั เรยี นแบ่งกลมุ่ กล่มุ ละ 4-5 คน ใหท้ าเวบ็ ไซด์ เกี่ยวกับเน้ือหาวิชาท่ีเรียน เช่นวชิ าภาษาไทย คณิตศาสตร์ วทิ ยาศาสตร์ ฯลฯ ท้งั หมดข้นั ต่า 6 หนา้ ประกอบดว้ ยเน้ือหา 5 หน้า และหนา้ ผู้จัดทา 1 หนา้ แล้วนาไฟลเ์ ว็บเชื่อมโยง เอกสารเขา้ หากนั สง่ ครูในรูปแบบรายงาน (รูปเลม่ 20 คะแนน) รูปแบบไฟล์ ตัวโปรแกรม Write CD และสง่ มาที่ Classroom (30 คะแนน) บนั ทกึ ช่ือไฟล์ : ช่ือเรื่อง.html (web.html) ส่งงานมาที่ E-mail: : https://classroom.google.com ส่งหอ้ งเรียนของตนเอง พมิ พ์หวั ข้อ ส่งงาน Project HTML ช่อื นกั เรียน ชน้ั .. เลขท่ี............ แนวคำตอบ บัตรเฉลยกจิ กรรมที่ 2 (ตัวอย่ำงผลงำนนักเรยี น)

25 การจัดสร้างเฟรม บรรณานกุ รม กระทรวงศึกษาธิการ,สานกั งานคณะกรรมการการศึกษาข้ันพื้นฐาน. (2551). ตัวช้ีวัดและ สาระการเรยี นรู้แกนกลาง กลมุ่ สาระการเรยี นรู้การงานอาชพี และเทคโนโลยี ตามหลกั สูตรแกนกลางการศึกษาขนั้ พนื้ ฐาน พุทธศกั ราช 2551. สานกั วชิ าการ และมาตรฐานการศึกษา กรุงเทพฯ จันทรเ์ พญ็ เชอ้ื พานชิ . (2549). “นวตั กรรมการศึกษาไทย :รปู แบบการเรียนการสอน” นวัตกรรม การจดั การเรียนรู้ตามแนวปฏริ ูปการศึกษา. ศูนย์ตาราและเอกสารทาง วชิ าการ คณะศึกษาศาสตร์ จฬุ าลงกรณ์มหาวทิ ยาลยั . ชัยวฒั น์ สทุ ธิรตั น์ . (2552). 80 นวัตกรรมการจดั การเรียนรทู้ ี่เน้นผูเ้ รยี นเปน็ สาคัญ. กรงุ เทพฯ: บรษิ ทั แดเน็กซ์ อนิ เตอร์คอร์ปปอเรชน่ั . สุวทิ ย์ มลู คา และ อรทัย มลู คา (2545). 19 วิธจี ัดการเรยี นรู้ : เพื่อพัฒนาความรูท้ กั ษะ. พมิ พค์ ร้งั ท่ี 3. กรงุ เทพฯ : โรงพิมพ์ภาพพิมพ์ ศนู ย์ส่งเสริมวชิ าการ. 231/4 ซอยวัดกระสงั ข์กระจาย เขตบางกอกใหญ่ กรงุ เทพ. เว็บครูณฐั วฒุ ิออนไลน์ web : https://sites.google.com/a/snr.ac.th/nattawut/home

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

27 การจัดสรา้ งเฟรม สารบัญ เร่ือง หนา้ คาช้แี จงสาหรับครู.................................................................................................... ............... 1 บัตรคาส่งั สาหรบั นกั เรยี น..................................................................................................... 2 แผนผังแสดงขั้นตอนการใช้ชุดการเรยี นรกู้ ารสร้างเวบ็ เพจด้วยภาษา HTML........................ 3 มาตรฐานการเรยี นรู้ / ตัวชีว้ ดั . ............................................................................................. 4 สาระสาคญั / จดุ ประสงค์การเรยี นรู้...................................................................................... 4 แบบทดสอบก่อนเรยี น............................................................................................................ 5 กระดาษคาตอบแบบทดสอบกอ่ นเรียน.................................................................................. 8 บตั รเน้ือหา ........................................................................................................................... 9 บัตรกจิ กรรมที่ 1 .................................................................................................................. 14 บตั รกิจกรรมที่ 2 .................................................................................................................. 15 แบบทดสอบหลังเรียน............................................................................................................. 16 กระดาษคาตอบแบบทดสอบหลังเรียน................................................................................... 19 เฉลยแบบทดสอบก่อนเรียน.................................................................................................... 20 เฉลยแบบทดสอบหลังเรียน.................................................................................................... 21 ภาคผนวก............................................................................................................................... 22 บรรณานกุ รม.......................................................................................................................... 25