Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

การสร้างแหล่งเรียนรู้ด้วย Wordpress

893 views

Published on

การสร้างแหล่งเรียนรู้ด้วย Wordpress.com
โดย ดร.อนุศร หงษ์ขุนทด
FB: Anusorn Hongkhunthod
เพจ: ศตวรรษที่ 21 คนที่รวยที่สุดในโลก “คือครู”
เว็บไซต์ DigitalNative.live krukob.com
musicmankob@gmail.com

หากเอกสารมีประโยชน์ และนำไปใช้งาน โปรดอ้างอิง

อนุศร หงษ์ขุนทด. (2559). การสร้างแหล่งเรียนรู้ด้วย Wordpress.com. (ออนไลน์).

Published in: Education

การสร้างแหล่งเรียนรู้ด้วย Wordpress

  1. 1. (1) สารบัญ หน้า การสร้างแหล่งเรียนรู้ด้วย Wordpress.com 1 กิจกรรมที่ 1 การสมัครเพื่อขอเข้าใช้งานบล็อก 1 กิจกรรมที่ 2 การเข้าใช้งานบล็อก 6 กิจกรรมที่ 3 การตั้งค่าและเปลี่ยนภาษา 7 กิจกรรมที่ 4 การจัดการเมนู 12 การปรับแต่งเมนู 13 การเพิ่มเมนูและเมนูย่อย 13 การลบเมนู 16 กิจกรรมที่ 5 การจัดการหน้าเว็บเพจ 17 การแก้ไขเว็บเพจ 17 การสร้างหน้าเว็บเพจในรูปแบบ ฉบับล่าง 19 กิจกรรมที่ 6 การเพิ่มคลิปวิดีโอจากยูทูบ 21 การเคลื่อนย้ายตาแหน่งเสียงเพลง 18 การตัดต่อเสียงเพลงแบ่งเป็นตอนๆ 18 กิจกรรมที่ 7 การลบหน้าเว็บเพจที่ไม่ต้องการ 24 กิจกรรมที่ 8 การเพิ่มลิงค์ไปยังเว็บไซด์อื่น 25 กิจกรรมที่ 9 การจัดการบล็อก 26 กิจกรรมที่ 10 การเชื่อมโยงกับ Google Apps 27 แหล่งอ้างอิง 32
  2. 2. 1 การสร้างแหล่งเรียนรู้ด้วย Wordpress.com โดย ดร.อนุศร หงษ์ขุนทด FB: Anusorn Hongkhunthod :: เพจ: ศตวรรษที่ 21 คนที่รวยที่สุดในโลก “คือครู” :: เว็บ DigitalNative.live ::musicmankob@gmail.com การสร้างแหล่งเรียนรู้ด้วย Wordpress.com กิจกรรมที่ 1 การสมัครเพื่อขอเข้าใช้งานบล็อก 1. พิมพ์ URL ตามที่อยู่ของ Word Press ดังนี้ https://wordpress.com/ 2. คลิกเมาส์ที่ Create Website 3. เลือกประเภทของเว็บไซด์ที่ต้องการ ในที่นี้ให้ เลือก Education & Organizations
  3. 3. 2 การสร้างแหล่งเรียนรู้ด้วย Wordpress.com โดย ดร.อนุศร หงษ์ขุนทด FB: Anusorn Hongkhunthod :: เพจ: ศตวรรษที่ 21 คนที่รวยที่สุดในโลก “คือครู” :: เว็บ DigitalNative.live ::musicmankob@gmail.com 4. เลือกประเภทของโรงเรียนที่ต้องการ ในที่นี้เลือก High School Education 5. สามารถเลือกรูปแบบที่ต้องการ โดยคลิกเมาส์ไปที่ ภาพรูปแบบที่ต้องการ ในที่นี้ เลือก ภาพกลาง A Welcome page for my site (ท่านสามารถเปลี่ยนรูปแบบของเว็บไซด์ได้ใหม่ในภายหลัง) 6. เลือกรูปแบบ (Theme) ของเว็บสาเร็จรูปตามต้องการ โดยคลิกเมาส์ไปที่ ภาพรูปแบบที่ต้องการ ในที่นี้ เลือก Shoreditch
  4. 4. 3 การสร้างแหล่งเรียนรู้ด้วย Wordpress.com โดย ดร.อนุศร หงษ์ขุนทด FB: Anusorn Hongkhunthod :: เพจ: ศตวรรษที่ 21 คนที่รวยที่สุดในโลก “คือครู” :: เว็บ DigitalNative.live ::musicmankob@gmail.com 7. ให้พิมพ์ชื่อเว็บไซด์ที่ต้องการลงไป ในช่องค้นหา จากภาพ ตัวอย่างการพิมพ์ โดยพิมพ์ชื่อ anusorn ลงไป สามารถอธิบายได้ดังนี้ 1. พิมพ์ชื่อเว็บไซด์ที่ต้องการลงไป 2. โปรแกรมจะแสดงชื่อที่สามารถใช้ได้ จากภาพจะแสดงชื่อ anusornweb.wordpress.com 3. หมายความว่าชื่อเว็บไซที่ต้องการนี้คือ anusornweb.wordpress.com ให้ใช้ได้ฟรี ได้รับพื้นที่ในการเก็บข้อมูล 3 GB ให้คลิกเมาส์ที่ปุ่ม Select 4. หากต้องการชื่ออื่น (ต้องจ่ายเงิน) สามารถเลือก คลิกเมาส์ที่ปุ่ม Upgrade 8. เลือกประเภทการให้บริการแบบฟรี โดยคลิกเมาส์ที่ปุ่ม Select Free
  5. 5. 4 การสร้างแหล่งเรียนรู้ด้วย Wordpress.com โดย ดร.อนุศร หงษ์ขุนทด FB: Anusorn Hongkhunthod :: เพจ: ศตวรรษที่ 21 คนที่รวยที่สุดในโลก “คือครู” :: เว็บ DigitalNative.live ::musicmankob@gmail.com 9. ให้พิมพ์ข้อมูลลงในช่องว่าดังนี้ 1. พิมพ์ที่อยู่ Email ของตัวเองลงไปที่ช่อง Your email address (ต้องจา รหัสผ่านของอีเมล์ และสามารถ เปิดเข้าไปใช้งานได้ด้วย) 2. พิมพ์รหัสผ่านที่ต้องการอย่างน้อยไม่ควรต่ากว่า 8 ตัว โดยมีตัวเลขและภาษาอังกฤษรวมกัน 3. ให้คลิกเมาส์ที่ปุ่ม Create My Account เมื่อกรอ ข้อมูลครบ 10. ให้คลิกเมาส์ที่ปุ่ม Continue (สังเกตอีเมล์ที่ จะต้องไปเปิดเพื่อยืนยันตัวตนความเป็นเจ้าของ) 11. หน้าตาของ Wordpress ที่ทาการสร้างเสร็จเรียบร้อยแล้ว แต่ยังไม่พร้อมใช้งานให้ไป ดาเนินการยืนยันการเป็นเจ้าของด้วยการเปิดอีเมล์ ตามที่ได้แจ้งไว้กับ WordPress เพื่อทาการยืนยัน
  6. 6. 5 การสร้างแหล่งเรียนรู้ด้วย Wordpress.com โดย ดร.อนุศร หงษ์ขุนทด FB: Anusorn Hongkhunthod :: เพจ: ศตวรรษที่ 21 คนที่รวยที่สุดในโลก “คือครู” :: เว็บ DigitalNative.live ::musicmankob@gmail.com 12. ตัวอย่างการเปิดอีเมล์ที่ได้แจ้งไว้กับ WordPress เพื่อยืนยันความเป็นเจ้าของ (Gmail) 13. ให้คลิกเมาส์เพื่อทาการยืนยันความ เป็นเจ้าของที่ปุ่ม Confirm Now 14. หน้าตาของ WordPress หลังจากที่ได้ทา การยืนยันความเป็นเจ้าของ และพร้อมใช้งาน
  7. 7. 6 การสร้างแหล่งเรียนรู้ด้วย Wordpress.com โดย ดร.อนุศร หงษ์ขุนทด FB: Anusorn Hongkhunthod :: เพจ: ศตวรรษที่ 21 คนที่รวยที่สุดในโลก “คือครู” :: เว็บ DigitalNative.live ::musicmankob@gmail.com กิจกรรมที่ 2 การเข้าใช้งานบล็อก การเข้าใช้งาน WordPress 1. ให้พิมพ์ www.wordpress.com ที่ช่อง Address Bar 2. ให้พิมพ์ข้อความดังต่อไปนี้ 1) พิมพ์ “อีเมล์ของท่าน” ตามที่ได้ ลงทะเบียนไว้กับWordPress.com ในช่อง Username or Email 2) พิมพ์ รหัสผ่าน ในช่อง Password
  8. 8. 7 การสร้างแหล่งเรียนรู้ด้วย Wordpress.com โดย ดร.อนุศร หงษ์ขุนทด FB: Anusorn Hongkhunthod :: เพจ: ศตวรรษที่ 21 คนที่รวยที่สุดในโลก “คือครู” :: เว็บ DigitalNative.live ::musicmankob@gmail.com หน้าต่างของ WordPress ที่พร้อมใช้งาน กิจกรรมที่ 3 การตั้งค่าและเปลี่ยนภาษา 1. ทาการเลือกรายการเพื่อทาการตั้งค่าดังนี้ 1) ให้ไปที่แถบเครื่องมือทางด้านล่างซ้ายของจอภาพ 2) เลือกเครื่องมือโดยคลิกเมาส์ที่ Settings เพื่อตั้งค่า 2. จะปรากฏหน้าต่างการตั้งค่า ให้ทารายการดังนี้ 1) คลิกเม้าส์เลือกหน้าต่าง General 2) พิมพ์ ข้อความแนะนาเว็บไซด์ ที่ต้องการในช่อง Site Title
  9. 9. 8 การสร้างแหล่งเรียนรู้ด้วย Wordpress.com โดย ดร.อนุศร หงษ์ขุนทด FB: Anusorn Hongkhunthod :: เพจ: ศตวรรษที่ 21 คนที่รวยที่สุดในโลก “คือครู” :: เว็บ DigitalNative.live ::musicmankob@gmail.com 3. คลิกเม้าส์เลือกรายการภาษาที่ต้องการที่ Language 4. ภาษาที่ต้องการในที่นี้เลือก ภาษาไทย 5. คลิกเม้าส์ทารายการเพื่อปรับเวลาของเว็บ ไซด์ ที่ Site Timezone 6. เลื่อนเมาส์หาเวลาในประเทศไทย โดย คลิกเม้าส์เลือกที่ UTC+7
  10. 10. 9 การสร้างแหล่งเรียนรู้ด้วย Wordpress.com โดย ดร.อนุศร หงษ์ขุนทด FB: Anusorn Hongkhunthod :: เพจ: ศตวรรษที่ 21 คนที่รวยที่สุดในโลก “คือครู” :: เว็บ DigitalNative.live ::musicmankob@gmail.com 7. ทาการบันทึก การแก้ไข ที่ปุ่ม Save Settings การบันทึกเสร็จสมบูรณ์ 8. ไปปรับตั้งค่าในภาพรวมทั้งเว็บไซด์ที่หน้าต่างโปรไฟล์ของผู้ใช้ โดยคลิ๊กเมาส์ที่คาว่า You can also modify the interface language in your profile 9. คลิ๊กเมาส์ที่ Interface Language เพื่อเลือกภาษา
  11. 11. 10 การสร้างแหล่งเรียนรู้ด้วย Wordpress.com โดย ดร.อนุศร หงษ์ขุนทด FB: Anusorn Hongkhunthod :: เพจ: ศตวรรษที่ 21 คนที่รวยที่สุดในโลก “คือครู” :: เว็บ DigitalNative.live ::musicmankob@gmail.com 10. เลือกภาษาที่ต้องการ ในที่นี้เลือก ภาษาไทย 11. ทาการบันทึกข้อมูลโดยคลิ๊กเมาส์ที่คาว่า Save Account Settings หรือหากต้องการ เปลี่ยนเปลงข้อมูลสามารถทาได้ดังนี้ 1) เปลี่ยนบัญชีผู้ใช้ได้ที่ช่อง Username 2) เปลี่ยนอีเมล์ของเว็บไซด์ได้ที่ Email Address 3) เมื่อทาการแก้ไขเสร็จเรียบร้อยแล้ว ทาการบันทึกข้อมูล 12. คลิ๊กเมาส์ที่ เว็บของฉัน เพื่อเข้าสู่หน้าแก้ไขหลัก หน้าเว็บไซด์ที่เปลี่ยนเป็นภาษาไทย
  12. 12. 11 การสร้างแหล่งเรียนรู้ด้วย Wordpress.com โดย ดร.อนุศร หงษ์ขุนทด FB: Anusorn Hongkhunthod :: เพจ: ศตวรรษที่ 21 คนที่รวยที่สุดในโลก “คือครู” :: เว็บ DigitalNative.live ::musicmankob@gmail.com 13. ชมตัวอย่างหน้าเว็บไซด์ที่สร้างขึ้นแบบอัตโนมัติ โดย คลิกเม้าส์ที่โลโก้ (รูปบ้าน) จะพบชื่อของเว็บไซด์ที่ได้ตั้งไว้ ที่มุมบนด้านซ้ายสุดของหน้าจอ 13.1 ตัวอย่างหน้าต่างแสดงผลในรูปแบบหน้าจอคอมพิวเตอร์ 13.2 ตัวอย่างหน้าต่างแสดงผลในรูปแบบ หน้าจอแท็บเล็ต 13.3 ตัวอย่างหน้าต่างแสดงผลในรูปแบบหน้าจอสมาร์ทโฟน 13.4 การแสดงหน้าจริงของเว็บไซด์
  13. 13. 12 การสร้างแหล่งเรียนรู้ด้วย Wordpress.com โดย ดร.อนุศร หงษ์ขุนทด FB: Anusorn Hongkhunthod :: เพจ: ศตวรรษที่ 21 คนที่รวยที่สุดในโลก “คือครู” :: เว็บ DigitalNative.live ::musicmankob@gmail.com เว็บไซด์ที่แสดงบนเว็บบราวเซอร์ กิจกรรมที่ 4 การจัดการเมนู การจัดการเมนู 1. ให้เลื่อนรายการเครื่องมือแก้ไขทางด้านซ้ายมือของจอภาพ แล้วคลิ๊กเมาส์ ที่คาว่า เมนู 2. จะปรากฏหน้าต่างสาหรับแก้ไข การแสดงผลของเว็บไซด์ สามาถปรับแก้ได้ดังนี้ 1) การแสดงผล แบบ Primary (แนะนาให้ตั้งค่าเดิมก่อน) 2) การแสดงเมนูรายการของ Primary (แนะนาให้ตั้งค่าเดิมก่อน) 3) สามารถปรับตั้งชื่อของเมนูหลักได้ ด้วยการคลิ๊กเม้าส์ที่ปุ่ม รูปดินสอ 4) สามารถปรับตั้งชื่อของแต่ละเมนูได้ ด้วยการคลิ๊กเม้าส์ที่ปุ่ม รูปดินสอ 5) สามารถเพิ่ม เมนูย่อยได้ด้วยการ คลิ๊กเม้าส์ที่ปุ่ม เครื่องหมายบวก
  14. 14. 13 การสร้างแหล่งเรียนรู้ด้วย Wordpress.com โดย ดร.อนุศร หงษ์ขุนทด FB: Anusorn Hongkhunthod :: เพจ: ศตวรรษที่ 21 คนที่รวยที่สุดในโลก “คือครู” :: เว็บ DigitalNative.live ::musicmankob@gmail.com การปรับแต่งเมนู 1. ปรับเปลี่ยนชื่อตามต้องการด้วยการคลิ๊กเม้าส์ที่ ปุ่ม รูปดินสอ 2. ตั้งชื่อตามต้องการ เช่น หน้าแรก ตัวอย่างเมนูเว็บไซด์เพื่อการเรียนการสอน การเพิ่มเมนูและเมนูย่อย หากต้องการเมนูที่มากกว่าที่มี สามารถเพิ่มหรือลดเมนูลงได้ โดยในแต่ละเมนูสามารถเพิ่มเมนูย่อยเข้า ไปได้อีกตามต้องการ ดังนี้ 1. คลิ๊กเม้าส์เลือกที่ปุ่ม เครื่องหมายบวก ตรงตาแหน่งที่ต้องการเพิ่มเมนูเพื่อแทรกตาแหน่งที่ต้องการ ให้ปรากฏ (ในตัวอย่างต้องการให้เมนูที่เพิ่มอยู่ใต้เมนู หน้าแรก จึงคลิ๊กเม้าส์เลือกที่ปุ่ม เครื่องหมายบวกตัวที่ 2)
  15. 15. 14 การสร้างแหล่งเรียนรู้ด้วย Wordpress.com โดย ดร.อนุศร หงษ์ขุนทด FB: Anusorn Hongkhunthod :: เพจ: ศตวรรษที่ 21 คนที่รวยที่สุดในโลก “คือครู” :: เว็บ DigitalNative.live ::musicmankob@gmail.com 2. จะปรากฏหน้าต่างให้เลือกทารายการ ดังนี้ 1) Add menu item above คือ การเพิ่มเมนู ที่ต้องการโดยจะปรากฏ เมนูใหม่ “บนรายการ” ที่ กดเครื่องหมายบวก ในที่นี้คือ ประวัติผู้สอน 2) Add menu item below คือ การเพิ่มเมนู ที่ต้องการโดยจะปรากฏ เมนูใหม่ “ใต้รายการ” ที่ กดเครื่องหมายบวก ในที่นี้คือ ประวัติผู้สอน 3) Add menu item to children คือ การเพิ่ม “เมนูย่อย” ที่ต้องการโดยจะปรากฏ เมนูใหม่ “ในรายการ” ที่กดเครื่องหมายบวก ในที่นี้คือ ประวัติผู้สอน ตัวอย่างการเพิ่มเมนู Add menu item above 1. คลิ๊กเม้าส์ที่ Add menu item above 2. พิมพ์ชื่อเมนูที่ต้องการ 1) ในตัวอย่างเพิ่ม เมนูวิชาที่สอน 2) เลือกสร้างหน้าเพจใหม่ 3) คลิ๊กเม้าส์ที่ปุ่ม Add Item เมื่อ เสร็จสิ้น 3. จะมีเมนู วิชาที่สอน เพิ่มขึ้นมาใหม่ เมื่อทาการเพิ่มเมนูเสร็จเรียบร้อยตาม ต้องการแล้วให้คลิ๊กเม้าส์ที่ปุ่ม บันทึก
  16. 16. 15 การสร้างแหล่งเรียนรู้ด้วย Wordpress.com โดย ดร.อนุศร หงษ์ขุนทด FB: Anusorn Hongkhunthod :: เพจ: ศตวรรษที่ 21 คนที่รวยที่สุดในโลก “คือครู” :: เว็บ DigitalNative.live ::musicmankob@gmail.com ตัวอย่างการเพิ่มเมนู Add menu item to children เพื่อเพิ่ม “เมนูย่อย” 1. เลือกเมนูที่ต้องการจะให้มีเมนูย่อย ในที่นี้ จะเลือกเพิ่ม ใน เมนูวิชาที่สอน 2. เลือกที่ Add menu item to children 3. พิมพ์ชื่อรายวิชาที่ต้องการ แล้วทาตามขั้นตอนดังนี้ 1) พิมพ์ชื่อรายวิชาที่ต้องการ 2) คลิ๊กเม้าส์เลือกสร้างหน้าเพจใหม่ 3) คลิ๊กเม้าส์ที่ปุ่ม Add Item เมื่อเสร็จสิ้น 4. จะมีเมนู เทคโนโลยีสารสนเทศและการ แก้ปัญหาเพิ่มขึ้นมาใหม่ ใต้เมนู วิชาที่สอน เมื่อทา การเพิ่มเมนูเสร็จเรียบร้อยตามต้องการแล้วให้ คลิ๊กเม้าส์ที่ปุ่ม บันทึก
  17. 17. 16 การสร้างแหล่งเรียนรู้ด้วย Wordpress.com โดย ดร.อนุศร หงษ์ขุนทด FB: Anusorn Hongkhunthod :: เพจ: ศตวรรษที่ 21 คนที่รวยที่สุดในโลก “คือครู” :: เว็บ DigitalNative.live ::musicmankob@gmail.com การลบเมนู 1. เลือกรายการที่ต้องการลบการคลิ๊กเม้าส์ที่ปุ่ม ดินสอ 2. คลิ๊กเม้าส์ที่ปุ่ม ถังขยะ 3. จะปรากฏหน้าต่างให้ยืนยันการลบ หากต้องการลบให้คลิ๊กเม้าส์ที่ปุ่ม Delete Item หากไม่ต้องการลบ ให้ คลิ๊กเม้าส์ที่ปุ่ม กลับไป ** การลบนี้จะลบเพียงแค่เมนูเพียงอย่างเดียว หน้าเพจที่สร้างยังคงอยู่ สามารถเรียกกลับมาใช้ได้ใหม่ หากต้องการ
  18. 18. 17 การสร้างแหล่งเรียนรู้ด้วย Wordpress.com โดย ดร.อนุศร หงษ์ขุนทด FB: Anusorn Hongkhunthod :: เพจ: ศตวรรษที่ 21 คนที่รวยที่สุดในโลก “คือครู” :: เว็บ DigitalNative.live ::musicmankob@gmail.com กิจกรรมที่ 5 การจัดการหน้าเว็บเพจ ในการจัดการหน้าเราสามารถเข้ามาเพื่อทาการแก้ไขหน้าเว็บเพจ หรือ เพิ่มหน้าเว้บเพจได้ในเมนู เครื่องมือ หน้า การแก้ไขเว็บเพจ 1. ให้เลื่อนรายการเครื่องมือแก้ไขทางด้านซ้ายมือของจอภาพ แล้ว คลิ๊กเมาส์ที่คาว่า เมนู 2. จะพบว่ามีหน้าเว็บเพจต่าง ๆ ที่ได้สร้างไว้ก่อนหน้านี้แล้ว ให้ สังเกตที่ แถบด้านบน เผยแพร่แล้ว หมายความว่าทุกคนสามารถเข้าเยี่ยม ชมเว็บเพจ ได้แล้ว (ออนไลน์แล้ว) 3. เมื่อต้องการทารายการให้คลิ๊กเมาส์ที่ ปุ่ม 4. เมื่อคลิ๊กเมาส์แล้วจะปรากฏแถบเครื่องมือ 3 เครื่องมือคือ 1) ดูหน้า คือ หากต้องการดูว่าหน้านี้คืออะไรโดยให้ แสดงผลบนหน้าเว็บบราวเซอร์ 2) แก้ไข คือ การเข้าไปแก้ไข ปรับปรุงหน้าเว็บเพจ 3) ถังขยะ คือ การย้ายหน้าเว็บเพจไปที่ถังขยะเมื่อไม่ ต้องการหน้าเว็บเพจนี้แล้ว
  19. 19. 18 การสร้างแหล่งเรียนรู้ด้วย Wordpress.com โดย ดร.อนุศร หงษ์ขุนทด FB: Anusorn Hongkhunthod :: เพจ: ศตวรรษที่ 21 คนที่รวยที่สุดในโลก “คือครู” :: เว็บ DigitalNative.live ::musicmankob@gmail.com 5. ในหน้าต่างการแก้ไขให้ทาการแก้ไขข้อความที่ต้องการใน ช่องข้อความ เมื่อแก้ไขเสร็จเรียบร้อย แล้วให้ คลิ๊กเมาส์ที่ปุ่ม อัปเดท 6. หากต้องการแก้ไขรูปภาพ ให้คลิ๊กเมาส์ที่รูปภาพ 7. คลิ๊กเมาส์ที่ปุ่ม Add New หากต้องการนาเข้าภาพ จากภายนอก (wordpress ให้พื้นที่จัดเก็บข้อมูลจานวน 3GB หากต้องการเพิ่มต้องมีค่าใช้จ่ายเพิ่ม) 8. เลือกภาพที่ต้องการจากเครื่องคอมพิวเตอร์ของท่าน
  20. 20. 19 การสร้างแหล่งเรียนรู้ด้วย Wordpress.com โดย ดร.อนุศร หงษ์ขุนทด FB: Anusorn Hongkhunthod :: เพจ: ศตวรรษที่ 21 คนที่รวยที่สุดในโลก “คือครู” :: เว็บ DigitalNative.live ::musicmankob@gmail.com 9. เลือกภาพที่ต้องการ แล้วคลิ๊กเมาส์ที่ปุ่ม ตั้งรูปพิเศษ 10. เมื่อแก้ไขเสร็จเรียบร้อยแล้วให้ คลิ๊กเมาส์ที่ปุ่ม อัปเดท การสร้างหน้าเว็บเพจในรูปแบบ ฉบับร่าง การสร้างหน้าเว็บเพจในรูปแบบ “ฉบับร่าง” คือการสร้างหน้าเว็บเพจ ตามต้องการแต่ยังไม่มีความ ประสงค์ที่จะเผยแพร่ให้ผู้อื่นได้เห็น หรือยังไม่เสร็จ เมื่อพร้อมที่จะเผยแพร่ก็สามารถทาได้ และหน้าเว็บเพจนี้ จะเปลี่ยนสถานะเป็น เผยแพร่แล้ว ดังนี้ 1. สร้างเว็บเพจในรูปแบบ “ฉบับร่าง” 1) คลิ๊กเม้าส์ที่ หน้า 2) คลิ๊กเม้าส์ที่ ฉบับร่าง 3) คลิ๊กเม้าส์ที่ สร้างหน้า
  21. 21. 20 การสร้างแหล่งเรียนรู้ด้วย Wordpress.com โดย ดร.อนุศร หงษ์ขุนทด FB: Anusorn Hongkhunthod :: เพจ: ศตวรรษที่ 21 คนที่รวยที่สุดในโลก “คือครู” :: เว็บ DigitalNative.live ::musicmankob@gmail.com 2. ใส่ชื่อเรื่อง และข้อความที่ต้องการ 3. สามารถดูเว็บเพจได้ก่อนโดยคลิ๊กเมาส์ที่ปุ่ม ดูก่อน 4. จะปรากฏหน้าต่างสาหรับ ตรวจสอบ แบ่งได้ 3 มุมมอง คือ 1) แสดงผลผ่านจอคอมพิวเตอร์ 2) แสดงผลผ่านจอแท็บเล็ต 3) แสดงผลผ่านจอสมาร์ทโฟน
  22. 22. 21 การสร้างแหล่งเรียนรู้ด้วย Wordpress.com โดย ดร.อนุศร หงษ์ขุนทด FB: Anusorn Hongkhunthod :: เพจ: ศตวรรษที่ 21 คนที่รวยที่สุดในโลก “คือครู” :: เว็บ DigitalNative.live ::musicmankob@gmail.com กิจกรรมที่ 6 การเพิ่มคลิปวิดีโอจากยูทูบ เมื่อต้องการแทรกคลิปวิดีโอจากยูทูบเพื่อประกอบการสอนสามารถทาได้ตามขั้นตอนดังนี้ 1. คลิ๊กเมาส์เพื่อเลือกเว็บเพจที่ต้องการแก้ไข 2. คลิ๊กเมาส์เพื่อเลือก การแก้ไข 3. จะพบหน้าต่างการแก้ไข ให้คลิ๊กเม้าส์ที่ปุ่ม HTML จะพบกับ โค้ด ภาษาHTML
  23. 23. 22 การสร้างแหล่งเรียนรู้ด้วย Wordpress.com โดย ดร.อนุศร หงษ์ขุนทด FB: Anusorn Hongkhunthod :: เพจ: ศตวรรษที่ 21 คนที่รวยที่สุดในโลก “คือครู” :: เว็บ DigitalNative.live ::musicmankob@gmail.com 4. เปิดเว็บไซด์ยูทูบ (Youtube.com) ค้นหาคลิปวิดีโอที่ ต้องการ เมื่อได้แล้วให้คลิ๊กเม้าส์ที่ปุ่ม แชร์ 5. จะมีหน้าต่างเปิดขึ้นมาใหม่ใต้คลิปวิดีโอ ให้ คลิ๊กเม้าส์ที่ปุ่ม ฝัง 6. ทาการคัดลอก (Copy) โค้ดทั้งหมดไว้ 7. คลิ๊กเม้าส์ปุ่มขวาเพื่อวางโค้ด
  24. 24. 23 การสร้างแหล่งเรียนรู้ด้วย Wordpress.com โดย ดร.อนุศร หงษ์ขุนทด FB: Anusorn Hongkhunthod :: เพจ: ศตวรรษที่ 21 คนที่รวยที่สุดในโลก “คือครู” :: เว็บ DigitalNative.live ::musicmankob@gmail.com จะได้ชุดโค้ดคาสัง HTML ของคลิปวิดีโอที่ ต้องการ 8. คลิ๊กเม้าส์ที่ปุ่ม Visual เพื่อดูผลการ ใส่โค้ด HTML ในหน้านี้สามารถ ปรับแก้ไขโดยการย่อ ขยาย หรือย้าย ตาแหน่งได้ตามต้องการ เมื่อเสร็จสิ้นการ แก้ไขแล้วให้คลิ๊กเม้าส์ที่ปุ่ม อัปเดท 9. เมื่อทาการปรับตั้งค่าต่าง ๆ และพิมพ์เนื้อหา เสร็จสิ้นตามต้องการแล้ว หากต้องการเผยแพร่ออกสู่โลก ออนไลน์ ให้ทาตามขั้นตอนดังนี้ 1) คลิ๊กเม้าส์ที่ปุ่ม Edit Visibility เพื่อเลือก รายการ 2) คลิ๊กเม้าส์ที่ปุ่ม Public เพื่อเผยแพร่ ** หากไม่ต้องการให้ผู้อื่นเห็นก็สามารถคลิ๊กเม้าส์ที่ปุ่ม Private
  25. 25. 24 การสร้างแหล่งเรียนรู้ด้วย Wordpress.com โดย ดร.อนุศร หงษ์ขุนทด FB: Anusorn Hongkhunthod :: เพจ: ศตวรรษที่ 21 คนที่รวยที่สุดในโลก “คือครู” :: เว็บ DigitalNative.live ::musicmankob@gmail.com กิจกรรมที่ 7 การลบหน้าเว็บเพจที่ไม่ต้องการ 1. คลิ๊กเม้าส์ที่ปุ่ม Send page to the trash 2. คลิ๊กเม้าส์ที่ปุ่ม ย้ายไปถังขยะ เมื่อแน่ใจว่าไม่ต้องการเพจหน้านี้ หากไม่แน่ใจให้ คลิ๊กเม้าส์ที่ปุ่ม กลับไป เพื่อทบทวนอีกครั้งว่ายังต้องการ ลบอีกหรือไม่ 3. คลิ๊กเม้าส์ที่ปุ่ม Don’t restore เมื่อต้องการลบทิ้ง เลย หากไม่ต้องการให้ คลิ๊กเม้าส์ที่ปุ่ม กู้คืน 4. เว็บเพจที่ลบจะถูกนามาเก็บไว้ในถังขยะ เพื่อรอรับคาสั่งว่าจะลบถาวร หรือเผื่อนากลับมาใช้อีกครั้ง 5. หากต้องการลบอย่างถาวรให้คลิ๊ก เม้าส์ที่ปุ่ม แล้วเลือกคลิ๊กเม้าส์ที่ปุ่ม ลบ ** ครั้งนี้จะถูกลบออกจากระบบอย่างถาวร
  26. 26. 25 การสร้างแหล่งเรียนรู้ด้วย Wordpress.com โดย ดร.อนุศร หงษ์ขุนทด FB: Anusorn Hongkhunthod :: เพจ: ศตวรรษที่ 21 คนที่รวยที่สุดในโลก “คือครู” :: เว็บ DigitalNative.live ::musicmankob@gmail.com กิจกรรมที่ 8 การเพิ่มลิงค์ไปยังเว็บไซด์อื่น 1. เปิดเว็บไซด์ที่ต้องการ ทาการคัดลอกที่อยู่ของเว็บไซด์ เพื่อนามา Link กับหน้าเว็บเพจที่ต้องการ 2. คลิ๊กเม้าส์ที่ปุ่ม Insert/edit Link เพื่อทาการ เชื่อมโยง 3. จะปรากฏหน้าต่างสาหรับการแก้ไข ให้ดาเนินการดังนี้ 1) วางที่อยู่ของเว็บไซด์ที่ได้คัดลอกไว้แล้วในช่อง URL 2) พิมพ์ข้อความที่ต้องการ หรือข้อความที่สื่อถึงเว็บไซด์ที่เราจะทา การลิงก์ ในช่อง ลิงก์ข้อความ 3) คลิ๊กเม้าส์ที่ช่อง เปิดลิงก์ในหน้าต่างหรือแท็บใหม่ ให้เป็น เครื่องหมายถูก 4) เมื่อเสร็จเรียบร้อยแล้วให้คลิ๊กเม้าสืที่ปุ่ม เพิ่มลิงก์ 4. สามารถแก้ไขตาแหน่งของข้อความที่ทา การลิงก์ได้ตามต้องการ
  27. 27. 26 การสร้างแหล่งเรียนรู้ด้วย Wordpress.com โดย ดร.อนุศร หงษ์ขุนทด FB: Anusorn Hongkhunthod :: เพจ: ศตวรรษที่ 21 คนที่รวยที่สุดในโลก “คือครู” :: เว็บ DigitalNative.live ::musicmankob@gmail.com กิจกรรมที่ 9 การจัดการบล็อก 1. การสร้างบล็อกให้เลือกตามรายการดังนี้ 1) คลิ๊กเม้าส์ที่เมนู เรื่องของบล็อก 2) คลิ๊กเม้าส์ที่เมนู เพิ่ม 2. พิมพ์ชื่อหัวเรื่อง และข้อความที่ต้องการ เมื่อเสร็จแล้วให้ คลิ๊กเม้าส์ที่ปุ่ม ดูก่อน หรือคลิ๊กเม้าส์ที่ปุ่ม เผยแพร่ เลยก็ ได้ หรือ หากยังไม่ต้องการเผยแพร่ในทันที สามารถตั้งเวลาในการเผยแพร่บล็อก ก็ได้ ตามวันและเวลาที่ต้อง สถานะวันของการเผยแพร่บล็อก (สามารถแก้ไขได้ในภายหลัง)
  28. 28. 27 การสร้างแหล่งเรียนรู้ด้วย Wordpress.com โดย ดร.อนุศร หงษ์ขุนทด FB: Anusorn Hongkhunthod :: เพจ: ศตวรรษที่ 21 คนที่รวยที่สุดในโลก “คือครู” :: เว็บ DigitalNative.live ::musicmankob@gmail.com **หากต้องการยกเลิกการเผยแพร่สามารถทาได้ดังนี้ 1) คลิ๊กเม้าส์ที่ปุ่ม 2) คลิ๊กเม้าส์ที่ปุ่ม REVERT TO DRAFT 3) คลิ๊กเม้าส์ที่ปุ่ม อัปเดท กิจกรรมที่ 10 การเชื่อมโยงกับ Google Apps 1. เปิดหน้าเว็บเพจ หรือบล็อกที่ต้องการจะแทรกลิงค์กับGoogle Doc 2. คลิ๊กเม้าส์ที่ HTML 3. หน้าต่าง HTML จะแสดงเพื่อให้ทา การแก้ไข
  29. 29. 28 การสร้างแหล่งเรียนรู้ด้วย Wordpress.com โดย ดร.อนุศร หงษ์ขุนทด FB: Anusorn Hongkhunthod :: เพจ: ศตวรรษที่ 21 คนที่รวยที่สุดในโลก “คือครู” :: เว็บ DigitalNative.live ::musicmankob@gmail.com 4. เปิดไฟล์Google Doc ที่ต้องการลิงค์ แล้วเลือกที่เมนู ไฟล์ (1) แล้วเลือกรายการ เผยแพร่ทาง เว็บ (2) 5. คลิ๊กเม้าส์เลือกที่ปุ่ม ฝัง และตามด้วยการคลิ๊กเม้าส์เลือกที่ปุ่ม เผยแพร่ 6. จะปรากฏหน้าต่างแสดงการแจ้งเตือนการเผยแพร่ไฟล์ดังกล่าว หากแน่ใจให้คลิ๊กเม้าส์ที่ ปุ่ม ตกลง
  30. 30. 29 การสร้างแหล่งเรียนรู้ด้วย Wordpress.com โดย ดร.อนุศร หงษ์ขุนทด FB: Anusorn Hongkhunthod :: เพจ: ศตวรรษที่ 21 คนที่รวยที่สุดในโลก “คือครู” :: เว็บ DigitalNative.live ::musicmankob@gmail.com 7. จะปรากฏหน้าต่างแสดงการเผยแพร่ ให้ทา การคัดลอก (Copy) โค้ด HTML ทั้งหมด 8. คลิ๊กเม้าส์ปุ่มขวามือเพื่อวางโค้ด HTML (1) จากนั้นลองคลิ๊กเม้าส์ที่ปุ่ม Visual เพื่อดูผลงาน 9. สังเกตดูขนาดที่แสดงไฟล์ Google Doc จะมี ขนาดเล็กไม่สามารถอ่านได้ ควรปรับแก้ขนาดของ กรอบ ให้กลับไปคลิ๊กเม้าส์ที่ HTML เพื่อแก้ไขอีก ครั้ง
  31. 31. 30 การสร้างแหล่งเรียนรู้ด้วย Wordpress.com โดย ดร.อนุศร หงษ์ขุนทด FB: Anusorn Hongkhunthod :: เพจ: ศตวรรษที่ 21 คนที่รวยที่สุดในโลก “คือครู” :: เว็บ DigitalNative.live ::musicmankob@gmail.com 10. ให้ทาการปรับแต่งค่า Width (ความกว้าง) และ ค่า Height (ความสูง) ตามต้องการ ตัวอย่าง ได้ทาการตั้งค่าเป็น 500x600 11. หน้าตาของ Google Doc ที่ปรับตั้งค่าใหม่ เสร็จเรียบร้อยแล้ว ** Google Apps ส่วนอื่น ๆ สามารถทาได้ ด้วยวิธีการเดียวกันนี้
  32. 32. 31 การสร้างแหล่งเรียนรู้ด้วย Wordpress.com โดย ดร.อนุศร หงษ์ขุนทด FB: Anusorn Hongkhunthod :: เพจ: ศตวรรษที่ 21 คนที่รวยที่สุดในโลก “คือครู” :: เว็บ DigitalNative.live ::musicmankob@gmail.com ** ในส่วนของ Google forms 1. ให้คลิ๊กเม้าส์ที่ เมนูไฟล์ แล้วเลือก ฝัง 2. คลิ๊กเม้าส์ปุ่มขวามือเพื่อคัดลอกโค้ด HTML 3. คลิ๊กเม้าส์ปุ่มขวามือเพื่อวางโค้ด HTML ตามตาแหน่งที่ต้องการ ปรับแต่งค่า ขนาดกว้างและยาวตามต้องการ
  33. 33. 32 การสร้างแหล่งเรียนรู้ด้วย Wordpress.com โดย ดร.อนุศร หงษ์ขุนทด FB: Anusorn Hongkhunthod :: เพจ: ศตวรรษที่ 21 คนที่รวยที่สุดในโลก “คือครู” :: เว็บ DigitalNative.live ::musicmankob@gmail.com แหล่งอ้างอิง ดร.อนุศร หงษ์ขุนทด My Links Cell Phone: +66 817258314 : Anusorn Hongkhunthod : Anusorn Hongkhunthod : musicmankob : musicmankob : musicmankob : soundcloud.com/anusorn-hongkhunthod : http://pitcforteach.blogspot.com ติดตามความรู้เพิ่มเติมได้ที่ www.digitalnative.live E-mail anusorn.h@dt.ac.th musicmankob@gmail.com hongkhuntod@hotmail.com anusornkob@hotmail.com เพจ: ศตวรรษที่ 21 คนที่รวยที่สุดในโลก “คือครู”

×