ใบความรู้ที่ 4 เริ่มต้นการสร้างไซต์

บทเรยี นท่ี 4 เริ่มตน้ การสรา้ งไซต์

บทเรยี นที่ 4 เรอื่ ง เริม่ ตน้ การสร้างไซต์ กลมุ่ สาระการเรียนร้วู ิทยาศาสตร์และเทคโนโลยี รหสั วชิ า ว30293 รายวิชา การสรา้ งเว็บไซต์ ชนั้ มัธยมศกึ ษาปที ่ี 5 ภาคเรียนที่ 1 เวลาเรยี น 2 ช่ัวโมง นางสุภาวดี มงคลการ ครผู ้สู อน เริ่มต้นการสรา้ งไซต์ 1. สมคั รเขา้ ใชง้ าน โดยเข้าไปที่ URL: https://sites.google.com แล้วลงชอ่ื เขา้ ใช้ Gmail โดยกรอก Email และ Password คลิกปุม่ หรือเลือกเทมเพลตโดยคลิกแกลเลอรเี ทมเพลต 2 1 ภาพที่ 3 หนา้ แรกของบรกิ าร Google Site 2. หากตอ้ งการเลือกดูเทมเพลตอืน่ ๆ ใหค้ ลกิ ที่ “แกลเลอรีเทมเพลต” ทต่ี ้องการไดเ้ ลย แต่ในการ ออกแบบครั้งนจ้ี ะไมใ่ ชเ้ ทมเพลต ให้คลิกป่มุ บทเรียนที่ 4 เรมิ่ ตน้ การสรา้ งไซต์

หากต้องการใช้ธีมที่กาหนดเองให้เลือก Blank จะเป็นหน้ากระดาษว่างเปล่า เปรียบเสมือนหน้าแรก ของเว็บไซต์ ประกอบด้วย ชือ่ เวบ็ ไซต์ ช่ือเรื่อง และขอ้ ความ พร้อมเคร่ืองมอื ปรับแต่งหนา้ เวบ็ ทั้ง 3 ส่วนหลัก  Insert (แทรก) เพิ่มองคป์ ระกอบของกลอ่ งขอ้ ความ รปู ภาพ เลยเ์ อาต์จัดรปู แบบการนาเสนอ สารบัญ ปฏิทิน รวมถงึ การใส่วดี โี อจาก Youtube  Pages (หนา้ ) สร้างหนา้ ใหม่หรอื หนา้ ยอ่ ยสามารถเชื่อมโยงลงิ ก์กับหน้าแรกได้  Themes (ธีม) สรา้ งธมี แบบกาหนดเอง เลอื กเปล่ียนรปู ลักษณ์ ฟอนต์ และสีได้ รวมถงึ ตวั เลอื ก ธีมสาเรจ็ รปู ทที่ าง Google จัดไวใ้ ห้แล้ว บทเรยี นท่ี 4 เร่มิ ต้นการสร้างไซต์

การเริ่มตน้ สรา้ งไซตจ์ ากมอื ถือ ขั้นตอนและวธิ ีการทาในคอมพิวเตอรน์ ั้นมีวธิ ีการทาเช่นเดียวกนั แต่ในการเริ่มตน้ ครั้งแรกของมือถือ จาเป็นตอ้ งปรับเปล่ยี นในมอื ถือ เพอ่ื สามารถเข้าไปแก้ไขเว็บไซต์ของเราได้ โดยที่เราสามารถปฏิบัติได้ดังน้ี 1. ใหน้ ักเรยี นเขา้ app Google Chrome ในมือถือของเรา 1 2. ลงชือ่ เข้าใชง้ าน E-Mail 2 บทเรยี นท่ี 4 เรมิ่ ต้นการสรา้ งไซต์

3. พมิ พ์ URL : https://sites.google.com 34 เมื่อพิมพ์ URL ลงไปแล้ว ระบบของ Google Site จะไมใ่ หเ้ ราสร้างหรือแก้ไขเวบ็ ไซต์ เราสามารถ แกไ้ ขได้ดว้ ยการปรับระบบของโทรศพั ท์ของเรา 4. คลิกท่ี เพ่อื ปรับระบบเวบ็ ไซตเ์ ปน็ เวอรช์ ่ันเดสก์ทอป 5 5. เลือก เท่านีเ้ รากส็ ามารถสร้างเว็บไซต์ของเราในมือถือได้ ไม่ยากเลยนะคะ บทเรียนท่ี 4 เริม่ ตน้ การสร้างไซต์

การต้งั ชอื่ เว็บไซต์ เมอื่ สรา้ งเวบ็ ไซตใ์ หม่ ระบบจะเพ่ิมไปยังไดรฟ์ เช่นเดียวกบั ไฟลอ์ ื่นๆ ในไดรฟ์ โดย Sites จะบนั ทึกการ เปล่ียนแปลงท้ังหมดของนักเรียนโดยอัตโนมัติ แต่จะไม่เผยแพร่สู่สาธารณะจนกว่านักเรียนจะเผยแพร่ด้วย ตวั เอง 1. Title Site ชื่อเอกสารของเว็บไซต์ - ป้อนชื่อที่ไม่ซ้ากันเพื่อติดตามเว็บไซต์ ชื่อเอกสารของ เว็บไซต์จะปรากฏให้นักเรยี นเห็นเท่านั้น 2. Site Name ช่ือเวบ็ ไซต์ - ชื่อเว็บไซต์จะปรากฏในส่วนหัวและในแถบช่ือหน้าต่างของเว็บหรือ อุปกรณ์เคล่ือนที่หลังจากท่ีคุณเผยแพร่เว็บไซต์ คุณต้องมีหน้าเว็บ 2 หน้าข้ึนไปในเว็บไซต์เพื่อให้ชื่อเว็บไซต์ ปรากฏ 3. Page Title ช่ือหน้าเว็บ - แต่ละหน้าในเว็บไซต์จะมีช่ือซึ่งจะปรากฏที่ด้านบนของหน้าเว็บ ชื่อหนา้ เว็บจะปรากฏในเมนกู ารนาทางดว้ ย 1 2 3 บทเรียนท่ี 4 เริ่มต้นการสร้างไซต์

การเลอื กเลยเ์ อาต์ Google Site จะมี Layout ให้เราเลือกใช้สาหรับจัดวางเน้ือให้มีความน่าสนใจ ทั้งนี้ก็ข้ึนอยู่กับเรา ด้วยวา่ จะทาได้มคี วามนา่ สนใจมากน้อยเพียงใด คลิกเลย์เอาต์ที่ด้านขวา ท่ีแท็บ แทรก ให้สังเกต ส่ง แล้วเลือกเลย์เอาต์แบบอื่นสาหรับส่วนต่างๆ ของหนา้ เว็บ ในตัวอยา่ งนจ้ี ะเลอื กเลยเ์ อาตแ์ บบท่ี 2 บทเรียนที่ 4 เร่ิมต้นการสรา้ งไซต์

เลือกภาพพนื้ หลงั ประเภทส่วนหัว และธมี เลอื กรปู แบบให้กับเว็บไซตข์ องคุณ โดยแตล่ ะธมี จะมีพืน้ หลังท่กี าหนดลว่ งหน้า รูปแบบสี และการ เลอื กฟอนต์ คุณจะปรับเปลยี่ นแบบอักษร สี และพื้นหลงั ในภายหลงั ได้ และยงั เปลยี่ นธีมไดท้ ุกเม่ือหลังจาก สร้างเวบ็ ไซต์แลว้ หากต้องการเปล่ยี นแปลง ใหค้ ลิกเลิกทา หรือทาซา้ 1. เปลี่ยนภาพพ้ืนหลัง 1. ไปท่ี Sites และเปิดไซต์ ชีไ้ ปท่ีภาพพน้ื หลงั แล้วคลิก 2. เลือกตวั เลอื กตอ่ ไปนี้  หากตอ้ งการอัปโหลดรปู ภาพจากคอมพวิ เตอร์ ให้คลิก อัปโหลด  หากต้องการเลือกรปู ภาพจากแกลเลอรหี รือตาแหน่งอืน่ ให้คลกิ เลือกรูปภาพ 3. (ไมบ่ ังคบั ) หากตอ้ งการกลับไปทภ่ี าพพนื้ หลงั เดมิ ให้คลิกรเี ซต็ เลกิ ทา ทาซา 1 e 2. เปล่ียนประเภทส่วนหัว ชไ้ี ปทภ่ี าพพ้นื หลงั และคลิก Header type (ประเภทสว่ นหัว) สามารถเลอื กตัวเลือกต่อไปนไ้ี ด้ 1. Cover (หน้าปก) 2. Large Banner (แบนเนอร์ขนาดใหญ)่ 3. Banner (แบนเนอร์) 4. Title only (ช่อื เท่านั้น) บทเรยี นที่ 4 เริ่มตน้ การสร้างไซต์

ว 3. การเปล่ยี นธีมและรูปแบบอักษร 1. คลกิ Themes (ธมี ) ทม่ี ุมขวาบน 2. เลอื กธมี และเลือกสี 3. คลิกเลอื กโทนสีของธีม 4. คลิกรูปแบบตัวอกั ษรและเลอื กรปู แบบ 1 2 3 4 บทเรยี นท่ี 4 เร่มิ ต้นการสรา้ งไซต์

เพิ่ม จดั ลาดบั ใหม่ และวางซ้อนหน้าเวบ็ นักเรียนสามารถเพ่ิมหน้าเว็บสาหรับเน้ือหาเพ่ิมเติม แล้วเก็บข้อมูลที่เก่ียวข้องไว้ด้วยกันโดยการวาง ซอ้ นหนา้ เวบ็ จากน้ันหนา้ เว็บทซ่ี ้อนกันจะปรากฏเปน็ หัวขอ้ ยอ่ ยของหน้าเว็บอืน่ ได้ 1. วธิ ีเพิ่มหน้าเวบ็ มดี งั นี้ 1. ทมี่ ุมขวาบน ให้คลิกที่ “หน้าเวบ็ ” ชไี้ ปท่ีสรา้ ง 1 2. เลอื กตัวเลอื กต่อไปนี้ 2.1 หากตอ้ งการเพิม่ หน้าเว็บใหม่ ใหค้ ลิกเพ่ิมหน้าเว็บใหม่ 2.2 ต้งั ชือ่ หน้าเวบ็ แลว้ คลิกเสรจ็ สิ้น 2.3 หากต้องการเพ่มิ URL ให้คลิกเพ่ิมลิงก์ 2.2 2.3 2.1 บทเรียนท่ี 4 เร่ิมตน้ การสร้างไซต์

3. วิธซี ้อนหรือเรียงลาดบั หน้าเวบ็ ไซตม์ ดี งั น้ี 1. คลกิ หน้าเว็บ 2. คลิกเมาสค์ ้างไว้แลว้ ลากหน้าเว็บขึน้ หรอื ลงในรายการเพื่อเรยี งลาดบั ใหม่ 3. ลากหนา้ เวบ็ ทดี่ ้านล่างของอีกหนา้ จะปรากฎเสน้ ตาแหนง่ เพ่อื ซอ้ นกนั 4. หากต้องการยกเลิกการซ้อนหนา้ เวบ็ ให้ลากไปยงั ด้านล่างสดุ ของรายการ หมายเหตุ : คุณจะซ้อนหน้าเวบ็ ไดเ้ พียง 5 ระดับเทา่ นัน 1 2 3 ภาพที่ 13 การซ้อนหรือเรยี งลาดบั หนา้ เวบ็ ไซต์ ภาพที่ 14 การซอ้ นหรอื เรียงลาดับหนา้ เวบ็ ไซต์ที่ได้ 4. วธิ ีเลอื กตัวเลือกหน้าเวบ็ มีดังน้ี ถดั จากหน้าดังกลา่ ว จากนนั้ ในสว่ นหน้าเวบ็ ให้เลอื กหนา้ เวบ็ แลว้ คลิกเพิม่ เติม เพิ่มเตมิ เลอื กตวั เลอื กดังน้ี บทเรียนท่ี 4 เรม่ิ ต้นการสรา้ งไซต์

 Make homepage (ตั้งค่าเป็นหน้าแรก)  Duplicate page (ทาหนา้ เว็บซ้า)  Properties (เปลี่ยนช่ือหนา้ เวบ็ )  Add subpage (สร้างหนา้ ย่อย)  Hide from navigation (ซ่อนจากหนา้ การนาทาง)  Delete (ลบหน้าเพจ) หมายเหตุ: 1. ไม่สามารถซ่อนหนา้ เวบ็ ท่ีตังเป็นหนา้ แรก 2. ไม่สามารถลบหน้าเว็บท่ีตังเปน็ หนา้ แรกออกไม่ได้ ตง้ั คา่ การนาทางของเวบ็ ไซต์ หากมีหน้าเว็บมากกว่าหน่ึงหน้า ผู้เข้าชมเว็บไซต์จะใช้เมนูการน าทางเพ่ือข้ามไปยัง หน้าต่างๆ ได้ซึ่ง เมนูการนาทางจะอยู่ด้านบนสดุ ของเว็บไซตโ์ ดยคา่ เร่ิมต้น ใหค้ ลกิ หน้า แรกเพอ่ื ดเู มนทู ม่ี มุ ขวาบน นักเรียนจะย้ายเมนูการนาทางไปทางซ้ายก็ได้หากต้องการ แต่ต้องมีหน้าเว็บอย่างน้อยหนึ่งหน้าบน เวบ็ ไซตเ์ พ่อื เปลย่ี นตาแหน่งทป่ี รากฏ บทเรยี นท่ี 4 เรมิ่ ต้นการสร้างไซต์

วิธกี ารเลือกโหมดการนาทาง จากน้นั การนาทางด้านบน หรอื การ นาทาง 1. ชไี้ ปทช่ี อื่ เวบ็ ไซต์และคลิกการต้ังค่าการนาทาง ดา้ นขา้ ง 1 ปรบั เปลย่ี นการนาทางได้ตามตอ้ งการ บทเรียนท่ี 4 เริ่มตน้ การสร้างไซต์