WordPress.com · Web viewทำใบงานและแบบฝ กห ดหล งเร ยน ร วมก นเฉลยใบงานและแบบฝ กห ดหล

คมอแผนการสอน

หลกสตรประกาศนยบตรวชาชพ(ปวช.) พทธศกราช 2556

รหสวชา 2204-2009 วชา การสรางเวบไซต (ดวย Dreamweaver)

คำาเตอนสงวนลขสทธตามกฏหมาย หากผสอนมความจำาเปนในการจดทำาแผนการจดการเรยนร เพอพฒนาศกยภาพการเรยนรแกเยาวชน ใหมคณภาพของ

ประเทศชาต กรณาปรบเนอหาใหเหมาะสมกบหลกสตร มาตรฐานการเรยนร และแผนจดการเรยนร ตามความเหมาะสมของสถานศกษา

แผนจดการเรยนรแบบบรณาการชอรายวชา การสรางเวบไซต (ดวย Dreamweaver) รหสวชา

2204-2009ประกาศนยบตรวชาชพ (ปวช.)

จำานวน 3 หนวยกต จำานวนชวโมง รวม 68 ชวโมง---------------------------------------------------------------------------------

------------------------------------จดประสงครายวชาเพอให

1. มความรความเขาใจเกยวกบกระบวนการและโครงสรางการทำางานของเวบไซต2. เขาใจโครงสรางและไวยากรณของโปรแกรมภาษาหรอกระบวนการใชเครองมอการสรางเวบไซต3. ออกแบบและกำาหนดสวนประกอบทจำาเปนของเวบเพจ4. ใชโปรแกรมภาษาหรอโปรแกรมสำาเรจรปสำาหรบสรางเวบไซต5. ตดตงและอพโหลด (Upload) เวบไซต6. มคณธรรม จรยธรรม และคานยมทดในการใชคอมพวเตอร

สมรรถนะรายวชา1. แสดงความรเกยวกบกระบวนการโครงสรางการทำางานและไวยากรณของโปรแกรมภาษาในการสรางเวบไซต2. ประยกตใชโปรแกรมภาษาหรอโปรแกรมสำาเรจรปสำาหรบสรางเวบไซตและการตดตงและอพโหลด (Upload) เวบไซต

คำาอธบายรายวชาศกษาและปฏบตเกยวกบกระบวนการและโครงสรางการทำางานของเวบไซต การออกแบบเวบไซต การสรางเวบไซตดวยโปรแกรมภาษาหรอโปรแกรมสำาเรจรปหรอโปรแกรมระบบ CMS (Content Management System) การทดสอบการทำางานของเวบไซต และการ Upload เวบไซต

สารบญ

เรอง หนา

ตารางวเคราะหคำาอธบายรายวชาตารางวเคราะหการประเมนผลตามสภาพจรงแผนจดการเรยนรกจกรรมการเรยนรแผนจดการเรยนร เรอง หลกการสรางเวบไซตและรจกกบ Dreamweaver

เฉลยแบบฝกหด หนวยท 1แผนจดการเรยนร เรอง การสรางเวบไซตเฉลยแบบฝกหด หนวยท2แผนจดการเรยนร เรอง การสรางขอความเฉลยแบบฝกหด บทท 3แผนจดการเรยนร เรอง การตกแตงดวยภาพ

เฉลยแบบฝกหด บทท 4แผนจดการเรยนร เรอง การใสตารางเฉลยแบบฝกหด หนวยท 5แผนจดการเรยนร เรอง การเชอมโยงเฉลยแบบฝกหด บทท 6แผนจดการเรยนร เรอง การออกแบบเลยเอาทเฉลยแบบฝกหด หนวยท 7แผนจดการเรยนร เรอง การสรางเฟรมเซตเฉลยแบบฝกหด หนวยท 8แผนจดการเรยนร เรอง การสรางฟอรมเฉลยแบบฝกหด หนวยท 9แผนจดการเรยนร เรอง การอพโหลดไฟลสเวบไซตเฉลยแบบฝกหด หนวยท 10

เรอง หนา

แผนจดการเรยนร เรอง การใช Cascading Style Sheet

เฉลยแบบฝกหด หนวยท 11แผนจดการเรยนร เรอง การใชมลตมเดยเฉลยแบบฝกหด หนวยท 12แผนจดการเรยนร เรอง การสรางลกเลนดวย Behaviors

เฉลยแบบฝกหด หนวยท 13แบบประเมนคณธรรมจรยธรรม (ผเรยนประเมนตนเอง)แบบประเมนสาระการเรยนร (ผเรยนประเมนตนเอง)แบบประเมนคณธรรมจรยธรรม(ผสอนประเมนผเรยน)

แบบประเมนสาระการเรยนร(ผสอนประเมนผเรยน)แบบสอบถามความพงพอใจ/ความคดเหนตอสอการสอน

ตารางวเคราะหคำาอธบายรายวชาชอวชา การสรางเวบไซต (ดวย Dreamweaver) รหสวชา

2204-2009 จำานวน 3 หนวยกตระยะเวลาเรยน 17 สปดาห จำานวน 4 ชวโมง / สปดาห รวมจำานวน

72 ชวโมง

ลำาดบท

ชอหนวยการเรยนร

พฤตกรรมทคาดหวงตอการเรยนการสอน 1 ครง

ความร

ทกษะ จตพสย

รวม(ชม.)

1 หลกการสรางเวบไซตและรจกกบ Dreamweaver

1 2 1

2 การสรางเวบไซต 2 4 2

3 การสรางขอความ 2 4 24 การตกแตงดวยภาพ 1 2 15 การใสตาราง 2 4 26 การเชอมโยง 1 4 17 การออกแบบเลยเอาท 1 4 18 การสรางเฟรมเซต 2 4 29 การสรางฟอรม 2 4 2

10 การอพโหลดไฟลสเวบไซต 2 4 111 การใช Cascading Style

Sheet2 4 1

12 การใชมลตมเดย 2 4 113 การสรางลกเลนดวย

Behaviors2 4 1

14

การประเมนผลการเรยน

รวม

ตารางวเคราะหการประเมนผลตามสภาพจรง

หนวยท

จดประสงคการเรยนร เครองมอวดผล

คะแนน

หมายเหต

1. แบบประเมน

2 จดประสงคการเรยนรทไมผานครผสอนมอบหมายงานเพมเตมเพอเปนการพฒนาความรและทบทวนบทเรยนของผเรยน หากพบวายงไมผานจดประสงคการเรยนรอก จดสอนซอมเสรมให


2


2


2


3


4


2


2





คมอคร และ Course Syllabus

1. รหสวชา 2204-2009 ชอวชา การสรางเวบไซต (ดวย Dreamweaver) ระดบชน ปวช.2. ผสอน …………………………………………………………………………………………3. จดประสงครายวชาเพอให

1. มความรความเขาใจเกยวกบกระบวนการและโครงสรางการทำางานของเวบไซต2. เขาใจโครงสรางและไวยากรณของโปรแกรมภาษาหรอกระบวนการใชเครองมอการสรางเวบไซต3. ออกแบบและกำาหนดสวนประกอบทจำาเปนของเวบเพจ4. ใชโปรแกรมภาษาหรอโปรแกรมสำาเรจรปสำาหรบสรางเวบไซต5. ตดตงและอพโหลด (Upload) เวบไซต6. มคณธรรม จรยธรรม และคานยมทดในการใชคอมพวเตอร

4. สมรรถนะรายวชา1. แสดงความรเกยวกบกระบวนการโครงสรางการทำางานและไวยากรณของโปรแกรมภาษา

ในการสรางเวบไซต2. ประยกตใชโปรแกรมภาษาหรอโปรแกรมสำาเรจรปสำาหรบสรางเวบไซตและการตดตงและอพโหลด (Upload) เวบไซต

5. คำาอธบายรายวชาศกษาและปฏบตเกยวกบกระบวนการและโครงสรางการทำางานของเวบไซต การออกแบบเวบไซต การสรางเวบไซตดวยโปรแกรมภาษาหรอโปรแกรมสำาเรจรปหรอโปรแกรมระบบ CMS (Content Management System) การทดสอบการทำางานของเวบไซต และการ Upload เวบไซต

6. แผนจดการเรยนรสปดาหท

หนวยการเรยนร/เนอหา กจกรรม

1 บทท 1 หลกการสรางเวบไซตและรจกกบ Dreamweaver 1. พนฐานอนเทอรเนต2. รจกกบ Dreamweaver CS63. สวนประกอบของ

Dreamweaver4. มมมองการทำางานใน

Dreamweaver

- ทดสอบความรพนฐานของนกศกษาโดยการตงคำาถามกอนเรยน

- บรรยาย อธบาย ยกตวอยาง แสดงวธการปฏบตในแต ละหวขอการเรยนและใหนกศกษาปฏบตไปพรอมกน

- สรปบทเรยน- แบบฝกหด/

ทดสอบ2 บทท 2 การสรางเวบไซต

1. การจดการโครงสรางโฟลเดอร2. เขาใจหลกการเพมและแกไของค

ประกอบบนหนาเวบ3. บนทกไฟลเวบเพจทสราง4. เปดดหนาเวบทสรางบน

บราวเซอร

- ทดสอบความรพนฐาน

- บรรยาย - อธบาย ยก

ตวอยาง - แสดงวธการ

ปฏบตในแต ละหวขอการเรยนและใหนกศกษาปฏบตไปพรอมกน

- สรปบทเรยน- แบบฝกหด /

ทดสอบ3 บทท 3 การสรางขอความ

1. การสรางขอความ2. การเลอกขอความ3. การตกแตงและจดรปแบบ

ขอความ4. การนำาเอกสาร Word หรอ Excel

มาสรางเปนเวบเพจ

- ใหนกศกษาคนควาหนวยการเรยน



ปฏบตในแต ละหวขอการเรยน

และใหนกศกษาปฏบตไปพรอมกน


ทดสอบ4-5 บทท การตกแตงดวยภาพ

1. เตรยมภาพเพอใชในเวบเพจ2. ปรบแตงรายละเอยดของภาพ3. การแสดงภาพเปนพนหลง

เวบเพจ4. เทคนคการตกแตงภาพพนหลง

เวบเพจ




ปฏบตในแต ละหวขอการเรยนและใหนกศกษาปฏบตไปพรอมกน


ทดสอบ6 บทท 5 การใสตาราง

1. การสรางตาราง2. การเลอกตาราง แถว คอลมน

และเซลล3. การปรบแตงรายละเอยดของ



ตาราง4. การจดเรยงขอความในตาราง5. การแทรก/ลบแถวและคอลมน6. การรวมและการแบงเซลล7. การขยายและลดขนาดเซลล8. ปรบความกวางของตารางใน

Property Inspector9. การซอนตาราง (Nested Table)10. การกำาหนดสกบตาราง11. นำาขอมลเขาหรอนำาขอมลออก


ปฎบตในแต ละหวขอการเรยนและใหนกศกษาปฎบตไปพรอมกน


ทดสอบ

7-8 บทท 6 การเชอมโยง1. การเชอมโยงแบบตางๆ2. กำาหนดลกษณะการเปดหนาเวบ

ใหมทเชอมโยงไป3. เทคนคการสรางภาพลงคแบบ

Rollover Image4. กำาหนดคณสมบตของขอความท

เปนลงค






ทดสอบ

9-10 บทท 7 การออกแบบเลยเอาท5. การวางเลยเอาท6. เครองมอทใชวางเลยเอาท7. การใช Spry เพอเพมพนทหนา

เวบ






ทดสอบ11 บทท 8 การสรางเฟรมเซต

1. ลกษณะเฟรมเซต2. การสรางเฟรมเซต3. การปรบแตงเฟรม4. แกไขรายละเอยดของเฟรมเซต5. การนำาหนาเวบมาประกอบในเฟรม6. การบนทกหนาเวบ และหนาเฟรม

เซต7. เชอมโยงหนาเวบในเฟรมเซต




ปฎบตในแต ละหวขอการเรยนและใหนกศกษาปฎบตไปพรอม

กน- สรปบทเรยน- แบบฝกหด /

ทดสอบ12 บทท 9 การสรางฟอรม

1. เขาใจการทำางานของฟอรมและโปรแกรมสครปต

2. การจดกลมใหฟอรม3. ปรบแตง และตรวจสอบรปแบบ

ฟอรม4. การใช Spry สรางฟลดตางๆ ใน

ฟอรม






ทดสอบ

13-14

บทท 10 การใช Cascading Style Sheet 1. รจกสไตล2. พาเนล CSS Styles3. การแกไขคา CSS4. การใชสไตลตนแบบ



ตวอยาง

5. Visual Aids ตวชวยในการออกแบบเวบ

- แสดงวธการปฎบตในแต ละหวขอการเรยนและใหนกศกษาปฎบตไปพรอมกน


ทดสอบ

15 บทท 11 การใชมลตมเดย1. ขนตอนแทรกองคประกอบ

มลตมเดย2. รจกกบ Flash และ Shockwave3. การแทรกไฟล Flash และไฟล

Shockwave4. การแสดงวดโอคลปดวย FLV

- บรรยาย- ใหนกศกษา

คนควาหนวยการเรยน





ทดสอบ

16 บทท 12 การสรางลกเลนดวย Behaviors 1. การใช Behaviors2.เทคนคการเพมลกเลนบนเวบ

3. บรรยาย4. ใหนกศกษา

คนควาหนวยการเรยน

5. บรรยาย 6. อธบาย ยก

ตวอยาง 7. แสดงวธการ


8. สรปบทเรยนแบบฝกหด / ทดสอบ

17 บ ท ท 13 ก า ร อ พ โ ห ล ด ไ ฟ ล ส เวบไซต 1. ขนตอนท 1 การจดโครงรางไฟล

ภายในเวบไซต2. ขนตอนท 2 การตรวจสอบการ

ทำางานของหนาเวบ3. ขนตอนท 3 การขอพนทเวบไซต

บนเวบเซรฟเวอร4. ขนตอนท 4 การจดโดเมนเนม

เพอจดตงชอเวบไซต




ปฎบตในแต ละหวขอการเรยนและใหนกศกษา

5.ขนตอนท 5 การอพโหลดไฟลไปยงเวบเซรฟเวอร

ปฎบตไปพรอมกน


ทดสอบ18 ประเมนผลผเรยน

แผนจดการเรยนร วชา การสรางเวบไซต (ดวย Dreamweaver) รหสวชา 2204-2009 ชน ปวช. หนวยท 1 เรอง รจกการทำางานของเวบเพจเบองตน สปดาหท 1 เวลา 4 ชวโมง

1. ส า ร ะ ส ำา ค ญDreamweaver เปนเครองมอในการสรางเวบไซตทมประสทธภาพ

สง ในบทนเราจะกลาวถงพนฐานทสำาคญเกยวกบอนเทอรเนต รวมทงหลกการออกแบบเวบไซต กอนจะเขาสการตดตงและเรมตนใชงานโปรแกรม Dreamweaver CS6 เพอสรางเวบไซตตอไป

2. ผลการเรยนรทคาดหวง1. อธบายกระบวนการและโครงสรางการทำางานของเวบเพจและการใช

บรการ WWW ได2. รจกโปรแกรม Dreamweaver รวมทงสามารถใชงานโปรแกรม

เบองตนได3. เขาใจสวนประกอบ และโครงสรางของโปรแกรมเพอใชในการสราง

เวบไซต4. ใชแถบเครองมอตางๆ ของโปรแกรมไดอยางถกตองและเหมาะสม

กบงานนนๆ

3. กจกรรมการเรยนร

กจกรรมคร กจกรรมนกเรยนขนนำาเขาสบทเรยน ( 30 นาท ) 1. ตรวจสอบรายชอนกศกษาทเขาเรยน2. ทดสอบกอนเรยน โดยการถามผเรยนในหอง3. รวมสนทนาเกยวกบเรอง

ทำางานของเวบเพจเบองตน

1. ใหความรวมมอกบครในการตรวจสอบ2. ผเรยนชวยกนหาคำาตอบจาก

สงทครกำาหนด3. รวมสนทนาและแสดงความคดเหน

ข น ด ำา เ น น ก า ร ส อ น ( 180 น า ท ) 1. บอกจดประสงคการเรยน2. บรรยาย อธบาย ยกตวอยาง แสดงวธการปฎบตในแต ละหวขอการเรยนและใหนกศกษาปฎบตไปพรอมกน 3. ครบอกวธการและแนวคดใน

การปฏบตทถกตองใหแกผเรยน

4. ประเมนพฤตกรรมรายบคคลโดยครจะซกถามในแตละคน

1. ฟง ทำาความเขาใจและซกถาม2. ฟง ทำาความเขาใจและปฎบต

ตาม3. ผเรยนซกถามขอสงสยและจด

บนทก4. รบการประเมน

ข น ส ร ป ( 30 น า ท ) 1. ครและนกเรยนรวมกนสรป

สาระสำาคญ2. เปดโอกาสใหนกเรยนซกถาม

ขอสงสย3. มอบหมายใหไปหดทำาและ

1. ครและนกเรยนรวมกนสรปสาระสำาคญ

2. นกเรยนสอบถามขอสงสย3. ฟงและจดบนทก4. ทำาแบบทดสอบทายบท

ศกษาเพมเตม4. ทำาแบบทดสอบ

4.กจกรรมการเรยนรก อ น เ ร ย น1. ครชแจงใหผเรยน เหนความสำาคญ เพอเปนประโยชนในการเรยนร

และนำาไปประยกตใชทงในชวตประจำาวน 2. ครชแจงวตถประสงครายวชา3. ครชแจงระเบยบวาดวยเวลาเรยน4. ครตกลงกบผเรยน เรองการแบงคะแนนเกบระหวางภาคดงน5. ครตกลงกบผเรยนเรองการปฏบตตนในหองเรยนตามแบบประเมน 6. ครบอกแนวทางในการเรยน และวธการปฏบตตามภาระงานท

มอบหมายข ณ ะ เ ร ย น1. ทำาแบบฝกหดกอนเรยน โดยการถาม ตอบ และใหแสดงความคด–

เหน2. จดบนทก สาระการเรยนร 3. รวมกนสรปบทเรยน พรอมบนทกผลการสรป แลวลกขนนำาเสนอกบ

ครผสอน4. ผเรยนและครผสอนรวมกนประเมนขอสรปของผเรยนทออกแสดง

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

5. ทำาใบงาน ตรวจสอบใบงาน แกไขใบงาน6. ทบทวนเนอหา7. ทำาแบบฝกหดหลงเรยน8. รวมกนเฉลยแบบฝกหด

5.สอการเรยนการสอนประจำาหนวย1. หนงสอเรยนวชา การสรางเวบไซต (ดวย Dreamweaver)2. ใบความรประจำาหนวย3. ใบงานและแบบฝกหด4. เครองไมโครคอมพวเตอร5. แผนใสและเครองฉายภาพขามศรษะ6. ซดสอการสอน

6. วดผลประเมนผลประจำาหนวย1. สงเกตผเรยนมความสนใจ เกดความเขาใจในสาระการเรยนร ตลอด

จนแสดงความกระตอรอรนในการแสดงความคดเหนและสรปสาระการเรยนรประจำาหนวย

2. ทำาใบงานไดอยางถกตอง ทนเวลาทกำาหนด ใบงานสะอาดและเปนระเบยบ

3. ผเรยนทำาแบบฝกหดหลงเรยนไดถกตอง โดยไดคะแนน 50% เปนอยางตำา

7. กจกรรมเสนอแนะประจำาหนวย1. ผเรยนตองใหความสนใจในการศกษา เพอหาเทคนค วธการ หรอ

หลกการงายเพอใหหาคำาตอบไดอยางถกตอง และรวดเรว โดยการ ตงใจฟงหลกการ เทคนควธการทครผสอนสรปในขณะททำาการสอน และนำาขอสงสยซ ก ถ า ม ค ร ใ น ก า ร เ ร ย น ท ก ค ร ง ท เ ก ด ค ว า ม ส บ ส น แ ล ะ ไ ม เ ข า ใ จ

2. ผมการทบทวนบทเรยน ตลอดเพอเสรมสรางความเขาใจอยางแ ท จ ร ง

3. ผเรยนหมนทำาใบงาน แบบฝกหด และแกไขขอทผดใหถกตองเสมอ

4. ผเรยนตองสรางมโนภาพใหเกดความคดรวบยอดในสาระการเรยนร และเทคนควธการพรอมกบความจำาเปนในการนำาไปประยกตใชใหเกดขนโดยตนเองใหไดเพอเกดความรความเขาใจอยางแทจรงไมใชเกดจากการทองจ ำา

เฉลยแบบฝกหด หนวยท 1

ตอนท 1 จงทำาเครองหมายวงกลม ในหวขอทถกตองทสดเพยงขอเดยว

1. การตตดอสอสารบนเครอขายอนเทอรเนต เราเรยกเครองรบบรการวาอะไรก. เซคเตอร ข. เซรฟเวอรค . ไคลเอนต ง. โดเมน

2. อะไรเปนตวกลางสำาคญในการแปลง URL ใหเปน IP Adressก. Protocal ข. Browserค . DNS Server ง. Web Server

3. ขอใดถกตองก. โฮมเพจคอหนาแรกของเวบเพจ ทเปนหนาแรกสดทผใชตองพบข.เวบไซตประกอบดวยหลายๆ โฮมเพจ แตจะมเวบเพจเพยงเวบเพจเดยวค. เวบเซรฟเวอรจะเก บเฉพาะโฮมเพจเทานน ง . เวบไซตโดยทวไปนยมสรางโฮมเพจไว เปนเวบเพจแรกเสมอ

4. ขอใดไมใชคณสมบตของภาษา HTMLก. เปนภาษาหลกทใชในการแสดงผลบนเวบบราวเซอรในอนเทอรเนตข.เปนภาษาทสามารถเขยนไดดวยโปรแกรม Text Editorค . เปนภาษาทถกจ ำากดความสามารถ ดานการแสดงผลในดานมลตมเดย เชน เสยง ภาพยนตรง.เปนภาษาทรองรบการทำางานกบภาษาอนๆ ดวย เชน PHP, ASP

5. ในขณะททำางานอยในมมมองการออกแบบ หากตองการใหดหนาเวบแบบเหมอนจรงๆ เหมอนดผาน

บราวเซอร ควรทำาอยางไรก. คลกปม Web ข. คลกปม Virtualค . คลกปม Live ง. คลกปม to Browser

ตอนท 2 จงตอบคำาถามตอไปน ลงในชองวางทกำาหนดให

1. จงอธบายความหมายของ เวบไซต เวบเพจ เวบบราวเซอร และเวบเซรฟเวอร มาพอสงเขป เวบเพจ : เอกสารแตละหนาทเราเปดดใน World Wide Web เวบไซต : เวบเพจทหลายๆ หนา ทเชอมโยงกน เวบบราวเซอร : โปรแกรมสำาหรบเขาส world Wide Web เวบเซรฟเวอร : คอมพวเตอรทใชเกบเวบเพจ

2. ยกตวอยางเอกสารแบบตางๆ ทสรางสามารถดวย Dreamweaver มา 5 ตวอยาง PHP, ASP, XML, CSS, Javascript

3. อธบายสวนประกอบของแถบสถานะ ดงรป

1 -----2---------------- ------3------- ---4------ ------5-----------

1. สวนไวเลอกแทก 2. เครองมอปรบการแสดงผลหนาเวบขณะออกแบบ 3. ขนาดของหนาตางออกแบบเวบเพจ 4. ขนาดหนาเวบและเวลาทใชในการโหลด 5. รองรบการทำางานระบบหลายภาษา

แผนจดการเรยนร วชา การสรางเวบไซต (ดวย Dreamweaver) รหสวชา 2204-2009 ชน ปวช.หนวยท 2 เรอง การสรางเวบไซต สปดาหท 2 เวลา 4 ชวโมง

1. สาระสำาคญการสรางเวบไซตเปนการตงโฟลเดอรทใชเกบทกสวนประกอบบนหนา

เวบเอาไว และใชตำาแหนง อางองเพอเชอมโยงหนาและหนาเขาไวดวยกน ดงนนการสรางหนาเวบแตไมสรางเวบไซต หรอสรางหนาเวบนอกเวบไซต จะทำาใหการอางองตำาแหนงเชอมโยงเปนไปอยางไมถกตอง มผลทำาใหหาหนาเวบทเชอมโยงไมพบ หรอเรยกอาการนวา ลงคหลด (Broken link) ทำาใหเราตองแกไขต ำาแหน งเช อมโยงใหมท งหมดในภายหล ง ซ ง เป นเร องย งยากมาก

2. ผ ล ก า ร เ ร ย น ร ท ค า ด ห ว ง1. สรางหนาเวบเพจขนมาใหมได2. เพม หรอลบหนาเวบเพจ หรอโฟลเดอรทตองการได3. นำารปภาพมาประกอบบนหนาเวบเพจได4. พมพและแทรกขอความบนหนาเวบเพจได5. ปรบแตงขอความและรปแบบตวอกษร เชน ใสส ปรบขนาด เปนตน

6 แกไขขอผดพลาด และบนทกหนาเวบเพจททำาเสรจเรยบรอยแลว


กจกรรมคร กจกรรมนกเรยนขนนำาเขาสบทเรยน ( สปดาหละ 30 น า ท ) 1. ตรวจสอบรายชอนกศกษาทเขาเรยน2. ใหนกศกษาคนควาการสรางเวบไซต การใชภาษาในการเขยนเวบเพจ ข นตอนในการเขยนเวบเพจ3. รวมสนทนาเกยวกบเรอง

สรางเวบเพจเบองตน

1. ใหความรวมมอกบครในการตรวจสอบ2. คนควาการสรางเวบไซต การใชภาษาในการเขยนเวบเพจ ขนตอนในการเขยนเวบเพจ3. รวมสนทนาและแสดงความคดเหน

ขนดำาเนนการสอน ( สปดาหละ 180 น า ท ) 1. บอกจดประสงคการเรยน2. บรรยาย อธบาย ยกตวอยาง แสดงวธการปฎบตในแต ละหวขอการเรยนและใหนกศกษาปฎบตไปพรอมกน 3. ครบอกวธการและแนวคดใน






ขนสรป ( สปดาหละ 30 นาท ) 1. ครและนกเรยนรวมกนสรป

สาระสำาคญ


2. เปดโอกาสใหนกเรยนซกถามขอสงสย

3. มอบหมายใหไปหดทำาและศกษาเพมเตม

4. ทำาแบบทดสอบ


4. กจกรรมการเรยนรก อ น เ ร ย น1. คนควาการสรางเวบไซต การใชภาษาในการเขยนเวบเพจ ขนตอนใน

การเขยนเวบเพจข ณ ะ เ ร ย น1. ผเรยนรวมกนศกษาเนอหาแลวตอบคำาถามและแสดงความคดเหน2. ทำาใบงานและแบบฝกหดหลงเรยน3. รวมกนเฉลยใบงานและแบบฝกหดหลงเรยน4. จดบนทก เทคนค แนวการทเปนประโยชนตอผเรยน จากขอแนะนำา

ของครผสอน5. ผเรยนสรปความรทไดจากการเรยนตามความเปนจรง จากภมความ

รของผเรยนแตละคน6. ผเรยนซกถามในหวขอทสงสยในเนอหาการเรยนร

5. สอการเรยนการสอน1. หนงสอเรยนวชา การสรางเวบไซต (ดวย Dreamweaver) 2. ใบความรประจำาหนวย3. ใบงานและแบบฝกหด

4. เครองไมโครคอมพวเตอร5. แผนใสและเครองฉายภาพขามศรษะ6. ซดสอการสอน

6. วดผลประเมนผล1. ผเรยนปฏบตภาระงานทมอบหมายเสรจทนเวลาทกำาหนด2. ตอบคำาถามและสรปผลงานไดอยางถกตอง3. ทำาแบบฝกหดหลงเรยนเสรจทนเวลาทกำาหนดและถกตอง 4. สนใจกระตอรอรนในการเรยนร ตอบคำาถาม สรปสาระการเรยนร

และกลาแสดงความคดเหน

7. กจกรรมเสนอแนะถาผเรยนมการเตรยมตวในการเรยนทด เชน อาน และท ำาการศกษา

หนงสอเกยวกบหนวยการเรยนมากกอน ถงชวโมงเรยน ผเรยน จะสามารถเรยน และทำากจกรรมตาง ๆ ทครผสอนมอบหมาย ไดอยางมความสข และเ ก ด ค ว า ม ช อ บ แ ล ะ ส น ก ก บ ก า ร เ ร ย น ใ น ช น เ ร ย น

เฉลยแบบฝกหด หนวยท 2ตอนท 1 จงทำาเครองหมายวงกลม ในหวขอทถกตองทสดเพยงขอเดยว1. หนาโฮมเพจหลก ควรตงชอไฟลตามขอใดตอไปน

ก. first.htm ข . index.htm ค. start.htm ง. this.htm

2. ปจจบนการกำาหนดภาษาไทยบนเวบ มอย 2 รปแบบ คอขอใดก. Thai (Windows) และ PostScript ข . Thai

(Windows) และ Unicode (UTF-8)

ค. PostScript และ ThaiText ค. Unicode (UTF-8) และ PostScript

3. หากตองการรองรบการทำางานขามระบบ รวมไปถงการแสดงผลตวอกษรบนอปกรณพกพา ควรเลอกรปแบบใด

ก. Thai (Windows) ข . Unicode (UTF-8) ค. PostScript ง. ThaiText

4. องคประกอบบนหนาเวบ เชน ตาราง รปภาพ แบบฟอรม เรยกวาอะไรก. วตถ ข. แอคชนค . ออบเจกต ง. บลอก

5. Alternate text คอ การกำาหนดคาใดก. กำาหนดขอความแบบลอย ข . กำาหนดขอความแทนภาพ ค. กำาหนดขอความเสยง ง. กำาหนดขอความบรรยาย

ภาพ

6. หากตองการขนบรรทดใหมในยอหนาเดม ใหกดปมใดตอไปนก. <Enter> ข . <Shift>+<Enter> ค. <Ctrl>+<Enter> ง. <Alt>+<Enter>

7. คำาสง File>Save to Remote Server เปนคำาสงไวสำาหรบทำางานใดก . บนทกไฟลไปเกบทเซรฟเวอร ข. บนทกไฟลสำารอง

เกบไวทเซรฟเวอรค. อพโหลดไฟลไปเกบทเซรฟเวอร ง. ถกทง ก และ ค

8. ปมใดใชสำาหรบดหนาเวบทสรางบนบราวเซอรก. <F9> ข. <F10>ค. <F11> ง . <F12>

9. ปมใด ใชยอนการทำางานไป 1 ขนตอนก. <Ctrl>+D ข. <Ctrl>+Hค. <Ctrl>+I ง . <Ctrl>+Z

10. ปมใดใชเรยกพาเนล Historyก. <Shift>+<F9> ข . <Shift>+<F10> ค. <Shift>+<F11> ง. <Shift>+<F12>

แผนจดการเรยนร วชา การสรางเวบไซต (ดวย Dreamweaver) รหสวชา 2204-2009 ชน ปวช.หนวยท 3 เรอง การสรางขอความ สปดาหท 3 เวลา 4 ชวโมง

1. สาระสำาคญหลงจากทไดลองใสขอความบนหนาเวบในบททผานมา เราจะเรยนรการ

ปรบแตงขอความ เชน ตวอกษร ส การจดยอหนา และตำาแหนงของขอความ เ พ อ ใ ห เ น อ ห า ด ล ง ต ว บ น ห น า เ ว บ ม า ก ย ง ข น

2. ผ ล ก า ร เ ร ย น ร ท ค า ด ห ว ง1. เลอกขอความทตองการได2. ตกแตงและจดรปแบบขอความได3. ใส Bullet และตวเลขกำากบในแตละบรรทดได4. แทรกสญลกษณพเศษได5. แทรกเสนคนระหวางบรรทดได6. นำาเอกสาร Word หรอ Excel มาสรางเปนเวบเพจได


กจกรรมคร กจกรรมนกเรยนขนนำาเขาสบทเรยน ( สปดาหละ 30 น า ท ) 1. ตรวจสอบรายชอนกศกษาทเขาเรยน2. ใหนกศกษาคนควาการสรางขอความ การปรบแตงขอความ และตำาแหนงของขอความ3. รวมสนทนาเกยวกบเรองการ

สรางขอความ

1. ใหความรวมมอกบครในการตรวจสอบ2. คนควาการสรางขอความ การปรบแตงขอความ และตำาแหนงของขอความ3. รวมสนทนาและแสดงความคดเหน










6. นกเรยนสอบถามขอสงสย



7. ฟงและจดบนทก8. ทำาแบบทดสอบทายบท

4. กจกรรมการเรยนรก อ น เ ร ย น

1.คนควาการการปรบแตงขอความ และตำาแหนงของขอความ

ข ณ ะ เ ร ย น1.ผเรยนรวมกนศกษาเนอหาแลวตอบคำาถามและแสดงความคดเหน2.ทำาใบงานและแบบฝกหดหลงเรยน3.รวมกนเฉลยใบงานและแบบฝกหดหลงเรยน4.จดบนทก เทคนค แนวการทเปนประโยชนตอผเรยน จากขอแนะนำาของครผสอน5.ผเรยนสรปความรทไดจากการเรยนตามความเปนจรง จากภมความรของผเรยนแตละคน6.ผเรยนซกถามในหวขอทสงสยในเนอหาการเรยนร

5. สอการเรยนการสอน1.หนงสอเรยนวชา การสรางเวบไซต (ดวย Dreamweaver) 2.ใบความรประจำาหนวย3.ใบงานและแบบฝกหด 4.เครองไมโครคอมพวเตอร 5.แผนใสและเครองฉายภาพขามศรษะ

6.ซดสอการสอน





เฉลยแบบฝกหด หนวยท 3ตอนท 1 จงทำาเครองหมายวงกลม ในหวขอทถกตองทสดเพยงขอเดยว

1. แทก <p> เปนการเลอกขอความในลกษณะใดก . ยอหนา ข. ทงหมดในหนาเวบค. ขอความทกำาลงทำางานอย ง. พารากราฟแรกของหนาเวบ

2. แทก <body> เปนการเลอกขอความในลกษณะใดก. ยอหนา ข . ทงหมดในหนาเวบ ค. ขอความทกำาลงทำางานอย ง. พารากราฟแรกของหนาเวบ

3. ขนาดมาตรฐานตวอกษรใน Properties Inpsector ของการจดรปแบบแบบ CSS มขนาดเทาไหร

ก. 10 ข. 12ค. 14 ง . 16

4. ปม ใชสำาหรบการทำางานใดก. เวนวรรคขอความ ข . ขนบรรทดใหม ค. ขนพารากราฟใหม ง. ไปยงขอความสดทาย

5. คยใดใชในการขนบรรทดใหมก. <Enter> ข . <Shift>+<Enter> ค. <Ctrl>+<Enter> ง. <Alt>+<Enter>

6. ปม ใชสำาหรบการทำางานใดก . เวนวรรคขอความ ข. ขนบรรทดใหมค. ขนพารากราฟใหม ง. ไปยงขอความสดทาย

7. คยใดใชในการเวนวรรคหลายๆ ครงก. <Ctrl>+<Shift>+<Enter> ข.

<Shift>+<Enter>ค. <Ctrl>+<Space> ง .

<Ctrl>+<Shift>+<Space>

แผนจดการเรยนร วชา การสรางเวบไซต (ดวย Dreamweaver) รหสวชา 2204-2009 ชน ปวช.หนวยท 4 เรอง การตกแตงดวยภาพ สปดาหท 4-5 เวลา 8 ชวโมง

1. สาระสำาคญในบทนจะกลาวถงการนำาภาพมาใชในเวบเพจ เพอสรางความสวยงาม

และใชภาพในการอธบายความหมายสงทตองการสอในเวบไซตใหชดเจนขน ตอจากนนเราจะไดเรยนรเรองการปรบวางภาพใหเหมาะสมกบเนอหาในเวบไซต

2. ผ ล ก า ร เ ร ย น ร ท ค า ด ห ว ง1. อธบายถงพนฐานและองคประกอบทตองคำานงถงในการแสดงภาพ

บนเวบเพจได2. บอกถงคณสมบต และขอแตกตางของแตละฟอรแมตของไฟลภาพ

ได3. ใชไฟลภาพในแตละฟอรแมตไดอยางเหมาะสมกบงาน4. สามารถนำาภาพลงบนเวบเพจได5. กำาหนดรายละเอยดของภาพ เชน ความกวาง ความยาว ใสกรอบ

ภาพใสขอความกำากบภาพได6. ปรบแตงภาพทนำาลงบนเวบเพจใหมขนาด และตำาแหนงไดอยาง

เหมาะสมได7. นำาไฟลภาพมาเปนพนหลงของเวบเพจนนๆ ได8. สามารถใชเทคนคปรบแตงพนหลงของเวบเพจได9. ทำาการแกไขรปจากโปรแกรม Dreamweaver ได


กจกรรมคร กจกรรมนกเรยนขนนำาเขาสบทเรยน ( สปดาหละ 30 น า ท ) 1. ตรวจสอบรายชอนกศกษาทเขาเรยน2. ใหนกศกษาคนควาเกยวกบการแตงเตมเวบเพจดวยกราฟก ขนตอนในการฟอรแมตไฟลการปรบแตงรปภาพลงในเวบ3. รวมสนทนาเกยวกบเรอง

แตงเตมเวบเพจดวยกราฟก

1. ใหความรวมมอกบครในการตรวจสอบ2.คนควาเกยวกบการแตงเตมเวบเพจดวยกราฟก ขนตอนในการฟอรแมตไฟล การปรบแตงรปภาพลงในเวบ3. รวมสนทนาและแสดงความคดเหน














4. กจกรรมการเรยนรก อ น เ ร ย น1. คนควาเกยวกบการแตงเตมเวบเพจดวยกราฟก ขนตอนในการ

ฟอรแมตไฟล การปรบแตงรปภาพลงในเวบข ณ ะ เ ร ย น1. ผเรยนรวมกนศกษาเนอหาแลวตอบคำาถามและแสดงความคดเหน2. ทำาใบงานและแบบฝกหดหลงเรยน3. รวมกนเฉลยใบงานและแบบฝกหดหลงเรยน4. จดบนทก เทคนค แนวการทเปนประโยชนตอผเรยน จากขอแนะนำา

ของครผสอน5. ผเรยนสรปความรทไดจากการเรยนตามความเปนจรง จากภมความ

รของผเรยนแตละคน6. ผเรยนซกถามในหวขอทสงสยในเนอหาการเรยนร

5. สอการเรยนการสอน1. หนงสอเรยนวชา การสรางเวบไซต (ดวย Dreamweaver) 2. ใบความรประจำาหนวย3. ใบงานและแบบฝกหด4. เครองไมโครคอมพวเตอร

5. แผนใสและเครองฉายภาพขามศรษะ6. ซดสอการสอน






1. ขอใดไมใชขอควรคำานงในการเขยนเวบเพจก. การใชชนดของบราวเซอรทแตกตางกน ข.ความละเอยดของภาพค. หนวยวดมาตรฐานของภาพบนเวบง . ความเรวของเครองพซ

2. ขอใดไมใชวธการแกไขปญหาไฟลภาพขนาดใหญบนเวบเพจก. แบงภาพเปนไฟลเลกๆ นำามาเรยงตอเปนภาพใหญข.ลดขนาดภาพโดยลดจำานวนสทใช หรอลดความละเอยดของภาพ ค. พยายามใชภาพเดมในหนาเวบไซตอนๆ ง . กำาหนดโครงสรางของเวบใหแสดง ผลในสวนทเปนภาพกอน

3. Dither หมายถงอะไรก . เปนกระบวนการลดทอนสทใชในภาพ โดยการแทนทสดวยสใกลเคยงข.กระบวนการเกลยสเพอหลอกตาใหเหนวามสนนๆ อยในภาพอยางกลมกลนค. ไมถกทง 2 ของ.ถกทง 2 ขอ

4. ไฟลฟอรแมตแบบใดทไมสนบสนนการทำางานภาพแบบโปรงแสงก . JPEG ข. PNGค. GIF ง. ไมมขอผด

5. ขอจำากดของไฟลฟอรแมตแบบ GIF คออะไรก. ไมสนบสนนการบบอดขอมลทมภาพโปรงแสงข . ใชงานอยท 256 ส ค. ลกษณะการบบอดโดยการลบขอมลสวนทซำาซอนกนมากทสดออก

ทำาใหคณภาพของภาพ จะสญเสยมากกวาไฟลฟอรแมตอนง.ห ล ง ก า ร บ บ อ ด พ ก เ ซ ล ท โ ป ร ง แ ส ง จ ะ ถ ก แ ท น ท ด ว ย ส ข อ ง Background

6. ขอใดเปนคยลดในการเพมภาพเขาไปในเวบเพจก. <Ctrl+Alt+u> ข . <Ctrl+Alt+i> ค. <Ctrl+Alt+o> ง .

<Ctrl+Alt+p>

7. ขอใดทไมสามารถทำาไดในการปรบแตงรายละเอยดของภาพบนเวบเพจก. กำาหนดความหนาเสนขอบภาพ ข .

ใสชอของรปภาพค . ปรบความละเอยดของภาพ ง .

แสดงทเกบไฟลรปภาพ

8. รปแบบการวางตำาแหนงของขอความแบบใดททำาใหขอบลางของภาพอยตรงกบแนวลางสด ของขอความก. Default ข . Absolute Bottomค. Bottom ง. Baseline

9. คำาสงใดเปนคำาสงเรมตนใหไฟลภาพแสดงเปนพนหลงเวบเพจก. Modify>Picture Properties..

ข. Modify>Template Properties..

ค. Modify>File Properties.. ง . Modify>Page Properties ..

10. เครองมอ ใน Properties Inspector ใชปรบแตงสงใดก. ปรบแตงความละเอยดของภาพ ข . ลดทอนสภาพ ค. เปดไฟลภาพดวยโปรแกรมทเลอก ง . ป ร บ ข น า ด ข อ ง ภ า พตนฉบบ


1. จงบอกความรพนฐานเกยวกบการแสดงภาพบนเวบมา 3 ขอ พรอมทงอธบายอยางคราวๆ

1. ความแตกตางระหวางระบบเครอง ระบบปฏบตการ และเวบ บราวเซอร

เมอเผยแพรเวบไซตทเราสรางบนอนเทอรเนต หนาเวบทเราสรางจะถกเปดโดยเครองคอมพวเตอรตางรนตางแบบกน ใชขนาดจอภาพและระบบการแสดงผลทตางกน ดงนนเราควรทำาความคนเคยกบมาตรฐานตางๆ ไวดวย

2. การใชชนดของบราวเซอรทแตกตางกน บราวเซอรทตางรนกนอาจทำาใหการแสดงผลของภาพบนเวบแตกตางกน

ดงนนเราตองทราบวาบราวเซอรหลกทผชมใชคอรนใด และออกแบบหนาเวบใหเหมาะสมกบบราวเซอรนน

3. หนวยวดมาตรฐานของภาพบนเวบ

เมอสรางภาพบนเวบใหกำาหนดหนวยวดเปนพกเซล เพราะพกเซลเปนหนวยวดมาตรฐานสำาหรบการแสดงผลบนจอภาพ ตางกบการสรางสอสงพมพซงจะกำาหนดหนวยวดเปนนว

4. ความละเอยดของภาพ ภาพบนเวบไมจำาเปนตองใชความละเอยดเทากบภาพบนสอสงพมพ

เพราะจอภาพนนความละเอยดไมเทา โดยความละเอยดพนฐานทรบไดคอ 72 จดตอนว ในขณะทสงพมพอาจตองใชภาพทมความละเอยดสงถง 300 จด ตอนว

การออกแบบหนาเวบควรคำานงถงความละเอยดในการแสดงผลทผใช ใชในการเปดชม เชน ถา เราตองการใหผใชจอภาพ 14 นว ทใชความละเอยดท 640x480 พกเซลเปดดหนาเวบเราไดอยางลงตว ขนาด ของภาพหรอหนา เวบไมควรเกน 625x320 พกเซล 5. ขนาดของไฟล

ขนาดของไฟลภาพจะสงผลอยางมากตอความเรวของเวบ ถาขนาดไฟลภาพใหญมาก การแสดงผลกใชเวลามากเปนเงาตามตว ทงนเราควรคำานงเสมอวา เราไมควรใหผชมรอโหลดหนาเวบและภาพทใชนานเกนไป โดยขอแนะนำาหลกการงายๆ ดงน

1) แบงภาพเป นไฟลเล กๆ น ำามาเรยงต อเป นภาพใหญด กวาการ ดาวนโหลดภาพใหญเพยงภาพเดยว

2) ลดขนาดภาพโดยลดจำานวนสทใช หรอลดความละเอยดของภาพ ซง หากทำาอยางด กจะได

3) พยายามใชภาพซำาๆ กนในหนาเวบของเรา เพราะบราวเซอรจะเกบภาพ ทโหลดมาไว ทำาใหไมตองโหลดซำาอก ซงจะชวยลดเวลาโหลดไปไดพอสมควร

4) เราควรกำาหนดใหหนาเวบทสรางแสดงขอความกอน เพราะสวนนจะ ถกโหลดมากอน ผชมจะไดอานไปกอนในขณะทรอโหลดภาพ และสวนอนๆ

6. การลดขนาดไฟลภาพโดยการ Ditherเปนกระบวนการลดทอนสทใชในภาพ โดยการแทนทสดวยสใกลเคยง เชน

จากภาพทใช 16.7 ลานสปรบใหเปนภาพทใชเพยง 256 ส ซงจะไดภาพ ทดใกลเคยงกบภาพตนฉบบ หรอมโทนสใกลเคยง แตมขนาดไฟลเลกลงกวาเดมมาก เพราะใชจำานวนสนอยลง

2. จงอธบายถงความแตกตางในการบบอดขอมลภาพของไฟลภาพแบบ GIF, JPEG และ PNG ฟอรแมต GIF

ถกพฒนาโดย CompuServe ในป 1980 เพ อบบอ ด ขอมลภาพลายเสน

มขอจำากดการใชงานอยท 256 สเทานน (8 บต ) ใชการบบอดแบบสราง Palette สขนใหม ทำาใหไมสญเสย

คณภาพของภาพ เพราะไมมการตดสภาพออก แตเป นลกษณะการแทนสภาพในแตละพกเซลดวยสทกำาหนดขนใหม ฉะนนคณภาพไฟลจะไมเสย

ความสามารถในการแสดงภาพโปรงแสง และภาพ เคลอนไหว

ฟอรแมต JPEG ถ ก พ ฒ น า ข น โ ด ย Joint Photographic Experts

Group เพอจดประสงคในการบบอดขอมลของไฟลรปภาพ มจดเดนคอหลงการบบอด ยงสามารถใชสไดถง 16.7 ลานส ในขณะท .GIF ใชไดเพยง 256 สเทานน

ไมจำาเปนตองกำาหนดพาเลตสเพอการใชงาน เพราะรองรบ ขอมลสไดมากถง 16.7 ลานส อยแลว

ลกษณะการบบอด เปนการลบขอมลสวนทซ ำาซอนกนมาก ทสดออกจากภาพ ยงมการบบอดขอมลมากขนเท าไหร คณภาพกจะสญเสยมากขนเทานน

ผลของการบบอดขอมลจะไดไฟลภาพทมขนาดเลกยงกวา ฟอรแมต GIF ซงจะทำาใหใชเวลาการดาวนโหลดนอย แตใช เวลาในการแสดงผลนาน เพราะตองขยายขอมลการบบอดกอนการแสดงผล

ไมสนบสนนการบบอดขอมลทมภาพโปรงแสง เพราะหลงการ บ บ อ ด พ ก เ ซ ล ท โ ป ร ง แ ส ง จ ะ ถ ก แ ท น ท ด ว ย ส ข อ ง Background

ฟอรแมต PNG บบอดขอมลไดดกวา GIF 20-30 เปอรเซนต ไมเสยขอมล

เหมอนกบแบบ JPEG สามารถเลอกการจดเกบขอมลไดทงแบบ 8 บต 24 บต และ

32 บต ตางกบ GIF ถ ก พ ฒ น า โ ด ย Thomas Boutell แ ล ะ Tom Lane

วตถประสงค เพอการทำางานขามระบบ เพราะมการจดเกบขอมลเกยวกบลกษณะเครอง ทำาใหสามารถแสดงผลไดอยาง ถกตองกบเครองทกระบบ

แสดงผลไดเรวกวาแบบ GIF เพราะภาพใน GIF จะเร มแสดง ผลเมอดาวนโหลดขอมล มาได 1 ใน 18 สวน ขณะท PNG เรมแสดงผลเมอขอมลถกโหลดเขามา 1 ใน 64 สวน

สนบสนนการทำางานกบภาพโปรงใส

3. หากตองการใหภาพบนเวบเพจมขอความกำากบภาพ ควรทำาอยางไร (ใหบอกมาเปนขนตอน)

1. คลกเมาสทภาพ 2. ท Property Inspector ใสขอความกำากบภาพในชอง Alt

4. หากตองการใหภาพบนเวบเพจอยขอบลางของภาพตรงกบแนวลางสดของขอความ ควรทำาอยางไร

เลอกคา Align เปน Bottom จากหนาตาง Property Inspector

แผนจดการเรยนร วชา การสรางเวบไซต (ดวย Dreamweaver) รหสวชา 2204-2009 ชน ปวช. หนวยท 5 เรอง การใสตาราง สปดาหท 6 เวลา 4 ชวโมง

1. ส า ร ะ ส ำา ค ญในการทำางานบนเวบเพจตองมขนตอนการทำางานทหลากหลาย สงท

ควรรเกยวกบเวบอกอยางหนงคอการใสตารางบนเวบเพจ เพอสะดวกในการทำางานในรปแบบตางๆ ซงเปนงานททนสมย สวยงามเปนระเบยบ

2. ผ ล ก า ร เ ร ย น ร ท ค า ด ห ว ง1. รจกสวนประกอบของตารางบนเวบเพจ2. สรางตารางลงบนเวบเพจ และสามารถกำาหนดตารางตามความ

ตองการได3. ปรบแตงตารางทสรางไวใหมขนาดทเหมาะสมกบขอมลทกรอกไวได

4. ใชคำาสงปรบแตงตารางอยางละเอยดได5. กำาหนดรายละเอยดของตาราง โดยใชเครองมอจากโปรแกรม

Dreamweaver ได6. มทกษะในการจดการเกยวกบตารางได7. สามารถแกไขตารางทสรางไวจากเดม เชน แทรกตาราง การลบ

ตารางการรวมตารางได8. กำาหนดสของตาราง และกรอบของตารางได9. กำาหนดสของพนตารางทงหมดได10. แทรกภาพ ขอมล และจดขอมลใหสวยงามได


กจกรรมคร กจกรรมนกเรยนขนนำาเขาสบทเรยน ( สปดาหละ 30 น า ท ) 1. ตรวจสอบรายชอนกศกษาท

เขาเรยน2. ให น กศ กษาค นคว า การ ใส

ตารางบนเวบเพจ การสรางตาราง ข นตอนการสรางตาราง

3. รวมสนทนาเกยวกบเรองการใสตารางบนเวบเพจ

1. ใหความรวมมอกบครในการตรวจสอบ

2. ค นคว า การใสตารางบนเวบเพจ การสรางตาราง ขนตอนการสรางตาราง

3. รวมสนทนาและแสดงความคดเหน

ขนดำาเนนการสอน ( สปดาหละ 180 น า ท ) 1. บอกจดประสงคการเรยน2. บรรยาย อธบาย ยกตวอยาง

แสดงวธการปฎบตในแต ละหวขอการเรยนและใหนกศกษาปฎบตไปพรอมกน

3. ครบอกวธการและแนวคดในการปฏบตทถกตองใหแกผเรยน

4. 4. ประเมนพฤตกรรมรายบคคลโดยครจะซกถามในแตละคน




ขนสรป ( สปดาหละ 30 นาท ) 1. ครและนกเรยนรวมกนสรป 1. ครและนกเรยนรวมกนสรป




สาระสำาคญ2. นกเรยนสอบถามขอสงสย3. ฟงและจดบนทก4. ทำาแบบทดสอบทายบท

4. กจกรรมการเรยนรกอนเรยน1. คนควาการใสตารางบนเวบเพจ การสรางตาราง ขนตอนการสราง

ตาราง

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

คำาถาม3. ทำาแบบฝกหด4. ผเรยนสรปความรทไดจากการเรยนการการสอน5. ผเรยนหาแนวทางและเทคนคการหาคำาตอบ ดวยความรความเขาใจ

ของตนเองพรอมจดบนทกเปนลำาดบขนตอนทจะทำาใหตนเองไมลมสาระการเรยนร

6. ผเรยนซกถามเมอไมเขาใจหรอสงสยเนอหาการเรยนร

5. สอการเรยนการสอน1. หนงสอเรยนวชา การสรางเวบไซต (ดวย Dreamweaver)2. ใบความรประจำาหนวย3. ใบงานและแบบฝกหด

4. เครองไมโครคอมพวเตอร5. แผนใสและเครองฉายภาพขามศรษะ6. ซดสอการสอน

6. วดผลประเมนผล1. ผเรยนปฏบต ภาระงานท มอบหมายเสรจท นเวลาท ก ำาหนด2. ต อ บ ค ำา ถ า ม แ ล ะ ท ำา ใ บ ง า น แ ล ะ แ บ บ ฝ ก ห ด ไ ด ถ ก ต อ ง3. ค ว า ม ส ะ อ า ด เ ร ย บ ร อ ย ข อ ง ใ บ ง า น แ ล ะ แ บ บ ฝ ก ห ด4. สนใจกระตอรอรนในการเรยนร ตอบคำาถาม สรปสาระการเรยนร

แ ล ะ ก ล า แ ส ด ง ค ว า ม ค ด เ ห น

7. กจกรรมเสนอแนะ1. ผเรยนตองทบทวนบทเรยนทงกอนเรยนและหลงเรยนอยอยางส ม ำา เ ส ม อ2. ผเรยนหมนเขาชนเรยนเพอรบฟงเทคนค วธ และแนวทางทดกบครส อ น อ ย า ง ต ง ใ จ3. ผเรยนสนใจทำาใบงาน แบบฝกหด และขยนปรบปรงแกไขใบงานและ

แ บ บ ฝ ก ห ด ใ ห ถ ก ต อ ง ท ก ค ร ง ท ท ำา ผ ด


1. การสรางตารางลงบนเวบเพจดวยโปรแกรม Dreamweaver ทำาไดกวธ ก. 2 วธ ข . 3 วธ ค. 4 วธ ง. 5 วธ

2. การเลอกเซลลเพอแกไขตาราง โดยเลอกเซลลทอยตดกน ตองกดคยใดคางไวขณะเลอกก . <Shift> ข. <Ctrl>ค. <Alt> ง. <Insert>

3. การเลอกเซลลเพอแกไขตาราง โดยเลอกเซลลทไมอยตดกน ตองกดคยใดคางไวขณะเลอกก. <Shift> ข . <Ctrl> ค. <Alt> ง. <Insert>

4. หากตองการระบ ส เสนขอบของตาราง ต องก ำาหนดท ช องใดใน Property Inspectorก. Light Brdr ข. Dark Brdr ค . ไมถกทง 2 ขอ ง. ถกทง 2 ขอ

5. การจดเรยงขอความในตารางแบบ Default เปนอยางไรก. จดเรยงขอมลใหอยชดขอบบนของชองตารางข.จดเรยงขอมลใหอยชดขอบลางของชองตารางค . จดเรยงขอมลใหอยชดซายของชอง ตารางง.จดเรยงขอมลใหอยชดขวาของชองตาราง

6. คยลดในการแทรกแถวทำาไดโดยกดคยใดก. <Ctrl+J> ข. <Ctrl+Y>ค . <Ctrl+M> ง. <Ctrl+F>

7. คยลดในการลบแถวทำาไดโดยกดคยใดก. <Ctrl+Shift+J> ข .

<Ctrl+Shift+Y>ค . <Ctrl+Shift+M> ง .

<Ctrl+Shift+F>

8. คำาสง Insert>Table Objects>Import Tabular Data สำาหรบทำาอะไรก . นำาขอมลเขามา ข. น ำาตารางขอม ลเขามาค. นำาขอมลภาพเขามา ง. ผดทกขอ

9. ในการเรยงลำาดบขอมลในตาราง คำาสง Sort header rows จะมผลของการเรยงลำาดบ ขอมลแบบใดก. ทำาการจดเรยงเฉพาะแถวทอยภายในแทก <thead> .... </thead>ข.ทำาการจดเรยงเฉพาะแถวทอยภายในแทก <tfoot> .... </tfoot>ค . เพมการจดเรยงแถวทอยภายในแทก <thead> .... </thead>ง.เพมการจดเรยงแถวทอยภายในแทก <tfoot> .... </tfoot>

10. ในการเรยงลำาดบขอมลในตาราง คำาสง Sort footer rows จะมผลของการเรยงลำาดบ ขอมลแบบใด

ก. ทำาการจดเรยงเฉพาะแถวทอยภายในแทก <thead> .... </thead>ข.ทำาการจดเรยงเฉพาะแถวทอยภายในแทก <tfoot> .... </tfoot>ค. เพมการจดเรยงแถวทอยภายในแทก <thead> .... </thead>

ง . เพมการจดเรยงแถวทอยภายในแทก <tfoot> .... </tfoot>

แผนจดการเรยนร วชา การสรางเวบไซต (ดวย Dreamweaver) รหสวชา 2204-2009 ชน ปวช.หนวยท 6 เรอง การเชอมโยง สปดาหท 7-8 เวลา 8 ชวโมง

1. ส า ร ะ ส ำา ค ญ จดเดนหนงของเวบคอ ความสามารถในการเชอมโยงจากเวบหนาหนงไปยง

หนาอนๆ ได ในบทนเราจะกลาวถงการกำาหนดใหขอความเปนลงค (Link) เพอเชอมโยงในรปแบบตางๆ

2. ผ ล ก า ร เ ร ย น ร ท ค า ด ห ว ง

1. ทราบถงการเชอมโยงบนหนาเวบเพจในรปแบบตาง ๆ ได2. สามารถสรางการเชอมโยงในหนาเวบเพจเดยวกนได3. สามารถสรางการเชอมโยงไปยงหนาเวบไซตอนได

4. สามารถสรางการเชอมโยงในเวบไซตหนาเดยวกนได5. สามารถสรางการเชอมโยงในการตดตอผานทางอเมลได6. สามารถสรางการเชอมโยงในการดาวนโหลดไฟลโปรแกรมตางๆ ได7. สามารถสรางการเชอมโยงดวยเทคนคตาง ๆ ได เชน Map Link

และ Rollover Image ได


กจกรรมคร กจกรรมนกเรยนขนนำาเขาสบทเรยน ( 30 นาท ) 1. ตรวจสอบรายชอนกศกษาท

เขาเรยน2. ใหนกศกษาคนควาการเชอม

โ ย ง ภ า ย ใ น เ ว บ เ พ จเดยวกนการเชอมโยงภายในเวบไซตเดยวกน การเชอมโยงไปยงเวบไซตอน

3. รวมสนทนาเกยวกบเรองการเชอมโยง


2. คนควาการเชอมโยงภายในเวบเพจเดยวกนการเชอมโยงภายในเวบไซต เด ยวก น กาเชอมโยงไปยงเวบไซตอน


ข น ด ำา เ น น ก า ร ส อ น ( 180 น า ท ) 1. บอกจดประสงคการเรยน2. บรรยาย อธบาย ยกตวอยาง







ข น ส ร ป ( 30 น า ท ) 1. ครและนกเรยนรวมกนสรป 1. ครและนกเรยนรวมกนสรป






4. กจกรรมการเรยนรก อ น เ ร ย น

1. คนควาการเชอมโยงภายในเวบเพจเดยวกนการเชอมโยงภายในเวบไซตเดยวกน การเชอมโยงไปยงเวบไซตอนข ณ ะ เ ร ย น

1. ผเรยนรวมกนศกษาเนอหาตามใบงานแลวตอบคำาถามและแสดงความคดเหน

2. ทำาใบงานและแบบฝกหดหลงเรยน2. รวมกนเฉลยใบงานและแบบฝกหดหลงเรยน3. จดบนทก เทคนค แนวการทเปนประโยชนตอผเรยน จากขอแนะนำาของ

ครผสอน4. ผเรยนสรปความรทไดจากการเรยนตามความเปนจรง จากภมความร

ของผเรยนแตละคน5. ผเรยนซกถามในหวขอทสงสยในเนอหาการเรยนร

5. สอการเรยนการสอน 1.หนงสอเรยนวชา การสรางเวบไซต (ดวย Dreamweaver) 2.ใบความรประจำาหนวย

3.ใบงานและแบบฝกหด 4. เครองไมโครคอมพวเตอร 5. แผนใสและเครองฉายภาพขามศรษะ 6. ซดสอการสอน6. วดผลประเมนผล

1. ผเรยนปฏบตภาระงานทมอบหมายเสรจทนเวลาทกำาหนด2. ตอบคำาถามและสรปผลงานไดอยางถกตอง3. ทำาแบบฝกหดหลงเรยนเสรจทนเวลาทกำาหนดและถกตอง 4. สนใจกระตอรอรนในการเรยนร ตอบคำาถาม สรปสาระการเรยนร





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

ง . ถกหมดทกขอ

2. การเชอมโยงภายในเวบเพจเดยวกนนน ตองทำาอยางไรบางก . สรางจด Anchor ( จดท Link จะ กระโดดไป ) ในหนาเวบเพจนน

ข.กำาหนดพนทยอยเปน Link เชอมโยงขอมล โดยใชไอคอน ค. พมพชอหนาเวบเพจทตองการ Link ท ชอง Link โดยมคำาวา mailto: นำาหนาง.พมพชอหนาเวบเพจทตองการ Link ทชอง Link โดยมสญลกษณ @ นำาหนา

3. เราสามารถสรางการเชอมโยงแบบ Map Link ไดโดยวธใดก. ใชไอคอน ในการกำาหนดพนทในการ Link เปนรปสเหลยมข.ใชไอคอน ในการกำาหนดพนทในการ Link เปนรปวงกลมค. ใชไอคอน ในการกำาหนดพนทในการ Link เปนแบบอสระ

ง . ถกหมดทกขอ

4. การเชอมโยงดวย Anchor ตองพมพเครองหมายใด ไวหนาชอทตงไวในชอง Link ทกครงก. @ ข . # ค. ฿ ง. %

5. การเชอมโยงไปยงเวบไซตอน เราตองกำาหนดชอเวบไซตทตองการ Link ไปแบบใด

ก. www.sanook.com ข .sanook.com

ค . http://www.sanook.com ง. www.sanook.co.th

6. ลกษณะการเชอมโยง เพอเปดหนาตางบราวเซอรใหมขนมาอกหนาตางหนง ใหเรากำาหนดคำาสง Target ในรปแบบใดก. _parentข . _blank ค. _self ง. _top

7. สงสำาคญทใชในการสรางการเชอมโยงไปยงอเมลของเรา เพอใชในการตดตอสอสารทางเมลไดคอขอใดก . กำาหนดการเชอมโยงไปยงอเมลของ เราโดยใสคำาวา mailto นำาหนาชออเมลของเรา ข.กำาหนดการเชอมโยงไปยงอเมลของเรา โดยใสช ออเมลทใชในการตดตอในชอง Linkค. ก ำา ห น ด ก า ร เ ช อ ม โ ย ง โ ด ย พ ม พ สญลกษณ # นำาหนาชออเมลของเราในชอง Linkง.กำาหนดการเชอมโยงอเมลของเรา โดยใสชออเมลชอง Target

8. เมอเรานำาเมาสไปวางทภาพทจะทำาการเชอมโยง แลวภาพนนเปลยนเปนภาพใหม และเมอนำาเมาสออกจากภาพ แลวภาพนนจะกลบมาเหมอนเดม เปนการสรางการเชอมโยงแบบใดก. Image Map ข. Mail Toค . Rollover Image ง. Go to URL

http://www.sanook.co.th/

9. ปมคำาสง เปนคำาสงทใชกบการเชอมโยงขอมลในแบบใดก. การเชอมโยงแบบดาวนโหลดไฟลข . ก า ร เ ช อ ม โ ย ง แ บ บ ก า ร ส ร า ง Rollover Imageค. การเช อมโยงแบบกำาหนดพนท Map Linkง.การเชอมโยงภายในเวบไซตเดยวกน

10. การเชอมโยงเพอสงอเมล โปรแกรมใดจะถกเปดขนมาก . Microsoft Outlook ข. google.comค. yahoo.comง. outlook.com

แผนจดการเรยนร วชา การสรางเวบไซต (ดวย Dreamweaver) รหสวชา 2204-2009 ชน ปวช. หนวยท 7 เรอง การออกแบบเลยเอาท สปดาหท 9-10 เวลา 8 ชวโมง

1.สาระสำาคญในการสรางหนาเวบ กอนสรางเรามกจะออกแบบเคาโครงหนาเวบ หรอ

ทเรยกวาเลยเอาท (Layout) ขนมากอน แลวจงคอยนำาสวนของเนอหามาจดวางตาม องคประกอบของเลยเอาททเราไดกำาหนดไว นอกจากนในการเลอกใชเลยเอาท เรามกจะเลอกใชเลยเอาทเดยวกนหมดกบทกๆ หนาเวบ ดงนนการเลอกเลยเอาทจงเปนเรองสำาคญ ทเราจะมาเรยนรกนในบทน

2. ผ ล ก า ร เ ร ย น ร ท ค า ด ห ว ง1. รจกการจดวางองคประกอบตางๆ บนหนาเวบไดอยางเหมาะสม2. สามารถออกแบบเลยเอาทในรปแบบตางๆ บนหนาเวบได3. สามารถปรบขนาดเลยเอาททเรากำาหนดได4. สามารถใสขอความ และรปภาพบนเลยเอาททไดจดแบงไว5. สามารถเพม และลดขนาดของเลยเอาทใหพอดกบขอมลได6. สามารถจดแบงหวขอตางๆ ใหอยในหนาเวบได7. สามารถลบพนทบนเลยเอาททไมตองการออกได



เขาเรยน2. ใหนกศกษาคนควาความหมาย

ของเลยเอาทการออกแบบเ ล ย เ อ า ท ข น ต อ น ใ น ก า รออกแบบเลยเอาท

3. รวมสนทนาเกยวกบเรองการออกแบบเลยเอาท


2. ค น ค ว า ค ว า ม ห ม า ย ข อ งเ ล ย เ อ า ท ก า ร อ อ ก แ บ บเ ล ย เ อ า ท ข น ต อ น ใ น ก า รออกแบบเลยเอาท












2. นกเรยนสอบถามขอสงสย



3. ฟงและจดบนทก4. ทำาแบบทดสอบทายบท

5. กจกรรมการเรยนรกอนเรยน

1. คนควาความหมายของเลยเอาทการออกแบบเลยเอาท ขนตอนในการออกแบบเลยเอาท

ข ณ ะ เ ร ย น1. จดบนทกการเรยน2. สนใจการปฏบตตามครและกลาในการแสดงความคดเหนและตอบคำาถาม3. ทำาแบบฝกหด4. ผเรยนสรปความรทไดจากการเรยนการการสอน5. ผเรยนหาแนวทางและเทคนคการหาคำาตอบ ดวยความรความเขาใจ

ของตนเองพรอมจด บนทกเปนลำาดบขนตอนทจะทำาใหตนเองไมลมสาระการเรยนร


6. สอการเรยนการสอน1. หนงสอเรยนวชา การสรางเวบไซต (ดวย Dreamweaver) 2.ใบความรประจำาหนวย3.ใบงานและแบบฝกหด4.เครองไมโครคอมพวเตอร5.แผนใสและเครองฉายภาพขามศรษะ6.ซดสอการสอน

7. วดผลประเมนผล1. ผเรยนปฏบต ภาระงานท มอบหมายเสรจท นเวลาท ก ำาหนด2. ต อ บ ค ำา ถ า ม แ ล ะ ท ำา ใ บ ง า น แ ล ะ แ บ บ ฝ ก ห ด ไ ด ถ ก ต อ ง3. ค ว า ม ส ะ อ า ด เ ร ย บ ร อ ย ข อ ง ใ บ ง า น แ ล ะ แ บ บ ฝ ก ห ด4. กระตอรอรนในการเรยนร ตอบคำาถาม สรปบทเรยน และกลา

แ ส ด ง ค ว า ม ค ด เ ห น

8. กจกรรมเสนอแนะ1. ผเรยนตองทบทวนบทเรยนทงกอนเรยนและหลงเรยนอยอยางส ม ำา เ ส ม อ2. ผเรยนหมนเขาชนเรยนเพอรบฟงเทคนค วธ และแนวทางทดกบครส อ น อ ย า ง ต ง ใ จ3. ผเรยนสนใจทำาใบงาน แบบฝกหด และแกไขใหถกตองทกครงททำาผ ด4. กลาทจะถามทกครงทเกดความสงสยและไมเขาใจหรอตามบทเรยนไ ม ท น

เฉลยแบบฝกหด หนวยท 7 ตอนท 1 จงทำาเครองหมายวงกลม ในหวขอทถกตองทสดเพยงขอเดยว

1. ถาเราจะทำาการจดวางองคประกอบบนหนาเวบเพจ โดยแบงเปนสวนหวของเวบ, เนอหาและหวขอตางๆเพมเตม ใหเขาไปกำาหนดในกลมเครองมอใด

ก. Tables ข. Formsค . Layout ง. Frames

2. ในการวางเลยเอาทโดยใช CSS ถาตองการเลอกรปแบบเลยเอาททจะเปลยนขนาดความกวางตามขนาดหนาตางบราวเซอร ควรเลอกรปแบบใด

ก. Fixed ข. Elasticค . Liquid ง. Hybrid

3. เครองมอใด ตอไปน ทชวยในการวางเลยเอาทก. ไมบรรทด ข. เสนไกดและเสนกรดค. ภาพตนแบบ ง . ถกทกขอ

4. ไฟลภาพแบบใด ไมสามารถนำามาใชในการเปนภาพตนแบบไดก. JPEG ข. GIFค . TIFF ง. PNG

5. Spacer Image ชวยในการวางเลยเอาทอยางไรก. ชวยเพมชองไฟใหกบแตละตารางข . ชวยคำาความกวางของคอลมนไว ค. เปนจดจำาลองไวสำาหรบวางภาพในภายหลงง. ชวยเพมพนทหนาเวบ

6. Specer Image มขนาดเทาไหรก. 0.5 x 0.5 พกเซล ข . 1 x 1 พกเซล ค. 5 x 5 พกเซล ง. แลวแตผสรางกำาหนด

7. Spry ชวยในการวางเลยเอาทอยางไรก. ชวยเพมชองไฟใหกบแตละตารางข. ชวยคำาความกวางของคอลมนไว

ค. เปนจดจำาลองไวสำาหรบวางภาพในภายหลงง . ชวยเพมพนทหนาเวบ

8. Spry ประกอบดวยโคดชนดใดก. DHTML และ JavaScript ข . JavaScript และ

CSSค. CSS และ XHTML ง. XHMTL และ

ActionScript

แผนจดการเรยนร วชา การสรางเวบไซต (ดวย Dreamweaver) รหสวชา 2204-2009 ชน ปวช. หนวยท 8 เรอง การสรางเฟรมเซตในเวบเพจ สปดาหท 11 เวลา 8 ชวโมง

1. สาระสำาคญการทำางานบนเวบเพจ จำาเปนตองมการสรางเฟรมใหกบขอความ จง

ควรศกษาเกยวกบการสรางเฟรม การออกแบบเฟรมแบบประยกต การสรางเวบไซตลงในเฟรม การแทรกเวบเพจลงในเฟรม ซงการทำางานจะมรปแบบทสวยงาม ทนสมย และดเปนระเบยบเรยบรอย และเราสามารถใชงานไดอยางมป ร ะ ส ท ธ ภ า พ เ พ ม ม า ก ข น ส ะ ด ว ก ใ น ก า ร ท ำา ง า น ใ น ร ป แ บ บ ต า ง ๆ

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

งายตอการแกไข3. ออกแบบโครงสรางของเวบเพจไดโดยกำาหนดเฟรมเปนหลก4. แทรกเวบเพจยอยลงในเฟรมได5. สรางเวบเพจเพมลงในเฟรมได6. ปรบแตงกรอบเฟรมใหสวยงามได7. สามารถเชอมโยงเวบเพจแตละเวบเพจในเฟรมไดอยางถกตอง8. สามารถสรางเวบเพจแบบประยกตทมเฟรมเปนสวนประกอบได



เขาเรยน2. ใหนกศกษาคนควาการสราง

เ ฟ ร ม ใ ห ก บ ข อ ค ว า ม ก า รอ อ ก แ บ บ เ ฟ ร ม แ บ บประยกตการสรางเวบไซตลงในเฟรม

3. รวมสนทนาเกยวกบเรองการเลอกพนทภาพในโปรแกรมกราฟก

1. ใหความรวมมอกบครในการตรวจสอบ2. ศกษาคนควาการสรางเฟรม

ใหกบขอความการออกแบบเฟรมแบบประยกตการสรางเวบไซตลงในเฟรม









ข น ส ร ป ( 30 น า ท ) 1. ครและนกเรยนรวมกนสรป 1. ครและนกเรยนรวมกนสรป




สาระสำาคญ2. นกเรยนสอบถามขอสงสย3. ฟงและจดบนทก4. ทำาแบบทดสอบทายบท

5. กจกรรมการเรยนรกอนเรยน1. ศกษาคนควาการสรางเฟรมใหกบขอความการออกแบบเฟรมแบบประยกตการสรางเวบไซตลงในเฟรมข ณ ะ เ ร ย น1. จดบนทกการเรยน2. สนใจการปฏบตตามครและกลาในการแสดงความคดเหนและตอบคำาถาม3. ทำาแบบฝกหด4. ผเรยนสรปความรทไดจากการเรยนการการสอน5. ผเรยนหาแนวทางและเทคนคการหาคำาตอบ ดวยความรความเขาใจ

ของตนเองพรอมจด บนทกเปนลำาดบขนตอนทจะทำาใหตนเองไมลมสาระการเรยนร


6. สอการเรยนการสอน1. หนงสอเรยนวชา การสรางเวบไซต (ดวย Dreamweaver)2. ใบความรประจำาหนวย3. ใบงานและแบบฝกหด4. เครองไมโครคอมพวเตอร


7. วดผลประเมนผล1. ผเรยนปฏบต ภาระงานท มอบหมายเสรจท นเวลาท ก ำาหนด2. ต อ บ ค ำา ถ า ม แ ล ะ ท ำา ใ บ ง า น แ ล ะ แ บ บ ฝ ก ห ด ไ ด ถ ก ต อ ง3. ค ว า ม ส ะ อ า ด เ ร ย บ ร อ ย ข อ ง ใ บ ง า น แ ล ะ แ บ บ ฝ ก ห ด4. กระตอรอรนในการเรยนร ตอบคำาถาม สรปบทเรยน และกลา

แ ส ด ง ค ว า ม ค ด เ ห น

8. กจกรรมเสนอแนะ1. ผเรยนตองทบทวนบทเรยนทงกอนเรยนและหลงเรยนอยอยางส ม ำา เ ส ม อ2. ผเรยนหมนเขาชนเรยนเพอรบฟงเทคนค วธ และแนวทางทดกบครส อ น อ ย า ง ต ง ใ จ3. ผเรยนสนใจทำาใบงาน แบบฝกหด และแกไขใหถกตองทกครงททำาผ ด4. กลาทจะถามทกครงทเกดความสงสยและไมเขาใจหรอตามบทเรยนไ ม ท น


1. คำาสง View>Visual Aids>Frame Borders เปนคำาสงอะไรก . ใหเวบเพจแสดงขอบเฟรม ข.ใหเวบเพจสรางขอบเฟรมค. ใหเวบเพจจำาลองขอบเฟรม

ง.ใหเวบเพจขยายขอบเฟรม

2. เฟรมสำาเรจรปทเตรยมไว จะอยในเมนใดก. Modify ข . Frame ค. Insert ง. Format

3. ในกรณทเราตองการเรยกพาเนล Frames เราจะใชคยลดใด ก. <Ctrl+F2> ข . <Shift+F2> ค. <Ctrl+Shift+F2> ง .

<Shift+Alt+F2>

4. ในการปรบแตงรายละเอยดของเฟรมหลกจาก Property Inspector หนวย Relative ใน สวนของ Column (or Row) and Units เปนหนวยลกษณะใดก. ใหขนาดของเฟรมทเรากำาหนดสมพนธเปนเปอรเซนตกบขนาดเฟรมหลกข . ใ ห ข น า ด ข อ ง เ ฟ ร ม ท เ ร า ก ำา ห น ด สมพนธเปนเปอรเซนตกบขนาดหนาตางบราวเซอรค. ใหขนาดของเฟรมทเรากำาหนดสมพนธเปนเปอรเซนตกบขนาดหนาจอง.ใหขนาดของเฟรมทเรากำาหนดสมพนธเปนเปอรเซนตกบขนาดเฟรมยอย

5. การปรบแตงรายละเอยดของเฟรมยอยจาก Property Inspector ในสวนของ src ทำาเพออะไรก. ตงชอทใชเรยกเฟรมยอยน

ข.กำาหนดใหแสดง (Yes)/ไมแสดง (No) ขอบลอมเฟรมยอย ค. แสดงขอบเฟรมยอยง . ก ำาหนดช อและต ำาแหน งเก บไฟล เวบเพจทจะถกนำามาใชในเฟรมน

6. การบนทกไฟลทงหมดทงหนาเฟรมเซต และหนาเวบยอย เราใชคยใดก. <Ctrl+S> ข. <Shift+S>ค. <Ctrl+Shift+S> ง . ไมมขอถก

7. การเชอมโยงเวบเพจ โดยกำาหนดใหเปดหนาตางใหมขนมา จะตองใชคำาสงใดจากชอง Targetก . _blank ข._parent ค. _self ง. _top

8. การเชอมโยงเวบเพจ โดยสงใหแสดงเพจใหมในเฟรมเดม จะตองใชคำาสงใดจากชอง Targetก. _blank ข. _parent ค . _self ง. _top

9. การเชอมโยงเวบเพจ โดยสงใหแสดงเพจใหมในหนาตางเดมแบบขยายเตมหนาตาง จะตองใชคำาสงใดจากชอง Targetก. _blank ข . _parent ค. _self ง. ไมมขอถก

10. ขอใดไมใชรปแบบทเพมมาจากการเชอมโยงปกต

ก. _mainFrame ข._subFrame

ค . _top ง. _leftFrame

แผนจดการเรยนร วชา การสรางเวบไซต (ดวย Dreamweaver) รหสวชา 2204-2009 ชน ปวช. หนวยท 9 เรอง การสรางฟอรม สปดาหท 12 เวลา 4 ชวโมง

1. สาระสำาคญการสรางเวบไซต จำาเปนตองเรยนรเทคนคหลายประเภทในการทำางาน

เพอใหงานเกดความถกตองสวยงาม สงทควรเรยนรอกอยางคอ การสรางฟ อ ร ม แ ล ะ เ ค ร อ ง ม อ ใ น ก า ร ส ร า ง ฟ อ ร ม 2. ผ ล ก า ร เ ร ย น ร ท ค า ด ห ว ง1. รจกกบการสรางแบบฟอรมในรปแบบตางๆ บนหนาเวบได2. รลกษณะความแตกตางของแบบฟอรมแตละประเภทได3. จดการกบแบบฟอรมแตละประเภทได4. สามารถนำาขอมลทไดจากแบบฟอรมทสรางขนไปเกบได5. สามารถสรางแบบฟอรมในรปแบบของเราเองได6. รวธการสรางฟอรมแบบตางๆ ได7. สามารถปรบแตงขนาด และสของแบบฟอรมใหดเรยบรอยสวยงามได8. สามารถนำาแบบฟอรมทไดมาประยกตใชงานตามตองการได

9. สามารถแกไขแบบฟอรมจากคำาสงตาง ๆ ทมมาใหได


กจกรรมคร กจกรรมนกเรยนขนนำาเขาสบทเรยน ( สปดาหละ 30 น า ท ) 1. ตรวจสอบรายชอนกศกษาท

เขาเรยน2. ใหนกศกษาคนควาความหมาย

ของการสรางฟอรมขนตอนในการสรางฟอรมสวนประกอบตาง ๆ ของฟอรม

3. รวมสนทนาเกยวกบเรองการสรางฟอรม

1. ใหความรวมมอกบครในการตรวจสอบ2. คนควาความหมายของการ

สรางฟอรม ขนตอนในการสรางฟอรม สวนประกอบตาง ๆ ของฟอรม


ขนดำาเนนการสอน ( สปดาหละ 180 น า ท ) 1. บอกจดประสงคการเรยน2. บรรยาย อธบาย ยกตวอยาง














5. กจกรรมการเรยนรกอนเรยน1. คนควาความหมายของการสรางฟอรม ขนตอนในการสรางฟอรม สวนประกอบตาง ๆ ของฟอรมข ณ ะ เ ร ย น1. จดบนทกการเรยน2. สนใจการปฏบตตามครและกลาในการแสดงความคดเหนและตอบคำาถาม3. ทำาแบบฝกหด4. ผเรยนสรปความรทไดจากการเรยนการการสอน5. ผเรยนหาแนวทางและเทคนคการหาคำาตอบ ดวยความรความเขาใจของตนเองพรอมจด บนทก6. ผเรยนซกถามเพอขอสงสยในหวขอ หรอเนอหาการเรยนรทยงไมเขาใจกบผสอน

6. สอการเรยนการสอน1. หนงสอเรยนวชา การสรางเวบไซต (ดวย Dreamweaver) 2. ใบความรประจำาหนวย3. ใบงานและแบบฝกหด4. เครองไมโครคอมพวเตอร


7. วดผลประเมนผล1. ผ เ ร ยนปฏ บต ภาระงานท มอบหมายเสร จท น เวลาท ก ำาหนด2. ต อ บ ค ำา ถ า ม แ ล ะ ท ำา ใ บ ง า น แ ล ะ แ บ บ ฝ ก ห ด ไ ด ถ ก ต อ ง3. ค ว า ม ส ะ อ า ด เ ร ย บ ร อ ย ข อ ง ใ บ ง า น แ ล ะ แ บ บ ฝ ก ห ด4. สนใจกระตอรอรนในการเรยนร ตอบคำาถาม สรปสาระการเรยนร และ

ก ล า แ ส ด ง ค ว า ม ค ด เ ห น

8. กจกรรมเสนอแนะ1. ผเรยนตองทบทวนบทเรยนทงกอนเรยนและหลงเรยนอยอยาง

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

ส อ น อ ย า ง ต ง ใ จ3. ผเรยนสนใจทำาใบงาน แบบฝกหด และขยนปรบปรงแกไขใบงานและ

แ บ บ ฝ ก ห ด ใ ห ถ ก ต อ ง ท ก ค ร ง ท ท ำา ผ ด

เฉลยแบบฝกหด หนวยท 9 ตอนท 1 จงทำาเครองหมายวงกลม ในหวขอทถกตองทสดเพยงขอเดยว1. ขอใดเปนวตถประสงคในการนำาแบบฟอรม Radio Button

ก . ใชกบคำาถามทตองการเพยงคำาตอบ เดยวเทานนข.ใชกบคำาถามทตองการใหเลอกไดหลายคำาตอบค. ใหกรอกขอมลทผใชตองการลงไป

ง.สามารถนำาขอมลทไฟลอนเพมเตมเขามาได

2. โปรแกรมใดทไมไดใชในการนำาขอมลทไดจากแบบสอบถามมาประมวลผล และแสดงออกเปนผลลพธก. PHP ข. CGIค . FTP ง. ASP

3. ขอใดเปนขนตอนในการจดการทำาแบบฟอรม เพอจดเกบขอมล ก. CGI Script รบขอมลทำาการประมวลผล และแสดงผลลพธออกมา ข. สงขอมลทไดไปยงเครองเซรฟเวอร เพอรบขอมล ค. กรอกขอมลทตองการลงในแบบสอบถามง . ถกหมดทกขอ

4. เราสามารถทำาการถายขอมลไปยงโปรแกรมสครปตไดดวยวธใดก. สงขอมลไปเกบยงเคร องเซรฟเวอร โดยตรงข.สงขอมลภายในฟอรมไปทละบรรทดๆค. สงขอมลจากฟอรมทงหมดง . ถกทงขอ ข และ ค

5. ในกรณทมตวเลอกอยหลายตว และไมมพนทเพยงพอจะแสดง เราควรเลอกใชแบบฟอรมแบบใดก. Text Field ข. Jump Menuค. การจดกลมใหฟอรม ง . ก าร ส ร า ง รายการแบบลสต

6. ถาตองการชอ ทอย ผทองเวบ เราตองกำาหนดใหมการใชแบบฟอรมใดก. การใช Hidden Field ข. ก า รใช Jump Menuค . การใช Text Field ง.การใช Field Set

7. ปมคำาสง นเปนลกษณะการสรางฟอรมแบบใดก. การสรางลสตรายการข. การใสฟลดกรอกขอความค. การสรางเชคบอกซ ง . การใสฟลดซอน

8. ปมคำาสง นเปนลกษณะการสรางฟอรมแบบใดก. การสราง Radio Button ข. ก า รสรางลสตรายการค . การสรางเชคบอกซ ง. การจดกลมใหฟอรม

9. การสรางฟอรมแบบกรอกขอความ เราสามารถกำาหนดคาเร มตนใหกบฟอรมกรอกขอความได จากชองในขอใดก. Label ข. Typeค . Init Val ง. Multi line

10. การสรางปมกด ถาเราเลอกรปแบบเปน None เราสามารถเปลยนชอปมได โดยพมพชอทตองการในชองใด

ก. Action ข. ButtonNameค. Label ง . Value

แผนจดการเรยนร วชา การสรางเวบไซต (ดวย Dreamweaver) รหสวชา 2204-2009 ชน ปวช. หนวยท 10 เรอง การใช Cascading Style Sheet สปดาหท 13-14 เวลา 8 ชวโมง

1. สาระสำาคญในการสรางเวบไซต ปญหาหนงทเรามกพบคอการกำาหนดรปแบบการ

แสดงผลของหนาเวบ อาท เชน ฟอนตตวอกษร หรอระยะหางระหวางตวอกษร ทเราจะตองใชคำาสงกำาหนดใหกบทกหนาทสรางซำาๆ กน เพอใหเวบเพจทกหนาในเวบไซตนมรปแบบเดยวกน และเมอมการแกไขหนาตาของเวบไซต เราอาจจะตองเขาไปแกไขทละคำาสงในเวบเพจแตละหนา ซงทำาใหเสยเวลาหากเวบไซตมขนาดใหญ ดงนนเราสามารถใชสไตลในพาเนล CSS Style Sheet กำาหนดรปแบบการแสดงผลของหนาเวบเพยงคร ง เด ยว ก ส ามารถน ำา มา ใช ก บ เ ว บ เพจ แต ล ะห น า ใน เว บ ไซ ต ไ ด

2. ผ ล ก า ร เ ร ย น ร ท ค า ด ห ว ง1. สามารถกำาหนดรปแบบของสไตลชททตองการได2. สามารถใชงานสไตลชททกำาหนดได3. สามารถทำาการบนทกสไตลชทเกบไวใชงานได4. สามารถแกไขสไตลชททไดทำาการบนทกเกบไวแลวได

5. สามารถเรยกสไตลชทขนมาใชงาน หรอลบสไตลชททไมตองการได



การใช Cascading Style Sheet











ขอสงสย





4. กจกรรมการเรยนรก อ น เ ร ย น1. ผเรยนทำาแบบฝกหดกอนเรยนเพอทดสอบความรพนฐาน โดยการ

ตอบคำาถามเกยวกบหนวยการเรยนตามภมความรความสามารถของผเรยน

2. ครใหผเรยนอานใบความรเพอเตรยมความพรอมในการเรยนและตอบคำาถามครผสอนข ณ ะ เ ร ย น1. ผเรยนรวมกนศกษาเนอหาตามใบงานแลวตอบคำาถามและแสดงความคดเหน2. ตงใจฟงการอธบาย และแนะนำาจากคร3. ทำาใบงานและแบบฝกหดหลงเรยน4. รวมกนเฉลยใบงานและแบบฝกหดหลงเรยน5. จดบนทก เทคนค แนวการทเปนประโยชนตอผเรยน จากขอแนะนำาของครผสอน6. ผเรยนสรปความรทไดจากการเรยนการสอน 7. ผเรยนซกถามในหวขอทสงสยในเนอหาการเรยนร

5. สอการเรยนการสอน1. หนงสอเรยนวชา การสรางเวบไซต (ดวย Dreamweaver)

2. ใบความรประจำาหนวย3. ใบงานและแบบฝกหด4. เครองไมโครคอมพวเตอร5. แผนใสและเครองฉายภาพขามศรษะ6. ซดสอการสอน


และกลาแสดงความคดเหน5. มความพยายามปรบปรงแกไขใบงานและแบบฝกหดใหถกตองแลวนำาสงครผสอน

7. กจกรรมเสนอแนะ1. ถาผเรยนมการเตรยมตวในการเรยนทด เชน อาน และทำาการศกษา


2. ผเรยนตองมความขยน หมนฝกฝนบทเรยนอยเสมอทงกอนและห ล ง เ ร ย น

3. ผเรยนตองมความกลาทจะถามเมอสงสยทงในหองและนอกห อ ง เ ร ย น ก บ ค ร ผ ส อ น


1. ทำาไมเราตองเลอกใชงาน Cascading Style Sheet ก . ก ำาหนดการแสดงผลของเวบเพจ เพยงครงเดยว และสามารถนำาไปใชในเวบเพจอนๆ ไดข.กำาหนดใหมการแสดงผลเวบเพจทแตกตางกนไดในแตละหนาค. สามารถตกแตงหนาเวบเพจไดจากการเขาไปแกไขทละคำาสงไดง.เปนการกำาหนดรปแบบของเวบเพจแตละหนาได

2. ในหนาสรางสไตลใหม (New CSS Rule) ตวเลอกใดใน Selector Type ทเปนการระบวาจะเปลยนรปแบบการแสดงผลของคำาสง HTMLก. Class ข. Advancedค . Tag ง. HTML

3. ขอใดเปนการสรางสไตลชทแบบกำาหนดชอใหมก . Class ข. Advancedค. Tag ง. HTML

4. ขอใดเปนการทำางานของปม ก. กำาหนดสไตลชทใหม ข . เรยกไฟลสไตลชท ทสรางไวมาใชงานค. ลบสไตลชท ง. ก ำาหนดสไตล ช ท ใหม โดยใชแบบจากสไตลชทเดม

5. ขอใดคอวธการเรยกสไตลขนมาแกไข

ก. เลอกสไตลในพาเนล CSS Style และแกไขในสวนของ CSS Propertiesข.ดบเบลคลกทสไตลในพาเนล CSS Style

ค. ดบเบลคลกทชอไฟลนามสกล .css ในพาเนล Files ง . ถกหมดทกขอ

6. การลบสไตลชท เราสามารถทำาการลบไดดวยวธใดก . เลอกสไตลชททจะลบ แลวคลกเมาส ปมขวาเลอกคำาสง Delete ข.คลกเมาสทสไตลชท แลวลากมาทงไวทไอคอน ค. ค ล ก เ ม า ส ท ส ไ ต ล ช ท แ ล ะ ก ด ป ม <Delete> ทคยบอรดง.ถกทงขอ ก และ ข

7. เราสามารถเปดหนาตาง Cascading Style Sheet ไดจากขอใดก. Text>CSS Styles ข .

Commands>CSS Stylesค . Windows>CSS Styles ง .

View>CSS Styles

8. ปมคำาสงในขอใด เปนรปแบบการกำาหนดสไตลชทใหม โดยใชแบบจากสไตลชทเดมก. ข . ค. ง.

9. ขอใดคอรปแบบการใชงานสไตลชทแบบ Linked

ก . สรางสไตลชททกำาหนดรปแบบการแสดง ผลเปนไฟลแยกไฟลเดยว และนำา Link

เขากบเวบเพจแตละหนาในเวบไซตข.การเขยนสไตลลงไปในเอกสาร HTML โดยตรงค. กำาหนดสไตลทตำาแหนงใดๆ ในเอกสารไดง.เปนการเชอมโยงรปแบบทสรางขนไปยงเวบไซตอน

10. ขอใดไมใชคณสมบตทเราสามารถกำาหนดใหกบสไตลชทไดก. ขอความ และการจดวาง ข. ต ว อ ก ษ ร และขนาดค. ส และพนฉากหลง ง . การทำาซำาคำาสงท ไดกำาหนดไวกอนหนานแลว

ตอนท 3 จงตอบคำาถามตอไปน

1. จงบอกคณสมบตของสไตลชททเราสามารถกำาหนดได

สไตลชทมคณสมบตทเราสามารถกำาหนดได แบงเปน 5 ประเภทคอ คณสมบตเกยวกบฟอนต ขนาด ลกษณะตางๆ คณสมบตเกยวกบขอความ การจดวาง ระยะหาง คณสมบตเกยวกบสพน ฉากหลง คณสมบตเกยวกบกรอบ คณสมบตเกยวกบหนวยวด

2. การใชงานสไตลชททงหมดมอยกรปแบบ อะไรบาง

การใชงานสไตลชทมทงหมด 3 รปแบบ คอ Embedded การเขยนสไตลลงไปในเอกสาร HTML โดยตรง โดยจะ

รวมเปนชดและจะวางไวกอนคำาสง <BODY> ซ งจะมผลกบเฉพาะ เอกสาร HTML นน

Inline กำาหนดสไตลทตำาแหนงใดๆ ในเอกสารได แตวธนไมตางจาก การกำาหนดรปแบบ ตวอกษรใหกบขอความทละสวนเหมอนกบทเรา เคยทำาอยมากนก นอกจากเราจะใชเพอลบลางสไตลเดมทเคยกำาหนดไว ใน Dreamweaver ไมมคำาสงโดยตรงสำาหรบการกำาหนดสไตล ช ท แบบน นอกจากเราจะแกไขโคด HTML เอง

Linked สรางสไตลชททกำาหนดรปแบบการแสดงผลของหนาเวบเพจ เปนไฟลแยกไฟลเดยว ( มนามสกลเปน .css) และนำามา Link เขากบ เวบเพจแตละหนาในเวบไซต โดยเมอใดทตองมการเปลยนแปลงสไตลของหนาเวบเพจ กทำาไดโดยการเปลยนคาทกำาหนดไวในสไตลชท หนาเวบเพจทงหมดทใชสไตลชทนนกจะเปลยนตาม

แผนจดการเรยนร วชา การสรางเวบไซต (ดวย Dreamweaver) รหสวชา 2204-2009 ชน ปวช. หนวยท 11 เรอง การใช มลตมเดย สปดาหท 15 เวลา 4 ชวโมง

1. สาระสำาคญปจจบนมการใชโปรแกรมมลตมเดยเขามาชวยในการทำางาน เมอนำาเขา

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

เขยนโคดโปรแกรมเพมเตมแตกชวยใหพฒนาใหเราสามารถสรางความนาส น ใ จ ต า ม ท เ ร า ต ง ใ จ เ อ า ไ ว ไ ด

2. ผ ล ก า ร เ ร ย น ร ท ค า ด ห ว ง1. รจกกบโปรแกรมตางๆ ทใชสำาหรบการสรางงานมลตมเดยบนเวบ2. รจกความสามารถของโปรแกรมตางๆ ทใชในการสรางสรรคงานบน

เวบ3. รจกการนำาไฟลภาพเคลอนไหว และมลตมเดยลงเวบ4. รรายละเอยดการทำางานของภาษา และปลกอนตางๆ ทใชงานบนหนา

เวบได5. สามารถปรบแตงภาพกราฟกใหมขนาดทตองการได6. เขาใจความสามารถของโปรแกรมมลตมเดยตางๆ เพอนำาไปใชงาน

ได7. สามารถใชงานคำาสงตางๆ เพอจดการกบภาพมลตมเดยบนเวบได8. จะรจกกบเทคนคการสรางปมของขอความทสวยงามไมเหมอนใคร

ได



การใช มลตมเดย


















5. สอการเรยนการสอน7. หนงสอเรยนวชา การสรางเวบไซต (ดวย Dreamweaver)8. ใบความรประจำาหนวย

9. ใบงานและแบบฝกหด10. เครองไมโครคอมพวเตอร11. แผนใสและเครองฉายภาพขามศรษะ12. ซดสอการสอน

7. วดผลประเมนผล 61. ผเรยนปฏบตภาระงานทมอบหมายเสรจทนเวลาทกำาหนด2. ตอบคำาถามและสรปผลงานไดอยางถกตอง3. ทำาแบบฝกหดหลงเรยนเสรจทนเวลาทกำาหนดและถกตอง 4. สนใจกระตอรอรนในการเรยนร ตอบคำาถาม สรปสาระการเรยนร


8. กจกรรมเสนอแนะ 71. ถาผเรยนมการเตรยมตวในการเรยนทด เชน อาน และทำาการศกษา





1. ทำาไมโปรแกรม Flash จงเปนทนยมในการสรางภาพเคลอนไหวบนเวบก . เปนไฟลภาพเคลอนไหวทมขนาดเลก และใชเวลาในการโหลดนอยข.ภาพเคลอนไหวทไดมรปแบบทสวยงามกวาทสรางจากโปรแกรมอนค. ทำาใหภาพเคลอนไหวทไดเปนภาพชนด Bitmapง.ถกหมดทกขอ

2. หากเราจะท ำาการสรางภาพเคลอนไหว และปมโตตอบกบผใชแบบมลตมเดย เราควรเลอกใชโปรแกรมใดก. Authorware, Photoshop ข .

Flash , Photoshopค . Director, Flash ง .

Photoshop, ActiveX

3. การแทรกองคประกอบของไฟลมลตมเดยรปแบบตางๆ บนเวบเพจ สามารถเรยกใชงานไดจากแทบใดก. Scriptข. Applicationค . Common ง. Layout

4. โปรแกรม Authorware นยมนำาไปใชในการสรางงานมลตมเดยในรปแบบใดก. การสรางเกมสออนไลนข. การสรางภาพเคลอนไหวมลตมเดย

ค . การสราง CAI หรอโปรแกรมคอมพวเตอรชวยสอน ง. การตกแตงภาพกราฟฟก

10. ขอใดเปนลกษณะของภาพแบบ Vector-basedก . องคประกอบของรปภาพมลกษณะ เปนลายเสนข.องคประกอบของรปภาพเปนแบบจดสค. มขนาดของไฟลภาพทใหญง.เมอทำาการขยายภาพใหมขนาดใหญขนทำาใหภาพไมชดเจน

ตอนท 2 จงตอบคำาถามตอไปนใหสมบรณ1. แนะนำา และอธบายโปรแกรมทใชในงานสรางภาพกราฟก และมลตมเดย

บนเวบ1. เลอก ทเมน Common หรอกดคย <Ctrl+Alt+F> หรอ

เล อกเมน Insert>Media> Flash เพ อแทรกไฟล .swf ท สรางโดย Flash

2. ดบเบลคลกเลอกไฟล Flash ทตองการ 3. จะปรากฏ ขนทหนาเวบแสดงถงไฟล Flash ทแทรกเขามาใน

หนาเวบ4. 4. เราสามารถทดสอบการใชงานไฟล Flash ทแทรกเขามาในหนา

เวบในโปรแกรม Dreamweaver ไดเลย โดยไมตองไปเปดผาน ทางบราวเซอร โดยใหเราคลกเมาสปม จาก Property Inspector

2. จงบอกวธการดงไฟลภาพเคลอนไหวจากโปรแกรม Flash มาแสดงบนเวบ1. เลอก ทเมน Common หรอกดคย <Ctrl+Alt+F> หรอ

เลอกเมน Insert>Media> Flash เพอแทรกไฟล .swf ทสรางโดย Flash 2. ดบเบลคลกเลอกไฟล Flash ทตองการ 3. จะปรากฏ ขนทหนาเวบแสดงถงไฟล Flash ทแทรกเขามาใน หนาเวบ

4 . เราสามารถทดสอบการใชงานไฟล Flash ทแทรกเขามา ในหนาเวบในโปรแกรม Dreamweaver ไดเลย โดยไม ตองไปเปดผานทางบราวเซอร โดยใหเราคลกเมาสปม

จาก Property Inspector

3. จงบอกความแตกตางระหวาง Javascript และ Java appletJavaScript เปนคำาสง Java ทเราสามารถนำามาใชในเวบเพจใหมลก

เลนมากขน เชน สรางปมทเคลอนไหวได หรอสรางแบบฟอรมทสามารถตอบโตกบผใชไดเมอมการกรอกขอมลผด เราอาจกลาวได JavaScript เปนอกทางเลอกหนงนอกจากภาษา HTML สำาหรบการนำามาใชสราง เวบเพจ JavaScript ต างจาก Java applet ตรงท JavaScript เกยวของกบการสรางเวบไซต ไมใชโปรแกรมทมหนาทเฉพาะเจาะจง

แผนจดการเรยนร วชา การสรางเวบไซต (ดวย Dreamweaver) รหสวชา 2204-2009 ชน ปวช. หนวยท 12 เรอง การสรางลกเลนดวย Behavior สปดาหท 16 เวลา 4 ชวโมง

1. สาระสำาคญสำาหรบคนทเขาเวบไซตตางๆ บอยๆ คงจะเคยเหนวา เมอเลอนเมาสไป

บรเวณหนงของเวบไซต จะปรากฏวา จะมการเปลยนสหรอเปลยนภาพ หรอเมอเปดเวบใดเวบหนง จะมหนาตางๆ เลกปรากฏตรงกลางจอ แสดงขอความยนดตอนรบหรออนๆ เหลานเปนเพยงบางสวนจากความสามารถทเรยกวา Behaviors

2. ผ ล ก า ร เ ร ย น ร ท ค า ด ห ว ง1. เลอก Behaviors ใหตรงกบบราวเซอรทผชมใชเปดดหนาเวบเรา2. เพมลกเลนบนเวบดวย Behaviors ได



การใช Behavioes






9. ฟง ทำาความเขาใจและซกถาม10. ฟง ทำาความเขาใจและ

ปฎบตตาม11. ผเรยนซกถามขอสงสยและ

จดบนทก12. รบการประเมน


สาระสำาคญ10. เปดโอกาสใหนกเรยนซก

ถามขอสงสย11. มอบหมายใหไปหดทำาและ







5. สอการเรยนการสอน13. หนงสอเรยนวชา การสรางเวบไซต (ดวย Dreamweaver)14. ใบความรประจำาหนวย

15. ใบงานและแบบฝกหด16. เครองไมโครคอมพวเตอร17. แผนใสและเครองฉายภาพขามศรษะ18. ซดสอการสอน








1. ขอใดกลาวไมถกตองก. Behaviors เปนการแทรกโคด JavaScript ในหนาเวบเพอ

โตตอบกบผใชข . Behaviors เปนความสามารถทตองโหลดเขามาไวเพมเตม ค. Behaviors เปนสครปตทรนบนบราวเซอรง. Event คอ เหตการณทเกดจากการกระทำาบางอยางของผใช

2. Behaviors ประกอบดวย 2 สวนในการกำาหนดพฤตกรรมของออบเจกตในหนาเวบ คอ

ก. Event กบ Code ข. Code กบ Scriptค. Script กบ Event ง . Event กบ Action

3. ออบเจกตใดทไมสามารถกำาหนด Behaviors ไดก. รปภาพ ข. ลงคค . ขอความทวไป ง. ออบเจกตของฟอรม

4. Behaviors เรยกใหแสดงได โดยเลอกปมใดก. <Shift>+<F1> ข. <Shift>+<F2>ค. <Shift>+<F3> ง . <Shift>+<F4>

5. ขอใดไมใช Eventก . OnKey ข. OnAfterPrintค. OnMove ง. OnReset.

6. เมอตองการใหทำางานชนหนง หลงจากโหลดหนาเวบเสรจสน เลอกใชอเวนตใด

ก. OnSuccess ข . OnLoad ค. OnFinish ง. OnSubmit,

7. ถาตองการใหทำางานชนหนง หลงจากสงคาในฟอรมไปประมวลผลแลว เลอกใชอเวนตใด

ก. OnSuccess ข. OnLoad ค. OnFinish ง . OnSubmit

8. OnDeactivate คออเวนตททำางานในลกษณะใดก. เกดเมอออบเจกตนนกำาลงทำางานอยข. เกดเมอผใชหยดโหลดขอมลของบราวเซอรกลางคนค. เกดเมอผใชปดหนาเวบง . เกดเมอออบเจกตเสยการทำางานใหกบออบเจกตอน

9. OnActivate คออเวนตททำางานในลกษณะใดก . เกดเมอออบเจกตนนกำาลงทำางานอย ข. เกดเมอผใชหยดโหลดขอมลของบราวเซอรกลางคนค. เกดเมอผใชปดหนาเวบง. เกดเมอออบเจกตเสยการทำางานใหกบออบเจกตอน

10. อเวนตและแอคชนใด ใชเปดหนาตางบราวเซอรขนใหมโดยอตโนมตก. OnLoad และ Popup Windowข. OnOpen และ Open Browser Windowค . OnLoad และ Open Browser Window ง. OnOpen และ Popup Window

แผนจดการเรยนรวชา การสรางเวบไซต (ดวย Dreamweaver) รหสวชา 2204-2009 ชน ปวช. หนวยท 13 เรอง การอพโหลดไฟลสเวบไซต สปดาหท 17 เวลา 4 ชวโมง

1. สาระสำาคญเขาใจเกยวกบการจดโครงรางไฟล การจดและเปลยนแปลงโครงสราง

โฟลเดอรในเวบไซต การตรวจสอบแกไข Link และการทำางานดานอนๆ ทท ำา ใ ห ง า น ม ร า ย ล ะ เ อ ย ด ใ น ห น า ต า ง เ ว บ ไ ซ ต ท ส ว ย ง า ม

2. ผ ล ก า ร เ ร ย น ร ท ค า ด ห ว ง1. เขาใจเรองการจดโครงสรางไฟล และเปลยนแปลงโครงสรางไฟลใน

เวบไซตได2. สามารถตรวจสอบ Link ในเวบไซตกอนทจะอพโหลดเวบเพจลง

ระบบเครอขายอนเทอรเนต3. สามารถแกปญหา Broken Link ได4. ทดสอบการแสดงผลเวบเพจบนบราวเซอรแตละรนได5. มความเขาใจเกยวกบการตดตอ หรอตดตงเซรฟเวอรเพอขอใชพนท

เวบไซตได6. ขอพนทเวบไซตฟร โดยการลงทะเบยนเพอใหมพนทสวนตวบนระบบ

เครอขายอนเทอรเนตได7. กำาหนดรายละเอยดเกยวกบเครองเวบเซรฟเวอรในหนาตาง Site

ได8. เขาใจรายละเอยดเพมเตมของหนาตาง Site Definition และ

สามารถจดการไดอยางถกตอง

9. สามารถนำาเวบเพจทสรางไวอพโหลดไปยงเวบเซรฟเวอรไดสำาเรจ10. เขาใจและทำาการดาวนโหลดไฟลผาน FTP ได11. สามารถลบไฟลบนเซรฟเวอรได


กจกรรมคร กจกรรมนกเรยนขนนำาเขาสบทเรยน ( สปดาหละ 30 น า ท ) 1. ตรวจสอบรายชอนกศกษาทเขาเรยน2.ใหนกศกษาคนควาความหมายของการอพโหลดไฟลสเวบไซต การจดโครงรางไฟลขนตอนตาง ๆ ในการอพโหลดไฟล3. รวมสนทนาเกยวกบเรองการ

อพโหลดไฟลสเวบไซต

1. ใหความรวมมอกบครในการตรวจสอบ2. คนควาความหมายของการ

อพโหลดไฟลสเวบไซต การจดโครงรางไฟลขนตอนตาง ๆ ในการอพโหลดไฟล















5. กจกรรมการเรยนรก อ น เ ร ย น1. คนควาความหมายของการอพโหลดไฟลสเวบไซต การจดโครงรางไฟลขนตอนตาง ๆ ในการอพโหลดไฟลข ณ ะ เ ร ย น1. ผเรยนรวมกนศกษาเนอหาตามครแลวตอบคำาถามและแสดงความคดเหน2. ทำาใบงานและแบบฝกหดหลงเรยน3. รวมกนเฉลยใบงานและแบบฝกหดหลงเรยน4. จดบนทก เทคนค แนวการทเปนประโยชนตอผเรยน จากขอแนะนำาของครผสอน5. ผเรยนสรปความรทไดจากการเรยนการสอน 6. ผเรยนซกถามในหวขอทสงสยในเนอหาการเรยนร

6. สอการเรยนการสอน1.หนงสอเรยนวชา การสรางเวบไซต (ดวย Dreamweaver)2.ใบความรประจำาหนวย3.ใบงานและแบบฝกหด4. เครองไมโครคอมพวเตอร5. แผนใสและเครองฉายภาพขามศรษะ6.ซดสอการสอน






3. ผเรยนควรฝกหดในการเขยนสญลกษณของวงจรพรอมนยามของว ง จ ร แ ต ล ะ ช น ด

4. ผเรยนตองมความพยายามและมทศนคตทดในเนอหาบทเรยน3. ผเรยนตองมความกลาทจะถามเมอสงสยทงในหองและนอก

ห อ ง เ ร ย น ก บ ค ร ผ ส อ น


1. Broken Link ในเวบไซตเกดจากสาเหตใดก. เกดจากมการกำาหนดลงคใหเชอมโยงกบไฟลทเราคดวาจะสราง แตสดทายกไมไดสรางข.เกดจากการไมไดอพเดตลงคเมอมการเปลยนแปลงโครงสรางของเวบไซตค. เกดจากการนำาเขาไฟลเวบเพจทเคยสรางทอนเขามารวมในเวบไซต

ซงมลงคเดมอยทใชงานไมไดง . ถกทกขอ

2. คำาสงใดในโปรแกรม Dreamweaver ทใชในการตรวจสอบลงค ก. File>Check Linksข.File>Check Pagesค. File>Check Page>Check Linksง . ขอ ก และ ค

3. ปญหาทเกดจากความแตกตางกนของบราวเซอรในการแสดงผลคออะไรก. หนาเวบจะเรยกบราวเซอรท งสองให แสดงขนมาพรอมกนข.หนาเวบจะเปดขนชามากหากไมไดถกออกแบบมาเพอบราวเซอรนนค. หนาเวบนนเกดขอผดพลาด และทำาใหเครองตองรบตใหมหากไมไดถกออกแบบมา

เพอบราวเซอรนนง . ห น า เ ว บ ท อ อ ก แ บ บ เ พ อ เ ป ด บ น บราวเซอรหนงจะไมสามารถเปดบนอกบราวเซอรหนงได

อยางสมบรณ

4. วธขอพนทเวบไซตวธใดใชงบประมาณมากทสดก. ตดตงอนเทอรเนตความเรวสงข . ตดตงเวบเซรฟเวอรดวยตวเอง ค. ขอเชาพนทในเวบเซรฟเวอรของผอนง.ขอพนทฟรในเวบเซรฟเวอร

5. การเชอมตออนเทอรเนตรปแบบใดทไมเหมาะส ำาหรบการทำางานเปนบรษทหรอองคกรก. เชอมตอโดยใช Leased line ข . เชอมตอโดยใช Modemค. เชอมตอแบบ ADSL ง. เ ช อ ม ต อโดยมเครองเซรฟเวอรเปนของตวเอง

6. ขอใดคอป จจยส ำาค ญทเราควรพจารณาในการขอเชาพ นท ในเวบเซรฟเวอรก. ขนาดพนทสำาหรบเกบขอมล ข .

ความเรวในการรบสงขอมลค. การจำากดปรมาณขอมลทรบสง ง . ถกทกขอ

7. หลงจากทเราไดขอพนทเวบไซตแลว จงเรยงลำาดบขนตอนตอไปในการอพโหลดเวบเพจa. เชอมตอกบเครองเวบเซรฟเวอร

b. กำาหนดรายละเอยดเกยวกบเครองเวบเซรฟเวอรc. อพโหลดไฟลไปยงเครองเวบเซรฟเวอรก. abc ข. bcaค . bac ง. acb

8. คำาสงใดในโปรแกรม Dreamweaver ทใชในการทดสอบการแสดงผลบนบราวเซอร ก. File->Check Browser ข . File- >Check Pages->Browser Compatibility

ค. File->Check Page->Check Browser ง. File->Check->Browser Compatibility

9. การใชคำาสง Check Out เพอดาวนโหลดไฟลจากเครองเวบเซรฟเวอร มประโยชนอยางไรก. เพอใชควบคมการเขาถงไฟลจากผบกรกข.เพอใชควบคมการเขาถงไฟลในการโอนถายขอมลค. เพอใชควบคมการแกไขไฟลกอนอพโหลดขอมลลงเครองเวบเซรฟเวอรง . เพอใชควบคมการแกไขไฟลโดยแตละ คนในทมงานไมใหซำาซอนกน

10. ขอใดถกตองเกยวกบการอพโหลดขอมลก . จะทำากตอเมอตอกบเครองเซรฟเวอร แลวข.สามารถอพโหลดไปฝากไวกบเคร องเซรฟเวอรใดกไดโดยไมตองขออนญาต

ค. เปนการนำาขอมลเขามาสเครอง Client ง. หากผใดตองการใชไฟลทอพโหลดแลวนน ตองตดตอมายงเครองของเรากอนทกครง


1. จงสรปวธการขอพนทฟรในเวบเซรฟเวอร1. เขาสเวบบรการพนทฟร 2. ลงทะเบยนเปนสมาชกฟรตามขนตอนของเวบไซตนนๆ 3. ไดพนทฟร สามารถเขาไปเยยมชมเวบไซตของตนเองได

2. จงเปรยบเทยบขอดขอเสยระหวางการขอพนทเวบไซต 3 แบบจากเนอหาขางตน

1. ตดตง เวบเซรฟเวอรเอง มต นทนสง ย งยากในการดแล เซรฟเวอร ความเรวในการใหบรการสง2. ขอเชาพนทเวบเซรฟเวอรของผอน เสยเฉพาะคาเชา ราคาไมแพง ไมตองวนวายในการดแลเซรฟเวอรไดความเรวจำากดเพราะตองแบงกบผเชารายอน3. ขอพนทฟร ไมเสยคาใชจาย ไมวนวายเร องเซรฟเวอร เพราะเปน บรการสาธารณะ ความเรวทไดตำาทสด เนองจากมผแบงใชจำานวนมาก

Documents

WordPress.com · Web viewทำใบงานและแบบฝ กห ดหล งเร ยน ร วมก นเฉลยใบงานและแบบฝ กห ดหล