คู่มือการใช้งาน Google site สำหรับการสร้าง Portfolio

คมู่ อื การสร้างเวบ็ ไซต์ Portfolio ดว้ ย Google Site ชือ่ ผู้จดั ทำ : ศวิ พร ลนิ ทะลึก วันท่จี ัดทำ : 23 มีนำคม 2562 Google Site [Google Application] Google Site หนำ้ | 1 Portfolio กำรจำ้ งพัฒนำคณุ ภำพและจัดทำมำตรฐำนขอ้ มูลด้ำนกำรพำณชิ ย์ ปีงบประมำณ 2561

คู่มอื การสร้างเวบ็ ไซต์ Portfolio ดว้ ย Google Site ชอื่ ผ้จู ัดทำ : ศิวพร ลินทะลกึ วนั ที่จัดทำ : 23 มนี ำคม 2562 ประวตั ิการเปล่ียนแปลงเอกสาร Version Author Update Date Description 1.0 ศิวพร ลินทะลกึ 23/3/2562 จดั ทำเอกสำร โรงเรยี นสาธิตมหาวทิ ยาลยั ขอนแกน่ วทิ ยาเขตหนองคาย หนำ้ | ก

ค่มู ือการสร้างเว็บไซต์ Portfolio ดว้ ย Google Site ชื่อผู้จัดทำ : ศวิ พร ลนิ ทะลกึ วันท่ีจดั ทำ : 23 มนี ำคม 2562 คานา คู่มือเล่มนี้จัดทำข้ึนเพ่ือสอนวิธีกำรสร้ำงเว็บไซต์ด้วย Google Site ซึ่งเน้ือหำประกอบด้วย ควำมสำคัญของ Google Site, วิธีกำรแทรกวัตถุต่ำงๆ ใน Google Site, เครื่องมือในกำรจัดกำรหน้ำเว็บไซต์, วิธีกำรเลือกเปลี่ยน ธีมของเว็บไซต์, วธิ ีกำรแสดงตวั อย่ำงเว็บไวต์ในโหมดต่ำง ๆ, วิธีกำรแชร์ Google Site เพื่อทำงำนร่วมกับผู้อ่ืน และ วิธกี ำรเผยแพรเ่ วบ็ ไซต์สสู่ ำธำรณะ ซ่งึ รำยละเอียดดงั หนำ้ ถัดไป ศิวพร ลินทะลึก โรงเรียนสาธิตมหาวทิ ยาลัยขอนแกน่ วทิ ยาเขตหนองคาย หนำ้ | ข

คู่มือการสรา้ งเวบ็ ไซต์ Portfolio ดว้ ย Google Site ช่ือผู้จดั ทำ : ศิวพร ลนิ ทะลึก วนั ท่จี ัดทำ : 23 มีนำคม 2562 สารบญั หนา้ คานา................................................................................................................................................................ข สารบัญ ............................................................................................................................................................ค สารบัญภาพ ..................................................................................................................................................... ง 1. ความสาคญั ของ GOOGLE SITE...............................................................................................................1 2. การเขา้ ใชง้ าน GOOGLE SITE ..................................................................................................................1 3. สว่ นประกอบของ GOOGLE SITE.............................................................................................................3 4. การแทรกวตั ถตุ า่ ง ๆ ใน GOOGLE SITE...................................................................................................7 5. การจดั การหนา้ เวบ็ ไซต์............................................................................................................................20 6. การเปลยี่ นธมี ของเวบ็ ไซต์........................................................................................................................22 7. การแสดงตัวอย่างเวบ็ ไวตใ์ นโหมดต่าง ๆ .................................................................................................22 8. การแชร์ GOOGLE SITE เพอื่ ทางานร่วมกบั ผู้อื่น.....................................................................................23 9. การเผยแพรเ่ ว็บไซตส์ ู่สาธารณะ...............................................................................................................25 10. ตัวอย่างการสรา้ ง PORTFOLIO ดว้ ย GOOGLE SITE.............................................................................26 โรงเรยี นสาธิตมหาวิทยาลัยขอนแก่น วิทยาเขตหนองคาย หนำ้ | ค

คูม่ ือการสร้างเว็บไซต์ Portfolio ดว้ ย Google Site ชอ่ื ผจู้ ัดทำ : ศวิ พร ลินทะลกึ วันท่ีจดั ทำ : 23 มีนำคม 2562 สารบัญภาพ หนา้ ภาพท่ี 1 สัญลกั ษ์ของ Google Site.......................................................................................................................... 1 ภาพที่ 2 กำรเขำ้ ใช้งำน Google Site โดยใช้ Icon................................................................................................... 2 ภาพท่ี 3 กำรรำยกำรเว็บไซต์ที่เคยสร้ำงโดย Google Site แบบเกำ่ ......................................................................... 2 ภาพท่ี 4 กำรรำยกำรเวบ็ ไซต์ที่เคยสรำ้ งโดย Google Site แบบใหม่........................................................................ 3 ภาพที่ 5 สว่ นประกอบของ Google Site.................................................................................................................. 3 ภาพท่ี 6 ส่วนจัดกำรผูใ้ ช้งำนรว่ มกนั .......................................................................................................................... 4 ภาพที่ 7 สว่ นแสดงเง่ือนไขเพ่มิ เติม ........................................................................................................................... 4 ภาพที่ 8 ส่วนกำหนดใหห้ น้ำที่สร้ำงนน้ั ทำกำรออนไลนเ์ ผยแพร่ .............................................................................. 5 ภาพที่ 9 ส่วนสำหรับใช้สร้ำงรำยละเอียดของหนำ้ Site ............................................................................................ 5 ภาพที่ 10 ส่วนจัดกำรหน้ำ Site ................................................................................................................................ 6 ภาพท่ี 11 ส่วนจดั กำรธมี ........................................................................................................................................... 6 ภาพท่ี 12 ตวั อยำ่ งกำรแทรกรปู ภำพและขอ้ ควำม .................................................................................................... 7 ภาพที่ 13 เครอ่ื งมือกำรจัดกำรหน้ำเวบ็ ไซต์.............................................................................................................. 8 ภาพท่ี 14 กำรจัดกำรข้อควำม................................................................................................................................... 9 ภาพท่ี 15 กำรจัดกำรรปู ภำพ .................................................................................................................................... 9 ภาพท่ี 16 ตัวอยำ่ งกำรแทรกรูปภำพ....................................................................................................................... 10 ภาพที่ 17 กำรฝังโค้ดเขำ้ เวบ็ ไซต์............................................................................................................................. 10 ภาพท่ี 18 กำรจัดกำรฝังโคด้ เขำ้ เว็บไซต์.................................................................................................................. 11 ภาพที่ 19 กำรจดั กำรเน้อื หำทม่ี ำจำกไดร์ฟ............................................................................................................. 11 ภาพที่ 20 กำรจัดกำรวำงเลย์เอำท์ .......................................................................................................................... 12 ภาพที่ 21 ตัวอยำ่ งกำรเลือกกำรจัดวำงเลยเ์ อ้ำท์..................................................................................................... 12 ภาพท่ี 22 กำรจัดกำรปุ่ม......................................................................................................................................... 13 ภาพที่ 23 กำรจัดกำร Youtube............................................................................................................................. 14 ภาพท่ี 24 กำรจัดกำรปฏิทิน.................................................................................................................................... 14 ภาพที่ 25 กำรจดั กำรแผนท่ี .................................................................................................................................... 15 ภาพท่ี 26 กำรจดั กำรเอกสำร.................................................................................................................................. 15 โรงเรียนสาธติ มหาวิทยาลยั ขอนแกน่ วทิ ยาเขตหนองคาย หนำ้ | ง

คู่มอื การสรา้ งเว็บไซต์ Portfolio ดว้ ย Google Site ชอื่ ผู้จัดทำ : ศิวพร ลินทะลกึ วันทจ่ี ัดทำ : 23 มีนำคม 2562 สารบัญภาพ (ตอ่ ) หนา้ ภาพท่ี 27 ตวั อย่ำงกำรแทรกเอกสำร....................................................................................................................... 16 ภาพที่ 28 กำรจัดกำรสไลด์...................................................................................................................................... 16 ภาพที่ 29 ตัวอย่ำงกำรแทรกสไลด์ .......................................................................................................................... 17 ภาพท่ี 30 กำรจัดกำรชตี ......................................................................................................................................... 17 ภาพท่ี 31 ตัวอย่ำงกำรแทรกชีต .............................................................................................................................. 18 ภาพท่ี 32 กำรจดั กำรฟอร์ม..................................................................................................................................... 18 ภาพท่ี 33 ตวั อย่ำงกำรแทรกแบบฟอรม์ .................................................................................................................. 19 ภาพท่ี 34 กำรจัดกำรแผนภมู ิ.................................................................................................................................. 19 ภาพท่ี 35 ตวั อย่ำงกำรแทรกแผนภูม.ิ ...................................................................................................................... 20 ภาพที่ 36 เครอื่ งมอื กำรจดั กำรหน้ำเวบ็ ไซต์............................................................................................................ 20 ภาพที่ 37 เครอื่ งมือกำรจดั กำรหนำ้ เวบ็ ไซต์เฉพำะเพจ ........................................................................................... 21 ภาพที่ 38 กำรกำหนดคุณลักษณะของเพจ.............................................................................................................. 21 ภาพท่ี 39 กำรเปลี่ยนธมี เว็บไซต์ ............................................................................................................................. 22 ภาพท่ี 40 เครอ่ื งมือกำรแสดงตวั อย่ำงเวบ็ ไซต์ ........................................................................................................ 22 ภาพที่ 41 กำรแสดงตวั อย่ำงเว็บไซต์ในโหมดคอมพิวเตอร์...................................................................................... 23 ภาพที่ 42 กำรแสดงตวั อยำ่ งเว็บไซตใ์ นโหมดแทบ็ เล็ต ............................................................................................ 23 ภาพที่ 43 กำรแสดงตัวอยำ่ งเว็บไซตใ์ นโทรศพั ทม์ อื ถอื ........................................................................................... 23 ภาพที่ 44 เครอื่ งมือกำรแชรเ์ พอื่ ทำงำนรว่ มกับผู้อืน่ ............................................................................................... 24 ภาพที่ 45 ตวั อยำ่ งกำรแชร์เพื่อทำงำนร่วมกบั ผู้อน่ื ................................................................................................. 24 ภาพท่ี 46 เครอ่ื งมือกำรเผยแพร่เว็บไซต์สู่สำธำรณะ............................................................................................... 25 ภาพท่ี 47 ตัวอย่ำงเวบ็ ไซต์ที่พฒั นำด้วย Google Site 1........................................................................................ 26 ภาพท่ี 48 QR Code ตัวอยำ่ งเว็บไซต์ทพี่ ฒั นำดว้ ย Google Site 1 ...................................................................... 26 ภาพที่ 49 ตัวอย่ำงเว็บไซต์ท่ีพฒั นำดว้ ย Google Site 2........................................................................................ 28 ภาพที่ 50 QR Code ตัวอยำ่ งเว็บไซตท์ ่ีพัฒนำดว้ ย Google Site 2 ...................................................................... 28 โรงเรยี นสาธติ มหาวทิ ยาลัยขอนแกน่ วทิ ยาเขตหนองคาย หน้ำ | จ

คมู่ ือการสรา้ งเวบ็ ไซต์ Portfolio ดว้ ย Google Site ชื่อผจู้ ดั ทำ : ศวิ พร ลินทะลกึ วนั ท่ีจดั ทำ : 23 มีนำคม 2562 ความสาคญั ของ Google Site โปรแกรมออนไลน์ท่ีทำให้กำรสร้ำงเว็บไซต์ให้ง่ำย ปรับแต่งรูปลักษณ์ได้อย่ำงอิสระ และสำมำรถรวบรวม ควำมหลำกหลำยของข้อมูลไว้ในท่ีเดียว เช่น รูปภำพ วิดีโอ ปฏิทิน เอกสำร แผนที่ และอ่ืน ๆ ทำให้ช่วยอำนวย ควำมสะดวกได้เปน็ อย่ำงมำกในกำรแก้ไขหน้ำเว็บไซต์ ภาพท่ี 1 สญั ลกั ษข์ อง Google Site ขอ้ ดแี ละข้อด้อย ขอ้ ด้อย ข้อดี ใช้งำนรว่ มกับ CSS ทีอ่ อกแบบเองไม่ได้ เว็บไซต์อยู่ภำยใต้ Google ทำให้ Domain Name ยำว ให้บริกำรฟรี ไม่เสียคำ่ ใชจ้ ่ำย ยังมีปัญหำเร่ืองกำรใช้งำนรว่ มกับ Script อ่นื ๆ พ้นื ทจี่ ดั เก็บข้อมูลไมจ่ ำกดั ทำได้เฉพำะเมื่อตอ่ อินเตอรเ์ น็ตเท่ำน้นั มี Gadget มำกมำย ใช้งำนได้ง่ำย การเขา้ ใชง้ าน Google Site ก่อนที่จะเข้ำใช้งำน Google Site ทุกคนจะต้องมีบัญชีหรืออีเมลของ Gmail ก่อน หำกไม่มีบัญชีจะไม่ สำมำรถเข้ำสู่ระบบได้ เม่ือมีบัญชีแล้วสำมำรถเข้ำใช้งำน Google Site ได้โดยเข้ำบรำวเซอร์แล้วเข้ำไปที่ URL : http://sites.google.com หรือเมื่อ Login อยู่ในระบบแล้ว ที่เมนู Google Apps เลือก \"Sites\" ดังภำพท่ี 2 กำร เขำ้ ใชง้ ำน Google Site โดยใช้ Icon โรงเรียนสาธติ มหาวทิ ยาลยั ขอนแกน่ วทิ ยาเขตหนองคาย หนำ้ | 1

คมู่ อื การสรา้ งเว็บไซต์ Portfolio ดว้ ย Google Site ชอ่ื ผ้จู ัดทำ : ศิวพร ลินทะลกึ วนั ทีจ่ ัดทำ : 23 มีนำคม 2562 ภาพที่ 2 กำรเขำ้ ใช้งำน Google Site โดยใช้ Icon เม่ือเข้ำมำแล้วจะเจอหน้ำหน้ำจอที่แสดงรำยกำรเว็บไซต์ที่เคยสร้ำงไว้ก่อนหน้ำน้ีแล้ว แต่เนื่องด้วย Google Site ไดพ้ ัฒนำมำ 2 แบบ โดยมี Google Site แบบเกำ่ และ Google Site แบบใหม่ หรือ New Google Site ซ่ึงใน ท่ีน้ีจะเลือกใช้ New Google Site เพ่ือกำรจัดทำเว็บไซต์ที่สำมำรถทำไดง้ ่ำยสำหรับผ้ทู ่ีไม่มปี ระสบกำรณก์ ำรพฒั นำ เวบ็ ไซตห์ รอื ผทู้ ี่มีทกั ษะกำรใชค้ อมพวิ เตอรน์ ้อย ให้ทำกำรกด “New Google Sites” ภาพท่ี 3 กำรรำยกำรเว็บไซตท์ เ่ี คยสรำ้ งโดย Google Site แบบเก่ำ หนำ้ | 2 โรงเรียนสาธิตมหาวทิ ยาลยั ขอนแก่น วิทยาเขตหนองคาย

คมู่ อื การสร้างเวบ็ ไซต์ Portfolio ดว้ ย Google Site ชอ่ื ผู้จดั ทำ : ศิวพร ลินทะลึก วนั ทีจ่ ดั ทำ : 23 มีนำคม 2562 เมื่อเข้ำมำยัง New Google Site แล้วระบบก็จะแสดงรำยกำรที่เคยถูกสร้ำงด้วย New Google Site แต่ถ้ำ หำกท่ำนใดยังไม่เคยสร้ำงเว็บไซต์เลยหน้ำน้ีก็จะไม่มีรำยกำรเว็บไซต์แสดง หำกต้องกำรสร้ำงเว็บไซต์ใหม่ให้กดปุ่ม “+” ดำ้ นล่ำงขวำมือของเรำดงั ภำพต่อไปนี้ ภาพที่ 4 กำรรำยกำรเวบ็ ไซต์ท่เี คยสรำ้ งโดย Google Site แบบใหม่ ส่วนประกอบของ Google Site เม่อื เขำ้ มำท่ี Google Site จะพบหนำ้ แรกดังภำพตอ่ ไปน้ี ภาพท่ี 5 ส่วนประกอบของ Google Site หน้ำ | 3 โรงเรียนสาธติ มหาวิทยาลยั ขอนแกน่ วิทยาเขตหนองคาย

คู่มือการสรา้ งเวบ็ ไซต์ Portfolio ดว้ ย Google Site ชื่อผู้จัดทำ : ศวิ พร ลนิ ทะลกึ วันทจี่ ดั ทำ : 23 มนี ำคม 2562 สว่ นประกอบของ Google Site ประกอบด้วย 9 ส่วนหลกั ๆ ได้แก่ ส่วนตง้ั ช่อื ของ Sites ของทำ่ น สำหรับ ต้ังชอื่ หนำ้ สำหรับ Preview ตัวอย่ำงหน้ำเว็บ สำหรบั เพิ่มเงอื่ นไข อำทิ แสดงลงิ ค์ เชิญคนมำเขียนหรือดแู ล Site เพิ่ม ภาพท่ี 6 สว่ นจดั การผู้ใช้งานรว่ มกัน เป็นส่วนแสดงเงื่อนไขเพ่ิมเติม อำทิ กำรส่งควำมคิดเห็น, กำรขอควำมช่วยเหลือ, หรือทัวร์แนะนำ Google Sites เป็นตน้ ภาพที่ 7 ส่วนแสดงเงือ่ นไขเพม่ิ เติม หนำ้ | 4 โรงเรยี นสาธิตมหาวทิ ยาลยั ขอนแกน่ วทิ ยาเขตหนองคาย

คมู่ ือการสร้างเวบ็ ไซต์ Portfolio ดว้ ย Google Site ช่ือผูจ้ ดั ทำ : ศวิ พร ลินทะลกึ วันท่จี ัดทำ : 23 มนี ำคม 2562 เปน็ ส่วนกำหนดให้หน้ำท่สี ร้ำงนัน้ ทำกำรออนไลน์เผยแพร่ สำหรับโดเมนของสถำนศึกษำ เมื่อทำกำรคลิกที่เผยแพร่ จะมีหน้ำแสดงข้ึนเพ่ือให้ท่ำนกำหนดเงื่อนไขในกำร แสดงผล ว่ำจะให้แสดงผลเฉพำะในโดเมน หรอื สำธำรณะ ภาพที่ 8 สว่ นกาหนดใหห้ นา้ ทส่ี รา้ งนน้ั ทาการออนไลน์เผยแพร่ แทรก : สำหรับใชส้ ร้ำงรำยละเอียดของหน้ำ Site อำทิ ขอ้ ควำม รปู ภำพ วิดีโอ ลิงค์ เปน็ ตน้ ภาพที่ 9 ส่วนสาหรับใช้สรา้ งรายละเอยี ดของหนา้ Site หน้ำ | 5 โรงเรียนสาธิตมหาวิทยาลัยขอนแก่น วทิ ยาเขตหนองคาย

คู่มือการสรา้ งเวบ็ ไซต์ Portfolio ดว้ ย Google Site ช่ือผจู้ ัดทำ : ศิวพร ลนิ ทะลกึ วันทจ่ี ดั ทำ : 23 มีนำคม 2562 หนำ้ : สว่ นเพิม่ หน้ำ ซ่งึ หำกตอ้ งกำรเพม่ิ หนำ้ ใหค้ ลกิ ที่ Add Page ดำ้ นขวำลำ่ ง ดงั ภำพ ภาพที่ 10 ส่วนจดั การหน้า Site ธีม เป็นชดุ รูปแบบของสแี ละตัวอกั ษร ท่ผี ้ใู ช้สำมำรถปรบั แตง่ ให้กับ site ภาพท่ี 11 สว่ นจดั การธมี หน้ำ | 6 โรงเรียนสาธิตมหาวทิ ยาลยั ขอนแกน่ วิทยาเขตหนองคาย

คมู่ อื การสรา้ งเวบ็ ไซต์ Portfolio ดว้ ย Google Site ชอ่ื ผจู้ ัดทำ : ศวิ พร ลินทะลึก วันที่จัดทำ : 23 มีนำคม 2562 การแทรกวตั ถุต่าง ๆ ใน Google Site กำรแทรกวัตถุต่ำง ๆ สำมำรถทำได้โดยกำรเลือกใช้เคร่ืองมือด้ำนขวำมือ ซ่ึงหลำยเครื่องมือมำก เพียงคลิก เลือกเครอ่ื งมือทีต่ อ้ งกำรใช้ วัตถุนน้ั กจ็ ะ Active บนพืน้ ท่ีสรำ้ งเวบ็ ไซต์เพอื่ ให้สำมำรถจัดกำรไดต้ ำมต้องกำคร ภาพที่ 12 ตวั อยา่ งการแทรกรปู ภาพและขอ้ ความ โรงเรยี นสาธิตมหาวทิ ยาลยั ขอนแก่น วทิ ยาเขตหนองคาย หนำ้ | 7

คมู่ ือการสร้างเวบ็ ไซต์ Portfolio ดว้ ย Google Site ชือ่ ผ้จู ดั ทำ : ศวิ พร ลนิ ทะลกึ วนั ทจี่ ดั ทำ : 23 มนี ำคม 2562 เมื่อรู้จักส่วนประกอบของ Google Site ต่อไปก็มำรู้จักกับเครื่องมือที่ใช้จัดกำรหน้ำเว็บไซต์ ประกอบด้วย เครอ่ื งมือต่อไปนี้ ภาพที่ 13 เครอ่ื งมือกำรจดั กำรหน้ำเวบ็ ไซต์ โรงเรียนสาธติ มหาวิทยาลยั ขอนแก่น วิทยาเขตหนองคาย หนำ้ | 8

ค่มู อื การสร้างเวบ็ ไซต์ Portfolio ดว้ ย Google Site ชอื่ ผู้จัดทำ : ศวิ พร ลินทะลกึ วันทจ่ี ัดทำ : 23 มนี ำคม 2562 หมำยเลข 1 – กำรจัดกำรข้อควำม สำมำรถทำได้โดยกด เมื่อกดปุ่มแล้วจะแสดงกล่องให้พิมพ์ข้อควำม และหลังจำกน้ันก็สำมำรถ จดั รปู แบบข้อควำมเปน็ รูปแบบตำ่ ง ๆ ไดด้ ังภำพตอ่ ไปนี้ ภาพท่ี 14 กำรจัดกำรข้อควำม หมำยเลข 2 – กำรจดั กำรรปู ภำพ สำมำรถทำได้โดยกด เพื่อทำกำรแทรกรูปภำพ ซึ่งจะมีให้แทรก 2 แบบ คือ แทรกรูปภำพจำก คอมพวิ เตอรแ์ ละแทรกรปู ภำพจำกแหล่งท่ีมำออนไลน์จำก Google Drive หรือ Google Photo ฯ ภาพท่ี 15 การจัดการรปู ภาพ หนำ้ | 9 โรงเรยี นสาธิตมหาวิทยาลัยขอนแกน่ วทิ ยาเขตหนองคาย

คู่มอื การสร้างเว็บไซต์ Portfolio ดว้ ย Google Site ชอ่ื ผจู้ ดั ทำ : ศิวพร ลนิ ทะลกึ วนั ทจี่ ัดทำ : 23 มีนำคม 2562 หลังจำกแทรกรูปภำพแล้วกำรจัดวำงไม่เปน็ ตำมกำรก็สำมำรถเลือกใช้เคร่ืองมือกำรจัดกำรรูปภำพได้ดงั ภำพ ต่อไปนี้ ภาพที่ 16 ตัวอยา่ งการแทรกรูปภาพ หมำยเลข 3 – กำรจัดกำรฝงั โค้ดเข้ำเว็บไซต์ สำมำรถทำได้โดยกด เพ่ือทำกำรฝังโค้ด ซ่ึงจะมีกำรฝัง 2 แบบ ได้แก่ ฝังโดยใช้ URL และกำรฝัง Code HTML ภาพท่ี 17 การฝังโค้ดเข้าเว็บไซต์ หน้ำ | 10 โรงเรยี นสาธิตมหาวิทยาลัยขอนแก่น วิทยาเขตหนองคาย

คมู่ ือการสร้างเวบ็ ไซต์ Portfolio ดว้ ย Google Site ชอื่ ผ้จู ดั ทำ : ศวิ พร ลินทะลึก วนั ที่จัดทำ : 23 มนี ำคม 2562 ตัวอยำ่ งกำรฝังวดิ โี อจำก Youtube โดยใช้ URL ฝงั จะไดผ้ ลลพั ธ์ดังภำพตอ่ ไปนี้ ภาพท่ี 18 การจัดการฝงั โคด้ เข้าเวบ็ ไซต์ หมำยเลข 4 – กำรจดั กำรเนือ้ หำทม่ี ำจำกไดร์ฟ สำมำรถทำได้โดยกด เพ่ือแทรกโฟลเดอร์ใน Google Drive ซ่ึงไดร์ฟนั้นก็อำจจะมีรูปภำพ หรือไฟล์ ตำ่ ง ๆ ท่ีต้องกำรจะเผยแพร่ ภาพท่ี 19 การจัดการเนื้อหาท่มี าจากไดรฟ์ หนำ้ | 11 โรงเรยี นสาธติ มหาวทิ ยาลัยขอนแก่น วทิ ยาเขตหนองคาย

คูม่ อื การสรา้ งเว็บไซต์ Portfolio ดว้ ย Google Site ชือ่ ผู้จัดทำ : ศวิ พร ลินทะลกึ วันที่จัดทำ : 23 มนี ำคม 2562 หมำยเลข 5 – กำรจดั กำรวำงเลย์เอำท์ กำรออกแบบ เป็นส่วนท่ีเรำสำมำรถเลือก Layout กำรจัดวำงเนื้อหำได้ เช่น กำรแบ่งเนื้อหำเป็น 2 คอลัมภ์ ให้ด้ำนซำ้ ยเป็นรปู ภำพและด้ำนขวำเปน็ ข้อควำม หรือท้ัง 2 ดำ้ นเปน็ รปู ภำพแล้วมีขอ้ มลู อธบิ ำยใตภ้ ำย เป็นตน้ ภาพที่ 20 กำรจดั กำรวำงเลย์เอำท์ ตัวอย่ำงกำรเลือกกำรจัดวำงเลย์เอำท์แบบแบ่งหน้ำเป็น 2 คอลัมภ์ ด้ำนขวำเป็นพื้นที่แทรกรูปภำพและ ดำ้ นซำ้ ยเปน็ พืน้ ท่ีแทรกขอ้ ควำม แสดงดงั ภำพต่อไปนี้ ภาพท่ี 21 ตัวอย่ำงกำรเลอื กกำรจดั วำงเลย์เอ้ำท์ โรงเรียนสาธติ มหาวิทยาลยั ขอนแกน่ วิทยาเขตหนองคาย หนำ้ | 12

คมู่ อื การสร้างเว็บไซต์ Portfolio ดว้ ย Google Site ชอ่ื ผ้จู ัดทำ : ศิวพร ลินทะลึก วนั ท่จี ดั ทำ : 23 มีนำคม 2562 หมำยเลข 6 – กำรจดั กำรสำรบัญ สำมำรถทำได้โดยกด เพื่อแทรกสำรบัญในหน้ำเพจน้ัน ๆ ซ่ึงส่วนท่ีจะนำมำ Generate เป็น สำรบัญนั้นต้องมำจำกขอ้ ควำมที่ถกู เซ็ทเป็นแบบ “ชอ่ื เรอื่ ง” หมำยเลข 7 – กำรจดั กำรปุ่ม สำมำรถทำได้โดยกด ภาพที่ 22 การจัดการปมุ่ หมำยเลข 8 – กำรจัดกำรตวั แบง่ สำมำรถทำได้โดยกด เพ่อื แทรกสว่ นของพ้ืนท่ีสรำ้ งเว็บไซต์ ซึง่ ปกตเิ รำจะแบ่งเนอ้ื หำออกเป็น ส่วน ๆ เพื่อให้ง่ำยต่อกำรจัดกำรเน้ือหำในเว็บไซต์ โดยปกติเวลำท่ีแทรกวัตถุแต่ละอย่ำงในพื้นท่ีกำรสร้ำงเว็บไซต์ ระบบจะทำกำรสร้ำงตัวแบ่งให้เรำอัตโนมัติอยู่แล้ว แต่หำกเรำไม่ได้ต้องกำรจะแทรกวัตถุใด ๆ เพียงแค่ต้องกำร แทรกตวั แบ่งก็ใหใ้ ช้เคร่ืองมือตวั นี้ หมำยเลข 9 – กำรจดั กำร Youtube สำมำรถทำได้โดยกด แล้วพิมพ์คีเวิร์ดของวิดีโอที่ต้องกำรแทรกในพ้ืนที่กำรสร้ำงเว็บไซต์ ของเรำ ซ่ึงวิดีโอนี้จะดึงข้อมูลมำจำก www.youtube.com เม่ือกดปุ่มเพื่อแทรกและพิมพ์คีย์เวิร์ดระบบจะแสดง รำยกำรวิดีโอทเี่ ก่ยี วขอ้ ง จำกน้ันใหเ้ ลอื กวดิ ีโอทีต่ อ้ งกำรไดเ้ ลย โรงเรียนสาธติ มหาวิทยาลยั ขอนแกน่ วิทยาเขตหนองคาย หน้ำ | 13

คูม่ ือการสรา้ งเว็บไซต์ Portfolio ดว้ ย Google Site ชอ่ื ผ้จู ัดทำ : ศิวพร ลนิ ทะลึก วนั ทจ่ี ัดทำ : 23 มีนำคม 2562 ภาพท่ี 23 การจดั การ Youtube หมำยเลข 10 – กำรจัดกำรปฏทิ นิ สำมำรถทำได้โดยกด เพ่ือแทรกปฏิทินจำก Google Calendar ซ่ึงกำรแสดงปฏิทินน้ันจะ แสดงผลตำมกำรตง้ั คำ่ ทเ่ี รำได้ต้งั ค่ำสิทธ์ิในกำรเขำ้ ถึงในปฏิทนิ ของเรำ ตวั อยำ่ งดังภำพต่อไปน้ี ภาพที่ 24 การจดั การปฏทิ นิ หน้ำ | 14 โรงเรียนสาธิตมหาวทิ ยาลัยขอนแกน่ วิทยาเขตหนองคาย

คมู่ อื การสร้างเวบ็ ไซต์ Portfolio ดว้ ย Google Site ชือ่ ผู้จดั ทำ : ศวิ พร ลนิ ทะลึก วนั ทจ่ี ัดทำ : 23 มีนำคม 2562 หมำยเลข 11 – กำรจัดกำรแผนที่ สำมำรถทำได้โดยกด เพอ่ื แทรกแผนทโี่ ดยกดป่มุ แลว้ คน้ หำตำแหน่งที่ตอ้ งกำรปักหมุด ภาพท่ี 25 การจัดการแผนที่ หมำยเลข 12 – กำรจัดกำรเอกสำร สำมำรถทำได้โดยกด เพ่ือแทรกเอกสำรไฟล์ Word หรือ Google Doc เมื่อกดปุ่มแล้วระบบ จะแสดงหน้ำต่ำงเพื่อใหเ้ ลือกไฟล์เพอ่ื เพม่ิ ไปยงั พ้นื ท่กี ำรสร้ำงเว็บไซต์ ภาพที่ 26 การจัดการเอกสาร หน้ำ | 15 โรงเรยี นสาธติ มหาวิทยาลัยขอนแก่น วิทยาเขตหนองคาย

คมู่ ือการสรา้ งเว็บไซต์ Portfolio ดว้ ย Google Site ชอื่ ผู้จัดทำ : ศวิ พร ลนิ ทะลกึ วันท่ีจัดทำ : 23 มีนำคม 2562 ตวั อยำ่ งกำรแทรกเอกสำรดังภำพต่อไปนี้ ภาพที่ 27 ตวั อยา่ งการแทรกเอกสาร หมำยเลข 13 – กำรจัดกำรสไลด์ สำมำรถทำได้โดยกด เพื่อแทรกเอกสำรไฟล์ PowerPoint หรือ Google Presentation เม่ือ กดปุม่ แลว้ ระบบจะแสดงหน้ำต่ำงเพอ่ื ใหเ้ ลือกไฟลเ์ พอื่ เพม่ิ ไปยังพน้ื ท่ีกำรสรำ้ งเวบ็ ไซต์ ภาพท่ี 28 การจัดการสไลด์ หนำ้ | 16 โรงเรยี นสาธิตมหาวทิ ยาลัยขอนแก่น วิทยาเขตหนองคาย

คมู่ อื การสร้างเวบ็ ไซต์ Portfolio ดว้ ย Google Site ชอ่ื ผู้จดั ทำ : ศิวพร ลินทะลกึ วนั ทจ่ี ัดทำ : 23 มนี ำคม 2562 ตัวอย่ำงกำรแทรกสไลด์ดังภำพตอ่ ไปนี้ ภาพที่ 29 ตัวอย่างการแทรกสไลด์ หมำยเลข 14 – กำรจัดกำรชตี สำมำรถทำได้โดยกด เพื่อแทรกเอกสำรไฟล์ Excel หรือ Google Sheet เมื่อกดปุ่มแล้วระบบจะ แสดงหนำ้ ต่ำงเพอ่ื ใหเ้ ลือกไฟลเ์ พ่อื เพ่ิมไปยงั พื้นท่กี ำรสร้ำงเว็บไซต์ ภาพท่ี 30 การจัดการชตี หนำ้ | 17 โรงเรียนสาธิตมหาวิทยาลัยขอนแก่น วทิ ยาเขตหนองคาย

คมู่ อื การสรา้ งเวบ็ ไซต์ Portfolio ดว้ ย Google Site ช่อื ผจู้ ดั ทำ : ศวิ พร ลินทะลกึ วนั ทีจ่ ดั ทำ : 23 มนี ำคม 2562 ตวั อย่ำงกำรแทรกชีตดังภำพตอ่ ไปน้ี ภาพที่ 31 ตัวอย่างการแทรกชีต หมำยเลข 15 – กำรจัดกำรฟอรม์ สำมำรถทำได้โดยกด เพื่อแทรก Google From ซ่ึงอำจจะเป็นแบบสำรวจหรือฟอร์มต่ำง ๆ เพื่อให้ผู้ที่เข้ำเยี่ยมชมเว็บไซต์กรอกแบบฟอร์ม เม่ือกดปุ่มแล้วระบบจะแสดงหน้ำต่ำงเพื่อให้เลือกไฟล์เพ่ือเพิ่มไปยัง พนื้ ท่ีกำรสร้ำงเวบ็ ไซต์ ภาพที่ 32 การจัดการฟอรม์ หน้ำ | 18 โรงเรียนสาธติ มหาวทิ ยาลยั ขอนแก่น วทิ ยาเขตหนองคาย

คู่มอื การสร้างเวบ็ ไซต์ Portfolio ดว้ ย Google Site ชือ่ ผจู้ ดั ทำ : ศิวพร ลนิ ทะลึก วนั ทจ่ี ดั ทำ : 23 มนี ำคม 2562 ตวั อย่ำงกำรแทรกฟอร์มดังภำพตอ่ ไปน้ี ภาพที่ 33 ตวั อยา่ งการแทรกแบบฟอร์ม หมำยเลข 16 – กำรจดั กำรแผนภมู ิ สำมำรถทำได้โดยกด เพื่อแทรกแผนภูมิหรือกรำฟที่อยู่ในชีต เมื่อกดปุ่มแล้วระบบจะแสดง หน้ำต่ำงเพอ่ื ใหเ้ ลอื กชีตท่ตี อ้ งกำรดงึ แผนภมู มิ ำแสดงบนพน้ื ทก่ี ำรสรำ้ งเว็บไซต์ ดงั ภำพตอ่ ไปนี้ ภาพท่ี 34 การจัดการแผนภมู ิ หน้ำ | 19 โรงเรยี นสาธิตมหาวิทยาลยั ขอนแกน่ วทิ ยาเขตหนองคาย

คมู่ ือการสร้างเว็บไซต์ Portfolio ดว้ ย Google Site ช่ือผู้จดั ทำ : ศิวพร ลินทะลึก วนั ท่จี ดั ทำ : 23 มนี ำคม 2562 เม่ือเลือกไฟล์ท่ีต้องกำรแทรกแผนภูมิแล้ว ในไฟล์น้ันอำจจะมีแผนภูมิหลำยอันให้ทำกำรเลือกแผนภูมิที่ ต้องกำรจะแทรกในพื้นท่ีสรำ้ งเว็บไซต์แลว้ กดปมุ่ ดงั ภำพตอ่ ไปน้ี ภาพที่ 35 ตัวอย่างการแทรกแผนภูมิ การจดั การหนา้ เว็บไซต์ กำรจัดกำรหน้ำเว็บไซต์ หรือกำรเพ่ิม ลบ แก้ไขหน้ำเว็บเพจ ทำได้โดยกำรไปที่แถบ “หน้ำเว็บ” เมื่อเข้ำไป แล้วจะพบกับรำยกำรหน้ำเว็บเพจท่ีเรำได้สร้ำงข้ึน หำกต้องกำรเพ่ิมหน้ำให้กดปุ่มเคร่ืองหมำย “+” หน้ำเพจแต่ละ หน้ำจะสัมพันธ์กบั แถบเมนูบำร์ด้ำนบนของเวบ็ ไซต์ดงั ภำพต่อไปนี้ ภาพที่ 36 เครอ่ื งมอื การจัดการหนา้ เว็บไซต์ หน้ำ | 20 โรงเรยี นสาธติ มหาวทิ ยาลยั ขอนแกน่ วทิ ยาเขตหนองคาย

คูม่ ือการสร้างเว็บไซต์ Portfolio ดว้ ย Google Site ชอื่ ผจู้ ัดทำ : ศวิ พร ลินทะลกึ วนั ทจ่ี ัดทำ : 23 มีนำคม 2562 หำกตอ้ งกำรลบหรือหรอื จดั กำรอ่ืน ๆ ให้คลกิ ทป่ี ุ่มดังภำพตอ่ ไปนี้ ภาพท่ี 37 เครอ่ื งมือการจัดการหนา้ เวบ็ ไซต์เฉพาะเพจ เม่ือคลิกปุ่มเพอ่ื จัดกำรหน้ำเพจ ระบบจะให้เลือกว่ำจะจัดกำรอะไรกับเว็บเพจนั้น ซ่ึงได้แก่ ทำเว็บเพจน้ันให้ เป็นหน้ำแรกหรือไม่ จะทำสำเนำหน้ำนั้นหรือไม่ กำหนดคุณสมบัติ เพิ่มหน้ำย่อยของเว็บเพจ ซ่อนจำกกำรนำทำง หรอื เมนบู ำร์ด้ำนบน หรือจะลบเว็บเพจนัน้ ดังภำพตอ่ ไปนี้ ภาพที่ 38 การกาหนดคณุ ลักษณะของเพจ โรงเรยี นสาธติ มหาวิทยาลัยขอนแกน่ วทิ ยาเขตหนองคาย หนำ้ | 21

คู่มือการสร้างเว็บไซต์ Portfolio ดว้ ย Google Site ช่ือผจู้ ดั ทำ : ศิวพร ลินทะลกึ วันท่จี ัดทำ : 23 มีนำคม 2562 การเปล่ียนธมี ของเว็บไซต์ กำรเลือกเปลี่ยนธมี ของเว็บไซต์ทำได้โดยกำรเลือกแถบ “ธมี ” ดำ้ นขวำมอื ของผใู้ ช้ หลังจำกน้ันสำมำรถจะแค่ เลือกเปล่ียนสีธีมหรือเลือกธีมอื่นโดยกำรใช้เม้ำส์เล่ือนลง หำกต้องกำรธีมไหนให้ทำกำรคลิกเลือกระบบก็จะ เปลี่ยนแปลงตำมธมี ทเี่ รำเลือก ภาพที่ 39 การเปลีย่ นธีมเวบ็ ไซต์ การแสดงตวั อยา่ งเว็บไวตใ์ นโหมดต่าง ๆ ในกำรแสดงผลของเน้ือหำในเว็บไซต์น้ันมีหลำยอปุ กรณ์ที่รองรับกำรแสดงผล ซ่ึงไม่วำ่ จะเป็นอปุ กรณ์หน้ำจอ ขนำดเท่ำใดเนื้อหำก็จะปรับตำมขนำดของอุปกรณ์นั้น ซ่ึงเรำสำมำรถดูตัวอย่ำงกำรแสดงผลได้โดยกำรคลิกที่ปุ่ม “แสดงตวั อยำ่ ง” ดงั ภำพตอ่ ไปน้ี ภาพที่ 40 เครอ่ื งมือการแสดงตัวอย่างเว็บไซต์ โรงเรียนสาธติ มหาวิทยาลัยขอนแกน่ วทิ ยาเขตหนองคาย หนำ้ | 22

คูม่ ือการสร้างเว็บไซต์ Portfolio ดว้ ย Google Site ชือ่ ผู้จดั ทำ : ศวิ พร ลนิ ทะลึก วันที่จัดทำ : 23 มนี ำคม 2562 ตวั อย่ำงเว็บไซต์ในโหมดคอมพิวเตอร์ แสดงดังภำพต่อไปน้ี ภาพที่ 41 การแสดงตัวอยา่ งเว็บไซต์ในโหมดคอมพิวเตอร์ ตัวอย่ำงเวบ็ ไซตใ์ นโหมดแทบ็ เล็ต แสดงดังภำพต่อไปน้ี ภาพที่ 42 การแสดงตวั อยา่ งเว็บไซตใ์ นโหมดแท็บเลต็ ตัวอย่ำงเวบ็ ไซตใ์ นโทรศัพทม์ อื ถอื แสดงดงั ภำพต่อไปนี้ ภาพท่ี 43 การแสดงตัวอย่างเวบ็ ไซต์ในโทรศพั ทม์ ือถือ หนำ้ | 23 การแชร์ Google Site เพอ่ื ทางานรว่ มกับผอู้ นื่ โรงเรยี นสาธิตมหาวิทยาลัยขอนแกน่ วิทยาเขตหนองคาย

คมู่ อื การสร้างเว็บไซต์ Portfolio ดว้ ย Google Site ชือ่ ผจู้ ัดทำ : ศวิ พร ลินทะลึก วนั ที่จดั ทำ : 23 มีนำคม 2562 หำกตอ้ งกำรแชร์ให้ผูอ้ ืน่ เขำ้ มำร่วมกันทำงำนสำมำรถทำได้โดยกดปุ่ม “แชรก์ ับผู้อนื่ ” ดังภำพต่อไปน้ี ภาพที่ 44 เครอื่ งมอื การแชรเ์ พอื่ ทางานรว่ มกบั ผ้อู ื่น กรอกอเี มลของผูท้ เี่ รำจะเชิญใหท้ ำงำนรว่ มกัน (ใสไ่ ดม้ ำกกวำ่ 1 คน) ภาพท่ี 45 ตัวอย่างการแชร์เพอื่ ทางานร่วมกับผูอ้ ืน่ โรงเรียนสาธติ มหาวิทยาลยั ขอนแก่น วทิ ยาเขตหนองคาย หนำ้ | 24

คมู่ ือการสรา้ งเวบ็ ไซต์ Portfolio ดว้ ย Google Site ช่อื ผู้จดั ทำ : ศวิ พร ลนิ ทะลกึ วนั ท่ีจดั ทำ : 23 มีนำคม 2562 การเผยแพรเ่ ว็บไซตส์ ูส่ าธารณะ เม่ือสรำ้ งเว็บไซต์เสรจ็ แลว้ ตอ้ งทำกำรกดปมุ่ “เผยแพร”่ เพ่อื เปน็ กำรเผยแพรส่ ูส่ ำธำรณะให้คนอื่นเขำ้ มำเยย่ี ม ชมเว็บไซต์ของเรำได้ และหำกเผยแพร่ไปแล้วต้องกำรยกเลิกกำรเผยแพร่ก็เลือก “ยกเลิกกำรเผยแพร่” ดังภำพ ต่อไปนี้ ภาพท่ี 46 เครอ่ื งมือการเผยแพร่เวบ็ ไซต์สสู่ าธารณะ โรงเรียนสาธติ มหาวทิ ยาลัยขอนแกน่ วิทยาเขตหนองคาย หน้ำ | 25

ค่มู ือการสร้างเว็บไซต์ Portfolio ดว้ ย Google Site ชื่อผู้จดั ทำ : ศิวพร ลินทะลกึ วันทจี่ ดั ทำ : 23 มนี ำคม 2562 ตวั อย่างการสรา้ ง Portfolio ด้วย Google Site กำรสร้ำง Portfolio ด้วย Google Site โดยใชเ้ คร่ืองมอื และกำรจดั กำรต่ำง ๆ จะไดผ้ ลลัพธ์ดังภำพตอ่ ไปนี้ ภาพท่ี 47 ตัวอยำ่ งเวบ็ ไซตท์ ่ีพัฒนำดว้ ย Google Site 1 จำกตัวอยำ่ งเวบ็ ไซต์ขำ้ งต้นสำมำรถเขำ้ ไปเพ่ิมเตมิ ไดท้ ี่ URL : shorturl.at/gkmAV หรอื สแกน QR Code ดงั ภำพตอ่ ไปน้ี ภาพที่ 48 QR Code ตัวอย่ำงเวบ็ ไซตท์ ีพ่ ฒั นำดว้ ย Google Site 1 หนำ้ | 26 โรงเรียนสาธิตมหาวทิ ยาลยั ขอนแก่น วิทยาเขตหนองคาย

คูม่ ือการสรา้ งเว็บไซต์ Portfolio ดว้ ย Google Site ช่อื ผจู้ ัดทำ : ศิวพร ลินทะลึก วันท่จี ัดทำ : 23 มนี ำคม 2562 โรงเรยี นสาธิตมหาวทิ ยาลยั ขอนแก่น วทิ ยาเขตหนองคาย หนำ้ | 27

คมู่ อื การสรา้ งเว็บไซต์ Portfolio ดว้ ย Google Site ช่ือผูจ้ ดั ทำ : ศวิ พร ลินทะลึก วนั ที่จดั ทำ : 23 มนี ำคม 2562 ภาพท่ี 49 ตวั อยำ่ งเวบ็ ไซตท์ ี่พฒั นำด้วย Google Site 2 จำกตัวอยำ่ งเวบ็ ไซตข์ ้ำงต้นสำมำรถเขำ้ ไปเพิ่มเติมได้ที่ URL : shorturl.at/gkmAV หรอื สแกน QR Code ดงั ภำพต่อไปน้ี ภาพที่ 50 QR Code ตัวอย่ำงเวบ็ ไซต์ท่ีพัฒนำดว้ ย Google Site 2 โรงเรยี นสาธิตมหาวิทยาลยั ขอนแก่น วิทยาเขตหนองคาย หน้ำ | 28

คู่มือการสรา้ งเวบ็ ไซต์ Portfolio ดว้ ย Google Site ชือ่ ผู้จดั ทำ : ศิวพร ลินทะลึก วนั ทจ่ี ัดทำ : 23 มีนำคม 2562 Google Site [Google Application] Google Site Portfolio โรงเรียนสาธิตมหาวทิ ยาลยั ขอนแกน่ วิทยาเขตหนองคาย หน้ำ | 29