ตอนนี้ว่าด้วยเรื่อง การเพิ่มฟอนต์ภาษาไทย และการประยุกต์ใช้ตาราง-ทำปุ่มเลือกแบบกราฟิก เชิญติดตาม
การเพิ่มฟอนต์ภาษาไทย
ฟอนต์ภาษาไทยที่ระบบตั้งไว้
ต้องการเปลี่ยนฟอนต์ภาษาไทยเป็นอย่างอื่น
1. ชี้กรอบข้อความ ยินดีต้อนรับ กด รูปดินสอ แก้ไข
2. เพิ่มโค้ด html (ตัวสีแดง)
3. เปิดเว็บไซต์ https://sites.google.com/view/sitesguide/fonts คัดลอก Embed code
4. วางแทรกในโค้ดในข้อ 2 ระหว่าง <head></head>(ตัวสีน้ำเงิน)
5. ลบบรรทัด
<p>“And what is the use of a book,” thought Alice, “without pictures or conversation?”</p>
6. เปลี่ยนฟอนต์
เดิม font-family: ‘Ruge Boogie’
คลิ้ก http://fonts.google.com
7. เลือกฟอนต์ภาษาไทยจาก Google ซึ่งมีให้เลือก 7 แบบ ได้แก่ Noto Sans Thai, Noto Serif Thai, Pattaya, Kanit, IBM Plex Sans Thai, IBM Plex Sans Thai Looped และ Noto Sans Thai Looped
8. ขอเลือกฟอนต์ Noto Sans Thai คัดลอกชื่อฟอนต์ไปวางแทนที่
9. เลือกฟอนต์ Noto Sans Thai
• เปลี่ยนชื่อฟอนต์ในบรรทัด <link……..(เพิ่มเครื่องหมาย + แทนช่องว่าง) Noto+Sans+Thai
• คัดลอกชื่อฟอนต์ Noto Sans Thai ไปวางแทนที่ในบรรทัด font-family กด ถัดไป -> บันทึก
ฟอนต์ภาษาไทยใน Google Sites ที่ตั้งค่าไว้เป็นฟอนต์หัวกลม ซึ่งปกตินิยมใช้ทั้งในชื่อเรื่องและเนื้อเรื่อง โดยที่สามารถปรับขนาดฟอนต์ได้ และสามารถเปลี่ยนเป็นฟอนต์หัวเหลี่ยมได้ มีให้เลือกคือ Nota Sans Thai นิยมใช้เฉพาะหัวเรื่องที่มีขนาดฟอนต์ใหญ่ จะดูโดดเด่น แต่ไม่นิยมใช้ในเนื้อเรื่องที่ขนาดฟอนต์มีขนาดเล็กเพราะอ่านยาก
การประยุกต์ใช้ตารางและทำปุ่มเลือกแบบกราฟิก
ประยุกต์ใช้ตารางที่มีหลายคอลัมน์ เพื่อให้หน้าเว็บมีปุ่มเลือกแบ่งออกเป็นช่องๆ ตามแนวคิดตัวอย่าง
1. สร้างปุ่มกราฟิก 3 ปุ่ม ด้วยโปรแกรม GIMP ขนาด 200×70 pixels จำนวน 3 รูป
2. อัปโหลดไฟล์ปุ่มขึ้น Google Drive เก็บไว้ที่ IT/Google_sites
3. เปิดรูปบน Google Drive ชี้ที่รูป คลิ้กขวา แชร์ คัดลอก URL ของทั้ง 3 รูป คัดลอก ID
4. ระบุลิงค์
ปุ่มที่ 1 ลิงค์ไป http://www.korayanis.com
ปุ่มที่ 2 ลิงค์ไป http://topic.korayanis.com
ปุ่มที่ 3 ลิงค์ไป http://www.facebook.com
5. เขียนโค้ดใน Notepad
6. เปิดแก้ไข Google Site
6.1 กด แทรก < > ฝังโค้ด
6.2 คัดลอกโค้ดทั้งหมดมาวางในกรอบ กด ถัดไป -> บันทึก
7. ขยายเส้นกรอบขวา
8. กดเผยแพร่ 2 ครั้งแล้วลองเปิดเว็บไซต์
อ่านต่อตอนที่ 3 Ep2 เรื่อง การแทรกอิโมจิ การแทรกสไลด์ การแทรกวิดีโอจากยูทูป การแทรกปฏิทิน และการทำเมนูแบบยืดได้หดได้
อ้างอิง
• A Teacher’s Guide to Google Sites : Fonts, https://sites.google.com/view/sitesguide/fonts
• HTML Tutorial, https://www.w3schools.com/html/html_tables.asp