การจัดรูปแบบเนื้อหา

Ji
Last updated 5 months ago

เป็นการจัดรูปแบบข้อความพื้นฐาน โดยใช้ตัว HTML Editor เป็นตัวช่วยให้การจัดการ อาทิเช่น การแทรกรูปภาพ การแทรกลิงก์ การแทรก VDO จาก Youtube การนำเข้าเนื้อหาจากไฟล์ MS Word เป็นต้น

ตัวอย่างหน้าจอ HTML Editor สำหรับจัดการรูปแบบข้อความพื้นฐาน

การจัดรูปแบบข้อความพื้นฐาน

หลังจากทำการ login เข้าใช้งาน CMU Online แล้ว จะเจอหน้าจอดังต่อไปนี้

ตัวอย่างหน้าจอหลังจาก Login เข้าระบบแล้ว

วิธีการเข้าสู่ระบบการจัดการข้อความเนื้อหาพื้นฐาน สามารถทำดังนี้

ตัวอย่างหน้าจอวิธีการเปิดระบบ Edit ให้สามารถเพิ่มเติม/แก้ไขข้อความได้
  1. คลิกรายวิชาที่ต้องการทำการเพิ่ม/แก้ไขเนื้อหา โดยเลือกเมนู My Courses ด้านบนฝั่งซ้ายมือ ของหน้าจอ

2. เมื่อเลือกรายวิชาที่ต้องการได้แล้วจะแสดงดังหน้าจอต่อไปนี้

3. คลิกที่ปุ่มสีเขียวที่อยู่ด้านบน จะปรากฎหน้าจอดังต่อไปนี้ ซึ่งจะมีเมนู Edit , Add an activity or resource, Add topics แสดงขึ้นมา นั่นหมายความว่าระบบพร้อมที่จะให้ทำการแก้ไขข้อมูลแล้ว

4. คลิกเลือกหัวข้อใหม่ ที่เมนู + Add topics ที่อยู่บริเวณด้านล่างของหน้าจอ จากนั้นจะแสดงหน้าจอ popup ถามว่าจะให้สร้างหัวข้อเปล่าๆ มาใหม่กี่หัวข้อ ดังต่อไปนี้

5. จากนั้นเมื่อเลือกจำนวนหัวข้อใหม่ 2 หัวข้อ จะแสดงดังหน้าจอต่อไปนี้

6. คลิกที่รูปดินสอสีดำ หลังคำว่า Topic เพื่อทำการเปลี่ยนชื่อหัวข้อใหม่

7. จากนั้นทำการพิมพ์หัวข้อใหม่ที่ต้องการ จากนั้นทำการกด Enter จะแสดงหน้าจอดังต่อไปนี้

8. กรณีที่เราจะทำการเพิ่มข้อความเพิ่มเติมสำหรับหัวข้อนี้ สามารถทำได้โดย คลิกที่ปุ่ม + Add an activity or resource

9. กรณีนี้ขอเลือกหัวข้อ Label เพื่อแสดงการจัดการกับข้อความเนื้อหา จากนั้นคลิกที่ปุ่ม Add

10. จากนั้นจะแสดงหน้าจอดังต่อไปนี้

11. ส่วนนี้จะเป็นส่วนที่เรียกว่า HTML Editor สำหรับจัดรูปแบบข้อความพื้นฐาน

12. สามารถกรอกข้อความที่ต้องการในช่องที่ให้มา หรือจะ copy ข้อความ แล้วนำมาวาง (paste) ที่ช่องนี้ก็ได้เช่นกัน กรณีที่ผู้ใช้งาน copy ข้อความมาจากโปรแกรม word หรือเอาข้อความมาจากเว็บไซต์นั้น เวลา paste ข้อความลงช่องนี้แล้วนั้น ข้อความที่ได้มาจะเป็นข้อความแบบเดียวกับต้นแบบที่ copy มาเลย อาทิเช่น ขนาดตัวหนังสือใหญ่เท่ากับต้นฉบับ สีเดียวกัน เป็นตัวหนาเหมือนกัน เป็นลิงค์ข้อความเหมือนกัน เป็นต้น ดังรูป

13. หากต้องการที่จะให้ข้อความเป็นแบบธรรมดา เพื่อที่จะมากำหนดรูปแบบตัวหนังสือใหม่จากใน HTML Editor เอง ผู้ใช้สามารถทำได้โดย copy ข้อความนั้นไปวางที่โปรแกรม notepad ก่อน แล้วจึง copy ข้อความจาก notepad นั้นมาวางที่ช่อง HTML Editor อีกที ดังรูปตามลำดับนี้

14. ปุ่ม Font family เป็นปุ่มเปลี่ยนชื่อฟอนด์ มีฟอนด์ให้เลือกดังนี้

15. ปุ่ม Font size เป็นปุ่มเพิ่ม/ลดขนาดตัวหนังสือ มีให้เลือกขนาดดังนี้

16. ปุ่ม Bold ทำให้ตัวหนังสือหนาขึ้น กดปุ่มนี้แล้วพิมพ์ข้อความ หรือถ้าข้อความมีอยู่แล้วก็คลุม Highlight ข้อความที่ต้องการทำเป็นตัวหนา จากนั้นก็กดปุ่มตัว B นี้ จะแสดงดังนี้

17. ปุ่ม Strike through ทำการขีดกลางตัวหนังสือ จะแสดงดังนี้

18. ปุ่ม Underline ขีดเส้นใต้ข้อความ จะแสดงดังนี้

19. ปุ่ม Italic ทำข้อความให้เป็นตัวเอียง จะแสดงดังนี้

20. ปุ่ม Subscript ตัวห้อย หรือ ดรรชนีล่าง คืออักขระใดๆ ที่เขียนในระดับต่ำกว่าระดับบรรทัดปกติ จะแสดงดังนี้

21. ปุ่ม Superscript ตัวยก หรือ ดรรชนีบน คืออักขระใดๆ ที่เขียนในระดับสูงกว่าระดับบรรทัดปกติ จะแสดงดังนี้

22. ปุ่ม More font background colors เป็นการ Highlight Background ข้างหลังข้อความให้เป็นสีตามที่ผู้ใช้งานกำหนด ประกอบด้วยสีต่อไปนี้ จะแสดงดังนี้

23. ปุ่ม More font colors ทำให้ข้อความเป็นสี ประกอบด้วยสีต่อไปนี้ จะแสดงดังนี้

23. ปุ่ม Left align , Center , Right align การจัดข้อความให้ชิดซ้าย อยู่กลาง และ ชิดขวา ตามลำดับ จะแสดงดังนี้

24. ปุ่ม Outdent , Indent , Ordered List , Unordered List โดย 2 คำสั่งแรก เป็นคำสั่งสำหรับ การจัดย่อหน้า หมายถึง การขยับข้อความให้เลื่อนเข้า หรือ ออก ส่วน 2 คำสั่งหลัง เป็นคำสั่งทำข้อมูลรายการแบบมีหมายเลข เรียงลำดับจากน้อยไปหามาก โดยกำกับอยู่หน้าแต่ละรายการ ส่วนคำสั่งสุดท้าย คือ ทำข้อมูล รายการแบบไม่มีลำดับ ดังตัวอย่างต่อไปนี้

25. ปุ่ม Paragraph style , Style ปุ่มแรกเป็นการจัดการขนาดตัวอักษรของแต่ละพารากราฟ โดยจะมีตัวให้เลือก และจะแสดงผลดังนี้

ปุ่มถัดไปเป็นการจัดการ Style ของข้อความ โดยจะมีให้เลือกดังนี้ และจะแสดงผลดังนี้

26. ปุ่ม Insert character, Chemistry editor , Emotion , Equation editor สำหรับการเพิ่มอักขระ หรือสูตรทางคณิคศารสตร์ สูตรทางเคมี รูปภาพอีโมชั่น และสัญลักษณ์ต่าง ๆ ดังนี้

มีอักขระให้เลือกดังนี้ มีสัญลักษณ์ให้เลือกดังนี้ มีรูปภาพอีโมชันให้เลือกดังนี้ มีสัญลักษณ์ให้เลือกดังนี้

27. ปุ่ม Undo , Redo สำหรับยกเลิกคำสั่งที่ทำไปแล้ว และทำซ้ำ ตามลำดับ

28. ปุ่ม Accessibility checker , Screenreader helper

29. ปุ่ม Word count , HTML ปุ่มแรก สำหรับนับจำนวนคำ และ นับจำนวนตัวอักษรทั้งหมดที่อยู่ในช่อง จะแสดงดังนี้ ปุ่มที่สอง สำหรับแปลงข้อความในช่อง ให้กลายเป็นข้อความแบบ HTML สำหรับแก้ไขโค้ดได้เอง กรณีที่ผู้ใช้งานรู้เรื่องเกี่ยวกับ HTML จะแสดงดังนี้

30. ปุ่ม Toggle preview , Toggle full screen ปุ่่มแรกสำหรับแสดงหน้าตัวอย่างเวลาที่ข้อความแสดงที่ด้านหน้าเว็บไซต์ ดังนี้ ส่วนปุ่มที่สองเป็นการขยายช่อง HTML Editor ให้เต็มหน้าจอ ดังนี้

การแทรกรูปภาพ

ในกล่อง HTML Editor จะมีเมนู นี้อยู่ วิธีการแทรกต่าง ๆ ทำดังต่อไปนี้

  1. การแทรกรูปภาพ เลือกเมนู Insert or edit images จากนั้นจะแสดงหน้าต่าง popup ดังต่อไปนี้ขึ้นมา

2. คลิกที่ปุ่ม Browse repositories... เพื่อเลือกวิธีการอัพโหลดรูปภาพ จะแสดงหน้าต่าง popup ดังนี้

โดยด้านซ้ายมือของหน้าจอจะมีวิธีการอัพโหลดรูปภาพได้หลายวิธีมาก ดังนี้

  • Server files เป็นการเรียกไฟล์รูปภาพทั้งหมดที่มีอยู่คอร์สเรียนนั้น ๆ ของ server Moodle ขึ้นมาให้ดู ตาม topics ต่าง ๆ ของคอร์สนั้น ดังรูป

  • Recent files เป็นการเรียกไฟล์รูปภาพล่าสุดที่ใช้งานออกมา ดังรูป

  • Upload a file เป็นการเรียกไฟล์ทุกชนิด ที่มีอยู่ในคอมพิวเตอร์ออกมาแสดง โดยการคลิกที่ปุ่ม Choose file จะแสดงดังหน้าจอต่อไปนี้

  • Google Drive เป็นการเรียกไฟล์จาก Google Drive ต้อง login account ของผู้ใช้งาน เผื่อเข้าใช้งานก่อน จะแสดงดังหน้าจอต่อไปนี้

  • Office 365 เป็นการเรียกไฟล์จาก Office 365 อาทิเช่น My OneDrive , Group , Files Trending จะแสดงดังหน้าจอต่อไปนี้

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

  • Dropbox เป็นการเรียกไฟล์จาก Dropbox ต้อง login account ของผู้ใช้งาน เผื่อเข้าใช้งานก่อน จะแสดงดังหน้าจอต่อไปนี้

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

  • Embedded files เป็นการเรียกไฟล์จาก Embedded files คือไฟล์ที่ถูกฝังไว้ในระบบ จะแสดงดังหน้าจอต่อไปนี้

3. ในกรณีนี้ขออธิบายการเลือกอัพโหลดไฟล์รูปภาพที่ใช้งานบ่อยที่สุดคือ วิธี Upload a file จากเครื่องคอมพิวเตอร์ของผู้ใช้งาน ดังนี้ เมื่อเลือกไฟล์ได้แล้ว 1 รูป ตามวิธีการด้านบน คลิกเลือกรูป ใส่ชื่อไฟล์ใหม่ที่ช่อง Save as และเลือก license ของรูปภาพ หน้าจอจะแสดงดังต่อไปนี้

4. จากนั้น เมื่อกด Upload this file แล้ว จะแสดงหน้าจอดังต่อไปนี้

5. ช่อง Describe this image for someone who cannot see it เป็นช่องให้อธิบายเกี่ยวกับรูปภาพ จะอำนวยความสะดวกให้แก่คนตาบอด หากไม่ต้องการเขียน จำเป็นต้องเช็คถูกที่ช่องเล็กๆ ด้านล่าง ที่เขียนว่า Description not necessary ไม่เช่นนี้เวลากดปุ่ม Save image จะขึ้น error เตือนให้กรอกข้อความ

6. ช่อง Size เป็นการกำหนดขนาดรูปภาพ โดยรูปภาพจะเซ็ตขนาดอีกด้านให้อัตโนมัติ เผื่อความสมส่วนของรูป

7. ช่อง Alignment เป็นการเลือกว่าจะให้รูปวางที่ตำแหน่งไหนของบรรทัดนั้น

8. ปุ่ม Save image กดเมื่อเลือกรูปเรียบร้อยแล้ว รูปภาพจะไปแสดงที่ช่อง HTML Editor ดังรูปภาพ

การแทรกไฟล์วิดีโอ

ในกล่อง HTML Editor จะมีเมนู นี้อยู่ วิธีการแทรกต่าง ๆ ทำดังต่อไปนี้

  1. การแทรกรูปภาพ เลือกเมนู Insert or edit an audio/video file จากนั้นจะแสดงหน้าต่าง popup ดังต่อไปนี้ขึ้นมา

2. เลือก Tab ที่ 2 ที่ชื่อ Video จะแสดงดังหน้าจอต่อไปนี้

3. คลิก Browser repositories... เพื่อเลือกไฟล์ video เข้ามา วิธีการอัพโหลด video สามารถเลือกวิธีการอัพโหลด VDO ได้หลายรูปแบบ อาทิเช่น จากการ Upload a file หรือ Youtube videos หรือ dropbox เป็นต้น วิธีการทำจะเหมือนการ upload รูปภาพที่ได้กล่าวไว้ด้านบน

4. เมื่อได้ไฟล์ video ได้แล้ว จะกลับมาที่หน้าจอดังนี้

5. หากไม่ต้องการเซ็ตค่าอะไรเพิ่ม สามารถกดที่ปุ่ม insert media ได้เลย หรือหากต้องการเซ็ตค่าเพิ่ม มาดูที่รายละเอียดดังนี้ เมนู Diplay options ประกอบไปด้วย Size ขนาดไซส์ กว้าง x สูง ของหน้าจอ video ที่ต้องการ และสามารถอัพโหลด รูป Trumbnail URL ของ video ใช้สำหรับ แสดงเป็นรูปแรกก่อน video จะเปิดเล่น ได้ที่ช่องถัดไป

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

  • ความละเอียดของวิดีโอ: ความกว้าง X ความสูง

  • 2160p: 3840x2160

  • 1440p: 2560x1440

  • 1080p: 1920x1080

  • 720p: 1280x720

  • 480p: 854x480

  • 360p: 640x360

  • 240p: 426x240

6. เมนู Advanced settings เป็นการเลือกการแสดงดังนี้

  • Show controls แสดงหน้าจอควมคุม video อาทิเช่น ปุ่ม play stop pause เป็นต้น

  • Play automatically เล่น video โดยอัตโนมัติ เมื่อเปิดหน้า

  • Muted ปิดเสียงเอาไว้ก่อน เมื่อเริ่มเล่น video

  • Loop วนลูปเปิด video ใหม่ เมื่อเล่นเสร็จแล้ว

7. เมนู Subtitles and captions สำหรับใส่ Subtitles, captions, chapters และ รายละเอียด สามารถเพิ่มผ่านไฟล์ format WebVTT (Web Video Text Tracks) ส่วนนี้จะถูกโชว์ในเมนู dropdown สำหรับการเลือกแสดง

8. เมื่อเลือกและใส่ข้อมูล video ได้แล้ว ให้คลิกที่ปุ่ม Insert media ด้านล่าง เพื่อแทรกไฟล์ video ที่ไว้ที่ช่อง HTML Editor

9. หน้าจอที่ช่อง HTML Editor จะแสดงดังต่อไปนี้

10. หลังจากนั้นคลิกที่ปุ่ม Save and return to course ที่หน้าจอด้านล่างสุด คลิป vdo จะแสดงที่หน้าเว็บไซต์ดังต่อไปนี้

การแทรกตาราง

ในกล่อง HTML Editor จะมีเมนู นี้อยู่ วิธีการแทรกต่าง ๆ ทำดังต่อไปนี้

  1. การแทรกตาราง เลือกเมนู Insert table จากนั้นจะแสดงหน้าต่าง popup ดังต่อไปนี้ขึ้นมา

2. Caption กรอกชื่อ caption ของตาราง

3. Caption position เลือกตำแหน่งของการวาง caption ว่าจะอยู่ด้านบน (Top) หรือ ด้านล่าง (Bottom) ของตาราง

4. Define headers on เป็นการเลือกว่าจะกำหนดให้ว่าจะมีหัวของตารางหรือไม่ จะมีหัวตารางที่ column หรือ row หรือ เป็นทั้งคู่

5. Number of rows ใส่จำนวนของแถวที่ต้องการ

6. Number of columns ใส่จำนวนของคอลัมน์ที่ต้องการ

7. Borders เลือกเส้นขอบข้างของตาราง จะเป็นตามธีม หรือ มีขอบข้างรอบๆตารางเท่านั้น หรือ มีขอบข้างแต่ละ cell เลย

8. Style of borders ต้องทำการเลือก Border ก่อน ถึงจะสามารถเลือกชนิดของขอบข้างได้ อาทิเช่น เส้นทึบ , ขีด dashed , จุด

9. Size of borders ต้องทำการเลือก Border ก่อน ถึงจะสามารถกำหนดขนาดของเส้นขอบข้างได้ ว่าจะให้หนากี่ Pixel

10. Border colour สีของเส้นขอบข้าง

11. Background colour สีพื้นหลังของตาราง

12. Table width (in %) ความกว้างของตารางมีขนาดกี่ % ของหน้าจอ

13. คลิก ปุ่ม Create table เพื่อแทรกตาราง จะแสดงดังรูปตัวอย่างนี้

การแทรกลิงก์

การแทรกลิงค์สามารถทำได้ดังต่อไปนี้

  1. คลิกปุ่ม จะปรากฎหน้าต่างต่อไปนี้

2. กรอกชื่อลิงค์ URL ที่ช่อง Enter a URL หรือสามารถ Browse repositories... เลือกไฟล์ หรือ ลิงค์จากในคลังข้อมูลของเรา โดยวิธีการก็จะเหมือนกับการอัพโหลดรูปภาพที่ได้กล่าวได้ด้านบน

3. คลิกเช็คถูกที่ช่อง Open in new window สำหรับการเปิดหน้าต่างใหม่เมื่อมีการคลิกลิงค์นี้

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

การแทรก VDO จาก Youtube

  1. เปิด Browser เพื่อเข้าเว็บ Youtube หาคลิป video จาก Youtube ที่ต้องการ และทำการคลิกขวาเลือก copy URL ลิงค์ที่ช่องด้านบนลงมา ดังรูป

2. นำ URL ลิงค์ที่ได้ มาวางที่ช่อง HTML Editor ดังรูป

3. คลิกที่ปุ่ม ด้านล่าง จากนั้นที่หน้าเว็บจะแสดงหน้าจอดังต่อไปนี้

4. ข้อระวังในการเผยแพร่ VDO ของบุคคลอื่นจาก Youtube มาใช้งาน ต้องระวังในเรื่องของลิขสิทธิ์ วิธีการค้นหาวิดีโอจาก Youtube ว่าตัวไหนสามารถนำมาเผยแพร่ได้นั้น เบื้องต้นอาจจะใช้วิธีการดังต่อไปนี้ แสดงตัวอย่างดังนี้ เมื่อมีการค้นหาคำว่า TedTalk on E-learning

5. คลิกที่เมนู ตัวกรองที่ด้านขวามือบน คลิกเลือกเมนู ครีเอทีฟคอมมอนส์ ดังรูป

6. หน้าจอจะแสดงการค้นหา VDO และกรอง VDO ที่สามารถนำไปใช้งานเพื่อเผยแพร่ได้ ดังรูป เป็นต้น

การนำเข้าเนื้อหาจากไฟล์ MS Word

เป็นการนำเนื้อหาที่อยู่ใน file เอกสาร word ของผู้ใช้งาน มาใส่ในช่อง HTML Editor โดยอัตโนมัติ ไม่ต้องทำการพิมพ์เองอีกครั้ง สามารถทำได้โดยวิธีต่อไปนี้

  1. คลิกที่เมนู Import Word file

  2. เลือกอัพโหลดไฟล์ Word ได้ตามตัวเลือกที่มีให้ ดังหน้าจอต่อไปนี้ ในกรณีนี้ขอเลือกใช้วิธี Upload a file

3. เมื่อทำการเลือกไฟล์ที่ต้องการนำเข้า (Import) ข้อมูลแล้ว คลิกปุ่ม Upload this file ที่อยู่ด้านล่าง หน้าจอจะนำเข้าข้อมูลให้อัตโนมัติ แสดงดังนี้

4. จากนั้นกดปุ่ม จะแสดงหน้าจอที่หน้าเว็บไซต์ ดังนี้