คมอการใชบทเรยนออนไลน รายวชา ง22203 เรองการสรางเวบไซต ส าหรบนกเรยนชนมธยมศกษาปท 2 กลมสาระการงานอาชพและเทคโนโลย

นางอ ามรา วระพจนานนท ต าแหนง คร วทยฐานะ ช านาญการพเศษ

โรงเรยนเทศบาล ๑ (บานชมแสง) เทศบาลเมองชมแสง จงหวดนครสวรรค

ค ำน ำ บทเรยนออนไลน เรองการสรางเวบไซต ส าหรบนกเรยนชนมธยมศกษาปท 2 กลมสาระการงานอาชพและเทคโนโลย เนอหาบทเรยนรประกอบดวย 1.กอนสรางเวบไซต 2.รจก Dreamweaver 3.การสราง Site 4.การใสขอความและแทรกสญลกษณ 5.การแทรกรปภาพ 6.การแทรกมลตมเดยและวดโอ 7.การแทรกตาราง 8.การสรางลงค 9.การสราง Banner 10.การสราง Button 11.แทรก Script 12.การสราง Template 13.การ Upload file ซงเปนความรพนฐานทจ าเปนส าหรบการสรางเวบไซต การศกษาบทเรยนออนไลนในรายวชา ง22203 การสรางเวบไซต นกเรยนสามารถเขาศกษาบทเรยนออนไลนดวยตนเอง ทกททกเวลา ศกษาทบทวนบทเรยนซ าเพอความเขาใจยงขน คมอการใชบทเรยนออนไลนและแผนการจดการเรยนร จะแนะน าการใชบทเรยนออนไลน แกนกเรยน และผเขาศกษาบทเรยนออนไลน ผจดท าหวงเปนอยางยงวาจะเปนประโยชนและเปนแนวทาง ในการพฒนาบทเรยนออนไลนส าหรบกลมสาระการเรยนรอนๆ อ ามรา วระพจนานนท ผจดท า

สำรบญ เรอง หนำ ค าน า ก

สารบญ ข

แนวทางการการใชงานบทเรยนออนไลน ค

การเขาศกษาบทเรยนออนไลน 1

แนะน าบทเรยน 2

ศกษาบทเรยน 3

ทดสอบกอนเรยน 4

ทดสอบหลงเรยน 5

หนวยการเรยนรท 1 ความรเบองตนกอนสรางเวบไซต รกอนสรางเวบไซต รจก Dreamweaver

6 7

หนวยการเรยนรท 2 สรางเวบไซตดวย Dreamweaver CS3 การสราง Site การใสขอความและแทรกสญลกษณ การแทรกรปภาพ การแทรกวดโอ การแทรกตาราง การสรางลงค

8 9 10 11 12 13

หนวยการเรยนรท 3 แตงใหสวยอยางสรางสรรค การสราง Banner การสราง Button แทรก Script การสราง Template

14 15 16 17

หนวยการเรยนรท 4 การอพโหลดเวบไซต การ Upload File

18

ใบงานและแบบทดสอบ 19 ผลงานนกเรยน 20 ครอ ามรา 21 แผนการจดการเรยนร 22

แนวทำงกำรใชงำนบทเรยนออนไลน อปกรณหรอฮารดแวรทเหมาะสมกบการใชเขาศกษาบทเรยนออนไลน เรองการสรางเวบไซต รายวชา ง22203 ระดบชนมธยมศกษาปท 2 กลมสาระการงานอาชพและเทคโนโลย

คณสมบตพนฐำนของเครองคอมพวเตอรและอปกรณพนฐำน 1. หนวยประมวลผลกลาง (CPU) ไมนอยกวา Intel Pentium4 หรอ AMD Athlon 64 2. ระบบปฏบตการ Windows XP, Vista หรอ Windows 7 ขนไป 3. หนวยความจ า (RAM) 1 GB ขนไป 4. ความละเอยดของหนาจอทเหมาะสม 1600 x 900 pixels 5. ชดหฟง

กำรศกษำบทเรยนออนไลน 1. ครแนะน าบทเรยนออนไลน การเขาศกษาบทเรยนออนไลน 2. ท าแบบทดสอบกอนเรยน 3. ศกษาบทเรยนออนไลน เมอศกษาจบในแตละหนวยการเรยนร ตองท าแบบฝกหดระหวางเรยน หนวยการเรยนรท 1 ความรเบองตนกอนสรางเวบไซต - แนะน าบทเรยนและทดสอบกอนเรยน - รกอนสรางเวบไซต - รจก Dreamweaver - ท าแบบทดสอบหนวยการเรยนรท 1 หนวยการเรยนรท 2 สรางเวบไซตดวย Dreamweaver CS3 - การสราง Site

- การใสขอความและแทรกสญลกษณ - การแทรกรปภาพ - การแทรกวดโอ - การแทรกตาราง - การสรางลงค

- ท าแบบทดสอบหนวยการเรยนรท 2 หนวยการเรยนรท 3 แตงใหสวยอยางสรางสรรค - การสราง Banner

- การสราง Button - แทรก Script - การสราง Template

- ท าแบบทดสอบหนวยการเรยนรท 3 หนวยการเรยนรท 4 การอพโหลดเวบไซต - การ Upload File - ท าแบบทดสอบหนวยการเรยนรท 4 4. นกเรยนน าเสนอเวบไซตของตนเอง 5. ท าแบบทดสอบหลงเรยน

1

กำรเขำศกษำบทเรยนออนไลน เปด www.kru-ammara.com โดยเวบเบราวเซอร จะปรากฏดงรป

2

แนะน ำบทเรยน เมนแนะน าบทเรยนและรายละเอยดของรายวชา รหสวชา ค าอธบายรายวชา กรอบโครงสรางรายวชา และผลการเรยนรทคาดหวง

ศกษำบทเรยน เมนศกษาบทเรยนจะอธบายและแนะน าวธการศกษาบทเรยนออนไลน

3

4

ทบสอบกอนเรยน เมนแบบทดสอบกอนเรยน กอนเขาศกษาบทเรยนออนไลน นกเรยนตองท าแบบทดสอบกอนเรยน ซงเปนขอสอบปรนย จ านวน 30 ขอ ซงหลงจากท าแบบทดสอบเสรจ จะแสดงคะแนนและขอทไดคะแนนใหทราบโดยทนท

5

ทบสอบหลงเรยน เมนแบบทดสอบหลงเรยน หลงจากทศกษาบทเรยนออนไลนครบทกหนวยการเรยนแลว นกเรยนตองท าแบบทดสอบหลงเรยน ซงเปนขอสอบปรนย จ านวน 30 ขอ ซงหลงจากท าแบบทดสอบเสรจ จะแสดงคะแนนและขอทไดคะแนนใหทราบโดยทนท

6

หนวยกำรเรยนรท 1 : ควำมรเบองตนกอนสรำงเวบไซต

เรอง รกอนสรำงเวบไซต รกอนสรางเวบไซต จะบอกถงเวบไซตและอธบายถงสวนประกอบในแตละหนาของเวบไซต

7

หนวยกำรเรยนรท 1 : ควำมรเบองตนกอนสรำงเวบไซต เรองรจก Dreamweaver ท าความรจกโปรแกรม Dreamweaver และแถบเมนตางๆ ของโปรแกรม

8

หนวยกำรเรยนรท 2 : สรำงเวบไซตดวย Dreamweaver CS3

เรองกำรสรำง Site เรยนรเรองการสรางไซตส าหรบเกบทรพยากรของเวบไซต

วดโอสาธตการสรางไซต การสรางเอกสารหนาแรก

9

หนวยกำรเรยนรท 2 : สรำงเวบไซตดวย Dreamweaver CS3

เรองกำรแทรกสญลกษณ เรยนรการแทรกขอความและสญลกษณในเวบเพจ

วดโอสาธตการแทรกขอความและสญลกษณ

10

หนวยกำรเรยนรท 2 : สรำงเวบไซตดวย Dreamweaver CS3

เรองกำรแทรกรปภำพ เรยนรการแทรกรปภาพและภาพเคลอนไหวใหกบเวบเพจ

วดโอสำธตกำรแทรกรปภำพและภำพเคลอนไหว

11

หนวยกำรเรยนรท 2 : สรำงเวบไซตดวย Dreamweaver CS3

เรองกำรแทรกวดโอ เรยนรการแทรกวดโอใหกบเวบเพจ

วดโอสำธตกำรแทรกวดโอ

12

หนวยกำรเรยนรท 2 : สรำงเวบไซตดวย Dreamweaver CS3

เรองกำรแทรกตำรำง เรยนรการแทรกตารางใหกบเวบเพจ

วดโอสำธตกำรตำรำง

13

หนวยกำรเรยนรท 2 : สรำงเวบไซตดวย Dreamweaver CS3

เรองกำรสรำงลงค เรยนรการสรางไฮเปอรลงคทเชอมโยงกนระหวางเวบเพจ

วดโอสำธตกำรสรำงลงค

14

หนวยกำรเรยนรท 3 : แตงใหสวยอยำงสรำงสรรค

เรองกำรสรำง Banner เรยนรการสราง Banner (สวนหวเวบเพจ)

วดโอสำธตกำรสรำง Banner

15

หนวยกำรเรยนรท 3 : แตงใหสวยอยำงสรำงสรรค

เรองกำรสรำง Button เรยนรการสราง Button

วดโอสำธตกำรสรำง Button

16

หนวยกำรเรยนรท 3 : แตงใหสวยอยำงสรำงสรรค

เรองกำรแทรก Script เรยนรการแทรก Script

วดโอสำธตกำรแทรก Script

17

หนวยกำรเรยนรท 3 : แตงใหสวยอยำงสรำงสรรค

เรองกำรสรำง Template เรยนรการสราง Template

วดโอสำธตกำรสราง Template

18

หนวยกำรเรยนรท 4 : กำรอพโหลดเวบไซต

เรองกำร Upload file เรยนรการ Upload file

วดโอสำธตกำร Upload file

19

ใบงำนและแบบทดสอบ ใบงำนส ำหรบทบทวนและแบบทดสอบแตละหนวย

20

ผลงำนนกเรยน ตวอยำงเวบไซตทนกเรยนไดสรำงขนโดยน ำควำมรทไดจำกกำรศกษำบทเรยนออนไลน เรองกำรสรำงเวบไซต ส ำหรบนกเรยนชนมธยมศกษำปท 2 กลมสำระกำรงำนอำชพและเทคโนโลย

21

ครอ ำมรำ ขอมลครอ ำมรำ วระพจนำนนท ผพฒนำบทเรยนออนไลน เรองกำรสรำงเวบไซต ผลจำกกำรทนกเรยนไดศกษำบทเรยนออนไลน สำมำรถน ำควำมรและทกษะกำรเขยนเวบไซต เขำรวมกำรแขงขนทกษะทำงคอมพวเตอร และไดรบรำงวลมำกมำย

21