รวมเล่ม หนังสือคอมประยุกต์64

4. ตั้งชื่อเลเยอร์ กดปุ่ม OKและจะได้เลเยอร์ท่ีเหมือนกันมาอีกหน่ึงเลเยอร์ เพ่ือป้องกันภาพ ตน้ ฉบบั เสียหาย จากน้ันทาการปดิ ตาทีเ่ ลเยอร์ Background 5. เลือกเครื่องมือท่ีจะนามาใช้ตัดภาพ ซึ่งวิธีการตัดภาพวัตถุออกจากพ้ืนหลังน้ัน มีเครื่องมือ หลายชนิดให้เลือกใช้ โดยเคร่ืองมือทน่ี ามาใช้ คือ Magic Wand Tool เคร่ืองมอื น้เี อาไวส้ าหรับ เลือกพื้นที่ของภาพ คลิกเมาส์ซา้ ยหนงึ่ คร้งั ท่รี ูปเครอ่ื งมือ Magic Wand Tool การใชโ้ ปรแกรม Adobe Photoshop CC 45

6. ปรับค่า Tolerance ตามต้องการ ซึ่งการปรับค่าน้ีต้องพิจารณาจากรูปภาพของเราด้วย หากภาพท่ีนามาใช้มีสีของพ้ืนหลังและสีของวัตถุที่ตัดกันไม่มาก ก็ควรกาหนดค่า Tolerance ให้สูงๆ ในที่นผ้ี ู้เขียนเลือกปรบั ที่ 100 จากนนั้ คลกิ หนึ่งครั้งลงในพ้นื ทีพ่ ้ืนหลงั ของภาพที่เราต้องการจะตัดออก 7. จากนน้ั กดปมุ่ Delete ภาพพื้นหลังก็จะหายไป 46 คอมพิวเตอร์ประยุกต์

8. เราลองเอาภาพทต่ี ัดได้ มาลองใช้ งานกันดกี ว่า โดยเลอื กวิธกี ารนาวตั ถทุ ่ีตดั ได้นัน้ ไปใสใ่ น ภาพอ่นื เปิดภาพท่ีเราต้องการลากไปใส่ขน้ึ มา File-->Open 9. ใชเ้ ครือ่ งมือ Move Tool ในการย้ายภาพที่เราตัดภาพหลังเรยี บร้อยแลว้ ไปยังภาพอกี ภาพ หนงึ่ ท่ีเราต้องการจะยา้ ยไป 10. คลกิ เมาส์ซา้ ยค้างไว้แลว้ ทาการลากดอกทานตะวัน ไปใสอ่ ีกภาพหนงึ่ ท่เี ราต้องการย้ายไป ภาพผลลัพธท์ ีไ่ ดเ้ ป็นดังนี้ การใชโ้ ปรแกรม Adobe Photoshop CC 47

 การใช้ Quick Selection Tool เคร่อื งมือ Quick Selection ใน Photoshop นนั้ เอื้ออานวยให้สามารถเลือกพื้นทใ่ี ดๆในภาพ โดยการระบายลงบนพืน้ ท่ี ซงึ่ สามารถใช้เครื่องมือ Quick Selection Tool เพ่ือลบพื้นหลงั ให้เหลอื แต่ตวั วตั ถุหลักๆได้ หมาะสาหรับภาพเป็นกลุ่ม หรอื ภาพ ท่ีไม่มรี ายละเอยี ดมาก 1. เปิดไฟล์รปู ภาพท่ีต้องการตดั ข้ึนมา File โดยไปท่ี >Open และเลอื กแฟ้มที่เกบ็ รูปภาพ ไว้ เลอื กภาพ แล้ว กด OK จากนัน้ ให้เปล่ยี น Layer Background เป็น Layer 0 โดยการดบั เบิล คลกิ ที่ Layer Background แลว้ กด OK 2. เมอื่ เปล่ียน Layer Background เป็น Layer 0 แลว้ ตอ่ ไปใหด้ ทู ่ีแถบเครื่องมอื เลือกตามภาพจากนน้ั ให้ คลิกค้างไว้แล้วเลือกเคร่อื งมือ Quick selection tool ดงั รูป 48 คอมพวิ เตอรป์ ระยกุ ต์

3. เม่อื เลือกเครื่องมือ Quick Selection Tool แลว้ ใหน้ าเครอ่ื งมอื ไปถูบรเิ วณภาพท่เี รา ต้องการจะตัดจนกว่า จะพอใจซ่งึ เมอ่ื ถแู ล้วจะเกดิ เส้นประขึน้ มา เรียกวา่ เสน้ Selection ดงั รูป ถ้าถูแลว้ เสน้ Selection ล้นออกมา ไม่พอใจ ตอ้ งการลบใหม่ให้กดAltจะเหน็ วา่ Quick Selection Tool เป็นเครอ่ื งหมายลบเราลบโดยกดให้ Alt คา้ งไวแ้ ล้วคอ่ ยๆ ลบส่วนที่เกินออก การใช้โปรแกรม Adobe Photoshop CC 49

4. เมอ่ื สร้างเสน้ Selection รอบรปู ตามทีเ่ ราตอ้ งการแลว้ ขั้นตอ่ ไป ให้ไปท่เี มนู Select>Inverse จากนนั้ เสน้ Selection จะปรากฏข้ึนมารอบๆ กรอบรปู ของเรา ให้กด Delete 5. เม่อื พืน้ หลังหายไปแลว้ ให้เลอื กเคร่ืองมอื Rectangular tool แลว้ คลิกบนพื้นทว่ี า่ งของ ภาพเพ่ือใหเ้ ส้น Selection หายไป ได้ผลลัพธ์ดังรปู จากนั้นทาการ Save file ของรปู ภาพโดยเราจะ ทาการเลือกบันทึกรปู ภาพใหเ้ ปน็ ไฟลน์ ามสกุล .PNG เพอ่ื ง่ายตอ่ การนาไปใชง้ านตอ่ ไป 50 คอมพวิ เตอร์ประยกุ ต์

การสร้างช้ินงานเพือ่ นาไปใช้ใน Website  การสร้าง Slice ดว้ ยเคร่อื งมือ Slice การสร้างหน้า Homepage ท่ีมี ภาพกราฟิกขนาดใหญ่ มักนิยม แบ่งภาพให้เป็นชิ้นสี่เหลี่ยม ยอ่ ย ๆ แล้วนามาจัดเรียงรวมกันขึ้น ใหม่โดยใช้ตารางซึ่งไม่มีเส้น ขอบและไม่มีระยะหา่ งระหวา่ ง ช่อง ดังน้ันผชู้ มจะมองเห็นเป็น ภาพใหญ่เหมือนต้นฉับทกุ ประการ ซึ่งการแบ่งภาพ ดังกล่าวจะชว่ ยให้การ โหลด ภาพเร็วขึ้น  ประโยชน์ของการทา Slice  การโหลดภาพทาไดร้ วดเร็ว  บนั ทกึ ภาพย่อยแต่ละชนิ้ เปน็ ไฟล์คนละชนิด และเลอื กออปชนั่ การบนั ทึกที่แตกต่าง กนั ได้ เชน่ GIF , JPEG  กาหนดไฮเปอร์ลิงค์ หรือสร้างเอฟเฟค็ ต์แบบ Rollover ใหก้ ับภาพย่อยแต่ละช้ินได้  สร้างภาพเคลอื่ นไหวเฉพาะบรเิ วณทตี่ ้องการ  เคร่อื งมือในกลุ่ม Slice เครอื่ งมือในกลมุ่ ท่ีสร้างสไลซ์ มีดังนี้  เครือ่ งมอื Slice ใชส้ าหรับตัดแบง่ ภาพออกเปน็ สว่ นยอ่ ยๆ เครอ่ื งมือ Slice Select ใชส้ าหรับคลิกเลอื กสไลซ์ที่ต้องการปรบั แต่ง  การซ่อนและแสดง Slice นักเรียนสามารถซ่อนเส้น Slice ท้ังหมดไว้ช่ัวคราวเพื่อ ทางานอย่างอื่นบนรูปภาพ โดยเลือกคาส่ัง View > Show > Slice ถ้าต้องการแสดง Slice ก็ใชค้ าสง่ั เดมิ ซา้ อีกครงั้ หนึง่  การปรบั แตง่ Slice นกั เรยี นสามารถใชเ้ ครอื่ งมอื Slice Select ปรับแตง่ Slice ได้หลายแบบ ดังน้ี  การปรับขนาด ใช้เมาส์ คลิกเลือก User Slice ที่ต้องการ จากน้ันเลื่อนเมาส์ไปที่ กรอบเพอื่ ปรับขนาด  การย้ายตาแหน่ง ให้ใชเ้ มาส์ คลกิ ลากที่ User Slice ไปวางทต่ี าแหน่งใหม่ การใชโ้ ปรแกรม Adobe Photoshop CC 51

 การลบ Slice ทาได้โดยใช้เมาส์ เลือก Slice ที่ จะลบและกด Delete หรือคลิกขวาท่ี Slice ที่ ตอ้ งการลบ และเลอื กคาส่งั Delete Slice  การปรับขนาดและย้ายตาแหน่ง User Slice หรือ Auto Slice โดยใส่ค่าเป็น ตวั เลขทาไดโ้ ดยใชเ้ มาส์ ดับเบลิ คลิกท่ี Slice ที่ต้องการ จากนัน้  กาหนดตาแหน่งค่า X, Y หรอื ขนาดในช่อง W, H ของ Slice options นกั เรยี นสามารถสรา้ ง Slice เปน็ ชิน้ ส่วนตามที่ ตอ้ งการไดด้ งั ต่อไปน้ี 1. เลือกรูปภาพท่ีตอ้ งการมาท าการตัดแบ่งภาพ โดยใชเ้ ครอื่ งมือ Slice Tool 2. เลอื กวธิ ีการสรา้ ง Slice จากออปชน่ั บาร์ ของสไลซ์  Normal สรา้ ง Slice โดยการคลกิ ลาก เมาส์เพ่ือกาหนดขนาดเอง  Fixed Aspect Ratio สรา้ ง Slice ดว้ ยวิธี คลิกลากเมาส์โดยการกาหนดสดั สว่ นที่ แน่นอน  Fixed Size สร้าง Slice ด้วยวิธีการ กาหนดขนาดเปน็ คา่ ที่แนน่ อน 3. กรณสี ร้างโดยการกาหนดสัดสว่ นหรือขนาดใหใ้ ส่ค่าทีช่ อ่ ง Width และ Height 4. ใชเ้ มาสร์ ปู คลิกลากเปน็ กรอบส่ีเหลี่ยมลอ้ มรอบบริเวณท่ตี ้องการบนรูป 52 คอมพิวเตอรป์ ระยุกต์

การบนั ทึกภาพ Slice พร้อมเว็บเพจ การบันทึกภาพท่ีเป็น Slice นักเรียนสามารถกาหนดออบช่ันในการแปลงไฟล์ของ User Slice และ Auto Slice แต่ละชิ้นอย่างอิสระจากกัน นอกจากนั้นยังสามารถสั่งให้โปรแกรม สร้างไฟล์ HTML ให้ด้วย ซ่ึงนักเรียนสามารถนาไฟล์นี้ไปสร้างเป็นเว็บเพจในภาคเรียนที่ 2 ต่อไปได้ หรือจะ Copy เฉพาะ source ส่วนท่ีใช้สร้างตารางไปแทรกในเว็บเพจที่มีอยู่แล้วก็ได้ ซึ่งมีขั้นตอน และวธิ กี ารดงั น้ี 1. เลอื กคาสั่ง File > Save for Web 2. เลอื กเครอื่ งมือบนกล่องเครอ่ื งมือในไดอะล็อกบอ็ กซข์ อง Save for Web 3. คลิกเลือกภาพตวั อย่างในใบความรทู้ ่ี 7.1 ทน่ี ักเรียนเลือกมา 4. ใชเ้ ครือ่ งมือ Slice Select คลกิ เลือก User Slice (ถ้าต้องการเลอื กหลายชน้ิ ให้กดคีย์ Shift คา้ งไว้) 5. กาหนดออปช่นั การแปลงไฟลส์ าหรบั Slice ชน้ิ ทเี่ ลอื ก 6. ทาขอ้ 4 ,ขอ้ 5 ซา้ กบั User Slice ช้นิ อ่นื ๆ จนครบ 7. คลกิ เลอื ก Auto Slice ช้นิ ใดชิน้ หนึง่ 8. กาหนดออปชัน่ การแปลงไฟล์ของ Auto Slice (Auto Slice ทกุ ชิ้นจะใชอ้ อปชั่นเดยี วกัน) 9. คลิกปุ่ม Save 10. กาหนดช่ือไฟลแ์ ละเลือกโฟลเดอรท์ ี่เกบ็ การบันทกึ ภาพ Slice พร้อมเวบ็ เพจ การบนั ทึกภาพที่เปน็ Slice นกั เรยี นสามารถกาหนดออบช่ันในการแปลงไฟลข์ อง User Slice และ Auto Slice แตล่ ะชิ้นอย่างอิสระจากกนั นอกจากนน้ั ยังสามารถสง่ั ให้โปรแกรมสร้างไฟล์ HTML ใหด้ ้วย ซ่งึ นักเรียนสามารถนาไฟลน์ ้ีไปสร้างเป็นเว็บเพจในภาคเรียนท่ี 2 ต่อไปได้ หรือจะ Copy เฉพาะ source ส่วนท่ีใช้สร้างตารางไปแทรกในเว็บเพจทีม่ ีอยู่แลว้ ก็ได้ ซ่ึงมีขั้นตอนและวิธีการดังนี้ 1. เลือกคาสั่ง File > Save for Web 2. เลือกเคร่ืองมือ บนกล่องเครื่องมือในไดอะล็อกบอ็ กซ์ของ Save for Web 3. คลกิ เลอื กภาพตวั อย่างในใบความรู้ที่ 7.1 ทีน่ ักเรียนเลือกมา 4. ใช้เคร่ืองมอื Slice Select คลิกเลือก User Slice (การเลือกหลายชน้ิ ให้กดคยี ์ Shift คา้ งไว)้ 5. กาหนดออปชัน่ การแปลงไฟลส์ าหรบั Slice ชนิ้ ที่เลือก 6. ทาขอ้ 4 ,ข้อ 5 ซา้ กบั User Slice ช้นิ อน่ื ๆ จนครบ 7. คลิกเลอื ก Auto Slice ช้นิ ใดชนิ้ หน่งึ 8. กาหนดออปช่นั การแปลงไฟล์ของ Auto Slice (Auto Slice ทกุ ช้นิ จะใช้ออปช่ันเดยี วกนั ) 9. คลกิ ป่มุ Save 10. กาหนดชอ่ื ไฟล์และเลอื กโฟลเดอรท์ ีเ่ ก็บ 11. กาหนดออปชน่ั การบนั ทึกไฟล์ดงั น้ี  Save as type กาหนดว่าจะบันทกึ ไฟล์ ประเภทใดบ้าง  HTML and Image บันทึกท้ังไฟล์ HTML และรปู ภาพ (ปกติควรเลอื ก) Image Only บันทกึ เฉพาะรูปภาพ HTML Only บนั ทกึ เฉพาะไฟล์ HTML เทา่ นั้น  Setting เลือกชดุ ออปชั่นทใ่ี ช้ควบคมุ การสร้างไฟล์ ปกติเลือกเปน็ Default Settings การใช้โปรแกรม Adobe Photoshop CC 53

 Slices เลือก Slice ทจ่ี ะให้บันทกึ All Slices บนั ทกึ Slice ทุกชิน้ Selected Slices บันทึกเฉพาะ Slice ที่ เลอื กไว้ 12. คลิกปุ่ม Saveหลังการบันทึกแล้วโปรแกรมจะ สร้างไฟล์ HTML ขึ้นมาให้โดยอัตโนมัติ 1 ไฟล์ และสร้าง โฟลเดอร์ชื่อ images สาหรับ เก็บรวบรวมภาพที่ทาการ Slice ไว้เป็นไฟล์ชื่อ เดียวกันแตจ่ ะมีหลายเลขตอ่ ท้ายแต่ละรูป หลงั ทาการบันทึก Save for web แล้วจะได้ โฟล์เดอร์ images และไฟล์ .HTML 54 คอมพิวเตอร์ประยกุ ต์

ความรู้พ้นื ฐานการพฒั นาเวบ็ ไซต์ ความรพู้ ื้นฐานการพัฒนาเว็บไซต์ ขน้ั ตอนการพฒั นาเวบ็ ไซต์ โครงสรา้ งเว็บไซต์ รูปแบบโครงสร้างเวบ็ ไซต์ การออกแบบเว็บเพจ ความรูเ้ บอ้ื งต้นภาษา HTML

การเร่ิมต้นออกแบบและพัฒนาเวบ็ ไซต์นั้น เราจะต้องทาความรู้จักกับคาศัพท์ที่เกี่ยวข้องในการ พัฒนาเว็บไซต์ โดยการทราบความหมายของคาศัพท์ต่างๆ เช่น อินเทอร์เน็ต (Internet) โฮมเพจ (Homepage) เว็บเพจ(Webpage) เว็บไซต์(Website) โดเมนเนม(Domain Name) เว็บโฮสติ้ง (Web Hosting) เวบ็ บราวเซอร์(Web browser) และ ภาษา HTML และ XHTML)  อนิ เทอร์เน็ต(Internet) หมายถึง เครือข่ายคอมพิวเตอรข์ นาดใหญ่ ที่มกี ารเช่ือมต่อระหว่าง เครือข่ายหลายๆ เครือข่ายทั่วโลก โดยใช้ภาษาท่ีใช้สื่อสารกันระหว่างคอมพิวเตอร์ที่เรียกว่า โพรโทคอล (Protocol) ผู้ใช้เครือข่ายนี้สามารถสื่อสารถึงกันได้ในหลายๆ ทาง อาทิ เช่น อีเมล์ เว็บ บอร์ดและสามารถสืบค้นข้อมูลและข่าวสารต่างๆ รวมท้ังคัดลอกแฟ้มข้อมูลและโปรแกรมมาใช้ได้ อินเทอร์เน็ตเกิดข้ึนในปี ค.ศ. 1969 (พ.ศ. 2512) จากการเกิดเครือข่าย ARPANET(Advanced Research Projects Agency Network) ซ่ึงเป็นเครือข่ายสานักงานโครงการวิจัยช้ันสูงของ กระทรวงกลาโหม ประเทศสหรัฐอเมริกา โดยมีวัตถุประสงค์หลักของการสร้างเครือข่ายคือ เพื่อให้ คอมพิวเตอร์สามารถเช่ือมต่อ และมีปฏิสัมพันธ์กันได้ เครือข่าย ARPANET ถือเป็นเครือข่ายเริ่มแรก ซึ่งต่อมาไดถ้ ูกพฒั นาให้เป็นเครอื ขา่ ย อินเทอรเ์ นต็ ในปัจจุบนั  โฮมเพจ (Home Page) หมายถึง หน้าแรกของเว็บไซต์ ซึ่งเว็บเพจทุกๆ หน้าของเว็บ ไซท์จะถูกเชื่อมโยงมาจากโฮมเพจ บางครั้งผู้ใช้เข้าใจคาว่าโฮมเพจหมายถึงเว็บไซท์ทั้งหมด แต่ความจริงแล้วโฮมเพจหมายถึง หน้าแรกเท่านั้น โดย ถ้าเปรียบกับหนังสือ โฮมเพจก็เป็นเสมือน หน้าปกหรอื สารบัญซึ่งจะเป็น การแสดงใหเ้ หน็ วา่ ในเว็บไซตข์ องเราน้ันมีอะไรบา้ ง ผพู้ ฒั นาเวบ็ ไซต์จึง ต้องออกแบบให้สวยงามและน่าสนใจให้มากท่สี ดุ 56 คอมพวิ เตอร์ประยกุ ต์

 เว็บเพจ (Web Page) หมายถึง หน้าเว็บแต่ละหน้าท่ีแสดงข้อมูลต่างๆ โดยปกติแล้วจะ ถูกสร้างให้อยู่ในรูปแบบไฟล์ HTML (Hyper Text Markup Language) โดยไฟล์ HTML 1 ไฟล์ก็คือเว็บเพจ 1 หน้า ซึ่งภายในเว็บเพจอาจประกอบไปด้วยข้อความ ภาพ เสียง วดิ ีโอ และ ภาพเคลื่อนไหวแบบมัลติมีเดีย ซ่ึงนอกจากเว็บเพจในแต่ละหน้าจะมีการแสดงข้อมูลต่างๆแล้วยัง สามารถ เช่ือมโยงกันในแต่ละหน้า เพ่ือให้ผู้ชมเว็บไซต์นั้นเรียกดูเอกสารหน้าอ่ืนๆ ท่ีเก่ียวข้องได้ สะดวกและรวดเรว็ อีกด้วย ความร้พู ้นื ฐานการพฒั นาเวบ็ ไซต์ 57

 เว็บไซต์ (Website) หมายถึง เว็บเพจหลายๆ หน้ารวมถึงหน้าโฮมเพจด้วยที่แสดงข้อมูล ท้ังหมดและเช่ือมโยงกัน โดยนาเสนอข้อมูลผ่านคอมพิวเตอร์ ถูกจัดเก็บไว้ในเวิลด์ไวด์เว็บ เว็บไซต์ โดยท่ัวไปจะให้บริการต่อผู้ใช้ฟรี แต่ในขณะเดียวกันบางเว็บไซต์จาเป็นต้องมีการสมัครสมาชิก และ เสียค่าบรกิ ารเพ่อื ท่ีจะดูขอ้ มูล ในเว็บไซตน์ น้ั  โดเมนเนม (Domain Name) หมายถึง ชื่อที่ใช้ระบุลงในคอมพิวเตอร์ เพื่อไปค้นหาใน ระบบ โดเมนเนมซีสเทม เพ่ือระบุถึง ไอพีแอดเดรส ของช่ือนั้นๆ เป็นชื่อท่ีผู้จดทะเบียนระบุให้กับ ผู้ใช้เพ่ือเข้ามายังเว็บไซต์ของตน บางครั้งเราอาจจะใช้ \"ที่อยู่เว็บไซต์\" แทนก็ได้ โดเมนเนม หรือ ชื่อโดเมน เป็นช่ือที่ต้ังข้ึนเพ่ือให้ง่ายต่อการจดจา เน่ืองจากไอพีแอดเดรสนั้นจดจาได้ยาก กว่า และ เมื่อการเปลี่ยนแปลงไอพีแอดเดรส ผู้ใช้ไม่จาเป็นต้องรับรู้หรอื จดจาไอพีแอดเดรสใหม่ ยังคงใช้โดเมน เนมเดิมได้ต่อไป อักขระท่ีจะใช้ในการตั้งชื่อโดเมนเนม ได้แก่ ตัวอักษรภาษาอังกฤษ ตัวเลข และ \"-\" คั่นด้วย \".\" โดยปกติ จะข้ึนต้นด้วยตัวอักษร และลงท้ายด้วยตัวอักษรหรอื ตัวเลข มีความยาวต้ังแต่ 1 ถึง 63 ตัวอักษร ตัวอักษรตัวใหญ่ A - Z หรือตัวอักษรตัวเล็ก ถือว่าเหมือนกัน 1 ไอพีแอดเดรส สามารถใชโ้ ดเมนเนมได้มากกว่า 1 โดเมนเนม และหลายๆ โดเมนเนมอาจจะใช้ไอพีแอดเดรสเดียวกัน ได้ เชน่ โดเมน กลมุ่ .com .co.th Commercial : องค์กรธุรกิจการคา้ หา้ งร้าน กจิ การ บริษัท ทัว่ ไป .or.th Company : แสดงความหมายเป็นเว็บไซต์ของบริษัท การจดทะเบยี นชอ่ื โดเมน ตอ้ งเป็นชอื่ เดยี วกบั ชอื่ หรือ ช่อื ยอ่ ของบริษัท ซงึ่ จดทะเบยี นไว้กบั กระทรวง .ac.th พาณชิ ย์ การจดทะเบยี นต้องใชส้ าเนาใบทะเบียนการค้า หรือสาเนา ภ.พ. 20 เป็นหลักฐาน Non-profit Organization : แสดงว่าเปน็ เวบ็ ไซต์ของส่วนราชการ ช่ือโดเมน ต้องเป็นชอ่ื ขององคก์ ร หรอื ตัวย่อของช่ือองค์กร การจดทะเบียนใชส้ าเนา เอกสารทางราชการเป็นหลกั ฐานการจดทะเบยี น Academic Organization : แสดงความหมายเปน็ เว็บไซต์ของ สถาบนั การศึกษา ชอื่ โดเมนต้องเป็นชอื่ หรือช่ือย่อ ของสถาบันการศึกษา การ 58 คอมพวิ เตอร์ประยกุ ต์

จดทะเบียน ใชส้ าเนาเอกสารการขออนุญาตก่อตัง้ เป็นหลกั ฐาน .in.th Individual : แสดงความหมายเป็นเว็บไซต์ของบุคคลธรรมดาชื่อโดเมนจะใช้ชอ่ื อะไรก็ได้ ใชส้ าเนาบัตรประชาชน หรือสาเนา ใบขบั ขเ่ี ปน็ หลักฐานการจดทะเบยี น .go.th Government : แสดงความหมายเปน็ เวบ็ ไซต์ของกระทรวง หนว่ ยงานราชการ หรือ ส่วนราชการของประเทศไทย การจดทะเบียนต้องใช้หนงั สือรับรอง ลง นามพร้อมประทับตรา จากผู้บรหิ ารหนว่ ยงาน .net Networking : หนว่ ยงานเครือขา่ ย ภายหลงั มกี ารใช้ในกิจการอนื่ มาก .edu Educations : ใช้สาหรบั เวบ็ ไซต์ของสถาบนั การศกึ ษา .info Information : ใชส้ าหรับเว็บไซต์ทนี่ าเสนอข้อมูลเป็นหลกั .mi Military : ใช้สาหรับหน่วยงานทางทหาร  เว็บโฮสต้ิง (Web Hosting) หมายถึง รูปแบบการให้บริการสาหรับผู้ใช้อินเทอร์เน็ต อย่าง หนึ่ง ซึ่งผู้ใช้งานน้ันมีความต้องที่จะฝากเว็บไซต์ของตนเองไว้ กับผู้ให้บริการเซิฟเวอร์ (HSP: Hosting Service Provider) เพ่ือให้เว็บไซต์ ของตนเองน้ัน ออนไลน์อยู่บนโลกอินเทอร์เน็ตตลอด 24 ชม. โดยที่ทางผู้ให้บริการจะจัดเก็บข้อมูลเว็บไซต์ ฐานข้อมูล อีเมล์ ฯลฯ ไว้ในเคร่ืองเซิฟเวอร์หรือท่ีเรียก กันวา่ เว็บเซิฟเวอร์ (Web Server) ซึง่ เว็บเซิฟเวอร์จะทาหน้าท่ี เปน็ ส่ือกลางที่จะแสดงผลหนา้ เว็บไซต์ ให้กบั ผู้ท่องอินเทอร์เนต็ ทว่ั ไป ได้เชา้ ชมผ่านโดเมนเนมไดต้ ลอดเวลา ความรูพ้ ื้นฐานการพัฒนาเวบ็ ไซต์ 59

 เว็บเบราว์เซอร์ (Web browser) หมายถึง โปรแกรมคอมพิวเตอร์ ท่ีผู้ใช้สามารถดูข้อมูล และโต้ตอบกับข้อมูลสารสนเทศที่จัดเก็บในหน้าเว็บท่ีสรา้ งด้วยภาษาเฉพาะ เช่น ภาษาเอชทีเอ็มแอล ที่จัดเก็บไว้ท่ีระบบบริการเว็บหรือเว็บเซิร์ฟเวอร์หรือระบบคลังข้อมูลอ่ืน ๆ โดยโปรแกรมค้นดูเว็บ เปรียบเสมือนเคร่ืองมือในการติดต่อกับเครือข่ายคอมพิวเตอร์ขนาดใหญ่ที่เรียกว่าเวิลด์ไวด์เว็บ เว็บ บราวเซอร์ท่ีได้รับความนิยมในปัจจุบันมีหลากหลายโปรแกรม เช่น Mirosoft Internet Explorer, Mozilla Firefox, Opera,Chrome และ Safari  ภาษา HTML และ XHTML HTML คือ ภาษาที่ใช้ในการเขียนเว็บเพจย่อมาจากคาว่า Hypertext Markup Language โดย Hypertext หมายถึง ข้อความที่ เช่ือมต่อกัน ผ่านลิ้ง ค์ (Hyperlink) Markup หมายถึง วิธีในการเขียนข้อความ language หมายถึงภาษา ดังนั้น HTML จึงหมายถึง ภาษาที่ใช้ในการเขียนข้อความ แทรกรูปภาพนิ่ง ภาพเคล่ือนไหว เสียงและวิดีโอ ลงบน เอกสารทีต่ ่างก็เชือ่ มถึงกัน ใน cyberspace ผา่ น Hyperlink 60 คอมพิวเตอร์ประยกุ ต์

HTML เริ่มขึ้นเม่ือ ปี 1990 เพื่อตอบสนองความต้องการในการสื่อสารแลกเปลี่ยนข้อมูลกัน ของ นักวิทยาศาสตร์ระหว่างสถาบันและมหาวิทยาลัยต่างๆท่ัวโลก โดย Tim Berners-Lee นักพัฒนาของ CERN ได้พัฒนาภาษาท่ีมี รากฐานมาจาก SGML ซ่ึงเป็นภาษาที่ซับซ้อนและยากต่อ การเรียนรู้ จนมาเป็นภาษาที่ใชไ้ ด้ง่ายและสะดวกในการแลกเปลี่ยนเอกสารทางวิทยาศาสตร์ ผ่านการ เช่ือมโยงกันด้วยลิงค์ในหน้าเอกสาร เม่ือ World Wide Web เป็นท่ีแพร่หลาย HTML จึงถูกนามาใช้ จน เกิดการแพร่หลายออกไปยังทั่วโลก จากความง่ายดายในการใช้งาน HTML ในปัจจุบันพัฒนามา จนถึง HTML 4.01 และ HTML 5 XHTML (Extensible Hyper Text Markup Language) เป็ น ภ าษ าป ระเภ ท Markup Language ที่เกิดจากการนา XML และ HTML มารวมกัน กลายเป็นมาตรฐานใหม่ของ HTML คาส่ัง ต่างๆนั้นก็ยังเหมือนกับ HTML แต่จะมีความเข้มงวดในเร่ืองโครงสร้างภาษามากกว่า และมีการตัด tag และ attributeท่ีไม่นิยมใช้ออกไป และได้เพิ่มกฎเกณฑ์บางอย่างเพ่ือให้ใช้งานมีความรัดกุม ในเรอื่ งของภาษาและเปน็ มาตรฐานยง่ิ ขน้ึ ขัน้ ตอนการพฒั นาเว็บไซต์ ก่อนท่ีจะเร่ิมต้นสร้างและพัฒนาเว็บไซต์ให้สมบูรณ์นั้น ผู้จัดทาจะต้องมีกระบวนการสร้างและ ปฏบิ ตั ติ ามข้นั ตอนดังน้ี 1. การวางแผน เป็นขั้นตอนท่ีผู้สร้างเว็บไซต์จะต้องรวบรวมข้อมูลที่ต้องการจะนามาสร้าง เวบ็ ไซต์ กาหนดวัตถุประสงคแ์ ละกลุ่มเป้าหมาย จากนั้นกาหนดขอบเขตและความต้องการของเวบ็ ว่า จะต้องมีอะไรบ้าง เช่น ขนาดของหน้าจอภาพ บราวเซอรท์ ่ีจะใช้ รวมถึงองค์ประกอบและเคร่ืองมือท่ี จะต้องใช้ ต้องการมีกระดานข่าว ห้องสนทนา และมีระบบสมาชิกหรือไม่ ซึ่งในการทางานจะต้องมี การวางแผนดงั น้ี 1.1 ระยะเวลาดาเนินงาน 1.2 งบประมาณ 1.3 อุปกรณ์และเครอื่ งช่วยในการทางาน 1.4 ผ้รู ว่ มงาน 1.5 ปัญหาหรืออุปสรรค 2. การรวบรวมข้อมูล เป็นข้ันตอนท่ีทาต่อจากการวางแผนไว้แต่ต้น เม่ือวางแผนเสร็จแล้ว ก็ นาไปปฏิบัติงาน โดยในการรวบรวมข้อมูลน้ันก็รวบรวมข้อมูลที่มีความจาเป็นท่ีจะต้องใช้ในการสร้าง เว็บไซต์ตามเว็บไซต์ท่ีจะต้องจัดทา เช่น จะทาเว็บไซต์ขายสินค้า ก็รวบรวมข้อมูลเกี่ยวกับสินค้าท่ีจะ นามาแสดงในเว็บไซต์ของเรา โดยการเก็บรวบรวมข้อมูลให้ครบและสมบูรณ์ท่ีสุด เช่น ข้อมูล รายละเอียด รูปภาพนิ่ง ภาพเคล่ือนไหว เสียง และวิดีโอ ซึ่งการเก็บรวบรวมข้อมูลนั้นควรเก็บแยก เปน็ หมวดหมู่เพอื่ ความสะดวกในการเรียกใชง้ านตอนพฒั นาเวบ็ ไซต์ 3. การออกแบบ เป็นขั้นตอนท่ีนาข้อมูลและแผนที่วางไว้ไปปฏิบัติ โดยการลงมือปฏิบัติโดย จัดพิมพ์เนือ้ หา กาหนดการเชื่อมโยง และคุณลักษณะอื่นที่ต้องใชใ้ นเว็บไซต์ ในการออกแบบจะเน้นท่ี การจัดวางและออกแบบหน้าจอของเวบ็ ไซต์ ใหส้ อดคล้องกัน โดยหลกั สาคญั การออกแบบ คอื ความร้พู ้ืนฐานการพัฒนาเวบ็ ไซต์ 61

3.1 กาหนดจุดประสงค์ของเว็บไซต์ ว่าจะจัดทาเว็บไซต์ประเภทใด วางเป้าหมายของผู้เข้า ชมโดยคานงึ ถงึ กลุ่มเปา้ หมายหลกั ว่าเป็นคนกล่มุ ใด จานวนประมาณเทา่ ใด 3.2 วางโครงร่างของเว็บไซต์ โดยมีการกาหนดอย่างคร่าวๆ ว่าในเว็บไซต์เรานั้นจะมีกี่หน้า ในแตล่ ะหนา้ มเี น้อื หาอะไรบา้ งท่จี ะนามาแสดง 3.3 ออกแบบหน้าตาของเว็บไซต์ ซึ่งอาจจะวาดลงในกระดาษก่อนแล้วจึงนามาสร้างใน โปรแกรมท่ีจะใช้พฒั นาเว็บไซตจ์ ากน้ันแล้วจึงทดสอบผ่านเว็บบราวเซอรท์ ี่เลอื กใช้ 3.4 เลือกเว็บบราวเซอร์ ซึ่งในการเลือกเว็บบราวเซอร์ที่ใช้ในการแสดงผลนั้นจะได้เป็นการ กาหนดขนาดความกวา้ ง ยาว รวมถึงการวางองคป์ ระกอบของเวบ็ ไซต์ให้สวยงามและแสดงผลได้เร็ว 4. การพฒั นา เป็นขนั้ ตอนทตี่ ่อเนื่องจากการออกแบบและการสร้างโดยเนน้ ไปที่การตกแตง่ และ เสริมเครื่องมือต่าง ๆ สาหรับเว็บ เช่น การกาหนดสี ภาพ การใช้ Flash ช่วยให้เว็บไซต์มีความ นา่ สนใจยิง่ ข้นึ และเพ่มิ เติมเทคนิคต่าง ๆ ของโปรแกรมสนบั สนุนการสร้างเวบ็ ไซต์ 5. ทดสอบและปรับปรุง เป็นการทดสอบแบบ Offline ซ่ึงยังไม่ได้อัพโหลดข้ึนสู่อินเทอร์เน็ต แต่ก็สามารถแสดงผลผ่านเวบ็ บราวเซอร์ไดเ้ หมอื นจริง เพ่ือเป็นการตรวจสอบและปรับปรุงในสว่ นของ ตัวอักษร ขนาดภาพ การจัดวางตาแหน่งต่างๆ ของวัตถุ รวมถึงเรื่องการใช้สีให้มีความเหมาะสมและ ปรับปรุงใหส้ วยงาม 6. การเผยแพร่เว็บไซต์ ขั้นตอนนอ้ี าจเรียกวา่ อัพโหลด (Upload) ก็ได้ โดยในการอัพโหลดนั้น จะต้องมีการจดทะเบียนโดเมนเนมและมีพื้นท่ีในการเก็บข้อมูลของเว็บไซต์ (Host) ด้วย ซ่ึงการอัพ โหลดอาจทาได้จากโปรแกรมท่ีพัฒนาเว็บไซต์หรือโปรแกรม FTP ทั่วๆไป เช่น FileZilla CuteFTP เป็นต้น 7. การบารงุ รักษา เป็นขั้นตอนประเมนิ ผลและติดตามผลการตดิ ตั้งเวบ็ ไซต์ ว่ามีข้อขัดข้องหรือ ต้องปรับปรุงเปลี่ยนแปลงเว็บเพิ่มเติมให้ทันสมัยอยู่เสมอ อาจจะเรียกได้ว่าขั้นตอนการอัพเดท (Update) เพ่อื ให้มผี เู้ ข้าชมเป็นประจาและมากขึ้นด้วย โครงสรา้ งเว็บไซต์ ในการกาหนดโครงสร้างของเว็บไซต์น้ันจะเป็นการออกแบบส่วนประกอบทั้งหมดของเว็บไซต์ ท่ีต้องการจะแสดงให้ผู้เข้าชมรู้ว่า เว็บไซต์เรานั้นมีท้ังหมดกี่หน้า ในแต่ละหน้าเป็นส่วนการแสดงของ รายละเอยี ดอะไรแต่ละเชอ่ื มโยงกนั อยา่ งไร การออกแบบโครงสร้างเว็บไซต์ คือ การวางแผนการจัดลาดับ เน้ือหาสาระของเว็บไซต์ ออกเป็นหมวดหมู่ เพื่อจัดทาเป็นโครงสร้างในการจัดวางหน้าเว็บเพจทั้งหมด เปรียบเสมือนแผนท่ี ที่ทาให้เห็นโครงสร้างท้ังหมดของเว็บไซต์ ช่วยให้นักพัฒนาเว็บไซต์ไม่หลงทาง การจัดโครงสร้างของ เว็บไซต์ มีจุดมุ่งหมายสาคัญคือ การที่จะทาให้ผู้เข้าเย่ียมชม สามารถค้นหาข้อมูลในเว็บเพจได้อย่าง เป็นระบบ ซง่ึ ถือวา่ เป็นข้นั ตอนท่ีสาคัญ ทส่ี ามารถสรา้ งความสาเร็จใหก้ ับผู้ท่ที าหน้าท่ใี นการออกแบบ และพัฒนาเว็บไซต์ (Webmaster) การออกแบบโครงสร้างหรือจัดระเบียบของข้อมูลที่ชัดเจน 62 คอมพิวเตอร์ประยกุ ต์

แยกย่อยเนื้อหาออกเป็นส่วนต่าง ๆ ที่สัมพันธ์กันและให้อยู่ในมาตรฐานเดียวกัน จะช่วยให้น่าใช้งาน และง่าย ต่อการเขา้ อ่านเนอื้ หาของผใู้ ชเ้ ว็บไซต์  หลักการออกแบบโครงสร้างเว็บไซตม์ ีดงั น้ี 1. กาหนดวตั ถปุ ระสงค์ โดยพิจารณาวา่ เป้าหมายของการสรา้ งเว็บไซต์นี้ทาเพื่ออะไร 2. ศกึ ษาคุณลักษณะของผู้ท่ีเขา้ มาใชว้ ่ากลุ่มเปา้ หมายใดทผ่ี ู้สร้างต้องการสือ่ สาร ขอ้ มูลอะไร ทีพ่ วกเขาตอ้ งการโดยขนั้ ตอนน้ีควรปฏิบตั คิ วบคู่ไปกับข้ันตอนทห่ี น่งึ 3. วางแผนเก่ียวกับการจัดรูปแบบโครงสร้างเนื้อหาสาระ การออกแบบเว็บไซต์ต้องมีการ จดั โครงสร้างหรือจัดระเบยี บข้อมูลท่ีชัดเจน การท่ีเนื้อหามีความต่อเน่ืองไปไม่สน้ิ สุดหรือกระจายมาก เกินไป อาจทาให้เกิดความสับสนต่อผู้ใช้ได้ ฉะน้ันจึงควรออกแบบให้มีลักษณะที่ชัดเจนแยกย่อย ออกเป็นส่วนต่าง ๆ จัดหมวดหมู่ในเร่ืองที่สัมพันธ์กัน รวมทั้งอาจมีการแสดงให้ผู้ใช้เห็นแผนที่ โครงสร้างเพอ่ื ป้องกนั ความสบั สนได้ 4. กาหนดรายละเอยี ดให้กับโครงสรา้ ง ซ่งึ พิจารณาจากวัตถปุ ระสงค์ท่ีตั้งไว้ โดยตง้ั เกณฑ์ใน การใช้ เช่น ผใู้ ชค้ วรทาอะไรบา้ ง จานวนหนา้ ควรมเี ทา่ ใด มีการเช่อื มโยง มากนอ้ ยเพยี งใด รูปแบบโครงสร้างเว็บไซต์ การออกแบบโครงสร้างเว็บไซต์ ข้ึนอยู่กับลักษณะของข้อมูลและความชอบของผู้ออกแบบ ตลอดจนกลุ่มเป้าหมายท่ตี อ้ งการนาเสนอ โครงสร้างของเว็บไซตป์ ระกอบไปด้วย 4 รปู แบบใหญๆ่ ได้ดงั นี้ 1. โครงสร้างแบบเรยี งลาดบั (Sequential Structure) เป็นโครงสร้างแบบธรรมดาที่ใช้กันมากที่สุดเน่ืองจากง่ายต่อการจัดระบบข้อมูล ข้อมูลท่ี นิยม จัดด้วยโครงสร้างแบบน้ีมักเป็นข้อมูลท่ีมีลักษณะเป็นเร่ืองราวตามลาดับของเวลา เช่น การ เรยี งลาดบั ตามตัวอักษร ดรรชนี สารานุกรม หรืออภิธานศัพท์ โครงสร้างแบบนี้ เหมาะกับเวบ็ ไซต์ที่มี ขนาดเล็ก เน้ือหาไม่ซบั ซ้อนใชก้ ารลงิ ก์ (Link) ไปทีละหน้า ทิศทางของการเข้าสู่เน้ือหา (Navigation) ภายในเว็บจะเป็นการดาเนนิ เรื่องในลักษณะเส้นตรง โดยมี ปุ่มเดินหน้า-ถอยหลังเปน็ เครื่องมือหลักใน การกาหนดทิศทาง ข้อเสียของโครงสร้างระบบน้ีคือ ผู้ใช้ไม่สามารถกาหนดทิศทางการเข้าสู่เน้ือหา ของตนเองได้ ความรู้พน้ื ฐานการพัฒนาเวบ็ ไซต์ 63

2. โครงสรา้ งแบบลาดับขน้ั (Hierarchical Structure) เป็นวิธีทดี่ ีท่ีสุดวิธีหนึ่งในการจัดระบบโครงสร้างท่ีมคี วามซบั ซ้อนของข้อมูล โดยแบ่งเน้ือหา ออกเป็นส่วนต่างๆ และมีรายละเอียดย่อยๆ ในแต่ละส่วนลดหล่ันกันมาในลักษณะแนวคิดเดียวกับ แผนภมู ิองคก์ ร จงึ เปน็ การง่ายตอ่ การทาความเขา้ ใจกับโครงสร้างของเน้ือหาในเว็บลักษณะน้ี ลักษณะ เด่นเฉพาะของ เว็บประเภทน้คี ือการมจี ุดเรม่ิ ตน้ ที่จุดร่วมจดุ เดียว นั่นคือ โฮมเพจ (Homepage) และ เช่อื มโยงไปสเู่ นอื้ หา ในลักษณะเปน็ ลาดบั จากบนลงล่าง 3. โครงสรา้ งแบบตาราง (Grid Structure) โครงสร้างรูปแบบน้ีมีความซับซ้อนมากกว่ารูปแบบที่ผ่านมา การออกแบบเพ่ิมความ ยืดหยุ่น ให้แก่การเข้าสู่เนื้อหาของผู้ใช้ โดยเพ่ิมการเช่ือมโยงซึ่งกันและกันระหว่างเน้ือหาแต่ละส่วน เหมาะแก่ การแสดงให้เห็นความสัมพันธ์กันของเน้ือหา การเข้าสู่เน้ือหาของผู้ใช้จะไม่เป็นลักษณะเชิง เส้นตรง เนื่องจากผู้ใช้สามารถเปล่ียนทิศทางการเข้าสู่เนื้อหาของตนเองได้ เช่น ในการศึกษาข้อมูล ประวัติศาสตร์ สมัยสุโขทัย อยุธยา ธนบุรี และรัตนโกสินทร์ โดยในแต่ละสมัยแบ่งเป็นหัวข้อย่อย เหมือนกันคือ การปกครอง ศาสนา วัฒนธรรม และภาษา ในขณะท่ีผู้ใช้กาลังศึกษาข้อมูลทาง ประวัติศาสตร์เกี่ยวกับ การปกครองในสมัยอยุธยา ผู้ใช้อาจศึกษาหัวข้อศาสนาเป็นหัวข้อต่อไปก็ได้ หรือจะข้ามไปดูหัวข้อ การปกครองในสมัยรัตนโกสินทร์ก่อนก็ได้เพื่อเปรียบเทียบลักษณะข้อมูลท่ี เกิดขนึ้ คนละสมยั กนั 64 คอมพวิ เตอร์ประยกุ ต์

4. โครงสรา้ งแบบใยแมงมุม (Web Structure) โครงสร้างประเภทนจ้ี ะมคี วามยืดหยุ่นมากที่สดุ ทุกหน้าในเว็บสามารถจะเชือ่ มโยงไปถงึ กัน ได้หมด เป็นการสร้างรูปแบบการเข้าสู่เน้ือหาที่เป็นอิสระ ผู้ใช้สามารถกาหนดวิธีการเข้าสู่เน้ือหาได้ ด้วย ตนเอง การเช่ือมโยงเนื้อหาแต่ละหน้าอาศัยการโยงใยข้อความท่ีมีมโนทัศน์ (Concept) เหมือนกัน ของแต่ละหน้าในลักษณะของไฮเปอร์เท็กซ์หรือไฮเปอร์มีเดีย โครงสร้างลักษณะน้ีจัดเป็น รูปแบบท่ี ไม่มีโครงสร้างที่แน่นนอนตายตัว (Unstructured) นอกจากน้ีการเช่ือมโยงไม่ได้จากัด เฉพาะเน้ือหา ภายในเว็บน้ันๆ แตส่ ามารถเช่อื มโยงออกไปสเู่ นื้อหาจากเวบ็ ภายนอกได้ การออกแบบเวบ็ เพจ ใน ก า ร อ อ ก แ บ บ เ ว็ บ เพ จ เร า ส า ม า ร ถ ใช้ โ ป ร แ ก ร ม ส ร้ า ง ภ า พ ก ร า ฟิ ก อ ย่ า ง โ ป ร แ ก ร ม Photoshop หรือ Firework มาทาการวางโครงหน้าเว็บเพจและสร้างองค์ประกอบภายในหน้าเว็บ เพจไดเ้ พียงในหน้าเดียว อาจจะเร่ิมท่ี แบนเนอร์หรือโลโก้ของเวบ็ ไซต์ ป่มุ เมนูต่างๆ ซงึ่ โปรแกรมสรา้ ง ภาพกราฟิกนี้จะมีเครื่องมือในการสร้างงานส่วนต่างๆ ดังกล่าว ท้ังยังสามารถท่ีจะบันทึกเป็นไฟล์งาน ยอ่ ยๆ พรอ้ มทั้งได้ไฟล์ HTML เปน็ เพอ่ื นาไปใช้ในการสร้างเว็บเพจต่อไป  ส่วนประกอบของหนา้ เว็บเพจ หนา้ เว็บเพจทั่วๆไป มกั จะออกแบบแบ่งเปน็ 3 สว่ นหลกั ใหญ่ๆ ดังน้ี 1. สว่ นหัว (Page Header) ในส่วนของตรงนี้จะอยู่ด้านบนสุดของเว็บเพจและเป็นส่วนที่ผู้ เข้าใช้งานจะเห็นก่อนส่วนอ่ืน ดังนั้นการออกแบบในส่วนนี้ผู้พัฒนาส่วนใหญ่ให้ความสาคัญ จึงนิยม วางโลโกข้ องเว็บไซตแ์ ละเมนูหลกั เพอ่ื ทจี่ ะใช้เปน็ สว่ นทเี่ ชอ่ื มโยงไปยังรายละเอียดในเว็บไซต์ 2. ส่วนของเนื้อหา (Page Body) ส่วนน้ีอยู่ตอนกลางของเว็บเพจ ใช้เป็นส่วนของการ แสดงเนื้อหาและรายละเอียดของหน้าน้ันๆ ซึ่งจะประกอบด้วยข้อความ ภาพน่ิง ภาพเคล่ือนไหว ตารางข้อมูลต่างๆ และคลิปวิดีโอต่างๆ ซึ่งในบางครั้งอาจจะมีเมนูย่อยๆ เพ่ือเป็นจุดเชื่อมโยงไปยัง หนา้ อื่นๆ อีกกไ็ ด้ ความรพู้ นื้ ฐานการพัฒนาเว็บไซต์ 65

3. ส่วนท้าย (Page Footer) ส่วนน้ีจะอยู่ด้านล่างสุด จะเป็นส่วนแสดงชื่อเจ้าของลิขสิทธิ์ ผลงาน ข้อความอธบิ ายเวบ็ ไซต์สั้นๆ รวมถึงอาจจะแสดงอเี มลแ์ อดเดรสของผูด้ แู ลเว็บไซต์นน้ั ๆ  ขอ้ แนะนาในการออกแบบเว็บเพจ - เวบ็ เพจทุกหน้าตอ้ งมโี ลโก้ ช่อื เว็บไซต์ และลงิ ค์สาหรบั ทีจ่ ะคลิกไปทห่ี นา้ แรกได้ - ทาการกาหนด Title name ใหก้ ับทุกๆ หนา้ และตง้ั ชอื่ ใหส้ ือ่ กบั เน้อื หาในหนา้ เว็บเพจนั้น - เว็บเพจแตล่ ะหนา้ ในเวบ็ ไซต์เดยี วควรที่จะมีรูปแบบคลา้ ยๆ ไปในแนวทางเดยี วกัน - ควรเลือกสตี วั อกั ษรให้เหมาะสมกับพืน้ หลัง ไม่ใชส้ ีทตี่ ัดหรอื กลมกลืนกับพ้นื หลังจนเกนิ ไป - ไมค่ วรใช้สแี ละตวั อักษรทหี่ ลากหลายจนเกินไป - ทาการลดขนาดของรูปภาพใหม้ ีความพอดกี ับหน้าเวบ็ เพจและลดขนาดของไฟล์รปู ภาพดว้ ย - ถ้ามีการใช้รูปภาพที่มีขนาดใหญ่ควรมีการตัดแบ่งรูปภาพให้เป็นชิ้นเล็กหรือทาการ Slice Image น่นั เอง - ไม่ควรใช้ภาพเคลอ่ื นไหวหรือตัวอักษรเคล่อื นไหวมากจนเกินไป ความรเู้ บอื้ งต้นภาษา HTML HTML ย่อมาจาก Hypertext Markup Language เป็นภาษาคอมพิวเตอร์รปู แบบหน่ึง ท่ีมี โครงสร้างการเขียนโดยอาศัยตัวกากับ (Tag) ควบคุมการแสดงผลข้อความ รูปภาพ หรือวัตถุ อื่น ๆ ผ่านโปรแกรมเบราเซอร์ แต่ละ Tag อาจจะมีส่วนขยาย เรียกว่า Attribute สาหรับระบุ หรือควบคุม การแสดงผล ของเว็บได้ด้วย HTML เป็นภาษาท่ีถูกพัฒนาโดย World Wide Web Consortium (W3C) จากแม่แบบของภ าษา SGML (Standard Generalized Markup Language) โดยตัด ความสามารถบางส่วนออกไป เพื่อให้สามารถทาความเข้าใจและเรียนรู้ได้ง่าย และด้วยประเด็น ดังกล่าว ทาให้บรกิ าร www เตบิ โตขยายตัวอย่างกวา้ งขวาง 66 คอมพวิ เตอร์ประยุกต์

 การสร้าง Homepage โฮมเพจจัดอยู่ในรูปไฮเปอร์เท็กซ์ที่ผู้เขา้ ไปใชบ้ ริการบนอินเทอรเ์ น็ตพบเห็นกนั ไดม้ ากท่ีสดุ และ เป็นจดุ เด่นใหผ้ ูใ้ ช้บรกิ ารเกิดความสนใจท่จี ะใช้อนิ เทอร์เนต็ มากขน้ึ นอกเหนือจากบริการพนื้ ฐานท่วั ไป ผู้ใช้บริการอินเทอร์เน็ต (ISP) และศูนย์บริการเว็บ (Web Site) ทุกแห่งต่างมีโฮมเพจเป็นของ ตนเองเพื่อเปน็ ข้อมูลเบื้องต้นที่แสดงให้ผู้ใช้บริการทราบว่าในสถานีนั้น ๆ ให้บริการส่ิงใดบ้างและเม่ือ เข้าสู่โฮมเพจนั้น ๆ แล้วเราจะเดินทางไปยังแห่งใดได้ ทาหน้าท่ีเป็นจุดรวมของการเดินทางเข้าไปสู่ ดินแดนแห่งใหม่ นับได้ว่าโฮมเพจเป็นหน้าตา เป็นการประชาสัมพันธ์ของสถานีหรือองค์กรน้ัน และ เราเรียกข้อมูลอืน่ ๆ ซึง่ อาจเชอื่ มโยงต่อจากโฮมเพจว่า \"เว็บเพจ\" (Web Page) รูปร่างหน้าตาของโฮมเพจแต่ละแห่งจะแตกต่างกันออกไป ขึ้นอยู่กับประเภทและรูปแบบของ องค์กรน้ัน ในโฮมเพจการใส่รูปภาพก็เป็นส่วนสาคัญแต่ต้องมีการเตรียมรูปภาพก่อนที่จะใส่ หาก รปู ภาพมีขนาดไฟล์ใหญ่ก็อาจทาให้การทางานช้าลง ไม่ควรมีหลายหน้าและควรจะมีส่วนแสดงให้ผู้ใช้ ทราบว่าในส่วนนั้นมีอะไรอยู่บ้าง ด้วยการพัฒนาของไฮเปอร์เท็กซ์ ได้เกิดภาษาใหม่ท่ีกลายมาเป็น มาตรฐานบนอนิ เทอร์เน็ตภาษาหน่งึ นยิ มนามาใช้สร้างโฮมเพจและเวบ็ เพจบนอนิ เทอรเ์ นต็ คอื ภาษา HTML การสร้างเว็บเพจโดยใช้ภาษา HTML สามารถทาได้โดยการใช้โปรแกรม Text Editor ต่าง ๆ ท่ีมีอยู่แล้วในระบบปฏิบัติการ Windows เช่น Notepad, WordPad นอกจากนี้ยังสามารถท่ีจะใช้ งานโปรแกรมประเภท Word หรือโปรแกรมท่ีใช้ในการจัดส่ิงพิมพ์ในการเขียนไฟล์ HTML ได้อีกด้วย เมอ่ื เขยี นคาส่ังเสรจ็ แลว้ ให้ทาการบนั ทึกไฟลใ์ ห้มี นามสกลุ .html (ชอื่ ไฟล.์ html)  โครงสร้างของภาษา HTML การเขยี นโฮมเพจดว้ ยภาษา HTML นน้ั เอกสาร HTML จะประกอบด้วยส่วนประกอบ 2 สว่ น ดงั น้ี 1. สว่ น Head คอื สว่ นท่ีจะเป็นหัว (Header) ของหน้าเอกสารท่วั ไป หรือสว่ นชื่อเร่ือง (Title) ของหน้าต่างการทางานในระบบ Windows 2. สว่ น Body จะเป็นสว่ นเนือ้ หาของเอกสารนน้ั ๆ ซึง่ จะประกอบดว้ ย Tag คาสงั่ ในการ จัดรปู แบบ หรือตกแตง่ เอกสาร HTML ในทงั้ สองสว่ นนี้จะอยภู่ ายใน Tag <HTML>…</HTML> ดงั นี้ <html> <head> <title> ส่วนชอ่ื เอกสาร </title> </head> <body> tag คาสงั่ </body> </html> <HTML>....</HTML> คาส่ังเริ่มตน้ คาส่ัง html เปน็ คาส่ังเรม่ิ การเขียน <HEAD>....</HEAD> เปน็ ส่วนหัวของเวบ็ เพจ บอกคุณสมบตั ิของเวบ็ เพจ <TITLE>....</TITLE> ใช้บอกช่อื ของเวบ็ เพจ <BODY>....</BODY> เป็นส่วนสาคัญที่สดุ เพราะเปน็ ส่วนท่ีแสดงเน้ือหาท้งั หมด อาจรวมถึง ขอ้ ความ รปู ภาพ ตารางการเชอื่ มโยง ความรู้พนื้ ฐานการพฒั นาเวบ็ ไซต์ 67

การใชโ้ ปรแกรม Notepad ใชใ้ นการสร้างโฮมเพจ Tag เป็นลักษณะเฉพาะของภาษา HTML ใช้ในการระบุรูปแบบคาส่ัง หรือการลงรหัสคาสั่ง HTML ภายในเคร่ืองหมาย less-than bracket (<) และ greater-than bracket (>) โดยท่ี Tag HTML แบง่ ได้ 2 ลักษณะ คือ 1. Tag เดี่ยว เปน็ Tag ท่ไี ม่ตอ้ งมกี ารปิดรหสั เชน่ <hr> (Tag กาหนดเส้นค่นั ), <br> (Tag กาหนดขึ้นบรรทัดใหม่) เปน็ ตน้ 2. Tag เปิด/ปดิ เปน็ Tag ที่ประกอบด้วย Tag เปิด และ Tag ปิด โดย Tag ปิด จะมี เครอื่ งหมาย slash ( / ) นาหนา้ คาส่ังใน Tag น้นั ๆ เช่น <B>……</B> (Tag กาหนดตวั หนา), <a href=URL>…จุด link..</a> (Tag กาหนดการเชอื่ มโยงข้อมูล) เปน็ ตน้ 3. Tag เปิด/ปดิ บาง tag ละ tag ปิดได้ เช่น <tr> (Tag กาหนดแถวตาราง), <th> (Tag กาหนดคอลัมน์ตาราง) 4. คาส่งั ใน Tag เขยี นดว้ ยอกั ษรตัวใหญ่หรือเลก็ กไ็ ด้ เช่น <Body> หรอื <BODY> หรือ <body>  การใชค้ าสัง่ และการทดสอบผล คาสั่งและการทดสอบในที่นี้ จะกล่าวถึงคาสั่งที่ใช้ในส่วน เน้ือหาคือ ใน Tag body โดยปกติ หากไม่มีการกาหนดอะไรเป็นพิเศษในคาส่ัง body บราวเซอร์จะแสดงผลหน้าเว็บเพจเป็นพ้ืนหลังสี ขาวตัวอักษรสี ดาเสมอ ในคาส่ัง body เราสามารถระบุคาส่ังพิเศษ (Attribute) เช่น คาสั่งของพื้น หลัง สีตัวอักษร สีจุดเชื่อมโยง ตาแหน่งการแสดงผลของหน้าเว็บ ได้ตามต้องการ ซ่ึงการเพิ่มคาหรือ คาส่ัง พิเศษจะเพม่ิ ในป้ายระบุ (tag) หรือคาส่งั เปิดเสมอดังตัวอย่าง <html> <head> <title> Example of Body : ไฟล์ตวั อย่างคาสั่ง BODY</title> </head> <body background=\"bgimage.gif\" bgcolor=\"#ffffff\" text=\"#000099\" link=\"#ff0000\" vlink=\"#990099\" alink=\"#009900\" topmargin=0 leftmargin=0 > สว่ นนีส้ าหรับขอ้ ความทีแ่ สดงในสว่ นเนอ้ื หา </body> </html> 68 คอมพวิ เตอร์ประยุกต์

การกาหนดค่าสี ค่าเป็นสวนส่วนสาคัญของการกาหนดคุณสมบัติแก่ Object ต่างๆ สามารถ กาหนดโดยระบุช่ือสีโดยตรง เช่น black, white, blue, green,... เป็นต้น แต่การกาหนด แบบนี้ จะไมสามารถ ระบุความเข้มแบบไล่เฉดสีได้ จึงได้ใช้ค่าสีเป็นตัวเลขฐานสิบหก (hexadecimal format) โดยกาหนดเป็นคา่ สีของแสง RGB แต่ละสีประกอบด้วยเลข 2 หลัก ในแต่ละสีจะมคี ่าของสี จากมืดไปสว่างดังน้ี 0 1 2 3 4 5 6 7 8 9 A B C D E F เลข 2 หลักของแต่ละสีจึงมีค่า ไดต้ ้ังแต่ 00 – FF ดังน้ันการกาหนดคา่ สี ดว้ ยตัวเลขฐานสิบหกจงึ ได้คา่ สีทดี่ กี ว่า ตัวอยา่ งค่ารหสั สี (HEX number) สาหรบั ใช้ในการเขยี น Homepage ความรูพ้ ืน้ ฐานการพฒั นาเว็บไซต์ 69

Google Site การสร้างเวบ็ ไซต์ดว้ ย Google Site จุดเดน่ ของ Google Site ส่ิงทีส่ ามารถดาเนนิ การไดก้ ับ Google Site ข้อจากัดของ Google Site การออกแบบโครงสร้างเว็บไซต์ การออกแบบหนา้ เว็บเพจ ขั้นตอนการสรา้ งเว็บไซตใ์ หม่ ขั้นตอนการตั้งชอื่ เว็บไซต์ ขั้นตอนการสรา้ งเนือ้ หาในเวบ็ ไซต์ การแทรก Code HTML ขน้ั ตอนการเผยแพรเวบ็ ไซต์

การสร้างเว็บไซต์ด้วย Google Sites : Google Sites คืออะไร กูเกิลไซต์ Google Sites ให้บริการครั้งแรกเมื่อเดือนพฤษภาคม 2551 Google Sites คือโปรแกรมของ Google ท่ีให้บริการสร้างเว็บไซต์ฟรี สามารถสร้างเว็บไซต์ไดง่าย ปรับแต่ง รูปลกั ษณ์ได้ สามารถรวบรวมความหลากหลายของข้อมูลไว้ในที่เดียว เช่น วดิ ีโอ ปฏิทนิ เอกสาร อ่ืนๆ สามารถ นามาแทรกในหน้าเว็บเพจได้ ใช้งานงา่ ย ทาให้ชว่ ยอานวยความสะดวกได้เป็นอยา่ งมาก จุดเด่นของ Google Sites :  ให้บรกิ ารฟรี ไม่เสียคา่ ใช้จา่ ย  พนื้ ท่จี ดั เกบ็ ข้อมูลมพี ืน้ ทใี่ ห้บริการ 10 GB.  ไม่จาเป็นต้องรู้ภาษาเขียนเว็บ (HTML) มีพื้นฐานในด้านการพิมพ์ใช้เวิร์ดพิมพ์เอกสารก็สามารถ ทาได้ เมนเู ป็นภาษาไทย  มีแบบเทมเพลตสาเร็จรูปให้เลือกมากมาย คล้ายๆ กบั แบบสาเร็จของโปรแกรมพาวเวอรพ์ อยต์  มี Gadget มากมาย (เครอื่ งมอื ช่วยเสรมิ การทางาน)  สามารถแชร์เว็บให้เพอ่ื นๆ ร่วมสร้างสรรค์ได้  สามารถเผยแพร่ข้อมลู ท่ีเป็นประโยชน์และเปน็ ความรู้ หรือบทเรียนอีกหลายๆ อย่างใน SITE ได้  เป็นระบบทค่ี รอบคลมุ นามาใช้ด้วยกันได้เลย เช่น อเี มล์ (Gmail) ปฏทิ นิ (Calendar) เอกสาร (Documents) ยูทบู (YouTube) อัลบม้ั ภาพ (Picasa) แผนท่ี (Map) ฯลฯ สง่ิ ท่ีสามารถดาเนนิ การได้กับ Google Sites :  กาหนดรูปลักษณข์ องเวบ็ ไซต์  สร้างเพจย่อยเพือ่ ใหเ้ น้ือหานา่ สนใจ  เลือกประเภทเพจ, เว็บเพจประกาศ, ต้เู ก็บเอกสาร  ให้เนื้อหาในเว็บ เช่น วดิ โี อ, เอกสารออนไลน์, Picasa แสดงสไลด์ภาพถา่ ย, gadgets  iGoogle และไฟลแ์ บบออฟไลน์  ใหเ้ ว็บไซตเ์ ปน็ ส่วนตวั หรือสาธารณะตามท่ตี ้องการ  ค้นหาใน Google เนอื้ หาของเวบ็ ไซตท์ ี่มีเทคโนโลยีการคน้ หา Google  เรยี นรูพ้ ืน้ ฐานของ Google เว็บไซต์และเริม่ ตน้ สรา้ งเวบ็ ไซต์ การใชง้ าน Google site  Google Sites เป็นแอปพลเิ คชนั ออนไลน์ท่ที าใหก้ ารสร้างเว็บไซต์ของทีมกลายเป็นเร่ืองง่าย การสร้างเว็บไซตด์ ว้ ย Google Sites 71

 แก้ไขเอกสาร เมอื่ ใช้ Google Sites ผคู้ นสามารถรวบรวมข้อมูลท่หี ลากหลายไวใ้ นที่เดยี วไดอ้ ยา่ ง รวดเรว็ ได้แก่ วิดีโอ ปฏทิ ิน งานนาเสนอ ไฟล์แนบ และขอ้ ความ และสามารถใช้งานร่วมกับกลุ่ม เลก็ ๆ ทั้งองคก์ รหรอื ทัง้ โลก เพอ่ื ดหู รือแกไ้ ขไดอ้ ย่างง่ายดาย  Free Account ไว้ท่ี 100 MB  พ้ืนท่จี ัดเกบ็ 10 Gb* (GB=กกิ ะไบต์)  ขนาดไฟลส์ ูงสดุ 10 MB (MB=เมกกะไบต)์  จานวนหน้าเวบ็ เพจไมจ่ ากัดการใชง้ าน Google site  * เฉพาะพื้นที่เว็บไซต์ไม่เกิน 100 MB แต่หากรวมเป็นสมาชิกบริการอ่ืนๆ ของกูเกิลตัวอื่นๆ เช่น ยูทบู ( YouTube), ไดรฟ์ (Drive), ปฏิทนิ (Calendar), อัลบัม้ ภาพ (Picasa) แลว้ ไมเ่ กนิ 10 GB ขอ้ จากัดของ Google Sites  ใชเทมเพลตทีอ่ อกแบบเองไม่ได้ ไมส่ ามารถใช้เป็นเว็บฐานข้อมลู ปรบั แต่งได้เทา่ ท่ีกูเกิลไซตม์ ใี ห้  เว็บไซต์เป็นของเราแต่อยู่ภายใตก้ ารดแู ลของกูเกิลจึงทาให้ชอื่ ยาว  ใช้งานร่วมกับ CSS ท่ีออกแบบเองไม่ได้ (CSS คือภาษาสาหรับกาหนดรูปลักษณ์ของเว็บเพจ เป็นส่ิงที่กาหนดว่าเว็บเพจควรแสดงผลอย่างไร เช่น font และขนาดของตัวอักษร, ขนาดความ กว้างของหน้าเว็บ, สีพื้นหลัง, ฯลฯ) และยังมีปัญหาเร่ืองการใช้งานร่วมกับ script อ่ืนๆ (Script (สคริปต์) คือ โปรแกรมทเ่ี รียกข้อมูลจากชดุ คาสง่ั ของผู้อนื่ ให้มาทางานบนเว็บไซต์ของเรา หรือพูด ง่ายๆ ก็คือ Code ที่เรานามาติดไว้บนเว็บไซต์ของเรา เพื่อให้แสดงผลได้ตามความต้องการของ ชดุ คาส่งั นน้ั ๆ)  ทาไดเ้ ฉพาะเม่อื ต่ออินเทอร์เน็ตเทา่ นั้น การออกแบบโครงสร้างเว็บไซต์ เร่ิมต้นการออกแบบโครงสร้างเว็บไซต์ คือ การทาโครงสร้างเว็บไซต์ที่จะพัฒนา เพ่ือท่ีจะได้ทราบถึง แนวคิดในการพฒั นาออกมาทัง้ หมดว่ามีอะไรบ้าง และดาเนนิ การพฒั นาตามทีไ่ ดอ้ อกแบบไว้ www.atts.rtaf.mi.th หน้าแรก เก่ยี วกบั เรา โครงสร้างองคก์ ร บรกิ ารของเรา ตดิ ตอ่ เรา บคุ ลากร หนว่ ยงาน ประวัติหน่วยงาน ดาวนโ์ หลด วิสัยทัศน์ 72 คอมพิวเตอรป์ ระยุกต์

ออกแบบหน้าเว็บเพจ การออกแบบหน้าจอ คือการออกแบบหน้าจอ ตามแนวคิดที่ได้เขียนไวในโครงสร้างเว็บไซต์ ในบทกอ่ นหนา้ นนั้ เพื่อแสดงเปน็ ผลลัพธ์ตามทีไ่ ดว้ างแผนไว้ ใสช่ อื่ เว็บไซต์ ส่วนเมนูเวบ็ ไซต์ ใส่รูปภาพ ใส่เนือ้ หาขอ้ มูลในหนา้ เพจ ใสข่ ้อมูล ข้ันตอนการสร้างเวบ็ ไซต์ใหม่  สมคั รเขา้ ใช้งาน โดยเข้าไปท่ี URL พมิ พ์ https://sites.google.com  แล้วลงชือ่ เข้าใช้ Gmail โดยกรอก e-mail และ Password คลกิ ปมุ “ลงชื่อเข้าใช้งาน” การสร้างเว็บไซตด์ ว้ ย Google Sites 73

 ถ้าใช้เมล์ให้เขา้ ระบบ www.google.com  แล้วลงช่อื เขา้ ใช้โดยกรอก e-mail และ Password คลิกปุม “ลงช่ือเขา้ ใช้งาน”  ใช้งานครั้งแรก โดยเข้าไปที่ URL พมิ พ์ https://sites.google.com/ จะมีไอคอน Sites โชว์ข้นึ มา พร้อมใช้งาน  ให้เราเลือกคลิกท่ีไอคอน Sites เพื่อไปหน้าท่ีสร้างเวบ็ ไซต์ 74 คอมพิวเตอรป์ ระยกุ ต์

 การเลอื กสร้างเว็บไซต์มี 2 แบบ 1. สร้างไซตแ์ บบใหม่ 2. สร้างไซตแ์ บบคลาสสิก แบบเก่า  เลือกไซต์แบบใหม่ เขา้ ไปคลิกที่ปุม Sites  คลิกตามลูกศรช้ี สร้างเวบ็ ไซต์ใหม่ การสร้างเว็บไซตด์ ้วย Google Sites 75

ขั้นตอนการตง้ั ชือ่ เวบ็ ไซต์ การต้ังช่ือเว็บไซต์ (title) เราสร้างหน้าเพจขึ้นมา สาหรับส่วนของตาแหน่งไซต์ google sites จะทา การตั้งให้โดยอัตโนมัติ  การสร้างหน้าแรกเพจของเวบ็ ไซต์ 1. ใสชอื่ ไซต์ของเราให้สอ่ื ถึงขอ้ มูลในเว็บไซต์ เราอาจจะสร้างหลายเว็บในพ้นื ท่เี กบ็ ของเรา 2. ใสชอ่ื ข้อมลู หน้าเพจของเรา ขน้ั ตอนการเพมิ่ หน้าเพจเว็บไซต์  เมนูแทรก เป็นเมนูท่ีควบคุมเก่ียวกับการใช้มีเดีย เช่น การใสรูปภาพ ลิงค์ วิดีโอ แผนท่ี ปฏิทิน และ gadget ต่างๆ จึงทาให้เมนูนี้ ถกู ใช้งานบ่อยท่สี ดุ 76 คอมพวิ เตอรป์ ระยกุ ต์

สร้างเมนูหน้าเพจ 1. เร่ิมต้นสร้างเมนูหน้าเพจ หน้าเวบ็ โดยคลิกท่ปี ุ่ม ด้านบนของหน้าจอเมนูมุมด้านขวาหน้าเว็บ 2. เลือกด้านล่างคาวา่ สร้างหน้าเว็บใหม่ และเมนูหน้าเพจ เม่อื เปิดหนา้ สร้างเพจใหม่ข้ึนมาแล้ว กรอกช่ือ ตง้ั ชื่อหน้าเว็บเพจ เมนู เลือกตาแหน่งเมนูที่ตอ้ งการ 1 2  การใช้งานธีม Theme Google Sites ให้เราเลอื กใช้ตามท่ีมีให้เทา่ น้ัน ไมส่ ามารถเพ่ิมเติมเองได้ การสร้างเว็บไซตด์ ว้ ย Google Sites 77

ข้นั ตอนการสร้างเน้ือหาในเว็บไซต์  การออกแบบเอกสาร จะใส่รูปหรือข้อความเนื้อหา ทาไดตามรปู แบบท่ี Google Sites กาหนดมาให้ เราเลือกและวางตามจุดทเ่ี ราตองการใส่เนอ้ื หาข้อมลู และรูปภาพ การออกแบบ  การใสร่ ปู ภาพ สามารถเลอื กอัพโหลดท่รี ปู ภาพท่ีต้องการจะใส่รปู หรอื ภาพที่ Google Sites มีใหแ้ ละ ปรับขนาดของภาพไดต้ ามท่ีเราต้องการ 78 คอมพวิ เตอรป์ ระยุกต์

 การสร้างลิงค์ในเว็บไซต์ เลือกข้อความลากมาวางไว้ตามตาแหน่งท่ีต้องการ ใสข้อมลู เน้ือหาที่ต้องการ ลงิ คแ์ ลว้ เลือก URL เว็บท่ีต้องการลิงค์ไปหา หรือกดคาว่า แทรก เพ่ือแทรกข้อความ รูปภาพ หรือไฟล์ ที่มีอยู่ใน ไดรฟ์ (google drive)  การเช่ือมข้อมูลจากไดรฟ์ (google drive) เลือกแบบฟอร์มแบบทดสอบ หรือแบบฟอร์มท่ีเรามีใน ไดรฟน์ ามาแทรกลงในหนาเพจโดยคลกิ -> แทรก (Insert) ไดเ้ ลย การสร้างเว็บไซตด์ ้วย Google Sites 79

การแทรก Code HTML การแทรก Code ลงในเวบ็ ไซต์ หรือเรยี กกนั ท่ัวไปวา่ Embed Code หรือ ในภาษาไทย เรยี กว่า \"ฝัง\" หรือ \"ฝัง Code\" คือการแทรก ลูกเล่นต่างๆเช่น ตัวอักษรเคล่ือนไหว, ข่าว , web board , นาฬิกาแบบต่างๆ หรือ แมก้ ระท่งั Mini Game ต่างๆ ลงในเวบ็ ไซต์ของเรา ซง่ึ อาจทาให้เว็บไซต์ของเราดมู ลี กู เล่น สสี นั และความ น่าสนใจมากข้ึน การแทรก Embed Code ก่อนอ่ืนต้องหา Code ของลูกเล่นที่เราต้องการนามาใส่ในเว็บไซต์ ของเรา โดยอาจค้นหาจาก Search Engine อย่าง Google , Bing , Yahoo ฯลฯ สามารถแทรกรายละเอียด ต่างๆ เข้าไปในเวบ็ ไซตไ์ ดอ้ ย่างรวดเรว็  แทรก Code ตวั อักษรเคลือ่ นไหว ยกตัวอย่าง : <div style=\"color: blue; padding: 16px; font-family: Arial; border:#1a3ce6 0px SOLID\"> <marquee> Wecome to website วิชาคอมพิวเตอร์ แผนกวชิ าสามญั กกศ.รร.จอ.ยศ.ทอ.</marquee> </div> 80 คอมพวิ เตอร์ประยกุ ต์

เมือ่ พิมพ์ Code ลงกล่องข้อความ Embed code จากนน้ั กด Next จะแสดงข้อความดงั ภาพต่อไปนี้ และยังสามารถคลกิ เขา้ ไปแก้ไข หรอื ลบออกได้  การแทรก Code จานวนผเู้ ขา้ ชมเวบ็ ไซต์ โดยใช้คาส่งั ดงั ต่อไปน้ี <!-- hitwebcounter Code START --> <a href=\"https://www.hitwebcounter.com\" target=\"_blank\"> <img src=\"https://hitwebcounter.com/counter/counter.php?page=7436521&style=00 05&nbdigits=5&type=ip&initCount=0\" title=\"Web Counter\" Alt=\"counter free\" border=\"0\" > </a> การสร้างเวบ็ ไซตด์ ้วย Google Sites 81

เมอ่ื วางโคด้ เรยี บร้อยใหก้ ดถดั ไป (Next) หลงั จากน้ันโดยผลท่ีไดจ้ ะเห็นจานวนผ้เู ขา้ ชม เว็บไซต์ของเรา ดงั ภาพ 82 คอมพวิ เตอรป์ ระยกุ ต์

การแทรกเน้อื หาอื่นๆในเว็บไซต์  แทรกขอ้ ความแบบยบุ ได้ (Collapsibletext) แทรกเน้ือหาทมี่ จี านวนมากโดยสามารถเพ่ิมหรอื ยุบ ข้อความไดต้ ามขนาดทตี่ อ้ งการ  แทรกสารบญั (Table of contents) การนาทางของเน้อื หาหน้าเว็บ  แทรกภาพหมนุ (Image carousel) แทรกรปู ภาพไดห้ ลายๆภาพ เพอื่ ใหส้ ามารถหมุนภาพเพ่อื ดไู ด้  แทรกปมุ่ (Button) เพอ่ื ให้สามารถลิงค์เนอ้ื หาเชอ่ื มโยงกันภายในเวบ็ ได้ง่ายมากข้นึ  แทรกตัวแบ่งหน้าเว็บ (Divider)  แทรกตวั ยดึ ตาแหน่ง (Placeholder) โดยผแู้ กไ้ ขเวบ็ ไซตจ์ ะแทนที่รายการนด้ี ว้ ยเนอ้ื หาของตนเองได้  แทรก YouTube จากการอพั โหลดเองหรือเลือกกาจราสกราYงoวuดีTีโuอbeเลือกวิดโี อจากท่เี อาอัพโหลดเองหรือเลอื ก Youtube นามา  แทรกปฏิทิน (Calendar) จากGoogle แCทalรeกnลdงaใrนหนาเพจเราได  แทรกแผนที่ (Map) จาก Google Map  แทรกเอกสาร (Doc) จากไฟล์ Word โดยผ่าน Google Doc  แทรกงานนาเสนอ (Slides) จากไฟล์ Power Point โดยผา่ น Google Slides  แทรกชีต (Sheets) จากไฟล์ Excel โดยเกบ็ ผ่าน Google Sheets  แทรกฟอร์ม (Forms) แทรกแบบสอบถาม หรอื แบบทดสอบโดยผา่ นGoogle Forms  แทรกแผนภมู ิ (Charts) แทรกแผนภูมิ Google Charts  การสร้างวดี โี อ เลอื กวดิ โี อจากที่เอาอัปโหลดเองหรอื เลือก Youtube เอามาแทรกลงในหน้าเพจเราได้ การสร้างเว็บไซตด์ ว้ ย Google Sites 83

 การสร้างแผนที่ เลอื กแผนทีจ่ าก Google Map ไดเข้าใช้รว่ มกันได้เลย  การสร้างปฏทิ ิน เลือกสร้างใช้รว่ มกบั ปฏทิ นิ จาก Google Calendar แทรกเขา้ มาในหน้าเพจปรับ ขนาดใหเ้ หมาะสม 84 คอมพิวเตอรป์ ระยกุ ต์

ข้ันตอนการเผยแพร่เวบ็ ไซต์  การแชร์ใช้งานร่วมกบั ผู้อน่ื การกาหนดสทิ ธผ์ิ ู้ทม่ี สี ทิ ธ์เิ ข้าถงึ ในการใช้เวบ็ ไซต์ หรือผู้ท่ที างานร่วมกัน เราสามารถเพม่ิ อีเมล์ชื่อผู้ทที่ างานร่วมกนั 1. กาหนดสทิ ธิ์ในการการเผยแพร่ 2. เพ่ิมอีเมล์ผู้ที่ทางานร่วมกัน  กาหนดสิทธใิ์ นการการเผยแพร่ สามารถใหท้ กุ คนจะค้นหาและดูได้หรือจากดั เฉพาะกลุ่มบุคคลที่ สามารถดไู ด้ 1. ทกุ คนทวั่ โลกสามารถเข้าดูได้ 2. ทุกคนท่เี ป็นบุคลากรท่ีใช้อีเมล์ ทอ.สามารถเขดูได้ 3. บุคคลทร่ี ะบุในอีเมล์ถงึ จะสามารถเขา้ ดูได้ การสร้างเว็บไซตด์ ้วย Google Sites 85

 ขั้นตอนการเผยแพร่เว็บไซต์ คลกิ เลือกเมนูปุ่มเผยแพร่ (Publish) เม่ือตอ้ งการเผยแพร่ ข้ันตอนแรกจะต้อง ใส่ช่ือของเว็บไซต์ (Publish to the web) แนะนาให้ใส่เป็นภาษาอังกฤษเช่น computer โดยไม่มี เครื่องหมายอักขระท่ียกเว้นเช่น (/,*,+,: ฯลฯ) ซึ่งชื่อที่สร้างจะไปอยู่ต่อท้าย URL Google Site เป็น https://sites.google.com/view/computer  คลิกที่หวั ข้อ ดเู ว็บไซต์ทเี่ ผยแพร่ (Publish) เพอื่ ดูเวบ็ ไซต์ท่ีเราจะเผยแพร่ 86 คอมพวิ เตอรป์ ระยกุ ต์

 ตัวอย่างผลงานการทาเว็บไซต์ แผนกวิชาสามัญ กองการศึกษา โรงเรียนจ่าอากาศ กรมยุทธศึกษา ทหารอากาศ กองทัพอากาศ (ผวสม.กกศ.รร.จอ.ยศ.ทอ.) https://sites.google.com/view/bess-atts การสร้างเว็บไซตด์ ้วย Google Sites 87

Google Form การสร้างGoogle Form ความหมายของ Google Form สร้างแบบสอบถามออนไลนจ์ าก Google Form เลือกการสรา้ งแบบฟอร์ม ใหก้ ับแบบสอบถาม กาหนดคาถามใหผ้ ู้ตอบแบบสอบถาม เลือกประเภทคาถามที่ตอ้ งการ คาถามประเภทตาราง สรา้ งข้อเสนอแนะ หรือแสดงความคดิ เหน็ วธิ ีนา URL ไปใช้สรา้ ง QR Code สรา้ ง QR Code แบบสอบถามที่วัดผลได้ สรา้ งแบบสอบถามดว้ ย QR Code Analytics เพิม่ ความแตกตา่ งใสข่ อ้ ความบน QR Code

การสรา้ ง Google Form 1. Google Form คอื อะไร Google Form เป็นสว่ นหนึง่ ในบรกิ ารของกลุ่ม Google Docs ทีช่ ว่ ยให้เราสรา้ งแบบสอบถาม ออนไลน์ หรอื ใช้สาหรับรวบรวมข้อมลู ไดอ้ ย่างรวดเรว็ โดยทไี่ ม่ต้องเสียค่าใช้จ่ายในการใช้งาน Google Form ผูใ้ ชส้ ามารถนาไปปรบั ประยกุ ตใ์ ช้งานไดห้ ลายรปู แบบอาทิ เชน่ การทาแบบฟอร์มสารวจความคิดเห็น การทา แบบฟอรม์ สารวจความพงึ พอใจ การทาแบบฟอรม์ ลงทะเบียนและการลงคะแนนเสยี ง เปน็ ตน้ สาหรับสรา้ งแบบสอบถามออนไลน์ โดยสามารถสร้างฟอร์มรบั ข้อมลู ได้อยู่ 9 รปู แบบ โดยแบ่ง ออกเปน็ รูปแบบพ้ืนฐาน 5 รปู แบบ และรปู แบบข้นั สงู 4 รปู แบบ อกี ทัง้ ยังสามารถแทรกในส่วนของการ ออกแบบ ไมว่ า่ จะเป็นการแทรกรปู ภาพ วีดโี อ หรือข้อความส่วนหัว ดังนั้นก่อนทีจ่ ะเร่มิ สร้างแบบฟอร์ม ออนไลน์ เราลองมาทาความรู้จกั กบั ฟอรม์ ทัง้ 9 รปู แบบ ก่อนกันดกี วา่ ว่าฟอรม์ แบบไหนจะตรงต่อความ ตอ้ งการของเรามากทสี่ ุดดงั นี้ การสร้างเว็บไซตด์ ว้ ย Google Forms 89

การสร้างแบบสอบถามออนไลน์ จาก Google Form ช่วยให้เราสร้างแบบสอบถามออนไลน์ และใช้สาหรับรวบรวมข้อมูลได้อย่างรวดเร็ว โดยท่ีไม่ต้องเสียค่าใช้จ่ายในการใช้งาน ผู้ใช้สามารถนาไปปรับได้ หลายรูปแบบ เช่น การทาแบบฟอร์มสารวจความคิดเห็น การทาแบบฟอร์มสารวจความพึงพอใจ การทาแบบฟอร์มลงทะเบยี น และการลงคะแนนเพือ่ โหวต ใช้งานคู่ QR Code Analytics ให้ QR ทคี่ ณุ สรา้ งบอกสถิติจานวนคนสแกน เราสามารถที่จะใช้ QR Code มาช่วยให้ผู้ตอบแบบสอบถามเข้าถึงข้อมูลได้รวดเร็ว ไหนๆจะเลือก สร้างแบบสอบถาม แล้วใช้ QR Code เราแนะนาให้เป็น QR Code Analytics ทราบสถิติการสแกนตอบ แบบสอบถามจริงๆ ว่ามีจานวนคนท่ีสนใจสแกนจริงๆ เท่าไร เทียบกับคนท่ีตอบแบบสอบถาม เพื่อใช้ วเิ คราะห์ข้อมลู ในการสร้างแบบสอบถามในคร้ังต่อไป เรมิ่ ตน้ ในการใช้งาน Google Forms สิ่งที่จาเป็นจะต้องใช้ บญั ชีของ Google เพอ่ื ใช้งาน เช่น Gmail 1. สรา้ งแบบสอบถามออนไลน์ จาก Google Forms 1.1 เขา้ ไปท่ี Website : www.google.com/forms/about 1.2 กดปมุ่ ไดท้ ี่ Google ฟอร์ม 90 คอมพิวเตอร์ประยกุ ต์

1.3 กรอก E-mail ของคุณ 1.4 กดปุ่ม Next 2. เลือกการสร้างแบบฟอร์ม ใหก้ ับแบบสอบถาม 2.1 กดป่มุ + เพ่ือเริม่ สรา้ งแบบฟอรม์ ใหม่ หรอื สามารถเลอื ก แกลเลอรเี ทมเพลตที่ทาง Google มีไว้ให้ เลอื กใช้ การสร้างเวบ็ ไซตด์ ว้ ย Google Forms 91

2.2 ระบุชอ่ื แบบสอบถาม 2.3 ระบุคาอธบิ าย (ถา้ มี) 2.4 ระบุคาถาม 2.5 ระบคุ าตอบ 2.6 กดปุม่ \"เพิม่ ตัวเลอื ก\" เพ่ือเพิ่มคาตอบ 2.7 กดปมุ่ นี้ ในกรณที ี่คาถามในข้อนัน้ \"จาเปน็ \" ต้องตอบ 2.8 กดปมุ่ น้ี เพ่ือเพิ่มคาถาม 3. กาหนดคาถามใหผ้ ้ตู อบแบบสอบถาม 3.1. ในกรณที ีต่ ้องการใหผ้ ู้ตอบคาถาม ตอบคาตอบอ่นื นอกเหนือจากทีม่ ีอยู่ (โดยผู้ตอบจะสามารถระบุ คาตอบได)้ 3.2. กดปุ่มน้ี เพ่ือเพิม่ คาถาม 92 คอมพวิ เตอร์ประยกุ ต์

4. เลือกประเภทคาถามทีต่ ้องการหรอื สรา้ งคาถามในรปู แบบตารางหลายคาถาม 4.1. กดป่มุ น้ี เพ่ือเปลยี่ นประเภทของคาถาม 4.2. ในกรณนี ้ีจะเลอื กประเภท \"ตารางตัวเลอื กหลายข้อ\" การสร้างเว็บไซตด์ ้วย Google Forms 93

5. คาถามประเภทตาราง เหมาะกับคาตอบท่ีมีหลายข้อ 5.1. ระบุคาถาม 5.2. ระบคุ าตอบ 5.3. กดปุ่มน้ี เพ่ือเพ่ิมคาถาม 6. สร้างข้อเสนอแนะ หรือแสดงความคิดเห็นในแบบสอบถาม 6.1 กดปมุ่ น้ี เพอื่ เปลย่ี นประเภทของคาถาม (ในกรณีนจี้ ะเลือกประเภท \"ย่อหนา้ \") 6.2 ระบคุ าถาม 6.3 กดปุ่ม \"สง่ \" เพ่ือสร้างแบบฟอร์ม 94 คอมพวิ เตอรป์ ระยกุ ต์