แผนการจัดการเรียนรู้58.82.156.60/quality/research/p/T1302-57-3308-9001.pdf · 1.1 ความรู้เบ้ืองต้นเกี่ยวกบัความหมายและประเภทของงานกราฟิก

ม.ย.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/

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/


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. สงเกตจากพฤตกรรมการปฏบตกจกรรมทไดรบ มอบหมายและการตอบค าถามในชนเรยน






ม.ย.60 F-วช-100


หนวยท 2 ชอวชา การออกแบบเวบเพจ รหสวชา 3008 - 9001 สอนสปดาหท 3

ชอหนวย การท างานของเวบไซตเบองตน ชวโมงรวม 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. สงเกตจากพฤตกรรมการปฏบตกจกรรมทไดรบ มอบหมายและการตอบค าถามในชนเรยน







ม.ย.60 F-วช-100



หนวยท: 2 ชอหนวย: การท างานของเวบไซตเบองตน

ชองาน: การท างานของเวบไซตเบองตน

จดประสงคเชงพฤตกรรม 1. อธบายความหมายของค าศพททส าคญในการสรางเวบไซตได 2. อธบายสวนประกอบตางๆ ของหนาจอโปรแกรม Adobe Dreamweaver CS6 ได


ค าสง / แนวทางการปฏบต ใหนกศกษาบอกเขยนอธบายโจทยค าถามตอไปนใหชดเจนและเขาใจพอสงเขป




‐ 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



ชอหนวย การสรางเวบไซตดวยโปรแกรมส าเรจรป ชวโมงรวม 12 ชวโมง


สาระส าคญ ศกษาและปฏบตเกยวกบการสรางเวบเพจหรอเวบไซตใหมการสรางโฟลเดอรส าหรบเกบไฟลเอกสาร พรอมทงไฟลทเกยวของไวเฉพาะ การก าหนดคณสมบตเบองตนใหกบเวบเพจ การใชเครองมอพนฐานของ 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



http://eduweb.kpru.ac.th/wbi/index.php/menu-joomal3

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. http://www.thairetouch.com/ 2. http://eduweb.kpru.ac.th/wbi/index.php/menu-joomal3






ม.ย.60 F-วช-100



ชอหนวย การใสตารางในเวบเพจ ชวโมงรวม 16 ชวโมง


สาระส าคญ

ศกษาและปฏบตเกยวกบการสรางใสตารางบนเวบเพจ การสรางตาราง ใสขอมลในตาราง ปรบขนาดชองตาราง การปรบแตงตาราง การก าหนดส ขนาดใหกบตาราง การซอนตาราง การแทรกรปภาพในตาราง การน าขอมลสตาราง การใชน าตารางเขามาชวยในการจดรปแบบเวบเพจใหสวยงาม เปนระเบยบ จดประสงคการเรยนร จดประสงคทวไป 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








ม.ย.60 F-วช-100



หนวยท: 4 ชอหนวย: การใสตารางในเวบเพจ

ชองาน: การใสตารางในเวบเพจ

จดประสงคเชงพฤตกรรม 1. ปฏบตการเขยนแผนผงโครงรางหนาเวบเพจได 2. ปฏบตการสรางตารางซอนตารางเพอจดเลยเอาทของเวบเพจตามโครงรางทก าหนดได


ค าสง / แนวทางการปฏบต ใหนกศกษาสรางเวบเพจตารางประวตการศกษาตงแตอดตจนถงปจจบนของนกศกษาตามรปแบบทก าหนดใหดงน (4 คะแนน จตพสย 1 คะแนน รวม 5 คะแนน)




‐ เกณฑการบนทกขอมลและตกแตงเอกสารในการปฏบตงาน บนทกงานขอมลไดถกตองและตกแตงเอกสารไดสวยงาม ไดคะแนน 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








ม.ย.60 F-วช-100


หนวยท 5 ชอวชา การออกแบบเวบเพจ รหสวชา 3008 - 9001 สอนสปดาหท 11 - 12

ชอหนวย การสรางจดเชอมโยง ชวโมงรวม 8 ชวโมง



ศกษาและปฏบตเกยวกบการสรางจดเชอมโยง ( 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. ผเรยนขาดความรบผดชอบในการปฏบตงานทไดรบมอบหมาย


- ผสอนแลกเปลยนเรยนรกบผเรยนในเชงการแสดงความคดเหนวา “ จากการเรยนในคาบทผานๆมา เราสามารถ สรางเวบไซตไดอยางสมบรณหรอยง อยางไร ” เพอเชอมโยงสการเรยนรในการเชอมโยงเวบเพจ - ผสอนสอบถามผเรยนวา “ ผเรยนรจกการเชอมโยงในรปแบบใดบาง ” โดยแลกเปลยนเรยนรผานกระดาน

ม.ย.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. สงเกตจากพฤตกรรมการปฏบตกจกรรมทไดรบ มอบหมายและการตอบค าถามในชนเรยน









ม.ย.60 F-วช-100



หนวยท: 4 ชอหนวย: การใสตารางในเวบเพจ

ชองาน: การใสตารางในเวบเพจ

จดประสงคเชงพฤตกรรม 1. ปฏบตการสรางจดเชอมโยงเวบเพจหนาเดยวกนไดถกตอง 2. ปฏบตการสรางจดเชอมโยงไปยงเวบเพจอนหรอไฟลภายในเวบไซตเดยวกนไดถกตอง 3. ก าหนดลกษณะการเปดหนาเวบใหมทเชอมโยงไปไดเหมาะสม


ค าสง / แนวทางการปฏบต 1. ใหนกเรยนสรางเวบเพจ 4 หนา รายละเอยดตามตวอยาง

2. ท าการเชอมโยง (Link) หนาเวบเพจเขาหากน

3. บนทกชนงานตามตวอยาง

การวดประเมนผล และเกณฑการประเมน 1. วธการวดและประเมน : ผ เรยนท าแบบฝกหดทมอบหมาย ใบงานท 4



‐ เกณฑการบนทกขอมลและตกแตงเอกสารในการปฏบตงาน บนทกงานขอมลไดถกตองและตกแตงเอกสารไดสวยงาม ไดคะแนน 5 คะแนน บนทกงานขอมลไมถกตองและตกแตงเอกสารไดสวยงาม ไดคะแนน 4 คะแนน บนทกงานขอมลไดถกตองแตตกแตงแบบพนฐาน ไดคะแนน 3 คะแนน บนทกงานไมถกตองแตตกตกแตงแบบพนฐาน ไดคะแนน 2 คะแนน บนทกงานไมถกตองและท างานไมเสรจ ไดคะแนน 1 คะแนน

ม.ย.60 F-วช-100

ม.ย.60 F-วช-100


หนวยท 6 ชอวชา การออกแบบเวบเพจ รหสวชา 3008 - 9001 สอนสปดาหท 13

ชอหนวย การใชงาน CSS เบองตน ชวโมงรวม 8 ชวโมง



ศกษาและปฏบตเกยวกบการใชงาน 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


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. สงเกตจากพฤตกรรมการปฏบตกจกรรมทไดรบ มอบหมายและการตอบค าถามในชนเรยน









ม.ย.60 F-วช-100



หนวยท: 6 ชอหนวย: การใชงาน CSS เบองตน

ชองาน: เอกสารสวยดวย CSS

จดประสงคเชงพฤตกรรม 1. อธบายวธการใช CSS ใหกบขอความได 2. ปฏบตการใช CSS และสรางแมแบบเอกสารได


ค าสง / แนวทางการปฏบต นกศกษาท าใบงานเรอง การปรบเอกสารดวย 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



‐ เกณฑการบนทกขอมลและตกแตงเอกสารในการปฏบตงาน บนทกงานขอมลไดถกตองและใชงาน CSS ไดถกตอง ไดคะแนน 5 คะแนน บนทกงานขอมลไมถกตองแตใชงาน CSS ไดถกตอง ไดคะแนน 4 คะแนน บนทกงานขอมลไดถกตองและใชงาน CSS ไดถกตองบางสวน ไดคะแนน 3 คะแนน บนทกงานไมถกตองและใชงาน CSS ไดถกตองบางสวน ไดคะแนน 2 คะแนน บนทกงานไมถกตองและท างานไมเสรจ ไดคะแนน 1 คะแนน

ม.ย.60 F-วช-100



ชอหนวย การใชงานเฟรมและเทมเพลต ชวโมงรวม 12 ชวโมง



ศกษาและปฏบตเกยวกบการสรางเวบเพจหรอเวบไซตใหม การสรางโฟลเดอรส าหรบเกบไฟลเอกสาร พรอมทงไฟลทเกยวของไวเฉพาะ การก าหนดคณสมบตเบองตนใหกบเวบเพจ การใชเครองมอพนฐานของ 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 ขอแตกตางการใชงานเฟรมและเทมเพลต



น าปญหาและอปสรรคในการเรยนการสอนมาปรบปรงการเรยนการสอน ผเรยนบางสวนเขาเรยนสายท าใหไมสามารถปฏบตใบงานงานตามใบงานทผสอนมอบหมายได


- ผเรยนทบทวนการใชสวนประกอบหนาจอโปรแกรม 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. สงเกตจากพฤตกรรมการปฏบตกจกรรมทไดรบ มอบหมายและการตอบค าถามในชนเรยน









ม.ย.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








ม.ย.60 F-วช-100



ชอหนวย การแทรกฟอรมและมลตมเดยบนเวบเพจ ชวโมงรวม 8 ชวโมง



ในการทางานเกยวกบการสรางเวบเพจ จาเปนตองเรยนรเทคนคหลายประเภทในการทางาน เพอใหงานเกดความถกตองสวยงาม สงทควรรอกอยางคอ การสรางฟอรม เครองมอในการสรางฟอรม ขนตอนตางๆ ในการสรางฟอรม การปรบแตงฟอรมในรปแบบตาง ๆ เพอใหเราสามารถใชงานไดอยางมประสทธภาพเพมมากขน สะดวกในการทางานในรปแบบตาง ๆโดยเฉพาะสอมลตมเดยทถกใชในอนเทอรเนต ซงนบวนสอเหลานดจะมบทบาทมากขนในการสรางเวบเพจเพราะจะท าใหเวบเพจของเรามความนาสนใจยงขน จดประสงคการเรยนร จดประสงคทวไป 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 วธการแทรกไฟลวดโอและเสยงลงในเวบเพจ



น าปญหาและอปสรรคในการเรยนการสอนมาปรบปรงการเรยนการสอน ผเรยนบางสวนเขาเรยนสายท าใหไมสามารถปฏบตใบงานงานตามใบงานทผสอนมอบหมายได

ม.ย.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






กจกรรมการเรยนการสอน (สปดาหท 18 ชวโมงท 69-72)

- สอบปลายภาค ภาคเรยนท 2/2561 -



Documents

แผนการจัดการเรียนรู้58.82.156.60/quality/research/p/T1302-57-3308-9001.pdf · 1.1 ความรู้เบ้ืองต้นเกี่ยวกบัความหมายและประเภทของงานกราฟิก