แนะนำการใช้งาน 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 : สำหรับใช้งานไอคอนต่างๆ
   
   

1. การเพิ่มรูปภาพ (Insert/edit image)
   
   
   
   คลิกไอคอน “รูปภาพ” (inert/edit image ) เพื่อทำการเพิ่มภาพลงในเพจ
   คลิกไอคอน “แว่นขยาย” เพื่อทำการเบรารูปภาพจากระบบจัดการไฟล์ ( File Management)
   คลิกไอคอน “แผ่นดิสก์” เพื่อเรียกข้อมูลจากคอมพิวเตอร์
   เลือกรูปภาพจากคอมพิวเตอร์ คลิกปุ่ม "Open" เพื่อเพิ่มภาพเข้าระบบจัดการไฟล์ (File Management)
   "ดับเบิ้ล" คลิกรูปภาพ ที่ต้องการใส่ในช่องรายละเอียด และปรับขนาดตามที่ต้องการ
   
   

1. การเพิ่มคลิป (Insert/edit clip)
   
   
   
   คลิก "Insert Media" และนำลิงก์จาก youtube มาใส่ในช่อง Source
   ปรับขนาดวิดีโอได้ที่ช่อง "Dimensions" เมื่อเรียบร้อย คลิกปุ่ม Ok
   
   
   
   หมายเหตุ: ลิงก์ที่นำมาใส่จะต้องคัดลอกจาก ช่อง URL Browser ด้านบนเท่านั้น
   
   

1. การเชื่อมลิงก์กับข้อความ หรือ รูปภาพ (Insert link)
   
   
   
   ทำการ "ไฮไลท์" หรือ "คลุมข้อความ" ที่ต้องการ
   คลิกไอคอน “ลูกโซ่” จะแสดงป็อปอัพ ให้นำลิงก์มาใส่ในช่อง Url และคลิกปุ่มสีเขียว Ok
   
   

1. การสร้างตารางข้อมูล (Table)
   
   
   
   คลิกหัวข้อ "Table" และลากเมาส์ไปตามบล็อคสี่เหลี่ยม เพื่อสร้างจำนวนแถวและคอลัมน์ตามต้องการ
   เมื่อตารางแสดงผลแล้ว สามารถกรอกข้อมูล หรือ เพิ่มรูปภาพ ได้ตามต้องการ
   
   

1. การใช้งาน < > source code
   
   
   
   ค้นหาแผนที่ด้วย Google Maps คลิกปุ่มแชร์ และเลือกแท็บ "ฝังแผนที่"
   คลิกปุ่ม "คัดลอก HTML"
   
   
   
   คลิกหัวข้อ Tools "< > Source code" ระบบจะแสดงป็อปอัพขึ้นมา
   
   
   
   นำโค้ดที่ได้จากการ "คัดลอก HTML" ตามขั้นตอนที่ 2 มาวางในช่องว่างดังภาพ และคลิกปุ่มสีเขียว Ok
   
   
   
   เมื่อระบบแสดงแผนที่ Google Maps แล้ว ให้ทำการคลิกปุ่มสีฟ้าด้านล่าง "บันทึก" เพื่อให้แผนที่แสดงที่หน้าเว็บ
   
   

1. การทำปุ่มข้อความด้วย Bootstrap (Insert/Edit Bootstrap Button)
   
   
   
   คลิกปุ่ม "Insert/Edit Bootstrap Button" ระบบจะแสดงป็อปอัพขึ้นมา
   
   
   
   เลือก "BUTTON STYLE" ตามต้องการ
   เลือก "BUTTON SIZE" ตามต้องการ
   หากต้องการเชื่อมลิงก์กับปุ่มด้วย ให้คลิกที่ "<a>" จะแสดงช่องให้ใส่ลิงก์
   กรอกข้อความได้ที่ช่อง "TEXT" หรือ หากต้องการแสดงไอคอนหน้าข้อความ คลิกที่ "Icon"
   หากได้ปุ่มตามต้องการตามที่แสดงผลในช่อง PREVIEW แล้ว ให้คลิกปุ่มสีเขียว "OK" ระบบจะแสดงปุ่มดังภาพด้านล่าง
   
   
   
   

1. การใช้งานไอคอน (Icons)
   
   
   
   คลิก "Icons" ระบบจะแสดงป็อปอัพขึ้นมา
   
   
   
   คลิกเลือกใช้ "ไอคอน" ตามต้องการ ไอคอนจะแสดงดังภาพด้านล่าง
   
   
   
   

1. การใช้งาน Anchor หากต้องการให้คลิกข้อความหน้าเว็บตำแหน่งใดตำแหน่งหนึ่ง และพาไปยังตำแหน่งข้อมูลที่ต้องการในหน้าเดียวกัน สามารถทำได้ง่ายๆ ด้วยเครื่องมือ "Anchor" ซึ่งมีขั้นตอนดังนี้
   
   
   
   จากภาพข้างบน ต้องการให้คลิกที่ "สมาร์ทโฟน" และไปยังตำแหน่ง "5.อาการปวดตา"
   
   
   
   ทำการคลุมข้อความ "สมาร์ทโฟน"
   คลิกไอคอน "ลูกโซ่"
   ทำการกำหนดชื่อ ID ในช่อง Url โดยขึ้นต้นสัญลักษณ์ "#" เสมอ หากเรียบร้อยคลิกปุ่มสีเขียว OK
   
   
   
   คลิกไปยังตำแหน่งที่ต้องการปัก anchor ให้ cursor (ขีดกระพริบ) อยู่หน้า "5.อาการปวดตา"
   คลิกหัวข้อ Insert > "Anchor"
   กรอกชื่อ ID ที่กำหนดตามขั้นตอนที่ 3 ในช่อง "Id" โดยไม่ต้องใส่สัญลักษณ์ "#" หากเรียบร้อยคลิกปุ่มสีเขียว OK และทำการบันทึกการแก้ไขตามลำดับ เป็นอันเสร็จ ท่านสามารถตรวจสอบการใช้ Anchor ได้ที่หน้าเว็บไซต์ของท่าน