e book OBS- Google Site ภัทรพงศ์

1 AUGUST 23 Authored by: Pattarapong Wijitsakultan

2

3 การทำส่อื การสอนออนไลน์อยา่ งงา่ ยด้วย OBS 1. OBS Studio คอื อะไร? OBS มีช่ือเรยี กแบบเต็มๆ ว่า ‘Open Broadcaster Software Studio’ เป็นฟรีโปรแกรม ท่ี ตอ้ งทำการติดต้ังลงในเคร่ืองคอมพิวเตอร์สำหรับใช้งาน โดยจะชว่ ยให้ผูส้ อนบันทึกวิดีโอการสอนหรือ สอนออนไลน์สามารถทำงานได้ง่ายขึ้น โดยทั่วไปโปรแกรม OBS จะใช้ในการอัดวิดีโอ หรือวิดีโอ ถ่ายทอดสด (Live Streaming) เหมาะสำหรับนำเสนอเนื้อหาในรูปแบบวิดีโอและเสียง สามารถอัด วิดีโอกิจกรรมต่าง ๆ บนหน้าจอคอมพิวเตอร์ และรับสัญญาณวิดีโอจากกล้อง Webcam เพื่อมา แสดงผลในหน้าต่างเดียวกนั ไปพร้อม ๆ กนั ได้ สามารถเผยแพร่เนื้อหาวดิ ีโอไปยังโลกออนไลน์ในแบบ Live โดยที่เว็บไซตน์ ้นั จะต้องมี Stream Service ใหบ้ รกิ าร เชน่ Facebook, YouTube และเว็บไซต์ ออนไลน์อื่น ๆ โดยโปรแกรม OBS Studio มีฟังก์ชันการทำงานที่หลากหลายตั้งแต่ระดับง่ายจนถึง ระดับสูง ผู้ที่เริ่มใช้งานควรศึกษาการทำงานของเครื่องมือให้เข้าใจก่อน แต่หากจำกัดขอบเขตความ จำเป็นจริง ๆ แลว้ เพยี งการตงั้ ค่าเล็กน้อย ๆ และปรับแตง่ ใหส้ ามารถใชท้ รัพยากรในเครอ่ื งอย่างพอดี ก็สามารถใช้อัดวิดีโอ และวิดีโอถ่ายทอดสดได้แล้ว โดยสามารถเลือกติดตั้งได้ทั้งบนระบบปฏิบัติการ Windows หรือ Mac OS หรอื Linux 2. ความสามารถของ โปรแกรม ‘OBS Studio’ • รองรบั การเข้า Video Encoding , การบีบอดั วีดโี อ ระดบั มาตรฐาน • Unlimited การถ่ายทอดสด ถ่ายกี่ฉากกไ็ ด้ ตามทค่ี ณุ ตอ้ งการ • ใชถ้ า่ ยทอดสดผา่ นบริการอนั หลากหลาย เชน่ Twitch, YouTube Live, Facebook เปน็ ต้น • สง่ ออกไฟล์ MP4 หรือ ไฟล์ FLV เพ่ือ Upload บน Social ได้เลยทนั ที • รองรับการใช้งานได้หลายระบบปฏิบัติการ ทำให้ครอบคลุมกับนักเล่นหลายระดับ ทั้งระบบ Windows , ระบบ Mac OS รวมทั้งระบบ Linux • โดยสิ่งหนึ่งที่จะทำให้คณุ ประทับใจ ในโปรแกรม ‘OBS Studio’ มากยิ่งขึ้น คือ แจกให้ไปใช้ งานกนั แบบฟรี ๆ เลย

4 3. การตง้ั คา่ และการใชง้ านโปรแกรม OBS เมอื่ เปดิ โปรแกรม OBS จะแสดงหนา้ ต่าง ดงั รูปด้านล่าง 3.1. เมื่อตดิ ตัง้ โปรแกรมเสรจ็ สิน้ จะเขา้ สู่ข้นั ตอนการต้ังค่าการทำงาน โดยสามารถต้ังค่าวดิ ีโอดว้ ยการ เปดิ โปรแกรมไปท่ี File > Settings หรือ คลิกที่มุมด้านล่างขวามือ เพอื่ เข้าสูเ่ มนู Setting ดังภาพ

5 ส่วนนี้จะเป็นการตั้งค่าการกำหนดขนาดของวิดโี อที่ต้องการทำการบนั ทึก โดยการคลิกเลือก ไปท่ี Video จากน้นั จะเหน็ การต้งั คา่ เร่ิมต้นตามท่ีโปรแกรมตั้งมาให้ หรือจะทำการตัง้ คา่ ต่าง ๆ ดังนี้ Base (Canvas) Resolution 1280 X 720 Output (Scaled) Resolution 1280 X 720 Downscale Filter Bicubic (Sharpened scaling, 16 samples) Common FPS value 30 จากนัน้ ให้ทำการต้ังคา่ ในส่วนของการบันทึกการจดั เกบ็ วีดีโอ ว่าตอ้ งการใหจ้ ัดเกบ็ วดี ีโอที่ทำ การบนั ทึกเสรจ็ แล้วไว้ในท่ีไหน เพื่อนำไปใชง้ านต่อไป

6 3.2. การตั้งคา่ เพื่อจัดเก็บวดิ โี อ ส่วนนี้จะเป็นการตั้งค่าวิดีโอเพื่อทำการบันทึก และเลือกที่จัดเก็บวิดีโอ ประกอบด้วยหัวข้อ ตา่ ง ๆ ดังน้ี - สว่ น streaming เลอื ก Video Bitrate= 2,500 - สว่ น Encoder ข้ึนอยกู่ ับประเภทของเครื่องท่ีใช้ ปกติโปรแกรมจะตง้ั มาอยู่แล้วที่ Software (x264) - เลือก Recording Path เพ่ือเลือกทีอ่ ยู่เกบ็ วดิ ีโอ หลงั บันทกึ เสรจ็ แล้ว - เลอื ก Recording Format เปน็ .mp4 หลังจากการตง้ั ค่าเสรจ็ ส้นิ แล้ว คลิกเลอื กไปท่ี OK โดยหน้าตา่ งแรกเมื่อคลิกเขา้ สเู่ มนู Out Put จะพบกบั หน้าต่าง ดงั ภาพดา้ นลา่ ง หรอื หากต้องการทำการตงั้ ค่าทล่ี ะเอยี ดมากข้นึ นั้น ให้คลิกท่ีช่อง Output Mode ใหเ้ ปลี่ยน เมนูจาก Sample เปน็ Advanced จะได้หน้าต่างดงั ภาพด้านล่าง โดยจะมีเมนยู ่อยตา่ ง ๆ ท่ีมีการตัง้ ค่าทีล่ ะเอียดตามต้องการมากขนึ้ ดงั ภาพดา้ นลา่ ง ดังน้ี 1) Output Mode > Advanced > สว่ นของเมนู Streaming

7 2) Output Mode > Advanced > ส่วนของเมนู Recoding 3) Output Mode > Advanced > ส่วนของเมนู Audio (การตั้งคา่ นำออกเสยี ง)

8 4) Output Mode > Advanced > ส่วนของเมนู Replay Buffer (การต้ังค่าวนลปู วีดีโอ) 3.3. การตงั้ คา่ เสียง ส่วนน้ีจะเป็นการตั้งค่าเสียงที่ต้องการนำเข้ามาในการทำการบันทึกวีดีโอ หากมีอุปกรณ์ใน การนำเข้าเสียงหลายตัวให้ทำการตั้งในส่วนนี้ หรือเลือกเป็นค่าเริ่มต้นตามที่โปรแกรมตั้งค่าให้ รายละเอียดดงั ภาพด้านล่างนี้ กรณีที่ต้องการตั้งค่าให้ทำการตั้งค่าท่ี Mic/Auxiliary Audio Device คลิกที่แถบข้อความ เลอื กเป็น Device ของ Desktop Microphone

9 3.4 เครื่องมือ Scenes ใน OBS เป็นเหมือนฉากแต่ละฉากทีเ่ กิดขึน้ ในการบนั ทกึ วีดีโอทีท่ ำการบันทึก ว่าต้องการให้แสดงหรือสลับไปยังส่วนไหนของฉากที่ได้กำหนดไว้ โดยสามารถเปลี่ยนชื่อของ Scene ให้สอื่ ความหมายและจำไดง้ า่ ย ๆ โดยใหค้ ลกิ ขวาทข่ี อ้ ความ Scene เลือกคำสง่ั Rename แล้วเปลี่ยน ชือ่ ตามต้องการ กรณนี ี้ Scene เป็นการใช้งานกลอ้ งของผู้สอน จึงเปลี่ยนชอ่ื เปน็ กลอ้ งผู้สอน ดงั ภาพ

 10 กรณีที่ต้องการเพิ่ม Scenes สำหรับใส่เอกสารการบรรยาย หรือ เนื้อหาส่วนอื่นมากกว่า 1 Scene ใหค้ ลิกทปี่ มุ่ + หรอื คลกิ ขวาทช่ี ่องวา่ ง เลือก Add จะปรากฏหนา้ ต่าง Add Scene แล้วตัง้ ชื่อ เป็นเอกสารประกอบการบรรยาย หรือ ชื่อเนื้อหาตามที่ต้องการ ดังภาพด้านล่าง นอกจากนี้ยัง รายละเอยี ดเมนูของเคร่ืองมือ Scenes ในการใช้งานต่าง ๆ ดังน้ี - กรณีต้องการลบ Scenes ที่ไม่ต้องการ ให้คลิกเลือก Scenes ที่ต้องการจากนั้นคลิก ทปี่ ุ่มเครอื่ งหมายลบ – - กรณีที่ต้องการสลับให้ Scenes ที่ต้องการทำงานอยู่ด้านบน หรือด้านล่าง ให้คลิกที่ช่ือ ของ Scenes ที่ต้องการจากนั้นให้คลิกที่ปุ่มเมนูเครื่องหมาย  เลื่อนขึ้นด้านบน และ คลกิ ท่ี สำหรับเลอื่ งลงด้านล่าง

11 3.5 ตวั เลือกในการสร้างวดิ ีโอ การสรา้ งวิดโี อ ถา้ ตอ้ งการเร่ิมสร้างวิดีโอใหค้ ลิกทส่ี ัญลักษณ์ + ในเมนู Sources เพ่ือเร่ิมต้นการ สรา้ งวิดโี อ การบันทึกวิดีโอ มีหลายตวั เลือกสำหรบั การใช้งานแตล่ ะประเภท สามารถเลอื กใช้ไดด้ งั น้ี - เมนู Display Capture คือการจับภาพหน้าจอ จะจับภาพการแสดงผลของหน้าจอขณะสอน ทง้ั หมด จะใชใ้ นกรณีทผี่ ู้สอนต้องการใช้ไฟลส์ ำหรับสอน ซงึ่ สามารถคลกิ เลือกเปิดไฟล์สำหรับสอนน้ัน ไม่ว่าจะเป็นไฟล์ PDF, Word หรือ Power Point หรือโปรแกรมในหน้าจออื่น ๆ นั่นหมายความว่า การเลือกใช้งาน Display Capture จะทำให้ได้วิดีโอที่บันทึกไฟล์สอนนั้นไปด้วย (ไม่ว่าหน้าจอ คอมพิวเตอร์จะเปิดโปรแกรมอะไร กจ็ ะนำมาแสดงผลทห่ี น้าตา่ งดงั กลา่ ว)

12 จากนั้นจะปรากฏหน้าจอ Create/Select Source ใหท้ ำการตั้งชื่อในช่อง Create new กรณนี ้ี พมิ พ์คำวา่ “ภาพหน้าจอ” จากนน้ั ให้คลิกปุ่ม OK ดงั ภาพด้านลา่ ง โดยเมนู Display จะทำให้ผูใ้ ช้มีหลายหน้าจอ แสดงดังรปู จากนั้นใหค้ ลิกปุ่ม OK

13 - การเพ่ิมรูปภาพบนวิดีโอ การเพมิ่ รปู ภาพบนวีดีโอ โดยการคลิกเลือก Image และคลิก Browse เพ่ือค้นหาภาพท่ีต้องการ ลงวดิ โี อ และสามารถขยบั ตำแหน่งภาพ ดว้ ยการคลิก และลากไปยงั ตำแหน่งท่ตี ้องการได้

14 จะไดภ้ าพดังแสดงดา้ นลา่ ง โดยสามารถปรบั ขยายขนาด หรือเคลอ่ื นย้ายตำแหนง่ ภาพได้ตามต้องการ - การถ่ายหน้าผสู้ อนจากกล้อง บนั ทึกลงในวิดีโอ ไปท่ี Source > Video Capture Device ดังภาพ

15 ตัง้ ชอื่ Source ให้กับกล้องสำหรับถา่ ยภาพผ้สู อน คลิก OK จากนน้ั เลอื กประเภทกล้อง (Device) ท่ี ต้องการใช้ และกำหนด Resolution ตั้งค่าเรยี บรอ้ ยแลว้ คลิก OK ดงั รปู ด้านล่าง หลงั จากคลกิ เลือก OK ในวดิ โี อจะเพิ่มช่องวิดีโอแสดงภาพผูส้ อนเป็นกรอบส่เี หล่ียมเล็ก ๆ ซ่ึงสามารถ ปรับขยายได้ตามที่ต้องการดังภาพด้านล่าง - การเพิ่มข้อความในวิดีโอ ใช้คำสั่ง Text ในเมนู Source จากนั้นทำการตั้งชื่อให้กับ Source ของ Text พมิ พ์ขอ้ ความท่ีต้องการให้แสดง โดยสามารถเลือกประเภท Font และขนาดได้ ดังภาพ

16

17 4. ขน้ั ตอนการเริ่มอัดหรือหยดุ การบนั ทึกวิดโี อ เมื่อเลือกรูปแบบการสอนได้แล้ว ให้เปิดโปรแกรมต่าง ๆ แสดงไว้บนหน้าต่าง เริ่มอัดวิดีโอ โดย คลิกเลือก Start Recording ขณะสอนให้คลิกเลือกเปิดโปรแกรมต่าง ๆ ตามต้องการ และพูดสอนไป เรื่อย ๆ โดยทุกโปรแกรมที่แสดงในหน้าจอขณะนั้นกำลังถูกอัดวิดโี อพร้อมภาพผสู้ อนและเสียงพูด ถ้าต้องการหยุดการบันทึกวิดีโอ คลิกเลือกไปที่ Stop Recording หลังจากคลิกเลือกไปที่ Stop Recording เสร็จแลว้ วดิ ีโอจะบนั ทกึ อตั โนมัตไิ ปยงั ทเี่ ราเลอื ก out put ไวใ้ นตอนแรก

18 เมือ่ อดั วิดีโอเสร็จ จะทำใหไ้ ดว้ ดิ โี อทม่ี ีทั้งส่ือท่สี อน ภาพผสู้ อน พรอ้ มเสยี งและขอ้ ความที่ต้องการ แสดง ดงั ตัวอย่างดา้ นลา่ ง 5. การใชง้ าน OBS ร่วมกับกลมุ่ ่ไลน์ 5.1. ติดตั้งส่วนเสริม OBS VirtualCam ให้กับโปรแกรม OBS โดยสามารถ Download โปรแกรมได้ที่ https://obsproject.com/forum/resources/obs-virtualcam.949/ จะได้ตัว โปรแกรมดงั ภาพด้านลา่ ง จากนัน้ ให้ทำการติดตงั้ ตวั โปรแกรมลงในเครอื่ งคอมพวิ เตอร์ 5.2. เมื่อติดตั้งโปรแกรมเสร็จแล้วให้ทำการเปิดโปรแกรม OBS ขึ้นมาเพื่อทำการเชื่อมต่อกับ โปรแกรม Line โดยทำการตั้งค่าต่าง ๆ เพื่อพร้อมทำการบันทึกการจัดการเรียนการสอน จากนั้นให้ คลิกทเ่ี มนู Strat virtual Camera ดังภาพด้านล่าง

19 5.3. จากนั้นเปดิ โปรแกรม Line PC จากในเครอ่ื งคอมพิวเตอร์ขึ้นมาก จากน้ันทำการต้ังคา่ โปรแกรมโดยคลิกทจ่ี ดุ สามจุด จากนั้นให้คลิกท่เี มนู “ต้ังค่า” ดงั ภาพด้านล่าง 5.4. จากนั้นจะปรากรฎหนา้ ตา่ งการต้ังค่า ให้ไปที่เมนู “โทร” เพอื่ ทำการตั้งคา่ กลอ้ งโดยเลอื ก เป็น OBS Virtual Camera ดงั ภาพดา้ นลา่ ง

20 5.5. จากนนั้ เข้าใช้งานกลุ่ม Line โดยเลือกกลุ่ม Line ทตี่ อ้ งการจดั การเรียนการสอน จากน้นั ทำการคลิกท่กี ารโทรการเลือกเมนู “วีดีโอคอล” โดยภาพท่ปี รากฎในกล่มุ ไลน์จะเปน็ ภาพเหมือนกับท่ี ปรากฎในหน้าตา่ งโปรแกรม OBS ดังภาพด้านล่าง 5.6. เมื่อทำการบันทึกการจัดการเรียนการสอนเสร็จแล้วใหคลิกที่ปุ่ม Stop Virtual camera เพอื่ ทำการหยดุ การบนั ทึกหลงั เสร็จส้ินการจดั การเรยี นการสอน ดงั ภาพด้านล่าง

21 7. การ streaming หรือการถ่ายทอดสดผา่ น Facebook - เปิด Facebook คลิกเลือกไปที่วิดีโอถ่ายทอดสด หลังจากนั้นให้คัดลอก URL เซิร์ฟเวอร์ และคีย์ สตรมี ใน Facebook ใปใสใ่ นโปรแกรม OBS ที่ Setting> stream>sever และ stream key ดงั รูป

22 - เมื่อผู้สอนเตรียมทุกอย่างเรียบให้คลิกเลือกไปที่ Start Streaming และ Start Recording ซึ่งเป็น การเริม่ บนั ทกึ การสอน และการถา่ ยทอดสด

23 และใน Facebook ให้คลิกเลอื กไปที่ถา่ ยทอดสด จะทำให้ได้วิดีโอที่สามารถถ่ายทอดสดผ่าน Facebook ได้ดังรูป ถ้าต้องการหยุดถ่ายทอดสด ก็ สามารถคลิกเลือกไปที่ จบวิดีโอถ่ายทอดสดได้ และคลิกเลือกไปที่ Stop streaming และ Stop recording ใน OBS ด้วย เอกสารอา้ งองิ : ศูนยน์ วตั กรรมและเทคโนโลยีการศกึ ษา มหาวทิ ยาลัยเทคโนโลยสี ุรนารี การสร้างเว็บไซต์เพอื่ การเรียนการสอนอยา่ งงา่ ยด้วย Google Site

24 1. Google Site คืออะไร Google Site เป็นโปรแกรมของ Google ที่ให้บริการสร้างเว็บไซต์ฟรี สามารถสร้างเว็บไซต์ ปรับแต่งรูปลักษณ์ได้อย่างอิสระ และสามารถรวบรวมความหลากหลายของข้อมูลไว้ในที่เดียว เช่น วีดีโอ ปฏิทิน แผนที่ เอกสาร .pdf และรูปภาพ เป็นต้น สามารถเชื่อมต่อกับการบริการต่าง ๆ ของ Google ได้ง่าย มีความปลอดภัยและให้บริการได้ตลอด 24 ชั่วโมง ทำให้ช่วยอำนวยความสะดวกได้ เปน็ อย่างมาก

25 2. การสรา้ งเว็บไซตด์ ว้ ย Google Site เข้าใช้งานได้ที่ URL: https://sites.google.com ทำการ Login เข้าใช้งานด้วย Username และ Password ดว้ ย Account เดียวกับการใช้งาน Gmail เสร็จแลว้ คลกิ ปุ่ม “ลงชอื่ เข้าใช้งาน” เข้า สู่หนา้ ตา่ งการทำงานของ Google Site การสรา้ งเวบ็ ไซตม์ ีด้วยกนั 2 รปู แบบ ไดแ้ ก่ แบบ Back (ว่าง) และรปู แบบท่ี Google Site ทำการออกแบบไว้ คลกิ เลอื กใช้รปู แบบท่ีต้องการ ดังภาพดา้ นลา่ ง 3. การตง้ั ชอื่ เวบ็ ไซต์ สร้างหนาเว็บไซต์ขึ้นมาโดยการคลิกเลือกรูปแบบตามที่ต้องการ จากนั้นทำการตั้งชื่อเว็บไซต์ ตามทีต่ ้องการ โดยคลกิ ที่ชื่อแล้วทำการเปล่ียนช่อื ดังภาพดา้ นลา่ ง 4. การเพมิ่ หน้าเวบ็ ไซต์ การเพิ่มหน้าเว็บไซต์สามารถทำได้โดยคลิกที่เมนู Pages (หน้าเว็บ) เลื่อนลงมาด้านล่างคลิก เลือกที่เคร่อื งหมายบวกด้านล่าง จะปรากฏหน้าเว็บไซตข์ ้ึนมาใหม่ ใหท้ ำการตงั้ ชื่อหน้าเว็บไซต์ โดยใน การเพิม่ หน้าเว็บไซต์จะเป็นการเพิ่มเมนูใหก้ ับเวบ็ ไซต์ดว้ ย จากนัน้ ทำการเลือกตำแหน่งเมนูท่ีตอ้ งการ

26 5. การใชง้ านธีม การเลือกใช้งานธีมใน Google Sites ให้คลิกไปที่ Themes (ธีม) จะปรากฏรูปแบบธีมต่าง ๆ ตามที่ Google ได้ทำการสร้างไว้ให้ โดยสามารถเลือกใช้ตามทีม่ ีให้เท่านั้น ไม่สามารถเพิ่มได้ ดังภาพ ดา้ นล่าง 6. ขัน้ ตอนการสรา้ งเน้ือหาในเวบ็ ไซต การออกแบบเอกสาร เมนูแทรก เปน็ เมนูท่คี วบคุมเกย่ี วกับการใชม้ ีเดีย เช่น การใส่รปู ภาพ ลงิ ก์ วีดโี อ แผนที่ ปฏิทิน และ gadget ต่าง ๆ โดยในการท่ีจะใสรูปหรือข้อความเนื้อหา สามารถทำได้ตาม

27 รูปแบบที่ Google Sites กำาหนดมาใหเลือก และวางตามจุดท่ีตองการโดยการคลิกเมาส์ลากไปวาง ในตำแหนง่ ทต่ี อ้ งการ ดังภาพ (insert/แทรก) • การใสรูปภาพ สามารถเลือกอัพโหลดที่รูปภาพที่ตองการจะใสรูป หรือภาพที่ Google Sites มใี หและปรบั ขนาด ของภาพไดต้ ามตองการ (image/รปู ภาพ) • การแทรก Google Form ลงบนเว็บไซต์ของ Google Site ให้คลิกที่เมนู Insert (แทรก) > Form จากนั้นจะปรากฏ Form ที่สร้างไว้ใน Google Drive เลือกแบบฟอรมแบบทดสอบที่ต้องการ

28 จากนั้นคลิกที่ Insert จะปากฎ Form ที่เลือกแทรกอยู่บนหน้าเว็บไซต์ที่กำลังทำงานอยู่ จากนั้นให้ ทำการปรับแตง่ ตำแหนง่ การจัดวางไดต้ ามตอ้ งการ ดังภาพดา้ นลา่ ง 7. การเพิ่มรูปแบบตัวอักษร (Font) ให้กับเว็บไซต์จาก Google Site นั้น ในขั้นตอนแรกให้เข้าไป ที่ URL: https://fonts.google.com/?subset=thai จะปรากฏหน้าต่างดังภาพดา้ นล่าง

29 จากนั้นนำชื่อของรูปแบบตัวอักษรที่ต้องการใช้งานจากเว็บไซต์กลับมาค้นหาช่ือของรูปแบบ ตวั อกั ษรที่หน้าตา่ งบน Google Site ทที่ ำงานอยู่ โดยคลิกทีต่ ัวอักษรท่ีต้องการเปลี่ยนรูปแบบจากนั้น คลกิ ท่ี More Font จะปรากฏหน้าต่าง Font ขึ้นมา ให้ทำการคลิกคน้ หา Font ท่ีช่องค้นหา ดงั ภาพ

30 8. การสร้างตวั อักษร/ขอ้ ความวง่ิ บน Google Site New Google Sites เป็นโปรแกรมที่ใช้งานง่าย มีการ Save งานแบบ real-time และ อนุญาตให้ผู้ใช้แต่งเติม หน้าเว็บในลักษณะภาษาคำสังต่าง ๆ ผ่านกลไกการฝัง ที่ Embed การสร้าง ตัววิ่งหรือ <marquee> เป็นคำสั่งพิเศษ หรือ Tag ของ HTMLที่กำหนดให้ตัวอักษรที่อยู่ภายใน บรรทัดคำสั่งเคลื่อนที่ โดยการจะวางคำสั่งเหล่านี้ การใช้งานต้องใช้การแทรก และฝังตามลำดับ เมื่อ เลือกส่วนแทรก รายการฝังมาแล้ว จะเกิดกรอบสำหรับวางคำสั่ง โดยเลือกรายการฝังโค๊ด วางโค๊ด คำส่ังลงในชอ่ ง ดังภาพ ดา้ นล่าง โดยคำสั่งของรูปแบบการเคลื่อนที่จะมี 4 ทิศทาง (ข้อความตัวอย่าง : mediathailand วิ่ง จากขวาไปซา้ ย ) ดังนี้

31 1) <marquee direction=\"left\"> mediathailand วงิ่ จากขวาไปซา้ ย </marquee> mediathailand วิง่ จากขวาไปซ้าย 2) <marquee direction=\"right\"> mediathailand ว่ิงจากซ้ายไปขวา </marquee> mediathailand วงิ่ จากซ้ายไปขวา 3) <marquee direction=\"down\"> mediathailand วง่ิ จากบนลงลา่ ง </marquee> mediathailand วิง่ จากบนลงล่าง 4) <marquee direction=\"up\"> mediathailand วิ่งจากด้านล่างข้นึ ขา้ งบน </marquee> mediathailand วิ่งจากดา้ นล่างขึ้นข้างบน การประยุกต์ เรื่องของตัวว่ิงเราสามารถประยกุ ต์ Code คำสั่งเพิ่มเตมิ ได้ อาทิ การใส่สี หรือ กำหนดขนาดตวั อกั ษรได้ โดยใช้ตัวอย่าง Code ด้านล่าง <marquee direction=\"left\" style=\"color: #3498DB; font-size: 20px;\">สบื โยด-สาวยา่ น สาน ตอ่ ...กศน.ใต้</marquee> สืบโยด-สาวย่าน สานต่อ...กศน.ใต้ หมายเหตุ: (1) สำหรบั คำสัง่ marquee สามารถประยุกตใ์ ชไ้ ด้ในเว็บเกือบทุกประเภท (2) หากต้องการเปลี่ยนสตี วั อักษร ท่านสามารถนำค่าสี จาก Web Color Code ไปแทน คา่ สใี นคำสงั่ ดา้ นบน (แสดงด้วยตวั หนาสแี ดง) คำสั่งความเรว็ ในการวง่ิ ของข้อความ โดยในการกำหนดให้ข้อความวง่ิ เรว็ หรือชา้ สามารถใช้คำสง่ั ไดด้ ังต่อไปน้ี <marquee scrollamount=\"เลข\">และตัวปดิ คอื </marquee>ใสต่ ัวเลขกำกบั ความเรว็ ถ้า ตัวเลขมากข้อความกย็ ง่ิ วิ่งเร็วมาก ตัวเลขนอ้ ยข้อความกย็ ่ิงวิ่งช้า เชน่ <marquee scrollamount= \"5\">เขียนข้อความทีน่ <ี่ /marquee> คำส่ังพเิ ศษ

32 <marquee width=\"เลข\">และตวั ปิดคือ</marquee>ใส่ตัวเลขเปน็ พิกเซลหรือเปอร์เช็นก็ได้ เพือ่ กำหนดวา่ จะให้วิ่งเตม็ หน้ากระดาษ หรอื ครึ่งหนา้ กระดาษ หรือเทา่ ไหร่ก็ใส่ตัวเลขลงไป เชน่ 50% กว็ ิง่ แค่ครึ่งหนา้ กระดาษ ตวั อยา่ งวิ่งแค่ครึ่งหน้ากระดาษ <marquee width=\"50%\">width=\"50% คอื ว่ิงครึ่งหน้ากระดาษ</marquee> ขอ้ ความวงิ่ ไป ว่ิงมา <marquee behavior=\"alternate\">และแทก็ ปดิ คือ</marquee>ข้อความทีเ่ รมิ่ ว่ิงจากซา้ ยมา ขวา พอถงึ ขวาก็วิ่งไปทางซ้าย ว่งิ ไป ว่งิ มาสลับกัน ไม่มที ่ีสนิ้ สุด ดังตัวอย่างในรปู แบบตา่ ง ๆ ดังน้ี <marquee behavior=\"alternate\">ขอ้ ความวงิ่ ไป<marquee> <marquee behavior=\"slide\">คอื ขอ้ ความท่ีว่ิงมาจากมุมขวาแลว้ มาหยดุ ทีม่ ุมซ้าย และจะไม่ ไปไหนอกี </marquee> ข้อความวิ่งและมีสีพื้นหลัง <marquee bgcolor=\"ชอื่ ส\"ี >ชือ่ สจี ะเปน็ รหัสสหี รือภาษาก็ได(้ อังกฤษเทา่ น้นั )และแทก็ ปดิ คือ</ marquee>คำส่ังน้ีจะทำใหข้ ้อความว่งิ และมสี พี ื้นหลงั <marque bgcolor=\"blue\">ขอ้ ความและสีพน้ื หลัง </marquee> ตัวอยา่ งรวม <html> <body> <marquee bgcolor=\"#A9E0B8\" direction=\"lefe\" scrollamount=\"5\" width=\"50%\">สี พื้นหลังเปน็ สไี ข่อ่อน ขอ้ ความว่ิงไปทางซ้าย ความเร็วในการวง่ิ 5 ใช้ขอบเขตครง่ึ หน้ากระดาษ </marquee> </body> </htm>

33 9. การสร้างแผนท่ีบนเว็บไซต์ ไปที่เมนู Insert คลิก Map จะปรากฏหน้าต่าง Select a map ขึ้นมาให้ทำการพิมพ์ชื่อของสถานที่ที่ต้องการนำมาใส่บนเว็บไซต์ ที่ช่องค้นหา ตัวอย่างเช่น “มหาวทิ ยาลัยราชภฏั เพชรบุรี” เมอ่ื ไดส้ ถานท่ตี อ้ งการแลว้ ใหค้ ลกิ ทเี่ มนู Select ดังภาพดา้ นล่าง

34 จะไดผ้ ลลพั ธด์ ังภาพด้านลา่ ง

35 10. การแทรกกิจกรรม Facebook แฟนเพจบน Google Site คลิกที่ Embeb จะปรากฎ หน้าต่าง Embeb from the web ขึ้นมาให้ทำการคลิกเลือก Embeb code เพื่อวาง code จากนั้น คลิก Next จะปรากฏหน้าต่างตัวอย่างแสดงผลจากนั้นคลิก Insert จะได้ผลลัพธ์ดังภาพ โดยจาก ตวั อยา่ ง code ดา้ นล่างสามารถเปล่ียนชือ่ Facebook เป็นชอ่ื เฟสอืน่ ได้ตามตอ้ งการ <iframe src=\"https://www.facebook.com/plugins/page.php?href=https://www.facebook.com/ CocomilkPhetchaburi&tabs=timeline&width=340&height=500&small_header=false&a dapt_container_width=true&hide_cover=false&show_facepile=true&appId\" width=\"340\" height=\"500\" style=\"border:none;overflow:hidden\" scrolling=\"no\" frameborder=\"0\" allowfullscreen=\"true\" allow=\"autoplay; clipboard-write; encrypted- media; picture-in-picture; web-share\"></iframe> 11. การเผยแพร่เว็บไซต์ คลิกเลือกเมนูปุม “Publish” จากนั้นจะปรากฎหน้าต่าง Publish Your site ดังภาพด้านล่าง ให้ใส่ชื่อเว็บไซต์ที่ตองการเผยแพรให้คนอื่นเข้ามาดูเว็บไซต์ที่สร้างลงในช่อง Web Address โดยแนะนำใหใช้เป็นภาษาอังกฤษ เชน Kurpon ก็จะไดตอท้ายจาก URL Google Site สำหรบั นำไปเผยแพร่เปน https://sites.google.com/chula.ac.th/kurpon/ จากนั้นให้กดปุ่ม เมนู Publish ดงั ภาพดา้ นลา่ ง

36 ตวั อยา่ งผลงานเว็บไซต์: หอ้ งเรยี นเทคโนโลยีสารสนเทศ ของครอู าพร สนุ ทรวัฒน์ สามารถเข้าดูได้ จาก URL: https://sites.google.com/view/pattarapong-wijitsakultan/home