Upload
others
View
4
Download
0
Embed Size (px)
Citation preview
คมอแผนการสอน
หลกสตรประกาศนยบตรวชาชพ(ปวช.) พทธศกราช 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
3. แบบประเมน
2
4. แบบประเมน
2
5. แบบประเมน
3
6. แบบประเมน
4
7. แบบประเมน
2
8. แบบประเมน
2
9. แบบประเมน
10. แบบประเมน
11. แบบประเมน
12. แบบประเมน
คมอคร และ 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 แกไขขอผดพลาด และบนทกหนาเวบเพจททำาเสรจเรยบรอยแลว
3. กจกรรมการเรยนร
กจกรรมคร กจกรรมนกเรยนขนนำาเขาสบทเรยน ( สปดาหละ 30 น า ท ) 1. ตรวจสอบรายชอนกศกษาทเขาเรยน2. ใหนกศกษาคนควาการสรางเวบไซต การใชภาษาในการเขยนเวบเพจ ข นตอนในการเขยนเวบเพจ3. รวมสนทนาเกยวกบเรอง
สรางเวบเพจเบองตน
1. ใหความรวมมอกบครในการตรวจสอบ2. คนควาการสรางเวบไซต การใชภาษาในการเขยนเวบเพจ ขนตอนในการเขยนเวบเพจ3. รวมสนทนาและแสดงความคดเหน
ขนดำาเนนการสอน ( สปดาหละ 180 น า ท ) 1. บอกจดประสงคการเรยน2. บรรยาย อธบาย ยกตวอยาง แสดงวธการปฎบตในแต ละหวขอการเรยนและใหนกศกษาปฎบตไปพรอมกน 3. ครบอกวธการและแนวคดใน
การปฏบตทถกตองใหแกผเรยน
4. ประเมนพฤตกรรมรายบคคลโดยครจะซกถามในแตละคน
1. ฟง ทำาความเขาใจและซกถาม2. ฟง ทำาความเขาใจและปฎบต
ตาม3. ผเรยนซกถามขอสงสยและจด
บนทก4. รบการประเมน
ขนสรป ( สปดาหละ 30 นาท ) 1. ครและนกเรยนรวมกนสรป
สาระสำาคญ
1. ครและนกเรยนรวมกนสรปสาระสำาคญ
2. เปดโอกาสใหนกเรยนซกถามขอสงสย
3. มอบหมายใหไปหดทำาและศกษาเพมเตม
4. ทำาแบบทดสอบ
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 มาสรางเปนเวบเพจได
3. กจกรรมการเรยนร
กจกรรมคร กจกรรมนกเรยนขนนำาเขาสบทเรยน ( สปดาหละ 30 น า ท ) 1. ตรวจสอบรายชอนกศกษาทเขาเรยน2. ใหนกศกษาคนควาการสรางขอความ การปรบแตงขอความ และตำาแหนงของขอความ3. รวมสนทนาเกยวกบเรองการ
สรางขอความ
1. ใหความรวมมอกบครในการตรวจสอบ2. คนควาการสรางขอความ การปรบแตงขอความ และตำาแหนงของขอความ3. รวมสนทนาและแสดงความคดเหน
ขนดำาเนนการสอน ( สปดาหละ 180 น า ท ) 1. บอกจดประสงคการเรยน2. บรรยาย อธบาย ยกตวอยาง แสดงวธการปฎบตในแต ละหวขอการเรยนและใหนกศกษาปฎบตไปพรอมกน 3. ครบอกวธการและแนวคดใน
การปฏบตทถกตองใหแกผเรยน
4. ประเมนพฤตกรรมรายบคคลโดยครจะซกถามในแตละคน
5. ฟง ทำาความเขาใจและซกถาม6. ฟง ทำาความเขาใจและปฎบต
ตาม7. ผเรยนซกถามขอสงสยและจด
บนทก8. รบการประเมน
ขนสรป ( สปดาหละ 30 นาท ) 5. ครและนกเรยนรวมกนสรป
สาระสำาคญ6. เปดโอกาสใหนกเรยนซกถาม
5. ครและนกเรยนรวมกนสรปสาระสำาคญ
6. นกเรยนสอบถามขอสงสย
ขอสงสย7. มอบหมายใหไปหดทำาและ
ศกษาเพมเตม8. ทำาแบบทดสอบ
7. ฟงและจดบนทก8. ทำาแบบทดสอบทายบท
4. กจกรรมการเรยนรก อ น เ ร ย น
1.คนควาการการปรบแตงขอความ และตำาแหนงของขอความ
ข ณ ะ เ ร ย น1.ผเรยนรวมกนศกษาเนอหาแลวตอบคำาถามและแสดงความคดเหน2.ทำาใบงานและแบบฝกหดหลงเรยน3.รวมกนเฉลยใบงานและแบบฝกหดหลงเรยน4.จดบนทก เทคนค แนวการทเปนประโยชนตอผเรยน จากขอแนะนำาของครผสอน5.ผเรยนสรปความรทไดจากการเรยนตามความเปนจรง จากภมความรของผเรยนแตละคน6.ผเรยนซกถามในหวขอทสงสยในเนอหาการเรยนร
5. สอการเรยนการสอน1.หนงสอเรยนวชา การสรางเวบไซต (ดวย Dreamweaver) 2.ใบความรประจำาหนวย3.ใบงานและแบบฝกหด 4.เครองไมโครคอมพวเตอร 5.แผนใสและเครองฉายภาพขามศรษะ
6.ซดสอการสอน
6. วดผลประเมนผล1. ผเรยนปฏบตภาระงานทมอบหมายเสรจทนเวลาทกำาหนด2. ตอบคำาถามและสรปผลงานไดอยางถกตอง3. ทำาแบบฝกหดหลงเรยนเสรจทนเวลาทกำาหนดและถกตอง 4. สนใจกระตอรอรนในการเรยนร ตอบคำาถาม สรปสาระการเรยนร
และกลาแสดงความคดเหน
7. กจกรรมเสนอแนะถาผเรยนมการเตรยมตวในการเรยนทด เชน อาน และท ำาการศกษา
หนงสอเกยวกบหนวยการเรยนมากกอน ถงชวโมงเรยน ผเรยน จะสามารถเรยน และทำากจกรรมตาง ๆ ทครผสอนมอบหมาย ไดอยางมความสข และเ ก ด ค ว า ม ช อ บ แ ล ะ ส น ก ก บ ก า ร เ ร ย น ใ น ช น เ ร ย น
เฉลยแบบฝกหด หนวยท 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 ได
3. กจกรรมการเรยนร
กจกรรมคร กจกรรมนกเรยนขนนำาเขาสบทเรยน ( สปดาหละ 30 น า ท ) 1. ตรวจสอบรายชอนกศกษาทเขาเรยน2. ใหนกศกษาคนควาเกยวกบการแตงเตมเวบเพจดวยกราฟก ขนตอนในการฟอรแมตไฟลการปรบแตงรปภาพลงในเวบ3. รวมสนทนาเกยวกบเรอง
แตงเตมเวบเพจดวยกราฟก
1. ใหความรวมมอกบครในการตรวจสอบ2.คนควาเกยวกบการแตงเตมเวบเพจดวยกราฟก ขนตอนในการฟอรแมตไฟล การปรบแตงรปภาพลงในเวบ3. รวมสนทนาและแสดงความคดเหน
ขนดำาเนนการสอน ( สปดาหละ 180 น า ท ) 1. บอกจดประสงคการเรยน2. บรรยาย อธบาย ยกตวอยาง แสดงวธการปฎบตในแต ละหวขอการเรยนและใหนกศกษาปฎบตไปพรอมกน 3. ครบอกวธการและแนวคดใน
การปฏบตทถกตองใหแกผเรยน
4. ประเมนพฤตกรรมรายบคคลโดยครจะซกถามในแตละคน
1. ฟง ทำาความเขาใจและซกถาม2. ฟง ทำาความเขาใจและปฎบต
ตาม3. ผเรยนซกถามขอสงสยและจด
บนทก4. รบการประเมน
ขนสรป ( สปดาหละ 30 นาท ) 1. ครและนกเรยนรวมกนสรป
สาระสำาคญ
1. ครและนกเรยนรวมกนสรปสาระสำาคญ
2. เปดโอกาสใหนกเรยนซกถามขอสงสย
3. มอบหมายใหไปหดทำาและศกษาเพมเตม
4. ทำาแบบทดสอบ
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. กจกรรมเสนอแนะถาผเรยนมการเตรยมตวในการเรยนทด เชน อาน และท ำาการศกษา
หนงสอเกยวกบหนวยการเรยนมากกอน ถงชวโมงเรยน ผเรยน จะสามารถเรยน และทำากจกรรมตาง ๆ ทครผสอนมอบหมาย ไดอยางมความสข และเ ก ด ค ว า ม ช อ บ แ ล ะ ส น ก ก บ ก า ร เ ร ย น ใ น ช น เ ร ย น
เฉลยแบบฝกหด หนวยท 4ตอนท 1 จงทำาเครองหมายวงกลม ในหวขอทถกตองทสดเพยงขอเดยว
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 ใชปรบแตงสงใดก. ปรบแตงความละเอยดของภาพ ข . ลดทอนสภาพ ค. เปดไฟลภาพดวยโปรแกรมทเลอก ง . ป ร บ ข น า ด ข อ ง ภ า พตนฉบบ
ตอนท 2 จงตอบคำาถามตอไปน ลงในชองวางทกำาหนดให
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. แทรกภาพ ขอมล และจดขอมลใหสวยงามได
3. กจกรรมการเรยนร
กจกรรมคร กจกรรมนกเรยนขนนำาเขาสบทเรยน ( สปดาหละ 30 น า ท ) 1. ตรวจสอบรายชอนกศกษาท
เขาเรยน2. ให น กศ กษาค นคว า การ ใส
ตารางบนเวบเพจ การสรางตาราง ข นตอนการสรางตาราง
3. รวมสนทนาเกยวกบเรองการใสตารางบนเวบเพจ
1. ใหความรวมมอกบครในการตรวจสอบ
2. ค นคว า การใสตารางบนเวบเพจ การสรางตาราง ขนตอนการสรางตาราง
3. รวมสนทนาและแสดงความคดเหน
ขนดำาเนนการสอน ( สปดาหละ 180 น า ท ) 1. บอกจดประสงคการเรยน2. บรรยาย อธบาย ยกตวอยาง
แสดงวธการปฎบตในแต ละหวขอการเรยนและใหนกศกษาปฎบตไปพรอมกน
3. ครบอกวธการและแนวคดในการปฏบตทถกตองใหแกผเรยน
4. 4. ประเมนพฤตกรรมรายบคคลโดยครจะซกถามในแตละคน
1. ฟง ทำาความเขาใจและซกถาม2. ฟง ทำาความเขาใจและปฎบต
ตาม3. ผเรยนซกถามขอสงสยและจด
บนทก4. รบการประเมน
ขนสรป ( สปดาหละ 30 นาท ) 1. ครและนกเรยนรวมกนสรป 1. ครและนกเรยนรวมกนสรป
สาระสำาคญ2. เปดโอกาสใหนกเรยนซกถาม
ขอสงสย3. มอบหมายใหไปหดทำาและ
ศกษาเพมเตม4. ทำาแบบทดสอบ
สาระสำาคญ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. ผเรยนสนใจทำาใบงาน แบบฝกหด และขยนปรบปรงแกไขใบงานและ
แ บ บ ฝ ก ห ด ใ ห ถ ก ต อ ง ท ก ค ร ง ท ท ำา ผ ด
เฉลยแบบฝกหด หนวยท 5ตอนท 1 จงทำาเครองหมายวงกลม ในหวขอทถกตองทสดเพยงขอเดยว
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 ได
3. กจกรรมการเรยนร
กจกรรมคร กจกรรมนกเรยนขนนำาเขาสบทเรยน ( 30 นาท ) 1. ตรวจสอบรายชอนกศกษาท
เขาเรยน2. ใหนกศกษาคนควาการเชอม
โ ย ง ภ า ย ใ น เ ว บ เ พ จเดยวกนการเชอมโยงภายในเวบไซตเดยวกน การเชอมโยงไปยงเวบไซตอน
3. รวมสนทนาเกยวกบเรองการเชอมโยง
1. ใหความรวมมอกบครในการตรวจสอบ
2. คนควาการเชอมโยงภายในเวบเพจเดยวกนการเชอมโยงภายในเวบไซต เด ยวก น กาเชอมโยงไปยงเวบไซตอน
3. รวมสนทนาและแสดงความคดเหน
ข น ด ำา เ น น ก า ร ส อ น ( 180 น า ท ) 1. บอกจดประสงคการเรยน2. บรรยาย อธบาย ยกตวอยาง
แสดงวธการปฎบตในแต ละหวขอการเรยนและใหนกศกษาปฎบตไปพรอมกน
3. ครบอกวธการและแนวคดในการปฏบตทถกตองใหแกผเรยน
4. ประเมนพฤตกรรมรายบคคลโดยครจะซกถามในแตละคน
1. ฟง ทำาความเขาใจและซกถาม2. ฟง ทำาความเขาใจและปฎบต
ตาม3. ผเรยนซกถามขอสงสยและจด
บนทก4. รบการประเมน
ข น ส ร ป ( 30 น า ท ) 1. ครและนกเรยนรวมกนสรป 1. ครและนกเรยนรวมกนสรป
สาระสำาคญ
สาระสำาคญ2. เปดโอกาสใหนกเรยนซกถาม
ขอสงสย3. มอบหมายใหไปหดทำาและ
ศกษาเพมเตม4. ทำาแบบทดสอบ
2. นกเรยนสอบถามขอสงสย3. ฟงและจดบนทก4. ทำาแบบทดสอบทายบท
4. กจกรรมการเรยนรก อ น เ ร ย น
1. คนควาการเชอมโยงภายในเวบเพจเดยวกนการเชอมโยงภายในเวบไซตเดยวกน การเชอมโยงไปยงเวบไซตอนข ณ ะ เ ร ย น
1. ผเรยนรวมกนศกษาเนอหาตามใบงานแลวตอบคำาถามและแสดงความคดเหน
2. ทำาใบงานและแบบฝกหดหลงเรยน2. รวมกนเฉลยใบงานและแบบฝกหดหลงเรยน3. จดบนทก เทคนค แนวการทเปนประโยชนตอผเรยน จากขอแนะนำาของ
ครผสอน4. ผเรยนสรปความรทไดจากการเรยนตามความเปนจรง จากภมความร
ของผเรยนแตละคน5. ผเรยนซกถามในหวขอทสงสยในเนอหาการเรยนร
5. สอการเรยนการสอน 1.หนงสอเรยนวชา การสรางเวบไซต (ดวย Dreamweaver) 2.ใบความรประจำาหนวย
3.ใบงานและแบบฝกหด 4. เครองไมโครคอมพวเตอร 5. แผนใสและเครองฉายภาพขามศรษะ 6. ซดสอการสอน6. วดผลประเมนผล
1. ผเรยนปฏบตภาระงานทมอบหมายเสรจทนเวลาทกำาหนด2. ตอบคำาถามและสรปผลงานไดอยางถกตอง3. ทำาแบบฝกหดหลงเรยนเสรจทนเวลาทกำาหนดและถกตอง 4. สนใจกระตอรอรนในการเรยนร ตอบคำาถาม สรปสาระการเรยนร
และกลาแสดงความคดเหน
7. กจกรรมเสนอแนะถาผเรยนมการเตรยมตวในการเรยนทด เชน อาน และท ำาการศกษา
หนงสอเกยวกบหนวยการเรยนมากกอน ถงชวโมงเรยน ผเรยน จะสามารถเรยน และทำากจกรรมตาง ๆ ทครผสอนมอบหมาย ไดอยางมความสข และเ ก ด ค ว า ม ช อ บ แ ล ะ ส น ก ก บ ก า ร เ ร ย น ใ น ช น เ ร ย น
เฉลยแบบฝกหด หนวยท 6ตอนท 1 จงทำาเครองหมายวงกลม ในหวขอทถกตองทสดเพยงขอเดยว
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
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. สามารถลบพนทบนเลยเอาททไมตองการออกได
3. กจกรรมการเรยนร
กจกรรมคร กจกรรมนกเรยนขนนำาเขาสบทเรยน ( 30 นาท ) 1. ตรวจสอบรายชอนกศกษาท
เขาเรยน2. ใหนกศกษาคนควาความหมาย
ของเลยเอาทการออกแบบเ ล ย เ อ า ท ข น ต อ น ใ น ก า รออกแบบเลยเอาท
3. รวมสนทนาเกยวกบเรองการออกแบบเลยเอาท
1. ใหความรวมมอกบครในการตรวจสอบ
2. ค น ค ว า ค ว า ม ห ม า ย ข อ งเ ล ย เ อ า ท ก า ร อ อ ก แ บ บเ ล ย เ อ า ท ข น ต อ น ใ น ก า รออกแบบเลยเอาท
3. รวมสนทนาและแสดงความคดเหน
ข น ด ำา เ น น ก า ร ส อ น ( 180 น า ท ) 1. บอกจดประสงคการเรยน2. บรรยาย อธบาย ยกตวอยาง
แสดงวธการปฎบตในแต ละหวขอการเรยนและใหนกศกษาปฎบตไปพรอมกน
3. ครบอกวธการและแนวคดในการปฏบตทถกตองใหแกผเรยน
4. ประเมนพฤตกรรมรายบคคลโดยครจะซกถามในแตละคน
1. ฟง ทำาความเขาใจและซกถาม2. ฟง ทำาความเขาใจและปฎบต
ตาม3. ผเรยนซกถามขอสงสยและจด
บนทก4. รบการประเมน
ข น ส ร ป ( 30 น า ท ) 1. ครและนกเรยนรวมกนสรป
สาระสำาคญ2. เปดโอกาสใหนกเรยนซกถาม
1. ครและนกเรยนรวมกนสรปสาระสำาคญ
2. นกเรยนสอบถามขอสงสย
ขอสงสย3. มอบหมายใหไปหดทำาและ
ศกษาเพมเตม4. ทำาแบบทดสอบ
3. ฟงและจดบนทก4. ทำาแบบทดสอบทายบท
5. กจกรรมการเรยนรกอนเรยน
1. คนควาความหมายของเลยเอาทการออกแบบเลยเอาท ขนตอนในการออกแบบเลยเอาท
ข ณ ะ เ ร ย น1. จดบนทกการเรยน2. สนใจการปฏบตตามครและกลาในการแสดงความคดเหนและตอบคำาถาม3. ทำาแบบฝกหด4. ผเรยนสรปความรทไดจากการเรยนการการสอน5. ผเรยนหาแนวทางและเทคนคการหาคำาตอบ ดวยความรความเขาใจ
ของตนเองพรอมจด บนทกเปนลำาดบขนตอนทจะทำาใหตนเองไมลมสาระการเรยนร
6. ผเรยนซกถามเมอไมเขาใจหรอสงสยเนอหาการเรยนร
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. สามารถสรางเวบเพจแบบประยกตทมเฟรมเปนสวนประกอบได
4. กจกรรมการเรยนร
กจกรรมคร กจกรรมนกเรยนขนนำาเขาสบทเรยน ( 30 นาท ) 1. ตรวจสอบรายชอนกศกษาท
เขาเรยน2. ใหนกศกษาคนควาการสราง
เ ฟ ร ม ใ ห ก บ ข อ ค ว า ม ก า รอ อ ก แ บ บ เ ฟ ร ม แ บ บประยกตการสรางเวบไซตลงในเฟรม
3. รวมสนทนาเกยวกบเรองการเลอกพนทภาพในโปรแกรมกราฟก
1. ใหความรวมมอกบครในการตรวจสอบ2. ศกษาคนควาการสรางเฟรม
ใหกบขอความการออกแบบเฟรมแบบประยกตการสรางเวบไซตลงในเฟรม
3. รวมสนทนาและแสดงความคดเหน
ข น ด ำา เ น น ก า ร ส อ น ( 180 น า ท ) 1. บอกจดประสงคการเรยน2. บรรยาย อธบาย ยกตวอยาง
แสดงวธการปฎบตในแต ละหวขอการเรยนและใหนกศกษาปฎบตไปพรอมกน
3. ครบอกวธการและแนวคดในการปฏบตทถกตองใหแกผเรยน
4. ประเมนพฤตกรรมรายบคคลโดยครจะซกถามในแตละคน
1. ฟง ทำาความเขาใจและซกถาม2. ฟง ทำาความเขาใจและปฎบต
ตาม3. ผเรยนซกถามขอสงสยและจด
บนทก4. รบการประเมน
ข น ส ร ป ( 30 น า ท ) 1. ครและนกเรยนรวมกนสรป 1. ครและนกเรยนรวมกนสรป
สาระสำาคญ2. เปดโอกาสใหนกเรยนซกถาม
ขอสงสย3. มอบหมายใหไปหดทำาและ
ศกษาเพมเตม4. ทำาแบบทดสอบ
สาระสำาคญ2. นกเรยนสอบถามขอสงสย3. ฟงและจดบนทก4. ทำาแบบทดสอบทายบท
5. กจกรรมการเรยนรกอนเรยน1. ศกษาคนควาการสรางเฟรมใหกบขอความการออกแบบเฟรมแบบประยกตการสรางเวบไซตลงในเฟรมข ณ ะ เ ร ย น1. จดบนทกการเรยน2. สนใจการปฏบตตามครและกลาในการแสดงความคดเหนและตอบคำาถาม3. ทำาแบบฝกหด4. ผเรยนสรปความรทไดจากการเรยนการการสอน5. ผเรยนหาแนวทางและเทคนคการหาคำาตอบ ดวยความรความเขาใจ
ของตนเองพรอมจด บนทกเปนลำาดบขนตอนทจะทำาใหตนเองไมลมสาระการเรยนร
6. ผเรยนซกถามเมอไมเขาใจหรอสงสยเนอหาการเรยนร
6. สอการเรยนการสอน1. หนงสอเรยนวชา การสรางเวบไซต (ดวย Dreamweaver)2. ใบความรประจำาหนวย3. ใบงานและแบบฝกหด4. เครองไมโครคอมพวเตอร
5. แผนใสและเครองฉายภาพขามศรษะ6. ซดสอการสอน
7. วดผลประเมนผล1. ผเรยนปฏบต ภาระงานท มอบหมายเสรจท นเวลาท ก ำาหนด2. ต อ บ ค ำา ถ า ม แ ล ะ ท ำา ใ บ ง า น แ ล ะ แ บ บ ฝ ก ห ด ไ ด ถ ก ต อ ง3. ค ว า ม ส ะ อ า ด เ ร ย บ ร อ ย ข อ ง ใ บ ง า น แ ล ะ แ บ บ ฝ ก ห ด4. กระตอรอรนในการเรยนร ตอบคำาถาม สรปบทเรยน และกลา
แ ส ด ง ค ว า ม ค ด เ ห น
8. กจกรรมเสนอแนะ1. ผเรยนตองทบทวนบทเรยนทงกอนเรยนและหลงเรยนอยอยางส ม ำา เ ส ม อ2. ผเรยนหมนเขาชนเรยนเพอรบฟงเทคนค วธ และแนวทางทดกบครส อ น อ ย า ง ต ง ใ จ3. ผเรยนสนใจทำาใบงาน แบบฝกหด และแกไขใหถกตองทกครงททำาผ ด4. กลาทจะถามทกครงทเกดความสงสยและไมเขาใจหรอตามบทเรยนไ ม ท น
เฉลยแบบฝกหด หนวยท 8 ตอนท 1 จงทำาเครองหมายวงกลม ในหวขอทถกตองทสดเพยงขอเดยว
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. สามารถแกไขแบบฟอรมจากคำาสงตาง ๆ ทมมาใหได
3. กจกรรมการเรยนร
กจกรรมคร กจกรรมนกเรยนขนนำาเขาสบทเรยน ( สปดาหละ 30 น า ท ) 1. ตรวจสอบรายชอนกศกษาท
เขาเรยน2. ใหนกศกษาคนควาความหมาย
ของการสรางฟอรมขนตอนในการสรางฟอรมสวนประกอบตาง ๆ ของฟอรม
3. รวมสนทนาเกยวกบเรองการสรางฟอรม
1. ใหความรวมมอกบครในการตรวจสอบ2. คนควาความหมายของการ
สรางฟอรม ขนตอนในการสรางฟอรม สวนประกอบตาง ๆ ของฟอรม
3. รวมสนทนาและแสดงความคดเหน
ขนดำาเนนการสอน ( สปดาหละ 180 น า ท ) 1. บอกจดประสงคการเรยน2. บรรยาย อธบาย ยกตวอยาง
แสดงวธการปฎบตในแต ละหวขอการเรยนและใหนกศกษาปฎบตไปพรอมกน
3. ครบอกวธการและแนวคดในการปฏบตทถกตองใหแกผเรยน
4. ประเมนพฤตกรรมรายบคคลโดยครจะซกถามในแตละคน
1. ฟง ทำาความเขาใจและซกถาม2. ฟง ทำาความเขาใจและปฎบต
ตาม3. ผเรยนซกถามขอสงสยและจด
บนทก4. รบการประเมน
ขนสรป ( สปดาหละ 30 นาท ) 1. ครและนกเรยนรวมกนสรป
สาระสำาคญ
1. ครและนกเรยนรวมกนสรปสาระสำาคญ
2. เปดโอกาสใหนกเรยนซกถามขอสงสย
3. มอบหมายใหไปหดทำาและศกษาเพมเตม
4. ทำาแบบทดสอบ
2. นกเรยนสอบถามขอสงสย3. ฟงและจดบนทก4. ทำาแบบทดสอบทายบท
5. กจกรรมการเรยนรกอนเรยน1. คนควาความหมายของการสรางฟอรม ขนตอนในการสรางฟอรม สวนประกอบตาง ๆ ของฟอรมข ณ ะ เ ร ย น1. จดบนทกการเรยน2. สนใจการปฏบตตามครและกลาในการแสดงความคดเหนและตอบคำาถาม3. ทำาแบบฝกหด4. ผเรยนสรปความรทไดจากการเรยนการการสอน5. ผเรยนหาแนวทางและเทคนคการหาคำาตอบ ดวยความรความเขาใจของตนเองพรอมจด บนทก6. ผเรยนซกถามเพอขอสงสยในหวขอ หรอเนอหาการเรยนรทยงไมเขาใจกบผสอน
6. สอการเรยนการสอน1. หนงสอเรยนวชา การสรางเวบไซต (ดวย Dreamweaver) 2. ใบความรประจำาหนวย3. ใบงานและแบบฝกหด4. เครองไมโครคอมพวเตอร
5. แผนใสและเครองฉายภาพขามศรษะ6. ซดสอการสอน
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. สามารถเรยกสไตลชทขนมาใชงาน หรอลบสไตลชททไมตองการได
3. กจกรรมการเรยนร
กจกรรมคร กจกรรมนกเรยนขนนำาเขาสบทเรยน ( 30 นาท ) 1. ตรวจสอบรายชอนกศกษาทเขาเรยน2. ทดสอบกอนเรยน โดยการถามผเรยนในหอง3. รวมสนทนาเกยวกบเรอง
การใช Cascading Style Sheet
1. ใหความรวมมอกบครในการตรวจสอบ2. ผเรยนชวยกนหาคำาตอบจาก
สงทครกำาหนด3. รวมสนทนาและแสดงความคดเหน
ข น ด ำา เ น น ก า ร ส อ น ( 180 น า ท ) 1. บอกจดประสงคการเรยน2. บรรยาย อธบาย ยกตวอยาง แสดงวธการปฎบตในแต ละหวขอการเรยนและใหนกศกษาปฎบตไปพรอมกน 3. ครบอกวธการและแนวคดใน
การปฏบตทถกตองใหแกผเรยน
4. ประเมนพฤตกรรมรายบคคลโดยครจะซกถามในแตละคน
1. ฟง ทำาความเขาใจและซกถาม2. ฟง ทำาความเขาใจและปฎบต
ตาม3. ผเรยนซกถามขอสงสยและจด
บนทก4. รบการประเมน
ข น ส ร ป ( 30 น า ท ) 1. ครและนกเรยนรวมกนสรป
สาระสำาคญ2. เปดโอกาสใหนกเรยนซกถาม
ขอสงสย
1. ครและนกเรยนรวมกนสรปสาระสำาคญ
2. นกเรยนสอบถามขอสงสย3. ฟงและจดบนทก4. ทำาแบบทดสอบทายบท
3. มอบหมายใหไปหดทำาและศกษาเพมเตม
4. ทำาแบบทดสอบ
4. กจกรรมการเรยนรก อ น เ ร ย น1. ผเรยนทำาแบบฝกหดกอนเรยนเพอทดสอบความรพนฐาน โดยการ
ตอบคำาถามเกยวกบหนวยการเรยนตามภมความรความสามารถของผเรยน
2. ครใหผเรยนอานใบความรเพอเตรยมความพรอมในการเรยนและตอบคำาถามครผสอนข ณ ะ เ ร ย น1. ผเรยนรวมกนศกษาเนอหาตามใบงานแลวตอบคำาถามและแสดงความคดเหน2. ตงใจฟงการอธบาย และแนะนำาจากคร3. ทำาใบงานและแบบฝกหดหลงเรยน4. รวมกนเฉลยใบงานและแบบฝกหดหลงเรยน5. จดบนทก เทคนค แนวการทเปนประโยชนตอผเรยน จากขอแนะนำาของครผสอน6. ผเรยนสรปความรทไดจากการเรยนการสอน 7. ผเรยนซกถามในหวขอทสงสยในเนอหาการเรยนร
5. สอการเรยนการสอน1. หนงสอเรยนวชา การสรางเวบไซต (ดวย Dreamweaver)
2. ใบความรประจำาหนวย3. ใบงานและแบบฝกหด4. เครองไมโครคอมพวเตอร5. แผนใสและเครองฉายภาพขามศรษะ6. ซดสอการสอน
6. วดผลประเมนผล1. ผเรยนปฏบตภาระงานทมอบหมายเสรจทนเวลาทกำาหนด2. ตอบคำาถามและสรปผลงานไดอยางถกตอง3. ทำาแบบฝกหดหลงเรยนเสรจทนเวลาทกำาหนดและถกตอง 4. สนใจกระตอรอรนในการเรยนร ตอบคำาถาม สรปสาระการเรยนร
และกลาแสดงความคดเหน5. มความพยายามปรบปรงแกไขใบงานและแบบฝกหดใหถกตองแลวนำาสงครผสอน
7. กจกรรมเสนอแนะ1. ถาผเรยนมการเตรยมตวในการเรยนทด เชน อาน และทำาการศกษา
หนงสอเกยวกบหนวยการเรยนมากกอน ถงชวโมงเรยน ผเรยน จะสามารถเรยน และทำากจกรรมตาง ๆ ทครผสอนมอบหมาย ไดอยางมความสข และเ ก ด ค ว า ม ช อ บ แ ล ะ ส น ก ก บ ก า ร เ ร ย น ใ น ช น เ ร ย น
2. ผเรยนตองมความขยน หมนฝกฝนบทเรยนอยเสมอทงกอนและห ล ง เ ร ย น
3. ผเรยนตองมความกลาทจะถามเมอสงสยทงในหองและนอกห อ ง เ ร ย น ก บ ค ร ผ ส อ น
เฉลยแบบฝกหด หนวยท 10ตอนท 1 จงทำาเครองหมายวงกลม ในหวขอทถกตองทสดเพยงขอเดยว
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. จะรจกกบเทคนคการสรางปมของขอความทสวยงามไมเหมอนใคร
ได
3. กจกรรมการเรยนร
กจกรรมคร กจกรรมนกเรยนขนนำาเขาสบทเรยน ( 30 นาท ) 1. ตรวจสอบรายชอนกศกษาทเขาเรยน2. ทดสอบกอนเรยน โดยการถามผเรยนในหอง3. รวมสนทนาเกยวกบเรอง
การใช มลตมเดย
1. ใหความรวมมอกบครในการตรวจสอบ2. ผเรยนชวยกนหาคำาตอบจาก
สงทครกำาหนด3. รวมสนทนาและแสดงความคดเหน
ข น ด ำา เ น น ก า ร ส อ น ( 180 น า ท ) 1. บอกจดประสงคการเรยน2. บรรยาย อธบาย ยกตวอยาง แสดงวธการปฎบตในแต ละหวขอการเรยนและใหนกศกษาปฎบตไปพรอมกน 3. ครบอกวธการและแนวคดใน
การปฏบตทถกตองใหแกผเรยน
4. ประเมนพฤตกรรมรายบคคลโดยครจะซกถามในแตละคน
5. ฟง ทำาความเขาใจและซกถาม6. ฟง ทำาความเขาใจและปฎบต
ตาม7. ผเรยนซกถามขอสงสยและจด
บนทก8. รบการประเมน
ข น ส ร ป ( 30 น า ท ) 5. ครและนกเรยนรวมกนสรป
สาระสำาคญ6. เปดโอกาสใหนกเรยนซกถาม
ขอสงสย7. มอบหมายใหไปหดทำาและ
5. ครและนกเรยนรวมกนสรปสาระสำาคญ
6. นกเรยนสอบถามขอสงสย7. ฟงและจดบนทก8. ทำาแบบทดสอบทายบท
ศกษาเพมเตม8. ทำาแบบทดสอบ
4. กจกรรมการเรยนรก อ น เ ร ย น1. ผเรยนทำาแบบฝกหดกอนเรยนเพอทดสอบความรพนฐาน โดยการ
ตอบคำาถามเกยวกบหนวยการเรยนตามภมความรความสามารถของผเรยน
2. ครใหผเรยนอานใบความรเพอเตรยมความพรอมในการเรยนและตอบคำาถามครผสอนข ณ ะ เ ร ย น1. ผเรยนรวมกนศกษาเนอหาตามใบงานแลวตอบคำาถามและแสดงความคดเหน2. ตงใจฟงการอธบาย และแนะนำาจากคร3. ทำาใบงานและแบบฝกหดหลงเรยน4. รวมกนเฉลยใบงานและแบบฝกหดหลงเรยน5. จดบนทก เทคนค แนวการทเปนประโยชนตอผเรยน จากขอแนะนำาของครผสอน6. ผเรยนสรปความรทไดจากการเรยนการสอน 7. ผเรยนซกถามในหวขอทสงสยในเนอหาการเรยนร
5. สอการเรยนการสอน7. หนงสอเรยนวชา การสรางเวบไซต (ดวย Dreamweaver)8. ใบความรประจำาหนวย
9. ใบงานและแบบฝกหด10. เครองไมโครคอมพวเตอร11. แผนใสและเครองฉายภาพขามศรษะ12. ซดสอการสอน
7. วดผลประเมนผล 61. ผเรยนปฏบตภาระงานทมอบหมายเสรจทนเวลาทกำาหนด2. ตอบคำาถามและสรปผลงานไดอยางถกตอง3. ทำาแบบฝกหดหลงเรยนเสรจทนเวลาทกำาหนดและถกตอง 4. สนใจกระตอรอรนในการเรยนร ตอบคำาถาม สรปสาระการเรยนร
และกลาแสดงความคดเหน5. มความพยายามปรบปรงแกไขใบงานและแบบฝกหดใหถกตองแลวนำาสงครผสอน
8. กจกรรมเสนอแนะ 71. ถาผเรยนมการเตรยมตวในการเรยนทด เชน อาน และทำาการศกษา
หนงสอเกยวกบหนวยการเรยนมากกอน ถงชวโมงเรยน ผเรยน จะสามารถเรยน และทำากจกรรมตาง ๆ ทครผสอนมอบหมาย ไดอยางมความสข และเ ก ด ค ว า ม ช อ บ แ ล ะ ส น ก ก บ ก า ร เ ร ย น ใ น ช น เ ร ย น
2. ผเรยนตองมความขยน หมนฝกฝนบทเรยนอยเสมอทงกอนและห ล ง เ ร ย น
3. ผเรยนตองมความกลาทจะถามเมอสงสยทงในหองและนอกห อ ง เ ร ย น ก บ ค ร ผ ส อ น
เฉลยแบบฝกหด หนวยท 11ตอนท 1 จงทำาเครองหมายวงกลม ในหวขอทถกตองทสดเพยงขอเดยว
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 ได
3. กจกรรมการเรยนร
กจกรรมคร กจกรรมนกเรยนขนนำาเขาสบทเรยน ( 30 นาท ) 1. ตรวจสอบรายชอนกศกษาทเขาเรยน2. ทดสอบกอนเรยน โดยการถามผเรยนในหอง3. รวมสนทนาเกยวกบเรอง
การใช Behavioes
1. ใหความรวมมอกบครในการตรวจสอบ2. ผเรยนชวยกนหาคำาตอบจาก
สงทครกำาหนด3. รวมสนทนาและแสดงความคดเหน
ข น ด ำา เ น น ก า ร ส อ น ( 180 น า ท ) 1. บอกจดประสงคการเรยน2. บรรยาย อธบาย ยกตวอยาง แสดงวธการปฎบตในแต ละหวขอการเรยนและใหนกศกษาปฎบตไปพรอมกน 3. ครบอกวธการและแนวคดใน
การปฏบตทถกตองใหแกผเรยน
4. ประเมนพฤตกรรมรายบคคลโดยครจะซกถามในแตละคน
9. ฟง ทำาความเขาใจและซกถาม10. ฟง ทำาความเขาใจและ
ปฎบตตาม11. ผเรยนซกถามขอสงสยและ
จดบนทก12. รบการประเมน
ข น ส ร ป ( 30 น า ท ) 9. ครและนกเรยนรวมกนสรป
สาระสำาคญ10. เปดโอกาสใหนกเรยนซก
ถามขอสงสย11. มอบหมายใหไปหดทำาและ
9. ครและนกเรยนรวมกนสรปสาระสำาคญ
10. นกเรยนสอบถามขอสงสย11. ฟงและจดบนทก12. ทำาแบบทดสอบทายบท
ศกษาเพมเตม12. ทำาแบบทดสอบ
4. กจกรรมการเรยนรก อ น เ ร ย น1. ผเรยนทำาแบบฝกหดกอนเรยนเพอทดสอบความรพนฐาน โดยการ
ตอบคำาถามเกยวกบหนวยการเรยนตามภมความรความสามารถของผเรยน
2. ครใหผเรยนอานใบความรเพอเตรยมความพรอมในการเรยนและตอบคำาถามครผสอนข ณ ะ เ ร ย น1. ผเรยนรวมกนศกษาเนอหาตามใบงานแลวตอบคำาถามและแสดงความคดเหน2. ตงใจฟงการอธบาย และแนะนำาจากคร3. ทำาใบงานและแบบฝกหดหลงเรยน4. รวมกนเฉลยใบงานและแบบฝกหดหลงเรยน5. จดบนทก เทคนค แนวการทเปนประโยชนตอผเรยน จากขอแนะนำาของครผสอน6. ผเรยนสรปความรทไดจากการเรยนการสอน 7. ผเรยนซกถามในหวขอทสงสยในเนอหาการเรยนร
5. สอการเรยนการสอน13. หนงสอเรยนวชา การสรางเวบไซต (ดวย Dreamweaver)14. ใบความรประจำาหนวย
15. ใบงานและแบบฝกหด16. เครองไมโครคอมพวเตอร17. แผนใสและเครองฉายภาพขามศรษะ18. ซดสอการสอน
6. วดผลประเมนผล1. ผเรยนปฏบตภาระงานทมอบหมายเสรจทนเวลาทกำาหนด2. ตอบคำาถามและสรปผลงานไดอยางถกตอง3. ทำาแบบฝกหดหลงเรยนเสรจทนเวลาทกำาหนดและถกตอง 4. สนใจกระตอรอรนในการเรยนร ตอบคำาถาม สรปสาระการเรยนร
และกลาแสดงความคดเหน5. มความพยายามปรบปรงแกไขใบงานและแบบฝกหดใหถกตองแลวนำาสงครผสอน
7. กจกรรมเสนอแนะ1. ถาผเรยนมการเตรยมตวในการเรยนทด เชน อาน และทำาการศกษา
หนงสอเกยวกบหนวยการเรยนมากกอน ถงชวโมงเรยน ผเรยน จะสามารถเรยน และทำากจกรรมตาง ๆ ทครผสอนมอบหมาย ไดอยางมความสข และเ ก ด ค ว า ม ช อ บ แ ล ะ ส น ก ก บ ก า ร เ ร ย น ใ น ช น เ ร ย น
2. ผเรยนตองมความขยน หมนฝกฝนบทเรยนอยเสมอทงกอนและห ล ง เ ร ย น
3. ผเรยนตองมความกลาทจะถามเมอสงสยทงในหองและนอกห อ ง เ ร ย น ก บ ค ร ผ ส อ น
เฉลยแบบฝกหด หนวยท 12ตอนท 1 จงทำาเครองหมายวงกลม ในหวขอทถกตองทสดเพยงขอเดยว
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. สามารถลบไฟลบนเซรฟเวอรได
3. กจกรรมการเรยนร
กจกรรมคร กจกรรมนกเรยนขนนำาเขาสบทเรยน ( สปดาหละ 30 น า ท ) 1. ตรวจสอบรายชอนกศกษาทเขาเรยน2.ใหนกศกษาคนควาความหมายของการอพโหลดไฟลสเวบไซต การจดโครงรางไฟลขนตอนตาง ๆ ในการอพโหลดไฟล3. รวมสนทนาเกยวกบเรองการ
อพโหลดไฟลสเวบไซต
1. ใหความรวมมอกบครในการตรวจสอบ2. คนควาความหมายของการ
อพโหลดไฟลสเวบไซต การจดโครงรางไฟลขนตอนตาง ๆ ในการอพโหลดไฟล
3. รวมสนทนาและแสดงความคดเหน
ขนดำาเนนการสอน ( สปดาหละ 180 น า ท ) 1. บอกจดประสงคการเรยน2. บรรยาย อธบาย ยกตวอยาง แสดงวธการปฎบตในแต ละหวขอการเรยนและใหนกศกษาปฎบตไปพรอมกน 3. ครบอกวธการและแนวคดใน
การปฏบตทถกตองใหแกผเรยน
4. ประเมนพฤตกรรมรายบคคลโดยครจะซกถามในแตละคน
1. ฟง ทำาความเขาใจและซกถาม2. ฟง ทำาความเขาใจและปฎบต
ตาม3. ผเรยนซกถามขอสงสยและจด
บนทก4. รบการประเมน
ขนสรป ( สปดาหละ 30 นาท ) 1. ครและนกเรยนรวมกนสรป
สาระสำาคญ
1. ครและนกเรยนรวมกนสรปสาระสำาคญ
2. เปดโอกาสใหนกเรยนซกถามขอสงสย
3. มอบหมายใหไปหดทำาและศกษาเพมเตม
4. ทำาแบบทดสอบ
2. นกเรยนสอบถามขอสงสย3. ฟงและจดบนทก4. ทำาแบบทดสอบทายบท
5. กจกรรมการเรยนรก อ น เ ร ย น1. คนควาความหมายของการอพโหลดไฟลสเวบไซต การจดโครงรางไฟลขนตอนตาง ๆ ในการอพโหลดไฟลข ณ ะ เ ร ย น1. ผเรยนรวมกนศกษาเนอหาตามครแลวตอบคำาถามและแสดงความคดเหน2. ทำาใบงานและแบบฝกหดหลงเรยน3. รวมกนเฉลยใบงานและแบบฝกหดหลงเรยน4. จดบนทก เทคนค แนวการทเปนประโยชนตอผเรยน จากขอแนะนำาของครผสอน5. ผเรยนสรปความรทไดจากการเรยนการสอน 6. ผเรยนซกถามในหวขอทสงสยในเนอหาการเรยนร
6. สอการเรยนการสอน1.หนงสอเรยนวชา การสรางเวบไซต (ดวย Dreamweaver)2.ใบความรประจำาหนวย3.ใบงานและแบบฝกหด4. เครองไมโครคอมพวเตอร5. แผนใสและเครองฉายภาพขามศรษะ6.ซดสอการสอน
7. วดผลประเมนผล1. ผเรยนปฏบตภาระงานทมอบหมายเสรจทนเวลาทกำาหนด2. ตอบคำาถามและสรปผลงานไดอยางถกตอง3. ทำาแบบฝกหดหลงเรยนเสรจทนเวลาทกำาหนดและถกตอง 4. สนใจกระตอรอรนในการเรยนร ตอบคำาถาม สรปสาระการเรยนร
และกลาแสดงความคดเหน5. มความพยายามปรบปรงแกไขใบงานและแบบฝกหดใหถกตองแลวนำาสงครผสอน
8. กจกรรมเสนอแนะ1. ถาผเรยนมการเตรยมตวในการเรยนทด เชน อาน และทำาการศกษา
หนงสอเกยวกบหนวยการเรยนมากกอน ถงชวโมงเรยน ผเรยน จะสามารถเรยน และทำากจกรรมตาง ๆ ทครผสอนมอบหมาย ไดอยางมความสข และเ ก ด ค ว า ม ช อ บ แ ล ะ ส น ก ก บ ก า ร เ ร ย น ใ น ช น เ ร ย น
2. ผเรยนตองมความขยน หมนฝกฝนบทเรยนอยเสมอทงกอนและห ล ง เ ร ย น
3. ผเรยนควรฝกหดในการเขยนสญลกษณของวงจรพรอมนยามของว ง จ ร แ ต ล ะ ช น ด
4. ผเรยนตองมความพยายามและมทศนคตทดในเนอหาบทเรยน3. ผเรยนตองมความกลาทจะถามเมอสงสยทงในหองและนอก
ห อ ง เ ร ย น ก บ ค ร ผ ส อ น
เฉลยแบบฝกหด หนวยท 13 ตอนท 1 จงทำาเครองหมายวงกลม ในหวขอทถกตองทสดเพยงขอเดยว
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 ง. หากผใดตองการใชไฟลทอพโหลดแลวนน ตองตดตอมายงเครองของเรากอนทกครง
ตอนท 2 จงตอบคำาถามตอไปน ลงในชองวางทกำาหนดให
1. จงสรปวธการขอพนทฟรในเวบเซรฟเวอร1. เขาสเวบบรการพนทฟร 2. ลงทะเบยนเปนสมาชกฟรตามขนตอนของเวบไซตนนๆ 3. ไดพนทฟร สามารถเขาไปเยยมชมเวบไซตของตนเองได
2. จงเปรยบเทยบขอดขอเสยระหวางการขอพนทเวบไซต 3 แบบจากเนอหาขางตน
1. ตดตง เวบเซรฟเวอรเอง มต นทนสง ย งยากในการดแล เซรฟเวอร ความเรวในการใหบรการสง2. ขอเชาพนทเวบเซรฟเวอรของผอน เสยเฉพาะคาเชา ราคาไมแพง ไมตองวนวายในการดแลเซรฟเวอรไดความเรวจำากดเพราะตองแบงกบผเชารายอน3. ขอพนทฟร ไมเสยคาใชจาย ไมวนวายเร องเซรฟเวอร เพราะเปน บรการสาธารณะ ความเรวทไดตำาทสด เนองจากมผแบงใชจำานวนมาก