p24209471504

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

2 การออกแบบเวบ็ เพจเบ้อื งตน้ บัตรคาสัง่ สาหรับนักเรยี น ชดุ การเรยี นรูก้ ารสร้างเว็บเพจด้วยภาษา HTML รายวชิ าเทคโนโลยี 3 รหัสวิชา ง23102 ชั้นมัธยมศึกษาปีท่ี 3 กลมุ่ สาระการเรียนรู้การงานอาชีพและเทคโนโลยี ชุดท่ี 2 เร่อื ง การออกแบบ เว็บเพจเบ้อื งต้น ใชเ้ วลาจานวน 2 ช่วั โมง ใหน้ กั เรยี นปฏิบตั ดิ ังน้ี 1. นกั เรียนแบ่งกล่มุ กลมุ่ ละ 4 – 5 คน โดยคละกนั ระหว่างเก่ง ปานกลางและอ่อน แล้วเลอื กประธานกลุม่ และเลขานุการกลมุ่ พร้อมตง้ั ชือ่ กล่มุ 2. นกั เรียนรบั ชดุ การเรียนร้กู ารสรา้ งเวบ็ เพจด้วยภาษา HTML รายวิชาเทคโนโลยี 3 รหัสวชิ า ง23102 ชน้ั มธั ยมศึกษาปที ่ี 3 กลุม่ สาระการเรียนรู้การงานอาชพี และเทคโนโลยี ชุดท่ี 2 เรื่อง การออกแบบเว็บเพจเบือ้ งตน้ กลุม่ ละ 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 กลมุ่ สาระการเรียนรู้การงานอาชีพและเทคโนโลยี ชดุ ที่ 2 เรอ่ื ง การออกแบบเว็บเพจเบ้ืองตน้ คาชี้แจง นักเรยี นเลือกคาตอบท่ีถกู ต้องที่สุดเพยี งคาตอบเดียว แลว้ ทาเครือ่ งหมาย  ลงในกระดาษคาตอบ (10 คะแนน) 1. ข้อใดคือข้นั ตอนแรกของการพฒั นาเว็บเพจ ก. วางแผนเกีย่ วกบั การสรา้ งเว็บเพจ ข. จัดเตรยี มเคร่ืองคอมพิวเตอรแ์ มข่ ่าย ค. ตรวจสอบผลการแสดงผลของเอกสาร ง. จดั หาข้อมูลและภาพทีเ่ ก่ยี วข้องกับเว็บเพจ 2. ขอ้ ใดคอื ความหมายของเว็บไซต์ ก. ชดุ เอกสารท่ีเผยแพรใ่ นอนิ เทอรเ์ น็ต ข. ชอ่ื ทีถ่ ูกต้องขน้ึ เพ่ือใช้เรียกแทนองค์กร ค. เวบ็ เพจแรกสุดทีเ่ ข้าถงึ ก่อนของเว็บไซต์ ง. แหล่งทเ่ี กบ็ ข้อมูลเวบ็ เพจหลาย ๆ เว็บเพจ 3. คาว่า Web Page มคี วามหมายตรงกับข้อใด ก. ฐิตมิ า พิมพร์ ายงานในคอมพวิ เตอร์ ข. พรหมพิลาส เปิดเอกสารเวิร์ด หรอื PDF ไฟล์ ค. ณัฐริกา ตกแตง่ งานกราฟิกต่างๆ ในคอมพิวเตอร์ ง. เอรี เขียนเอกสารทีเ่ ผยแพร่ในระบบเครือขา่ ยคอมพิวเตอร์

6 การออกแบบเวบ็ เพจเบือ้ งต้น 4. Notepad จัดเป็นเครือ่ งมือพฒั นาเว็บในกลุม่ ใด ก. Text Editor ข. Text Word ค. HTML Word ง. HTML Editor 5. การท่เี ราศึกษาภาษา HTML เพอ่ื ก. นาไปสร้างเว็บไซด์และปรบั แกไ้ ขงานได้ ข. เปน็ การยกระดบั การศึกษาในประเทศไทยให้ ค. ทาใหเ้ ขา้ ใจความรพู้ น้ื ฐานเกยี่ วกับอนิ เทอร์เน็ต ง. สามารถนาไปผลิตสื่อการเรียนการสอนที่ดที ี่สุด 6. อกั ขระพิเศษในข้อใดสามารถนามาทาการตั้งชื่อของแฟามข้อมูล ในระบบเวบ็ เพจได้ ก. คาถาม (?) ข. ขดี ลา่ ง (_) ค. เท่ากบั (=) ง. มากกว่า () 7. โครงสรา้ งของเอกสาร HTML นนั้ ประกอบไปด้วย 2 ส่วน คือข้อใด ก. ส่วนหวั และส่วนเน้อื หา ข. สว่ นหวั เอกสาร และส่วนคาส่ัง ค. สว่ นคาสงั่ และส่วนประมวลผล ง. สว่ นเน้ือหา และส่วนคาสงั่ ของเอกสาร 8. โครงสร้างของเวบ็ เพจแบบใด มโี ครงสร้างทีเ่ รยี งตอ่ เนือ่ งกนั ไปในทิศทางเดียว ไม่มีการแตกออก เปน็ กงิ่ กา้ นสาขา ก. แบบผสม ข. แบบเชิงเสน้ ค. แบบลาดบั ชน้ั ง. แบบลา่ งข้นึ บน

7 การออกแบบเวบ็ เพจเบอ้ื งต้น 9. ลกั ษณะโครงสรา้ งเว็บเพจในปจั จบุ ันโดยทั่วไปเปน็ ลักษณะใด ก. แบบผสม ข. แบบเชิงเสน้ ค. แบบลาดับชั้น ง. แบบล่างขน้ึ บน 10. ข้อใดกลา่ วถูกต้องเกย่ี วกับประเภทขององค์กร (.gov) ก. องค์กรรฐั บาล ข. องค์กรทางทหาร ค. สถาบันการศึกษา ง. บรษิ ทั /องค์กรพานิชย์

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

9 การออกแบบเว็บเพจเบื้องต้น บตั รเนอ้ื หา การออกแบบเว็บเพจเบือ้ งตน้ การออกแบบและพฒั นาเว็บเพจ สามารถทาไดห้ ลายระบบ ขึ้นอยู่กับลักษณะของขอ้ มลู ความชอบของผู้พฒั นา ตลอดจนกลุ่มเปาา หมาย ที่ตอ้ งการนาเสนอ เช่น หากกลุม่ เปาา หมายเปน็ เด็กวยั ร่นุ และนาเสนอข้อมลู เกยี่ วกบั ความบันเทิง อาจจะออกแบบให้มีทศิ ทางการไหลของ หนา้ เว็บ ท่ีหลากหลายใช้ลูกเล่นได้มากกว่าเวบ็ ทีน่ าเสนอให้กบั ผใู้ หญ่ หรือเวบ็ ดา้ นวชิ าการ การพัฒนาเวบ็ เพจ  ใชภ้ าษา HTML  ปอา นคาสั่งภาษา HTML ด้วย  โปรแกรม Text Editor เช่น NotePad  ใสค่ าส่งั ไดต้ ามต้องการ  ไม่เหมาะสาหรบั ผพู้ ฒั นาในระดบั ตน้

10 การออกแบบเว็บเพจเบือ้ งตน้ ขน้ั ตอนการพัฒนาเวบ็ เพจ 1. กาหนดหวั ข้อท่ีต้องการจะทาเว็บ 2. สร้างผังความสัมพันธ์ของข้อมูลแบบรากต้นไม้

11 การออกแบบเวบ็ เพจเบ้ืองตน้ การวางแผนพฒั นาเวบ็ เพจ แบบลาดบั ข้นั (Hierarchy) เปน็ การจดั แสดงหนา้ เวบ็ เรยี งตามลาดับก่ิงก้าน แตกแขนงต่อเนื่องไปเหมือนตน้ ไม้กลับหวั

12 การออกแบบเวบ็ เพจเบ้อื งตน้ แบบเชิงเสน้ (Linear) เป็นการจดั แสดงหนา้ เวบ็ เรยี งตอ่ เน่ืองไปในทิศทางเดียว แบบผสม (Combination) เป็นการจดั หน้าเวบ็ ชนดิ ผสมระหวา่ งแบบลาดับข้ัน และแบบเชงิ เสน้

13 การออกแบบเว็บเพจเบอ้ื งตน้ 3. กาหนดชื่อไฟลข์ องเอกสารเว็บ  ชอ่ื ไฟลแ์ ละนามสกลุ ของไฟลเ์ อกสารเว็บจะถกู ควบคมุ จาก Web Administor  นามสกลุ ของไฟลเ์ อกสาร HTML มี 2 แบบคอื .htm, .html  ชอ่ื และนามสกุลทใ่ี ช้ เปน็ ภาษาอังกฤษตวั พมิ พเ์ ล็ก ไม่มชี ่องวา่ ง  ไมค่ วรใชส้ ญั ลักษณ์พิเศษใดๆ ยกเว้นเครือ่ งหมาย ขีด “ -”  ไฟลแ์ รกมักจะใช้ชอื่ index 4. กาหนดชือ่ ไฟลข์ องเอกสารเว็บ

14 การออกแบบเวบ็ เพจเบื้องตน้ 5. สร้างโฟลเดอร์เฉพาะสาหรับเอกสารเวบ็ แตล่ ะชุด/เรอ่ื ง ตัวอย่าง สร้างโฟลเดอรช์ ่ือ MyHomePage บนเดสทอ็ ปของ Window Explorer • คลิกปมุ่ ขวาของเมาส์บน ทวี่ ่างของเดสทอ็ ป • เลือกรายการคาสง่ั New > Folder • พิมพ์ชือ่ โฟลเดอร์ MyHomePage แลว้ กดปุ่ม <Enter> 1 คร้งั 6. จัดหาภาพ หรือสร้างภาพทเี่ ก่ยี วข้องกบั เนื้อหา  สรา้ งด้วยโปรแกรมกราฟิก เชน่ Adobe Photoshop 7 หรอื PhotoScape เป็นต้น  คัดเลอื กจาก ClipArt for Web เช่น CD-ROM รวมภาพสาหรับเวบ็

15 การออกแบบเวบ็ เพจเบือ้ งตน้ 7. ภาพทเ่ี ลือกใช้ท้ังหมด ต้องเก็บไวใ้ นโฟลเดอรท์ ส่ี ร้างไว้ก่อนแลว้ Copy To 8. สร้างเอกสารเวบ็ โดยการเขยี นภาษา HTML หรอื ใช้โปรแกรมชว่ ยสรา้ งเว็บเพจ 9. ไฟลเ์ อกสาร HTML ทกุ ไฟล์จะต้องบันทึกไว้ในโฟลเดอร์ทส่ี ร้างไวก้ ่อนรวมกบั รปู ภาพท่ี จัดเตรียมไวแ้ ลว้ Index.html บนั ทกึ ไวท้ ี่ 10. ตรวจสอบผลเอกสาร HTML ดว้ ยเวบ็ เบราว์เซอร์ 11. สง่ ข้อมูลข้ึนเคร่ืองแมข่ ่าย (Server) 12. ตรวจสอบผลการเรียกดจู ากเคร่อื งแมข่ ่าย

16 การออกแบบเวบ็ เพจเบ้อื งตน้ 1. ผใู้ ช้ / เคร่ืองลูกข่าย (User / Client) http://www.snr.ac.th/index.html 2. เครือ่ งใหบ้ ริการ (Server) index.html 3. แปลงโคด้ html ให้เป็นรูปภาพ และข้อความ

17 การออกแบบเวบ็ เพจเบือ้ งตน้ Server-Side Script 1. ข้อมลู ตา่ ง ๆ เช่น Name, message, time http://www.faq108.co.th/board/index.php เครื่องให้บริการ (Server) 2. ประมวลผล index.php โค้ดภาษา html, php Index.php Page.html contact.html 3. โคด้ ภาษา html , php board.php 4. แปลงโคด้ html, php ให้เปน็ รปู ภาพและขอ้ ความ

18 การออกแบบเวบ็ เพจเบ้ืองตน้ Domain Name (โดเมนเนม) การตัง้ ชื่อแทน หมายเลข รปู แบบของชื่อโดเมน ชอ่ื ส่วนขยายบอก ส่วนขยายบอก องคก์ ร ประเภทขององค์กร ประเทศ สว่ นขยายบอกประเภทขององคก์ ร .ac หรอื .edu คอื สถาบนั การศึกษา (Academic) .co หรือ .com คือ องค์กรธุรกิจ (Commercial) .or หรือ .org คือ องค์กรอื่น ๆ (Organization) .go หรอื gov คือ หนว่ ยงานของรฐั บาล (Government) .net คือ ผู้วางระบบเน็ตเวิรก์ (Networking) .mi หรือ mil คือ องค์กรทางทหาร (Military organization) ส่วนขยายบอกประเทศ .au ออสเตรเลยี .ca แคนาดา .fr ฝรง่ั เศส .it อิตาลี .jp ญป่ี ุ่น .ru รัสเซยี .uk อังกฤษ .us สหรฐั อเมริกา .th ไทย เช่น www.snr..ac.th คือ เว็บโรงเรยี นศึกษานารี www.obec.go.th คือ สานกั งานคณะกรรมการการศกึ ษาขน้ั พื้นฐาน

19 การออกแบบเวบ็ เพจเบ้อื งต้น สว่ นประกอบของหนา้ เวบ็ เพจ แบ่งเป็น 3 ส่วน  ส่วนหวั ของหน้า (Page Header)  ส่วนของเน้ือหา (Page Body)  ส่วนทา้ ยกระดาษ (Page Footer) 1. ส่วนหัว (Page Header) จะอย่บู รเิ วณบนสดุ ของหน้าเวบ็ เพจ เปน็ สว่ นท่ีแสดงชอื่ เวบ็ ไซต์ โลโก้ แบนเนอรโ์ ฆษณาลงิ ค์ สาหรับไปยังหน้าเวบ็ อน่ื

20 การออกแบบเวบ็ เพจเบอ้ื งต้น 2. ส่วนเนอื้ หา (Page Body) จะอยู่บริเวณตอนกลางของหนา้ เว็บเพจ ซึ่งเป็นสว่ นท่แี สดง เนอ้ื หาภายในหน้าเวบ็ เพจน้นั โดยประกอบดว้ ยขอ้ ความ ข้อมลู ภาพเคลื่อนไหว เป็นต้น 3. สว่ นทา้ ย (Page Footer) จะอยบู่ ริเวณดา้ นลา่ งสุดของหน้าเวบ็ เพจ สว่ นมากใช้สาหรบั ลิงค์ ข้อความสั้น ๆ เขา้ ใจง่าย หรือจะมชี ่ือเจ้าของเวบ็ ไซต์ อเี มล์แอดเดรสของผ้ดู แู ลเวบ็ ไซต์สาหรบั ติดตอ่ กับ ทางเวบ็ ไซต์

21 การออกแบบเว็บเพจเบือ้ งตน้ Example Web http://www.satriwit.ac.th/home/ http://www.prapayneethai.com/th/culture/

22 การออกแบบเวบ็ เพจเบื้องตน้ http://thai.tourismthailand.org/ http://women.sanook.com/health/

23 การออกแบบเวบ็ เพจเบอ้ื งตน้ บัตรกิจกรรมที่ 1 คาชแี้ จง ให้ตอบคาถามต่อไปนใ้ี ห้ถูกต้อง (10 คะแนน) 1. ใหบ้ อกขั้นตอนการพฒั นาเว็บ (5 คะแนน) 1) ........................................................................................................................ 2) ........................................................................................................................ 3) ........................................................................................................................ 4) ........................................................................................................................ 5) ........................................................................................................................ 6) ........................................................................................................................ 7) ........................................................................................................................ 8) ........................................................................................................................ 9) ........................................................................................................................ 10) ....................................................................................................................... 11) ....................................................................................................................... 12) ....................................................................................................................... 2. ส่วนประกอบของหน้าเว็บเพจ แบ่งได้เปน็ กส่ี ่วนอะไรบ้าง (5 คะแนน) ............................................................................................................................. .... ............................................................................................................................. .... .................................................................................................... ............................. ............................................................................................................................. .... ................................................................................................................................. ............................................................................................................................. .... ................................................................................................................................. ............................................................................................................................. ....

24 การออกแบบเว็บเพจเบือ้ งตน้ บตั รกิจกรรมท่ี 2 คาส่งั ใหน้ กั เรยี นออกแบบเว็บเพจเร่อื งทส่ี นใจคนล่ะ 1 เร่ือง ตามความคดิ ของนักเรยี น ลงในสมุด (10 คะแนน) เช่น http://www.snr.ac.th/index.php http://www.freewebsitetemplates.com https://www.free-css.com/free-css-templates?start=12 http://www.templatefree.org/download.template1-0.template https://free-template.co/

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

26 การออกแบบเว็บเพจเบื้องตน้ 4. Notepad จัดเปน็ เครือ่ งมือพัฒนาเวบ็ ในกลุม่ ใด ก. Text Editor ข. Text Word ค. HTML Word ง. HTML Editor 5. อักขระพิเศษในข้อใดสามารถนามาทาการตั้งช่ือของแฟามข้อมลู ในระบบเวบ็ เพจได้ ก. คาถาม (?) ข. ขดี ลา่ ง (_) ค. เท่ากับ (=) ง. มากกวา่ () 6. ขอ้ ใดคอื ขั้นตอนแรกของการพฒั นาเวบ็ เพจ ก. วางแผนเกี่ยวกบั การสร้างเวบ็ เพจ ข. จดั เตรยี มเคร่ืองคอมพวิ เตอร์แม่ข่าย ค. ตรวจสอบผลการแสดงผลของเอกสาร ง. จัดหาข้อมูลและภาพทีเ่ กีย่ วข้องกบั เว็บเพจ 7. โครงสร้างของเอกสาร HTML นั้นประกอบไปด้วย 2 สว่ น คอื ข้อใด ก. ส่วนหัว และส่วนเน้อื หา ข. สว่ นหวั เอกสาร และสว่ นคาส่ัง ค. สว่ นคาสั่ง และส่วนประมวลผล ง. สว่ นเนื้อหา และส่วนคาสั่งของเอกสาร 8. ลกั ษณะโครงสร้างเว็บเพจในปจั จุบันโดยทั่วไปเป็นลกั ษณะใด ก. แบบผสม ข. แบบเชงิ เส้น ค. แบบลาดับช้นั ง. แบบล่างขนึ้ บน

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

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

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

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

31 การออกแบบเวบ็ เพจเบอื้ งตน้

32 การออกแบบเว็บเพจเบือ้ งต้น บัตรเฉลยกิจกรรมท่ี 1 คาชีแ้ จง ให้ตอบคาถามต่อไปนีใ้ หถ้ ูกต้อง (10 คะแนน) 1. ให้บอกขนั้ ตอนการพัฒนาเว็บ (5 คะแนน) 1) กาหนดหัวข้อที่ต้องการจะทาเวบ็ 2) สรา้ งฝงั ความสมั พันธ์ของข้อมลู แบบรากตน้ ไม้ 3) กาหนดช่อื ไฟล์ของเอกสารเวบ็ 4) กาหนดชื่อไฟลข์ องเอกสารเว็บ 5) สรา้ งโฟลเดอรเ์ ฉพาะสาหรบั เอกสารเวบ็ แต่ละชดุ /เรอื่ ง 6) จดั หาภาพหรอื สร้างภาพทเี่ ก่ยี วข้องกับเนื้อหา 7) ภาพที่เลอื กใช้ท้ังหมด ตอ้ งเกบ็ ไวใ้ นโฟลเดอรท์ ่สี รา้ งไว้กอ่ น 8) สรา้ งเอกสารเก็บโดยการเขยี นภาษา HTML 9) ไฟลเ์ อกสาร HTML ทุกไฟล์จะตอ้ งบนั ทึกไว้ในโฟลเดอรท์ ่สี รา้ งไวก้ อ่ นรวมกับรปู ภาพ ท่จี ัดเตรยี มไว้แล้ว 10) ตรวจสอบผลเอกสาร HTML ด้วยเว็บเบราว์เซอร์ 11) ส่งข้อมลู ขึน้ เครอ่ื งแมข่ า่ ย (Server) 12) ตรวจสอบผลการเรยี กดจู ากเคร่ืองแม่ขา่ ย 2. สว่ นประกอบของหนา้ เว็บเพจ แบง่ ไดเ้ ปน็ ก่สี ่วนอะไรบ้าง (5 คะแนน) 3 สว่ น ได้แก่ 1. ส่วนหัว (Page Header) จะอยบู่ ริเวณบนสดุ ของหน้าเว็บเพจ เป็นส่วนทแ่ี สดงช่ือ เวบ็ ไซต์ โลโก้ แบนเนอร์โฆษณาลิงค์สาหรับข้ามไปยังหน้าเว็บอ่ืน 2. ส่วนเน้อื หา (Page Body) จะอยู่บริเวณตอนกลางของหน้าเว็บเพจ ซึง่ เปน็ ส่วนท่ี แสดงเนือ้ หาภายในหนา้ เวบ็ เพจน้ัน โดยประกอบดว้ ยข้อความ ข้อมูล ภาพเคล่ือนไหว เป็นต้น 3. สว่ นท้าย (Page Footer) จะอยบู่ ริเวณด้านล่างสุดของหน้าเว็บเพจ ส่วนมากใช้ สาหรบั ลงิ ค์ขอ้ ความสั้น ๆ เข้าใจง่าย หรือจะมชี ่ือเจา้ ของเวบ็ ไซต์ อีเมล์แอดเดรส ของผดู้ แู ลเวบ็ ไซต์สาหรบั ตดิ ต่อกับทางเวบ็ ไซต์

33 การออกแบบเว็บเพจเบอ้ื งตน้ บัตรเฉลยกจิ กรรมที่ 2 คาส่งั ให้นักเรียนออกแบบเว็บเพจเร่ืองท่ีสนใจคนล่ะ 1 เร่ือง ตามความคดิ ของนักเรียน ลงในกระดาษวาดรูป A4 (10 คะแนน) แนวคาตอบ บัตรเฉลยกจิ กรรมท่ี 2 (ตัวอย่างผลงานนักเรยี น) บันทึกชือ่ ไฟล์ : Ex2-เลขท่ีชื่อ.html (Ex2-01nattawut.html) สง่ งานมาที่ https://classroom.google.com ห้องเรียนของตนเอง ส่งพมิ พห์ ัวข้อ ส่งงาน Ex2 ชอื่ นักเรียน ชน้ั .. เลขท.่ี . หรือส่ง ทาง Googel Drive

34 การออกแบบเวบ็ เพจเบอื้ งตน้

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

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

37 การออกแบบเวบ็ เพจเบอื้ งต้น สารบญั เรอ่ื ง หนา้ คาช้แี จงสาหรับคร.ู .................................................................................................................. 1 บัตรคาสง่ั สาหรับนักเรยี น..................................................................................................... 2 แผนผงั แสดงข้นั ตอนการใช้ชุดการเรยี นรกู้ ารสรา้ งเวบ็ เพจดว้ ยภาษา HTML........................ 3 มาตรฐานการเรียนรู้ / ตวั ช้ีวัด. ............................................................................................. 4 สาระสาคัญ / จดุ ประสงคก์ ารเรียนร้.ู ..................................................................................... 4 แบบทดสอบกอ่ นเรยี น............................................................................................................ 5 กระดาษคาตอบแบบทดสอบก่อนเรยี น.................................................................................. 8 บตั รเนอ้ื หา ........................................................................................................................... 9 บัตรกิจกรรมที่ 1 .................................................................................................................. 23 บัตรกิจกรรมที่ 2 .................................................................................................................. 24 แบบทดสอบหลงั เรียน............................................................................................................. 25 กระดาษคาตอบแบบทดสอบหลงั เรยี น................................................................................... 28 เฉลยแบบทดสอบก่อนเรยี น.................................................................................................... 29 เฉลยแบบทดสอบหลงั เรียน.................................................................................................... 30 ภาคผนวก............................................................................................................................... 31 บรรณานุกรม.......................................................................................................................... 35