คมอการใชงานระบบการเรยนรผานเครอขายอนเทอรเนต (E-Learning)
รายวชาคอมพวเตอรชน ม.3
เรอง การพฒนาเวบเพจดวยโปรแกรม Dreamweaver
พฒนาโดย
นายยงยศ บญมงม
ครช านาญการ
โรงเรยนเทอดไทยวทยาคม
ส านกงานเขตพนทการศกษามธยมศกษาเขต 27
1. ขนตอนการเตรยมเครองคอมพวเตอร
ในการใชบทเรยนบนเครอขายคอมพวเตอร ผสอนและผเรยนควรเตรยมความพรอมในการ จดการ
เรยนร ดงตอไปน
คณสมบตทวไปของฮารดแวร ประกอบดวย
- เครองคอมพวเตอรมความเรวของหนวยประมวลผลกลาง (CPU) 1.8 GHz ขนไป
- หนวยความจ าส ารอง (RAM) อยางนอย 512 MB
- หนวยความจ าหลก (Hard Disk) ตงแต 100 GB ขน
- แสดงผลจอ (VGA Card)
- การดเสยง (Sound Card) และอปกรณเสยง เชน หฟง ล าโพง
- จอแสดงผล (Monitor) แสดงส 256 สขนไป
- การดเครอขาย (Network Interface Card : LAN Card)
คณสมบตทวไปของซอฟตแวร ประกอบดวย
- โปรแกรมระบบปฏบตการ (Operating System) ตงแต Windows7 ขนไป
- เวบบราวเซอร เชน Internet Explorer Browser , Mozilla Firefox หรอ Google
Chrome
2. ขนตอนการเขาสโปรแกรมและสมครขอใชงาน
นกเรยนเขาสเวบไซต http://elearning.ttwsc.ac.th ดวยโปรแกรมเวบบราวเซอร จะปรากฏหนาตาง
ดงน
กดปม “ระบบนกเรยน” เพอเขาสหนาตางการยนยนสทธ ดงภาพ
หลงจากนน ยนยนสทธ ดวยการใช Username และ Password แลวกดปม “Login now” เพอเขา
สระบบ หากยงไมสมครใชงาน หรอยงไมม Username ใหคลกทปม “ละทะเบยนใชงาน” จะปรากฏ
หนาตางเพอใหนกเรยนลงทะเบยนเพอสมครเขาใชงาน ดงภาพ
โดยนกเรยนตองกรอกขอมลดงตอไปน
1. โรงเรยน
2. รหสนกเรยน
3. ชอ- นามสกล
4. ชน หอง เลขท
5. ลงครปภาพประจ าตว
6. หมายเลขโทรศพท
7. ชอผใช (Username)
8. รหสผาน (Password)
9. ค าถามกนลม , ค าตอบ
ใหนกเรยนกรอกขอมลตามแบบฟอรมใหครบถวน แลวกดปม “Next >>” หากชอผใชซ ากบทมอย
ในระบบแลว หรอไมกรอกค าตอบของค าถามกนลม โปรแกรมจะแจงเตอนใหกลบไปแกไขใหม
เมอขอมลถกตองครบถวนและระบบไดรบขอมลเรยบรอยแลว จะกลบมาทหนายนยนสทธอกครง
ในกรณทนกเรยนลมรหสผาน ใหกดปม “ลมรหสผาน” จะปรากฏหนาตางเพอใหตอบค าถามกนลมท
เคยเลอกค าถามไวตอนสมครเขาใชงาน ดงภาพ
ใหนกเรยนกรอกชอผใช แลวกดปม “สงขอมล” โปรแกรมจะถามค าถามทเลอกไวตอนสมครใชงาน
ใหนกเรยนตอบค าถามใหตรงกบค าตอบตอนทสมครใชงาน แลวกดปม “สงขอมล” อกครง จะปรากฏ
รหสผาน เพอน าไปใชเขาสระบบตอไป
3. ขนตอนการใชงานโปรแกรม
หลงจากทนกเรยน login เขาสระบบแลว จะปรากฏหนาตาง เลอกกลมสาระทตองการ ดงภาพ
หนาตางนจะแบงออกเปน 2 สวน ไดแก
1. เมนตวเลอกกลมสาระเพอเขาสระบบการเรยนร ซงมทงหมด 8 กลมสาระไดแก
1. กลมสาระการเรยนรภาษาไทย
2. กลมสาระการเรยนรคณตศาสตร
3. กลมสาระการเรยนรวทยาศาสตร
4. กลมสาระการเรยนรสงคมศกษา ศาสนา และวฒนธรรม
5. กลมสาระการเรยนรสขศกษาและพลศกษา
6. กลมสาระการเรยนรศลปะ
7. กลมสาระการเรยนรการงานอาชพและเทคโนโลย
8. กลมสาระการเรยนรภาษาตางประเทศ
โดยแตละเมนจะมปายก ากบจ านวนรายวชาทครประจ าวชาไดสรางเนอหาแลวในกลมสาระนน สวน
รายวชาใดยงไมมครประจ าวชามาสรางหลกสตร จะปรากฏปายขอความสแดงวา “ยงไมมเนอหา”
2. ขอมลผเรยน ซงประกอบดวยขอมลสวนตว รปภาพ และปม การแกไขขอมล ในกรณทนกเรยน
ตองการแกไขขอมลสวนตว ใหกดปม “แกไขขอมลคลก” จะปรากฏหนาตางดงภาพ
หากนกเรยนตองการเพมหรอแกไขขอมลใหพมพขอมลใหมในคอลมน “เปลยนเปน” ทบขอมลเดม
จากนน กดปม “NEXT>>”
หากนกเรยนตองการเพม หรอเปลยนรปภาพ ใหท าตามขนตอนดงน เขาสเวบไซต
https://www.picz.in.th ซงเปนเวบไซตบรการฝากรปภาพทใชงานงายและใหบรการแบบฟรๆ
คลกทปม "เรมการอพโหลด" เลอกไฟลรปภาพ กดปม "อพโหลด" เสรจแลว
เลอกเมน "แนบโคด" (อยมมซายของจอ) จากนนเลอก ลงค , ลงคตรง แลวกดปม copy “url.รปภาพ
ขนาดยอ” ไปวางลงในชองรบขอมลรปภาพ แลวกดปม Next>>
โดยนกเรยนสามารถศกษาวธการเพมรปภาพประจ าตวไดจากวดโอแนะน าในเมน “ดวธการวาง
รปภาพ คลก” ซงจะปรากฏหนาตางของ Youtube ดงภาพ
หลงจากทนกเรยนแกไขขอมลเสรจแลวระบบจะกลบมาทหนา “เลอก
กลมสาระทตองการ” อกครง ใหนกเรยนคลกเขาสกลมสาระการงานอาชพและ
เทคโนโลย ตามภาพ
หลงจากเขาสกลมสาระการงานอาชพและเทคโนโลยแลว จะปรากฏหนาตางเลอกรายวชาทจะเรยน
โดยใหนกเรยน คลกทปม “รายวชา เทคโนโลยสารสนเทศและการสอสาร ชน ม.3 รหสวชา 633 ครผสอน
นายยงยศ บญมงม” ดงภาพ
เมอเขาสระบบรายวชาเทคโนโลยสารสนเทศและการสอสารแลว จะปรากฏหนาตางระบบ E-
Learning รายวชา ซงจะประกอบดวย
สวนท 1 ประกอบดวย ปมออกจากระบบ ขอมลรายวชา ขอมลผสอน และขอมลนกเรยน
และขาวประชาสมพนธจากครผสอน
สวนท 2 ประกอบดวย หลกสตรการเรยนร ประกอบดวย มาตรฐานการเรยนร หนวยการเรยนร
เมนสอบวดผลประเมนผลกลางภาคปลายภาค การประกาศผลสอบ และการตดตอกบครผสอนใน
รปแบบของขอความ ดงภาพ
ใหนกเรยนคลกทหนวยการเรยนรท 2 เรอง “การสรางเวบไซตดวยโปรแกรม Adobe
Dreamweaver” เพอเขาสบทเรยน
หลงจากเขาสบทเรยนแลวจะปรากฏหนาตาง “หลกสตรรายวชา” ของหนวยการเรยนรท 2 ซง
ประกอบไปดวย แบบทดสอบกอนเรยน หลงเรยน แบบทดสอบอตนย มาตรฐาน ตวชวด หนวยการเรยนรยอย
ซงประกอบไปดวย 7 หนวยการเรยนรยอยดงน
1. พนฐานการใชโปรแกรมDreamweaver
2. หลกการออกแบบเวบไซต
3. การใสขอความลงในเวบเพจ
4. การใชรปภาพในเวบเพจ
5. การใสตารางลงในเวบเพจ
6. การเชอมโยงเวบเพจ
7. การเพมมลตมเดย
เมอนกเรยนตองการเรยนรหนอยการเรยนยอยหนวยใดใหคลกทหนวยยอยนน ระบบกจะเชอมโยง
เขาสเนอหาขอหนวยยอย ดงภาพ
กอนเขาสบทเรยน ใหนกเรยนท าขอสอบประเมนความรกอนเรยนกอน โดยคลปปม “แบบทดสอบ
กอนเรยน” กจะปรากฏหนาตางแบบทดสอบกอนเรยน ดงภาพ
หนาตางแบบทดสอบนจะแสดงรายละเอยดของแบบทดสอบ ซงประกอบไปดวย รายวชา ขอมลผเขา
สอบ เวลานบถอยหลงซงหากหมดเวลาโปรแกรมจะปดหนาตางอตโนมต เพอรวมคะแนนทงหมด ค าสงการท า
ขอสอบ ขอท/จ านวนขอสอบ โจทย คะแนนเตม แหลงทมาของขอสอบ ตวเลอกมทงหมด 4 ตวเลอก ไดแก
a,b,c,d เลอกค าตอบโดยการคลกเมาสทจด Check point ดานหนาของตวเลอก
แลวคลกทปมสงขอสอบ ท าไปเรอยๆ จนครบทกขอ กจะปรากฏหนาตางดงน
ใหนกเรยนคลกทรปภาพอกครงเพอสงขอสอบทงหมด หลงจากนนจะปรากฏ
หนาตางสรปคะแนนการสอบดงภาพ
หนาตาง “ผลการประเมนความร
กอนเรยน” จะแสดงขอมล ผเขาสอบ
หนวยการเรยนร สถตการท าขอสอบไดแก
ขอสอบทงหมด ท าถก ท าผด คะแนน
รอยละ ขอทท าผด โจทยขอท
ท าผด
ตวเลอกทเลอกแลวผด เมอทราบ
ผลการท าขอสอบกอนเรยนแลว ให
นกเรยนคลดทปมรปบาน เพอกลบสหนา
หนอยยอยอกครง เพอเรยนตามหลกสตร
ตงแตหนวยยอยท 1 ถงหนวยยอยท 9
เมอนกเรยนเลอกหนวยยอยทจะ
เรยนแลวกจะปรากฏหนาตางแสดงเนอหา
ของหนวยยอย ซงประกอบไปดวย
รายวชา หนวยการเรยนร หนวยยอย
สาระส าคญ เนอหาซงประกอบไปดวย ผล
การเรยนรทคาดหวง วดโอคลป รปภาพ
ขอความ ดงภาพ
เมอนกเรยนศกษาเนอหารายวชาครบทกหนวยการเรยนรยอยแลว หากหนวยการเรยนรยอยใดม
แบบฝกหดทายหนวยการเรยนร หรอใบงาน จะปรากฏเมนทต าแหนงทายเนอหา ดงภาพ
ใหนกเรยนคลกทปมแบบฝกหดทายบท เพอท าแบบฝกหดทครสรางขนซงเมอนกเรยนเขาสแบบฝกหดทาย
บทแทแลว จะปรากฏขอมลของแบบฝกหดดงภาพ
เมอท าขอสดทายและกดปม “ท าขอตอไป” แลวระบบจะแจงใหทราบ ใหกดปม home เพอกลบสหนาหลก
ตอไป
หากยอนกลบเขามาท าขอสอบใหมอกครงหลงจากทเคยสอบแลวแตครยงไมตรวจใหคะแนน จะปรากฏ
ขอความแจงเตอนวา “ยงไมตรวจ” ในกรอบสแดง ดงภาพ
ในกรณทนกเรยนตองการแกไขค าตอบ ใหนกเรยนกดปม “แกไขค าตอบ” โปรแกรมจะเปดหนาตาง
เพอแกไขค าตอบ ดงภาพ
นกเรยนสามารถกดปม “แกไขค าตอบ” ดานขวาของขอค าถามทนกเรยนตองการแกไขเพอเขาสหนา
แกไขค าตอบของขอนนๆ ดงภาพ
นกเรยนสามารถแกไขขอมลดงน
1. ค าตอบ
2. วาง url.รปภาพใหม
3. ก าหนดขนาดของรปภาพใหม
4. แกไขค าอธบายรปภาพ
หรอเลอกแกไขเพยงอยางใดอยางหนง จากนนกดปม “สงขอมล”
กรณทครตรวจใหคะแนนแลว กจะปรากฏ กรอบขอความ แจงผลการตรวจแบบฝกหด พรอมทงปม
แจงรายละเอยดการตรวจ ดงภาพ
เมอนกเรยนกดปม “รายละเอยด” แลว ระบบจะแสดงรายละเอยดของแบบฝกหด ซงจะแสดง
จดประสงคการเรยนร โจทยค าถาม เฉลย ค าตอบ คะแนนรายขอ และคะแนนรวมทได ดงภาพ
นกเรยนสามารถพมพผลงานออกทางกระดาษโดยการกดปม “พมพ” ทตอนทายของชนงาน เพอเกบเขาแฟม
สะสมผลงานตอไป
เมอนกเรยนกดปม home เพอกลบสหนาหลกหนวยการเรยนรอกครง จะปรากฏคะแนนแบบฝกหดท
นกเรยนไดรบการประเมนผลทดานทายของหนวยการเรยนรยอยพรอมทงเมนทเชอมโยงไปสรายงานการท า
แบบฝกหด ดงภาพ
หลงจากทนกเรยนเรยนรเนอหาจนครบทกหนวยการเรยนรยอยแลว ใหนกเรยนกดปม “แบบทดสอบ
หลงเรยน” เพอเขาท าแบบทดสอบหลงเรยน ซงแบบทดสอบหลงเรยนจะคลายกบแบบทดสอบกอนเรยน แต
เมอเราท าแบบทดสอบครบทง 20 ขอแลว ระบบจะแจงผลการท าขอสอบหลงเรยน พรอมทงคาทางสถตและ
การเปรยบเทยบถงพฒนาการตงแตกอนเรยน จนถงหลงเรยน ดงภาพ
หลงจากนกเรยนเรยนรจากหลกสตรจนครบแลว ครประจ าวชาจะด าเนนการสรางขอสอบประเมนความรกลาง
ภาพและปลายภาคเรยน รวมทงนดหมายหวงเวลาในการสอบ นกเรยนสามารถเขาสอบตามวนเวลาทครนด
หมายไว โดยการเขาเมน “สอบวดผล ประเมนผลกลางภาคและปลายภาคเรยน” ดงภาพ
เมอคลกเขาสเมนสอบวดผลแลว ระบบตรวจสอบวาเคยเขาสอบแลวหรอไม หากไมเคยเขาสอบจะแจงวธการ
สอบ หลงจากนนใหนกเรยนกดปม “พรอมแลวกดปมนเพอเขาสอบ” ดงภาพ
หลงจากนนจะปรากฏหนาตางขอสอบทนกเรยนเลอก โดยมขอมลดงน เวลานบถอยหลง รายวชาทสอบ ขอมล
ผเขาสอบ ค าชแจง ผลการเรยนรทคาดหวง ขอท โจทยค าถาม และ ตวเลอกของขอสอบ ซงมทงหมด 4
ตวเลอก ใหนกเรยนคลกทตวเลอกทนกเรยนคดวาถกทสดเพยงขอเดยว จากนนใหคลกทปม “ท าขอตอไป” ดง
ภาพ
แตถาหมดเวลากอนทจะกดปม “ท าขอตอไป” ระบบจะแจงหมดเวลาการท าขอสอบ คะแนนในขอนนจะได 0
คะแนน พรอมทงให “ท าขอสอบขอถดไป”
หลงจากทนกเรยนท าขอสอบจนครบทกขอแลวระบบจะแจงเตอนและน าไปสหนาตางรายงานคะแนนสอบโดย
มขอมลดงน ขอมลผสอบ ผลการเรยนรทคาดหวง คะแนนเตม คะแนนทได สถานะ ผานหรอไมผาน ดงภาพ
นอกจากนน นกเรยนสามารถตรวจสอบผลการสอบไดทหนาหลก โดยแจงผลการเรยนร คะแนนเตม
คะแนนทได สถานะ หากไมผานผลการเรยนรใด ระบบจะแสดงสถานะวา “ไมผาน” และจะมปมเพอเชอมโยง
เขาสแบบทดสอบแบบอตนย เพอสอบแกตวเฉพาะผลการเรยนรทไมผานนน ดงภาพ
หากนกเรยนสอบวดผลกลางภาคหรอปลายภาคไมผาน ในแถบสถานะจะแสดงขอความ “ไมผาน” และจะมป มเมนส าหรบ
เชอมโยงลงคไปท ขอสอบแกตว ซงเปนขอสอบอตนย ตามผลการเรยนรทนกเรยนไมผานดงภาพ
หากนกเรยนสอบแลวจะไมสามารถเขาสอบไดอก โดยระบบจะแจงเตอนวา “อนญาตใหเขาสอบได
เพยงครงเดยว” พรอมทงมปมเชอมโยงไปทหนาตางประกาศคะแนนสอบ ดงภาพ
สวนท 3 การตดตอกบครผสอน นกเรยนสามารถตดตอหรอรบทราบขาวสารจากครผสอนรายวชาได
2 ชองทางไดแก การ Inbox ถงครผสอนโดยตรง และการตอบโตใน เวบบอรด หรอกระดานขาวดงน
1. การสงจดหมาหรอ Inbox นกเรยนสามารถสงจดหมายถงครประจ าวชาไดทหนาหลก ซง
ประกอบดวย ชอคร หวขอ รายละเอยดของจดหมาย ดงภาพ
เมอสงแลว ครผสอนจะไดรบจดหมายทนท ครสามารถอานและตอบจดหมายของนกเรยนไดทหนา
inbox ซงจดหมายของนกเรยนประกอบดวย ขอมลนกเรยน รปภาพนกเรยน หวขอ รายละเอยด และวนทสง
ดงภาพ
เมอตอบจดหมายนกเรยนแลว ในหนาหลกของนกเรยนจะปรากฏ title ของจดหมายทครตอบในกลอง “ตอบ
จดหมายจากอาจารย” เพอใหนกเรยนคลกเขาไปอาน ดงภาพ
2. การโตตอบในกระดานขาว หรอ webboard จากครผสอน จะอยในสวนของ “ขาว
ประชาสมพนธ” ดานลางของขอมลผเรยนและผสอน ของนกเรยนทกคน ซงจะปรากฏขอความเมอมการแจง
ประกาศตางๆ จากครผสอน ดงภาพ
เมอนกเรยนคลกเขาส hyperlink ของขอความแลว จะปรากฏหนาตางเวบบอรดทคร
ประชาสมพนธ โดยเปนพนทสาธารณะทนกเรยนสามารถแสดงความคดเหน เรยนทกคนในหองเรยนสามารถ
มองเหนการโตตอบกนได และทกคนสามารถแสดงความคดเหนได ดงภาพ