30204-2103_การพัฒนาเว็บไซต์ทางธุรกิจ

35

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

ชอื่ วิชา การพฒั นาเวบ็ ไซต์ทางธรุ กิจ สอนครง้ั ท่ี 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 การเตรยี มพ้นื ทส่ี าหรบั ใส่ขอ้ ความ

36

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

ชือ่ วิชา การพฒั นาเว็บไซต์ทางธุรกจิ สอนครั้งที่ 6-7

ช่อื หน่วย การออกแบบและใช้โปรแกรมกราฟกิ เสริมในการสร้าง ชวั่ โมงรวม 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

37

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

ช่ือวิชา การพฒั นาเวบ็ ไซต์ทางธุรกิจ สอนคร้ังท่ี 6-7

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

เว็บไซต์

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

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

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

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

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

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

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

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

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

38

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

ชอ่ื วิชา การพัฒนาเว็บไซต์ทางธรุ กจิ สอนครั้งที่ 6-7

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

เวบ็ ไซต์

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1. คลิกท่ีเมนู File> Export Movie
2. ต้ังช่ือไฟล์ head.swf เลือกตาแหน่งท่ีเก็บไฟล์ คลิก save

39

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

ชื่อวิชา การพฒั นาเวบ็ ไซต์ทางธรุ กิจ สอนครง้ั ท่ี 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 เป็นโปรแกรมสาหรบั ปฏบิ ัตกิ ารใด
ก. ตัดต่อวดี โี อ
ข. สรา้ งภาพเคลอื่ นไหว
ค. ตดั แต่งภาพ
ง. สรา้ งเอกสาร

40

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

ชอ่ื วิชา การพฒั นาเวบ็ ไซต์ทางธรุ กิจ สอนครง้ั ที่ 6-7

ชอ่ื หน่วย การออกแบบและใช้โปรแกรมกราฟกิ เสริมในการสรา้ ง ชัว่ โมงรวม 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

41

แผนการสอน หนว่ ยท่ี 5
สอนครง้ั ท่ี 8
ชื่อวิชา การพัฒนาเวบ็ ไซต์ทางธรุ กจิ ชวั่ โมงรวม32 ช.ม.

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

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

1. สาระสาคญั

ปัจจุบันการเคร่ืองมือในการสร้างเว็บไซต์มีหลายโปรแกรม และโปรแกรม 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. จดุ ประสงค์การเรยี นรู้
จดุ ประสงคท์ ่ัวไป
1. มีความร้เู กยี่ วกับโปรแกรม Adobe Dreamweaver CC 2018
2. สามารถตดิ ต้งั โปรแกรม Adobe Dreamweaver CC 2018 ได้
3. บอกส่วนประกอบตา่ ง ๆ ของโปรแกรม Adobe Dreamweaver CC 2018 ได้

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

42

แผนการสอน หนว่ ยที่ 5
สอนครงั้ ท่ี 8
ช่ือวิชา การพัฒนาเว็บไซต์ทางธรุ กิจ ชัว่ โมงรวม 32 ช.ม.

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

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

4. การบรู ณาการหลักปรชั ญาของเศรษฐกิจพอเพยี ง เง่อื นไขคุณธรรม
1. มีความอดทน
เงอื่ นไขความรู้ 2. มคี วามขยัน
3. มีความรบั ผดิ ชอบ
แสดงความรเู้ ก่ยี วกบั โปรแกรม Adobe 4. มีความมวี ินยั ในการเรียน
Dreamweaver CC 2018 การตดิ ตั้งโปรแกรม 5. มจี ริยธรรมในการเรยี นคอมพวิ เตอร์
และส่วนประกอบตา่ ง ๆ ของโปรแกรม

พอประมาณ

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

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

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

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

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

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

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

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

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

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

43

แผนการสอน หน่วยท่ี 5
สอนครง้ั ที่ 8
ชอ่ื วิชา การพัฒนาเว็บไซต์ทางธรุ กจิ ช่ัวโมงรวม 32 ช.ม.

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

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

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

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

7. ส่ือและแหล่งการเรยี นรู้
1. หนังสอื เรียนวิชา การสรา้ งเวบ็ ไซต์
2. แบบประเมินผลการเรยี นร้กู อ่ นเรียน/หลงั เรยี นพรอ้ มเฉลย
สอ่ื การสอน Power Point หนว่ ยการเรียนรู้ท่ี5 การติดตัง้ และใช้งานโปรแกรม Adobe Dreamweaver
CC2018
3. ส่ือการสอน www.kruwipawee.com

44

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

ชือ่ วิชา การพฒั นาเว็บไซต์ทางธุรกจิ สอนคร้งั ท่ี 8

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

CC 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 คะแนน

45

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

ชือ่ วิชา การพัฒนาเว็บไซต์ทางธุรกจิ สอนครง้ั ท่ี 8

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

CC 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 บิต บิต

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

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

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

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

46

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

ชือ่ วิชา การพฒั นาเว็บไซต์ทางธรุ กิจ สอนคร้ังที่ 8

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

CC 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

47

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

ชอ่ื วิชา การพฒั นาเวบ็ ไซต์ทางธุรกจิ สอนครง้ั ท่ี 8

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

CC 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

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

48

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

ชื่อวิชา การพัฒนาเวบ็ ไซต์ทางธรุ กจิ สอนครง้ั ท่ี 8

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

CC 2018

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

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

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

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

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

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

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

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

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

3. จงบอกขั้นตอนการตดิ ตั้งโปรแกรม Adobe Dreamweaver CC
ตอบ ดาวนโ์ หลดและติดตัง้ โปรแกรม Creative Cloud apps ติดตั้งและลงชอื่ เข้าใช้งาน เม่อื ตดิ ตั้งเสรจ็

เรยี บรอ้ ยจะแสดงหน้าจอ Creative Cloud แสดงโปรแกรมต่าง ๆ ของบริษัท Adobe ทส่ี ามารถดาวนโ์ หลดมา

ใช้งานได้ ในหน่วยนีจ้ ะใช้เวอร์ชน่ั ทดลองใช้ (Try) คลกิ โปรแกรม Dreamweaver CC คลกิ ปุ่ม Try รอสกั ครู่

โปรแกรม Creative Cloud กาลงั ทาการติดต้ังโปรแกรม Dreamweaver CCเมือ่ ติดต้ังเสรจ็ เรียบร้อย คลกิ ปมุ่

Start Trial

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

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

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

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

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

49

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

ช่อื วิชา การพัฒนาเวบ็ ไซต์ทางธุรกิจ สอนคร้งั ท่ี 8

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

CC 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

50

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

ชื่อวิชา การพัฒนาเว็บไซต์ทางธุรกิจ สอนคร้ังท่ี 8

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

CC 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

51

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

ชือ่ วิชา การพฒั นาเวบ็ ไซต์ทางธุรกิจ สอนครั้งที่ 9-10

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

CC 2018

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

จัดการ

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

1. สาระสาคญั

หลังจากท่ีได้ติดตั้งโปรแกรมและรู้จักส่วนประกอบต่าง ๆ ของโปรแกรม 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. สามารถบันทกึ เอกสารเวบ็ ไซตไ์ ด้

52

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

ชอื่ วิชา การพัฒนาเว็บไซต์ทางธรุ กจิ สอนคร้งั ที่ 9-10

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

CC 2018

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

จัดการ

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

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

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

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

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

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

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

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

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

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

53

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

ชื่อวิชา การพฒั นาเว็บไซต์ทางธุรกจิ สอนคร้งั ท่ี 9-10

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

CC 2018

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

จดั การ

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

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

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

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

54

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

ช่อื วิชา การพฒั นาเว็บไซต์ทางธรุ กจิ สอนคร้งั ท่ี 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 คะแนน

55

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

ชื่อวิชา การพัฒนาเว็บไซต์ทางธุรกจิ สอนครัง้ ที่ 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) กาหนดคณุ สมบตั ติ าม

ต้องการ

56

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

ชื่อวิชา การพฒั นาเว็บไซต์ทางธุรกิจ สอนคร้งั ท่ี 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. ไฟล์ท่บี ันทึกแลว้ จะแสดงทแ่ี ทบ็

57

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

ช่อื วิชา การพฒั นาเว็บไซต์ทางธรุ กิจ สอนครั้งท่ี 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 : ……………………………………………………………………….

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

58

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

ชอ่ื วิชา การพัฒนาเว็บไซต์ทางธุรกิจ สอนครัง้ ที่ 9-10

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

Dreamweaver 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 เพอื่ บนั ทกึ ข้อมูล

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

59

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

ชอ่ื วิชา การพฒั นาเว็บไซต์ทางธุรกิจ สอนครงั้ ท่ี 9-10

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

Dreamweaver 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 มคี วามหมายตรงกบั ข้อใด
ก. สรา้ งไฟลใ์ หม่
ข. การจดั การข้อมลู ให้สามารถใช้งานรว่ มกบั ผู้อ่ืนได้
ค. การเตรยี มพื้นทจี่ ัดเกบ็ ไฟลเ์ อกสารท้งั หมด
ง. สร้างเว็บไซต์ด้วยแม่แบบ

60

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

ช่อื วิชา การพฒั นาเว็บไซต์ทางธุรกิจ สอนครัง้ ท่ี 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

61

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

ชือ่ วิชา การพฒั นาเวบ็ ไซต์ทางธรุ กิจ สอนครง้ั ท่ี 11-12

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

ในเว็บไซต์

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

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

1. สาระสาคัญ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

62

แผนการสอน หน่วยท่ี 7
สอนครัง้ ท่ี 11-12
ชอ่ื วิชา การพัฒนาเว็บไซต์ทางธุรกิจ ชวั่ โมงรวม 48 ช.ม.

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

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

4. การบรู ณาการหลกั ปรัชญาของเศรษฐกจิ พอเพียง เงอ่ื นไขคุณธรรม
1. มีความอดทน
เง่อื นไขความรู้ 2. มีความขยัน
แสดงความรู้เกี่ยวการจดั การไฟลภ์ าพกราฟกิ ในเวบ็ ไซต์ 3. มคี วามรับผิดชอบ
แสดงความรเู้ กี่ยวกับการจัดการไฟล์ภาพเคลอ่ื นไหวใน 4. มีความมีวินยั ในการเรยี น
เว็บไซต์ 5. มจี ริยธรรมในการเรียนคอมพวิ เตอร์
แสดงความรเู้ กีย่ วกบั การจดั การขอ้ ความในเวบ็ ไซต์

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

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

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

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

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

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

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

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

63

แผนการสอน หนว่ ยที่ 7
สอนคร้งั ท่ี 11-12
ชื่อวิชา การพฒั นาเว็บไซต์ทางธรุ กิจ ช่ัวโมงรวม 48 ช.ม.

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

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

6. กิจกรรมการเรยี นการสอน
ขน้ั ตอนการสอนหรือกจิ กรรมของครู
ข้ันเตรยี มการ
1. ครเู ตรียมเอกสารการสอน Power point การสอน
2. ครเู ช็คชอ่ื การเข้าหอ้ งเรียน
3. นักเรียนตรวจสอบอปุ กรณ์ภายในห้องเรยี น
ขัน้ นา
1. ครตู รวจสอบการจดั เกบ็ ไฟล์ข้อมลู การสรา้ งแม่แบบเอกสารเวบ็ ไซต์
2. ครจู ดั ทาระบบจัดเก็บงานและแสดงคะแนนการส่งงานใหผ้ เู้ รียนตรวจสอบ
ขน้ั สอน
ทฤษฎี
ครูผู้สอนสาธิตการสร้างเว็บไซต์แต่ละขั้นตอนใหผ้ เู้ รียนปฏบิ ัตติ าม และบันทึกวธิ ีการปฏิบัติงานเผยแพร่
ให้ผู้เรียนทบทวนเนื้อหาการเรยี นรู้ผ่าน เว็บไซต์ www.kruwipawee.com
ปฏิบตั
1. ผสู้ อนให้ผเู้ รียนทาแบบทดสอบก่อนเรยี น
2. ผสู้ อนใหผ้ เู้ รยี นทา ใบงานที่ 7 การจัดการไฟลร์ ูปภาพ ภาพเคล่ือนไหวและข้อความในเว็บไซต์
3. ผู้สอนให้ผเู้ รยี นทาแบบฝกึ หัด หน่วยท่ี 7
4. ผสู้ อนให้ผู้เรียนทาแบบทดสอบหลงั เรยี น
5. ผู้สอนให้ผูเ้ รียนปฏบิ ตั ิตามเน้ือหาท่คี รูสาธติ โดยใช้เรื่องทผี่ เู้ รยี นได้คดั เลือกตามส่งผลงานผ่านกลุ่ม
รายวชิ าเพ่ือให้ผู้สอนบันทึกความก้าวหนา้ ของงาน

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

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

64

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

ช่ือวิชา การพฒั นาเวบ็ ไซต์ทางธุรกจิ สอนครงั้ ท่ี 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 คะแนน

65

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

ช่อื วิชา การพฒั นาเวบ็ ไซต์ทางธรุ กจิ สอนคร้งั ท่ี 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=""/> หมายถึง ขอ้ ความคาอธิบายรูปภาพบนเว็บไซต์ =””

66

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

ชื่อวิชา การพัฒนาเวบ็ ไซต์ทางธรุ กิจ สอนคร้งั ท่ี 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 การจดั การขอ้ ความในเวบ็ ไซต์

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

67

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

ช่อื วิชา การพฒั นาเว็บไซต์ทางธรุ กจิ สอนคร้งั ท่ี 11-12

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

ในเวบ็ ไซต์

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

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

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

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

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

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

68

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

ช่ือวิชา การพัฒนาเว็บไซต์ทางธรุ กิจ สอนคร้ังที่ 11-12

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

ในเวบ็ ไซต์ ม.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

69

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

ชื่อวิชา การพฒั นาเว็บไซต์ทางธรุ กิจ สอนครั้งที่ 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. จากรูป ขอ้ ใดถูกตอ้ ง
ก. เครอ่ื งมือแทรกภาพเคลื่อนไหว
ข. เครอ่ื งมอื แทรกภาพกราฟิก
ค. เครื่องมอื แทรกตาราง
ง. เครอื่ งมอื แทรกกราฟ

70

แผนการสอน หน่วยที่ 7
สอนครัง้ ท่ี 11-12
ชอ่ื วิชา การพัฒนาเว็บไซต์ทางธุรกจิ ชั่วโมงรวม 48 ช.ม.

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

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

6. ขอ้ ใดคือความหมายของ Alt Attribute
ก. คาอธิบายรปู ภาพบนเว็บไซต์
ข. ชือ่ รปู ภาพบนเว็บไซต์
ค. แหล่งเกบ็ ขอ้ มูลในเว็บไซต์
ง. ตาแหนง่ ท่อี ยขู่ องรปู ภาพเว็บไซต์

7. ข้อใด คอื คาสั่งทาให้ตัวอักษรเคลอ่ื นท่ี
ก. <marquee></marquee>
ข. <Slide></Slide>
ค. <img sr ……………/>
ง. <Br>

8. หากตารางอย่ใู นแท็ก<marquee>……</marquee>
ก. ตารางจะมขี นาดโตข้นึ
ข. ตารางจะกระพรบิ ตลอดเวลา
ค. ตารางจะเคลื่อนท่ี
ง. ตารางจะอยู่ตาแหนง่ บนสุดชดิ ซา้ ย

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

10. จากภาพ คือเครื่องมือใชท้ าอะไร
ก. แทรกภาพกราฟิก
ข. แทรกภาพเคล่ือนไหว
ค. แทรกตาราง
ง. แทรกข้อความ

71

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

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

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

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

เนื้อหาสาหรับเว็บไซต์เสรจ็ เรียบร้อยแล้ว เนื้อหาในหน่วยนี้จะประกอบไปด้วย การเพิ่มเทคนิคพิเศษให้กับเว็บไซต์
การกาหนดพฤติกรรมการแสดงผลของภาพในเวบ็ ไซต์ การเพม่ิ วีดีโอ 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 ในเว็บไซต์

72

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

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

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

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

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

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

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

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

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

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

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

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

73

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

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

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

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

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

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

74

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

ช่อื วิชา การพัฒนาเวบ็ ไซต์ทางธุรกจิ สอนคร้ังที่ 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 คะแนน

75

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

ช่ือวิชา การพฒั นาเว็บไซต์ทางธุรกิจ สอนครง้ั ท่ี 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

76

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

ช่ือวิชา การพฒั นาเว็บไซต์ทางธุรกิจ สอนคร้งั ที่ 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>

77

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

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

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

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

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

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

78

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

ชอ่ื วิชา การพัฒนาเว็บไซต์ทางธุรกจิ สอนคร้งั ท่ี 13-14

ชอื่ หน่วย การเพ่ิมเทคนคิ พิเศษใหก้ ับเว็บไซต์ ชว่ั โมงรวม 56 ช.

ม.

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

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

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

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

1. เคร่อื งมอื ใดบา้ งโปรแกรม Adobe Dreamweaver CC 2018 ทชี่ ว่ ยใหผ้ ้สู รา้ งสามารถเพิม่ เทคนคิ พิเศษให้กบั

เว็บไซต์

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

โปรแกรมสนบั สนนุ ได้แก่ HTML5 Video Canvas Flash Rollover Image Java Script ActiveX และ

Plug in เป็นต้น

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

2. การกาหนดพฤติกรรมการแสดงผลของภาพในโปรแกรม Adobe Dreamweaver CC 2018 สามารถทาอะไร

ไดบ้ า้ ง

ตอบ Effects Goto URL Jump Menu Show-Hide Elements Swap Image

Swap Image Restore เปน็ ต้น

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

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

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

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

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

79

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

ชือ่ วิชา การพฒั นาเว็บไซต์ทางธุรกิจ สอนครง้ั ที่ 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 คอื
ก. โหลดรปู ภาพทุกคร้ัง
ข. คืนคา่ รูปภาพเดิมเม่ือเอาเมาส์ออก
ค. คืนคา่ ข้อความเม่ือเอาเมาสอ์ อก
ง. โหลดขอ้ ความเมื่อเอาเมาส์ออก

80

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

ชื่อวิชา การพัฒนาเวบ็ ไซต์ทางธรุ กิจ สอนครงั้ ท่ี 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

81

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

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

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

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

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

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

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

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

82

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

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

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

พอประมาณ
1.จานวนผเู้ รยี น

2. ระยะเวลาในการเรยี นการสอน
3. การใช้ทรัพยากรร่วมกนั

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

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

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

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

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

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

83

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

6. กจิ กรรมการเรียนการสอน
ขน้ั ตอนการสอนหรือกจิ กรรมของครู
ขั้นเตรียมการ
1. ครูเตรยี มเอกสารการสอน Power point การสอน
2. ครูเชค็ ช่ือการเข้าหอ้ งเรยี น
3. นักเรยี นตรวจสอบอปุ กรณภ์ ายในหอ้ งเรียน
ข้ันนา
1. ครตู รวจสอบการจัดเก็บไฟลข์ ้อมลู สร้างเวบ็ ไซต์ ของผเู้ รยี นแตล่ ะกลุม่
2. ครูจดั ทาระบบจัดเกบ็ งานและแสดงคะแนนการส่งงานให้ผเู้ รยี นตรวจสอบ
ขัน้ สอน
ทฤษฎี
ครูผ้สู อนสาธิตรจู้ ักกบั การเชอ่ื มโยงเว็บไซต์ การเชือ่ มโยงเว็บไซต์ การตรวจสอบการเช่ือมโยงเวบ็ ไซต์
และบันทึกวธิ กี ารปฏิบตั ิงานเผยแพรใ่ หผ้ ้เู รียนทบทวนเน้ือหาการเรียนรผู้ า่ น เว็บไซต์
www.kruwipawee.com
ปฏบิ ตั
1. ผูส้ อนใหผ้ เู้ รยี นทาแบบทดสอบกอ่ นเรยี น
2. ผู้สอนใหผ้ เู้ รยี นทา ใบงานที่ แบบฝึกหัด หน่วยท่ี 9 การเชือ่ มโยงและการทดสอบการทางานของ
เวบ็ ไซต์
3. ผสู้ อนให้ผเู้ รียนทาแบบฝกึ หัด หนว่ ยท่ี 9
4. ผสู้ อนใหผ้ ู้เรียนทาแบบทดสอบหลังเรียน
5. ผสู้ อนใหผ้ ้เู รยี นปฏบิ ตั ติ ามเนื้อหาท่ีครสู าธิตโดยใช้เร่อื งที่ผู้เรยี นได้คดั เลือกตามส่งผลงานผา่ นกลมุ่
รายวิชาเพือ่ ใหผ้ สู้ อนบันทึกความกา้ วหน้าของงาน

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

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

84

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

ช่ือวิชา การพฒั นาเวบ็ ไซต์ทางธุรกจิ สอนคร้งั ที่ 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 คะแนน