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

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

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

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

9.1 ร้จู ักกบั การเชอื่ มโยงเว็บไซต์
การเช่ือมโยงเว็บไซต์ คือ การกาหนดส่วนของข้อความ หรือรูปภาพที่ต้องการ ในเว็บเพจหน้าหนึ่งให้

เชื่อมโยงไปยังเว็บเพจหน้าอื่น ๆ ซ่ึงเนือหาท่ีเช่ือมโยงนันอาจจะอยู่ภายในหน้าเดียวกันเว็บไซต์เดียวกันหรืออยู่คนละ
หน้าตา่ งเว็บไซต์ก็ได้ การเชอ่ื มโยงหน้าเวบ็ เพจแต่ละหนา้ จะประกอบ ด้วย ลิงก์ (Link) หรอื จดุ ท่ีใชส้ าหรับเช่ือมโยงไป
ยังเป้าหมายปลายทางอาจเป็นรูปภาพหรือข้อความ ก็ได้ และเป้าหมาย (Target) เป็นส่วนปลายทางหรือจุดที่
ต้องการให้เช่ือมโยงมาถึงจะอยู่ส่วนใด ของเอกสารก็ได้ การเช่ือมโยงเว็บไซต์แบ่งเป็น การเช่ือมโยงเว็บเพจมี
ดว้ ยกันหลายประเภท แบง่ ตามวตั ถุประสงค์ของการใช้งานจะแบ่งการเช่ือมโยงบนเวบ็ เพจออกเปน็ 5 ประเภท ดงั นี

- การเชอ่ื มโยงภายในหนา้ เว็บเดียวกัน
- การเชือ่ มโยงภายในเว็บไซต์
- การเชอ่ื มโยงภายนอกเวบ็ ไซต์
- การเช่ือมโยงเพื่อส่งอเี มล์
- การเช่ือมโยงดว้ ย Map Link
ตวั อยา่ งการเช่ือมโยงเว็บไซต์ เช่น

contact .html

index.html product.htm

9.2 การเช่ือมโยงเวบ็ ไซต์ l

9.2.1 การเช่อื มโยงภายในเว็บเพจเดยี วกนั

การเชื่อมโยงภายในหน้าเว็บเดียวกัน หากข้อมูลในหน้าเดียวกันมีขนาดยาวมากทาให้ต้องเล่ือนแถบ

Scroll Bar เพื่อเลื่อนดูข้อมูล สามารถสร้างจุดเชื่อมโยงข้อมูลส่วนดังกล่าวให้เช่ือมโยง ดูข้อมูลที่ต้องการได้โดยไม่

ต้องเลื่อน Scroll Bar ชุดคาสงั่ ในการเชือ่ มโยงเว็บเพจหนา้ เดียวกนั

9.2.2 การเชอื่ มโยงภายในเวบ็ ไซต์

การเชอื่ มโยงภายในเว็บไซตก์ ารเชื่อมโยงลกั ษณะนีเป็นการเชื่อมโยงไปยงั หนา้ เว็บหนึง่ ที่อยใู่ น

เว็บไซตเ์ ดียวกนั

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

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

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

i. การเชือ่ มโยงภายนอกเว็บไซต์
9.2.3 ขันตอนการเชื่อมโยงภายนอกเว็บไซต์

การเชื่อมโยงภายนอกเวบ็ ไซต์ คอื การสรา้ งจดุ เชื่อมโยงไปยังเว็บไซต์อน่ื ๆ สามารถทาได้โดยการ
พมิ พ์ http:// นาหนา้ ชื่อเว็บไซตท์ ตี่ ้องการเชือ่ มโยง
9.2.4 การเชื่อมโยงเพื่อส่งอเี มล์
การเชอื่ มโยงเพื่อสง่ อีเมลเ์ พ่ือจะตอ้ งมีการสร้างจุดเชอ่ื มโยงเพือ่ ติดต่อไปยงั อเี มล์แอดเดรสของผ้ดู แู ลระบบ
โดยไมต่ ้องเสยี เวลาพิมพอ์ ีเมล์แอดเดรส โดยสามารถกาหนดจุดเชื่อมโยงเพ่ือสง่ อเี มล์ได้ทังแบบข้อความและรปู ภาพ
9.2.5 การเชื่อมโยงดว้ ย Map Link
การเชื่อมโยงดว้ ย Map Link เป็นการกาหนดจดุ การเชือ่ มโยงบนภาพกราฟิก ซึ่งสามารถใชเ้ ครือ่ งมือ
Map จาก Properties ในการวาดรูปทรงต่าง ๆ เพื่อกาหนดพืนท่ีลงิ กใ์ หส้ ามารถกาหนดขอบเขตการ
เช่อื มโยงบนภาพกราฟิกได้

9.4 การตรวจสอบการเช่ือมโยงเวบ็ ไซต์
ก่อนทาการอัปโหลดไฟล์เว็บขึนสู่ระบบอินเทอร์เน็ต การตรวจสอบการเชื่อมโยงของเว็บเพจ ถือว่าเป็นสิ่งท่ี

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

2. คลิกท่ีเมนู Site >Site Options >Check Links Sitewide หรอื กด Ctrl+F8

3. จะปรากฏหนา้ ตา่ งการตรวจสอบในโปรแกรม Adobe Dreamweaver CC 2018 จะสามารถ
ตรวจสอบกอ่ นการอัพโหลดไฟล์ 3 ฟงั ก์ช่นั คือ

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

5. External Links คอื ลงิ ก์ภายท่ีเชอ่ื มโยงในเว็บไซต์
6. Orphaned Files คอื ไฟล์ทเ่ี ก็บในไซตแ์ ต่ไม่ไดถ้ ูกใช้งาน

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

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

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

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

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

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

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

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

แบบฝึกหัด หน่วยท่ี 9 การเช่อื มโยงและการทดสอบการทางานของเว็บไซต์

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

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

17.การเชอ่ื มโยงบนเวบ็ เพจแบ่งออกเป็นก่ปี ระเภท
ตอบ การเช่ือมโยงเวบ็ เพจมีด้วยกนั หลายประเภท แบ่งตามวัตถุประสงค์ของการใช้งานจะแบง่ การเชื่อมโยงบน
เวบ็ เพจออกเปน็ 5 ประเภท ดังนี การเชอ่ื มโยงภายในหน้าเว็บเดียวกัน การเช่ือมโยงภายในเวบ็ ไซต์ การ
เช่อื มโยงภายนอกเวบ็ ไซต์ การเชื่อมโยงเพ่ือสง่ อีเมล์ การเช่ือมโยงด้วย Map Link
............................................................................................................................. ...........................

18. การเชอ่ื มโยงภายในเวบ็ เพจเดียวกนั จะใชใ้ นกรณีใด

ตอบ การเชื่อมโยงภายในหน้าเวบ็ เดยี วกัน หากข้อมลู ในหน้าเดียวกันมขี นาดยาวมากทาใหต้ ้องเลอื่ นแถบ Scroll
Bar เพื่อเล่ือนดูข้อมูล

................................................................................................................... .....................................
19.Target เปน็ การกาหนดวธิ ีเปิดหนา้ เวบ็ ท่เี ช่ือมโยง มีก่รี ูปแบบ

ตอบ Target เป็นการกาหนดวิธเี ปิดหน้าเว็บท่ีเชื่อมโยง ดงั นี Default , _blank , _new , _parent

_self , _top

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

20. การปรับสีของ Hyperlink ในหนา้ ต่าง Properties แถบ Links (CSS) มอี ะไรบ้าง
ตอบ – Link Color คอื การระบสุ ีตวั อักษรของลิงก์ท่ีมีลงิ ก์ขอ้ มูลทังหมด
– Visited Links คอื การระบุสีของลิงก์หลังจากคลกิ เปิดการเช่ือมโยงแล้ว สขี องตัวอักษรจะเปลย่ี นเปน็ สี

ที่กาหนดไวใ้ นช่อง Visited Links ตามที่กาหนด
– Rollover Links คือ การระบุสีของลิงกเ์ มื่อวางเมาส์อย่บู นข้อความลงิ ก์ สขี องตวั อักษรจะเปล่ียนสที ี่ได้

กาหนดในช่อง Rollover Links ตามท่ีกาหนด
– Active Link : คือ การระบุสีของลิงก์เม่ือใชเ้ มาสค์ ลิกทข่ี ้อความลงิ ก์ สีของตัวอักษรจะเปลี่ยนเป็นสีท่ไี ด้

กาหนดไว้ในช่อง Active Links ตามท่ีได้กาหนดไว้
................................................................................................................................................... ....

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

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

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

แบบทดสอบหลงั เรียน
หน่วยที่ 9 การเชอื่ มโยงและการทดสอบการทางานของเว็บไซต์

จงทาเครื่องหมาย (X) ทับตวั เลือกทีถ่ ูกตอ้ ง
1. การเช่ือมโยงในข้อใดใชแ้ ทนการเล่ือน Scroll Bar

ก. การเชอ่ื มโยงภายในหนา้ เวบ็ เดียวกัน
ข. การเช่ือมโยงภายในเวบ็ ไซต์
ค. การเชื่อมโยงภายนอกเว็บไซต์
ง. การเช่ือมโยงเพ่ือส่งอเี มล์
2. Target ในข้อใดใช้กาหนดการเปดิ หนา้ เวบ็ ท่เี ช่อื มโยงในหน้าต่างเบราวเ์ ซอร์ใหม่อีกหนา้ ตา่ ง
ก. _self
ข. _top
ค. _parent
ง. _new
3. คาสัง่ <a href="product.html" target="_self">- สนิ คา้ </a> คอื คาส่ังในการเช่ือมโยงแบบใด
ก. การเชอ่ื มโยงภายในเว็บไซต์
ข. การเช่ือมโยงภายนอกเวบ็ ไซต์
ค. การเชือ่ มโยงเพ่ือส่งอเี มล์
ง. การเช่ือมโยงดว้ ย Map Link
4. การเชอ่ื มโยง โดยพมิ พ์คาว่า http:// แล้วตามด้วยชอ่ื ของเว็บไซต์คือการเชือ่ มโยงในข้อใด
ก. การเชอ่ื มโยงภายในเว็บไซต์
ข. การเชื่อมโยงภายนอกเว็บไซต์
ค. การเชื่อมโยงเพื่อสง่ อเี มล์
ง. การเชอื่ มโยงดว้ ย Map Link
5. หากตอ้ งการเชื่อมโยงข้อมูลบนรปู ภาพกราฟิกต้องใช้การเชอ่ื มโยงแบบใด
ก. การเชือ่ มโยงภายในเว็บไซต์
ข. การเชื่อมโยงภายนอกเวบ็ ไซต์
ค. การเชอ่ื มโยงเพื่อสง่ อเี มล์
ง. การเช่อื มโยงด้วย Map Link

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

ช่ือหน่วย การเช่ือมโยงและการทดสอบการทางานของเว็บไซต์ จานวน 8 ช.ม.

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

ก. Always underline
ข. Never underline
ค. Show underline only on rollover
ง. Hide underline on rollover
7. ข้อใดคือ การระบสุ ีของลิงกเ์ ม่อื ใชเ้ มาส์คลิกทีข่ ้อความลิงก์
ก. Link Color
ข. Visited Links
ค. Rollover Links
ง. Active Link
8. การกาหนดคุณสมบัติใหก้ ับการลิงกข์ ้อใดไมส่ ามารถทาได้
ก. Title/Encoding
ข. Appearance (CSS)
ค. Appearance (HTML)
ง. Links(CSS)
9. ขอ้ ใดคือคยี ์ลดั ของการตรวจสอบการเชื่อมโยงเว็บไซต์
ก. Ctrl+F5
ข. Ctrl+F2
ค. Ctrl+F1
ง. Ctrl+F8
10. ข้อใดคือลิงกท์ ่ีผใู้ ช้คลิกแล้วไม่สามารถเปดิ เว็บเพจท่ตี ้องการได้
ก. Broken Link
ข. External Links
ค. Orphaned Files
ง. Canvas Link

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

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

ชอื่ เร่อื ง การขอพนื ทีใ่ นการอัพโหลดเวบ็ ไซต์ โปรแกรมที่ใช้ในการอัพโหลดเว็บไซต์ การ จานวน 8 ช.ม.
อัพโหลดเวบ็ ไซต์

10. สาระสาคญั
หลังจากท่ีได้สร้างเว็บไซต์ รู้จักกับการเชื่อมโยงเว็บไซต์ การเชื่อมโยงเว็บไซต์การตรวจสอบการเช่ือมโยง

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

2. หวั เรือ่ ง/รายการสอน/สาระการเรียนรู้
10.1 การขอพืนที่ในการอัพโหลดเวบ็ ไซต์
10.2 โปรแกรมท่ใี ชใ้ นการอัพโหลดเวบ็ ไซต์
10.3 การอัพโหลดเวบ็ ไซต์

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

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

3. อพั โหลดเวบ็ ไซตไ์ ด้
จุดประสงคเ์ ชงิ พฤตกิ รรม

1. สามารถบอกการขอพนื ทใ่ี นการอัพโหลดเวบ็ ไซต์ได้
2. สามารถบอกโปรแกรมท่ีใชใ้ นการอพั โหลดเวบ็ ไซต์ได้

3. สามารถอพั โหลดเวบ็ ไซตไ์ ด้

แผนการสอน หนว่ ยที่ 10
สอนครั้งที่ 17-18
ชอ่ื วิชา การสรา้ งเวบ็ ไซต์ (Website Creation) ชว่ั โมงรวม 72 ช.ม.
ช่อื หน่วย การขอพนื้ ที่และการอพั โหลดเว็บไซต์
การ จานวน 8 ช.ม.
ช่ือเรื่อง การขอพนื ท่ใี นการอัพโหลดเว็บไซต์ โปรแกรมทีใ่ ชใ้ นการอัพโหลดเวบ็ ไซต์
อพั โหลดเว็บไซต์

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

เงอ่ื นไขความรู้ เง่ือนไขคณุ ธรรม
46. มคี วามอดทน
แสดงความรเู้ กี่ยวกับการขอพืนทแ่ี ละการ 47. มคี วามขยัน
อัพโหลดเวบ็ ไซต์ 48. มคี วามรบั ผิดชอบ
49. มีความมวี ินยั ในการเรียน
50. มีจริยธรรมในการเรียนคอมพวิ เตอร์

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

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

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

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

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

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

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

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

แผนการสอน หน่วยที่ 10
สอนครั้งที่ 17-18
ชือ่ วิชา การสรา้ งเวบ็ ไซต์ (Website Creation) ชัว่ โมงรวม 72 ช.ม.
ชือ่ หน่วย การขอพนื้ ที่และการอัพโหลดเวบ็ ไซต์
การ จานวน 8 ช.ม.
ช่ือเร่อื ง การขอพนื ท่ใี นการอัพโหลดเวบ็ ไซต์ โปรแกรมท่ใี ชใ้ นการอัพโหลดเว็บไซต์
อพั โหลดเว็บไซต์

6. กิจกรรมการเรยี นการสอน
ขั้นตอนการสอนหรอื กิจกรรมของครู
ขั้นเตรยี มการ
28. ครเู ตรียมเอกสารการสอน Power point การสอน
29. ครูเช็คช่อื การเขา้ ห้องเรยี น
30. นกั เรยี นตรวจสอบอปุ กรณ์ภายในห้องเรยี น
ขั้นนา
17. ครูสอบถามความรู้พืนฐานเก่ียวกับการอัพโหลดเวบ็ ไซต์และสอบถามแลกเปล่ยี นเรียนรู้กับผเู้ รยี นถึงการ
เตรยี มไฟลเ์ ว็บไซต์ในการอัพโหลด ปญั หาทีอ่ าจจะเกดิ ขนึ ในการอัพโหลดเว็บไซต์ และแนวทางการแกไ้ ข
ปัญหาต่าง ๆ เพ่ือให้ผเู้ รียนสามารถแกไ้ ขปัญหาได้ด้วยตนเอง
ขน้ั สอน
ทฤษฎี
ครผู สู้ อนสาธติ วธิ ีการขอพืนท่ีในการอัพโหลดเว็บไซต์ การติดตังโปรแกรมที่ใชใ้ นการอัพโหลดเวบ็ ไซต์ การ
อพั โหลดเวบ็ ไซต์ และบนั ทึกวธิ กี ารปฏบิ ัตงิ านเผยแพรใ่ ห้ผูเ้ รียนทบทวนเนือหาการเรยี นรู้ผ่าน เว็บไซต์
www.kruwipawee.com
ปฏบิ ตั
40.ผ้สู อนให้ผเู้ รยี นทาแบบทดสอบก่อนเรยี น
41.ผ้สู อนใหผ้ ูเ้ รียนทา ใบงานท่ี แบบฝึกหัด หนว่ ยที่ 10 ใบงานที่ 10 การขอพืนทแี่ ละการอัพโหลด
เวบ็ ไซต์ ผู้สอนให้ผูเ้ รยี นทาแบบฝึกหัด หน่วยที่ 10
42.ผสู้ อนใหผ้ ู้เรยี นทาแบบทดสอบหลงั เรยี น
43.ผสู้ อนให้ผเู้ รยี นปฏบิ ัติตามเนือหาทีค่ รูสาธิตโดยใหส้ มัครขอพนื ท่ีฟรี เมอื่ สมัครเสร็จเรยี บร้อยแลว้ ให้ทา
การอัพโหลดเว็บไซตเ์ พ่ือเผยแพร่ ส่งลิงกท์ ่ที าการเผยแพรผ่ ่านกลมุ่ รายวิชาเพื่อใหผ้ สู้ อนบันทึก
ความก้าวหนา้ ของงาน และสรปุ ผลการปฏบิ ตั ิงานก่อนทาการสอบภาคปฏบิ ัติต่อไป

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

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

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

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

ชื่อเรื่อง การขอพืนที่ในการอัพโหลดเวบ็ ไซต์ โปรแกรมทใี่ ชใ้ นการอัพโหลดเว็บไซต์ การ จานวน 8 ช.ม.

อพั โหลดเว็บไซต์

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ช่อื เรอ่ื ง การขอพืนท่ใี นการอัพโหลดเวบ็ ไซต์ โปรแกรมท่ีใชใ้ นการอัพโหลดเวบ็ ไซต์ การ จานวน 8 ช.ม.

อพั โหลดเว็บไซต์

10.1 การขอพ้ืนทใ่ี นการอัพโหลดเว็บไซต์

การขอพืนที่ในการอัพโหลดไฟล์เว็บไซต์ (Web Hosting ) คือ พืนที่สาหรับเก็บข้อมูลเว็บไซต์บน

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

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

คือ แบบเสียคา่ ใช้จ่าย และแบบให้บรกิ ารฟรี ซึ่งมขี อ้ แตกตา่ งกนั ดังนี

10.1 Web Hosting แบบเสยี ค่าใช้จา่ ย จะเปน็ พนื ทเี่ หมาะกับเวบ็ ไซตท์ ่ตี ้องการความน่าเช่อื ถือ

เชน่ เวบ็ ไซตห์ น่วยงาน เว็บไซตข์ ายสนิ ค้า เวบ็ ไซต์บริษทั หรือเว็บไซต์ใหบ้ ริการตา่ ง ๆ เน่ืองจากสามารถใช้ชอ่ื

Domain Name ท่ีจดทะเบยี นไว้ได้ โดยรองรบั ระบบฐานข้อมูล และภาษาสครปิ ต์ ตา่ งๆ หรือ Free E-mail Hosting

ประเภทนีจะมที มี งานทคี่ อยดูแลระบบ Server เพื่อให้มีความเสถียรในการทางาน

10.1.2 Web Hosting แบบใหบ้ ริการฟรี เป็น Host ทเ่ี หมาะกบั เว็บไซต์ทีอ่ อกแบบ เพ่อื

การศึกษาทดลองที่ไมห่ วงั ผลทางธุรกิจ มขี ้อจากัดในการใช้งาน เชน่ ใหพ้ นื ท่นี อ้ ยไม่มี E-mail และมกั จะมีปา้ ยโฆษณา

บนเว็บไซต์ให้อัตโนมตั ิ

10.2 โปรแกรมทใี่ ช้ในการอพั โหลดเวบ็ ไซต์

FTP ย่อมาจาก File Transfer Protocol คือ โปรโตคอลเครือข่ายชนิดหน่ึง ถูกนาใช้ในการถ่ายโอนไฟล์

ระหว่างเคร่ืองคอมพิวเตอร์ การถ่ายโอนไฟล์ระหว่าง ไคลเอนต์ (client) กับเครื่องคอมพิวเตอร์ท่ีเป็นแม่ข่าย เรียกว่า

Hosting หรือ Server ซึ่งทาให้การถ่ายโอนไฟล์ง่ายและปลอดภัย การใช้ FTP ท่ีพบบ่อยสุด เช่น การดาวนโ์ หลดไฟล์

จากอินเทอร์เนต็ ความสามารถในการถ่ายโอนไฟล์ ทาให้ FTP เป็นสิ่งจาเปน็ เม่ือสรา้ งเว็บไซตเ์ สรจ็ เรียบร้อยแล้ว โดย

ท่กี ารตดิ ต่อกันทาง FTP จะต้องติดต่อผ่าน Port 21 ซึ่งก่อนที่จะเข้าใช้งานได้นัน จะต้องเป็นสมาชิกและมีชอื่ ผู้เข้าใช้

(User) และ รหัสผู้เข้าใช้ (password) ก่อน โปรแกรมท่ีนิยมใช้ในการถ่ายโอนไฟล์ข้อมูลได้แก่ โปรแกรม FileZilla

CuteFTP หรือ WSFTP เปน็ ต้น

FTP แบง่ เป็น 2 ส่วน

1. FTP server เปน็ โปรแกรมท่ีถูกติดตงั ไวท้ เ่ี ครื่องเซิฟเวอร์ ทาหนา้ ท่ใี หบ้ ริการ FTP หากมกี ารเช่ือมต่อ

จากไคลแอนเขา้ ไป

2. FTP client เปน็ โปรแกรม FTP ทถี่ กู ตดิ ตังในเคร่ืองคอมพวิ เตอร์ของ user ท่วั ๆ ไป ทาหนา้ ทเี่ ชื่อม

ตอ่ ไปยัง FTP server และทาการอัพโหลด ดาวน์โหลดไฟล์ หรอื จะสั่งแก้ไขชื่อไฟล์ ลบไฟล์ และเคลื่อนย้ายไฟลก์ ็ได้

เช่นกัน

10.3 การอัพโหลดเวบ็ ไซต์

เมื่อขอพืนที่ (Web Hosting) เพ่ืออัพโหลดเว็บไซต์บนระบบอินเทอร์เน็ตเรียบร้อยแล้วขันตอนต่อไปคือ

การโอนข้อมูลไปยังพืนที่ที่ได้ขอไว้ โปรแกรมที่ใช้ในการอัพโหลดไฟล์ได้แก่ SSH Secure Shell, FileZilla เป็นต้น

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

ดาวน์โหลดมาตดิ ตงั ฟรไี ด้

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

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

ชื่อเร่อื ง การขอพนื ทใ่ี นการอัพโหลดเวบ็ ไซต์ โปรแกรมทีใ่ ช้ในการอัพโหลดเว็บไซต์ การ จานวน 8 ช.ม.
อัพโหลดเว็บไซต์

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

Quickconnect โปรแกรมจะทาการเช่ือมต่อไปยัง Hosting หลังจาก FTP เข้ามาใน Server จะพบว่า ด้านซ้ายของ
โปรแกรม คอื ส่วนของ Computer/Desktop และ ดา้ นขวาของโปรแกรม คอื สว่ นของ Hosting

1

Computer/Desktop Hosting

2. คลิกเลือกไฟลท์ งั หมด คลิกขวา Upload ไฟล์ โปรแกรมจะทาการอพั ไฟลไ์ ปยัง ฝง่ั Hosting

3. โปรแกรมจะแสดงสถานะการถ่ายโอนไฟล์ข้อมลู เมอ่ื ถา่ ยโอนไฟลข์ ้อมูลหมดโปรแกรมจะแสดง
Successful transfers พร้อมบอกจานวนไฟล์ขอ้ มูลทีไ่ ด้ถ่ายโอนสาเรจ็

4. เมือ่ อัพโหลดเสรจ็ เรยี บรอ้ ยแลว้ สามารถเข้าไปดเู ว็บไซต์ได้ท่ี blossomtea.eu5.org หากต้องการ
แก้ไขไฟลส์ ามารถดาวน์โหลด (Download) ไฟลท์ ่ีต้องการแก้ไขมาแกไ้ ขแล้วอัพโหลดไปแทนทีไ่ ฟลเ์ ดิมได้

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

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

ชื่อเรือ่ ง การขอพนื ท่ใี นการอัพโหลดเว็บไซต์ โปรแกรมท่ีใช้ในการอัพโหลดเวบ็ ไซต์ การ จานวน 8 ช.ม.
อัพโหลดเวบ็ ไซต์

ใบงานท่ี 10 การขอพนื้ ที่และการอพั โหลดเว็บไซต์

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

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

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

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

ช่ือเรอื่ ง การขอพืนท่ใี นการอัพโหลดเว็บไซต์ โปรแกรมทีใ่ ชใ้ นการอัพโหลดเว็บไซต์ การ จานวน 8 ช.ม.
อัพโหลดเวบ็ ไซต์

แบบฝึกหดั หน่วยที่ 10 การขอพ้ืนท่ีและการอพั โหลดเวบ็ ไซต์
…………………………………………………………….........................................................................................

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

21. Web Hosting หมายถึงอะไร

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

22.Web Hosting มกี ่ปี ระเภท อะไรบา้ ง
ตอบ มี 2 แบบให้เลือกใชง้ าน คอื แบบเสียค่าใชจ้ า่ ย และแบบให้บริการฟรี

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

23. จงบอกชื่อ Web Hosting แบบฟรีและแบบเสยี ค่าใชจ้ ่ายมาอยา่ งละ 2 เวบ็
ตอบ เว็บไซต์ dragonhispeed (https://dragonhispeed.com/)
เวบ็ ไซต์ HOSTNEVERDIE (https://www.hostneverdie.com)
............................................................................................................................. ...........................

24.จงบอกขนั ตอนการติดตังโปรแกรม FileZilla
ตอบ 1. ดาวน์โหลดโปรแกรม https://filezilla-project.org/filezilla_pro.php

2. ดบั เบิลคลกิ โปรแกรม FileZilla.exe คลิก I Agree 3. เลือก Options ทตี่ อ้ งการ คลิก Next 4. คลกิ
Next 5. คลิก Next 6. โปรแกรมตงั ค่าให้เลือกจาก Start Menu 7. รอสักครู่จนโปรแกรมตดิ ตังเสรจ็
............................................................................................................................... .........................
25. จงบอกขนั ตอนการอัพโหลดเว็บไซต์ผา่ นโปรแกรม FileZilla

ตอบ เปิดโปรแกรม FileZilla ขึนมา กรอกข้อมลู การใช้งานเวบ็ ไซตท์ ่ีไดจ้ ากการสมัครพืนที่ คลิกปุม่
Quickconnect โปรแกรมจะทาการเช่อื มตอ่ ไปยัง Hosting หลังจาก FTP เข้ามาใน Server จะพบว่า ดา้ นซา้ ย
ของโปรแกรม คือ ส่วนของ Computer/Desktop และ ดา้ นขวาของโปรแกรม คือสว่ นของ Hosting คลิกเลอื ก
ไฟลท์ ังหมด คลิกขวา Upload ไฟล์ โปรแกรมจะทาการอัพไฟลไ์ ปยงั ฝั่ง Hosting โปรแกรมจะแสดงสถานะการ
ถา่ ยโอนไฟล์ข้อมลู เม่อื ถา่ ยโอนไฟล์ข้อมลู หมดโปรแกรมจะแสดง Successful transfers พรอ้ มบอกจานวน
ไฟล์ข้อมลู ท่ีไดถ้ ่ายโอนสาเร็จ
........................................................... ......................................................................................... ....

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

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

ช่ือเร่อื ง การขอพืนทใี่ นการอัพโหลดเวบ็ ไซต์ โปรแกรมทใ่ี ช้ในการอัพโหลดเว็บไซต์ การ จานวน 8 ช.ม.
อพั โหลดเวบ็ ไซต์

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

จงทาเครื่องหมาย (X) ทับตัวเลือกท่ถี ูกต้อง
1. การขออนุญาตในการใช้พืนท่ีเพอื่ การศึกษาทไ่ี ม่หวงั ผลทางธุรกจิ ต้องเลอื กใช้โฮสติงแบบใด

ก. แบบเสยี ค่าใช้จ่าย
ข. แบบไมเ่ สยี ค่าใชจ้ ่าย
ค. แบบมเี งอื นไข
ง. แบบรายเดอื น
2. ขอ้ ใดคือโปรแกรมทส่ี ามารถอัพโหลดไฟลเ์ วบ็ ไซต์ได้
ก. Adobe Photoshop
ข. FileZilla
ค. Notepad
ง. TeamViewer
3. การขอพนื ท่เี พื่อการอัพโหลด ตอ้ งคานึงถงึ ข้อใด
ก. ความเหมาะสมของพนื ท่ีและผลกระทบตอ่ การขอใช้พืนท่ี
ข. ผลท่ีเกดิ หลงั จากการขอพนื ที่
ค. ความเสยี หายของการขอพนื ท่ี
ง. คา่ ใช้จา่ ยในการขอพนื ท่ี
4. ขอ้ ใดคอื วิธีการแกไ้ ขไฟล์ข้อมูลในเอกสารเว็บไซต์ทมี่ ีการเผยแพร่ผ่านโปรแกรมเวบ็ เบราวเซอร์
ก. การสร้างไฟลใ์ หม่มาใสข่ ้อมูลแลว้ อัพโหลดไปแทนที่ไฟลเ์ ดิม
ข. การดาวนโ์ หลดไฟลท์ ี่ต้องการแก้ไขมาแกไ้ ขแลว้ อัพโหลดไปแทนท่ีไฟล์เดมิ
ค. การดาวนโ์ หลดไฟลท์ ต่ี ้องการแกไ้ ขมาแก้ไขแล้วอัพโหลดโดยใช้ชอ่ื ใหม่
ง. การสรา้ งไฟลใ์ หม่มาใส่ข้อมลู เดิมแลว้ อัพโหลดขึนสู่ Web Server
5. การดงึ ข้อมูลจากเคร่ืองแมข่ ่าย (Server) ลงมาเก็บไว้ในเคร่ืองคอมพิวเตอร์ของผใู้ ช้ เรยี กวา่
อะไร
ก. Download File
ข. Upload File
ค. Remote File
ง. Transfer File

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

ชอ่ื หน่วย การขอพ้นื ที่และการอพั โหลดเว็บไซต์ จานวน 8 ช.ม.

ชอ่ื เร่อื ง การขอพนื ทใี่ นการอัพโหลดเว็บไซต์ โปรแกรมทใี่ ชใ้ นการอัพโหลดเวบ็ ไซต์ การ
อพั โหลดเวบ็ ไซต์
6. ข้อใดคือข้อเสียของ Web Hosting แบบฟรี

ก. มักจะมีป้ายโฆษณาบนเว็บไซต์ให้อตั โนมัติ
ข. มีขอ้ จากัดในการใชง้ าน
ค. ใหพ้ นื ที่นอ้ ยไม่มี E-mail
ง. ถกู ทกุ ข้อ
7. FTP ย่อมาจากอะไร
ก. File Transfer Protocol
ข. File Webserver Protocol
ค. File Transection Protocol
ง. File Transection website Protocol
8. ขอ้ ใดตอ่ ไปนีไม่ใช่ไฟลท์ ี่ทาหนา้ ท่ถี า่ ยโอนข้อมูล
ก. โปรแกรม FileZilla
ข. โปรแกรม CuteFTP
ค. โปรแกรม WSFTP
ง. โปรแกรม SSFTP
9. โปรแกรม FTP ที่ถูกตดิ ตงั ในเครือ่ งคอมพวิ เตอรข์ อง user ทั่ว ๆ เรียกอีกอยา่ งหนงึ่ ว่า
ก. FTP Server
ข. FTP Client
ค. FTP Hosting
ง. FTP Service
10. หากสร้างเวบ็ ไซต์ใหก้ บั หน่วยงานบรษิ ทั ควรเลือก Web Hosting แบบใด
ก. แบบเสียค่าใช้จา่ ย
ข. แบบไมเ่ สยี ค่าใช้จา่ ย
ค. แบบมเี งอื นไข
ง. แบบรายเดือน