การจัดรูปแบบเนื้อหา
เป็นการจัดรูปแบบข้อความพื้นฐาน โดยใช้ตัว HTML Editor เป็นตัวช่วยให้การจัดการ อาทิเช่น การแทรกรูปภาพ การแทรกลิงก์ การแทรก VDO จาก Youtube การนำเข้าเนื้อหาจากไฟล์ MS Word เป็นต้น
Last updated
เป็นการจัดรูปแบบข้อความพื้นฐาน โดยใช้ตัว HTML Editor เป็นตัวช่วยให้การจัดการ อาทิเช่น การแทรกรูปภาพ การแทรกลิงก์ การแทรก VDO จาก Youtube การนำเข้าเนื้อหาจากไฟล์ MS Word เป็นต้น
Last updated
หลังจากทำการ login เข้าใช้งาน CMU Online แล้ว จะเจอหน้าจอดังต่อไปนี้
วิธีการเข้าสู่ระบบการจัดการข้อความเนื้อหาพื้นฐาน สามารถทำดังนี้
คลิกรายวิชาที่ต้องการทำการเพิ่ม/แก้ไขเนื้อหา โดยเลือกเมนู My Courses ด้านบนฝั่งซ้ายมือ ของหน้าจอ
2. เมื่อเลือกรายวิชาที่ต้องการได้แล้วจะแสดงดังหน้าจอต่อไปนี้
5. จากนั้นเมื่อเลือกจำนวนหัวข้อใหม่ 2 หัวข้อ จะแสดงดังหน้าจอต่อไปนี้
9. กรณีนี้ขอเลือกหัวข้อ Label เพื่อแสดงการจัดการกับข้อความเนื้อหา จากนั้นคลิกที่ปุ่ม Add
10. จากนั้นจะแสดงหน้าจอดังต่อไปนี้
11. ส่วนนี้จะเป็นส่วนที่เรียกว่า HTML Editor สำหรับจัดรูปแบบข้อความพื้นฐาน
12. สามารถกรอกข้อความที่ต้องการในช่องที่ให้มา หรือจะ copy ข้อความ แล้วนำมาวาง (paste) ที่ช่องนี้ก็ได้เช่นกัน กรณีที่ผู้ใช้งาน copy ข้อความมาจากโปรแกรม word หรือเอาข้อความมาจากเว็บไซต์นั้น เวลา paste ข้อความลงช่องนี้แล้วนั้น ข้อความที่ได้มาจะเป็นข้อความแบบเดียวกับต้นแบบที่ copy มาเลย อาทิเช่น ขนาดตัวหนังสือใหญ่เท่ากับต้นฉบับ สีเดียวกัน เป็นตัวหนาเหมือนกัน เป็นลิงค์ข้อความเหมือนกัน เป็นต้น ดังรูป
13. หากต้องการที่จะให้ข้อความเป็นแบบธรรมดา เพื่อที่จะมากำหนดรูปแบบตัวหนังสือใหม่จากใน HTML Editor เอง ผู้ใช้สามารถทำได้โดย copy ข้อความนั้นไปวางที่โปรแกรม notepad ก่อน แล้วจึง copy ข้อความจาก notepad นั้นมาวางที่ช่อง HTML Editor อีกที ดังรูปตามลำดับนี้
2. คลิกที่ปุ่ม Browse repositories... เพื่อเลือกวิธีการอัพโหลดรูปภาพ จะแสดงหน้าต่าง popup ดังนี้
โดยด้านซ้ายมือของหน้าจอจะมีวิธีการอัพโหลดรูปภาพได้หลายวิธีมาก ดังนี้
Upload a file เป็นการเรียกไฟล์ทุกชนิด ที่มีอยู่ในคอมพิวเตอร์ออกมาแสดง โดยการคลิกที่ปุ่ม Choose file จะแสดงดังหน้าจอต่อไปนี้
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 ดังรูปภาพ
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 จะแสดงดังต่อไปนี้
2. Caption กรอกชื่อ caption ของตาราง
5. Number of rows ใส่จำนวนของแถวที่ต้องการ
6. Number of columns ใส่จำนวนของคอลัมน์ที่ต้องการ
9. Size of borders ต้องทำการเลือก Border ก่อน ถึงจะสามารถกำหนดขนาดของเส้นขอบข้างได้ ว่าจะให้หนากี่ Pixel
10. Border colour สีของเส้นขอบข้าง
11. Background colour สีพื้นหลังของตาราง
12. Table width (in %) ความกว้างของตารางมีขนาดกี่ % ของหน้าจอ
13. คลิก ปุ่ม Create table เพื่อแทรกตาราง จะแสดงดังรูปตัวอย่างนี้
การแทรกลิงค์สามารถทำได้ดังต่อไปนี้
2. กรอกชื่อลิงค์ URL ที่ช่อง Enter a URL หรือสามารถ Browse repositories... เลือกไฟล์ หรือ ลิงค์จากในคลังข้อมูลของเรา โดยวิธีการก็จะเหมือนกับการอัพโหลดรูปภาพที่ได้กล่าวได้ด้านบน
3. คลิกเช็คถูกที่ช่อง Open in new window สำหรับการเปิดหน้าต่างใหม่เมื่อมีการคลิกลิงค์นี้
4. คลิกปุ่ม Create link ที่หน้าเว็บไซต์จะแสดงดังรูปตัวอย่างการโพสต่อไปนี้
เปิด Browser เพื่อเข้าเว็บ Youtube หาคลิป video จาก Youtube ที่ต้องการ และทำการคลิกขวาเลือก copy URL ลิงค์ที่ช่องด้านบนลงมา ดังรูป
2. นำ URL ลิงค์ที่ได้ มาวางที่ช่อง HTML Editor ดังรูป
4. ข้อระวังในการเผยแพร่ VDO ของบุคคลอื่นจาก Youtube มาใช้งาน ต้องระวังในเรื่องของลิขสิทธิ์ วิธีการค้นหาวิดีโอจาก Youtube ว่าตัวไหนสามารถนำมาเผยแพร่ได้นั้น เบื้องต้นอาจจะใช้วิธีการดังต่อไปนี้ แสดงตัวอย่างดังนี้ เมื่อมีการค้นหาคำว่า TedTalk on E-learning
5. คลิกที่เมนู ตัวกรองที่ด้านขวามือบน คลิกเลือกเมนู ครีเอทีฟคอมมอนส์ ดังรูป
6. หน้าจอจะแสดงการค้นหา VDO และกรอง VDO ที่สามารถนำไปใช้งานเพื่อเผยแพร่ได้ ดังรูป เป็นต้น
เป็นการนำเนื้อหาที่อยู่ใน file เอกสาร word ของผู้ใช้งาน มาใส่ในช่อง HTML Editor โดยอัตโนมัติ ไม่ต้องทำการพิมพ์เองอีกครั้ง สามารถทำได้โดยวิธีต่อไปนี้
เลือกอัพโหลดไฟล์ Word ได้ตามตัวเลือกที่มีให้ ดังหน้าจอต่อไปนี้ ในกรณีนี้ขอเลือกใช้วิธี Upload a file
3. เมื่อทำการเลือกไฟล์ที่ต้องการนำเข้า (Import) ข้อมูลแล้ว คลิกปุ่ม Upload this file ที่อยู่ด้านล่าง หน้าจอจะนำเข้าข้อมูลให้อัตโนมัติ แสดงดังนี้
3. คลิกที่ปุ่มสีเขียวที่อยู่ด้านบน จะปรากฎหน้าจอดังต่อไปนี้ ซึ่งจะมีเมนู Edit , Add an activity or resource, Add topics แสดงขึ้นมา นั่นหมายความว่าระบบพร้อมที่จะให้ทำการแก้ไขข้อมูลแล้ว
4. คลิกเลือกหัวข้อใหม่ ที่เมนู + Add topics ที่อยู่บริเวณด้านล่างของหน้าจอ จากนั้นจะแสดงหน้าจอ popup ถามว่าจะให้สร้างหัวข้อเปล่าๆ มาใหม่กี่หัวข้อ ดังต่อไปนี้
6. คลิกที่รูปดินสอสีดำ หลังคำว่า Topic เพื่อทำการเปลี่ยนชื่อหัวข้อใหม่
7. จากนั้นทำการพิมพ์หัวข้อใหม่ที่ต้องการ จากนั้นทำการกด Enter จะแสดงหน้าจอดังต่อไปนี้
8. กรณีที่เราจะทำการเพิ่มข้อความเพิ่มเติมสำหรับหัวข้อนี้ สามารถทำได้โดย คลิกที่ปุ่ม + Add an activity or resource
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 จะมีเมนู นี้อยู่ วิธีการแทรกต่าง ๆ ทำดังต่อไปนี้
การแทรกรูปภาพ เลือกเมนู Insert or edit images จากนั้นจะแสดงหน้าต่าง popup ดังต่อไปนี้ขึ้นมา
Server files เป็นการเรียกไฟล์รูปภาพทั้งหมดที่มีอยู่คอร์สเรียนนั้น ๆ ของ server Moodle ขึ้นมาให้ดู ตาม topics ต่าง ๆ ของคอร์สนั้น ดังรูป
Recent files เป็นการเรียกไฟล์รูปภาพล่าสุดที่ใช้งานออกมา ดังรูป
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 คือไฟล์ที่ถูกฝังไว้ในระบบ จะแสดงดังหน้าจอต่อไปนี้
ในกล่อง HTML Editor จะมีเมนู นี้อยู่ วิธีการแทรกต่าง ๆ ทำดังต่อไปนี้
การแทรกรูปภาพ เลือกเมนู Insert or edit an audio/video file จากนั้นจะแสดงหน้าต่าง popup ดังต่อไปนี้ขึ้นมา
2. เลือก Tab ที่ 2 ที่ชื่อ Video จะแสดงดังหน้าจอต่อไปนี้
10. หลังจากนั้นคลิกที่ปุ่ม Save and return to course ที่หน้าจอด้านล่างสุด คลิป vdo จะแสดงที่หน้าเว็บไซต์ดังต่อไปนี้
ในกล่อง HTML Editor จะมีเมนู นี้อยู่ วิธีการแทรกต่าง ๆ ทำดังต่อไปนี้
การแทรกตาราง เลือกเมนู Insert table จากนั้นจะแสดงหน้าต่าง popup ดังต่อไปนี้ขึ้นมา
3. Caption position เลือกตำแหน่งของการวาง caption ว่าจะอยู่ด้านบน (Top) หรือ ด้านล่าง (Bottom) ของตาราง
4. Define headers on เป็นการเลือกว่าจะกำหนดให้ว่าจะมีหัวของตารางหรือไม่ จะมีหัวตารางที่ column หรือ row หรือ เป็นทั้งคู่
7. Borders เลือกเส้นขอบข้างของตาราง จะเป็นตามธีม หรือ มีขอบข้างรอบๆตารางเท่านั้น หรือ มีขอบข้างแต่ละ cell เลย
8. Style of borders ต้องทำการเลือก Border ก่อน ถึงจะสามารถเลือกชนิดของขอบข้างได้ อาทิเช่น เส้นทึบ , ขีด dashed , จุด
คลิกปุ่ม จะปรากฎหน้าต่างต่อไปนี้
3. คลิกที่ปุ่ม ด้านล่าง จากนั้นที่หน้าเว็บจะแสดงหน้าจอดังต่อไปนี้
คลิกที่เมนู Import Word file
4. จากนั้นกดปุ่ม จะแสดงหน้าจอที่หน้าเว็บไซต์ ดังนี้
