แนะนำการใช้งาน Text Editors
- เครื่องมือที่ใช้งานบ่อย
- การเพิ่มรูปภาพ (Insert/edit image)
- การเพิ่มคลิป (Insert/edit clip)
- การเชื่อมลิงก์กับข้อความ หรือ รูปภาพ (Insert link)
- การสร้างตารางข้อมูล (Table)
- การใช้งาน < > source code
- การทำปุ่มข้อความด้วย Bootstrap (Insert/Edit Bootstrap Button)
- การใช้งานไอคอน (Icons)
- การใช้งาน Anchor
1.เครื่องมือใช้งานบ่อย ดังนี้
Insert : สำหรับอัพข้อมูลต่างๆ ดังภาพนี้
Table : สำหรับสร้างตารางลงข้อมูล
Tools : สำหรับใช้งาน <> Source Code เช่น ใส่ iframe google maps
Bootstrap : สำหรับใช้งาน สร้างปุ่ม Bootstrap Button
B / U : สำหรับปรับตัวอักษรให้หนา เอียง และขีดเส้นใต้
Insert/Edit Link : สำหรับใส่ url link ที่ต้องการคลิกแล้วเชื่อมไปยังที่อื่น
Insert/Edit Image : สำหรับอัพโหลดไฟล์ภาพ
Icons : สำหรับใช้งานไอคอนต่างๆ
2.การเพิ่มรูปภาพ (Insert/edit image)
ขั้นตอนที่ 1 : คลิกไอคอน “รูปภาพ” (inert/edit image ) เพื่อทำการเพิ่มภาพลงในเพจ
ขั้นตอนที่ 2 : คลิกไอคอน “แว่นขยาย” เพื่อทำการเบรารูปภาพจากระบบจัดการไฟล์ ( File Management)
ขั้นตอนที่ 3 : คลิกไอคอน “แผ่นดิสก์” เพื่อเรียกข้อมูลจากคอมพิวเตอร์
ขั้นตอนที่ 4 : เลือกรูปภาพจากคอมพิวเตอร์ คลิกปุ่ม "Open" เพื่อเพิ่มภาพเข้าระบบจัดการไฟล์ (File Management)
ขั้นตอนที่ 5 : "ดับเบิ้ล" คลิกรูปภาพ ที่ต้องการใส่ในช่องรายละเอียด และปรับขนาดตามที่ต้องการ
3.การเพิ่มคลิป (Insert/edit clip)
ขั้นตอนที่ 1 : คลิก "Insert Media" และนำลิงก์จาก youtube มาใส่ในช่อง Source
ขั้นตอนที่ 2 : ปรับขนาดวิดีโอได้ที่ช่อง "Dimensions" เมื่อเรียบร้อย
คลิกปุ่ม Okหมายเหตุ: ลิงก์ที่นำมาใส่จะต้องคัดลอกจาก ช่อง URL Browser ด้านบนเท่านั้น
4.การเชื่อมลิงก์กับข้อความ หรือ รูปภาพ (Insert link)
ขั้นตอนที่ 1 : ทำการ "ไฮไลท์" หรือ "คลุมข้อความ" ที่ต้องการ
ขั้นตอนที่ 2 : คลิกไอคอน “ลูกโซ่” จะแสดงป็อปอัพ ให้นำลิงก์มาใส่ในช่อง Url และคลิกปุ่มสีเขียว Ok
5.การสร้างตารางข้อมูล (Table)
ขั้นตอนที่ 1 : คลิกหัวข้อ "Table" และลากเมาส์ไปตามบล็อคสี่เหลี่ยม เพื่อสร้างจำนวนแถวและคอลัมน์ตามต้องการ
ขั้นตอนที่ 2 : เมื่อตารางแสดงผลแล้ว สามารถกรอกข้อมูล หรือ เพิ่มรูปภาพ ได้ตามต้องการ
6.การใช้งาน < > source code
ขั้นตอนที่ 1 : ค้นหาแผนที่ด้วย Google Maps คลิกปุ่มแชร์ และเลือกแท็บ "ฝังแผนที่"
ขั้นตอนที่ 2 : คลิกปุ่ม "คัดลอก HTML"
ขั้นตอนที่ 3 : คลิกหัวข้อ Tools "< > Source code" ระบบจะแสดงป็อปอัพขึ้นมา
ขั้นตอนที่ 4 : นำโค้ดที่ได้จากการ "คัดลอก HTML" ตามขั้นตอนที่ 2 มาวางในช่องว่างดังภาพ และคลิกปุ่มสีเขียว Ok
ขั้นตอนที่ 5 : เมื่อระบบแสดงแผนที่ Google Maps แล้ว ให้ทำการคลิกปุ่มสีฟ้าด้านล่าง "บันทึก" เพื่อให้แผนที่แสดงที่หน้าเว็บ
7.การทำปุ่มข้อความด้วย Bootstrap (Insert/Edit Bootstrap Button)
ขั้นตอนที่ 1 : คลิกปุ่ม "Insert/Edit Bootstrap Button" ระบบจะแสดงป็อปอัพขึ้นมา
ขั้นตอนที่ 2 : เลือก "BUTTON STYLE" ตามต้องการ
ขั้นตอนที่ 3 : เลือก "BUTTON SIZE" ตามต้องการ
ขั้นตอนที่ 4 : หากต้องการเชื่อมลิงก์กับปุ่มด้วย ให้คลิกที่ "<a>" จะแสดงช่องให้ใส่ลิงก์
ขั้นตอนที่ 5 : กรอกข้อความได้ที่ช่อง "TEXT" หรือ หากต้องการแสดงไอคอนหน้าข้อความ คลิกที่ "Icon"
ขั้นตอนที่ 6 : หากได้ปุ่มตามต้องการตามที่แสดงผลในช่อง PREVIEW แล้ว ให้คลิกปุ่มสีเขียว "OK"
ระบบจะแสดงปุ่มดังภาพด้านล่าง
8.การใช้งานไอคอน (Icons)
ขั้นตอนที่ 1 : คลิก "Icons" ระบบจะแสดงป็อปอัพขึ้นมา
ขั้นตอนที่ 2 : คลิกเลือกใช้ "ไอคอน" ตามต้องการ
ไอคอนจะแสดงดังภาพด้านล่าง
9.การใช้งาน Anchor หากต้องการให้คลิกข้อความหน้าเว็บตำแหน่งใดตำแหน่งหนึ่ง และพาไปยังตำแหน่งข้อมูลที่ต้องการในหน้าเดียวกัน สามารถทำได้ง่ายๆ ด้วยเครื่องมือ "Anchor" ซึ่งมีขั้นตอนดังนี้
จากภาพข้างบน ต้องการให้คลิกที่ "สมาร์ทโฟน" และไปยังตำแหน่ง "5.อาการปวดตา"
ขั้นตอนที่ 1 : ทำการคลุมข้อความ "สมาร์ทโฟน"
ขั้นตอนที่ 2 : คลิกไอคอน "ลูกโซ่"
ขั้นตอนที่ 3 : ทำการกำหนดชื่อ ID ในช่อง Url โดยขึ้นต้นสัญลักษณ์ "#" เสมอ หากเรียบร้อยคลิกปุ่มสีเขียว OK
ขั้นตอนที่ 4 : คลิกไปยังตำแหน่งที่ต้องการปัก anchor ให้ cursor (ขีดกระพริบ) อยู่หน้า "5.อาการปวดตา"
ขั้นตอนที่ 5 : คลิกหัวข้อ Insert > "Anchor"
ขั้นตอนที่ 6 : กรอกชื่อ ID ที่กำหนดตามขั้นตอนที่ 3 ในช่อง "Id" โดยไม่ต้องใส่สัญลักษณ์ "#" หากเรียบร้อยคลิกปุ่มสีเขียว OK
และทำการบันทึกการแก้ไขตามลำดับ เป็นอันเสร็จ
ท่านสามารถตรวจสอบการใช้ Anchor ได้ที่หน้าเว็บไซต์ของท่าน