ตอนนี้จะนำเสนอเทคนิคตกแต่งเว็บไซต์ที่สร้างด้วย Google Sites ว่าด้วยเรื่อง การแทรกอีโมจิ และการแทรกไอคอน
การแทรกอีโมจิ
การแทรกอีโมจิ จะคล้ายกับการแทรกฟอนต์ เนื่องจากอีโมจิเป็นฟอนต์ 2 แบบ คือ Noto Emoji (ขาวดำ) และ Noto Color Emoji (สี) จะขอแทรกอีโมจิในตัววิ่ง ยินดีต้อนรับ. . .
1. เตรียมโค้ด html จากเว็บไซต์ https://sites.google.com/view/sitesguide/fonts
• คัดลอก Embed code วางใน Notepad
• แก้ไขชื่อฟอนต์ 2 จุด เป็น Noto Color Emoji
• พิมพ์ emoji แทนข้อความในแท็กและย้ายไปอยู่ในแท็ก <p>….</p>
2. คัดลอกข้อความตัววิ่ง ยินดีต้อนรับ. . . จาก Google Sites ที่ทำไว้แล้ว แทนที่ emoji
3. เปิด Google Docs
แทรก -> อีโมจิ
ขอเลือก 3 รูป
4. คัดลอกอีโมจิไปวางแทรกโค้ดใน Notepad จะแสดงรูปขาวดำ
5. ย้ายอีโมจิไปแทรกในจุดที่ต้องการ
6. คัดลอกโค้ดทั้งหมดไปวางแทนที่ข้อความเดิมใน Google Sites กด ถัดไป -> บันทึก -> เผยแพร่ -> เผยแพร่
ข้อแนะนำ ถ้าสามารถเปิดเว็บไซต์ Google Fonts และ ใช้ Google Docs / Google Sites ได้อย่างคล่องแคล่ว ไม่จำเป็นต้องคัดลอกโค้ดไปวางใน Notepad สามารถคัดลอกโค้ดต่างๆ ไปวางในกรอบฝังโค้ดใน Google Sites ได้โดยตรง จะได้นำเสนอในเรื่องต่อไป
การแทรกไอคอน
การแทรกไอคอนซึ่งเป็นสัญลักษณ์วัตถุ (Material symbol) ที่ Google จัดเตรียมไว้ มีหลายรูปแบบให้เลือกใช้ ช่วยให้หัวเรื่องหรือเมนูของหน้าเว็บมีความโดดเด่นมากยิ่งขึ้น สามารถแทรกไอคอน ดังนี้
1. เปิด Google Sites เรียกเมนูวงล้อ เลือก < > ฝังโค้ด
2. ให้ Google ค้นหา material symbol หรือเปิดเว็บไซต์
https://fonts.google.com/icons?selected=Material+Symbols+Outlined:key:FILL@0;wght@400;GRAD@0;opsz@48&icon.style=Outlined
3. ขอยกตัวอย่าง แทรกไอคอนรูปฟันเฟือง (Settings) คลิ้กที่รูปฟันเฟือง เลือก Web กดเลือกโค้ด นำไปวางในกรอบฝังโค้ดในหน้าเว็บ Google Sites
4. ที่หน้า Google Sites เพิ่ม อาชีพด้านเทคโนโลยีสมัยใหม่ ต่อจาก Settings กด แทรก
5. จากโค้ดชุดเดียวกัน สามารถเพิ่มไอคอนอื่นๆ ได้อีกต่อจากข้อที่ 4 ซึ่งต้องเพิ่มแท็กขึ้นบรรทัดใหม่
หรือใช้ แท็ก
เช่น
Settings อาชีพด้านเทคโนโลยีสมัยใหม่
Paid ป้องกันการถูกดูดเงินจากบัญชี…ใครๆ ก็ทำได้
Solar_Power เครื่องปรับอากาศพลังงานแสงอาทิตย์ประหยัดจริงหรือ ?
Web แนวทางการออกแบบและพัฒนาเว็บไซต์สำหรับองค์กร (ตอนที่ 3)
ข้อสังเกต เมื่อนำชื่อไอคอนแทรกในโค้ด html จะต้องขึ้นต้นด้วยตัวพิมพ์ใหญ่ ถ้าชื่อมี 2 คำ จะต้องเชื่อมด้วยอันเดอร์สกอร์ (_) เช่น Solar Power -> Solar_Power เป็นต้น
ขอเสริมการแทรกไอคอนอีกแบบหนึ่งด้วยรหัสอักขระ HTML (HTML Character Codes) แทรกโค้ดสั้นๆ แต่มีไอคอนให้เลือกน้อยกว่า Google Material Symbol ตามที่กล่าวมาแล้วข้างต้น
1. เปิดเว็บไซต์ https://www.toptal.com/designers/htmlarrows/symbols/
2. การแทรกโค้ดแบบสั้น 3 บรรทัด (3 ไอคอน)
โปรดติดตาม ตอนที่ 3 Ep4 ว่าด้วยเรื่อง การแทรกสไลด์ การแทรกวิดีโอจากยูทูป และการแทรกปฏิทินอ้างอิง • Fonts, https://sites.google.com/view/sitesguide/fonts • Introducing Material Symbols, https://fonts.google.com/icons • HTML Currency Symbols, Currency Entities and ASCII Currency Character Code Reference, https://www.toptal.com/designers/htmlarrows/symbols/