ม.ย.60 F-วช-100

แผนการจดการเรยนร

รหสวชา 3204-2005 ชอวชา การออกแบบและพฒนาเวบไซต ( 3 หนวยกต 4 ชวโมง / สปดาห )

หมวดวชาทกษะวชาชพ กลมทกษะวชาชพเฉพาะ

หลกสตร ประกาศนยบตรวชาชพ พทธศกราช 2557

ประเภทวชา บรหารธรกจ สาขาวชา คอมพวเตอรธรกจ

ระดบประกาศนยบตรวชาชพชนสง ชนปท 1

โดย อาจารย เกสรา ฉายารตน

กลมวชา คอมพวเตอรและเทคโนโลยส านกงาน

วทยาลยอาชวศกษาสนตราษฎร ในพระอปถมภ

สมเดจพระเจาภคนเธอ เจาฟาเพชรรตนราชสดา สรโสภาพณณวด

ภาคเรยนท 2 ปการศกษา 2561

ม.ย.60 F-วช-100

แผนการจดการเรยนร รหสวชา 3204 - 2005 ชอวชา การออกแบบและพฒนาเวบไซต จ านวน 3 หนวยกต 4 ชวโมง/สปดาห หลกสตรประกาศนยบตรวชาชพชนสง พทธศกราช 2557 ประเภทวชา บรหารธรกจ สาขาวชา คอมพวเตอรธรกจ

จดประสงครายวชา เพอให 1. เขาใจเกยวกบหลกการออกแบบเวบไซต 2. มทกษะในการประยกตใชโปรแกรมการสรางเวบไซต 3. มคณลกษณะนสยทพงประสงค และเจตคตทดในวชาคอมพวเตอรธรกจ สมรรถนะรายวชา 1. แสดงความรเกยวกบหลกการออกแบบและพฒนาเวบไซต 2. ออกแบบและพฒนาเวบไซตในงานธรกจ ค าอธบายรายวชา ศกษาและปฏบตเกยวกบหลกการออกแบบเวบไซตในงานธรกจ การใชส การใชอกษร การใชรปภาพ การออกแบบกราฟกและภาพเคลอนไหวส าหรบเวบไซต ระบบน าทางเวบ (Navigation) สวนตดตอผใช (User Interface) แมแบบเอกสารเวบ สรางเวบไซต กรณศกษา

ม.ย.60 F-วช-100

แผนการจดการเรยนรแบบฐานสมรรถนะ

หนวยท 1 ชอวชา การออกแบบและพฒนาเวบไซต รหสวชา 3204 - 2005 สอนสปดาหท 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

รหสวชา: 3204 - 2005 ชอวชา: การออกแบบและพฒนาเวบไซต

หนวยท: 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 ชอวชา การออกแบบและพฒนาเวบไซต รหสวชา 3204 - 2005 สอนสปดาหท 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 คะแนน โดยจะมการใหตอบ ค าถามโดยสมครใจ และสมเรยกตามเลขท - ผสอนใหผเรยนปฏบตการเขาโปรแกรม Adobe Dreamweaver CS6 เพอศกษาสวนประกอบของโปรแกรม

ม.ย.60 F-วช-100

- ผเรยนคนหาชอเวบไซตทมการสอน 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

รหสวชา: 3204 - 2005 ชอวชา: การออกแบบและพฒนาเวบไซต

หนวยท: 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 ชอวชา การออกแบบและพฒนาเวบไซต รหสวชา 3204 - 2005 สอนสปดาหท 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. มการเตรยมพรอมในการเรยนและการปฏบตงาน (ความรบผดชอบ)

ม.ย.60 F-วช-100

น าปญหาและอปสรรคในการเรยนการสอนมาปรบปรงการเรยนการสอน 1. ผเรยนเขาหองเรยนไมตรงเวลา 2. ผเรยนยงไมพรอมในการเตรยมอปกรณการเรยน จงไดอบรมคณธรรมความรบผดชอบ กจกรรมการเรยนการสอน (สปดาหท 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 ชอวชา การออกแบบและพฒนาเวบไซต รหสวชา 3204 - 2005 สอนสปดาหท 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

รหสวชา: 3204 - 2005 ชอวชา: การออกแบบและพฒนาเวบไซต

หนวยท: 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 ชอวชา การออกแบบและพฒนาเวบไซต รหสวชา 3204 - 2005 สอนสปดาหท 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

รหสวชา: 3204 - 2005 ชอวชา: การออกแบบและพฒนาเวบไซต

หนวยท: 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 ชอวชา การออกแบบและพฒนาเวบไซต รหสวชา 3204 - 2005 สอนสปดาหท 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

รหสวชา: 3204 - 2005 ชอวชา: การออกแบบและพฒนาเวบไซต

หนวยท: 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 ชอวชา การออกแบบและพฒนาเวบไซต รหสวชา 3204 - 2005 สอนสปดาหท 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 ชอวชา การออกแบบและพฒนาเวบไซต รหสวชา 3204 - 2005 สอนสปดาหท 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 -