แนะนำการใช้งาน Text Editors

แนะนำการใช้งาน Text Editors

1. เครื่องมือที่ใช้งานบ่อย 
2. การเพิ่มรูปภาพ (Insert/edit image) 
3. การเพิ่มคลิป (Insert/edit clip) 
4. การเชื่อมลิงก์กับข้อความ หรือ รูปภาพ (Insert link) 
5. การสร้างตารางข้อมูล (Table) 
6. การใช้งาน < > source code 
7. การทำปุ่มข้อความด้วย Bootstrap (Insert/Edit Bootstrap Button) 
8. การใช้งานไอคอน (Icons) 
9. การใช้งาน 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 ได้ที่หน้าเว็บไซต์ของท่าน