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

71 views มิถุนายน 6, 2018 มิถุนายน 8, 2018 not 0

แนะนำการใช้งาน 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 ได้ที่หน้าเว็บไซต์ของท่าน


 

Was this helpful?