20204-2008__การสร้างเว็บไซต์

แผนการสอน หน่วยที่ 4

ชื่อวิชา การสร้างเวบ็ ไซต์ (Website Creation) สอนครง้ั ที่ 6-7

ชอื่ หน่วย การออกแบบและใช้โปรแกรมกราฟิกเสริมในการสรา้ ง ช่วั โมงรวม 28 ช.ม.

เว็บไซต์

ชื่อเรื่อง การออกแบบสว่ นประกอบของเว็บไซต์ โปรแกรมกราฟิกทีน่ ยิ มใชใ้ นการออกแบบ จานวน 8 ช.ม.

เวบ็ ไซต์ การใชโ้ ปรแกรม Adobe Photoshop CC 2018 ในการออกแบบเวบ็ ไซต์ การ

บันทกึ ไฟล์ภาพกราฟิกสาหรับเว็บไซต์ การใชโ้ ปรแกรม Adobe Animate CC 2018 ใน

การออกแบบเวบ็ ไซต์ การบันทึกไฟล์ภาพเคล่ือนไหวสาหรบั เวบ็ ไซต์

4.1 การออกแบบสว่ นประกอบของเวบ็ ไซต์

หน้าเวบ็ เป็นสงิ่ แรกที่ผ้ใู ช้จะไดเ้ ห็นขณะที่เปดิ เขา้ สเู่ ว็บไซต์ และยังเป็นสิ่งแรกท่ีแสดงถึงประสทิ ธภิ าพในการ

ออกแบบเวบ็ ไซต์การออกแบบหนา้ เว็บใหส้ วยงามเหมาะสม

1) ส่วนหัวของหนา้ (Page Header) เป็นส่วนท่ีถกู ออกแบบมาให้อยู่ด้านบนสุดของหน้า สว่ นใหญ่ประกอบด้วย

ส่วนตา่ ง ๆ ตอ่ ไปนี

- โลโก้ (Logo) เป็นเครื่องหมายสัญลักษณ์ที่แสดงถึงหน่วยงาน องค์กรหรือชื่อเจ้าของเว็บไซต์ ถอื เป็นสิ่ง

สาคัญที่ช่วยให้ผู้เข้าชมเว็บไซต์สามารถจดจาเว็บไซต์ได้ นอกจากนีแล้วโลโก้ยังช่วย ให้เว็บไซต์ดูมีความเป็นเอกลักษณ์

เฉพาะทแี่ สดงถึงเจ้าของหน่วยงานหรือเจ้าของเวบ็ ไซต์ได้

- ชื่อเว็บไซต์ เป็นส่ิงสาคัญอีกสง่ิ หน่ึง ซึ่งจะแสดงความเปน็ เอกลักษณ์ เพ่ือให้เปน็ ทร่ี จู้ ักและจดจา การ

เลือกใช้ชื่อเว็บไซต์ควรตังให้สันกระชับและได้ใจความ ใชห้ ลักอา่ นง่ายพดู งา่ ยจาง่ายและสะกดงา่ ย อ่านเข้าใจ หรือมี

ความหมาย ซ่ึงจะชว่ ยใหผ้ ูเ้ ขา้ ชมเว็บไซต์รู้ว่าเว็บไซตน์ ีทาอะไร

- เมนูหรือลงิ ก์ (Navigation Bar) เปน็ จุดเชื่อมโยงไปสู่เนือหาหน้าอน่ื ๆ ของเว็บไซต์โดยเวบ็ ไซตท์ ่ัว ๆ

ไปจะมีเมนูหรือลิงก์ในส่วนต่าง ๆ ของเว็บไซตด์ ว้ ยเพ่ือชว่ ยให้ผ้เู ขา้ ชมเวบ็ ไซต์สามารถใชง้ านเว็บไซต์ได้ง่ายขึน

2) สว่ นเนือหา (Page Body) เป็นสว่ นท่ีอยู่ตอนกลางของหน้าเว็บ ใชแ้ สดงข้อมูลเนือหาของเว็บไซต์ ซึ่ง

ประกอบด้วย ข้อความ ตารางข้อมูล ภาพกราฟิก วีดโี อ และอ่ืน ๆ

3) สว่ นท้ายของหน้า (Page Footer) เปน็ สว่ นท่ีอย่ดู ้านล่างสดุ ของหน้าเว็บ มักวางระบบนาทางที่เป็นลิงก์ข้อความ

งา่ ย ๆ

4.2 โปรแกรมกราฟิกที่นิยมใช้ในการออกแบบเว็บไซต์

โปรแกรมสาหรบั กราฟิกถอื เป็นโปรแกรมท่ีสาคัญ

1. โปรแกรม Adobe Photoshop CC เป็นโปรแกรมประยุกต์ที่มีความสามารถในการจัดการแก้ไขและ

ตกแต่งรูปภาพ (photo editing and retouching)

2. โปรแกรม Adobe Animate CC เป็นหน่ึงในชุด โปรแกรม Adobe Creative Cloud บริษัท Adobe ได้

พัฒนา Adobe Animate CC ต่อยอดมาจาก Adobe Flash Professional โดยถูกสร้างขึนเพ่ือพัฒ นาไฟล์

ภาพเคล่ือนไหว หรือ อนิเมช่นั บนเวบ็ ไซต์ ท่ีเรยี กกันวา่ "Web Animation"

4.3 การใชโ้ ปรแกรม Adobe Photoshop CC 2018 ในการออกแบบเว็บไซต์

4.3.1 การสร้างเอกสารใหมแ่ ละการวาดเค้าโครงรา่ งเว็บไซต์

4.3.2 การออกแบบสว่ นหัวเว็บ

4.3.3 การเตรียมพนื ที่สาหรบั ใส่ขอ้ ความ

แผนการสอน หน่วยที่ 4
สอนคร้งั ที่ 6-7
ชือ่ วิชา การสร้างเวบ็ ไซต์ (Website Creation) ชว่ั โมงรวม 28 ช.ม.

ชือ่ หน่วย การออกแบบและใช้โปรแกรมกราฟิกเสรมิ ในการสรา้ ง จานวน 8 ช.ม.
เว็บไซต์

ชื่อเรื่อง การออกแบบสว่ นประกอบของเวบ็ ไซต์ โปรแกรมกราฟิกท่นี ิยมใชใ้ นการออกแบบ
เว็บไซต์ การใช้โปรแกรม Adobe Photoshop CC 2018 ในการออกแบบเวบ็ ไซต์ การ
บนั ทกึ ไฟลภ์ าพกราฟิกสาหรบั เว็บไซต์ การใช้โปรแกรม Adobe Animate CC 2018 ใน
การออกแบบเว็บไซต์ การบนั ทึกไฟล์ภาพเคล่ือนไหวสาหรบั เวบ็ ไซต์

4.5 การใช้โปรแกรม Adobe Animate CC 2018 ในการออกแบบเว็บไซต์
4.6 การบันทึกไฟลภ์ าพเคลือ่ นไหวสาหรับเวบ็ ไซต์

การบันทึกไฟล์ภาพเคลื่อนไหวสาหรับเวบ็ ไซต์ มีขันตอนดังนี
1. คลิกที่เมนู File> Export Movie

1

2. ตังชื่อไฟล์ head.swf เลือกตาแหน่งที่เก็บไฟล์ คลิก save

2

3. จะได้ไฟลภ์ าพเคล่ือนไหวสาหรับเวบ็ ไซต์ ดังรูป

3

แผนการสอน หน่วยที่ 4

ชอื่ วิชา การสรา้ งเวบ็ ไซต์ (Website Creation) สอนคร้ังที่ 6-7

ช่ือหน่วย การออกแบบและใช้โปรแกรมกราฟกิ เสริมในการสร้าง ชว่ั โมงรวม 28 ช.ม.

เว็บไซต์

ช่อื เรื่อง การออกแบบส่วนประกอบของเว็บไซต์ โปรแกรมกราฟิกทนี่ ิยมใชใ้ นการออกแบบ จานวน 8 ช.ม.

เวบ็ ไซต์ การใช้โปรแกรม Adobe Photoshop CC 2018 ในการออกแบบเว็บไซต์ การ

บนั ทกึ ไฟล์ภาพกราฟิกสาหรับเว็บไซต์ การใช้โปรแกรม Adobe Animate CC 2018 ใน

การออกแบบเวบ็ ไซต์ การบนั ทกึ ไฟลภ์ าพเคล่ือนไหวสาหรับเวบ็ ไซต์

ใบงานที่ 4 การออกแบบและใช้โปรแกรมกราฟกิ เสริมในการสรา้ งเวบ็ ไซต์

คาชแ้ี จง : ใหน้ ักเรียนออกแบบหัวเว็บไซต์ เรอ่ื งท่ีตนเองสนใจลงในใบงานท่ี 4 พรอ้ มฝึกปฏบิ ตั สิ รา้ งหัวเว็บโดยใช้

โปรแกรม Adobe Photoshop และทาภาพเคลื่อนไหวโดยใชโ้ ปรแกรม Adobe animate cc

เว็บไซตเ์ รือ่ ง........................................................................................................................................ ...............
รายละเอยี ดของเว็บไซต์
............................................................................................. ..........................................................
............................................................................................................................. ..........................
ออกแบบหวั เว็บไซต์

ออกแบบภาพเคล่อื นไหว

แผนการสอน หนว่ ยที่ 4

ชอ่ื วิชา การสร้างเวบ็ ไซต์ (Website Creation) สอนคร้งั ท่ี 6-7

ชือ่ หน่วย การออกแบบและใช้โปรแกรมกราฟิกเสรมิ ในการสรา้ ง ชว่ั โมงรวม 28 ช.ม.

เว็บไซต์

ชือ่ เรอ่ื ง การออกแบบส่วนประกอบของเว็บไซต์ โปรแกรมกราฟิกท่ีนิยมใชใ้ นการออกแบบ จานวน 8 ช.ม.

เว็บไซต์ การใช้โปรแกรม Adobe Photoshop CC 2018 ในการออกแบบเว็บไซต์ การ

บันทกึ ไฟลภ์ าพกราฟิกสาหรับเว็บไซต์ การใช้โปรแกรม Adobe Animate CC 2018 ใน

การออกแบบเวบ็ ไซต์ การบนั ทึกไฟลภ์ าพเคลอื่ นไหวสาหรบั เวบ็ ไซต์

แบบฝกึ หัดหน่วยท่ี 4 การออกแบบและใชโ้ ปรแกรมกราฟิกเสริมในการสร้างเวบ็ ไซต์

…………………………………………………………….........................................................................................

คาสง่ั จงตอบคาถามตอ่ ไปน้ีใหไ้ ดใ้ จความสมบูรณ์

15. ส่วนประกอบของหน้าเวบ็ มีอะไรบ้าง
ตอบ ส่วนประกอบของหน้าเว็บแบ่งออกเปน็ 3 ส่วนดงั นี 1) สว่ นหัวของหน้า (Page Header) เป็นส่วนทีถ่ ูก
ออกแบบมาให้อยดู่ ้านบนสุดของ 2) ส่วนเนือหา (Page Body) เป็นส่วนท่ีอยู่ตอนกลางของหน้าเว็บ ใชแ้ สดงข้อมลู
เนือหาของเว็บไซต์ 3) สว่ นท้ายของหน้า (Page Footer) เป็นส่วนที่อยู่ด้านล่างสุดของหน้าเว็บ
............................................................................................................................. ...........................

16. จุดเด่นของโปรแกรม Adobe Photoshop CC คอื อะไร
ตอบ โปรแกรมสาหรบั กราฟิกถือเป็นโปรแกรมทส่ี าคัญมากของผู้ท่ีทางานเก่ียวกบั ภาพถ่าย นักออกแบบ นัก
ดไี ซน์ นักทาโฆษณา สถาปนิค และอาชีพอ่ืนๆ
.................................................. .................................................................................................. ....

17.จุดเดน่ ของโปรแกรม Adobe Animate CC คอื อะไร
ตอบ ถูกสร้างขนึ เพอื่ พัฒนาไฟล์ภาพเคล่ือนไหว หรือ อนเิ มชนั่ บนเวบ็ ไซต์ ทเี่ รยี กกันวา่ "Web Animation" และ
ยังสามารถสร้าง Interactive หรือการโต้ตอบกับผู้เข้าเย่ียมชมเวบ็ ไซต์บนเวบ็ ไซต์ตา่ ง ๆ
............................................................................................................................. ...........................

18. จงบอกขันตอนการบันทึกไฟล์ภาพกราฟิกสาหรบั เว็บไซต์
ตอบ 1. คลิกท่ีเมนู File >Export >Save for Web(Legacy)
2. ปรากฏหน้าจอ Save for Web ปรับค่า Preset: JPEG High คลิก Save
3. จะปรากฏหน้าจอ Save Optimized As ตังชอ่ื header คลิก Save
4. จะปรากฏกล่องข้อความแจง้ เตือนชอื่ ไฟล์ถูกบนั ทึกมีอกั ขระท่ีไมใ่ ช่ละตนิ ช่อื ไฟลเ์ หล่านีจะเขา้ กนั ไม่ได้

กบั เวบ็ เบราว์เซอร์และเซริ ์ฟเวอรบ์ างตัว คลิก OK
5. จะได้ไฟลภ์ าพหวั เวบ็ เพื่อเตรยี มใชใ้ นขันตอนต่อไปดังรปู

........................................................................................................................................................
19. จงบอกขันตอนการบันทึกไฟล์ภาพเคลือ่ นไหวกราฟิกสาหรับเวบ็ ไซต์

ตอบ การบันทึกไฟลภ์ าพเคล่อื นไหวสาหรับเวบ็ ไซต์ มีขนั ตอนดังนี

1. คลิกที่เมนู File> Export Movie

2. ตังช่ือไฟล์ head.swf เลือกตาแหน่งที่เก็บไฟล์ คลิก save

แผนการสอน หนว่ ยที่ 4

ช่ือวิชา การสร้างเว็บไซต์ (Website Creation) สอนครัง้ ท่ี 6-7

ชอ่ื หน่วย การออกแบบและใช้โปรแกรมกราฟกิ เสริมในการสรา้ ง ชัว่ โมงรวม 28 ช.ม.

เวบ็ ไซต์

ชอ่ื เรอ่ื ง การออกแบบส่วนประกอบของเวบ็ ไซต์ โปรแกรมกราฟิกทน่ี ยิ มใช้ในการออกแบบ จานวน 8 ช.ม.

เวบ็ ไซต์ การใชโ้ ปรแกรม Adobe Photoshop CC 2018 ในการออกแบบเว็บไซต์ การ

บันทึกไฟลภ์ าพกราฟิกสาหรับเว็บไซต์ การใช้โปรแกรม Adobe Animate CC 2018 ใน

การออกแบบเว็บไซต์ การบันทกึ ไฟลภ์ าพเคลอื่ นไหวสาหรับเวบ็ ไซต์

แบบทดสอบหลงั เรียน

หน่วยที่ 4 การออกแบบและใชโ้ ปรแกรมกราฟกิ เสรมิ ในการสร้างเว็บไซต์

จงทาเครื่องหมาย (X) ทบั ตัวเลือกท่ถี ูกต้อง

1. สว่ นของโลโก้ ชอื่ เวบ็ ไซต์นยิ มกาหนดไวใ้ นสว่ นใดของการออกแบบเวบ็ เพจ
ก. Page Header ข. Page Body
ค. Page Footer ง. Side Bar

2. ส่วนใดตอ่ ไปนีทอ่ี อกแบบใหเ้ ปน็ ส่วนท่ีใช้สาหรบั ใส่ข้อมูลเนอื หา ขอ้ ความ รูปภาพให้เวบ็ เพจ
ก. Page Header
ข. Page Body
ค. Page Footer
ง. Side Bar

3. โปรแกรม Adobe Photoshop CC เป็นโปรแกรมสาหรบั ปฏบิ ตั กิ ารใด
ก. สร้าง Animation แบบ 3 มติ ิ
ข. ตกแตง่ แกไ้ ข และออกแบบภาพกราฟกิ ต่าง ๆ
ค. คานวณโครงสร้างและวัสดุ
ง. ออกแบบและพัฒนาเว็บไซต์

4. หากต้องการใส่สีในรูปร่างควรเลอื กใช้เครือ่ งมือใด
ก. Rectangular Marquee Tool
ข. Rounded Rectangle Tool
ค. Color Picker
ง. Paint Tool

5. โปรแกรม Adobe Animate CC เป็นโปรแกรมสาหรบั ปฏิบตั ิการใด
ก. ตดั ต่อวดี โี อ
ข. สรา้ งภาพเคลอื่ นไหว
ค. ตัดแต่งภาพ
ง. สร้างเอกสาร

แผนการสอน หน่วยท่ี 4
สอนครัง้ ที่ 6-7
ชอ่ื วิชา การสร้างเวบ็ ไซต์ (Website Creation) ชั่วโมงรวม 28 ช.ม.

ชื่อหน่วย การออกแบบและใชโ้ ปรแกรมกราฟิกเสรมิ ในการสร้าง จานวน 8 ช.ม.
เวบ็ ไซต์

ชอ่ื เรือ่ ง การออกแบบส่วนประกอบของเวบ็ ไซต์ โปรแกรมกราฟิกทน่ี ิยมใช้ในการออกแบบ
เวบ็ ไซต์ การใช้โปรแกรม Adobe Photoshop CC 2018 ในการออกแบบเว็บไซต์ การ
บนั ทกึ ไฟล์ภาพกราฟิกสาหรับเว็บไซต์ การใช้โปรแกรม Adobe Animate CC 2018 ใน
การออกแบบเว็บไซต์ การบันทกึ ไฟลภ์ าพเคลือ่ นไหวสาหรับเวบ็ ไซต์

6. ขอ้ ใดตอ่ ไปนีคือคุณสมบตั ิใหมข่ องโปรแกรม Adobe Photoshop CC
ก. แกไ้ ขครังเดยี วอัปเดตทุกที่ทีม่ ี Assets
ข. ความเรว็ ในการสง่ ออกเร็วขนึ
ค. สนับสนนุ การแสดงของ Windows HiDPI
ง. ถกู ทกุ ข้อ

7. หากตอ้ งการปรับขนาดรูปภาพจะใช้เคร่ืองมอื ใด
ก. Free Transform
ข. Move Tool
ค. Color Picker
ง. Paint Tool

8. การบนั ทกึ ไฟลภ์ าพกราฟิกสาหรับเวบ็ ไซต์ในโปรแกรม Photoshop ใชเ้ มนใู ด
ก. Save
ข. Save As
ค. Save As Web
ง. Save for Web(Legacy)

9. โปรแกรม Adobe Photoshop CC ผลิตโดย บรษิ ทั ใด
ก. แมโครมีเดีย
ข. ไมโครซอฟต์
ค. ซันด์ ซสิ เตม็ ส์
ง. อะโดบซี ิสเต็มส์

10. การบนั ทกึ ไฟล์ภาพเคล่ือนไหวสามารถใชเ้ มนใู ด
ก. File> Export Movie
ข. File> Export Images
ค. File> Export for web
ง. File> Save As

แผนการสอน หน่วยที่ 5

ช่อื วิชา การสร้างเวบ็ ไซต์ (Website Creation) สอนครงั้ ท่ี 8

ช่อื หน่วย การติดตง้ั และใช้งานโปรแกรม Adobe Dreamweaver CC ชั่วโมงรวม32 ช.ม.

2018

ชื่อเรอื่ ง รจู้ กั กบั โปรแกรม Adobe Dreamweaver CC 2018 การตดิ ตังโปรแกรม จานวน 4 ช.ม.

Adobe Dreamweaver CC 2018 สว่ นประกอบต่าง ๆ ของโปรแกรม

5. สาระสาคญั

ปัจจุบันการเคร่ืองมือในการสร้างเว็บไซต์มีหลายโปรแกรม และโปรแกรม Adobe Dreamweaver CC
เป็นอีกโปรแกรมหนึ่งที่ง่ายสะดวกในการสร้างเว็บไซต์เพราะมีเครื่องมือมากมายท่ีคอยสนับสนุนการทางานทาให้
สามารถสร้างเว็บไซต์อย่างง่ายดายสาหรบั เนือหาในหน่วยนีจะประกอบไปด้วยการทาความรู้จักกับโปรแกรม Adobe
Dreamweaver CC 2018 การติดตังโปรแกรม Adobe Dreamweaver CC 2018 ส่วนประกอบต่าง ๆ ของ
โปรแกรม Adobe Dreamweaver CC 2018 เพ่ือเป็นพืนฐานในการใช้งานโปรแกรมในการสร้างเว็บไซต์ในหน่วย
ตอ่ ไป

2. หัวเรอื่ ง/รายการสอน/สาระการเรียนรู้
1. รจู้ ักกบั โปรแกรม Adobe Dreamweaver CC 2018
2. การตดิ ตงั โปรแกรม Adobe Dreamweaver CC 2018
3. สว่ นประกอบต่าง ๆ ของโปรแกรม Adobe Dreamweaver CC 2018

3. สมรรถนะอาชีพประจาหนว่ ย
แสดงความรู้เกี่ยวกับโปรแกรม Adobe Dreamweaver CC 2018 การตดิ ตงั โปรแกรมและ
ส่วนประกอบตา่ ง ๆ ของโปรแกรม

4. จดุ ประสงคก์ ารเรยี นรู้
จดุ ประสงคท์ ั่วไป
4. มคี วามร้เู กยี่ วกบั โปรแกรม Adobe Dreamweaver CC 2018
5. สามารถตดิ ตังโปรแกรม Adobe Dreamweaver CC 2018 ได้
6. บอกสว่ นประกอบตา่ ง ๆ ของโปรแกรม Adobe Dreamweaver CC 2018 ได้

จดุ ประสงค์เชิงพฤติกรรม
1. สามารถบอกเกยี่ วกับโปรแกรม Adobe Dreamweaver CC 2018
2. ตดิ ตงั โปรแกรม Adobe Dreamweaver CC 2018 ได้
3. บอกสว่ นประกอบตา่ ง ๆ ของโปรแกรม Adobe Dreamweaver CC 2018 ได้

แผนการสอน หน่วยท่ี 5

ช่ือวิชา การสรา้ งเวบ็ ไซต์ (Website Creation) สอนครงั้ ที่ 8

ชื่อหน่วย การติดตั้งและใชง้ านโปรแกรม Adobe Dreamweaver CC ชั่วโมงรวม 32 ช.ม.

2018

ชอื่ เรอื่ ง ร้จู ักกบั โปรแกรม Adobe Dreamweaver CC 2018 การตดิ ตงั โปรแกรม จานวน 4 ช.ม.

Adobe Dreamweaver CC 2018 สว่ นประกอบตา่ ง ๆ ของโปรแกรม

10. การบรู ณาการหลกั ปรชั ญาของเศรษฐกิจพอเพยี ง เงอ่ื นไขคณุ ธรรม

เงือ่ นไขความรู้ 21. มคี วามอดทน
22. มคี วามขยัน
แสดงความรูเ้ กยี่ วกบั โปรแกรม Adobe 23. มีความรับผิดชอบ
Dreamweaver CC 2018 การตดิ ตังโปรแกรม 24. มีความมวี นิ ยั ในการเรยี น
และส่วนประกอบตา่ ง ๆ ของโปรแกรม 25. มีจริยธรรมในการเรียนคอมพวิ เตอร์

พอประมาณ

1.จานวนผเู้ รียน

2. ระยะเวลาในการเรยี นการสอน

มเี หตุผล 3. การใช้ทรัพยากรร่วมกนั มภี มู คมุ้ กัน
1. ลดเวลาในการปฏิบตั งิ าน 1. ประหยดั คา่ ใช้จา่ ย
2. ประมาณการเหตกุ ารณ์ต่าง ๆ 2. มคี วามรอบคอบในการทางาน
3.ลดขนั ตอนในการทางาน

4. เขา้ ใจงานและระบบการทางาน

สังคม วัฒนธรรม
13. สรา้ งความสัมพนั ธ์ทีด่ ีในกลุ่มผู้เรียน 9. มมี รรยาทในการเรยี น
14. ชว่ ยเหลือกันในการทางานใหต้ รงเวลา 10. มสี ัมมาคาระตอ่ ครูผูส้ อนและผู้อาวโุ ส
15. มีความรบั ผดิ ชอบในการใชเ้ ครือ่ ง
คอมพิวเตอร์ กวา่

สง่ิ แวดล้อม สมดลุ /พรอ้ มรับการเปลยี่ นแปลง
13. รกั ษาความสะอาดในหอ้ งเรยี น ใช้เครอื่ งคอมพิวเตอร์ทมี่ ใี ห้คมุ้ คา่ และเปน็
14. ดูแลรักษาเครอื่ งคอมพวิ เตอร์ให้สะอาด ประโยชนส์ ูงสดุ ต่อผเู้ รียน

เสมอ
15. ปดิ ไฟ ปดิ เครื่องเม่ือเลิกใช้งาน

ศาสตร์พระราชา

หลกั การทรงงาน ศาสตรส์ ากล ศาสตรภ์ มู ปิ ัญญา

1. การมสี ว่ นรว่ ม 1. ความมีเหตผุ ล 1. รกั ษาส่งิ แวดล้อม
2. ประยกุ ตก์ ารเรียนรูท้ ่หี ลากหลาย
2. ศกึ ษาขอ้ มูลอย่างเป็นระบบ 2. รอบรู้ 3. .พรอ้ มปรบั เปลยี่ นตามสถานการณ์

3. ทางานอย่างมคี วามสขุ 3. มีสติ

แผนการสอน หนว่ ยท่ี 5

ช่อื วิชา การสรา้ งเวบ็ ไซต์ (Website Creation) สอนคร้งั ที่ 8

ชือ่ หน่วย การตดิ ตงั้ และใชง้ านโปรแกรม Adobe Dreamweaver CC ช่ัวโมงรวม 32 ช.ม.

2018

ช่อื เรือ่ ง รจู้ ักกับโปรแกรม Adobe Dreamweaver CC 2018 การตดิ ตงั โปรแกรม จานวน 4 ช.ม.

Adobe Dreamweaver CC 2018 สว่ นประกอบต่าง ๆ ของโปรแกรม

6. กจิ กรรมการเรียนการสอน
ขน้ั ตอนการสอนหรือกจิ กรรมของครู
ขั้นเตรยี มการ
13. ครเู ตรยี มเอกสารการสอน Power point การสอน
14. ครูเช็คชอื่ การเข้าห้องเรียน
15. นักเรียนตรวจสอบอุปกรณภ์ ายในห้องเรยี น
ขั้นนา
7. ครูสอบถามผู้เรยี นเร่ืองพืนฐานการใชโ้ ปรแกรมต่าง ๆ ในการสร้างเว็บไซต์
8. ครูเลา่ ถึงขนั ตอนกระบวนการในการสร้างชนิ งาน การส่งงานและยกตวั อยา่ งชนิ งานทสี่ าเรจ็ ใหผ้ ู้เรียนดู
ขน้ั สอน
ทฤษฎี
ครเู ปิดสื่อการสอน PowerPoint หนว่ ยท่ี 5 เร่ือง การติดตงั และใชง้ านโปรแกรม Adobe
Dreamweaver CC 2018 โดยครผู ้สู อนสาธิตวิธกี ารติดตงั โปรแกรมใหผ้ ู้เรียนปฏิบตั กิ ารตาม
ปฏิบัต
17.ผสู้ อนให้ผู้เรียนทาแบบทดสอบก่อนเรียน
18.ผ้สู อนใหผ้ เู้ รยี นทาใบงานที่ 5 ใบงานท่ี 5 การติดตังและใช้งานโปรแกรม Adobe Dreamweaver CC
2018 ผู้สอนใหผ้ เู้ รยี นทาแบบฝึกหัด หนว่ ยที่ 5
19.ผสู้ อนให้ผเู้ รียนทาแบบทดสอบหลังเรียน

ขั้นสรปุ
9. ผสู้ อนและผเู้ รียนร่วมกนั สรุปเนอื หาท่ีไดเ้ รียนใหม้ ีความเขา้ ใจในทิศทางเดียวกนั
10. ผสู้ อนให้ผู้เรียนศกึ ษาเพ่ิมเตมิ นอกห้องเรยี น ด้วยบทเรียนช่วยสอนทจ่ี ดั ทาขนึ

7. ส่ือและแหล่งการเรียนรู้
16.หนังสอื เรียนวชิ า การสร้างเวบ็ ไซต์
17.แบบประเมนิ ผลการเรียนรกู้ อ่ นเรียน/หลังเรียนพรอ้ มเฉลย

สือ่ การสอน Power Point หนว่ ยการเรยี นรทู้ ี่5 การติดตงั และใชง้ านโปรแกรม Adobe Dreamweaver CC2018
18.ส่อื การสอน www.kruwipawee.com

แผนการสอน หน่วยที่ 5

ชื่อวิชา การสรา้ งเวบ็ ไซต์ (Website Creation) สอนครงั้ ที่ 8

ชอื่ หน่วย การตดิ ตั้งและใช้งานโปรแกรม Adobe Dreamweaver CC ชว่ั โมงรวม 32 ช.ม.

2018

ช่อื เร่ือง รู้จกั กบั โปรแกรม Adobe Dreamweaver CC 2018 การตดิ ตังโปรแกรม จานวน 4 ช.ม.

Adobe Dreamweaver CC 2018 สว่ นประกอบต่าง ๆ ของโปรแกรม

8. วัดและประเมินผล

8.1 เคร่ืองมือประเมนิ

8.8.1 ตรวจแบบประเมนิ ผลการเรียนรกู้ อ่ นเรยี น

8.1.2 สงั เกตพฤติกรรมการปฏบิ ตั งิ าน

8.2 เกณฑ์การประเมนิ

เกณฑ์การประเมนิ ตามแบบทดสอบประจาหนว่ ยและแบบประเมินช้ินงาน

เกณฑ์การประเมิน ผลการประเมิน

ระดับคะแนน ร้อยละ 80-100 ระดบั ดีมาก

ระดบั คะแนน รอ้ ยละ 70-79 ระดบั ดี

ระดับคะแนน รอ้ ยละ 60-69 ระดับปานกลาง

ระดับคะแนน ร้อยละ 50-59 ระดับผา่ นเกณฑ์

ระดับคะแนน ตา่ กวา่ รอ้ ยละ 50 ไม่ผา่ นเกณฑ์การประเมนิ

หมายเหตุ คะแนนในการประเมิน มคี ะแนนเต็มเท่ากับ 5 คะแนน

แผนการสอน หน่วยที่ 5

ชอ่ื วิชา การสรา้ งเวบ็ ไซต์ (Website Creation) สอนคร้ังท่ี 8

ช่ือหน่วย การตดิ ตงั้ และใช้งานโปรแกรม Adobe Dreamweaver CC ชั่วโมงรวม32 ช.ม.

2018

ชอ่ื เรอ่ื ง รู้จักกบั โปรแกรม Adobe Dreamweaver CC 2018 การตดิ ตังโปรแกรม จานวน 4 ช.ม.

Adobe Dreamweaver CC 2018 สว่ นประกอบต่าง ๆ ของโปรแกรม

5.1 รู้จักกับโปรแกรม Adobe Dreamweaver CC 2018

Adobe Dreamweaver CC เป็นหนึ่งในชุด โปรแกรม Adobe Creative Cloud เป็นโปรแกรมท่ีมี

เครือ่ งมือในการสร้างเว็บไซต์คณุ ภาพสงู มีเคร่ืองมอื หลายๆ ช่วยให้สามารถสร้างเวบ็ ไซต์ได้สะดวกสะบายขึนเพ่ือใช้ใน

การเขยี นเวบ็ เพจ

5.1.1 คณุ สมบัติใหมข่ องโปรแกรม

1. ชุดงานท่สี ง่ ออกจาก PSDs

2. สรา้ งเวบ็ ไซตท์ ่ปี รับให้พอดกี บั ขนาดหนา้ จอหลายตวั

3. การทดสอบ และการตรวจสอบเวบ็ ไซต์บนอปุ กรณ์หลายคนพร้อมกัน

4. รูปแบบการแกไ้ ขโคด้ ใหม่

5. รองรับ CSS3 และHTML5

6. รองรบั การแสดงผลตวั อย่างรหัสคาสงั่ (hinting) ภาษา PHP รวมไปถึง Ajax และJavaScript

7. สามารถฝังฟอนตล์ งไปในเว็บไซตใ์ นรูปแบบของเว็บฟอนต์ (Web Font) ได้

8. ค้นหาภาพท่ีสมบูรณ์แบบสาหรบั เวบ็ ไซต์ใน Adobe Stock marketplace.

5.1.2 ความต้องการพืน้ ฐานในการติดตั้งโปรแกรม

ระบบปฏิบตั ิการ Windows ระบบปฏบิ ตั กิ าร Mac OS

- ซีพียู Intel® Core ™ i3 และใหม่กวา่ - ซพี ียู Multicore Intel พร้อมรองรบั 64 บิต

- ระบบปฏบิ ัตกิ าร Microsoft Windows 7 ทมี่ ี - ระบบปฏิบัติการ macOS v10.12 หรือ OS X

Service Pack 1, Windows 8.1 หรอื Windows v10.11 หรอื v10.10

10 - RAM 2 GB

- RAM 2 GB - เนือที่ว่างในฮาร์ดดิสก์ 1.1 GB สาหรับการติดตัง

- เนือที่ว่างบนฮาร์ดดสิ ก์ 1.1 GB สาหรับการตดิ ตัง พืนท่ีว่างเพิ่มเติมท่ีจาเป็นในระหว่างการติดตัง (ไม่

ต้องการพืนทว่ี า่ งเพ่มิ เตมิ ในระหวา่ งการตดิ ตัง (ไม่ สามารถติดตังบนไดรฟ์ที่ใช้ระบบตัวพิมพ์เล็กใหญ่หรือ

สามารถตดิ ตงั บนอุปกรณ์เก็บข้อมลู แฟลชแบบถอดได้) อุปกรณเ์ ก็บขอ้ มูลแฟลชแบบถอดได้)

- จอแสดงผล 1280x1024 พรอ้ มการ์ดแสดงผล - จอแสดงผล 1280x1024 พร้อมการ์ดแสดงผล

16 บิต 16 บิต

- การเชื่อมต่ออินเทอร์เน็ตและการลงทะเบียนเป็น - การเช่ือมต่ออินเทอร์เน็ตและการลงทะเบียนเป็น

ส่ิงจาเป็นสาหรับการเปิดใช้งานซอฟต์แวร์ท่ีต้องการ สิ่งจาเป็นสาหรับการเปิดใช้งานซอฟต์แวร์ท่ีต้องการ

การตรวจสอบความถูกต้องของการสมัครสมาชิกและ การตรวจสอบความถูกต้องของการสมัครสมาชิกและ

การเข้าถึงบริการออนไลน์ การเข้าถึงบริการออนไลน์

แผนการสอน หนว่ ยท่ี 5

ช่อื วิชา การสรา้ งเวบ็ ไซต์ (Website Creation) สอนครงั้ ท่ี 8

ชือ่ หน่วย การติดต้ังและใช้งานโปรแกรม Adobe Dreamweaver CC ชว่ั โมงรวม 32 ช.ม.

2018

ช่อื เร่อื ง รจู้ กั กับโปรแกรม Adobe Dreamweaver CC 2018 การติดตังโปรแกรม จานวน 4 ช.ม.

Adobe Dreamweaver CC 2018 ส่วนประกอบต่าง ๆ ของโปรแกรม

5.2 การตดิ ตงั้ โปรแกรม Adobe Dreamweaver CC 2018

การดาวน์โหลดโปรแกรม Adobe Dreamweaver CC 2018 สามารถทาไดโ้ ดยคลิกทีเ่ ว็บไซต์

https://www.adobe.com/sea/products/catalog.html เพ่ือเลอื กโปรแกรมในการดาวนโ์ หลดได้

คลกิ เลือกโปรแกรม Dreamweaver สามารถเลือกดาวนโ์ หลดโดยการซือ Buy now จะได้โปรแกรมที่

สามารถใชง้ านไดต้ ลอดไป หรือดาวนโ์ หลดโดยใชเ้ วอร์ชัน่ ทดลอง (Download trial) ใช้ซ่ึงโปรแกรม

ของบริษัท Adobe มีนโยบายไมต่ ดั ฟีเจอร์ใด ๆ ของโปรแกรมออกเลย แตม่ รี ะยะเวลาการทดลองใช้

7 วนั โปรแกรมจะนบั วนั ตงั แตก่ ารตดิ ตงั หากอยากใช้งานต้องมีค่าใชจ้ า่ ยในการตอ่ อายโุ ปรแกรม การ

ตดิ ตงั โปรแกรม Adobe Dreamweaver CC 2018

แผนการสอน หนว่ ยที่ 5

ช่ือวิชา การสร้างเว็บไซต์ (Website Creation) สอนครงั้ ท่ี 8

ช่ือหน่วย การติดตั้งและใช้งานโปรแกรม Adobe Dreamweaver CC ช่วั โมงรวม 32ช.ม.

2018

ชอ่ื เร่อื ง รู้จกั กบั โปรแกรม Adobe Dreamweaver CC 2018 การตดิ ตงั โปรแกรม จานวน 4 ช.ม.

Adobe Dreamweaver CC 2018 ส่วนประกอบต่าง ๆ ของโปรแกรม

ใบงานท่ี 5 การตดิ ต้ังและใช้งานโปรแกรม Adobe Dreamweaver CC 2018

คาชี้แจง : ใหน้ ักเรยี นติดตงั โปรแกรม Adobe Dreamweaver CC 2018 เปดิ หนา้ จอการทางานของโปรแกรม

พรอ้ มบอกสว่ นประกอบต่าง ๆ ของโปรแกรม Adobe Dreamweaver CC 2018

1
2

4 3
6 5

……………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………

แผนการสอน หนว่ ยท่ี 5

ช่ือวิชา การสร้างเวบ็ ไซต์ (Website Creation) สอนครัง้ ท่ี 8

ชื่อหน่วย การตดิ ตั้งและใช้งานโปรแกรม Adobe Dreamweaver CC ช่ัวโมงรวม 32 ช.ม.

2018

ชือ่ เร่อื ง รจู้ กั กบั โปรแกรม Adobe Dreamweaver CC 2018 การตดิ ตงั โปรแกรม จานวน 4 ช.ม.

Adobe Dreamweaver CC 2018 สว่ นประกอบต่าง ๆ ของโปรแกรม

แบบฝกึ หัดหน่วยท่ี 5 การติดตง้ั และใช้งานโปรแกรม Adobe Dreamweaver CC 2018

คาสง่ั จงตอบคาถามตอ่ ไปน้ีให้ไดใ้ จความสมบูรณ์

20. โปรแกรม Adobe Dreamweaver CC คือโปรแกรมทีท่ าหนา้ ทีอ่ ะไร
ตอบ เป็นโปรแกรมทม่ี เี คร่ืองมือในการสรา้ งเว็บไซต์คุณภาพสงู มีเคร่ืองมือหลายๆ ชว่ ยใหส้ ามารถสร้างเว็บไซต์

ไดส้ ะดวกสะบายขนึ เพื่อใชใ้ นการเขยี นเวบ็ เพจ หรือเวบ็ ไซต์
................................................................................................................ ........................................

21. จงบอกคุณสมบตั ิใหมข่ องโปรแกรม Adobe Dreamweaver CC มา 3 คณุ สมบัติ
ตอบ 1. ชดุ งานท่สี ง่ ออกจาก PSDs 2. สรา้ งเวบ็ ไซต์ทีป่ รบั ให้พอดีกับขนาดหน้าจอหลายตัว

3. การทดสอบ และการตรวจสอบเว็บไซตบ์ นอปุ กรณ์หลายคนพรอ้ มกัน 4. รูปแบบการแก้ไขโค้ดใหม่
5. รองรบั CSS3 และHTML5 6.รองรับการแสดงผลตัวอย่างรหัสคาส่ัง (hinting) 7. สามารถฝงั ฟอนตล์ งไปใน
เว็บไซต์ในรปู แบบของเว็บฟอนต์ (Web Font) ได้ 8. ค้นหาภาพท่ีสมบูรณ์แบบสาหรับเวบ็ ไซตใ์ น Adobe
Stock

.................................................................................................................................................... ....

22. จงบอกขนั ตอนการตดิ ตังโปรแกรม Adobe Dreamweaver CC
ตอบ ดาวนโ์ หลดและติดตงั โปรแกรม Creative Cloud apps ตดิ ตงั และลงชอ่ื เข้าใชง้ าน เมอ่ื ติดตงั เสร็จเรยี บร้อย
จะแสดงหน้าจอ Creative Cloud แสดงโปรแกรมตา่ ง ๆ ของบริษัท Adobe ที่สามารถดาวน์โหลดมาใชง้ านได้ ใน
หน่วยนจี ะใช้เวอรช์ ่ันทดลองใช้ (Try) คลิกโปรแกรม Dreamweaver CC คลกิ ปมุ่ Try รอสกั ครู่โปรแกรม
Creative Cloud กาลังทาการติดตังโปรแกรม Dreamweaver CCเม่อื ติดตังเสรจ็ เรยี บร้อย คลิกปุ่ม Start Trial
............................................................................................................................. ...........................

23. มุมมองการทางานโปรแกรม Adobe Dreamweaver CC 2018
ตอบ 1. Design คือ มุมมองออกแบบ 2. Split เป็นส่วนมุมมองท่ีแสดงผลและแสดงคาส่ัง 3. Code เป็นสว่ นมุมมอง

ท่แี สดงผลเฉพาะคาสัง่ 4. Live เปน็ การแสดงผลเวบ็ ไซต์ในโปรแกรม
........................................................................................................................................................

24. กลุ่มคาสั่งในแถบเครื่องมือ (insert panel) มอี ะไรบ้าง
ตอบ HTML Form Templates Bootstrap components jQuery Mobile jQuery UI Favorites

.................................................................................................................................................. .....

แผนการสอน หน่วยท่ี 5

ชอ่ื วิชา การสร้างเว็บไซต์ (Website Creation) สอนครั้งที่ 8

ชื่อหน่วย การตดิ ตง้ั และใชง้ านโปรแกรม Adobe Dreamweaver CC ช่วั โมงรวม 32 ช.ม.

2018

ชื่อเรือ่ ง รู้จกั กบั โปรแกรม Adobe Dreamweaver CC 2018 การตดิ ตงั โปรแกรม จานวน 4 ช.ม.

Adobe Dreamweaver CC 2018 สว่ นประกอบต่าง ๆ ของโปรแกรม

หน่วยที่ 5 การตดิ ตัง้ และใชง้ านโปรแกรม Adobe Dreamweaver CC 2018

จงทาเคร่ืองหมาย (X) ทบั ตัวเลอื กทถ่ี ูกตอ้ ง

1. ข้อใดต่อไปนคี ือคุณสมบตั ใิ หมข่ อง Adobe Dreamweaver CC 2018
ก. สร้างเวบ็ ไซตท์ ่ีปรับให้พอดีกับขนาดหน้าจอหลายตัว
ข. มุมมอง Live View ท่ใี ชใ้ นการทดสอบการแสดงผล
ค. Code Hinting ชว่ ยในการเขียนชดุ คาสง่ั
ง. ถกู ทุกข้อ

2. ทห่ี น้าจอ สรา้ งเอกสารใหม่ของ Adobe Dreamweaver CC 2018 ถ้าต้องการสร้างงานใหม่ข้อใดถูกตอ้ ง
ก. Open a Recent Item
ข. Create
ค. Top Features(Videos)
ง. Features

3. ข้อใดขันตอนแรกในการติดตงั โปรแกรม Adobe Dreamweaver CC 2018
ก. ดาวน์โหลดและติดตังโปรแกรม Creative Cloud apps
ข. ดับเบลิ คลิก setup.exe
ค. ลงทะเบยี น Adobe ID คลิกปมุ่ Sign up
ง. คลกิ ปุ่ม Start Trial

4. โปรแกรม Adobe Dreamweaver CC 2018 ในร่นุ ทดลองใช้ไดก้ ว่ี นั

ก. 90 วัน
ข. 30 วัน
ค. 15 วัน
ง. 7 วนั
5.ขอ้ ใดไมใ่ ช่ไฟล์เอกสารท่สี ามารถสร้างไดจ้ ากโปรแกรม Adobe Dreamweaver CC 2018
ก. JSON
ข. XML
ค. SVG
ง. XLS

แผนการสอน หน่วยที่ 5

ชอ่ื วิชา การสรา้ งเวบ็ ไซต์ (Website Creation) สอนครง้ั ที่ 8

ชื่อหน่วย การตดิ ตงั้ และใช้งานโปรแกรม Adobe Dreamweaver CC ช่ัวโมงรวม 32 ช.ม.

2018

ชื่อเรอ่ื ง ร้จู ักกับโปรแกรม Adobe Dreamweaver CC 2018 การตดิ ตงั โปรแกรม จานวน 4 ช.ม.

Adobe Dreamweaver CC 2018 สว่ นประกอบต่าง ๆ ของโปรแกรม

6. ขอ้ ใดไม่ใช่มมุ มองการทางานของโปรแกรม Adobe Dreamweaver CC 2018

ก. Code

ข. Live

ค. design

ง. Space

7. มมุ มองใดต่อไปนีสามารถแก้ไขข้อมลู เนือหา จัดวางเนือหา รปู ภาพ ลงเวบ็ เพจด้วยเคร่อื งมือต่าง ๆ ของโปรแกรม

ก. Design View

ข. Code View

ค. Split

ง. Live View

8. มุมมองใดต่อไปสามารถเห็นทงั การออกแบบและ Code

ก. Design View

ข. Split

ค. Live Code

ง. Live View

9. มุมมองใดตอ่ ไปนีจะแสดงผลเหมอื นกบั การรนั หน้าเวบ็ เพจบนเวบ็ บราวเซอร์

ก. Design

ข. Split

ค. Code

ง. Live

10. หากตอ้ งการสร้าง Mobile Website จะเลอื กใช้เครื่องมือในแถบใด

ก. Form

ข. Bootstrap Components

ค. jQuery Mobile

ง. Templates

แผนการสอน หน่วยที่ 6

ชอื่ วิชา การสรา้ งเวบ็ ไซต์ (Website Creation) สอนคร้ังที่ 9-10

ชอื่ หน่วย การสร้างเว็บไซต์ด้วยโปรแกรม Adobe Dreamweaver ชัว่ โมงรวม 40 ช.ม.

CC 2018

ชื่อเร่ือง การใช้งานโปรแกรม Adobe Dreamweaver CC 2018 การสร้างไซต์การจัดการ จานวน 8 ช.ม.

โครงร่างเวบ็ ไชตด์ ว้ ยตาราง การตงั ค่าการแสดงผลเวบ็ ไซต์ การบนั ทกึ เอกสารเว็บไซต์

6. สาระสาคญั

หลังจากท่ีได้ติดตังโปรแกรมและรู้จักส่วนประกอบต่าง ๆ ของโปรแกรม Adobe Dreamweaver CC

2018 มาแล้วในหน่วยนี ในการสร้างเว็บไซต์จาเป็นต้องมีความรู้เก่ียวกับการใช้งานโปรแกรม Adobe

Dreamweaver ซึ่งเป็นเคร่ืองมือที่จะใช้ในการสร้างเว็บไซต์และจาเป็นต้องมีความรู้ในการบริหารจัดการไฟล์ใน

โปรแกรมหรือการสร้างไซต์ให้กบั ไฟล์ขอ้ มูลและโปรแกรมแกรมการการจัดการโครงร่างเว็บไชตด์ ้วยตาราง การตัง

ค่าการแสดงผลเว็บไซต์และการบันทึกเอกสารเว็บไซต์ เพ่ือให้สามารถสร้างเว็บไซต์ได้อย่างถูกต้องและมี

ประสิทธิภาพ

2. หวั เรือ่ ง/รายการสอน/สาระการเรียนรู้

1. รจู้ กั กับโปรแกรม Adobe Dreamweaver CC 2018

2. การติดตังโปรแกรม Adobe Dreamweaver CC 2018

3. ส่วนประกอบต่าง ๆ ของโปรแกรม Adobe Dreamweaver CC 2018

3. สมรรถนะอาชีพประจาหนว่ ย
แสดงความรูเ้ ก่ยี วกบั การใช้งานโปรแกรม Adobe Dreamweaver CC 2018

4. จดุ ประสงค์การเรียนรู้
จุดประสงคท์ ่ัวไป
1. มคี วามรเู้ กย่ี วกับการใชง้ านโปรแกรม Adobe Dreamweaver CC 2018
2. สรา้ งไซตไ์ ด้
3. จัดการโครงรา่ งเวบ็ ไชต์ด้วยตารางได้
4. ตงั คา่ การแสดงผลเว็บไซต์ได้
5. บนั ทึกเอกสารเวบ็ ไซตไ์ ด้
จุดประสงค์เชิงพฤตกิ รรม
1. อธบิ ายเกีย่ วกับการใช้งานโปรแกรม Adobe Dreamweaver CC 2018 ได้
2. สามารถสรา้ งไซตไ์ ด้
3. สามารถจดั การโครงรา่ งเวบ็ ไชตด์ ว้ ยตารางได้
4. สามารถตงั ค่าการแสดงผลเวบ็ ไซตไ์ ด้
5. สามารถบนั ทกึ เอกสารเวบ็ ไซต์ได้

แผนการสอน หน่วยท่ี 6

ช่อื วิชา การสร้างเวบ็ ไซต์ (Website Creation) สอนคร้ังท่ี 9-10

ช่ือหน่วย การสร้างเว็บไซต์ด้วยโปรแกรม Adobe Dreamweaver ชัว่ โมงรวม 40 ช.ม.

CC 2018

ช่อื เรื่อง การใช้งานโปรแกรม Adobe Dreamweaver CC 2018 การสรา้ งไซต์การจดั การ จานวน 8 ช.ม.

โครงรา่ งเวบ็ ไชต์ด้วยตาราง การตังคา่ การแสดงผลเวบ็ ไซต์ การบันทึกเอกสารเวบ็ ไซต์

11. การบูรณาการหลกั ปรชั ญาของเศรษฐกิจพอเพียง เง่อื นไขคุณธรรม
26. มคี วามอดทน
เงื่อนไขความรู้ 27. มคี วามขยนั
28. มีความรับผดิ ชอบ
แสดงความร้เู กย่ี วกับการใช้งานโปรแกรม 29. มคี วามมวี นิ ยั ในการเรยี น
Adobe Dreamweaver CC 2018 30. มีจริยธรรมในการเรียนคอมพวิ เตอร์

พอประมาณ
1.จานวนผเู้ รียน
2. ระยะเวลาในการเรียนการสอน
3. การใชท้ รพั ยากรรว่ มกัน

มเี หตุผล มภี มู คมุ้ กนั
1. ลดเวลาในการปฏบิ ัตงิ าน 1. ประหยดั ค่าใช้จา่ ย
2. ประมาณการเหตกุ ารณต์ า่ ง ๆ 2. มคี วามรอบคอบในการทางาน
3.ลดขันตอนในการทางาน
4. เขา้ ใจงานและระบบการทางาน

สังคม วฒั นธรรม
16. สรา้ งความสมั พันธ์ทีด่ ใี นกลมุ่ ผู้เรยี น 11. มมี รรยาทในการเรยี น
17. ชว่ ยเหลือกันในการทางานให้ตรงเวลา 12. มสี มั มาคาระตอ่ ครูผ้สู อนและผอู้ าวโุ ส
18. มีความรับผิดชอบในการใช้เครื่อง
คอมพวิ เตอร์ กว่า

สิ่งแวดล้อม สมดลุ /พร้อมรับการเปลี่ยนแปลง
16. รกั ษาความสะอาดในหอ้ งเรยี น ใช้เคร่อื งคอมพวิ เตอร์ทมี่ ีให้คุ้มค่าและเป็น
17. ดูแลรกั ษาเคร่อื งคอมพวิ เตอร์ให้สะอาด ประโยชน์สงู สุดตอ่ ผ้เู รียน

เสมอ
18. ปิดไฟ ปิดเครื่องเมอ่ื เลกิ ใช้งาน

ศาสตร์พระราชา

หลกั การทรงงาน ศาสตรส์ ากล ศาสตร์ภูมปิ ญั ญา

1. การมีส่วนรว่ ม 1. ความมเี หตผุ ล 1. รักษาสิ่งแวดลอ้ ม
2. ประยุกตก์ ารเรยี นรูท้ หี่ ลากหลาย
2. ศึกษาข้อมลู อยา่ งเป็นระบบ 2. รอบรู้ 3. .พรอ้ มปรับเปล่ียนตามสถานการณ์

3. ทางานอย่างมีความสขุ 3. มสี ติ

แผนการสอน หนว่ ยที่ 6

ชอ่ื วิชา การสร้างเว็บไซต์ (Website Creation) สอนครง้ั ท่ี 9-10

ชอ่ื หน่วย การสร้างเวบ็ ไซต์ด้วยโปรแกรม Adobe Dreamweaver ชวั่ โมงรวม 40 ช.ม.

CC 2018

ช่ือเรื่อง การใชง้ านโปรแกรม Adobe Dreamweaver CC 2018 การสร้างไซต์การจัดการ จานวน 8 ช.ม.

โครงรา่ งเวบ็ ไชต์ดว้ ยตาราง การตังคา่ การแสดงผลเวบ็ ไซต์ การบันทึกเอกสารเว็บไซต์

6. กจิ กรรมการเรยี นการสอน
ขนั้ ตอนการสอนหรือกิจกรรมของครู
ข้ันเตรียมการ
16. ครเู ตรยี มเอกสารการสอน Power point การสอน
17. ครูเช็คช่ือการเขา้ ห้องเรยี น
18. นักเรยี นตรวจสอบอปุ กรณ์ภายในหอ้ งเรยี น
ขน้ั นา
9. ครตู รวจสอบชนิ งานการออกแบบส่วนประกอบต่าง ๆของเวบ็ ไซต์ ของผู้เรยี น
10. ครจู ดั ทาระบบจดั เกบ็ งานและแสดงคะแนนการสง่ งานใหผ้ เู้ รยี นตรวจสอบ
ข้ันสอน
ทฤษฎี
ครผู สู้ อนสาธติ การสรา้ งเวบ็ ไซตแ์ ตล่ ะขนั ตอนให้ผู้เรยี นปฏบิ ัติตาม และบันทกึ วธิ กี ารปฏบิ ัตงิ านเผยแพรใ่ ห้
ผ้เู รยี นทบทวนเนอื หาการเรียนรผู้ า่ น เวบ็ ไซต์ www.kruwipawee.com
ปฏิบัต
20.ผ้สู อนใหผ้ ู้เรียนทาแบบทดสอบก่อนเรยี น
21.ผู้สอนให้ผเู้ รยี นทา ใบงานท่ี 6 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรม Adobe Dreamweaver CC 2018
22.ผูส้ อนใหผ้ ู้เรยี นทาแบบฝกึ หัด หนว่ ยท่ี 6
23.ผ้สู อนให้ผู้เรียนทาแบบทดสอบหลังเรียน
24.ผ้สู อนใหผ้ เู้ รยี นปฏิบัติตามเนือหาทคี่ รสู าธิตโดยใชเ้ ร่ืองท่ผี ูเ้ รยี นได้คดั เลือกตามสง่ ผลงานผา่ นกล่มุ
รายวิชาเพื่อใหผ้ ้สู อนบนั ทึกความก้าวหน้าของงาน

ข้นั สรุป
11. ผสู้ อนและผเู้ รยี นร่วมกันสรุปเนอื หาที่ได้เรียนใหม้ ีความเข้าใจในทศิ ทางเดียวกัน
12. ผูส้ อนใหผ้ เู้ รยี นศึกษาเพ่ิมเตมิ นอกห้องเรียน ดว้ ยบทเรียนช่วยสอนทจ่ี ดั ทาขนึ

7. สื่อและแหล่งการเรยี นรู้
19.หนังสือเรียนวิชา การสรา้ งเว็บไซต์
20.แบบประเมนิ ผลการเรียนร้กู อ่ นเรียน/หลังเรยี นพร้อมเฉลย
21.สอ่ื การสอน Power Point หนว่ ยการเรียนรูท้ ่ี6
22.สื่อการสอน www.kruwipawee.com

แผนการสอน หนว่ ยท่ี 6

ช่อื วิชา การสรา้ งเว็บไซต์ (Website Creation) สอนครั้งท่ี 9-10

ชือ่ หน่วย การสรา้ งเว็บไซตด์ ้วยโปรแกรม Adobe Dreamweaver ชวั่ โมงรวม 40 ช.ม.

CC 2018

ชอื่ เร่ือง การใชง้ านโปรแกรม Adobe Dreamweaver CC 2018 การสรา้ งไซต์การจัดการ จานวน 8 ช.ม.

โครงรา่ งเว็บไชตด์ ้วยตาราง การตงั คา่ การแสดงผลเวบ็ ไซต์ การบันทึกเอกสารเวบ็ ไซต์

8. วัดและประเมินผล

8.1 เครอ่ื งมือประเมนิ

8.8.1 ตรวจแบบประเมินผลการเรียนรู้ก่อนเรียน

8.1.2 สังเกตพฤติกรรมการปฏิบัตงิ าน

8.2 เกณฑ์การประเมนิ

เกณฑ์การประเมนิ ตามแบบทดสอบประจาหนว่ ยและแบบประเมนิ ช้นิ งาน

เกณฑก์ ารประเมนิ ผลการประเมนิ

ระดบั คะแนน ร้อยละ 80-100 ระดับดีมาก

ระดับคะแนน รอ้ ยละ 70-79 ระดับดี

ระดับคะแนน รอ้ ยละ 60-69 ระดับปานกลาง

ระดับคะแนน ร้อยละ 50-59 ระดบั ผ่านเกณฑ์

ระดับคะแนน ตา่ กว่า ร้อยละ 50 ไม่ผ่านเกณฑ์การประเมิน

หมายเหตุ คะแนนในการประเมิน มคี ะแนนเต็มเท่ากับ 5 คะแนน

แผนการสอน หน่วยที่ 6

ช่ือวิชา การสร้างเวบ็ ไซต์ (Website Creation) สอนครง้ั ท่ี 9-10

ชอื่ หน่วย การสร้างเวบ็ ไซต์ด้วยโปรแกรม Adobe Dreamweaver ชว่ั โมงรวม 40 ช.ม.

CC 2018

ชือ่ เร่ือง การใชง้ านโปรแกรม Adobe Dreamweaver CC 2018 การสรา้ งไซตก์ ารจดั การ จานวน 8 ช.ม.

โครงรา่ งเว็บไชตด์ ้วยตาราง การตังคา่ การแสดงผลเว็บไซต์ การบนั ทกึ เอกสารเวบ็ ไซต์

6.1 การใชง้ านโปรแกรม Adobe Dreamweaver CC 2018

การใชง้ านโปรแกรม Adobe Dreamweaver CC 2018 ประกอบไปดว้ ย การเขา้ สู่โปรแกรม การปิดโปรแกรม

Adobe Dreamweaver CC 2018 และการสรา้ งเอกสารใหม่

6.1.1 การเขา้ สโู่ ปรแกรม Adobe Dreamweaver CC 2018

การเข้าส่โู ปรแกรม Adobe Dreamweaver CC 2018 สามารถทา ได้ 2 วธิ ี ดงั นี

การเข้าสโู่ ปรแกรมทเ่ี ครื่องมือ Start Menu โดยคลกิ ท่ี Start เลือก Adobe Dreamweaver CC 2018

6.1.2 การปดิ โปรแกรม Adobe Dreamweaver CC 2018

การปดิ โปรแกรมสามารถทาได้ 2 วิธดี งั นี

1. กดปุ่ม Close ทหี่ น้าจอด้านขวามอื โปรแกรม 2. คลกิ ทเี่ มนู File > Exit หรือกดคีย์ลดั ที่แปน้ พิมพ์ Ctrl+ Q

6.1.3 การสร้างเอกสารใหม่

การสร้างเอกสารใหม่จะทาหลงั จากที่ได้เปดิ โปรแกรมขนึ มาแลว้ และเอกสารใหมข่ องโปรแกรม Adobe

Dreamweaver CC 2018 สามารถสร้างไดห้ ลายประเภท แต่การสรา้ งเวบ็ ในหนว่ ยนี จะสร้างเอกสารใหม่ทเี่ ปน็

แบบ HTML และใชร้ ปู แบบ HTML5 หมายถึง ภาษาหลักทีใ่ ชใ้ นการเขียนเว็บเพจ โดยใช้ Tag ในการกาหนดการ

แสดงผล

6.2 การสรา้ งไซต์

การสร้างไซต์เป็นขนั ตอนแรกของการสรา้ งเวบ็ ด้วยโปรแกรม Dreamweaver ซง่ึ เปน็ การกาหนดให้

โปรแกรมทราบท่ีอยขู่ องไฟล์ตา่ งของเว็บไซต์ท่สี รา้ งไว้ เครื่องมือต่าง ๆ ของ Dreamweaver จะทางานโดยอ้างอิงไซต์

ที่กาหนด ไฟล์ทังหมด ทังรปู ภาพ ไฟล์เอกสารตา่ ง ๆ ที่อยู่ในเวบ็ ไซต์ จะถกู รวมอยู่ใน Folder เดียวเรยี ก Folder นัน

วา่ local root folder การสร้างไชต์

6.3 การจดั การโครงร่างเว็บไชตด์ ้วยตาราง

การจัดโครงร่างเว็บไซตด์ ว้ ยตาราง จะชว่ ยในการแสดงข้อมูลหรือองค์ประกอบต่าง ๆ ของเวบ็ ไซต์แสดง

ผลไดต้ รงตามตาแหน่งที่ต้องการ ไม่ว่าจะเปน็ ขอ้ ความ รูปภาพ ปุ่ม เมนู แบบฟอรม์ มลั ติมเี ดียอืน่ ๆ

6.4 การต้ังค่าการแสดงผลเว็บไซต์

การตังคา่ การแสดงผลเว็บไซต์ สามารถทาได้ที่ CSS และ HTML ซงึ่ ทังสองรูปแบบสามารถตังค่าการแสดงผลของ

เว็บไซตไ์ ดเ้ หมอื นกนั ขึนอยกู่ ับผู้สร้างจะเลอื กใช้รปู แบบใดในสว่ นนจี ะตังคา่ การแสดงผลเว็บไซต์โดยใช้ HTML ซง่ึ

มีขันตอนดังนี

1. แถบ Properties คลกิ ปุ่ม Page Properties

2. จะปรากฏหนา้ ต่าง Page Properties เลือกแถบ Appearance (HTML) กาหนดคณุ สมบตั ิตามต้องการ

แผนการสอน หนว่ ยท่ี 6

ช่อื วิชา การสร้างเวบ็ ไซต์ (Website Creation) สอนคร้ังที่ 9-10

ชอ่ื หน่วย การสร้างเวบ็ ไซตด์ ้วยโปรแกรม Adobe Dreamweaver ชวั่ โมงรวม 40 ช.ม.

CC 2018

ชือ่ เรื่อง การใช้งานโปรแกรม Adobe Dreamweaver CC 2018 การสร้างไซตก์ ารจดั การ จานวน 8 ช.ม.

โครงรา่ งเว็บไชต์ด้วยตาราง การตังคา่ การแสดงผลเวบ็ ไซต์ การบันทกึ เอกสารเว็บไซต์

3. จะปรากฏหน้าตา่ ง Page Properties เลือกแถบ Appearance (HTML) กาหนดคณุ สมบตั ิตามต้องการ

ดังนี

- Background image : การกาหนดภาพพนื หลังของเวบ็

- Background : เปน็ การกาหนดสีพนื หลังของเว็บ

- Text : เปน็ การกาหนดสขี องข้อความทั่วไป

- Links : เป็นการกาหนดสีของสีลงิ ก์ในสภาวะปกติ

- Visited Links : เป็นการกาหนดสขี องลงิ กเ์ ม่อื คลิกแลว้

- Active Links : เป็นการกาหนดสีของลงิ ก์ขณะกาลังคลิก

- Left margin : กาหนดระยะของเว็บดา้ นซ้ายห่างจากขอบเว็บเบราวเซอร์

- Top margin : กาหนดระยะของเว็บด้านบนห่างจากขอบเวบ็ เบราวเซอร์

- Margin width : กาหนดความกวา้ งของขอบเว็บด้านซา้ ยห่างจากขอบเวบ็ เบราวเซอร์

- Margin height : กาหนดความสงู ของขอบเวบ็ ด้านบนหา่ งจากขอบเวบ็ เบราวเซอร์

4. กาหนดค่าการแสดงผลตามที่ตอ้ งการ

5. คลกิ Apply เพ่อื ใหแ้ สดงผลทันที

6. เสรจ็ เรียบร้อยคลกิ OK

6.5 การบันทึกเอกสารเว็บไซต์

การบนั ทกึ เอกสารเว็บ สามารถทาไดด้ ังนี

1. คลิกที่เมนู File > Save หรือกดคยี ล์ ัด Ctrl+S

2. ปรากฏกล่องข้อความการบนั ทึกข้อมูล ถา้ ในกรณีต้องการให้แสดงเป็นหน้าแรกของเว็บไซต์ ใหบ้ ันทึกไฟล์

ช่ือ Index.html เพ่อื กาหนดให้หน้าเว็บเพจนีเปน็ หนา้ แรกของระบบเวบ็ ไซต์

หลกั การตัง้ ช่ือไฟล์

ในการตังช่อื ไฟล์เว็บเพจนัน ต้องตังช่ือไฟล์เป็นภาษาอังกฤษ เป็นตัวเล็กทังหมด ไมค่ วรยาวเกินไปและหาก

ต้องการเว้นวรรค ควรค่ันด้วยเครื่องหมาย _ เช่น website_b , web_book เป็นต้น นอกจากนันไฟล์เว็บเพจควร

บนั ทึกให้เปน็ ไฟล์ .html หรือ .htm ถา้ เป็นเวบ็ เพจท่ีถูกเขียนด้วยภาษา Script กส็ ามารถใช้นามสกุลตามภาษานัน ๆ

เช่น ภาษา php จะมนี ามสกุล .php หรือภาษา JavaScript จะมนี ามสกุล .java เป็นตน้

3. คลกิ ปุ่ม Save เพือ่ บันทึกข้อมูล

4. ไฟลท์ ่ีบันทึกแลว้ จะแสดงที่แทบ็

แผนการสอน หน่วยที่ 6

ช่ือวิชา การสร้างเวบ็ ไซต์ (Website Creation) สอนคร้ังที่ 9-10

ช่อื หน่วย การสรา้ งเวบ็ ไซตด์ ้วยโปรแกรม Adobe Dreamweaver ชว่ั โมงรวม 40 ช.ม.

CC 2018

ชอ่ื เรือ่ ง การใชง้ านโปรแกรม Adobe Dreamweaver CC 2018 การสร้างไซต์การจดั การ จานวน 8 ช.ม.

โครงร่างเวบ็ ไชต์ด้วยตาราง การตังค่าการแสดงผลเวบ็ ไซต์ การบันทึกเอกสารเว็บไซต์

ใบงานที่ 6 การสร้างเวบ็ ไซต์ด้วยโปรแกรม Adobe Dreamweaver CC 2018

คาช้ีแจง : ใหน้ ักเรยี นใช้งานโปรแกรม Adobe Dreamweaver CC 2018 สรา้ งไซต์ จดั การโครงรา่ งเว็บไชตด์ ้วย

ตาราง ตังคา่ การแสดงผลเว็บไซตบ์ ันทึกเอกสารเว็บไซต์ บันทกึ ข้อมลู นาเสนอหน้าชนั เรียน

เว็บไซตช์ ่อื
……………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………
วาดโครงร่างเวบ็ ไซต์ประกอบดว้ ย

ช่อื ไซต์

……………………………………………………………………………………………………………………………………………

แหลง่ เกบ็ ข้อมลู

……………………………………………………………………………………………………………………………………………

ลักษณะการแสดงผล

- Background image : ……………………………………………………………………….

- Background : ……………………………………………………………………….

- Text : ……………………………………………………………………….

- Links : ……………………………………………………………………….

- Visited Links : ……………………………………………………………………….

- Active Links : ……………………………………………………………………….

……………………………………………………………………………………………………………………………………………

ชื่อไฟล์หน้าแรกเวบ็ ไซต์ท่บี ันทึก

……………………………………………………………………………………………………………………………………………

……………………………………………………………………………………………………………………………………………………………

……………………………………………………………………………………………………………………………………………………………

แผนการสอน หนว่ ยท่ี 6

ช่ือวิชา การสร้างเว็บไซต์ (Website Creation) สอนคร้งั ที่ 9-10

ชอ่ื หน่วย การสร้างเว็บไซตด์ ้วยโปรแกรม Adobe Dreamweaver ช่วั โมงรวม 40 ช.ม.

CC 2018

ชอื่ เรอ่ื ง การใชง้ านโปรแกรม Adobe Dreamweaver CC 2018 การสร้างไซตก์ ารจดั การ จานวน 8 ช.ม.

โครงรา่ งเวบ็ ไชต์ดว้ ยตาราง การตังค่าการแสดงผลเว็บไซต์ การบันทกึ เอกสารเวบ็ ไซต์

แบบฝกึ หัดหน่วยท่ี 6 การสรา้ งเวบ็ ไซตด์ ว้ ยโปรแกรม Adobe Dreamweaver CC 2018

คาส่ัง จงตอบคาถามตอ่ ไปนี้ให้ไดใ้ จความสมบรู ณ์

1. จงบอกขนั ตอนการเข้าสู่โปรแกรม
ตอบ การเขา้ สโู่ ปรแกรม Adobe Dreamweaver CC 2018 สามารถทาได้ 2 วิธี ดงั นี 1. การเข้าสู่โปรแกรม
ทเี่ ครอ่ื งมือ Start Menu โดยคลิกที่ Start เลือก Adobe Dreamweaver CC 2018 2. การเข้าส่โู ปรแกรม
ที่ Shortcut หน้า Desktop โดยสามารถดบั เบลิ คลกิ ทไ่ี อคอนรูปโปรแกรม Dreamweaver
............................................................................................................................. ...........................

2. จงขันตอนการปิดโปรแกรม
ตอบ 1. กดปมุ่ Close ท่หี นา้ จอด้านขวามือโปรแกรม 2. คลกิ ที่เมนู File > Exit หรือกดคีย์ลดั ที่แป้นพิมพ์
Ctrl+ Q
....................................................................................................................... .................................

3. จงบอกขนั ตอนการสร้างไซต์
ตอบ 1. คลิกที่เมนู Site > New Site
2. จะปรากฏหน้าตา่ งการตงั ค่าไซต์ ที่ Site Name: ตังชือ่ ท่ีตอ้ งการ
3. จะปรากฏหนา้ จอ Choose Root Folder ให้เลอื กโฟลเดอร์ที่ต้องการ กดปุ่ม Select Folder
4. จะปรากฎหนา้ จอ Site Setup for web คลิกปุม่ Save
............................................................................................................................. ...........................

4. อธิบายวธิ ีการสร้างโครงรา่ งเว็บไซต์ดว้ ยตาราง
ตอบ คลิกมุมมอง Design คลิกทีเ่ ครื่องมือตาราง เพื่อสรา้ งตารางในการจัดการโครงรา่ งเวบ็ ไซต์

กาหนดจานวนแถว Rows : 2 แถว กาหนดจานวนคอลัมน์ Columns : 4 คอลัมน์ กาหนดความกวา้ งของ
ตาราง Table width : 1010 pixels คลกิ ok จะได้ตารางทม่ี ขี นาดตามต้องการ

............................................................................................................................. ...........................
5. บอกขันตอนการบันทึกเอกสารเว็บไซต์

ตอบ คลกิ ทีเ่ มนู File > Save หรอื กดคยี ล์ ดั Ctrl+S ปรากฏกล่องขอ้ ความการบนั ทึกข้อมลู ถ้าในกรณี

ต้องการใหแ้ สดงเป็นหนา้ แรกของเว็บไซต์ ใหบ้ ันทึกไฟลช์ อ่ื Index.html คลิกปุ่ม Save เพื่อบนั ทกึ ข้อมูล

.................................................................................................................. ....................................

แผนการสอน หนว่ ยท่ี 6

ชื่อวิชา การสร้างเว็บไซต์ (Website Creation) สอนคร้ังที่ 9-10

ชื่อหน่วย การสร้างเวบ็ ไซตด์ ้วยโปรแกรม Adobe Dreamweaver ช่ัวโมงรวม 40 ช.ม.

CC 2018

ช่ือเร่ือง การใชง้ านโปรแกรม Adobe Dreamweaver CC 2018 การสรา้ งไซต์การจัดการ จานวน 8 ช.ม.

โครงรา่ งเว็บไชต์ด้วยตาราง การตังค่าการแสดงผลเว็บไซต์ การบนั ทึกเอกสารเว็บไซต์

แบบทดสอบหลงั เรยี น

หน่วยท่ี 6 การสร้างเว็บไซตด์ ว้ ยโปรแกรม Adobe Dreamweaver CC 2018

จงทาเครื่องหมาย (X) ทบั ตวั เลอื กที่ถูกตอ้ ง

1. ข้อใดตอ่ ไปนีไมใ่ ชจ่ ดุ ประสงคข์ องการสร้างไซต์ใหม่
ก. สร้างโฟลเดอร์หลักให้กบั เวบ็ ไซต์
ข. จดั เกบ็ ไฟล์ให้เปน็ ระบบ
ค. ทาใหร้ ะบบเว็บไซตม์ ีความรวดเร็วขึน
ง. ทาใหง้ ่ายต่อการเคล่ือนยา้ ยข้อมลู

2. ถ้าตอ้ งการแก้ไขเปลยี่ นแปลงไซตง์ านทไ่ี ด้สรา้ งไวแ้ ลว้ ควรคลิกท่ีเมนูใดต่อไปนี
ก. Site > New Site
ข. Site > Manage Site
ค. Site > Modify > site
ง. Site > Modify > Page Properties

3. หากต้องการออกจากโปรแกรมดว้ ยใชค้ ีย์ลดั ท่ีแป้นพิมพ์ ข้อใดต่อไปนีถกู ต้อง
ก. กด Ctrl + S
ข. กด Ctrl + N
ค. กด Ctrl + X
ง. กด Ctrl + Q

4. ขอ้ ใด คอื การบนั ทึกเวบ็ เพจ โดยการใชแ้ ป้นพิมพ์ทถ่ี ูกตอ้ ง
ก. Ctrl + C
ข. Ctrl + X
ค. Ctrl + W
ง. Ctrl + S

5. Manage Site มคี วามหมายตรงกับข้อใด
ก. สร้างไฟล์ใหม่
ข. การจัดการข้อมูลใหส้ ามารถใชง้ านรว่ มกับผูอ้ ่นื ได้
ค. การเตรยี มพืนทจ่ี ดั เกบ็ ไฟล์เอกสารทงั หมด
ง. สร้างเวบ็ ไซต์ด้วยแม่แบบ

แผนการสอน หนว่ ยท่ี 6

ชือ่ วิชา การสรา้ งเว็บไซต์ (Website Creation) สอนครัง้ ท่ี 9-10

ชอ่ื หน่วย การสรา้ งเวบ็ ไซต์ด้วยโปรแกรม Adobe Dreamweaver ช่วั โมงรวม 40 ช.ม.

CC 2018

ช่อื เร่ือง การใชง้ านโปรแกรม Adobe Dreamweaver CC 2018 การสร้างไซตก์ ารจัดการ จานวน 8 ช.ม.

โครงร่างเว็บไชต์ดว้ ยตาราง การตงั คา่ การแสดงผลเวบ็ ไซต์ การบันทึกเอกสารเวบ็ ไซต์

6. ถ้าต้องการสร้างตาราง (Table) จะต้องเลอื กกลมุ่ เคร่ืองมือใด

ก. HTML

ข. Template

ค. Forms

ง. Text

7. ข้อใด คอื การกาหนดสขี องลงิ ก์เม่ือคลิกแล้ว

ก. Links

ข. Visited Links

ค. Active Links

ง. Actived Links

8. หนา้ แรกของเว็บไซต์ ของภาษา HTML ตอ้ งตงั ช่อื ว่าอย่างไร

ก. page1.html

ข. home.html

ค. index.html

ง. main.html

9. การตังชื่อเว็บไซต์ในข้อใดต่อไปนีไม่ถกู ต้อง

ก. webd.html

ข. web_d.html

ค. Web d.html

ง. webd_.html

10. ข้อใดคือคียล์ ัดในการผสานเซลล์ (Merge Cells)

ก. Ctrl+M

ข. Ctrl+Alt+M

ค. Alt+M

ง. Shift+Ctrl+M

แผนการสอน หน่วยที่ 7

ชอ่ื วิชา การสรา้ งเว็บไซต์ (Website Creation) สอนครัง้ ท่ี 11-12

ช่อื หน่วย การจัดการไฟล์ภาพกราฟิก ภาพเคลอ่ื นไหวและข้อความใน ชัว่ โมงรวม 48 ช.ม.

เว็บไซต์

ชอ่ื เร่ือง การจัดการไฟล์ภาพกราฟิกในเว็บไซต์ การจดั การไฟลภ์ าพเคลอ่ื นไหวในเวบ็ ไซตก์ าร จานวน 8 ช.ม.

จดั การข้อความในเว็บไซต์

7. สาระสาคญั

หลังจากท่ีได้สร้างโครงร่างเว็บไซต์และตังค่าการแสดงผลเว็บไซต์เสร็จเรียบร้อยแล้ว เนือหาในหน่วยนีจะ

ประกอบไปด้วย การจัดการไฟล์ภาพกราฟิกในเว็บไซต์ การจัดการไฟล์ภาพเคล่ือนไหวในเว็บไซต์ การจัดการ

ข้อความในเว็บไซต์ ซึ่งรูปภาพในหน่วยนีได้ออกแบบไว้แล้วด้วยโปรแกรม Adobe Photoshop และไฟล์

ภาพเคล่ือนไหวจากหน่วยทผี่ ่านมา การแทรกภาพเคลื่อนไหวและจดั การกบั ข้อความถือเป็นสง่ิ ทจ่ี าเปน็ ต้องเรียนรู้

และทาความเข้าใจเพอ่ื ให้สามารถสร้างเว็บไซต์ได้อย่างถูกต้องและมีประสิทธิภาพมากที่สุด

2. หัวเร่อื ง/รายการสอน/สาระการเรียนรู้

1. รจู้ ักกับโปรแกรม Adobe Dreamweaver CC 2018

2. การตดิ ตังโปรแกรม Adobe Dreamweaver CC 2018

3. สว่ นประกอบต่าง ๆ ของโปรแกรม Adobe Dreamweaver CC 2018

3. สมรรถนะอาชีพประจาหน่วย

แสดงความรูเ้ กี่ยวการจดั การไฟล์ภาพกราฟกิ ในเว็บไซต์

แสดงความรูเ้ ก่ยี วกบั การจดั การไฟลภ์ าพเคลอ่ื นไหวในเวบ็ ไซต์

แสดงความร้เู ก่ียวกับการจัดการขอ้ ความในเว็บไซต์

4. จุดประสงคก์ ารเรียนรู้

จุดประสงค์ทั่วไป

6. จดั การไฟล์ภาพกราฟิกในเวบ็ ไซต์ได้

7. จัดการไฟล์ภาพเคลอื่ นไหวในเว็บไซต์ได้

8. รเู้ กีย่ วกับการจัดการข้อความในเว็บไซต์

จดุ ประสงคเ์ ชิงพฤติกรรม
1. สามารถจัดการไฟล์ภาพกราฟกิ ในเวบ็ ไซต์ได้
2. สามารถจดั การไฟลภ์ าพเคลื่อนไหวในเวบ็ ไซต์ได้
3. มีความรเู้ กีย่ วกับการจัดการข้อความในเว็บไซต์

แผนการสอน หนว่ ยท่ี 7

ชื่อวิชา การสร้างเวบ็ ไซต์ (Website Creation) สอนครัง้ ท่ี 11-12

ช่อื หน่วย การจัดการไฟล์ภาพกราฟิก ภาพเคลื่อนไหวและขอ้ ความ ชัว่ โมงรวม 48 ช.ม.

ในเวบ็ ไซต์

ชื่อเร่ือง การจัดการไฟลภ์ าพกราฟิกในเวบ็ ไซต์ การจัดการไฟล์ภาพเคล่ือนไหวในเวบ็ ไซต์การ จานวน 8 ช.ม.

จัดการข้อความในเวบ็ ไซต์

12. การบูรณาการหลักปรชั ญาของเศรษฐกิจพอเพียง เงื่อนไขคณุ ธรรม

เง่ือนไขความรู้ 31. มคี วามอดทน
แสดงความรู้เกย่ี วการจัดการไฟล์ภาพกราฟกิ ในเวบ็ ไซต์ 32. มคี วามขยนั
แสดงความรูเ้ ก่ียวกับการจดั การไฟล์ภาพเคลื่อนไหวใน 33. มคี วามรบั ผดิ ชอบ
เวบ็ ไซต์ 34. มคี วามมวี ินยั ในการเรียน
แสดงความร้เู ก่ียวกับการจดั การขอ้ ความในเวบ็ ไซต์ 35. มีจรยิ ธรรมในการเรียนคอมพวิ เตอร์

พอประมาณ
1.จานวนผูเ้ รียน
2. ระยะเวลาในการเรยี นการสอน
3. การใช้ทรัพยากรร่วมกนั

มเี หตุผล มภี มู คมุ้ กนั
1. ลดเวลาในการปฏบิ ัตงิ าน 1. ประหยัดคา่ ใช้จา่ ย
2. ประมาณการเหตกุ ารณต์ า่ ง ๆ 2. มคี วามรอบคอบในการทางาน
3.ลดขันตอนในการทางาน
4. เข้าใจงานและระบบการทางาน

สงั คม วฒั นธรรม
19. สร้างความสัมพันธ์ทดี่ ใี นกลมุ่ ผู้เรยี น 13. มีมรรยาทในการเรยี น
20. ชว่ ยเหลือกันในการทางานใหต้ รงเวลา 14. มีสมั มาคาระต่อครผู ูส้ อนและผอู้ าวุโส
21. มีความรับผดิ ชอบในการใชเ้ ครอื่ ง
คอมพิวเตอร์ กวา่

ส่งิ แวดลอ้ ม สมดลุ /พร้อมรับการเปล่ยี นแปลง
19. รกั ษาความสะอาดในหอ้ งเรียน ใช้เครอื่ งคอมพิวเตอร์ทม่ี ีให้คมุ้ ค่าและเป็น
20. ดแู ลรักษาเครอื่ งคอมพิวเตอร์ใหส้ ะอาด ประโยชนส์ ูงสดุ ต่อผเู้ รยี น

เสมอ
21. ปิดไฟ ปดิ เครอ่ื งเมื่อเลกิ ใช้งาน

ศาสตร์พระราชา

หลักการทรงงาน ศาสตรส์ ากล ศาสตรภ์ ูมิปญั ญา

1. การมสี ว่ นรว่ ม 1. ความมเี หตผุ ล 1. รกั ษาสิง่ แวดล้อม
2. ประยกุ ตก์ ารเรยี นร้ทู หี่ ลากหลาย
2. ศกึ ษาข้อมูลอยา่ งเปน็ ระบบ 2. รอบรู้ 3. .พรอ้ มปรบั เปล่ียนตามสถานการณ์

3. ทางานอยา่ งมคี วามสุข 3. มสี ติ

แผนการสอน หน่วยที่ 7

ช่ือวิชา การสร้างเวบ็ ไซต์ (Website Creation) สอนครั้งท่ี 11-12

ชื่อหน่วย การจดั การไฟลภ์ าพกราฟกิ ภาพเคลื่อนไหวและข้อความ ชั่วโมงรวม 48 ช.ม.

ในเวบ็ ไซต์

ช่ือเรอ่ื ง การจดั การไฟลภ์ าพกราฟิกในเวบ็ ไซต์ การจัดการไฟล์ภาพเคลือ่ นไหวในเว็บไซต์การ จานวน 8 ช.ม.

จดั การข้อความในเว็บไซต์

6. กิจกรรมการเรยี นการสอน
ขั้นตอนการสอนหรอื กจิ กรรมของครู
ขั้นเตรียมการ
19. ครเู ตรียมเอกสารการสอน Power point การสอน
20. ครเู ช็คชอื่ การเข้าหอ้ งเรยี น
21. นักเรียนตรวจสอบอปุ กรณ์ภายในหอ้ งเรยี น
ขั้นนา
11. ครตู รวจสอบการจัดเกบ็ ไฟล์ข้อมูลการสรา้ งแม่แบบเอกสารเว็บไซต์
12. ครูจดั ทาระบบจดั เกบ็ งานและแสดงคะแนนการสง่ งานใหผ้ ูเ้ รยี นตรวจสอบ
ขั้นสอน
ทฤษฎี
ครูผ้สู อนสาธติ การสร้างเว็บไซตแ์ ตล่ ะขนั ตอนใหผ้ เู้ รยี นปฏบิ ัติตาม และบนั ทกึ วิธีการปฏิบัตงิ านเผยแพรใ่ ห้
ผู้เรยี นทบทวนเนอื หาการเรียนรูผ้ ่าน เวบ็ ไซต์ www.kruwipawee.com
ปฏบิ ตั
25.ผู้สอนใหผ้ เู้ รียนทาแบบทดสอบก่อนเรยี น
26.ผู้สอนให้ผู้เรยี นทา ใบงานที่ 7 การจัดการไฟล์รปู ภาพ ภาพเคลอ่ื นไหวและข้อความในเว็บไซต์
27.ผสู้ อนให้ผ้เู รยี นทาแบบฝกึ หัด หนว่ ยท่ี 7
28.ผสู้ อนให้ผเู้ รียนทาแบบทดสอบหลังเรียน
29.ผสู้ อนให้ผู้เรยี นปฏิบตั ติ ามเนือหาทีค่ รสู าธิตโดยใชเ้ ร่อื งทผ่ี ู้เรยี นไดค้ ัดเลือกตามส่งผลงานผ่านกลุ่ม
รายวชิ าเพื่อให้ผสู้ อนบันทึกความก้าวหนา้ ของงาน

ข้นั สรุป
13. ผู้สอนและผูเ้ รียนร่วมกันสรุปเนอื หาท่ีได้เรียนให้มีความเขา้ ใจในทศิ ทางเดยี วกัน
14. ผ้สู อนใหผ้ เู้ รยี นศกึ ษาเพ่ิมเติมนอกห้องเรียน ด้วยบทเรยี นช่วยสอนทจี่ ดั ทาขึน

7. สื่อและแหล่งการเรียนรู้
23.หนงั สือเรียนวชิ า การสรา้ งเว็บไซต์
24.แบบประเมนิ ผลการเรยี นร้กู อ่ นเรยี น/หลงั เรียนพร้อมเฉลย
25.ส่ือการสอน Power Point หนว่ ยการเรียนรู้ท่ี7
26.สื่อการสอน www.kruwipawee.com

แผนการสอน หน่วยท่ี 7

ชอื่ วิชา การสรา้ งเวบ็ ไซต์ (Website Creation) สอนครงั้ ท่ี 11-12

ชือ่ หน่วย การจัดการไฟล์ภาพกราฟิก ภาพเคลือ่ นไหวและข้อความ ช่ัวโมงรวม 48 ช.ม.

ในเวบ็ ไซต์

ชื่อเร่อื ง การจดั การไฟลภ์ าพกราฟิกในเวบ็ ไซต์ การจัดการไฟล์ภาพเคลือ่ นไหวในเวบ็ ไซต์การ จานวน 8 ช.ม.

จดั การข้อความในเวบ็ ไซต์

8. วดั และประเมินผล

8.1 เครื่องมอื ประเมนิ

8.8.1 ตรวจแบบประเมนิ ผลการเรียนรูก้ อ่ นเรียน

8.1.2 สงั เกตพฤติกรรมการปฏิบตั งิ าน

8.2 เกณฑก์ ารประเมนิ

เกณฑก์ ารประเมนิ ตามแบบทดสอบประจาหน่วยและแบบประเมนิ ช้นิ งาน

เกณฑก์ ารประเมนิ ผลการประเมนิ

ระดบั คะแนน รอ้ ยละ 80-100 ระดับดมี าก

ระดบั คะแนน ร้อยละ 70-79 ระดบั ดี

ระดับคะแนน รอ้ ยละ 60-69 ระดบั ปานกลาง

ระดับคะแนน ร้อยละ 50-59 ระดบั ผ่านเกณฑ์

ระดับคะแนน ตา่ กว่า รอ้ ยละ 50 ไม่ผา่ นเกณฑ์การประเมนิ

หมายเหตุ คะแนนในการประเมิน มคี ะแนนเต็มเท่ากบั 5 คะแนน

แผนการสอน หนว่ ยที่ 7

ชอ่ื วิชา การสรา้ งเว็บไซต์ (Website Creation) สอนคร้ังที่ 11-12

ชอ่ื หน่วย การจัดการไฟลภ์ าพกราฟกิ ภาพเคล่ือนไหวและขอ้ ความ ชว่ั โมงรวม 48 ช.ม.

ในเว็บไซต์

ช่อื เรื่อง การจัดการไฟลภ์ าพกราฟิกในเว็บไซต์ การจดั การไฟล์ภาพเคล่ือนไหวในเว็บไซต์การ จานวน 8 ช.ม.

จดั การข้อความในเวบ็ ไซต์

7.1 การจัดการไฟล์ภาพกราฟิกในเว็บไซต์

ภาพกราฟิก คือ ภาพท่ีผ่านการตกแต่งด้วยโปรแกรมคอมพิวเตอร์ อาจเป็นภาพที่ถูกวาดขึนมาใหม่

ทังหมด หรือเป็นการนาภาพถ่ายมาทาการรีทัชตัดต่อโดยใช้โปรแกรมกราฟิกมาสร้างสรรค์จนได้ภาพที่สมบูรณ์ก็ได้

เช่น โปรแกรม Paint, illustrator, Photoshop เป็นต้น การใช้ภาพกราฟิก ในการนาเสนอข้อมูลต่าง ๆ การใช้รูป

ภาพกราฟิกสาหรับเว็บไซต์โดยข้อมูลในรูปแบบของรูปภาพ เป็นที่นิยมในปัจจุบันมากเพราะรูปภาพทาให้เว็บไซต์มี

ความสวยงามและดึงดูดความสนใจจากผู้ใช้งานโดยทั่วไปชนิดของรูปภาพท่ีปรากฏบนเครื่องคอมพิวเตอร์ สามารถ

แบ่งออกตามลักษณะการจัดเก็บข้อมูลได้ 2 ชนิดด้วยกันคือ รูปภาพแบบ Raster หรือ Bitmap และรูปภาพแบบ

Vector

7.1.1 การแทรกภาพกราฟิกในเวบ็ ไซต์

การแทรกภาพกราฟิกในโปรแกรม Adobe Dreamweaver CC 2018 ข้อพึงระวัง

ในการนารูปภาพมาใช้คือ รูปภาพท่ีนามาแทรกจะต้องเก็บอยู่ในไซต์ที่ได้อ้างอิงถึงหากรูปภาพไม่ได้เก็บ

อยู่ใน ไซต์และมีการอ้างอิงตาแหน่งไปเม่ือมีการถา่ ยโอนไฟล์ไปยังเคร่ืองแม่ขา่ ยจะทาให้รูปภาพไม่แสดง

ดังนันควรท่ีจะเก็บรูปภาพไว้ในไซต์ท่ีได้สร้างและควรใช้ช่ือรูปภาพเป็นภาษาอังกฤษเพื่อป้องกันปัญาหา

การแปลภาษา ซ่ึงการแทรกรปู ภาพในเว็บไซต์มขี ันตอนดงั นี

1. ที่มมุ มอง Design คลิกตาแหนง่ สว่ นหวั ทจี่ ะแทรกรูปภาพ

2. คลกิ Image

3. ปรากฏหน้าจอให้ เลอื กรูปภาพคลกิ รปู ภาพทตี่ ้องการ คลกิ OK

4. รปู ภาพท่ีเลอื กจะปรากฎขึนมา

5. เลอื กมุมมอง Slipt Code ชุดคาส่งั ในการจดั การรูปภาพจะปรากฎขนึ

<img src="header.jpg" หมายถึง คาสงั่ แทรกรูปภาพ =”ชือ่ รปู ภาพ”

width="1010" หมายถึง ขนาด=””

height="300" หมายถึง ความสูง=” “

alt=""/> หมายถึง ขอ้ ความคาอธิบายรูปภาพบนเว็บไซต์ =””

แผนการสอน หน่วยที่ 7

ช่ือวิชา การสรา้ งเวบ็ ไซต์ (Website Creation) สอนคร้ังที่ 11-12

ช่อื หน่วย การจดั การไฟล์ภาพกราฟิก ภาพเคล่ือนไหวและขอ้ ความ ชวั่ โมงรวม 48 ช.ม.

ในเว็บไซต์

ชือ่ เรอื่ ง การจัดการไฟล์ภาพกราฟิกในเว็บไซต์ การจัดการไฟล์ภาพเคล่อื นไหวในเวบ็ ไซต์การ จานวน 8 ช.ม.

จัดการข้อความในเวบ็ ไซต์

7.1.2 การปรบั ขนาดภาพกราฟิกในเว็บไซต์

การปรบั ขนาดภาพกราฟกิ สามารถทาไดห้ ลายวิธี ทังใชค้ าส่งั และใช้มุมมอง Design โดยการใช้เมาส์

คลกิ ทภ่ี าพ จะปรากฏจุดให้สามารถปรบั ขนาดของภาพให้เลก็ ลงไดใ้ นส่วนของคาสงั่ ตวั เลขท่ีอยู่กบั คา่ Width และ

Hight

7.1.3 การลบภาพกราฟิกในเว็บไซต์

การลบภาพกราฟิกสามารถทาได้หลายวธิ ี ทงั ใช้คาส่ังและใช้มุมมอง Design โดยการใช้เมาส์

คลิกทภี่ าพ กดปมุ่ Delete ทแ่ี ป้นพิมพห์ รือกด Ctrl+X รูปภาพก็จะหายไปทังมุมมอง Design

7.2 การจัดการไฟล์ภาพเคลือ่ นไหวในเวบ็ ไซต์

ภาพเคล่ือนไหว หมายถึง ภาพท่ถี ูกสร้างขึนโดยการนาภาพนง่ิ หลาย ๆ ภาพมาฉายต่อเนื่องกันด้วยความเร็ว

สงู ทาให้เกดิ ภาพลวงตาของการเคลอื่ นไหว โดยปกติความเร็วของภาพเคลอื่ นไหวจะฉายด้วยความเร็วท่ีต่างกันขนึ อยู่

กบั ชนิดของการแสดงผล (output) การนาภาพเคล่ือนไหวมาใช้สาหรับเว็บไซต์นันจะทาใหเ้ วบ็ ไซต์มีความน่าสนใจน่า

ตน่ื เตน้ มากกวา่ การสรา้ งเวบ็ ไซต์จากภาพนง่ิ ธรรมดา ประเภทของภาพเคลื่อนไหว แบง่ ได้เปน็ 2 ประเภทคอื

1) ภาพเคลื่อนไหวแบบ 2 มิติ (2D Animation) จะมองเห็นได้ทังความสูงและความกว้าง ซ่ึงจะมีความ

เหมือนจรงิ พอสมควรและการสร้างจะไม่สลับซับซ้อนมากนัก เช่น ภาพเคลื่อนไหวที่ปรากฏตามเว็บไซต์ต่างๆ รวมทัง

ภาพท่ีมีนามสกุล .Gif .swf เปน็ ตน้

2) ภาพเคล่ือนไหวแบบ 3 มติ ิ (3D Animation) จะมองเหน็ ได้ทังความสูง ความกวา้ ง และความลึก ภาพที่

เหน็ จะมีความสมจริงมากท่ีสุด เช่น ภาพยนตร์ต่าง ๆ เปน็ ตน้

7.3 การจดั การข้อความในเว็บไซต์

การใช้ขอ้ ความในเว็บเพจมีความสาคญั มากเพราะข้อความจะแสดงถึงรายละเอียดของขอ้ มลู ทีต่ ้องการ
นาเสนอผา่ นทางเว็บไซต์ การพิมพข์ ้อความ ควรพิมพ์ใหถ้ ูกต้อง ทังรปู แบบ หวั ขอ้ เลือกใชใ้ หเ้ หมาะสม การเวน้ วรรค
ตอน การเลือกใชส้ คี วรเลอื กใหเ้ หมาะสมกับข้อมูลเพราะ การใช้ข้อความในเวบ็ เพจนนั จะสร้างความน่าเชื่อถือใหก้ บั
เว็บและหนว่ ยงานเป็นอยา่ งมาก

แผนการสอน หน่วยท่ี 7

ชื่อวิชา การสร้างเวบ็ ไซต์ (Website Creation) สอนคร้ังที่ 11-12

ชื่อหน่วย การจดั การไฟล์ภาพกราฟกิ ภาพเคลือ่ นไหวและขอ้ ความ ชว่ั โมงรวม 48 ช.ม.

ในเวบ็ ไซต์

ชอื่ เร่ือง การจัดการไฟล์ภาพกราฟิกในเว็บไซต์ การจดั การไฟลภ์ าพเคลือ่ นไหวในเวบ็ ไซต์การ จานวน 8 ช.ม.

จดั การข้อความในเวบ็ ไซต์

ใบงานท่ี 7 การจัดการไฟลร์ ปู ภาพ ภาพเคลอ่ื นไหวและข้อความในเวบ็ ไซต์

คาชแี้ จง : ใหน้ กั เรียนสร้างเว็บ จัดการไฟล์ภาพกราฟิก ภาพเคลอ่ื นไหวและจัดรปู แบบข้อความตามเนือหาท่ีนักเรียน

สนใจ บันทกึ ข้อมลู index.html ถ่ายภาพหน้าจอนาเสนอหนา้ ชันเรยี น

ตวั อยา่ งหน้าเวบ็ ร้านผลไม้

แผนการสอน หน่วยท่ี 7

ช่อื วิชา การสรา้ งเว็บไซต์ (Website Creation) สอนคร้งั ที่ 11-12

ชื่อหน่วย การจดั การไฟล์ภาพกราฟกิ ภาพเคลื่อนไหวและข้อความ ชวั่ โมงรวม 48 ช.ม.

ในเว็บไซต์

ช่ือเรอื่ ง การจัดการไฟลภ์ าพกราฟิกในเวบ็ ไซต์ การจัดการไฟลภ์ าพเคลอ่ื นไหวในเวบ็ ไซต์ จานวน 8 ช.ม.

การจัดการขอ้ ความในเว็บไซต์

แบบฝกึ หัดหน่วยท่ี 7 การจดั การไฟลร์ ปู ภาพ ภาพเคลื่อนไหวและข้อความในเวบ็ ไซต์

คาสง่ั จงตอบคาถามต่อไปนี้ใหไ้ ด้ใจความสมบูรณ์

6. จงบอกวธิ ีการแทรกภาพกราฟิกในเวบ็
ตอบ 1. ท่ีมุมมอง Design คลิกตาแหน่งสว่ นหัวท่ีจะแทรกรปู ภาพ 2. คลิก Image

3. ปรากฏหนา้ จอให้ เลอื กรูปภาพคลกิ รูปภาพทตี่ ้องการ คลกิ OK 4. รปู ภาพทเ่ี ลือกจะปรากฎขึนมา

..................................................................................................................................... ...................

7. จงบอกประเภทของภาพเคล่ือนไหว
ตอบ ประเภทของภาพเคลื่อนไหว แบง่ ได้เปน็ 2 ประเภทคือ
1) ภาพเคลื่อนไหวแบบ 2 มติ ิ (2D Animation) 2) ภาพเคลือ่ นไหวแบบ 3 มติ ิ (3D Animation)
............................................................................................................................. ...........................

8. ภาพแบบ Raster กับ Vector เหมือนกันหรือไม่ อย่างไร
ตอบ ภาพแบบ Raster เปน็ ภาพขนาดเล็ก เป็นภาพกราฟิกทีเ่ กิดจากการเรียงตัวของจุดสี่เหลีย่ มเลก็ ๆ เมื่อ
ขยายภาพใหม้ ีขนาดใหญข่ ึน ทาให้ภาพแตกมองเหน็ ภาพเปน็ จดุ สี่เหลย่ี มเลก็ ๆ กับ Vector ตา่ งกัน
กบั ภาพกราฟิกแบบ Vector เป็นภาพกราฟกิ ทเ่ี กดิ จากการอา้ งองิ ความสัมพนั ธท์ างคณติ ศาสตร์ หรอื การ
คานวณ ซงึ่ ภาพจะมีความเป็นอสิ ระต่อกันเมอื ขยายภาพจะไม่แตกจากกนั

............................................................................................................................. ...........................
9. จงบอกขันตอนการสรา้ งตารางขนาด 3 แถว 3 คอลมั น์

ตอบ แทรกตาราง ทีแ่ ถบ HTML คลิกปุม่ Table กาหนด กาหนดค่าของตาราง Rows = 3
Columns =3 คลกิ OK

........................................................................................................... .............................................
10.จงบอกวธิ ีการทาตวั อักษรเคลื่อนท่ี

ตอบ ใหค้ ลกิ ที่ Split แทรกชดุ คาสัง่ <marquee> </marquee> คอื แท็กทท่ี าให้ตวั อักษรหรือรูปภาพ
เคลอื่ นที่

................................................................. ................................................................................... ....

แผนการสอน หนว่ ยท่ี 7

ชื่อวิชา การสรา้ งเว็บไซต์ (Website Creation) สอนครั้งท่ี 11-12

ชือ่ หน่วย การจัดการไฟล์ภาพกราฟกิ ภาพเคล่ือนไหวและข้อความ ชว่ั โมงรวม 48 ช.ม.

ในเวบ็ ไซต์

ชอ่ื เรอ่ื ง การจดั การไฟลภ์ าพกราฟิกในเว็บไซต์ การจดั การไฟล์ภาพเคลอื่ นไหวในเวบ็ ไซต์ จานวน 8 ช.ม.

การจัดการข้อความในเว็บไซต์

แบบทดสอบหลังเรยี น

หน่วยท่ี 7 การจัดการไฟล์ภาพกราฟกิ ภาพเคลื่อนไหวและขอ้ ความในเว็บไซต์

จงทาเคร่ืองหมาย (X) ทบั ตวั เลอื กทถี่ ูกต้อง
1. ขอ้ ใดต่อไปนคี ือการกาหนด Cell padding ใหก้ บั ตาราง

ก. กาหนดความกว้างของตาราง
ข. กาหนดความหนาของตาราง
ค. กาหนดระยะห่างระหว่างขอบเซลล์กบั ขอ้ ความภายในเซลล์
ง. กาหนดระยะหา่ งระหวา่ ง เซลลแ์ ต่ละเซลลท์ งั แนวตังและแนวนอน
2. ข้อใดต่อไปนีคือการกาหนด Cell spacing ให้กบั ตาราง
ก. กาหนดความกว้างของตาราง
ข. กาหนดความหนาของตาราง
ค. กาหนดระยะห่างระหว่างขอบเซลลก์ บั ขอ้ ความภายในเซลล์
ง. กาหนดระยะหา่ งระหวา่ ง เซลล์แตล่ ะเซลลท์ งั แนวตังและแนวนอน
3. ข้อใดคอื คีย์ลัดท่ีใชใ้ นการลบรปู ภาพกราฟิกในโปรแกรม Dreamweaver
ก. กด Ctrl + S
ข. กด Ctrl + N
ค. กด Ctrl + X
ง. กด Ctrl + Q
4. รูปภาพกราฟิกทส่ี ร้างดว้ ยโปรแกรม Illustrator เป็นภาพแบบใด
ก. jpeg
ข. GiF
ค. Raster
ง. Vector

5. จากรปู ข้อใดถูกตอ้ ง
ก. เครื่องมือแทรกภาพเคลอ่ื นไหว
ข. เครอื่ งมอื แทรกภาพกราฟกิ
ค. เครอ่ื งมอื แทรกตาราง
ง. เครอ่ื งมือแทรกกราฟ

แผนการสอน หน่วยที่ 7

ชื่อวิชา การสรา้ งเวบ็ ไซต์ (Website Creation) สอนครั้งท่ี 11-12

ช่อื หน่วย การจัดการไฟลภ์ าพกราฟกิ ภาพเคล่ือนไหวและขอ้ ความใน ช่ัวโมงรวม 48 ช.ม.

เวบ็ ไซต์

ชอื่ เร่ือง การจัดการไฟลภ์ าพกราฟิกในเวบ็ ไซต์ การจัดการไฟลภ์ าพเคลื่อนไหวในเว็บไซต์การ จานวน 8 ช.ม.

จดั การข้อความในเวบ็ ไซต์

6. ขอ้ ใดคือความหมายของ Alt Attribute

ก. คาอธิบายรูปภาพบนเว็บไซต์

ข. ช่อื รูปภาพบนเว็บไซต์

ค. แหลง่ เก็บข้อมลู ในเว็บไซต์

ง. ตาแหนง่ ทอี่ ยขู่ องรปู ภาพเวบ็ ไซต์

7. ขอ้ ใด คือคาส่ังทาให้ตัวอักษรเคลื่อนที่

ก. <marquee></marquee>

ข. <Slide></Slide>

ค. <img sr ……………/>

ง. <Br>

8. หากตารางอยู่ในแทก็ <marquee>……</marquee>

ก. ตารางจะมขี นาดโตขนึ

ข. ตารางจะกระพรบิ ตลอดเวลา

ค. ตารางจะเคลื่อนท่ี

ง. ตารางจะอยูต่ าแหน่งบนสุดชิดซ้าย

9. ขอ้ ใดคือคียล์ ดั ในการแสดงผลเวบ็ ไซตผ์ ่านโปรแกรมเวบ็ เบราวเซอร์

ก. F6

ข. F5

ค. F2

ง. F1

10. จากภาพ คอื เครื่องมือใชท้ าอะไร

ก. แทรกภาพกราฟิก

ข. แทรกภาพเคลื่อนไหว

ค. แทรกตาราง

ง. แทรกข้อความ

แผนการสอน หนว่ ยที่ 8

ชื่อวิชา การสร้างเว็บไซต์ (Website Creation) สอนครั้งท่ี 13-14
ชื่อหน่วย การเพ่ิมเทคนิคพิเศษใหก้ บั เว็บไซต์ ชว่ั โมงรวม 56 ช.ม.

ชื่อเร่อื ง การเพม่ิ เทคนิคพิเศษให้กบั เว็บไซต์ การกาหนดพฤติกรรมการแสดงผลของภาพใน จานวน 8 ช.ม.
เวบ็ ไซต์ การเพ่ิมวดี ีโอ YouTube ในเวบ็ ไซต์

8. สาระสาคญั
หลังจากที่ได้สร้างเว็บไซต์จัดการไฟล์ภาพกราฟิก การจัดการไฟล์ภาพเคลื่อนไหว และการจัดการข้อความ

เนือหาสาหรับเว็บไซต์เสร็จเรียบร้อยแล้ว เนือหาในหน่วยนีจะประกอบไปด้วย การเพิ่มเทคนิคพิเศษให้กับเว็บไซต์
การกาหนดพฤติกรรมการแสดงผลของภาพในเว็บไซต์ การเพ่ิมวีดีโอ YouTube ในเว็บไซต์ เพ่ือให้สามารถมีความรู้
ความเข้าใจในการสร้างเว็บไซตต์ อ่ ไป

2. หวั เร่ือง/รายการสอน/สาระการเรยี นรู้
1. ร้จู กั กบั โปรแกรม Adobe Dreamweaver CC 2018
2. การตดิ ตงั โปรแกรม Adobe Dreamweaver CC 2018
3. สว่ นประกอบต่าง ๆ ของโปรแกรม Adobe Dreamweaver CC 2018

3. สมรรถนะอาชีพประจาหนว่ ย
แสดงความร้เู กย่ี วกับการเพิม่ เทคนคิ พิเศษใหก้ ับเวบ็ ไซต์

4. จดุ ประสงค์การเรยี นรู้
จุดประสงค์ทั่วไป
1. รูแ้ ละเขา้ ใจเกี่ยวกับเพ่ิมเทคนคิ พิเศษให้กบั เวบ็ ไซต์
2. กาหนดพฤติกรรมการแสดงผลของภาพในเวบ็ ไซต์ได้
3. เพิม่ วีดโี อ YouTube ในเวบ็ ไซต์
จดุ ประสงค์เชงิ พฤตกิ รรม
1. มคี วามรู้ความเข้าใจเก่ยี วกับเพิ่มเทคนิคพิเศษใหก้ ับเวบ็ ไซต์
2. สามารถกาหนดพฤติกรรมการแสดงผลของภาพในเว็บไซต์
3. สามารถเพม่ิ วีดีโอ YouTube ในเว็บไซต์

แผนการสอน หนว่ ยท่ี 8

ชือ่ วิชา การสรา้ งเวบ็ ไซต์ (Website Creation) สอนครั้งที่ 13-14
ชื่อหน่วย การเพ่ิมเทคนคิ พิเศษใหก้ ับเว็บไซต์ ชั่วโมงรวม 56 ช.ม.

ชอ่ื เรือ่ ง การเพม่ิ เทคนิคพิเศษให้กบั เว็บไซต์ การกาหนดพฤติกรรมการแสดงผลของภาพใน จานวน 8 ช.ม.
เว็บไซต์ การเพมิ่ วดี ีโอ YouTube ในเวบ็ ไซต์

13.การบรู ณาการหลักปรัชญาของเศรษฐกิจพอเพียง

เง่อื นไขความรู้ เง่ือนไขคณุ ธรรม
36. มีความอดทน
แสดงความร้เู กยี่ วกับการเพมิ่ เทคนคิ พิเศษ 37. มีความขยนั
ใหก้ บั เวบ็ ไซต์ 38. มีความรับผิดชอบ
39. มคี วามมีวนิ ยั ในการเรยี น
40. มีจรยิ ธรรมในการเรียนคอมพวิ เตอร์

พอประมาณ
1.จานวนผู้เรียน
2. ระยะเวลาในการเรียนการสอน
3. การใชท้ รัพยากรร่วมกนั

มีเหตผุ ล มีภูมคุม้ กัน
1. ลดเวลาในการปฏิบตั ิงาน 1. ประหยัดคา่ ใชจ้ า่ ย
2. ประมาณการเหตกุ ารณ์ต่าง ๆ 2. มคี วามรอบคอบในการทางาน
3.ลดขนั ตอนในการทางาน
4. เข้าใจงานและระบบการทางาน

สังคม วฒั นธรรม
22. สรา้ งความสมั พนั ธท์ ่ดี ีในกลุ่มผ้เู รยี น 15. มีมรรยาทในการเรียน

23. ชว่ ยเหลอื กนั ในการทางานใหต้ รงเวลา 16. มีสัมมาคาระตอ่ ครผู ู้สอนและผอู้ าวโุ ส
24. มคี วามรบั ผดิ ชอบในการใชเ้ คร่ือง กว่า
คอมพิวเตอร์

สงิ่ แวดลอ้ ม สมดุล/พร้อมรบั การเปลยี่ นแปลง
22. รกั ษาความสะอาดในหอ้ งเรียน ใชเ้ คร่ืองคอมพิวเตอร์ทม่ี ีใหค้ มุ้ ค่าและเปน็
ประโยชนส์ ูงสุดต่อผ้เู รยี น
23. ดูแลรักษาเครื่องคอมพวิ เตอรใ์ หส้ ะอาด
เสมอ

24. ปิดไฟ ปดิ เครือ่ งเม่ือเลกิ ใช้งาน

ศาสตร์พระราชา

หลกั การทรงงาน ศาสตร์สากล ศาสตร์ภมู ิปัญญา

1. การมสี ว่ นรว่ ม 1. ความมเี หตผุ ล 1. รักษาสง่ิ แวดล้อม
2. ประยกุ ต์การเรยี นรู้ที่หลากหลาย
2. ศึกษาขอ้ มูลอย่างเปน็ ระบบ 2. รอบรู้
3. .พรอ้ มปรับเปลยี่ นตามสถานการณ์
3. ทางานอย่างมคี วามสขุ 3. มสี ติ

แผนการสอน หนว่ ยท่ี 8

ชอื่ วิชา การสร้างเว็บไซต์ (Website Creation) สอนครง้ั ท่ี 13-14
ชอ่ื หน่วย การเพ่ิมเทคนคิ พเิ ศษให้กบั เว็บไซต์ ชว่ั โมงรวม 56 ช.ม.

ชอื่ เร่อื ง การเพิม่ เทคนิคพิเศษให้กบั เว็บไซต์ การกาหนดพฤติกรรมการแสดงผลของภาพใน จานวน 8 ช.ม.
เว็บไซต์ การเพิม่ วดี โี อ YouTube ในเวบ็ ไซต์

6. กจิ กรรมการเรยี นการสอน
ขน้ั ตอนการสอนหรือกจิ กรรมของครู
ข้ันเตรียมการ
22. ครูเตรียมเอกสารการสอน Power point การสอน
23. ครูเช็คชื่อการเขา้ หอ้ งเรียน
24. นักเรยี นตรวจสอบอุปกรณภ์ ายในห้องเรยี น
ขน้ั นา
13. ครตู รวจสอบการจดั เก็บไฟล์ข้อมูลสร้างเว็บไซต์ ของผ้เู รยี นแตล่ ะกลมุ่
14. ครูจัดทาระบบจัดเกบ็ งานและแสดงคะแนนการสง่ งานใหผ้ เู้ รยี นตรวจสอบ
ข้ันสอน
ทฤษฎี
ครผู สู้ อนสาธิตการเพ่มิ เทคนคิ พเิ ศษใหก้ บั เวบ็ ไซต์ การกาหนดพฤติกรรมการแสดงผลของภาพในเว็บไซต์
การเพ่ิมวดี โี อ YouTube ในเว็บไซต์และบันทกึ วิธกี ารปฏบิ ัติงานเผยแพรใ่ ห้ผเู้ รียนทบทวนเนอื หาการเรียนรู้
ผา่ น เว็บไซต์ www.kruwipawee.com
ปฏิบตั
30.ผ้สู อนใหผ้ เู้ รยี นทาแบบทดสอบก่อนเรียน
31.ผูส้ อนให้ผเู้ รยี นทา ใบงานท่ี แบบฝกึ หัด หน่วยที่ 8 การเพ่ิมเทคนิคพเิ ศษให้กบั เว็บไซต์
32.ผูส้ อนใหผ้ ูเ้ รียนทาแบบฝกึ หัด หนว่ ยท่ี 8
33.ผู้สอนใหผ้ ู้เรียนทาแบบทดสอบหลังเรยี น
34.ผู้สอนให้ผ้เู รียนปฏบิ ัติตามเนือหาทีค่ รูสาธติ โดยใช้เรื่องทผ่ี เู้ รียนไดค้ ดั เลือกตามส่งผลงานผา่ นกลมุ่
รายวิชาเพือ่ ใหผ้ ู้สอนบันทกึ ความก้าวหนา้ ของงาน

ขั้นสรุป
15. ผสู้ อนและผ้เู รียนร่วมกนั สรุปเนอื หาที่ไดเ้ รียนใหม้ ีความเขา้ ใจในทิศทางเดียวกนั
16. ผสู้ อนให้ผเู้ รียนศึกษาเพิ่มเตมิ นอกห้องเรียน ดว้ ยบทเรยี นช่วยสอนท่จี ดั ทาขึน

7. สอ่ื และแหล่งการเรยี นรู้
27.หนงั สือเรยี นวิชา การสรา้ งเว็บไซต์
28.แบบประเมนิ ผลการเรียนรูก้ ่อนเรยี น/หลงั เรยี นพร้อมเฉลย
สือ่ การสอน Power Point หน่วยการเรยี นรู้ที่ 8
29.สอ่ื การสอน www.kruwipawee.com

แผนการสอน หน่วยที่ 8

ช่ือวิชา การสรา้ งเว็บไซต์ (Website Creation) สอนครั้งท่ี 13-14
ช่อื หน่วย การเพิ่มเทคนิคพิเศษให้กบั เว็บไซต์ ชวั่ โมงรวม 56 ช.ม.

ช่อื เรือ่ ง การเพ่มิ เทคนิคพิเศษให้กบั เว็บไซต์ การกาหนดพฤติกรรมการแสดงผลของภาพใน จานวน 8 ช.ม.

เวบ็ ไซต์ การเพิ่มวดี ีโอ YouTube ในเว็บไซต์

8. วัดและประเมนิ ผล

8.1 เคร่ืองมือประเมนิ

8.8.1 ตรวจแบบประเมินผลการเรียนรกู้ อ่ นเรียน

8.1.2 สงั เกตพฤตกิ รรมการปฏบิ ัตงิ าน

8.2 เกณฑ์การประเมิน

เกณฑก์ ารประเมนิ ตามแบบทดสอบประจาหนว่ ยและแบบประเมนิ ชน้ิ งาน

เกณฑก์ ารประเมิน ผลการประเมนิ

ระดับคะแนน ร้อยละ 80-100 ระดับดมี าก

ระดับคะแนน ร้อยละ 70-79 ระดบั ดี

ระดบั คะแนน รอ้ ยละ 60-69 ระดบั ปานกลาง

ระดบั คะแนน รอ้ ยละ 50-59 ระดับผ่านเกณฑ์

ระดับคะแนน ต่ากว่า ร้อยละ 50 ไมผ่ ่านเกณฑ์การประเมิน

หมายเหตุ คะแนนในการประเมิน มคี ะแนนเต็มเท่ากบั 5 คะแนน

แผนการสอน หนว่ ยท่ี 8

ชื่อวิชา การสร้างเวบ็ ไซต์ (Website Creation) สอนครงั้ ที่ 13-14
ชือ่ หน่วย การเพ่ิมเทคนคิ พเิ ศษให้กบั เว็บไซต์ ชั่วโมงรวม 56 ช.ม.

ชอื่ เร่ือง การเพ่มิ เทคนิคพิเศษให้กบั เว็บไซต์ การกาหนดพฤติกรรมการแสดงผลของภาพใน จานวน 8 ช.ม.
เว็บไซต์ การเพม่ิ วดี ีโอ YouTube ในเว็บไซต์

8.1 การเพิ่มเทคนิคพเิ ศษให้กบั เวบ็ ไซต์
การเพิ่มเทคนิคพิเศษให้กับเว็บไซต์เป็นการเพิ่มคุณลักษณะต่าง ๆ เพื่อสร้างความน่าสนใจเป็นจุดดึงดูดและ

ความตื่นตาตื่นใจให้กับผู้เข้าชมเว็บไซต์โปรแกรม Adobe Dreamweaver CC 2018 มีเคร่ืองมือต่าง ๆ มากมายใน
การช่วยให้ผู้สร้างสามารถเพิ่มเทคนิคพิเศษ เพ่ิมลูกเล่นท่ีน่าสนใจให้กับเว็บไซต์ได้อย่างง่ายดายตัวอย่างเครื่องมือที่
โปรแกรมสนับสนุน ได้แก่ HTML5 Video Canvas Flash Rollover Image Java Script ActiveX และ Plug in
เป็นตน้
8.2 การกาหนดพฤตกิ รรมการแสดงผลของภาพในเวบ็ ไซต์

การกาหนดพฤติกรรมการแสดงผลของภาพในเวบ็ ไซต์ สามารถสรา้ งได้โดยการกาหนดคา่
ตา่ ง ๆ ใน หนา้ ตา่ ง Behaviors เพ่ือเปน็ การสร้างชุดรูปแบบในการโตต้ อบกบั ผ้เู ขา้ ชมเว็บไซตใ์ หท้ าให้
เวบ็ ไซตม์ ลี กู เล่นท่ีแปลกตา ทาใหผ้ ้เู ข้าชมเวบ็ ไซต์ไม่เบื่อหน่ายในการเข้าเย่ยี มชมเว็บไซต์ Behaviors ใน
โปรแกรม Dreamweaver CC 2018 ทสี่ ามารถนามากาหนดพฤติกรรมการแสดงผลของภาพตา่ ง ๆใน
เว็บไซตไ์ ด้แก่ Effects Goto URL Jump Menu Show-Hide Elements Swap Image Swap
Image Restore เป็นตน้
8.3 การเพ่มิ วดี ีโอ YouTube ในเว็บไซต์
การเพ่ิมวีดโี อ YouTube ใหก้ ับเว็บไซต์ ถือเป็นการเพมิ่ ลูกเลน่ ให้กับเวบ็ ไซต์อีกอยา่ งหน่งึ ทาให้เว็บไซตม์ ี
ความทนั สมัย โดยเว็บไซต์ท่สี ามารถเพม่ิ วีดโี อจากเว็บ YouTubeและแสดงผลของวดี ีโอผ่านเบราวเซอร์ได้จะต้อง
เชื่อมต่ออินเทอร์เนต็ หรือใชง้ านอนิ เทอร์เนต็ ไดเ้ นื่องจากวดี ีโอท่จี ะเพิ่มในเวบ็ ไซต์นันนาชุดคาส่ังมาจากเว็บไซต์ท่มี ีการ
เผยแพร่ออนไลน์แล้วในการเพม่ิ วีดีโอ YouTube ในโปรแกรม Abode Dreamweaver CC 2018
1. เปิดหน้า index.html ขึนมา คลิกที่เมนู File > Save as เพ่ือทาการบันทึกไฟล์ท่ีได้สร้างโครงสร้างเว็บ
และส่วนประกอบตา่ ง ๆ ไวเ้ รยี บรอ้ ยแล้ว
2. ตังชอ่ื ไฟล์ land.html กด Save
3. เขา้ สเู่ วบ็ ไซต์ YouTube ค้นหาวดี โี อทต่ี ้องการฝงั เม่ือไดว้ ีดโี อแล้วคลิก แชร์
4. คลกิ การแชรแ์ บบฝัง
5. จะปรากฏคาส่ังในการฝังวีดโี อ คลิก คดั ลอก
6. คลกิ ท่มี ุมมอง Split คลิกตาแหน่ง ในมุมมอง Design ตาแหน่งในมมุ มอง Code จะกระพรบิ ให้วางคาส่ัง
วีดโี อจาก YouTube ลง ข้อควรรู้ หากวาง Code ในมมุ มอง Design ไม่แสดงผลเปน็ วีดโี อแต่จะแสดงผลเปน็ ชุดคาส่ัง
ท่ีคดั ลอกมาเท่านนั
7. บันทกึ กด F12

แผนการสอน หนว่ ยที่ 8

ช่ือวิชา การสร้างเว็บไซต์ (Website Creation) สอนครั้งท่ี 13-14
ชือ่ หน่วย การเพ่ิมเทคนคิ พเิ ศษใหก้ บั เว็บไซต์ ช่วั โมงรวม 56 ช.ม.

ชื่อเร่ือง การเพ่ิมเทคนิคพิเศษให้กบั เว็บไซต์ การกาหนดพฤติกรรมการแสดงผลของภาพใน จานวน 8 ช.ม.
เว็บไซต์ การเพิ่มวีดโี อ YouTube ในเวบ็ ไซต์

8. การตังค่าใหว้ ีดีโอ

<iframe width="560" height="315"
src="https://www.youtube.com/embed/Dom8h1dTcpg" frameborder="0"

allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>

ให้ใชค้ าสงั่ ? autoplay=1 หลงั วดี ีโอ ภายใน “”

<iframe width="560" height="315"
src="https://www.youtube.com/embed/Dom8h1dTcpg?autoplay=1"
frameborder="0" allow="accelerometer; ; encrypted-media; gyroscope; picture-in-
picture" allowfullscreen></iframe>

แผนการสอน หน่วยที่ 8

ชื่อวิชา การสร้างเว็บไซต์ (Website Creation) สอนคร้งั ที่ 13-14
ช่ือหน่วย การเพิ่มเทคนิคพิเศษใหก้ ับเว็บไซต์ ชั่วโมงรวม 56 ช.ม.

ชอ่ื เร่อื ง การเพม่ิ เทคนิคพิเศษให้กบั เว็บไซต์ การกาหนดพฤติกรรมการแสดงผลของภาพใน จานวน 8 ช.ม.
เวบ็ ไซต์ การเพม่ิ วดี ีโอ YouTube ในเวบ็ ไซต์

ใบงานที่ 8 การเพิ่มเทคนิคพิเศษให้กับเว็บไซต์
คาช้ีแจง : ให้นกั เรียนฝกึ ปฏิบตั ติ ามเนือหาทไ่ี ด้เรยี นในหน่วยท่ี 8 การเพม่ิ เทคนิคพิเศษให้กบั เวบ็ ไซต์ ดังต่อไปนี

1. จงสรา้ งเวบ็ 1 หน้า จดั เตรยี มรปู ภาพท่เี ก่ยี วขอ้ งกับสินค้า ขนาดใหญ่ 6 รูป และขนาดเล็ก 6 รปู เพือ่
จดั ทา Swap Image ตามเนือหาท่นี กั เรียนสนใจ บันทึกข้อมูล product.html ถา่ ยภาพหนา้ จอนาเสนอหน้าชันเรียน
ตวั อย่างหน้าเวบ็ รา้ นผลไม้

2. ให้นกั เรยี นฝงั วดี โี อ YouTube ลงในเว็บไซตโ์ ดยกาหนดให้เล่นอตั โนมตั ิ บนั ทึกในไฟล์ land.html

แผนการสอน หนว่ ยท่ี 8

ชือ่ วิชา การสร้างเวบ็ ไซต์ (Website Creation) สอนครัง้ ท่ี 13-14
ช่ือหน่วย การเพ่ิมเทคนคิ พเิ ศษใหก้ บั เว็บไซต์ ช่วั โมงรวม 56 ช.ม.

ช่ือเรอื่ ง การเพิ่มเทคนิคพิเศษให้กบั เว็บไซต์ การกาหนดพฤติกรรมการแสดงผลของภาพ จานวน 8 ช.ม.
ในเวบ็ ไซต์ การเพม่ิ วีดีโอ YouTube ในเวบ็ ไซต์

แบบฝึกหัด หนว่ ยที่ 8 การเพ่ิมเทคนิคพิเศษให้กับเว็บไซต์
คาสง่ั จงตอบคาถามต่อไปน้ีให้ไดใ้ จความสมบรู ณ์
11. เคร่ืองมอื ใดบ้างโปรแกรม Adobe Dreamweaver CC 2018 ทชี่ ่วยให้ผู้สรา้ งสามารถเพม่ิ เทคนคิ พเิ ศษ

ให้กับเว็บไซต์
ตอบ ผูส้ ร้างสามารถเพมิ่ เทคนคิ พเิ ศษ เพิ่มลูกเลน่ ที่น่าสนใจให้กับเว็บไซต์ได้อย่างงา่ ยดายตวั อยา่ งเครื่องมือที่
โปรแกรมสนับสนุน ได้แก่ HTML5 Video Canvas Flash Rollover Image Java Script ActiveX และ
Plug in เป็นตน้
.................................................................................................................. ......................................
12. การกาหนดพฤติกรรมการแสดงผลของภาพในโปรแกรม Adobe Dreamweaver CC 2018 สามารถทา
อะไรไดบ้ ้าง
ตอบ Effects Goto URL Jump Menu Show-Hide Elements Swap Image
Swap Image Restore เป็นตน้
.................................................................................................................................................... ....

13. จงบอกเหตุผล และสง่ิ ทีค่ วรเตรยี มก่อนการทา Swap Image
ตอบ Swap Image จะตอ้ งเตรียมภาพจากโปรแกรมกราฟิก เพื่อให้ไดภ้ าพท่มี ีคณุ ภาพสวยงาม ทาให้เว็บไซตม์ ี
ความเป็นมาตรฐานและมีความน่าเชอ่ื ถือมากขึน
............................................................................................................................. ...........................

14. จงบอกขันตอนการทา Swap Image
ตอบ แทรกรปู ภาพท่ีต้องการทา Swap image กาหนดคุณสมบตั ริ ูปภาพท่หี น้าตา่ ง Properties กาหนด ID
ให้กบั รปู ภาพ ที่เมนูWindows > Behavior หรอื กดคยี ์ลัด Shift+F4 จะปรากฏหนา้ จอ Behavior ท่ี

หนา้ ตา่ ง Behaviors คลิกเครอื่ งหมาย Add Behaviors เลอื ก Swap Image จะปรากฏหนา้ ต่าง
Swap Image ตังคา่ รูปภาพท่ีตอ้ งการทา Swap image ตามท่ีตอ้ งการ
............................................................................................................................. ...........................
15. จงบอกวิธีการ เพ่มิ วดี โี อ YouTube ในเวบ็ ไซต์
ตอบเข้าสูเ่ วบ็ ไซต์ YouTube คน้ หาวดี ีโอท่ตี ้องการฝัง เมื่อได้วดี โี อแล้วคลิก แชร์ คลกิ การแชรแ์ บบฝัง
จะปรากฏคาสงั่ ในการฝังวีดโี อ คลกิ คดั ลอก คลกิ ที่มุมมอง Split คลกิ ตาแหนง่ ในมุมมอง Design
ตาแหนง่ ในมมุ มอง Code จะกระพรบิ ให้วางคาสั่งวดี โี อจาก YouTube ลง

............................................................................................................................. .......................................................

แผนการสอน หนว่ ยท่ี 8

ชือ่ วิชา การสร้างเว็บไซต์ (Website Creation) สอนคร้งั ที่ 13-14
ช่ือหน่วย การเพิ่มเทคนคิ พิเศษใหก้ ับเว็บไซต์ ช่ัวโมงรวม 56 ช.ม.

ชื่อเร่อื ง การเพิ่มเทคนิคพเิ ศษให้กบั เว็บไซต์ การกาหนดพฤติกรรมการแสดงผลของภาพ จานวน 8 ช.ม.
ในเว็บไซต์ การเพิม่ วีดีโอ YouTube ในเวบ็ ไซต์

แบบทดสอบหลงั เรยี น
หนว่ ยที่ 8 การเพิม่ เทคนคิ พิเศษให้กับเว็บไซต์

จงทาเครื่องหมาย (X) ทบั ตวั เลือกท่ถี ูกตอ้ ง
1. จุดเดน่ ของการเพมิ่ เทคนิคพเิ ศษให้เว็บไซต์ทาใหเ้ ว็บไซต์

ก. สร้างความนา่ สนใจให้เวบ็ ไซต์
ข. เป็นจุดดึงดูดและความต่นื ตาตื่นใจให้กบั ผเู้ ขา้ ชมเวบ็ ไซต์
ค. ให้ทาให้เว็บไซตม์ ลี ูกเล่นทแี่ ปลกตา
ง. ถูกทุกข้อ
2. ส่ิงใดตอ่ ไปนคี วรทาก่อนการทา Swap Image
ก. การเตรียมรปู ภาพ
ข. กาหนดความหนาของตาราง
ค. กาหนดระยะห่างระหว่างขอบเซลลก์ บั ขอ้ ความภายในเซลล์
ง. กาหนดระยะห่างระหวา่ ง เซลลแ์ ตล่ ะเซลลท์ ังแนวตงั และแนวนอน
3. จากรูปเครอ่ื งมือ ทาหน้าที่ตามข้อใด
ก. แยกเซลล์
ข. ผสานเซลล์
ค. แทรกตาราง
ง. ลบตาราง
4. คีย์ลัดในการเรยี กหนา้ ต่าง Behavior
ก. Shift + F2
ข. Shift + F4
ค. Ctrl+ F5
ง. Ctrl+ F2
5. Restore images onMouseOut คอื
ก. โหลดรูปภาพทกุ ครัง
ข. คนื คา่ รปู ภาพเดมิ เม่ือเอาเมาส์ออก
ค. คืนค่าข้อความเมื่อเอาเมาสอ์ อก
ง. โหลดขอ้ ความเมื่อเอาเมาส์ออก

แผนการสอน หนว่ ยที่ 8

ชอื่ วิชา การสร้างเวบ็ ไซต์ (Website Creation) สอนครั้งที่ 13-14
ช่ือหน่วย การเพ่ิมเทคนคิ พิเศษใหก้ ับเว็บไซต์ ชวั่ โมงรวม 56 ช.ม.

ชื่อเรือ่ ง การเพมิ่ เทคนิคพเิ ศษให้กับเว็บไซต์ การกาหนดพฤติกรรมการแสดงผลของภาพใน จานวน 8 ช.ม.
เวบ็ ไซต์ การเพิม่ วีดีโอ YouTube ในเวบ็ ไซต์

6. หากวางชุดคาสัง่ ที่คดั ลอกวดี ีโอ YouTube มาในมุมมอง Design จะมลี ักษณะตามข้อใด
ก. จะแสดงผลเป็นชุดคาสง่ั
ข. จะแสดงผลเป็นวีดีโอท่คี ดั ลอกมา
ค. จะไม่แสดงผล
ง. จะแสดงขอ้ ความ error

7. คาสง่ั <iframe width="560" height="315"
src="https://www.youtube.com/embed/Dom8h1dTcpg" frameborder="0" allow="accelerometer;
autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> หากต้องการให้
วดี โี อเล่นอัตโนมัสต้องกาหนดส่วนใด

ก. src="https://www.youtube.com/embed/Dom8h1dTcpg?autoplay=1"
ข. https://www.youtube.com/embed/Dom8h1dTcpg" frameborder="0"
ค. encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
ง. src="https://www.youtube.com/embed/Dom8h1dTcpg?
8. ไฟลใ์ นข้อใดมนี ามสกุลไฟลแ์ บบ .swf
ก. ภาพเคลื่อนไหว
ข. รปู ภาพ
ค. ตาราง
ง. ข้อความ
9. การสร้างเอฟเฟค็ ให้กบั รปู ภาพคือลักษณะของการสลบั รูปภาพ เมอ่ื นาเมาส์ไปชที ่รี ปู ภาพนันๆ
ก. Active X
ข. Plugin
ค. Rollover Image
ง. Canvas
10. ขอ้ ใดเป็นคาส่ังในการสร้างงานกราฟิก
ก. Active X
ข. Plugin
ค. Rollover Image
ง. Canvas

แผนการสอน หนว่ ยที่ 9

ช่อื วิชา การสรา้ งเว็บไซต์ (Website Creation) สอนคร้ังที่ 15-16
ชื่อหน่วย การเชื่อมโยงและการทดสอบการทางานของเว็บไซต์ ชั่วโมงรวม 64 ช.ม.

ชื่อเร่อื ง รู้จักกบั การเชือ่ มโยงเวบ็ ไซต์ การเช่ือมโยงเว็บไซต์ การตรวจสอบการเช่ือมโยง จานวน 8 ช.ม.
เว็บไซต์

9. สาระสาคัญ
หลังจากท่ีได้สร้างเว็บไซต์ เพิ่มเทคนิคพิเศษให้กับเว็บไซต์ การกาหนดพฤติกรรมการแสดงผลของภาพใน

เว็บไซต์ การเพ่ิมวีดีโอ YouTube ในเว็บไซต์เพ่ือเพ่ิมความนา่ สนใจให้กับเว็บไซต์เสร็จเรียบรอ้ ยแล้ว เนือหาในหน่วยนี
จะประกอบไปด้วย การรู้จักกับการเช่ือมโยงเว็บไซต์ การเชื่อมโยงเว็บไซต์ การตรวจสอบการเชื่อมโยงเว็บไซต์เพ่ือให้
สามารถมคี วามรคู้ วามเข้าใจในการสร้างเวบ็ ไซต์ต่อไป

2. หวั เรอื่ ง/รายการสอน/สาระการเรยี นรู้
1 รู้จกั กบั การเชื่อมโยงเว็บไซต์
2 การเช่อื มโยงเวบ็ ไซต์
3 การตรวจสอบการเชื่อมโยงเว็บไซต์

3. สมรรถนะอาชพี ประจาหน่วย
แสดงความรูเ้ ก่ียวกับการเชอ่ื มโยงเวบ็ ไซต์

4. จดุ ประสงคก์ ารเรยี นรู้
จดุ ประสงค์ทั่วไป
1. รู้และเขา้ ใจเกี่ยวกับการเชอ่ื มโยงเว็บไซต์
2. เชือ่ มโยงเว็บไซต์ได้
3. ตรวจสอบการเชื่อมโยงเวบ็ ไซต์ได้
จดุ ประสงค์เชงิ พฤติกรรม
1. มีความรคู้ วามเข้าใจเก่ยี วกับการเชอื่ มโยงเวบ็ ไซต์
2. สามารถเชอ่ื มโยงเวบ็ ไซตไ์ ด้
3. สามารถตรวจสอบการเชื่อมโยงเว็บไซต์ได้

แผนการสอน หน่วยที่ 9
สอนครงั้ ท่ี 15-16
ชื่อวิชา การสร้างเวบ็ ไซต์ (Website Creation) ชั่วโมงรวม 64 ช.ม.
ชื่อหน่วย การเช่ือมโยงและการทดสอบการทางานของเว็บไซต์
จานวน 8 ช.ม.
ชือ่ เรื่อง รูจ้ กั กับการเช่ือมโยงเว็บไซต์ การเชอ่ื มโยงเวบ็ ไซต์ การตรวจสอบการเชื่อมโยง
เวบ็ ไซต์

14.การบูรณาการหลักปรัชญาของเศรษฐกจิ พอเพียง

เงือ่ นไขความรู้ เง่ือนไขคณุ ธรรม
41. มคี วามอดทน
แสดงความรเู้ กย่ี วกับการเชื่อมโยงเวบ็ ไซต์ 42. มีความขยัน
43. มีความรบั ผิดชอบ
44. มคี วามมวี ินยั ในการเรยี น
45. มจี ริยธรรมในการเรยี นคอมพวิ เตอร์

พอประมาณ
1.จานวนผเู้ รียน
2. ระยะเวลาในการเรียนการสอน
3. การใชท้ รัพยากรร่วมกัน

มเี หตุผล มีภมู คุ้มกนั
1. ลดเวลาในการปฏบิ ัตงิ าน 1. ประหยัดค่าใชจ้ า่ ย
2. ประมาณการเหตกุ ารณ์ต่าง ๆ 2. มคี วามรอบคอบในการทางาน
3.ลดขนั ตอนในการทางาน
4. เขา้ ใจงานและระบบการทางาน

สงั คม วัฒนธรรม
25. สรา้ งความสัมพันธท์ ดี่ ีในกลุ่มผู้เรียน 17. มมี รรยาทในการเรยี น

26. ช่วยเหลอื กนั ในการทางานใหต้ รงเวลา 18. มีสมั มาคาระต่อครผู สู้ อนและผู้อาวโุ ส
27. มคี วามรับผดิ ชอบในการใช้เครื่อง กวา่
คอมพวิ เตอร์

ส่ิงแวดลอ้ ม สมดลุ /พรอ้ มรับการเปลยี่ นแปลง
25. รกั ษาความสะอาดในหอ้ งเรยี น ใช้เครื่องคอมพิวเตอร์ทีม่ ีใหค้ มุ้ คา่ และเป็น
ประโยชนส์ ูงสดุ ตอ่ ผูเ้ รียน
26. ดูแลรกั ษาเครอื่ งคอมพิวเตอรใ์ ห้สะอาด
เสมอ

27. ปดิ ไฟ ปดิ เครื่องเมอ่ื เลกิ ใช้งาน

ศาสตรพ์ ระราชา

หลกั การทรงงาน ศาสตรส์ ากล ศาสตร์ภมู ปิ ญั ญา

1. การมีส่วนรว่ ม 1. ความมีเหตผุ ล 1. รักษาส่งิ แวดล้อม
2. ประยกุ ตก์ ารเรยี นรูท้ ห่ี ลากหลาย
2. ศึกษาข้อมลู อยา่ งเปน็ ระบบ 2. รอบรู้
3. .พร้อมปรับเปลย่ี นตามสถานการณ์
3. ทางานอย่างมคี วามสขุ 3. มีสติ

แผนการสอน หนว่ ยท่ี 9
สอนครัง้ ท่ี 15-16
ชื่อวิชา การสร้างเวบ็ ไซต์ (Website Creation) ชว่ั โมงรวม 64 ช.ม.
ชอื่ หน่วย การเชื่อมโยงและการทดสอบการทางานของเว็บไซต์
จานวน 8 ช.ม.
ช่อื เรือ่ ง รจู้ กั กบั การเช่ือมโยงเวบ็ ไซต์ การเชือ่ มโยงเว็บไซต์ การตรวจสอบการเชื่อมโยง
เว็บไซต์

6. กิจกรรมการเรยี นการสอน
ข้นั ตอนการสอนหรือกิจกรรมของครู
ขนั้ เตรียมการ
25. ครเู ตรียมเอกสารการสอน Power point การสอน
26. ครูเชค็ ชอ่ื การเข้าหอ้ งเรียน
27. นักเรียนตรวจสอบอปุ กรณ์ภายในห้องเรยี น
ขนั้ นา
15. ครตู รวจสอบการจัดเกบ็ ไฟล์ข้อมูลสรา้ งเว็บไซต์ ของผเู้ รียนแต่ละกลมุ่
16. ครูจดั ทาระบบจดั เกบ็ งานและแสดงคะแนนการส่งงานใหผ้ เู้ รียนตรวจสอบ
ขัน้ สอน
ทฤษฎี
ครูผูส้ อนสาธิตรจู้ กั กบั การเชอื่ มโยงเว็บไซต์ การเชือ่ มโยงเว็บไซต์ การตรวจสอบการเช่ือมโยงเว็บไซต์และ
บันทกึ วธิ กี ารปฏบิ ัติงานเผยแพรใ่ ห้ผู้เรียนทบทวนเนือหาการเรียนรผู้ ่าน เวบ็ ไซต์ www.kruwipawee.com
ปฏิบตั
35.ผสู้ อนใหผ้ ู้เรียนทาแบบทดสอบกอ่ นเรยี น
36.ผู้สอนให้ผเู้ รียนทา ใบงานท่ี แบบฝึกหัด หนว่ ยที่ 9 การเชอ่ื มโยงและการทดสอบการทางานของ
เวบ็ ไซต์
37.ผู้สอนให้ผูเ้ รียนทาแบบฝึกหัด หนว่ ยที่ 9
38.ผสู้ อนใหผ้ เู้ รียนทาแบบทดสอบหลังเรียน
39.ผสู้ อนให้ผูเ้ รียนปฏิบตั ิตามเนือหาท่ีครสู าธิตโดยใช้เรื่องทผ่ี ูเ้ รยี นไดค้ ัดเลือกตามสง่ ผลงานผ่านกล่มุ
รายวิชาเพื่อใหผ้ ู้สอนบันทกึ ความกา้ วหน้าของงาน

ขน้ั สรุป
17. ผสู้ อนและผเู้ รยี นรว่ มกันสรุปเนอื หาที่ได้เรียนให้มีความเข้าใจในทศิ ทางเดยี วกัน
18. ผู้สอนให้ผูเ้ รียนศกึ ษาเพิ่มเตมิ นอกห้องเรยี น ด้วยบทเรียนช่วยสอนที่จดั ทาขึน

7. สื่อและแหล่งการเรียนรู้
30.หนงั สือเรียนวชิ า การสรา้ งเว็บไซต์
31.แบบประเมินผลการเรียนรกู้ ่อนเรยี น/หลังเรยี นพรอ้ มเฉลย
สอื่ การสอน Power Point หน่วยการเรียนรทู้ ี่ 9
32.ส่อื การสอน www.kruwipawee.com

แผนการสอน หน่วยท่ี 9

ชื่อวิชา การสร้างเว็บไซต์ (Website Creation) สอนครั้งท่ี 15-16
ชอ่ื หน่วย การเชื่อมโยงและการทดสอบการทางานของเว็บไซต์ ช่วั โมงรวม 64 ช.ม.

ช่อื เรื่อง รจู้ กั กับการเชือ่ มโยงเว็บไซต์ การเช่ือมโยงเวบ็ ไซต์ การตรวจสอบการเช่ือมโยง จานวน 8 ช.ม.

เวบ็ ไซต์

8. วดั และประเมินผล

8.1 เครือ่ งมือประเมิน

8.8.1 ตรวจแบบประเมินผลการเรียนรกู้ อ่ นเรยี น

8.1.2 สังเกตพฤตกิ รรมการปฏบิ ัตงิ าน

8.2 เกณฑ์การประเมิน

เกณฑ์การประเมนิ ตามแบบทดสอบประจาหนว่ ยและแบบประเมนิ ชนิ้ งาน

เกณฑก์ ารประเมนิ ผลการประเมิน

ระดบั คะแนน รอ้ ยละ 80-100 ระดับดีมาก

ระดบั คะแนน ร้อยละ 70-79 ระดบั ดี

ระดบั คะแนน ร้อยละ 60-69 ระดับปานกลาง

ระดบั คะแนน ร้อยละ 50-59 ระดบั ผา่ นเกณฑ์

ระดับคะแนน ต่ากวา่ รอ้ ยละ 50 ไมผ่ า่ นเกณฑ์การประเมนิ

หมายเหตุ คะแนนในการประเมิน มคี ะแนนเต็มเท่ากับ 5 คะแนน