| AGRICULTURAL DEVELOPMENT EXTENSION | AND COMMUNICATIONS Site ศักดิ์ชัย พิรักษ์ เจ้าหน้าที่โสตทัศนูปกรณ์

การสร้างเว็บไซต์ด้วย Google Site Google Sites คือโปรแกรมของ Google ที่ให้บริการสร้างเว็บไซต์ฟรี สามารถ สร้างเว็บไซต์ได้ง่าย ปรับแต่งรูปลักษณ์ได้อย่างอิสระ และสามารถรวบรวมความหลากหลาย ของข้อมูลไว้ในที่เดียว เช่น วิดีโอ, ปฏิทิน, เอกสาร อื่นๆ ทาให้ช่วยอานวยความสะดวกได้เป็น อย่างมาก รู้จัก Google Sites ให้บริการครั้งแรก เดือน พฤษภาคม 2551 ให้บริการฟรี ไม่เสียค่าใช้จ่าย พื้นที่จัดเก็บ 10 GB ขนาดไฟล์ที่ใช้ในการจัดเก็บสูงสุด 10 MB สามารถรองรับบริการอื่นๆ ของ google ได้ เช่น youtube , calendar

การสร้างเว็บไซต์ด้วย Google Site ข้อเสีย ใช้งานร่วมกับ CSS ที่ออกแบบเองไม่ได้ เว็บไซต์อยู่ภายใต้ goole ทำให้ URL ยาว เช่น https://sites.google.com/site/extensionm ju108/ ทำได้เฉพาะเมื่อต่ออินเตอร์เน็ตเท่านั้น

เริ่มต้นการออกแบบโครงสร้างเว็บไซต์ การตั้งชื่อโครงการ การตั้งชื่อโครงการในการทำระบบเว็บไซต์ควรศึกษาปัญหา และนำมาวิเคราะห์ เพื่อให้ได้วัตถุประสงค์ตามที่ได้ตั้งเป้าหมายไว้ โดยการตั้งชื่อ ควรสอดคล้องกับระบบ ปัญหา ยกตัวอย่างเช่น มีแนวคิดอยากทำเรื่องภูมิปัญญาชาวบ้าน เกี่ยวกับประเพณี สงกรานต์ ในการตั้งชื่อระบบ ก็ควรจะสอดคล้องกับเรืองราวที่จะดำเนินการ คือ ระบบแสดงวิถีภูมิปัญญาชาวบ้าน เป็นต้น

เริ่มต้นการออกแบบโครงสร้างเว็บไซต์ กำหนดปัญหา ในการจะทำเว็บไซต์สำเร็จรูปขึ้นมาได้นั้น ควรจะต้องทราบปัญหาที่เกิดขึ้น ว่าปัญหา นั้นเกิดจากอะไร ในกรณีทีไม่มีปัญหา ให้เขียน แรงจูงใจ ในการทำเว็บไซต์ ว่าอยาก ทำระบบนี้ขึ้นมา เพราะเหตุผลอะไร

เริ่มต้นการออกแบบโครงสร้างเว็บไซต์ คือการทำโครงสร้างเว็บไซต์ที่จะพัฒนา เพื่อที่จะได้ทราบถึง แนวคิดในการพัฒนา ออกมาทั้งหมดว่ามีอะไรบ้าง และดำเนินการพัฒนาตามที่ได้ออกแบบไว้

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

เริ่มต้นสร้าง Site 1. สมัครเข้าใช้งาน โดยเข้าไปที่ sites.google.com แล้วลงชื่อเข้าใช้ Gmail โดยกรอก Email และ Password คลิกปุ่ม “ลงชื่อเข้าใช้งาน” 1

2. เลือกปุ่ม “สร้าง” 2

5. เลือกธีมแสดงในเว็บไซต์ ซึ่งสามารถ ปรับเปลี่ยนในภายหลังได้ 3. เลือกเทมเพลตที่จะใช้ หากต้องการ เลือกดูเทมเพลตอื่นๆ ให้คลิกที่ “เลือกดู เพิ่มเติมในแกลเลอรี่” ซึ่งในที่นี้จะเลือก เป็นแบบ แม่แบบว่างเปล่า 4. ตั้งชื่อไซต์ (title) ของคุณ สาหรับ ส่วนของตาแหน่งไซต์ google sites จะทาการตั้งให้โดยอัตโนมัติ 5. เลือกธีมแสดงในเว็บไซต์ ซึ่งสามารถ ปรับเปลี่ยนในภายหลังได้ 6. ตัวเลือกเพิ่มเติม ส่วนนี้จะให้ใส่คา อธิบายเว็บไซต์ และมีให้เลือกว่าเนื้อหา ภายในเว็บไซต์เหมาะสาหรับผู้ใหญ่ เท่านั้น 7. พิมพ์รหัสตามที่ปรากฏเพื่อยืนยันว่า เป็นมนุษย์ ไม่ใช่ Bot ของ Google หรือ Spam จากเว็บ ต่างๆ 8. คลิกปุ่ม “สร้าง” 8 3 4 5 7 6

9. เมื่อสร้างไซต์เสร็จแล้วจะปรากฏหน้าตาเว็บไซต์ดังภาพ จากนั้นเริ่มตกแต่งเว็บไซต์

การใช้งาน Theme 10. ตกแต่งเว็บไซต์ โดยการเปลี่ยน Theme เพื่อให้เว็บไซต์มีรูปแบบแสดงที่สวยงาม โดย คลิกเลือก “เพิ่มเติม” 11. เลือกจัดการไซต์ 10 11

12. สังเกตเมนูด้านซ้าย เลือก “ธีม”

14. คลิกที่ชื่อไซต์ เพื่อกลับไปยังหน้าเว็บไซต์ 13. เลือกธีมได้ตามที่ต้องการ หากต้องการเลือกดูตัวอย่างให้คลิก “ดูตัวอย่าง” หรือ หากไม่ต้องการดูตัวอย่าง คลิก “บันทึก” 14. คลิกที่ชื่อไซต์ เพื่อกลับไปยังหน้าเว็บไซต์ 14 13

ตกแต่งสี และแบบอักษรเพิ่มเติม เลือก ธีม สีและแบบอักษร

ตกแต่งสี และแบบอักษรเพิ่มเติม เลือก ธีม สีและแบบอักษร ส่วนต่างๆ ที่สามารถกำหนดเองได้

การแก้ไขหน้าเว็บ ในส่วนของการจัดการหน้าเพจนั้น มีดังนี้ 14 ในส่วนของการจัดการหน้าเพจนั้น มีดังนี้ 14.1 คลิ๊กปุ่มไอคอน แก้ไขหน้าเว็บ

15. แถบเมนูและฟังก์ชั่นที่ใช้เพิ่มลูกเล่นให้กับเว็บไซต์ รวมไปถึง Gadget ต่างๆและ เครื่องมือในการจัดการหน้าเว็บ 16. เมนู “แทรก” เป็นเมนูที่ควบคุมเกี่ยวกับการใช้มีเดีย เช่น การใส่รูปภาพ ลิงก์ วิดิโอ และ gadget ต่างๆ จึงทำให้เมนูนี้ถูกใช้งานบ่อยที่สุด 17. เมนู “รูปแบบ” เป็นเมนูที่ใช้กำหนดรูปแบบของตัวอักษร ซึ่งเป็นรูปแบบคำสั่ง เดียวกันกับแถบเมนู 15 16 17

18. เมนูตาราง เป็นเมนูที่ใช้สร้าง หรือจัดการข้อมูลในรูปแบบตาราง 19. เมนู “การจัดวาง” เป็นเมนูที่ใช้สำหรับกำหนดรูปแบบการจัดวางคอลัมน์ในหน้าเพจ 18 19

การเพิ่ม Text Generator 20. เข้าไปที่เว็บสร้าง Text generator เลือกตกแต่งตามแบบที่ต้องการแล้ว Get Code (เฉพาะ HTML) เสร็จแล้วนำมาเพิ่มในเพจหน้าแรก เลือกคลิกปุ่ม “แก้ไขหน้า เว็บ” 20 21. หน้าเพจที่ให้แก้ไขรายละเอียด จะมี Toolbar ในการจัดรูปแบบข้อความต่างๆ ให้เลือก tag “<HTML>” 21

การเพิ่มรูปภาพ 22. คลิกปุ่ม “แก้ไขหน้าเว็บ” แล้วเลือก ปุ่ม “แทรก” 23. เลือกเมนู “รูปภาพ” 22

24. จะปรากฏ Dialog box เพิ่มภาพ จากนั้นให้อัพโหลดภาพโดยเลือก “เลือกไฟล์” แล้วคลิกที่ไฟล์ภาพที่ต้องการ 24 25. สามารถจัดรูปแบบของภาพได้ โดยเลือกรูปแบบที่ต้องการจาก popup ที่ขึ้นภายใต้รูปภาพ 25

การเพิ่มลิงก์ 26. การเชื่อมโยงลิงก์ภายในเว็บไซต์ ให้คลิกปุ่ม “แก้ไขหน้าเว็บ” เลือกปุ่ม “แทรก” แล้วเลือกเมนู “ลิงก์” 26

27. จะปรากฏ Dialog box สร้างลิงก์ เลือกหน้าเว็บไซต์ที่ต้องการจะเชื่อมโยง ซึ่งสามารถดูได้จาก แผนผังไซต์ และ การเปลี่ยนแปลงข้อมูลล่าสุดบนเว็บไซต์ เสร็จแล้วเลือกปุ่ม “ตกลง” 27

35. เสร็จแล้วคลิกปุ่ม “ตกลง” 28. การเชื่อมโยงลิงก์จากภายนอก ให้ท าตามข้อ 30 แล้วจะปรากฏ Dialog box สร้างลิงก์ ซึ่งในที่นี้จะเลือกใช้แบบ “ที่อยู่เว็บ” 29. โดยใส่ข้อความที่ช่อง “ข้อความที่จะแสดง” และ ใส่ URL ที่ช่อง ลิ้งก์ไปที่ URL นี้ 28 29 30 30. หากต้องการให้ลิงก์เปิดในหน้าต่างใหม่ ให้ติ๊กที่ checkbox “เปิดลิงก์นี้ในหน้าต่างใหม่” 35. เสร็จแล้วคลิกปุ่ม “ตกลง”

การเพิ่มหน้าเพจเว็บไซต์ เริ่มต้นสร้างหน้าเพจ โดยคลิกที่ปุ่ม ด้านบนขวาของหน้าจอ 31. เมื่อเปิดหน้าสร้างเพจใหม่ขึ้น มาแล้ว กรอกชื่อ ตั้งชื่อหน้าเว็บ ของคุณ 32. เลือกเทมเพลตที่จะใช้ 33. เลือกตำแหน่งเมนูที่ต้องการ 34. คลิกปุ่ม “สร้าง” 27 31 27 27

เทมเพลตที่จะใช้ ซึ่งในส่วนนี้มีให้เลือกอยู่ 4 รูปแบบคือ โดยแตกต่างกัน ดังนี้ - หน้าเว็บ เป็นหน้าหลักของเว็บไซต์ใช้ในการให้ข้อมูลและประกาศต่างๆ ของเว็บไซต์ - ตู้เก็บเอกสาร ใช้สำหรับอัพโหลดไฟล์ต่างๆ เช่น รูปภาพ , เพลง และอื่นๆ ซึ่งสามารถแชร์ให้คนอื่นดาวน์โหลดได้ - ประกาศ ใช้ในการประกาศข้อความ หรือ แสดงบทความต่างๆ - รายการ ใช้แสดงรายการต่างๆ รวมถึงรายละเอียดของแต่ละรายการด้วย

การใช้งาน Gadget การสร้างเอกสาร การสร้างงานนำเสนอ หรือ Presentation การสร้างสเปรดชีด การสร้างวิดีโอ การสร้างแผนที่ การสร้างปฏิทิน การสร้างข่าวประกาศ การสร้างตู้เก็บเอกสาร การสร้างรายการ

การสร้างเอกสาร คลิกปุ่ม “แก้ไขหน้าเว็บ” เลือกปุ่ม “แทรก” แล้วเลือกเมนู “เอกสาร” ในกรณีที่มี เอกสารใน Google Document ให้เลือกเอกสารที่ต้องการนำมาแสดง แล้วกดปุ่ม “เลือก”

การสร้างเอกสาร จากนั้นให้ตั้งค่าการแสดงผลของเอกสาร แล้วคลิกปุ่ม “บันทึก”

การสร้างวีดีโอ คลิกปุ่ม “แก้ไขหน้าเว็บ” เลือกปุ่ม “แทรก” แล้วเลือกเมนู “วิดีโอ”

การสร้างวีดีโอ กรณีต้องการนำวีดีโอจาก youtube มาร่วมใช้ให้คลิ๊กที่ youtube

การสร้างวีดีโอ น า URL วิดีโอจาก youtube มาวางในช่อง “วาง URL วิดีโอ YouTube ของคุณ” แล้วคลิกปุ่ม “บันทึก”

การสร้างวีดีโอ เมื่อบันทึกหน้าเพจแล้ว ก็จะปรากฏวิดีโอ ดังภาพ

การสร้างแผนที่ คลิกปุ่ม “แก้ไขหน้าเว็บ” เลือกปุ่ม “แทรก” แล้วเลือกเมนู “แผนที่”

การสร้างแผนที่ ระบุสถานที่ เพื่อค้นหาปลายทาง และวางเครื่องหมายบอกตำแหน่ง เสร็จแล้วคลิก ปุ่ม “เลือก”

การสร้างแผนที่ ตั้งค่าการแสดงผลของแผนที่

การสร้างแผนที่ เมื่อบันทึกหน้าเพจ ก็จะปรากฏดังภาพ

การสร้างปฏิทิน คลิกปุ่ม “แก้ไขหน้าเว็บ” เลือกปุ่ม “แทรก” แล้วเลือกเมนู “ปฏิทิน”

การสร้างปฏิทิน เลือกปฏิทินที่ต้องการแสดง เสร็จแล้วคลิกปุ่ม “เลือก”

การสร้างปฏิทิน ตั้งค่าการแสดงผลของปฏิทิน

การสร้างปฏิทิน เมื่อบันทึกหน้าเพจ ก็จะปรากฏดังภาพ

การสร้างข่าวประกาศ 4 1.เลือกปุ่ม “สร้างหน้าเว็บใหม่” แล้ว ตั้งชื่อหน้าเว็บของคุณ 2. เลือกเทมเพลตที่จะใช้ ซึ่งในที่นี้ เลือก “ประกาศ” 3. เลือกตำแหน่งที่ต้องการแสดง เมนู 4. คลิกปุ่ม “สร้าง” 1 2 3

การสร้างข่าวประกาศ 5.เมื่อปรากฏหน้าเพจประกาศข่าวแล้ว ต้องการโพสประกาศข่าวให้เลือก “โพสต์ ใหม่” 2 5 3

การสร้างข่าวประกาศ นำข้อมูลข่าว หรือ บทความที่ต้องการประกาศ มาจัดวางในหน้าเพจ และบันทึก หน้าเพจ

การสร้างข่าวประกาศ คลิกที่เมนูข่าวประกาศ ก็จะพบว่า ข่าวหรือบทความที่โพสต์ใหม่ ก็จะแสดงอยู่หน้า เพจนี้เช่นเดียวกัน โดยเรียงลำดับจากโพสต์ล่าสุดอยู่บนสุด

พื้นที่เก็บข้อมูลไซต์ เลือกเมนู “เพิ่มเติม” แล้วเลือก “จัดการไซต์”

พื้นที่เก็บข้อมูลไซต์ จะแสดงส่วนพื้นที่เก็บข้อมูลของไซต์ ว่าใช้พื้นที่ไปเท่าไร

ตัวอย่างผลงานการทำเว็บไซต์นักศึกษาส่งเสริมฯ https://sites.google.com/site/carvingtakad/h ome

ตัวอย่างผลงานการทำเว็บไซต์นักศึกษาส่งเสริมฯ https://sites.google.com/site/kestrxinthriykh awklxng/home

ตัวอย่างผลงานการทำเว็บไซต์นักศึกษาส่งเสริมฯ https://sites.google.com/site/extensionmju1 08/