ปรับแต่งธีมให้มีเอกลักษณ์ (Theme Customization)
  • By Admin
  • 269
  • 25 ก.พ. 2569

ปรับแต่งธีมให้มีเอกลักษณ์ (Theme Customization)

เรียนรู้จิตวิทยาการใช้สี (Color Psychology) และการปรับแต่งชุดสี ฟอนต์ และธีม (Theme) ใน Google Sites ให้สอดคล้องกับหัวข้อโครงงาน

🎨 Module 4: ปรับแต่งธีมให้มีเอกลักษณ์

สร้างสไตล์ที่โดดเด่น สื่อความหมายด้วย "สี" และ "ฟอนต์" ที่ใช่

1. จิตวิทยาการใช้สี (Color Psychology)

รู้หรือไม่ครับว่า "สี" สามารถสื่ออารมณ์และส่งผลต่อความรู้สึกของผู้เข้าชมเว็บไซต์ได้? การเลือกชุดสี (Color Palette) ควรเลือกให้สอดคล้องกับเนื้อหาของโครงงานครับ ลองมาดูตัวอย่างความหมายของสีกัน:

🔵 สีน้ำเงิน / ฟ้า

สื่อถึงความน่าเชื่อถือ เทคโนโลยี ความเป็นมืออาชีพ (เหมาะกับเว็บให้ความรู้หรือโรงเรียน)

🟢 สีเขียว

สื่อถึงธรรมชาติ สิ่งแวดล้อม การเติบโต และความสงบ (เหมาะกับเว็บชีววิทยา หรือสิ่งแวดล้อม)

🟠 สีส้ม / เหลือง

สื่อถึงพลังงาน ความคิดสร้างสรรค์ ความสนุกสนาน (เหมาะกับเว็บศิลปะ หรือกิจกรรมเด็ก)

2. การสร้างธีมแบบกำหนดเอง (Custom Theme)

Google Sites มีธีมสำเร็จรูปให้เลือกใช้ แต่เพื่อความไม่ซ้ำใคร เราสามารถสร้าง "ธีมแบบกำหนดเอง" ได้ครับ โดยไปที่เมนู "ธีม (Themes)" แถบขวามือ แล้วคลิกที่เครื่องหมาย "+" (สร้างธีม/Create theme) ระบบจะให้เราตั้งชื่อธีม เลือกใส่โลโก้ เลือกชุดสีหลัก และเลือกฟอนต์ได้ตามใจชอบเลยครับ

3. กฎการเลือกฟอนต์ (Typography Rules)

การเลือกรูปแบบตัวอักษร หรือ Typography มีความสำคัญไม่แพ้สีครับ กฎเหล็กที่สำคัญที่สุดคือ "ความสามารถในการอ่าน (Readability)"

  • ส่วนหัวเรื่อง (Heading): สามารถใช้ฟอนต์ที่มีลวดลาย หรือฟอนต์หนาๆ เพื่อดึงดูดสายตาได้
  • 📖 เนื้อหาบทความ (Body text): ห้ามใช้ฟอนต์ลายมือหรือฟอนต์ที่อ่านยากเด็ดขาด ควรใช้ฟอนต์มาตรฐานที่สะอาดตา (เช่น Sarabun, Prompt, Kanit) เพื่อไม่ให้ผู้อ่านปวดตาครับ

🚩 ภารกิจ: สไตลิสต์ประจำเว็บ

ให้ Web Designer ของกลุ่มเป็นผู้นำในการสร้าง Custom Theme ให้กับเว็บไซต์ของทีม

🛠 สเต็ปการทำงาน:

  1. ปรึกษากันในทีมว่า "หัวข้อเว็บไซต์ของเรา สื่อถึงอารมณ์แบบไหน?" แล้วเลือกชุดสี (Color Palette) มา 2-3 สี
  2. ไปที่แท็บ "ธีม (Themes)" > "สร้างธีม (Create theme)"
  3. ตั้งชื่อธีม และใส่รหัสสี หรือเลือกสีตามที่กลุ่มตกลงกันไว้
  4. เลือก "ฟอนต์ส่วนหัว" และ "ฟอนต์เนื้อหา" (อย่าลืมกฎความอ่านง่าย!) จากนั้นกดสร้างธีมและปรับใช้กับทุกหน้าครับ

✍️ แบบทดสอบประเมินตนเอง (Module 4)

ทดสอบเซนส์ด้านการออกแบบเว็บไซต์

ข้อที่ 1: หากโครงงานเว็บไซต์ของนักเรียนมีหัวข้อเกี่ยวกับ "นวัตกรรมลดภาวะโลกร้อนและธรรมชาติ" ควรเลือกชุดสี (Color Palette) โทนใดจึงจะเหมาะสมที่สุด?

ข้อที่ 2: ในโปรแกรม Google Sites หากเราต้องการเปลี่ยนชุดสีหลักและรูปแบบตัวอักษรของเว็บไซต์ทั้งเว็บในครั้งเดียว ต้องไปที่เมนูใด?

ข้อที่ 3: การเลือกใช้ฟอนต์ (Font) สำหรับส่วนที่เป็น "เนื้อหาหรือบทความยาวๆ" กฎเหล็กที่สำคัญที่สุดคือข้อใด?


แชร์ :

บทเรียนอื่น ๆ