แผนการจัดการเรียนรู้58.82.156.60/quality/research/p/t1302-57-3308-9001.pdf ·...
TRANSCRIPT
ม.ย.60 F-วช-100
แผนการจดการเรยนร
รหสวชา 3308-9001 ชอวชา การออกแบบเวบเพจ ( 3 หนวยกต 4 ชวโมง / สปดาห )
หมวดวชาทกษะวชาชพ กลมทกษะวชาเลอกเสร
หลกสตร ประกาศนยบตรวชาชพ พทธศกราช 2557
ประเภทวชา ศลปกรรม สาขาวชา คอมพวเตอรกราฟก
ระดบประกาศนยบตรวชาชพชนสง ชนปท 1
โดย อาจารย เกสรา ฉายารตน
กลมวชา คอมพวเตอรและเทคโนโลยส านกงาน
วทยาลยอาชวศกษาสนตราษฎร ในพระอปถมภ
สมเดจพระเจาภคนเธอ เจาฟาเพชรรตนราชสดา สรโสภาพณณวด
ภาคเรยนท 2 ปการศกษา 2561
ม.ย.60 F-วช-100
แผนการจดการเรยนร รหสวชา 3008 - 9001 ชอวชา การออกแบบเวบเพจ จ านวน 3 หนวยกต 4 ชวโมง/สปดาห หลกสตรประกาศนยบตรวชาชพชนสง พทธศกราช 2557 ประเภทวชา ศลปกรรม สาขาวชา คอมพวเตอรกราฟก
จดประสงครายวชา เพอให 1. เขาใจเกยวกบหลกการออกแบบเวบไซต 2. มทกษะในการประยกตใชโปรแกรมการสรางเวบไซต 3. มคณลกษณะนสยทพงประสงค และเจตคตทดในวชาคอมพวเตอรธรกจ สมรรถนะรายวชา 1. แสดงความรเกยวกบหลกการออกแบบเวบเพจ 2. ออกแบบและพฒนาเวบไซตในงานธรกจ ค าอธบายรายวชา ศกษาและปฏบตเกยวกบหลกการออกแบบเวบไซตในงานธรกจ การใชส การใชอกษร การใชรปภาพ การออกแบบกราฟกและภาพเคลอนไหวส าหรบเวบไซต ระบบน าทางเวบ (Navigation) สวนตดตอผใช (User Interface) แมแบบเอกสารเวบ สรางเวบไซต กรณศกษา
ม.ย.60 F-วช-100
แผนการจดการเรยนรแบบฐานสมรรถนะ
หนวยท 1 ชอวชา การออกแบบเวบเพจ รหสวชา 3008 - 9001 สอนสปดาหท 1-2
ชอหนวย ความรพนฐานเกยวกบทฤษฎคอมพวเตอรกราฟก ชวโมงรวม 8 ชวโมง
ระดบ ปวส. ชอผสอน อาจารยเกสรา ฉายารตน จ านวน 4 ชงโมง/สปดาห
สาระส าคญ ในปจจบนทเทคโนโลยเขาสยคดจตอล ไมวาจะหนมองไปทางใด เราตองพบวาคอมพวเตอรไดเขามบทบาทในงานตางๆ มากยงขน รวมไปถงงานดานกราฟก ทไดมการน าเอาคอมพวเตอรเขามาสรางสรรคเปนผลงาน และเกดการพฒนาอยางตอเนอง ซงในบทนเราจะศกษาและท าความเขาใจกบคอมพวเตอรกราฟก จดประสงคการเรยนร จดประสงคทวไป 1. รและเขาใจเกยวกบความหมายและประเภทกราฟก 2. เขาใจหลกการท างานและการแสดงผลของคอมพวเตอรกราฟก 3. รและเขาใจเกยวกบทฤษฎส และการจดองคประกอบศลป 4. รและเขาใจเกยวกบการใชงานโปรแกรมกราฟก Raster จดประสงคเชงพฤตกรรม 1. บอกความหมายของกราฟกและคอมพวเตอรกราฟกไดถกตอง 2. บอกความหมายของคอมพวเตอรกราฟกไดถกตอง 3. อธบายประเภทของกราฟกไดถกตอง 4. บอกหลกการของกราฟกแบบ Raster ได 5. บอกหลกการของกราฟกแบบ Vector ได 6. บอกความแตกตางระหวางกราฟกแบบ Raster และ Vector ได 7. บอกโมเดลสได 8. อธบายโหมดสและการเลอกใชไดถกตอง 9. บอกหลกการจดองคประกอบศลปได 10. บอกคณสมบตและสวนประกอบของโปรแกรมได 11.ปฏบตการใชงานโปรแกรม Adobe Photoshop CS6 เบองตนได
ม.ย.60 F-วช-100
สมรรถนะรายหนวย แสดงความรพนฐานเกยวกบทฤษฎคอมพวเตอรกราฟกได สาระการเรยนร 1. ความรพนฐานเกยวกบทฤษฎคอมพวเตอรกราฟก
1.1 ความรเบองตนเกยวกบความหมายและประเภทของงานกราฟก 1.1.1 ความหมายของกราฟกและคอมพวเดอรกราฟก 1.1.2 ประเภทของกราฟก 1.2 หลกการท างานและการแสดงผลของคอมพวเตอรกราฟก 1.2.1 หลกการของกราฟกแบบ Raster 1.2.2 หลกการของกราฟกแบบ Vector 1.2.3 ความแตกตางระหวางกราฟกแบบ Raster และ Vector 1.3 ความรเบองตนเกยวกบทฤษฎสและการจดองคประกอบศลป 1.3.1 โมเดลส 1.3.2 โหมดสและการเลอกใช 1.3.3 หลกการจดองคประกอบศลป
ปรชญาเศรษฐกจพอเพยงและคณธรรมทมงเนน 1. แตงกายถกตองตามระเบยบขอตกลงและตรงตอเวลา (ความมวนย) 2. มความเพยรพยายามและกระตอรอรนในการเรยนและการปฏบตงาน (ความขยน ความอดทน) 3. รจกใชและจดการวสดอปกรณตางๆอยางประหยดและคมคา (ความพอประมาณ) น าปญหาและอปสรรคในการเรยนการสอนมาปรบปรงการเรยนการสอน 1. ผเรยนเขาหองเรยนไมตรงเวลาท าใหเรยนรไมทนเพอนและปฏบตใบงานตามทมอบหมายไมได 2. ผเรยนขาดความรบผดชอบในการปฏบตงานทไดรบมอบหมาย
ม.ย.60 F-วช-100
กจกรรมการเรยนการสอน (สปดาหท 1 ชวโมงท 1-4) - ผสอนชแจงจดประสงคการเรยนร เนอหารายวชา เกณฑการใหคะแนน ขอตกลงในการเรยนรายวชาน - น าเขาสบทเรยนโดยการตงค าถาม ใหผเรยนในหองแสดงความคดเหนเกยวกบภาพกราฟกในความเขาใจของ ผเรยน และความส าคญของกราฟกในงานยคปจจบนพรอมยกตวอยาง (ถาม-ตอบ) โดยผสอนมการเสรมแรงใน การเรยนรโดยการใชแตมคะแนนพเศษชวยกระตนในการตอบค าถาม ค าถาม ละ 0.25 – 0.5 คะแนน โดยจะม การใหตอบค าถามโดยสมครใจ และสมเรยกตามเลขท - ผเรยนแสดงความคดเหนเกยวกบเกยวกบภาพกราฟกในความเขาใจของผเรยนผสอนแบงกลมผเรยนเพอ ท าใบงานท 1 การศกษาความหมายประเภทของกราฟก หลกการท างานความแตกตางของกราฟกแบบแบบ Raster และ Vector และประเภทไฟลภาพกราฟก ตามใบงานทก าหนด พรอมสงตวแทนกลมออกมาสรปหนาชนเรยน - ผเรยนแตละกลมรวมกนศกษาและสรปขอมลตามใบงานทก าหนดพรอมสงตวแทนกลมออกมาสรปพรอมน าสรป สงผสอนทายชวโมง - ผสอนอธบายพรอมกลาวสรปเนอหาในการเรยนเพมเตมพรอมใหผเรยนสรปความคดรวบยอด - ผเรยนสรปความคดรวบยอดเกยวกบเนอหาประจ าหนวยการเรยนร เทคนควธการสอนทน ามาใช 1. การอภปรายแลกเปลยนเรยนรระหวางผเรยนกบผสอน 2. การท ารเสรจคนหาขอมลเพอน าเสนอ 3. การท างานแบบการจดกลมการเรยนร สอการเรยนการสอนและแหลงการเรยนร 1. สอสงพมพ ไดแก 1.1 หนงสอ “การออกแบบเวบเพจ” โดย รวพร จรญพนธเกษม และชษณพงศ ธญญลกษณ 1.2 หนงสอ “การออกแบบเวบเพจ” โดย ศวช กาญจนชม,พลอยวนส หวางภกด และกาญจนา ไชยศร 2. โสตทศนปกรณ ไดแก Projector 3. สอเทคโนโลยขนสง ไดแก โปรแกรมลอคหนาจอเพอการเรยนร HP Class Room 4. อนเทอรเนต http://graphics402.blogspot.com/
ม.ย.60 F-วช-100
การวดประเมนผล เกณฑการประเมนผล 1. แบบฝกหดทมอบหมาย ใบงานท 1 มาท าความรจก พนฐานของคอมพวเตอรกราฟก 2. สงเกตจากพฤตกรรมการปฏบตกจกรรมทไดรบ มอบหมายและการตอบค าถามในชนเรยน
1. ผเรยนรอยละ 70 ท าแบบฝกหดใบงานท 1 อยในระดบ ด 2. ผเรยนมสวนรวมในการตอบค าถาม และแสดงความ คดเหนมากกวารอยละ 70
เอกสารอางอง/เวบไซต
1. http://graphics402.blogspot.com/ 2. http://www.thairetouch.com/
ม.ย.60 F-วช-100
ใบงาน (Job Sheet) ท 1
รหสวชา: 3008 - 9001 ชอวชา: การออกแบบเวบเพจ
หนวยท: 1 ชอหนวย: ความรพนฐานเกยวกบทฤษฎคอมพวเตอรกราฟก
ชองาน: มาท าความรจกพนฐานของคอมพวเตอรกราฟก
จดประสงคเชงพฤตกรรม 1. อธบายความหมายของกราฟกและคอมพวเตอรกราฟกได 2. บอกประเภทของกราฟกได 3. บอกความแตกตางของประเภทของภาพกราฟกและไฟลภาพทน ามาใชในโปรแกรมกราฟกได
ระยะเวลาการปฏบตงาน เวลา 30 นาท
ค าสง / แนวทางการปฏบต ใหนกศกษาบอกเขยนอธบายโจทยค าถามตอไปนใหชดเจนและเขาใจพอสงเขป
แหลงคนควา 1. http://graphics402.blogspot.com/ 2. http://www.thairetouch.com/
การวดประเมนผล และเกณฑการประเมน 1. วธการวดและประเมน : ผเรยนท าแบบฝกหดทมอบหมาย ใบงานท 1
2. เครองมอวดและประเมน : แบบฝกหดทมอบหมาย ใบงานท 1
3. เกณฑวดและประเมน : ประเมนความถกตอง
‐ 4 ขอ อยในเกณฑ ด
‐ 3 ขอ อยในเกณฑ พอใช
‐ นอยกวา 2 ขอ อยในเกณฑ ปรบปรง
ม.ย.60 F-วช-100
1. ใหนกศกษาบอกโปรแกรมทใชในงานดานกราฟกทนกศกษารจกมาอยางนอย 3 โปรแกรม
……………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………. …………………………………………………………………………………………………………………….
2. บอกประเภทของภาพกราฟกมกประเภท พรอมอธบายแตละประเภท
……………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………. …………………………………………………………………………………………………………………….
3. บอกความแตกตางระหวาง ภาพกราฟกแบบ Bitmap กบ Vector
……………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………. …………………………………………………………………………………………………………………….
4. ใหผเรยนบอกประเภทไฟลทน ามาใชในโปรแกรม Adobe Photoshop CS6
……………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………. …………………………………………………………………………………………………………………….
5. บอกความแตกตางของโหมดส ระหวาง RGB กบ CMYK และการน าไปใชงาน
……………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………. …………………………………………………………………………………………………………………….
ม.ย.60 F-วช-100
กจกรรมการเรยน ( สปดาหท 2 ชวโมงท 5-8) - ผสอนชแจงจดประสงคการเรยนร เนอหารายวชา เกณฑการใหคะแนนในหนวยการเรยนน - ผสอนกลาวทกทายผเรยน และทบทวนความรเดมในคาบเรยนทผานมา - ผสอนน าเขาสบทเรยนโดยตงค าถามเกยวกบส และแมสทผเรยนรจกพรอมอธบาย - ผเรยนแสดงความคดเหนเกยวกบเกยวกบสและแมสทผเรยนรจกพรอมอธบาย - ผสอนอธบายเกยวกบโมเดลสการเลอกใชและหลกการจดองคประกอบศลปพรอมมอบหมายใหผเรยนศกษาถง
คณสมบตและสวนประกอบของโปรแกรม Adobe Photoshop CS6 - ใหผเรยนท าใบงานท 2 ความรเกยวกบทฤษฎสและการจดองคประกอบศลป สงทายชวโมง - ผสอนอธบายพรอมกลาวสรปเนอหาในการเรยนเพมเตมพรอมใหผเรยนสรปความคดรวบยอด - ผสอนรวมกบผเรยนอภปรายแลกเปลยนปญหา และหาขอแกไขเพอสามารถน าไปใชในโอกาสตอไป - ผสอนซกถามปญหาทเกดขนกบผเรยนทผานมา - ผสอนรวมกบผเรยนแกไขปญหาทเกดขน
เทคนควธการสอนทน ามาใช 1. การอภปรายแลกเปลยนเรยนรระหวางผเรยนกบผสอน 2. การท ารเสรจคนหาขอมลเพอน าเสนอ 3. การท างานแบบการจดกลมการเรยนร สอการเรยนการสอนและแหลงการเรยนร 1. สอสงพมพ ไดแก 1.1 หนงสอ “การออกแบบเวบเพจ” โดย รวพร จรญพนธเกษม และชษณพงศ ธญญลกษณ 1.2 หนงสอ “การออกแบบเวบเพจ” โดย ศวช กาญจนชม,พลอยวนส หวางภกด และกาญจนา ไชยศร 2. โสตทศนปกรณ ไดแก Projector 3. สอเทคโนโลยขนสง ไดแก โปรแกรมลอคหนาจอเพอการเรยนร HP Class Room 4. อนเทอรเนต http://graphics402.blogspot.com/
ม.ย.60 F-วช-100
การวดประเมนผล เกณฑการประเมนผล
1. แบบฝกหดทมอบหมาย ใบงานท 2 ความรเกยวกบ ทฤษฎสและการจดองคประกอบศลป 2. สงเกตจากพฤตกรรมการปฏบตกจกรรมทไดรบ มอบหมายและการตอบค าถามในชนเรยน
1. ผเรยนรอยละ 70 ท าแบบฝกหดใบงานท 2 อยในระดบ ด 2. ผเรยนมสวนรวมในการตอบค าถาม และแสดงความ คดเหนมากกวารอยละ 70
เอกสารอางอง/เวบไซต
1. http://graphics402.blogspot.com/ 2. http://www.thairetouch.com/
ม.ย.60 F-วช-100
แผนการจดการเรยนรแบบฐานสมรรถนะ
หนวยท 2 ชอวชา การออกแบบเวบเพจ รหสวชา 3008 - 9001 สอนสปดาหท 3
ชอหนวย การท างานของเวบไซตเบองตน ชวโมงรวม 4 ชวโมง
ระดบ ปวส. ชอผสอน อาจารยเกสรา ฉายารตน จ านวน 4 ชงโมง/สปดาห
สาระส าคญ ศกษาและปฏบตเกยวกบระบบการท างานของเวบเพจ การออกแบบเวบเพจเบองตน การสรางเวบเพจดวยโปรแกรมส าเรจรป Adobe Dreamweaver CS6 การใชสวนประกอบตางๆ ของโปรแกรม และก าหนดคาพนฐานตาง ๆ รวมไปถงการจดโครงรางและการใชส จดประสงคการเรยนร จดประสงคทวไป 1. รและเขาใจเกยวกบเครอขายอนเตอรเนต 2. เขาใจหลกการพนฐานในการออกแบบเวบเพจ 3. ประยกตใชความรพนฐานในการออกแบบเวบเพจ
จดประสงคเชงพฤตกรรม 1. บอกความหมายของอนเตอรเนต, Client - Server ไดถกตอง
2. บอกความหมาย www, web browser, web server, Domain name ได 3. อธบายความหมายของ website, webpage ได
4. อธบายค าศพททควรรและหลกการในการออกแบบเวบไซตได 5. ระบโปรแกรมส าเรจรปทเกยวของในการสรางเวบไซตได 6. อธบายสวนประกอบตางๆ ของหนาจอโปรแกรม Adobe Dreamweaver CS6 ได 7. ปฏบตการเรยกใชสวนประกอบตางๆ และการก าหนดคาเบองตนใหกบโปรแกรม Adobe Dreamweaver CS6
ได สมรรถนะรายหนวย แสดงทกษะในการเลอกใชโปรแกรมส าเรจรปในการสรางเวบไซตไดอยางเหมาะสม
ม.ย.60 F-วช-100
สาระการเรยนร 2. การท างานของเวบไซตเบองตน
2.1 ความรเบองตนเกยวกบเครอขายอนเตอรเนต 2.1.1 ความเปนมาของอนเตอรเนต 2.1.2 ความหมาย www, web browse, web server และ Domain name 2.1.3 ความหมายของ home page,web page,website
2.2 ความรเบองตนเกยวกบโปรแกรมส าเรจรปทใชในการสรางเวบไซต 2.2.1 โปรแกรมส าเรจรปทเกยวของในการสรางเวบไซต 2.2.2 สวนประกอบตางๆ ของโปรแกรม Adobe Dreamweaver CS6 2.2.3 มมมองการท างานใน Adobe Dreamweaver CS6 2.2.4 การเรยกใชสวนประกอบตางๆ และการก าหนดคาเบองโปรแกรม Adobe Dreamweaver CS6
ปรชญาเศรษฐกจพอเพยงและคณธรรมทมงเนน 1. แสวงหาประสบการณและคนควาความรใหมๆ( ความสนใจใฝร) 2. มความเพยรพยายามและกระตอรอรนในการเรยนและการปฏบตงาน (ความขยน ความอดทน) 3. มการเตรยมพรอมในการเรยนและการปฏบตงาน (ความรบผดชอบ) น าปญหาและอปสรรคในการเรยนการสอนมาปรบปรงการเรยนการสอน 1. ผเรยนเขาหองเรยนไมตรงเวลาท าใหเรยนรไมทนเพอนและปฏบตใบงานตามทมอบหมายไมได 2. ผเรยนขาดความรบผดชอบในการปฏบตงานทไดรบมอบหมาย กจกรรมการเรยนการสอน (สปดาหท 3 ชวโมงท 9-12) - ผสอนชแจงจดประสงคการเรยนร เนอหารายวชา เกณฑการใหคะแนน ขอตกลงในการเรยนรายวชาน - ผสอนสอบถามผเรยนทบทวนเกยวกบความรในสปดาหทผานมาเพอเชอมโยงเขาสบทเรยนใหม - ผสอนแลกเปลยนเรยนรกบเรยนเกยวกบเวบไซตทผเรยนเขาใชงานเปนประจ า - ใหผเรยนศกษาเนอหาบทท 1 เกยวกบค าศพททเกยวของกบอนเตอรเนตและเวบไซตโดย Search ขอมลเพมเตม จาก Internet แลวอธปรายรวมกนเพอสรปเนอหา - ผสอนใหผ เรยนยกตวอยางโปรแกรมส าเรจรปทท าเวบไซตในปจจบน ) โดยผสอนมการเสรมแรงในการเรยนร โดยการใชแตมคะแนนพเศษชวยกระตนในการตอบค าถาม ค าถาม ละ 0.25 – 0.5 คะแนน โดยจะมการใหตอบ ค าถามโดยสมครใจ และสมเรยกตามเลขท
ม.ย.60 F-วช-100
- ผสอนใหผเรยนปฏบตการเขาโปรแกรม Adobe Dreamweaver CS6 เพอศกษาสวนประกอบของโปรแกรม - ผเรยนคนหาชอเวบไซตทมการสอน Dreamweaver เพอเปนแหลงหาความรเพมเตม
- ผสอนรวมกบผเรยนอภปรายเนอหาและซกถามปญหาทเกดขน - ผเรยนท าใบงานท 2
เทคนควธการสอนทน ามาใช 1. การอภปรายแลกเปลยนเรยนรระหวางผเรยนกบผสอน 2. การท ารเสรจคนหาขอมลเพอน าเสนอ 3. การท างานแบบการจดกลมการเรยนร สอการเรยนการสอนและแหลงการเรยนร 1. สอสงพมพ ไดแก 1.1 หนงสอ “การออกแบบเวบเพจ” โดย รวพร จรญพนธเกษม และชษณพงศ ธญญลกษณ 1.2 หนงสอ “การออกแบบเวบเพจ” โดย ศวช กาญจนชม,พลอยวนส หวางภกด และกาญจนา ไชยศร 2. โสตทศนปกรณ ไดแก Projector 3. สอเทคโนโลยขนสง ไดแก โปรแกรมลอคหนาจอเพอการเรยนร HP Class Room 4. อนเทอรเนต http://graphics402.blogspot.com/
การวดประเมนผล เกณฑการประเมนผล 1. แบบฝกหดทมอบหมาย ใบงานท 2 การท างานของ เวบไซตเบองตน 2. สงเกตจากพฤตกรรมการปฏบตกจกรรมทไดรบ มอบหมายและการตอบค าถามในชนเรยน
1. ผเรยนรอยละ 70 ท าแบบฝกหดใบงานท 2 อยในระดบ ด 2. ผเรยนมสวนรวมในการตอบค าถาม และแสดงความ คดเหนมากกวารอยละ 70
เอกสารอางอง/เวบไซต
1. http://graphics402.blogspot.com/ 2. http://www.thairetouch.com/
ม.ย.60 F-วช-100
ใบงาน (Job Sheet) ท 2
รหสวชา: 3008 - 9001 ชอวชา: การออกแบบเวบเพจ
หนวยท: 2 ชอหนวย: การท างานของเวบไซตเบองตน
ชองาน: การท างานของเวบไซตเบองตน
จดประสงคเชงพฤตกรรม 1. อธบายความหมายของค าศพททส าคญในการสรางเวบไซตได 2. อธบายสวนประกอบตางๆ ของหนาจอโปรแกรม Adobe Dreamweaver CS6 ได
ระยะเวลาการปฏบตงาน เวลา 30 นาท
ค าสง / แนวทางการปฏบต ใหนกศกษาบอกเขยนอธบายโจทยค าถามตอไปนใหชดเจนและเขาใจพอสงเขป
การวดประเมนผล และเกณฑการประเมน 1. วธการวดและประเมน : ผเรยนท าแบบฝกหดทมอบหมาย ใบงานท 2
2. เครองมอวดและประเมน : แบบฝกหดทมอบหมาย ใบงานท 2
3. เกณฑวดและประเมน : ประเมนความถกตอง
‐ 8 ขอ อยในเกณฑ ด
‐ 6 ขอ อยในเกณฑ พอใช
‐ นอยกวา 5 ขอ อยในเกณฑ ปรบปรง
1. Client – Server
2. WWW.
3. Web Browser 4. ตวอยาง Browser 1. 2. 5. Web server
6. Domain name
ม.ย.60 F-วช-100
7. ยกตวอยาง Domain name 1. 2. 8. Website 9. Webpage
จากรปใชตอบค าถามขอ 10 – 12 (3 คะแนน)
10. มมมองทแสดงโคด HTML หรอสครปตตางๆ ของหนาเวบคอ 11. มมมองทแสดงหนาจอออกแบบเวบเพจทไมมการแสดงโคดตางๆ คอ 12. มมมองทแสดงทงโคดพรอมกบหนาเวบเพจทเราก าลงท างานอย คอ
ม.ย.60 F-วช-100
แผนการจดการเรยนรแบบฐานสมรรถนะ
หนวยท 3 ชอวชา การออกแบบเวบเพจ รหสวชา 3008 - 9001 สอนสปดาหท 4-6
ชอหนวย การสรางเวบไซตดวยโปรแกรมส าเรจรป ชวโมงรวม 12 ชวโมง
ระดบ ปวส. ชอผสอน อาจารยเกสรา ฉายารตน จ านวน 4 ชงโมง/สปดาห
สาระส าคญ ศกษาและปฏบตเกยวกบการสรางเวบเพจหรอเวบไซตใหมการสรางโฟลเดอรส าหรบเกบไฟลเอกสาร พรอมทงไฟลทเกยวของไวเฉพาะ การก าหนดคณสมบตเบองตนใหกบเวบเพจ การใชเครองมอพนฐานของ Adobe Dreamweaver CS6 การแทรกขอความและรปภาพ จดประสงคการเรยนร จดประสงคทวไป 1. รและเขาใจวธการออกแบบขอความ รปภาพ และพนหลง 2. ประยกตใชความรเกยวกบการออกแบบขอความ รปภาพ และพนหลง 3. มคณลกษณะทพงประสงค และแสดงเจตคตทดในวชาชพคอมพวเตอร
จดประสงคเชงพฤตกรรม 1. อธบายการออกแบบขอความได
2. อธบายวธการออกแบบรปภาพ และ Rollover Image ได 3. อธบายวธการออกแบบพนหลงได
4. ปฏบตการแทรกขอความ รปภาพ และพนหลงได 5. ปฏบตการ Swap Image บนเวบเพจได สมรรถนะรายหนวย ปฏบตการสรางเวบเพจ โดยจดการขอความและรปภาพไดอยางสวยงาม
ม.ย.60 F-วช-100
สาระการเรยนร 3. การสรางเวบไซตดวยโปรแกรมส าเรจรป
3.1 ความรเบองตนเกยวกบการจดการสรางเวบไซต 3.1.1 การสรางไซตเพอจดเกบไฟลและโฟลเดอร 3.1.2 ขนตอนการสรางเวบไซตและเวบเพจใหม 3.1.3 การสราง ลบ และเปลยนชอไฟลและโฟลเดอร 3.2 การจดการขอความบนเวบเพจ 3.2.1 การพมพขอความ การเวนวรรค และการขนบรรทดใหมในยอหนา 3.2.2 จดรปแบบขอความบน Property Inspector 3.2.3 จดรปแบบขอความบนแทบ Text 3.2.4 การก าหนดขนาด ฟอนต สตวอกษร ตวหนา และตวเอยง 3.2.5 การจดต าแหนงขอความและยอหนาบนเวบเพจ 3.2.6 การสรางรายการแบบมหวขอ(List) และการแทรกสญลกษณพเศษ 3.2.7 การแทรกเสนคนและก าหนดคาตางๆของเสน 3.2.8 การน าเอกสาร word มาแทรกในเวบเพจ 3.3 การแทรกรปภาพบนเวบเพจ 3.3.1 ชนดของไฟลรปภาพทใชงานบนเวบเพจ 3.3.2 การปรบแตงรปภาพบน Property Inspector 3.3.3 การแทรกรปภาพลงบนเวบเพจ 3.3.4 การปรบขนาด การใสค าอธบายภาพ และใสกรอบใหรปภาพ 3.3.5 การก าหนดระยะหางระหวางภาพกบเนอหาอนๆ 3.3.6 การจดเรยงภาพใหเขากบขอความไดเหมาะสม 3.3.7 วธการใสรปภาพเปนพนหลงใหกบเวบเพจ 3.3.8 วธการ Swap Image บนเวบเพจ
ปรชญาเศรษฐกจพอเพยงและคณธรรมทมงเนน 1. แสวงหาประสบการณและคนควาความรใหมๆ( ความสนใจใฝร) 2. มความเพยรพยายามและกระตอรอรนในการเรยนและการปฏบตงาน (ความขยน ความอดทน) 3. มการเตรยมพรอมในการเรยนและการปฏบตงาน (ความรบผดชอบ) น าปญหาและอปสรรคในการเรยนการสอนมาปรบปรงการเรยนการสอน 1. ผเรยนเขาหองเรยนไมตรงเวลา 2. ผเรยนยงไมพรอมในการเตรยมอปกรณการเรยน จงไดอบรมคณธรรมความรบผดชอบ
ม.ย.60 F-วช-100
กจกรรมการเรยนการสอน (สปดาหท 4 ชวโมงท 13-16) - ผสอนชแจงจดประสงคการเรยนร เนอหารายวชา เกณฑการใหคะแนน ขอตกลงในการเรยนรายวชาน - ผสอนชแจงจดประสงคการเรยน รายสปดาหน - ผสอนทบทวนการใชสวนประกอบหนาจอโปรแกรม Adobe Dreamweaver CS6 - ผสอนอธบายการจดการไซตใหมเพอจดเกบเวบไซตการสรางไฟลและโฟลเดอร - ผสอนยกตวอยางการสรางไซตใหมโดยมไฟลและโฟลเดอรตวอยางเวบไซต 2 เวบไซต
- ผสอนเปดโอกาสใหผเรยนซกถามขอสงสย หรอเนอหาทยงไมเขาใจ - ผเรยนจดบนทกสรปเนอหาโดยยอใหครบถวน - ผเรยนฝกปฏบตการสรางไซตใหม สรางเวบเพจ การลบ และเปลยนชอโฟลเดอร - ผสอนท าใบงานเรอง สรปขอมลหนาเวบไซต และแบบฝกปฏบต การจดการไซตใหม - ผสอนและผเรยนรวมกนสรปเนอหาในสปดาหน
เทคนควธการสอนทน ามาใช 1. การอภปรายแลกเปลยนเรยนรระหวางผเรยนกบผสอน 2. การสาธตและยกตวอยางประกอบการอธบาย สอการเรยนการสอนและแหลงการเรยนร 1. สอสงพมพ ไดแก 1.1 หนงสอ “การออกแบบเวบเพจ” โดย รวพร จรญพนธเกษม และชษณพงศ ธญญลกษณ 1.2 หนงสอ “การออกแบบเวบเพจ” โดย ศวช กาญจนชม,พลอยวนส หวางภกด และกาญจนา ไชยศร 2. โสตทศนปกรณ ไดแก Projector 3. สอเทคโนโลยขนสง ไดแก โปรแกรมลอคหนาจอเพอการเรยนร HP Class Room 4. อนเทอรเนต http://graphics402.blogspot.com/
การวดประเมนผล เกณฑการประเมนผล 1. สงเกตจากพฤตกรรมการปฏบตกจกรรมทไดรบ มอบหมายและการตอบค าถามในชนเรยน
1. ผเรยนมสวนรวมในการตอบค าถาม และแสดงความ คดเหนมากกวารอยละ 70
เอกสารอางอง/เวบไซต
1. http://www.thairetouch.com/
2. http://eduweb.kpru.ac.th/wbi/index.php/menu-joomal3
3. http://www.slideshare.net/tamaypimkanok/ss-26243379
ม.ย.60 F-วช-100
กจกรรมการเรยนการสอน (สปดาหท 5-6 ชวโมงท 17-24) - ผสอนชแจงจดประสงคการเรยน รายสปดาหน และทบทวนการสรางไซต และเวบเพจใหม
- ผสอนใหผเรยนแลกเปลยนเรยนรเพอทบทวนการสรางไซต และเวบเพจใหม - ผสอนอธบายการพมพขอความลงบนเวบเพจและสาธตการจดรปแบบขอความตางๆ - ผเรยนฝกปฏบต ตามรปแบบทผสอนมอบหมาย - ผสอนอธบายชนดของไฟลรปภาพ,การแทรกรปภาพลงบนเวบเพจและสาธตการแทรกรปภาพ - ผสอนเปดโอกาสใหผเรยนซกถามขอสงสย หรอเนอหาทยงไมเขาใจ - ผเรยนจดบนทกสรปเนอหาโดยยอและท าใบงานบนทกผลการเรยนร - ผสอนและผเรยนรวมกนสรปเนอหา - ผเรยนท าแบบทดสอบหนวยท 2 การพมพขอความและแทรกรปภาพในหนาเวบเพจ
เทคนควธการสอนทน ามาใช 1. การอภปรายแลกเปลยนเรยนรระหวางผเรยนกบผสอน 2. การสาธตและยกตวอยางประกอบการอธบาย สอการเรยนการสอนและแหลงการเรยนร 1. สอสงพมพ ไดแก 1.1 หนงสอ “การออกแบบเวบเพจ” โดย รวพร จรญพนธเกษม และชษณพงศ ธญญลกษณ 1.2 หนงสอ “การออกแบบเวบเพจ” โดย ศวช กาญจนชม,พลอยวนส หวางภกด และกาญจนา ไชยศร 2. โสตทศนปกรณ ไดแก Projector 3. สอเทคโนโลยขนสง ไดแก โปรแกรมลอคหนาจอเพอการเรยนร HP Class Room 4. อนเทอรเนต http://graphics402.blogspot.com/
การวดประเมนผล เกณฑการประเมนผล 1. สงเกตจากพฤตกรรมการปฏบตกจกรรมทไดรบ มอบหมายและการตอบค าถามในชนเรยน
1. ผเรยนมสวนรวมในการตอบค าถาม และแสดงความ คดเหนมากกวารอยละ 70
เอกสารอางอง/เวบไซต
1. http://www.thairetouch.com/ 2. http://eduweb.kpru.ac.th/wbi/index.php/menu-joomal3
3. http://www.slideshare.net/tamaypimkanok/ss-26243379
ม.ย.60 F-วช-100
แผนการจดการเรยนรแบบฐานสมรรถนะ
หนวยท 4 ชอวชา การออกแบบเวบเพจ รหสวชา 3008 - 9001 สอนสปดาหท 7-10
ชอหนวย การใสตารางในเวบเพจ ชวโมงรวม 16 ชวโมง
ระดบ ปวส. ชอผสอน อาจารยเกสรา ฉายารตน จ านวน 4 ชงโมง/สปดาห
สาระส าคญ
ศกษาและปฏบตเกยวกบการสรางใสตารางบนเวบเพจ การสรางตาราง ใสขอมลในตาราง ปรบขนาดชองตาราง การปรบแตงตาราง การก าหนดส ขนาดใหกบตาราง การซอนตาราง การแทรกรปภาพในตาราง การน าขอมลสตาราง การใชน าตารางเขามาชวยในการจดรปแบบเวบเพจใหสวยงาม เปนระเบยบ จดประสงคการเรยนร จดประสงคทวไป 1. รและเขาใจวธการออกแบบโครงราง 2. ประยกตใชความรเกยวกบการออกแบบโครงรางดวยตาราง 3. รและเขาใจเกยวกบการจดการขอความและรปภาพในตารางพรอมน าไปประยกตใชได
จดประสงคเชงพฤตกรรม 1. แสดงความรเกยวกบการออกแบบโครงรางโดยใชตาราง
2. วางแผนจดการเลอกใชตารางในการออกแบบโครงรางไดอยางเหมาะสม 3. ปฏบตการเขยนแผนผงโครงรางหนาเวบเพจได
4. ปฏบตการสรางตารางซอนตารางเพอจดเลยเอาทของเวบเพจตามโครงรางทก าหนดได สมรรถนะรายหนวย ปฏบตการจดหนาเวบเพจโดยใชตารางไดอยางเหมาะสม
ม.ย.60 F-วช-100
สาระการเรยนร 4. การใสตารางในเวบเพจ
4.1 ความรเบองตนเกยวกบการสรางตารางบนเวบเพจ 4.1.1 วธการสรางตารางบนเวบเพจ 4.1.2 คณสมบตของตารางบนแถบ Property Inspector 4.2 การจดการตารางในหนาเวบเพจ 4.2.1 การสรางตารางและเลอกสวนตางๆ ของตาราง 4.2.2 การปรบความกวางสงของตารางใน Property Inspector 4.2.3 การน าขอความ และรปภาพใสลงในตาราง 4.2.4 การแทรก การลบแถวและคอลมน รวมเซลล และการแบงเซลล 4.2.5 การก าหนดสเสนขอบและสพนตาราง 4.2.6 การจดต าแหนงของตาราง 4.2.7 การจดต าแหนงเนอหาภายในเซลล 4.3 การซอนตารางจดหนาเวบเพจ 4.3.1 การเขยนแผนผงโครงรางหนาเวบเพจ 4.3.2 การสรางตารางเพอจดเลยเอาทของเวบเพจตามทก าหนดโครงราง
ปรชญาเศรษฐกจพอเพยงและคณธรรมทมงเนน 1. แสวงหาประสบการณและคนควาความรใหมๆ( ความสนใจใฝร) 2. มความเพยรพยายามและกระตอรอรนในการเรยนและการปฏบตงาน (ความขยน ความอดทน) 3. มการเตรยมพรอมในการเรยนและการปฏบตงาน (ความรบผดชอบ) น าปญหาและอปสรรคในการเรยนการสอนมาปรบปรงการเรยนการสอน 1. ผเรยนเขาหองเรยนไมตรงเวลาท าใหเรยนรไมทนเพอนและปฏบตใบงานตามทมอบหมายไมได 2. ผเรยนสงงานชาท าใหผลคะแนนทไดรบนอยลง
3. ผสอนนดหมายใหผเรยนน าภาพประกอบการเรยนรมาแตผเรยนไมเตรยมมาท าใหเสยเวลาในการคนหาภาพ นานเนองจากอนเทอรเนตไมเสถยร
กจกรรมการเรยนการสอน (สปดาหท 7-8 ชวโมงท 25-32) - ผสอนชแจงจดประสงคการเรยน รายสปดาหน
- ผเรยนทบทวนการแทรกรปภาพและการตกแตงภาพใน Properties Inspector - ผสอนบอกเนนย าผเรยนเกยวกบการสรางไซตและโฟลเดอรในการเกบขอมล - ผสอนอธบายเกยวกบเหตผลของการใสตารางในเวบเพจ - ผสอนอธบายขนตอนการสรางตารางลงในเวบเพจ
ม.ย.60 F-วช-100
- ผสอนแลกเปลยนเรยนรผเรยนเกยวกบแถวและคอลมน และการอางองเซลล - ผสอนอธบายคณสมบตของตารางบน Properties Inspector ในเชงการแลกเปลยนเรยนรเพอใหผเรยนมสวนรวม ในการสอน และเปนการสงเกตความรพนฐานของผเรยนในเบองตน - ผสอนอธบายการสรางตารางและเลอกสวนตางๆของตาราง และการปรบความกวาง ความสงของตาราง - ผสอนอธบายการน าขอความและรปภาพใสลงในตาราง - ผสอนใหผเรยนฝกปฏบตการสรางตารางเกยวกบประวตการศกษาของผเรยน และตกแตงคณสมบตของตารางโดยเลอกใชเครองมอบน Properties Inspector ใหสวยงาม - ผสอนและผเรยนรวมกนสรปเนอหาในสปดาหน
เทคนควธการสอนทน ามาใช 1. การอภปรายแลกเปลยนเรยนรระหวางผเรยนกบผสอน 2. การท ารเสรจคนหาขอมลเพอน าเสนอ 3. การท างานแบบการจดกลมการเรยนร สอการเรยนการสอนและแหลงการเรยนร 1. สอสงพมพ ไดแก 1.1 หนงสอ “การออกแบบเวบเพจ” โดย รวพร จรญพนธเกษม และชษณพงศ ธญญลกษณ 1.2 หนงสอ “การออกแบบเวบเพจ” โดย ศวช กาญจนชม,พลอยวนส หวางภกด และกาญจนา ไชยศร 2. โสตทศนปกรณ ไดแก Projector 3. สอเทคโนโลยขนสง ไดแก โปรแกรมลอคหนาจอเพอการเรยนร HP Class Room 4. อนเทอรเนต
2.1 http://eduweb.kpru.ac.th/wbi/index.php/menu-joomal3 2.2 http://www.slideshare.net/tamaypimkanok/ss-26243379
การวดประเมนผล เกณฑการประเมนผล
1. แบบฝกหดทมอบหมาย ใบงานท 3 การท างานของ เวบไซตเบองตน 2. สงเกตจากพฤตกรรมการปฏบตกจกรรมทไดรบ มอบหมายและการตอบค าถามในชนเรยน
1. ผเรยนรอยละ 80 ท าแบบฝกหดใบงานท 3 ไดคะแนน 4 คะแนนขนไป 2. ผเรยนมสวนรวมในการตอบค าถาม และแสดงความ คดเหนมากกวารอยละ 70
เอกสารอางอง/เวบไซต
1. http://eduweb.kpru.ac.th/wbi/index.php/menu-joomal3
2. http://www.slideshare.net/tamaypimkanok/ss-26243379
ม.ย.60 F-วช-100
ใบงาน (Job Sheet) ท 3
รหสวชา: 3008 - 9001 ชอวชา: การออกแบบเวบเพจ
หนวยท: 4 ชอหนวย: การใสตารางในเวบเพจ
ชองาน: การใสตารางในเวบเพจ
จดประสงคเชงพฤตกรรม 1. ปฏบตการเขยนแผนผงโครงรางหนาเวบเพจได 2. ปฏบตการสรางตารางซอนตารางเพอจดเลยเอาทของเวบเพจตามโครงรางทก าหนดได
ระยะเวลาการปฏบตงาน เวลา 45 นาท
ค าสง / แนวทางการปฏบต ใหนกศกษาสรางเวบเพจตารางประวตการศกษาตงแตอดตจนถงปจจบนของนกศกษาตามรปแบบทก าหนดใหดงน (4 คะแนน จตพสย 1 คะแนน รวม 5 คะแนน)
การวดประเมนผล และเกณฑการประเมน 1. วธการวดและประเมน : ผเรยนท าแบบฝกหดทมอบหมาย ใบงานท 3
2. เครองมอวดและประเมน : แบบฝกหดทมอบหมาย ใบงานท 3
3. เกณฑวดและประเมน : ประเมนความถกตอง
‐ เกณฑการบนทกขอมลและตกแตงเอกสารในการปฏบตงาน บนทกงานขอมลไดถกตองและตกแตงเอกสารไดสวยงาม ไดคะแนน 5 คะแนน บนทกงานขอมลไมถกตองและตกแตงเอกสารไดสวยงาม ไดคะแนน 4 คะแนน บนทกงานขอมลไดถกตองแตตกแตงแบบพนฐาน ไดคะแนน 3 คะแนน บนทกงานไมถกตองแตตกตกแตงแบบพนฐาน ไดคะแนน 2 คะแนน บนทกงานไมถกตองและท างานไมเสรจ ไดคะแนน 1 คะแนน
ม.ย.60 F-วช-100
สญลกษณของโรงเรยน ประวตการศกษา
รายละเอยดการศกษาของนกศกษา
พรอมทงตกแตงเวบเพจใหสวยงาม จากนนใหบนทกโดย
1. สราง Folder ตามรปแบบดงน รหสนกศกษา_ชอภาษาองกฤษ_เลขท
2. สราง Folder ยอยชอ img เพอเกบรปภาพ
3. บนทกหนาเวบเพจโดยใชชอวา Education
ม.ย.60 F-วช-100
กจกรรมการเรยน ( สปดาหท 9-10 ชวโมงท 33 - 40 )
- ผสอนชแจงจดประสงคการเรยนรรายสปดาหน และทบทวนการแทรกตารางลงในเวบเพจ - ผเรยนฝกปฏบตทบทวนการสรางตารางใหม - ผสอนเชอมโยงความรคาบทแลวในการทบทวนการสรางตารางเพอน าเขาสวธการแทรกแถวและคอลมนโดย
ผสอนใชวธการแลกเปลยนเรยนรกบผเรยนวา “นศ.สามารถแทรกแถวและคอลมนเพมไดกวธ อยางไรบาง? ”
จากนนผสอนจงสรปความคดรวบยอดมาสอนในภาพรวมและบอกวธการแทรกแถวและคอลมนในต าแหนง
ตางๆทตองการได
- ผเรยนฝกปฏบต การแทรกและลบคอลมนตามรปแบบทผสอนมอบหมาย
- ผสอนแลกเปลยนเรยนรกบผเรยนเพอทบทวนความรพนฐานเดมของผเรยนวา “นศ.สามารถตกแตงสเสนขอบ
ตางรางและสพนของตารางไดดวยวธใดบาง?” จากนนเขยนความคดเหนตางๆของผเรยนลงบน Writeboard
และน ามาสรปความคดรวบยอดเกยวกบการก าหนดสเสนขอบและพนหลง และผสอนเพมเตมเนอหาในสวน
ของการจดต าแหนงของตารางและการจดต าแหนงเนอหาในเซลลอยางถกตองดวย
- ผสอนเปดโอกาสใหผเรยนซกถามขอสงสย หรอเนอหาทยงไมเขาใจ
- ผเรยนจดบนทกสรปเนอหาโดยยอและท าใบงานบนทกผลการเรยนร
- ผสอนและผเรยนรวมกนสรปเนอหา
เทคนควธการสอนทน ามาใช 1. การอภปรายแลกเปลยนเรยนรระหวางผเรยนกบผสอน 2. การพฒนาทกษะ และกระบวนการแกปญหา สอการเรยนการสอนและแหลงการเรยนร 1. สอสงพมพ ไดแก 1.1 หนงสอ “การออกแบบเวบเพจ” โดย รวพร จรญพนธเกษม และชษณพงศ ธญญลกษณ 1.2 หนงสอ “การออกแบบเวบเพจ” โดย ศวช กาญจนชม,พลอยวนส หวางภกด และกาญจนา ไชยศร 2. โสตทศนปกรณ ไดแก Projector 3. สอเทคโนโลยขนสง ไดแก โปรแกรมลอคหนาจอเพอการเรยนร HP Class Room 4. อนเทอรเนต 4.1 http://eduweb.kpru.ac.th/wbi/index.php/menu-joomal3 4.2 http://www.slideshare.net/tamaypimkanok/ss-26243379
ม.ย.60 F-วช-100
การวดประเมนผล เกณฑการประเมนผล 1. สงเกตจากพฤตกรรมการปฏบตกจกรรมทไดรบ มอบหมายและการตอบค าถามในชนเรยน
1. ผเรยนมสวนรวมในการตอบค าถาม และแสดงความ คดเหนมากกวารอยละ 70
เอกสารอางอง/เวบไซต
1. http://eduweb.kpru.ac.th/wbi/index.php/menu-joomal3
2. http://www.slideshare.net/tamaypimkanok/ss-26243379
ม.ย.60 F-วช-100
แผนการจดการเรยนรแบบฐานสมรรถนะ
หนวยท 5 ชอวชา การออกแบบเวบเพจ รหสวชา 3008 - 9001 สอนสปดาหท 11 - 12
ชอหนวย การสรางจดเชอมโยง ชวโมงรวม 8 ชวโมง
ระดบ ปวส. ชอผสอน อาจารยเกสรา ฉายารตน จ านวน 4 ชงโมง/สปดาห
สาระส าคญ
ศกษาและปฏบตเกยวกบการสรางจดเชอมโยง ( Hyperlink ) เปนการเชอมโยงกนจากจดหนงของเอกสารไปยงอกต าแหนงหนงของเอกสารเดยวกน หรอตางเอกสารกนบนอนเทอรเนต โดยใชขอความรปภาพ หรอเมนแบบดรอปดาวนอยางใดอยางหนงเพอเปนตนทางในการเชอมโยงไปสเอกสารปลายทาง ซงอาจเปนจดใดจดหนงในเอกสารเดยวกน (Named Anchor) เวบเพจอนๆ เวบไซต อเมล หรอแมแตไฟลขอมลส าหรบดาวนโหลดและการรนไฟลโปรแกรม เปนตน จดประสงคการเรยนร จดประสงคทวไป 1. รและเขาใจเกยวกบการเชอมโยงแบบตางๆในเวบเพจไดถกตอง
2. รและเขาใจเกยวกบการสรางจดเชอมโยง 3. มทกษะในการเชอมโยงในรปแบบตางๆได จดประสงคเชงพฤตกรรม
1. บอกองคประกอบในการท างานของ Link ไดถกตอง 2. อธบายการเชอมโยงแตละประเภทไดถกตอง 3. เปรยบเทยบความแตกตางของการเชอมโยงแตละประเภทไดถกตอง 4. ปฏบตการสรางจดเชอมโยงในเวบเพจหนาเดยวกนไดถกตอง 5. ปฏบตการสรางจดเชอมโยงไปยงเวบเพจหรอไฟลภายในเวบไซตเดยวกนไดถกตอง 6. ปฏบตการสรางจดเชอมโยงไปยงเวบไซตอนได 7. ปฏบตการสรางจดเชอมโยงเพอสงอเมลได 8. ปฏบตการสรางจดเชอมโยงบนภาพแบบ Image Map ได 9. ปฏบตการสรางจดเชอมโยงแบบ Rollover Image ได 10.ก าหนดลกษณะการเปดหนาเวบใหมทเชอมโยงไปไดเหมาะสม
ม.ย.60 F-วช-100
สมรรถนะรายหนวย ปฏบตการสรางจดเชอมโยงในรปแบบตางๆบนหนาเวบเพจไดอยางถกตอง สาระการเรยนร
5. การสรางจดเชอมโยง 5.1 ประเภทของการเชอมโยง
5.1.1 องคประกอบในการท างานของ Link 5.1.2 ประเภทของการเชอมโยงในรปแบบตางๆ 5.1.3 ความแตกตางของการเชอมโยงแตละประเภท
5.2 การสรางจดเชอมโยงในรปแบบตางๆ 5.2.1 การสรางจดเชอมโยงในเวบเพจหนาเดยวกน 5.2.2 กาสรางจดเชอมโยงไปยงเวบเพจหรอไฟลภายในเวบไซตเดยวกน 5.2.3 การสรางจดเชอมโยงไปยงเวบไซตอน 5.2.4 การสรางจดเชอมโยงไปยงอเมล 5.2.5 การสรางจดเชอมโยงบนภาพแบบ Image Map 5.2.6 การสรางจดเชอมโยงแบบ Rollover Image 5.2.7 การเลอกก าหนดลกษณะการเปดหนาเวบใหมทเชอมโยง
ปรชญาเศรษฐกจพอเพยงและคณธรรมทมงเนน 1. ความตรงตอเวลา
2. เนนใหเปนผใฝเรยนร 3. การเปดโอกาสใหผเรยนไดแลกเปลยนเรยนรและแสดงความคดเหน 4. การสรางกระบวนการคดอยางรอบคอบ
น าปญหาและอปสรรคในการเรยนการสอนมาปรบปรงการเรยนการสอน 1. ผเรยนบางสวนไมฟงเวลาสอนทฤษฎ และเมอใหลงมอปฏบตกมกจะไมสมารถปฏบตตามค าสงได
2. ผเรยนขาดความรบผดชอบในการปฏบตงานทไดรบมอบหมาย
กจกรรมการเรยนการสอน (สปดาหท 11-12 ชวโมงท 41-48) - ผสอนชแจงจดประสงคการเรยน รายสปดาหน
- ผสอนแลกเปลยนเรยนรกบผเรยนในเชงการแสดงความคดเหนวา “ จากการเรยนในคาบทผานๆมา เราสามารถ สรางเวบไซตไดอยางสมบรณหรอยง อยางไร ” เพอเชอมโยงสการเรยนรในการเชอมโยงเวบเพจ - ผสอนสอบถามผเรยนวา “ ผเรยนรจกการเชอมโยงในรปแบบใดบาง ” โดยแลกเปลยนเรยนรผานกระดาน
ม.ย.60 F-วช-100
Writeboard เพอรวบรวมความคดเหนของผเรยน แลวน าความคดเหนของผเรยนมาสรปความคดรวบยอดเพอ เชอมโยงไปสการอธบายทฤษฎในการเชอมโยงในแตละรปแบบวามการเชอมโยงอยางไร ใชงานอยางไร และ ใหผเรยนรวมยกตวอยาง - ผสอนอธบายและสาธตการเชอมโยงแบบตางๆแกผเรยนผานโปรแกรม Net School Support และเปดโอกาสให ผเรยนซกถามขอสงสย - ผสอนใหผเรยนฝกปฏบตโดยท าใบงานท 4
เทคนควธการสอนทน ามาใช 1. การอภปรายแลกเปลยนเรยนรระหวางผเรยนกบผสอน สอการเรยนการสอนและแหลงการเรยนร 1. สอสงพมพ ไดแก 1.1 หนงสอ “การออกแบบเวบเพจ” โดย รวพร จรญพนธเกษม และชษณพงศ ธญญลกษณ 1.2 หนงสอ “การออกแบบเวบเพจ” โดย ศวช กาญจนชม,พลอยวนส หวางภกด และกาญจนา ไชยศร 2. โสตทศนปกรณ ไดแก Projector 3. สอเทคโนโลยขนสง ไดแก โปรแกรมลอคหนาจอเพอการเรยนร HP Class Room 4. อนเทอรเนต 4.1 http://eduweb.kpru.ac.th/wbi/index.php/menu-joomal3 4.2 http://www.slideshare.net/tamaypimkanok/ss-26243379
การวดประเมนผล เกณฑการประเมนผล
1. แบบฝกหดทมอบหมาย ใบงานท 4 การสรางจดเชอมโยง2. สงเกตจากพฤตกรรมการปฏบตกจกรรมทไดรบ มอบหมายและการตอบค าถามในชนเรยน
1. ผเรยนรอยละ 80 ท าแบบฝกหดใบงานท 4 ไดคะแนน 4 คะแนนขนไป 2. ผเรยนมสวนรวมในการตอบค าถาม และแสดงความ คดเหนมากกวารอยละ 70
เอกสารอางอง/เวบไซต
1. http://eduweb.kpru.ac.th/wbi/index.php/menu-joomal3
2. http://www.slideshare.net/tamaypimkanok/ss-26243379
ม.ย.60 F-วช-100
ใบงาน (Job Sheet) ท 4
รหสวชา: 3008 - 9001 ชอวชา: การออกแบบเวบเพจ
หนวยท: 4 ชอหนวย: การใสตารางในเวบเพจ
ชองาน: การใสตารางในเวบเพจ
จดประสงคเชงพฤตกรรม 1. ปฏบตการสรางจดเชอมโยงเวบเพจหนาเดยวกนไดถกตอง 2. ปฏบตการสรางจดเชอมโยงไปยงเวบเพจอนหรอไฟลภายในเวบไซตเดยวกนไดถกตอง 3. ก าหนดลกษณะการเปดหนาเวบใหมทเชอมโยงไปไดเหมาะสม
ระยะเวลาการปฏบตงาน เวลา 45 นาท
ค าสง / แนวทางการปฏบต 1. ใหนกเรยนสรางเวบเพจ 4 หนา รายละเอยดตามตวอยาง
2. ท าการเชอมโยง (Link) หนาเวบเพจเขาหากน
3. บนทกชนงานตามตวอยาง
การวดประเมนผล และเกณฑการประเมน 1. วธการวดและประเมน : ผ เรยนท าแบบฝกหดทมอบหมาย ใบงานท 4
2. เครองมอวดและประเมน : แบบฝกหดทมอบหมาย ใบงานท 4
3. เกณฑวดและประเมน : ประเมนความถกตอง
‐ เกณฑการบนทกขอมลและตกแตงเอกสารในการปฏบตงาน บนทกงานขอมลไดถกตองและตกแตงเอกสารไดสวยงาม ไดคะแนน 5 คะแนน บนทกงานขอมลไมถกตองและตกแตงเอกสารไดสวยงาม ไดคะแนน 4 คะแนน บนทกงานขอมลไดถกตองแตตกแตงแบบพนฐาน ไดคะแนน 3 คะแนน บนทกงานไมถกตองแตตกตกแตงแบบพนฐาน ไดคะแนน 2 คะแนน บนทกงานไมถกตองและท างานไมเสรจ ไดคะแนน 1 คะแนน
ม.ย.60 F-วช-100
ม.ย.60 F-วช-100
แผนการจดการเรยนรแบบฐานสมรรถนะ
หนวยท 6 ชอวชา การออกแบบเวบเพจ รหสวชา 3008 - 9001 สอนสปดาหท 13
ชอหนวย การใชงาน CSS เบองตน ชวโมงรวม 8 ชวโมง
ระดบ ปวส. ชอผสอน อาจารยเกสรา ฉายารตน จ านวน 4 ชงโมง/สปดาห
สาระส าคญ
ศกษาและปฏบตเกยวกบการใชงาน CSS โดยเรมจากการรจกหนาตาง CSS Styles การก าหนดสไตลชท การใชสไตลชททก าหนด การบนทก การน าสไตลชททออกแบบมาใชงาน การแกไข การลบสไตลชท เพอใหการท างานสามารถใชงานไดอยางมประสทธภาพเพมขน สะดวกในการใชงานรปแบบตางๆ
จดประสงคการเรยนร จดประสงคทวไป 1. รและเขาใจวธการพฒนาเวบดวย CSS และการสรางแมแบบเอกสารเวบไซต
2. ประยกตใชความรเกยวกบการพฒนาเวบดวย CSS และการสรางแมแบบเอกสารเวบไซต 3. มคณลกษณะทพงประสงค และแสดงเจตคตทดในวชาชพคอมพวเตอร จดประสงคเชงพฤตกรรม
1. บอกความหมายของ CSS ได 2. อธบายคณสมมบตและประเภทของ CSS ได 3. อธบายวธการใช CSS ใหกบขอความได 4. อธบายวธการสรางแมแบบเอกสารเวบไซตได 5. ปฏบตการใช CSS และสรางแมแบบเอกสารได
สมรรถนะรายหนวย แสดงทกษะในการจดหนาเวบเพจโดยเลอกใชค าสง CSS ไดอยางเหมาะสม
ม.ย.60 F-วช-100
สาระการเรยนร 6. การใชงาน CSS เบองตน
6.1 การจดหนาเวบเพจโดยใชค าสง CSS 6.1.1 วธการก าหนดโครงสรางของ Cascading Style Sheet 6.1.2 การท างานหนาตาง CSS Styles 6.1.3 การสราง CSS ใหม และน ามาใชงาน 6.1.4 การยกเลก และลบ CSS 6.1.5 วธการแกไข CSS Style
ปรชญาเศรษฐกจพอเพยงและคณธรรมทมงเนน 1. ความตรงตอเวลา
2. ความพอประมาณ 3. การมภมคมกนในตวทด 4. เงอนไขความร 5. ความซอสตยและการมสตปญญา
น าปญหาและอปสรรคในการเรยนการสอนมาปรบปรงการเรยนการสอน -
กจกรรมการเรยนการสอน (สปดาหท 13 ชวโมงท 49 - 52) - ผสอนชแจงจดประสงคการเรยน รายสปดาหน
- ผสอนรวมสนทนากบผเรยนเกยวกบเรองการใชงาน CSS Style Sheet เพอแลกเปลยนเรยนรและดพนฐานของ ผเรยนในเบองตนผานกระดาน Writeboard เพอน ามาสรปความคดรวบยอดเชอมโยงไปสการเรยนการสอน ทฤษฎ - ผสอนอธบาย พรอมยกตวอยาง และแสดงวธการปฏบตใหผเรยนดผานโปรแกรม HP Class Room - ผสอนเปดโอกาสใหผเรยนซกถามขอสงสย - ผสอนประเมนพฤตกรรมผเรยนโดยสมเรยกถามตามเลขททละคน
เทคนควธการสอนทน ามาใช 1. การอภปรายแลกเปลยนเรยนรระหวางผเรยนกบผสอน
ม.ย.60 F-วช-100
สอการเรยนการสอนและแหลงการเรยนร 1. สอสงพมพ ไดแก 1.1 หนงสอ “การออกแบบเวบเพจ” โดย รวพร จรญพนธเกษม และชษณพงศ ธญญลกษณ 1.2 หนงสอ “การออกแบบเวบเพจ” โดย ศวช กาญจนชม,พลอยวนส หวางภกด และกาญจนา ไชยศร 2. โสตทศนปกรณ ไดแก Projector 3. สอเทคโนโลยขนสง ไดแก โปรแกรมลอคหนาจอเพอการเรยนร HP Class Room 4. อนเทอรเนต 4.1 http://eduweb.kpru.ac.th/wbi/index.php/menu-joomal3 4.2 http://www.slideshare.net/tamaypimkanok/ss-26243379
การวดประเมนผล เกณฑการประเมนผล
1. แบบฝกหดทมอบหมาย ใบงานท 4 การสรางจดเชอมโยง2. สงเกตจากพฤตกรรมการปฏบตกจกรรมทไดรบ มอบหมายและการตอบค าถามในชนเรยน
1. ผเรยนรอยละ 80 ท าแบบฝกหดใบงานท 4 ไดคะแนน 4 คะแนนขนไป 2. ผเรยนมสวนรวมในการตอบค าถาม และแสดงความ คดเหนมากกวารอยละ 70
เอกสารอางอง/เวบไซต
1. http://eduweb.kpru.ac.th/wbi/index.php/menu-joomal3
2. http://www.slideshare.net/tamaypimkanok/ss-26243379
ม.ย.60 F-วช-100
ใบงาน (Job Sheet) ท 5
รหสวชา: 3008 - 9001 ชอวชา: การออกแบบเวบเพจ
หนวยท: 6 ชอหนวย: การใชงาน CSS เบองตน
ชองาน: เอกสารสวยดวย CSS
จดประสงคเชงพฤตกรรม 1. อธบายวธการใช CSS ใหกบขอความได 2. ปฏบตการใช CSS และสรางแมแบบเอกสารได
ระยะเวลาการปฏบตงาน เวลา 45 นาท
ค าสง / แนวทางการปฏบต นกศกษาท าใบงานเรอง การปรบเอกสารดวย CSS Style ใหนกศกษาปฏบตตามค าสงใหถกตองสมบรณ (4 คะแนน จตพสย 1 คะแนน รวม 5 คะแนน) 1. ใหนกศกษาพมพประวตสวนตวของนกศกษาอยางนอย 10 บรรทดลงในโปรแกรม Adobe Dreamweaver CS6 พรอมทงสราง CSS Style ขนมาใชในใบงานอยางนอย 5 สไตล โดยใชชอของ CSS Style วา
Text_1 Text_2 Text_3 Text_4 Text_5
ตามล าดบ และสงงานโดยตงชอไฟลงานตามรปแบบดงน รหสนกศกษา_ชอ-สกล_ชน_เลขท โดย Run สงงานมาท โฟลเดอร ใบงาน CSS Style
ม.ย.60 F-วช-100
การวดประเมนผล และเกณฑการประเมน 1. วธการวดและประเมน : ผ เรยนท าแบบฝกหดทมอบหมาย ใบงานท 5
2. เครองมอวดและประเมน : แบบฝกหดทมอบหมาย ใบงานท 5
3. เกณฑวดและประเมน : ประเมนความถกตอง
‐ เกณฑการบนทกขอมลและตกแตงเอกสารในการปฏบตงาน บนทกงานขอมลไดถกตองและใชงาน CSS ไดถกตอง ไดคะแนน 5 คะแนน บนทกงานขอมลไมถกตองแตใชงาน CSS ไดถกตอง ไดคะแนน 4 คะแนน บนทกงานขอมลไดถกตองและใชงาน CSS ไดถกตองบางสวน ไดคะแนน 3 คะแนน บนทกงานไมถกตองและใชงาน CSS ไดถกตองบางสวน ไดคะแนน 2 คะแนน บนทกงานไมถกตองและท างานไมเสรจ ไดคะแนน 1 คะแนน
ม.ย.60 F-วช-100
แผนการจดการเรยนรแบบฐานสมรรถนะ
หนวยท 7 ชอวชา การออกแบบเวบเพจ รหสวชา 3008 - 9001 สอนสปดาหท 14-16
ชอหนวย การใชงานเฟรมและเทมเพลต ชวโมงรวม 12 ชวโมง
ระดบ ปวส. ชอผสอน อาจารยเกสรา ฉายารตน จ านวน 4 ชงโมง/สปดาห
สาระส าคญ
ศกษาและปฏบตเกยวกบการสรางเวบเพจหรอเวบไซตใหม การสรางโฟลเดอรส าหรบเกบไฟลเอกสาร พรอมทงไฟลทเกยวของไวเฉพาะ การก าหนดคณสมบตเบองตนใหกบเวบเพจ การใชเครองมอพนฐานของ Adobe Dreamweaver CS6 การแทรกขอความ และรปภาพใหกบเวบไซต
จดประสงคการเรยนร จดประสงคทวไป 1. รและเขาใจวธการสรางเฟรมและเทมเพลต
2. ประยกตใชความรเกยวกบการสรางเฟรมและเทมเพลตใหกบเวบไซต 3. มคณลกษณะทพงประสงค และแสดงเจตคตทดในวชาชพคอมพวเตอร จดประสงคเชงพฤตกรรม
1. บอกความหมายและองคประกอบของเฟรมและเทมเพลตได 2. อธบายขอควรระวงในการใชงานเฟรมและเทมเพลตได 3. อธบายวธการสรางเฟรมและเทมเพลตได 4. ปฏบตการสรางเฟรมและเทมเพลตได
สมรรถนะรายหนวย แสดงทกษะในการเรยกใชงานเฟรมและเทมเพลทไดถกตองเหมาะสม
ม.ย.60 F-วช-100
สาระการเรยนร 7. การใชงานเฟรมและเทมเพลต 7.1 ความรเบองตนเกยวกบการสรางเฟรม 7.1.1 รปแบบของเฟรม 7.1.2 ขนตอนการออกแบบเฟรม 7.1.3 การสรางเฟรมและก าหนดคณสมบตของเฟรม 7.1.4 การบนทก การลบ และสรางเฟรมเพมเตม 7.1.5 การแทรกเวบเพจลงในเฟรม 7.1.6 การเชอมโยงหนาเวบในเฟรม 7.2 การใชงานเทมเพลต 7.2.1 หลกการท างานและสวนประกอบของเทมเพลต 7.2.2 การสรางเทมเพตลจากเวบเพจทมอยแลว 7.2.3 การแกไขหนาเทมเพตและ Update ขนใหม 7.2.4 ขอแตกตางการใชงานเฟรมและเทมเพลต
ปรชญาเศรษฐกจพอเพยงและคณธรรมทมงเนน 1. ความตรงตอเวลา
2. ความพอประมาณ 3. การมภมคมกนในตวทด 4. เงอนไขความร 5. ความซอสตยและการมสตปญญา
น าปญหาและอปสรรคในการเรยนการสอนมาปรบปรงการเรยนการสอน ผเรยนบางสวนเขาเรยนสายท าใหไมสามารถปฏบตใบงานงานตามใบงานทผสอนมอบหมายได
กจกรรมการเรยนการสอน (สปดาหท 14-15 ชวโมงท 53-60) - ผสอนชแจงจดประสงคการเรยน รายสปดาหน
- ผเรยนทบทวนการใชสวนประกอบหนาจอโปรแกรม Adobe Dreamweaver CS6 - ผสอนบอกและอธบายการจดการไซตใหมเพอจดเกบเวบไซตการสรางไฟลและโฟลเดอร - ผสอนยกตวอยางการสรางไซตใหมโดยมไฟลและโฟลเดอรตวอยางเวบไซต 2 เวบไซต - ผสอนเปดโอกาสใหผเรยนซกถามขอสงสย หรอเนอหาทยงไมเขาใจ - ผเรยนจดบนทกสรปเนอหาโดยยอใหครบถวน
ม.ย.60 F-วช-100
- ผเรยนฝกปฏบตการสรางไซตใหม สรางเวบเพจ การลบ และเปลยนชอโฟลเดอร - ผสอนใหผเรยนคนหาขอมลและสรปขอมลหนาเวบไซต และปฏบตการจดการไซตใหม - ผสอนและผเรยนรวมกนสรปเนอหาในสปดาหน
เทคนควธการสอนทน ามาใช 1. การอภปรายแลกเปลยนเรยนรระหวางผเรยนกบผสอน 2.การคนหาขอมลเพอพฒนาการศกษาความรดวยตวเอง สอการเรยนการสอนและแหลงการเรยนร 1. สอสงพมพ ไดแก 1.1 หนงสอ “การออกแบบเวบเพจ” โดย รวพร จรญพนธเกษม และชษณพงศ ธญญลกษณ 1.2 หนงสอ “การออกแบบเวบเพจ” โดย ศวช กาญจนชม,พลอยวนส หวางภกด และกาญจนา ไชยศร 2. โสตทศนปกรณ ไดแก Projector 3. สอเทคโนโลยขนสง ไดแก โปรแกรมลอคหนาจอเพอการเรยนร HP Class Room 4. อนเทอรเนต 4.1 http://eduweb.kpru.ac.th/wbi/index.php/menu-joomal3 4.2 http://www.slideshare.net/tamaypimkanok/ss-26243379
การวดประเมนผล เกณฑการประเมนผล
1. สงเกตจากพฤตกรรมการปฏบตกจกรรมทไดรบ มอบหมายและการตอบค าถามในชนเรยน
1. ผเรยนมสวนรวมในการตอบค าถาม และแสดงความ คดเหนมากกวารอยละ 80
เอกสารอางอง/เวบไซต
1. http://eduweb.kpru.ac.th/wbi/index.php/menu-joomal3
2. http://www.slideshare.net/tamaypimkanok/ss-26243379
ม.ย.60 F-วช-100
กจกรรมการเรยนการสอน (สปดาหท 16 ชวโมงท 60-64) - ผสอนชแจงจดประสงคการเรยน รายสปดาหน - ฝกปฏบตทบทวนการสรางไซต และเวบเพจใหม - ผสอนบอกและอธบายการพมพขอความลงบนเวบเพจและสาธตการจดรปแบบขอความตางๆ - ผเรยนฝกปฏบต ตามรปแบบทผสอนมอบหมาย - ผสอนบอกและอธบายชนดของไฟลรปภาพ,การแทรกรปภาพลงบนเวบเพจและสาธตการแทรกรปภาพ - ผสอนเปดโอกาสใหผเรยนซกถามขอสงสย หรอเนอหาทยงไมเขาใจ - ผเรยนจดบนทกสรปเนอหาโดยยอและท าใบงานบนทกผลการเรยนร - ครและผเรยนรวมกนสรปเนอหา - ผเรยนท าแบบทดสอบหนวยท 6 เทคนควธการสอนทน ามาใช 1. การอภปรายแลกเปลยนเรยนรระหวางผเรยนกบผสอน 2.การคนหาขอมลเพอพฒนาการศกษาความรดวยตวเอง สอการเรยนการสอนและแหลงการเรยนร 1. สอสงพมพ ไดแก 1.1 หนงสอ “การออกแบบเวบเพจ” โดย รวพร จรญพนธเกษม และชษณพงศ ธญญลกษณ 1.2 หนงสอ “การออกแบบเวบเพจ” โดย ศวช กาญจนชม,พลอยวนส หวางภกด และกาญจนา ไชยศร 2. โสตทศนปกรณ ไดแก Projector 3. สอเทคโนโลยขนสง ไดแก โปรแกรมลอคหนาจอเพอการเรยนร HP Class Room 4. อนเทอรเนต 4.1 http://eduweb.kpru.ac.th/wbi/index.php/menu-joomal3 4.2 http://www.slideshare.net/tamaypimkanok/ss-26243379
การวดประเมนผล เกณฑการประเมนผล
1. แบบฝกหดบทท 6 2. สงเกตจากพฤตกรรมการปฏบตกจกรรมทไดรบ มอบหมายและการตอบค าถามในชนเรยน
1. ผเรยนรอยละ 80 ท าแบบฝกหดบทท 6 ผานเกณฑรอย ละ 60 ของคะแนน 2. ผเรยนมสวนรวมในการตอบค าถาม และแสดงความ คดเหนมากกวารอยละ 70
เอกสารอางอง/เวบไซต
1. http://eduweb.kpru.ac.th/wbi/index.php/menu-joomal3
2. http://www.slideshare.net/tamaypimkanok/ss-26243379
ม.ย.60 F-วช-100
แผนการจดการเรยนรแบบฐานสมรรถนะ
หนวยท 8 ชอวชา การออกแบบเวบเพจ รหสวชา 3008 - 9001 สอนสปดาหท 17-18
ชอหนวย การแทรกฟอรมและมลตมเดยบนเวบเพจ ชวโมงรวม 8 ชวโมง
ระดบ ปวส. ชอผสอน อาจารยเกสรา ฉายารตน จ านวน 4 ชงโมง/สปดาห
สาระส าคญ
ในการทางานเกยวกบการสรางเวบเพจ จาเปนตองเรยนรเทคนคหลายประเภทในการทางาน เพอใหงานเกดความถกตองสวยงาม สงทควรรอกอยางคอ การสรางฟอรม เครองมอในการสรางฟอรม ขนตอนตางๆ ในการสรางฟอรม การปรบแตงฟอรมในรปแบบตาง ๆ เพอใหเราสามารถใชงานไดอยางมประสทธภาพเพมมากขน สะดวกในการทางานในรปแบบตาง ๆโดยเฉพาะสอมลตมเดยทถกใชในอนเทอรเนต ซงนบวนสอเหลานดจะมบทบาทมากขนในการสรางเวบเพจเพราะจะท าใหเวบเพจของเรามความนาสนใจยงขน จดประสงคการเรยนร จดประสงคทวไป 1. รและเขาใจวธการสรางฟอรม
2. ประยกตใชความรเกยวกบการฟอรมเพอเอกสารบนเวบไซต 3. รและเขาใจเกยวกบการใชงานไฟลมลตมเดยเพอเวบไซต 4. ประยกตใชงานเกยวกบการใชงานไฟลมลตมเดยเพอเวบไซต 5. มคณลกษณะทพงประสงค และแสดงเจตคตทดในวชาชพคอมพวเตอร จดประสงคเชงพฤตกรรม
1. แสดงความรเกยวกบการสรางฟอรม 2. วเคราะหวางแผนจดการเลอกใชฟอรมเพอเอกสารบนเวบไซตไดอยางเหมาะสม 3. บอกความหมายและประโยชนของมลตมเดยได 4. อธบายองคประกอบของมลตมเดยได 5. อธบายวธการแทรกไฟล .swf ได 6. อธบายวธการแทรกไฟลวดโอได 7. อธบายวธการแทรกไฟลเสยงได 8. ปฏบตการใชมลตมเดยบนเวบไซตได
ม.ย.60 F-วช-100
สมรรถนะรายหนวย ปฏบตการแทรกมลตมเดยใหกบเวบไซตไดอยางเหมาะสม สาระการเรยนร
8. การแทรกฟอรมและมลตมเดยบนเวบเพจ 8.1 การสรางฟอรม 8.1.1 การท างานของฟอรม และองคประกอบของฟอรม 8.1.2 การใชงานเครองมอในการสรางฟอรมบนแทบ Forms 8.1.3 การสรางแบบฟอรมแบบตางๆ 8.1.4 การสรางฟลดกรอกขอความ Text Field, Text Area 8.1.5 การสรางฟลดแบบ Checkbox และ Radio Button 8.1.6 การสรางปม Submit และ Reset 8.2 การแทรกมลตมเดย 8.2.1 ลกษณะของไฟล Flash ทใชรวมกบ Adobe Dreamweaver CS6 8.2.2 ชนดของไฟลวดโอและเสยงทใชบนเวบเพจได 8.2.3 วธการแทรกไฟล Flash และ Flash Video ลงในเวบเพจ 8.2.4 วธการแทรกไฟลวดโอและเสยงลงในเวบเพจ
ปรชญาเศรษฐกจพอเพยงและคณธรรมทมงเนน 1. ความตรงตอเวลา
2. ความพอประมาณ 3. การมภมคมกนในตวทด 4. เงอนไขความร 5. ความซอสตยและการมสตปญญา
น าปญหาและอปสรรคในการเรยนการสอนมาปรบปรงการเรยนการสอน ผเรยนบางสวนเขาเรยนสายท าใหไมสามารถปฏบตใบงานงานตามใบงานทผสอนมอบหมายได
ม.ย.60 F-วช-100
กจกรรมการเรยนการสอน (สปดาหท 17 ชวโมงท 65-68) - ผสอนชแจงจดประสงคการเรยน รายสปดาหน
- ผสอนน าเขาสบทเรยนโดยการตงค าถาม ใหผเรยนในหองแสดงความคดเหนเกยวกบแบบฟอรมในชวตประจ าวน ทนกเรยนรจกวาเคยเหนทไหนบาง รายละเอยดในฟอรมมรายละเอยดเกยวกบอะไรบาง - ผเรยนแสดงความคดเหนเกยวกบฟอรมและมการแลกเปลยนเรยนรกบเพอนในชนเรยนและผสอน - ผสอนอธบายผเรยนเกยวกบเครองมอทใชรบขอมลของฟอรม - ผสอนอธบายพรอมกลาวสรปเนอหาในการเรยนเพมเตมพรอมใหผเรยนสรปความคดรวบยอด - น าเขาสบทเรยนโดยตงค าถามเกยวมลตมเดย วาในชวตประจ าวนนกศกษารมลตมเดยหรอไม อะไรบาง - ผเรยนแสดงความคดเหนเกยวกบเกยวกบมลตมเดยทผเรยนรจกพรอมอธบาย - ผสอนเกยวกบค าจ ากดความ “มลตมเดย” ใหกระชบเพอใหผเรยนเขาใจงาย - ผสอนอธบายเกยวกบประเภทของไฟลมลตมเดย และการแสดงไฟลมลตมเดยบนเวบเพจ - ใหผเรยนออกแบบหนาเวบทมการแทรกไฟลมลตมเดยทเหมาะสมกบงาน และวางในต าแหนงทเหมาะสม - ผสอนอธบายพรอมกลาวสรปเนอหาในการเรยนเพมเตมพรอมใหผเรยนสรปความคดรวบยอด - ผสอนรวมกบผเรยนอภปรายแลกเปลยนปญหา และหาขอแกไขเพอสามารถน าไปใชในโอกาสตอไป - ผสอนซกถามปญหาทเกดขนกบผเรยนทผานมา - ผสอนรวมกบผเรยนแกไขปญหาทเกดขน - ผเรยนสรปความคดรวบยอดเกยวกบเนอหาประจ าหนวยการเรยนร
เทคนควธการสอนทน ามาใช 1. การอภปรายแลกเปลยนเรยนรระหวางผเรยนกบผสอน 2.การคนหาขอมลเพอพฒนาการศกษาความรดวยตวเอง สอการเรยนการสอนและแหลงการเรยนร 1. สอสงพมพ ไดแก 1.1 หนงสอ “การออกแบบเวบเพจ” โดย รวพร จรญพนธเกษม และชษณพงศ ธญญลกษณ 1.2 หนงสอ “การออกแบบเวบเพจ” โดย ศวช กาญจนชม,พลอยวนส หวางภกด และกาญจนา ไชยศร 2. โสตทศนปกรณ ไดแก Projector 3. สอเทคโนโลยขนสง ไดแก โปรแกรมลอคหนาจอเพอการเรยนร HP Class Room 4. อนเทอรเนต 4.1 http://eduweb.kpru.ac.th/wbi/index.php/menu-joomal3 4.2 http://www.slideshare.net/tamaypimkanok/ss-26243379
ม.ย.60 F-วช-100
การวดประเมนผล เกณฑการประเมนผล 1. สงเกตจากพฤตกรรมการปฏบตกจกรรมทไดรบ มอบหมายและการตอบค าถามในชนเรยน
1. ผเรยนมสวนรวมในการตอบค าถาม และแสดงความ คดเหนมากกวารอยละ 80
เอกสารอางอง/เวบไซต
1. http://eduweb.kpru.ac.th/wbi/index.php/menu-joomal3
2. http://www.slideshare.net/tamaypimkanok/ss-26243379
กจกรรมการเรยนการสอน (สปดาหท 18 ชวโมงท 69-72)
- สอบปลายภาค ภาคเรยนท 2/2561 -