การสร้างเว็บไซต์ในปัจจุบันนี้มีรูปแบบการสร้างที่หลากหลาย เริ่มตั้งแต่การเขียนโค้ดด้วยภาษาคอมพิวเตอร์ อาทิ html php python เป็นต้น หรือสร้างด้วยระบบการสร้างและบริหารเว็บไซต์แบบสำเร็จรูป (CMS) ซึ่งมีให้เลือกหลายค่าย ตามแต่คนใช้ต้องการ เช่น WordPress Joomla Mambo Drupal หรือจะใช้โปรแกรมสำเร็จรูปในการสร้าง เช่น Adobe Dreamweaver Adobe Muse ซึ่งการสร้างเว็บไซต์ที่กล่าวมาข้างต้น ล้วนแต่ต้องเช่าพื้นที่จัดเก็บ (Hosting) และเช่าโดเมนเนม (Domain Name) ซึ่งมีค่าใช้จ่ายทั้งสิ้น แต่ในบทความนี้ เราจะใช้ Google Site ในการสร้างเว็บไซต์ เพราะใช้งานง่าย และมีพื้นที่จัดเก็บ (Hosting) และโดเมนเนม (Domain Name) ให้ใช้กันเลยฟรีๆ
** สิ่งที่ต้องเตรียมก่อนเริ่มอบรม
1. บัญชีของ Google (Gmail)
2. บัญชี Canva
คุณสมบัติหลักของ Google Sites
1. สามารถเพิ่ม Logo ของเว็บไซต์โดยใช้วิธีการ Upload หรือเลือกจาก Google Drive พร้อมกันนั้นยังเลือกได้ว่าจะให้แสดงในรูปแบบใด
2. สามารถสร้าง Banner โดยใช้รูป Upload หรือเลือกจาก Google Drive ได้
3. สามารถเพิ่มเมนูได้มากกว่า 1 หน้า ทำให้สามารถแบ่งการแสดงผลได้ง่ายยิ่งขึ้น
4. สามารถแบ่ง Layout เพื่อให้แสดงผลได้อย่างสวยงาม
5. สามารถแทรก Embed code ซึ่งจะใช้สำหรับวีดีโอจาก Youtube หรือแทรกแผนที่จากGoogle Maps หรือ Application อื่นๆ ที่รองรับ Embed code
6. สามารถแทรกเว็บไซต์อื่นๆ มายัง Sites ของเราผ่าน URL link ได้
7. สามารถแทรกไฟล์ได้ทุกส่วนที่เป็นไฟล์ของ Google Dirve เช่น Google Doc , Google Sheet , Google Form ฯลฯ
จุดด้อยของ Google Site
1. ใช้งานร่วมกับ CSS ที่ออกแบบเองไม่ได้
2. เว็บไซต์อยู่ภายใต้ Google ทำให้ domain name ยาว
3. ยังมีปัญหาเรื่องการใช้งานร่วมกับ script อื่นๆ
4. ใช้งานได้เฉพาะเมื่อต่ออินเตอร์เน็ตเท่านั้น
เริ่มต้นสร้างเว็บไซต์ด้วย Google Site
1. เข้าไปที่ Google Drive (เข้าสู่ระบบด้วยบัญชี Google ให้เรียบร้อยก่อน)
2. คลิกขวา (เลือกพื้นที่ว่างๆ) เลือก “More” แล้วเลือก “Google Sites”
3. เพียงเท่านี้ก็ได้เว็บไซต์ที่พร้อมให้ปรับแต่งแล้ว
การเปลี่ยนชื่อเว็บไซต์
ที่ด้านบนของเว็บไซต์ เมื่อสร้างเว็บขึ้นมาแล้ว โปรแกรมจะสร้างมาในชื่อ “Untitled site” เราสามารถเปลี่ยนเป็นชื่ออื่นๆ ตามต้องการได้
การจัดการหัวเว็บ (Banner)
หัวของเว็บไซต์ (Banner) เราสามารถจัดการได้ 2 ส่วน ส่วนแรกคือการแทรกรูปภาพ และส่วนที่สองคือจัดการรูปแบบของหัวเว็บ ดังนี้
ถ้าคลิกที่ “Header type” จะปรากฏตัวเลือกขึ้นมาตามภาพ
1 แสดงภาพแบนเนอร์ขนาดใหญ่มาก
2 แสดงภาพแบนเนอร์ขนาดใหญ่
3 แสดงภาพแบนเนอร์ขนาดเล็ก
4 แสดงแต่ข้อความ
การสร้างหัวเว็บด้วย Canva
1. เข้าใช้งาน Canva โดยเข้าไปที่เว็บไซต์ https://www.canva.com/
2. ลงชื่อเข้าใช้ให้เรียบร้อย (ถ้ายังไม่บัญชี สามารถสมัครได้ดังนี้: https://kru-it.com/canva/signup-canva/)
3. เมื่อเข้าสู่ระบบเรียบร้อยแล้ว คลิกที่ “สร้างงานออกแบบ” แล้วเลือก “กำหนดขนาดเอง” โดยกำหนดขนาดเป็น 1600 x 400 pixel
4. ระบบจะให้เลือกแม่แบบ ทำการเลือกแม่แบบตามต้องการ
5. ปรับตกแต่งตามต้องการ (สามารถเรียนรู้การใช้งาน Canva เบื้องต้นได้ที่ https://kru-it.com/computer/canva/)
6. ดาวน์โหลดแบนเนอร์ที่สร้างไว้ลงบนคอมพิวเตอร์
การแทรกหัวเว็บ (Banner)
1. เลือกที่ “เปลี่ยนรูปภาพ” แล้วเลือก “อัปโหลด” แล้วเลือกภาพที่เราทำไว้
2. เมื่อแทรกภาพแล้ว ภาพที่เราแทรกเข้ามาจะซ้อนทับกับข้อความ เราสามารถลบข้อความออกได้โดยการคลิกที่ข้อความ แล้วคลิกที่ถังขยะเพื่อลบออก
การเพิ่มหน้า
1. เลือกแท็บ “หน้าเว็บ”
2. คลิกที่รูปเครื่องหมายบวก (+) แล้วเลือก “หน้าเว็บใหม่”
3. ตั้งชื่อหน้าใหม่ตามต้อง เสร็จแล้วคลิกที่ปุ่ม “เสร็จสิ้น”
4. เสร็จแล้วจะมีปุ่มลิงก์ขึ้นที่ด้านขวาบน
การเปลี่ยนชื่อปุ่มลิงก์
1. เลือกแท็บ “หน้าเว็บ” คลิกที่เครื่องหมายจุด 3 จุด ท้ายปุ่มลิงก์ที่ต้องการเปลี่ยนชื่อ
2. เลือก “คุณสมบัติ”
3. พิมพ์ชื่อตามต้องการ เสร็จแล้วคลิกที่ปุ่ม “เสร็จสิ้น”
กล่องข้อความ
กล่องข้อความคือส่วนของเครื่องมือที่มีไว้สำหรับแทรกข้อความ ซึ่งเมื่อพิมพ์ข้อคววามลงไปแล้วสามารถตกแต่งข้อความได้ตามต้องการ (ซึ่งจะเหมือนกับเครื่องมือที่ใช้ในโปรแกรม Microsoft Word)
รูปภาพ
เป็นเครื่องมือที่ใช้สำหรับการแทรกรูปภาพ โดยสามารถเลือก “อัปโหลด” ในกรณีที่ต้องการนำรูปภาพที่อยู่ในเครื่องคอมพิวเตอร์มาใส่ในเว็บ หรือเลือก “เลือก” ในกรณีที่เรามีภาพอยู่ใน Google Drive อยู่แล้ว แล้วต้องการนำภาพมาใช้งาน
ฝัง
เป็นกลุ่มเครื่องมือที่เอาไว้สำหรับแชร์สื่อที่อยู่ในรูปแบบอนนไลน์ โดยการฝังมีอยู่ด้วยกัน 2 แบบ คือ ฝังแบบ ใช้ URL ใช้ในกรณีที่เรามีลิงก์สื่อต่างๆ เราสามารถนำลิงก์ดังกล่าวมาใส่ในส่วนนี้ได้
และอีกแบบคือการฝังแบบโค้ด อาทิ การฝังหน้าเพจเฟสบุ๊ก หรือ embed จากแหล่งอื่นๆ
ไดรฟ์
คือการนำไฟล์งาน หรือสื่อต่างๆ ที่อยู่ในไดรฟ์ มาแทรกลงในเว็บไซต์ของเรา
การแทรกเลย์เอาต์
1. เลือกแท็บ “Insert” เลือกรูปแบบที่ต้องการในส่วนของ “เลย์เอาต์” (จากตัวอย่าง เราเลือกรูปแบบอักแรกสุด)
2. เมื่อเลือกรูปแบบเสร็จแล้ว ดำเนินการแทรกเนื้อหาได้เลย โดยแทรกภาพโดยคลิกที่เครื่องหมายบวก (+)
– ถ้ารูปของเราอยู่ในเครื่องคอมพิวเตอร์ เลือกที่ “Upload”
– ถ้ารูปของเราอยู่ในที่อื่นๆ เช่น Facebook Instagram หรืออื่นๆ ที่ออนไลน์อยู่แล้ว เลือกที่ “Select image”
– ถ้ารูปของเราอยู่ใน Google Drive เลือกที่ “From Drive”
3. จะได้รูปแบบของเนื้อหาที่สวยงาม โดยเราสามารถทำตามขั้นตอนนี้ไปเรื่อยๆ เพื่อเพิ่มเนื้อหาให้กับเว็บไซต์ของเรา โดยเปลี่ยนรูปแบบการจัดวางเนื้อหาเป็นแบบอื่น
การเปลี่ยนสีพื้นหลังให้กับเนื้อหา
ที่ด้านซ้ายของเนื้อหา เมื่อนำเมาส์ไปชี้จะมีไอคอนขึ้นมา 3 ชิ้นคือ
1. รูปจานสี ใช้สำหรับเปลี่ยนสีพื้นหลังของเนื้อหา
2. รูปกระดาษซ้อนกัน ใช้สำหรับคัดลอกรูปแบบของเนื้อหาไปใช้ซ้ำ เช่น ถ้าต้องการเขียนเนื้อหาที่มีรูปแบบเดียวกัน สีเดียวกัน
3. ถังขยะ ใช้สำหรับลบเนื้อหาออกจากเว็บไซต์
การแทรกลิงก์
การแทรกสามารถทำได้ทั้งตัวอักษร และรูปภาพ มีขั้นตอนดังนี้
1. เลือกตัวอักษร หรือข้อความ หรือรูปภาพ
2. คลิกที่ปุ่ม “Insert link” รูปโซ่
3. นำ URL ที่เราต้องลิงก์ไปมาใส่
4. คลิกที่ปุ่ม “Apply”
กลุ่มแบบยุบได้
เป็นการแทรกหัวข้อ แล้วมีหัวข้อย่อให้ได้เลือกใช้งาน โดยเมื่อพิมพ์หัวข้อแล้ว สามารถพิมพ์หัวข้อย่อยได้ตามต้องการ เมื่อพิมพ์หัวข้อย่อยแล้ว สามารถแทรกลิงก์ได้ตามหัวข้อ “การแทรกลิงก์”
สารบัญ
คือเครื่องมือที่ใช้สร้างสารบัญให้กับเว็บไซต์ของเรา โดยตัวสารบัญจะนำหัวข้อต่างๆ ของเรามาจัดแสดง
ภาพหมุน
คือนำภาพที่เราต้องการอย่างน้อย 2 ภาพมาแทรกในเว็บไซต์ของเรา แล้วระบบจะทำให้มีการเลื่อนของภาพได้ โดยมีขั้นตอนดังนี้
1. คลิกเลือกที่เครื่อง “ภาพหมุน” ระบบจะมีหน้าต่าง “แทรกรูปภาพขึ้นมา” ให้เลือก “อัปโหลดรูปภาพ” ในกรณีที่รูปภาพที่ต้องการอยู่ในเครื่อง หรือเลือก “เลือกรูปภาพ” ในกรณีที่รูปภาพที่ต้องการอยู่ในสื่อออนไลน์
2. เมื่อเสร็จแล้ว จะแสดงผลภาพที่เราแทรกไว้พร้อมกับจุดด้านล่างภาพ ที่แสดงสถานะจำนวนของภาพ และมีลูกศรซ้าย/ขวา เพื่อเลื่อนภาพไปในทิศทางตามลูกศร
ปุ่ม
การแทรกปุ่มลงในเว็บไซต์ของเรา
1. เริ่มต้นด้วยการคลิกที่ “ปุ่ม” พิมพ์ชื่อของปุ่มในช่อง “ชื่อ” และกรอก URL ในช่อง “ลิงก์”
เครื่องมืออื่นๆ
ตัวแบ่ง : คือเครื่องมือที่ใช้แบ่งหน้าเว็บโดยใช้เส้นเล็กๆ
Youtube : แทรกคลิปวิดีโอจาก Youtube ลงในเว็บไซต์
ปฏิทิน : แทรกหน้า Google ปฏิทิน ลงในเว็บไซต์
แผนที่ : แทรกแผนที่จาก Google แผนที่ ลงในเว็บไซต์
เอกสาร : แทรกเอกสารที่สร้างด้วย Google เอกสาร ลงในเว็บไซต์
ชีต : แทรกตารางงานคำนวณที่สร้างด้วย Google ชีต ลงในเว็บไซต์
ฟอร์ม : แทรกแบบฟอร์มรับข้อมูลที่สร้างด้วย Google ฟอร์ม ลงในเว็บไซต์
แผนภูมิ : แทรกแผนภูมิลงในเว็บไซต์
การเผยแพร่เว็บไซต์
1. คลิกที่ปุ่ม “Publish”
2. ตั้งชื่อ URL ของเว็บไซต์
3. คลิกที่ปุ่ม “Publish” อีกครั้ง
อ้างอิง
hostadvice, “ส่วนแบ่งการตลาดของ CMS ทั่วโลกปี 2020”, https://th.hostadvice.com/marketshare/cms/ สืบค้นวันที่ 2 ก.พ. 2020
netway, “เว็บไซต์ง่าย สไตล์คุณ ด้วย Google Sites”, https://netway.co.th/ สืบค้นวันที่ 2ก.พ. 2020
