การสร้างเว็บไซต์ประชาสัมพันธ์ร้านโปงซาวด์สตูดิโอ

การสร้างเวบ็ ไซต์ประชาสมั พันธร์ า้ นโปงซาวดส์ ตดู ิโอ Creating a Website, Prachaphan Shop, Pong Sound Studio นางสาวสุวนนั ท์ กนั ภยั นายปรชี า วงคก์ ษตั ริย์ โครงการนีเ้ ปน็ สว่ นหนึง่ ของการศกึ ษาตามหลกั สูตรประกาศนียบตั รวิชาชีพ (ปวส.) สาขาวิชาคอมพิวเตอร์ธรุ กิจ วทิ ยาลัยการอาชพี นวมนิ ทราชนิ มี กุ ดาหาร ปีการศกึ ษา 2563

การสร้างเวบ็ ไซต์ประชาสมั พันธร์ า้ นโปงซาวดส์ ตดู โิ อ Creating a Website, Prachaphan Shop, Pong Sound Studio นางสาวสุวนันท์ กันภัย นายปรีชา วงคก์ ษัตริย์ โครงการนีเ้ ป็นสว่ นหนงึ่ ของการศกึ ษาตามหลักสตู รประกาศนยี บตั รวชิ าชพี ช้ันสงู (ปวส.) สาขาวิชาคอมพิวเตอรธ์ รุ กจิ วิทยาลยั การอาชพี นวมนิ ทราชนิ ีมกุ ดาหาร ปีการศกึ ษา 2563







หวั ข้อโครงการ การสรา้ งเว็บไซตป์ ระชาสมั พันธ์รา้ นโปงซาวด์สตดู ิโอ Creating a website, Prachaphan Shop, Pong Sound Studio ผู้ดำเนินโครงการ นางสาวสุวนนั ท์ กนั ภยั รหัสประจำตวั นกั ศึกษา 6232040022 นายปรีชา วงค์กษตั รยิ ์ รหสั ประจำตวั นักศึกษา 6232040026 ครูทีป่ รึกษา นางประภาพร ผวิ เรอื งนนท์ ครผู ้สู อน นางประเสริฐศรี สุทธิพนั ธ์ สาขาวชิ า คอมพิวเตอรธ์ ุรกิจ ปกี ารศกึ ษา 2563 …………………………………………………………………………………………………..…………………………………………… บทคัดยอ่ โครงการการสร้างเว็บไซต์ประชาสัมพันธ์ร้านโปงซาวด์สตูดิโอ จัดทำขึ้นโดยมีวัตถุประสงค์ 1) เพ่ือสร้างเวบ็ ไซตป์ ระชาสมั พนั ธ์ร้านโปงซาวดส์ ตูดโิ อ 2) เพือ่ เพมิ่ ช่องทางการประชาสัมพนั ธร์ ้านโปงซาวด์สตูดิโอ 3) เพ่ือศกึ ษาความพึงพอใจของผใู้ ช้บรกิ ารเวบ็ ไซตป์ ระชาสัมพันธ์ร้านโปงซาวด์สตูดโิ อ กลุ่มตัวอยา่ งในการวิจัย ครั้งนี้ จำนวน 169 คน ได้มาโดยวิธีการสุ่มตัวอย่างแบบง่าย โดยใช้วิธีการประเมินแบบสอบถามออนไลน์ เครื่องมือ ที่ใช้ในการวิจัยครั้งนี้ ได้แก่ 1) เว็บไซต์ประชาสัมพันธ์ร้านโปงซาวด์สตูดิโอ ที่ผู้วิจัยสร้างข้ึน 2) แบบสอบถามความพึงพอใจของกลุ่มตัวอย่างที่มีคุณภาพเวบ็ ไซตป์ ระชาสัมพนั ธ์ร้านโปงซาวด์สตดู ิโอ สถิติท่ี ใช้ในการวิจยั ครงั้ น้ี ได้แก่ คา่ เฉลย่ี และส่วนเบี่ยงเบนมาตรฐาน (S.D.) ผลการศึกษาการสร้างเว็บไซต์ประชาสัมพันธ์ร้านโปงซาวด์สตูดิโอ พบว่าเว็บไซต์ร้านโปงซาวด์ สตูดิโอ ที่คณะผู้วิจัยสร้างขึ้นสามารถเพิ่มช่องทางการขายสินค้าให้กับ ร้านโปงซาวด์สตูดิโอ เนื่องจากทำให้มี เว็บไซต์ ในการเผยแพรป่ ระชาสัมพันธข์ อ้ มูลข่าวสาร และการบรกิ ารจากทางร้านมคี วามสะดวกมากย่ิงขึ้น ผลการวิจัย พบว่าความพึงพอใจของผู้ใช้งานเว็บไซต์ประชาสัมพันธ์ร้านโปงซาวด์สตูดิโอ โดยภาพรวมระดบั ความพงึ พอใจอยู่ในระดบั ดี มีค่าเฉลย่ี เท่ากบั 4.43 คา่ เบ่ียงเบนมาตรฐาน เทา่ กบั 0.52

บทที่1 บทนำ 1.1 ควำมเปน็ มำและควำมสำคญั ของปัญหำ ความก้าวหน้าของเทคโนโลยีสารสนเทศและการสื่อสาร ทาให้แนวโน้มการเปล่ียนแปลง ของโลกด้านสารสนเทศและสื่อ (Information And Media) มีการเกิดข้ึนอย่างรวดเร็ว จนทาให้การ ใช้งานด้านสารสนเทศและส่ือ สามารถเข้ามามีบทบาทในชีวิตประจาวันมีอิทธิพลอย่างกว้างขวาง ต่อความคิดเห็นความเชื่อ มีผลต่อการตัดสินใจ และการตอบสนองการรับรู้ สามารถขยายผลต่อเนื่อง อย่างรวดเร็วและยากต่อการควบคุม เนื่องจากที่โลกมีการเชื่อมต่อโดยสมบูรณ์จนทาให้การกระจาย ตัวของข่าวสารมีความรวดเร็วและยากต่อการควบคุม การเปลี่ยนแปลงทางสังคมโลกนับตั้งแต่มนุษย์ ได้มีการรวมกลุ่มกันเป็นสังคมขนาดใหญ่ต้ังแต่โบราณนั้น ก็เริ่มมีการสื่อสารก่อนหน้า ที่จะมาถึง ปัจจุบันนั้นย่อมมีการพัฒนาการมายาวนาน ซ่ึงในปัจจุบันมนุษย์ต้องอาศัยเทคโนโลยีสารสนเทศ ประกอบด้วย คอมพิวเตอร์ และระบบสื่อสารโทรคมนาคมเป็นตัวกลางในการติดต่อส่ือสารกันมาก ย่ิงขึ้น ส่งผลให้ทุกหน่วยงานไม่ว่าจะเป็นหน่วยงานภาครัฐหรือเอกชน ต่างให้ความสนใจและศึกษา ระบบเทคโนโลยีสารสนเทศ เพื่อนามาพัฒนาระบบการดาเนินงานเผยแพร่ข้อมูลข่าวสารทางด้าน ตา่ งๆ ทาให้การดาเนนิ งานขององค์การ ให้มปี ระสิทธิภาพมากย่งิ ข้ึน งานประชาสัมพันธเ์ ป็นงานที่ต้อง สร้างความสัมพนั ธ์ สรา้ งความเขา้ ใจ ให้การบรกิ ารขอ้ มูลขา่ วสาร ทถ่ี ูกต้อง และชัดเจนรวมไปถึงความ น่าสนใจของข้อมูลข่าวสารที่จะสื่อสารออกไปอันก่อให้เกิดความเข้าใจที่ตรงกันในการประชาสัมพันธ์ เผยแพรข่ อ้ มลู ข่าวสาร ร้านโปงซาวด์สตูดิโอ สถานท่ีต้ัง 105 หมู่ 9 บ.โนนสว่าง ต.นิคมคาสร้อย อ.นิคมคาสร้อย จ.มุกดาหาร 49130 เป็นร้านจาหน่าย อิเล็กโทน คีย์บอร์ด ทั้งใหม่และมือสอง เครื่องดนตรี เคร่ือง เสียงอุปกรณ์ห้องบันทึกเสียง ซาวด์การ์ด และบริการให้เช่าเวที ฉาก แสง สี เสียงออกบูธงาน Event Grand opening โดยให้บริการท่ัวประเทศ ซ่ึงปัจจุบันร้านโปงซาวด์สตูดิโอยัง ไม่มีเว็บไซต์ในการ ประชาสมั พันธ์ข้อมลู ข่าวสารต่าง ๆ แกล่ กู ค้าและผูส้ นใจในการซื้อขายสินค้าและการบริการของทางร้าน ดังน้นั คณะผจู้ ดั ทาโครงการไดเ้ ล็งเห็นความสาคัญ ในการใช้เทคโนโลยีสารสนเทศช่วยใน การประชาสัมพันธเ์ ผยแพร่ข้อมลู ข่าวสารของร้านโปงซาวดส์ ตดู โิ อ จึงไดข้ ้อสรปุ ในการดาเนนิ โครงการ การสร้างเวบ็ ไซตป์ ระชาสมั พนั ธ์รา้ นโปงซาวด์สตดู ิโอ 1.2 วัตถปุ ระสงค์ของโครงกำร 1.2.1 เพอื่ สรา้ งเวบ็ ไซต์ประชาสัมพันธ์ร้านโปงซาวด์สตูดิโอ 1.2.2 เพ่ือเพ่มิ ชอ่ งทางการประชาสัมพันธ์รา้ นโปงซาวด์สตูดโิ อ 1.2.3 เพื่อสารวจความพึงพอใจผูใ้ ช้บริการเว็บไซต์ประชาสัมพนั ธ์ร้านโปงซาวด์สตูดิโอ

2 1.3 เปำ้ หมำยและขอบเขตของโครงกำร 1.3.1 เปำ้ หมำยของโครงกำร 1.3.1.1 เป้ำหมำยเชิงปริมำณ 1. ไดเ้ ว็บไซต์ประชาสัมพนั ธ์ร้านโปงซาวดส์ ตดู ิโอ จานวน 1 เวบ็ ไซต์ 2. ได้งานวิจัยศกึ ษาความความพึงพอใจของผใู้ ชบ้ ริการเว็บไซต์ ประชาสมั พนั ธ์รา้ นโปงซาวด์สตูดิโอ จานวน 1 เล่ม 3. ได้คู่มือการใช้บริการเว็บไซต์ประชาสัมพันธ์ร้านโปงซาวด์สตูดิโอ จานวน 1 เลม่ 1.3.1.2 เปำ้ หมำยเชิงคณุ ภำพ 1. เป็นส่ือกลางในการประชาสัมพันธ์ข้อมูลข่าวสารต่างๆ ผ่านระบบ เครอื ข่ายอนิ เตอร์เนต็ 2. เปน็ การเพิ่มชอ่ งทางการขายสนิ คา้ และบริการ รา้ นโปงซาวดส์ ตูดโิ อ 3. ผู้เข้าใช้งานเว็บไซต์ประชาสัมพันธ์ร้านโปงซาวด์สตูดิโอ มีความ พงึ พอใจในการเข้าใชง้ าน อยู่ในระดับมาก 1.3.2 ขอบเขตของโครงกำร 1.3.2.1 กำรแสดงผลหน้ำหลกั (Home page) 1. มกี ารแสดงผลการโฆษณาสินค้า 2. มีการแสดงผลสินคา้ ท่ลี กู ค้าให้ความสนใจ 3. มีระบบการสืบค้นสินคา้ 1.3.2.2 ระบบจัดกำรสมำชิก (User) 1. มกี ารสมคั รสมาชิกใหม่ 2. มกี ารเขา้ สรู่ ะบบ Login 3. มแี กไ้ ขขอ้ มลู สมาชกิ (Profile) 1.3.2.3 ระบบกำรส่งั ซ้ือ (Order) 1. มีระบบตะกรา้ สินค้า 2. มกี ารคานวณราคาของสินคา้ อตั โนมัติ 3. มีการแก้ไข หรอื ยกเลิกสนิ คา้ ในตะกรา้ สนิ ค้า 4. มีการยืนยนั การสั่งซื้อสินค้า 5. มกี ารแสดงสถานะการส่ังซอ้ื สินค้า 1.3.2.4 มรี ะบบกำรชำระเงิน (Payment) 1. มชี อ่ งทางการชาระเงนิ 2. มกี ารตรวจสอบการชาระเงนิ 1.3.2.5 มรี ะบบบริหำรจดั กำรเว็บไซตข์ ำยสินค้ำออนไลน์ 1. มีระบบจดั การสมาชิก เพ่ิม ลบ แกไ้ ข ค้นหาข้อมลู สมาชิก 2. มีการเก็บข้อมลู การส่งั ซื้อสนิ ค้า

3 1.4 แผนงำนและระยะเวลำดำเนนิ กำร เวลาเร่มิ ต้นการทางานในแตล่ ะวนั ไม่แน่นอน โดยเฉลยี่ 1 วัน ทางาน 4 ชัว่ โมง รวมทงั้ ส้ิน ในการศึกษาและการสร้างเว็บไซต์ใช้เวลาโดยประมาณ 4 เดือน ( 16 พฤศจิกายน 2563 ถึง 19 มนี าคม 25664) ซึง่ สามารถแสดงรายละเอยี ดตารางแผนการดาเนินงาน ดงั ต่อไปนี้ ตำรำงท่ี 1.1 ตารางแสดงแผนงานและระยะเวลาดาเนินงาน ระยะเวลำดำเนินงำน (สัปดำหท์ ่)ี กจิ กรรม/ พ.ศ.2563 พ.ศ.2564 ขนั้ ตอนกำรดำเนนิ งำน พ.ย. ธ.ค. ม.ค. ก.พ. ม.ี ค. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 ขนั้ เตรียมกำร สอบเคา้ โครง ศกึ ษาขอ้ มูล ขน้ั ดำเนินกำร สรา้ งช้นิ งาน ตรวจสอบความสมบูรณ์ ขั้นสรปุ และประเมนิ ผล สรปุ ผล จดั ทารปู เล่ม นาเสนอ/เผยแพร่ ตำรำงท่ี 1.2 งบประมาณ รำคำท่สี ืบได้ ชือ่ รำ้ นคำ้ และ ท่ี รำยกำร จำนวน หน่วยละ รวม หมำยเลขโทรศัพท์ 1 โดเมนเนม (บำท) (บำท) (ถำ้ มี) 2 เขา้ รูปเลม่ 1 เวบ็ 750 750 บริษทั ทเี อชนคิ จากัด รวมท้ังสิ้น 1 เลม่ 300 300 พพี ี ก๊อปป้ี 1,050 1.5 ประโยชน์ท่คี ำดวำ่ จะได้รบั 1.5.1 ไดเ้ วบ็ ไซต์ประชาสัมพันธร์ า้ นโปงซาวดส์ ตูดิโอ 1.5.2 ไดง้ านวิจัยศกึ ษาความความพงึ พอใจของผใู้ ชบ้ ริการเวบ็ ไซต์ประชาสมั พันธ์ รา้ นโปงซาวดส์ ตดู ิโอ 1.5.3 ได้คมู่ ือการใชง้ านเวบ็ ไซต์ประชาสัมพันธ์รา้ นโปงซาวด์สตูดโิ อ 1.5.4 ได้ชอ่ งทางการซอ้ื ขายสนิ ค้าและบริการผา่ นเครือข่ายอนิ เทอรเ์ น็ตของ ร้านโปงซาวดส์ ตดู โิ อ จานวน 1 ชอ่ งทาง

4 1.6 นยิ ำมศัพท์เฉพำะ 1.6.1 เวิลด์ไวด์เว็บ (WorldWide Web:WWW) คือพื้นท่ีท่ีเก็บข้อมูลข่าวสาร ที่เช่ือมต่อกัน ทางอินเทอร์เน็ต โดยการกาหนดยูอาร์แอล คาว่าเวิลด์ไวด์เว็บมักจะใช้สับสนกับคาว่า อินเทอร์เน็ต จรงิ ๆ แลว้ เวลิ ดไ์ วดเ์ ว็บเปน็ เพยี งแค่บริการหนงึ่ บนอินเทอร์เนต็ 1.6.2 เว็บเพจ (Web Page) คือ หน้า ๆ หนึ่งที่เปิดดูผ่านเวิลด์ไวด์เว็บ โดยจะถูกสร้าง ข้ึนมาบนพ้ืนฐานของภาษาคอมพวิ เตอร์เช่น HTML หรอื อื่น ๆ 1.6.3 โฮมเพจ (Home Page) คือ เว็บเพจหนึ่งหน้าท่ีมักเป็นหน้าแรก และหน้าหลัก เมื่อเข้าชม โดยมักแสดงถึงภาพรวมของเนื้อหาท้ังหมดว่ามีอะไรบ้าง และทาหน้าท่ีเช่ือมโยงไปยังเว็บ เพจอืน่ ๆ ท่เี กีย่ วข้องในเว็บไซต์ 1.6.4 เว็บเซิร์ฟเวอร์ (Web Server) คือ เครื่องคอมพิวเตอร์ที่เก็บข้อมูลของเว็บไซต์ไว้ และทาหน้าที่ส่งขอ้ มลู กลบั ไปยังเว็บเบราวเ์ ซอร์ของเคร่ืองรับบริการ เมอื่ ไดร้ ับการร้องขอขอ้ มลู ขอ้ มูล ท้ังหมดท่ใี ชง้ านผ่านเวิลด์ไวด์เว็บ จะดึงมาจากเว็บเซริ ์ฟเวอร์ 1.6.5 เว็บโฮสต้ิง (Web Hosting) คือ พื้นที่บนเครือข่ายอินเทอร์เน็ตท่ีเปิดให้บริการ สาหรับเก็บข้อมูลที่แสดงบนเว็บไซต์ โดยจะมีทั้งในรูปแบบฟรีและรูปแบบที่ต้องเสียค่าบริการ โดยจะ มขี อ้ ดขี อ้ เสียแตกตา่ งกนั ไป 1.6.6 โดเมนเนม (Domain Name) คือ ช่ือของเว็บที่ใช้เรียกบนอินเทอร์เน็ต และใช้ใน การระบุเพ่ือเข้าถึงเว็บไซต์ต่าง ๆ โดยในระยะแรกน้ันจะเป็นไอพีแอดเดรสท่ีใช้ในการทางาน ซึ่งเป็น ตัวเลขที่ยาว ยากต่อการจดจา ต่อมาจึงได้มีการนาโดเมนเนมมาใช้แทนท่ี ซึ่งเป็นตัวอักษรท่ีอ่านและ จดจาไดง้ ่ายกวา่ โดยการตง้ั ชือ่ โดเมนเนมจะต้องไมซ่ ้ากบั ท่เี คยมคี นต้ัง และใชง้ านไปแล้ว 1.6.7 ไอพีแอดเดรส (IP Address) คือ รูปแบบหน่ึงของการระบุท่ีต้ังของข้อมูล ในเครือข่าย รวมถึงอินเทอร์เน็ต โดยจะอยู่ในรูปของ x.x.x.x แทนด้วยตัวเลข โดยอาจมีรูปแบบอ่ืน ตามลกั ษณะท่ีใชง้ าน 1.6.8 Content Management System (CMS) หมายถึง ระบบการจัดการเนื้อหาของ เว็บไซต์ (Content Management System: CMS) คือ ระบบที่พัฒนา คิดค้นขึ้นมาเพื่อช่วยลด ทรัพยากรในการพัฒนา (Development) และบริหาร (Management) เว็บไซต์ ไม่ว่าจะเป็นเรื่อง ของกาลังคน ระยะเวลา และเงินทอง ทใี่ ชใ้ นการสร้างและควบคมุ ดแู ลไซต์

บทท่ี2 ทฤษฎีที่เก่ยี วข้อง โครงการเวบ็ ไซตป์ ระชาสัมพนั ธ์ร้านโปงซาวดส์ ตูดโิ อ คณะผู้จดั ทาโครงการได้ทาการศึกษา หลักการ ทฤษฎีที่และเทคโนโลยีท่ีเก่ียวข้อง ที่สามารถนามาประยุกต์ใช้งาน โดยแบ่งออกเป็นหัวข้อ ตา่ งๆดงั ตอ่ ไปนี้ 2.1 ประวัตแิ ละความเป็นมาของเวบ็ ไซต์ 2.2 หลกั ออกแบบและพัฒนาเว็บไซต์ 2.3 โปรแกรมทีใ่ ชใ้ นการพฒั นาระบบ 2.4 พาณิชยอ์ ิเลก็ ทรอนกิ ส์ 2.5 การขอพื้นทีแ่ ละการอพั โหลดเวบ็ ไซต์ 2.6 งานวิจัยทข่ี ้อง 2.1 ประวตั ิและความเป็นมาของเวบ็ ไซต์ 2.1.1 เว็บไซต์ (Website) หมายถึง หน้าเว็บเพจท่ีจัดทาขึ้น เพื่อนาเสนอข้อมูลต่างๆ ผ่านทางคอมพวิ เตอร์และอินเทอร์เน็ต โดยจะมีหนา้ เว็บเพจหลาย ๆ หน้าทเี่ ช่ือมโยงเขา้ กับไฮเปอร์ลิ้งค์ เพื่อให้สามารถเปิดไปยังหน้าเพจต่างๆ ได้อย่างง่ายดายและถูกจัดเก็บไว้ใน www (เวิลด์ไวด์เว็บ) โดยเว็บไซต์ส่วนใหญ่นั้นก็มีท้ังเว็บไซต์ท่ีเปิดให้เข้าชมได้ฟรี และเว็บไซต์ที่ต้องสมัครสมาชิกและเสีย ค่าบริการ จึงจะเข้าใช้งานเว็บได้ ซ่ึงข้อมูลในเว็บก็จะมีหลากหลายแบบ ขึ้นอยู่กับความต้องการ นาเสนอของเจ้าของเว็บไซต์ การเรียกดูเว็บไซต์จะเรียกดูผ่านทางซอฟต์แวร์ ในลักษณ ะของ เบราวเ์ ซอร์ 2.1.2 ประวัติความเป็นมาของเว็บไซต์ เมื่อปี ค.ศ.1990 นักวิทยาศาสตร์จากห้องทดลอง ของสถาบัน CERN ห้องปฏิบัติการฟิสิกส์ ที่ต้ังอยู่ ณ นคร Geneva ประเทศสวิตเซอร์แลนด์ นาม Tim Berners-Lee ได้สร้างระบบสื่อสารผ่านเครือข่ายคอมพิวเตอร์ รปู แบบใหม่ ซ่งึ เรยี กวา่ hypertext ผลท่ีออกมาคือมีการสร้างโพรโทคอลแบบ HTTP ข้ึน นามาใช้ในการส่งสารสนเทศต่างๆ โดยมันถูก จัดอยู่ในรูปแบบใหม่ที่เรียกว่า HTML จากการสื่อสารสืบค้นสารสนเทศรูปแบบใหม่น้ี ทาให้ผู้คน ติดต่อส่ือสารกันได้อย่างรวดเร็วมากขึ้น อีกทั้งยังส่งเป็นท้ังข้อความ ภาพ และเสียงได้อีกด้วย จากการวิจัยดังกล่าวทาให้ในปัจจุบันได้มีการคิดค้นพร้อมสร้างสรรค์รูปแบบเพ่ือยกระดับการส่ือสาร ระหว่างมนุษย์ด้วยกันโดยอาศัยเครือข่ายคอมพิวเตอร์เป็นตัวเช่ือมโยง ทาให้ WWW กลายเป็นเคร่ืองมือ ท่ีใช้การติดต่อสื่อสารผ่านเครือข่ายขนาดใหญ่ท่ีสุดในโลกจากเว็บเพจ โฮมเพจ จัดเป็นองค์ประกอบ หนึ่งของเวบ็ ไซตเ์ มอ่ื เข้าไปในเวบ็ ไซตแ์ ล้วสารสนเทศหรือข้อมูลต่าง ๆ ทค่ี ณุ ต้องการสืบค้นก็คือหน้าของ เอกสารซึ่งปรากฏอยบู่ นหนา้ จอคอมพวิ เตอร์

6 2.1.3 ประเภทของเวบ็ ไซต์ 2.1.3.1 เว็บไซต์ประชาสัมพันธ์องค์กร (Corporate Website) จัดทาขึ้นเพ่ือ นาเสนอขอ้ มลู และขา่ วสารสาหรับองค์กร 2.1.3.2 เว็บไซต์บริการหรือเว็บไซต์ชุมชน (Community & Service Website) จัดทาขึ้นเพ่อื เป็นเครื่องมือในการสร้างชุมชน หรอื ใหบ้ รกิ ารแกล่ ูกค้าหรือสมาชกิ ขององค์กรหรือบรษิ ัทนัน้ 2.1.3.3 เว็บไซต์จาหน่ายสินค้าหรือบริการออนไลน์ (E-Commerce Website) จัดทาขนึ้ เพ่ือใช้ในการทาตลาดหรอื ขายสนิ ค้าหรือบริการผา่ นเว็บไซต์ 2.1.3.4 เว็บไซต์นาเสนอส่ือผสม (Multimedia & Presentation Website) เว็บไซต์ มีการนาเอาเทคโนโลยีใหม่ ๆ ที่ทันสมัยมาใช้ในการนาเสนอ เช่น ภาพเคลื่อนไหว (Animation), เสยี ง (Sound), หรอื ภาพวีดโี อ (VDO Streaming) นาเสนอผ่านเวบ็ ไซต์ 2.2 หลักการออกแบบและพฒั นาเว็บไซต์ 2.2.1 ความหมายของการวางโครงสร้างเวบ็ ไซต์ การวางโครงสร้างเว็บไซต์ คือ การวางแผนการจัดลาดับข้ันตอนการทางานของ แต่ละเว็บเพจโดยมีเนอ้ื หาสาระในหน้าเว็บเพจนั้น ซึ่งแยกเน้ือหาออกเป็นหมวดหมู่ จาแนกชนิด หรือ ประเภทของเนื้อหาออกเป็นสว่ นๆ เพือ่ ให้ผู้พัฒนาเวบ็ ไซต์ทางานไดถ้ ูกต้องและสะดวกรวดเรว็ ย่ิงขนึ้ 2.2.2 หลักการออกแบบโครงสร้างเวบ็ ไซต์ มีดงั ต่อไปนี้ 1) การกาหนดวัตถุประสงค์ (Target) คือการกาหนดขอบเขตของเว็บไซต์ โดยคานึงถงึ กลุม่ เปา้ หมาย 2) การกาหนดวเิ คราะหส์ ภาพปัญหา (Problem) คือ การวเิ คราะหถ์ งึ สภาพปญั หา ทีอ่ าจจะเกิดข้ึน 3) การวางแผนการทางาน (Plan) คือการนาวัตถุประสงค์และการวิเคราะหส์ ภาพ ปัญหาเพอ่ื เป็นแนวทางในการออกแบบเว็บไซต์ 4) การดาเนินงาน (Action) คือการลงมือสร้างและพัฒนาเว็บไซต์ตามแผนการ ดาเนินงานท่ีวางไว้ 5) ทดลองใช้งาน (Test) คือการทดสอบหรือการทดลองการใช้งานเว็บไซต์ก่อน ให้ผ้ใู ช้งานเว็บไซตไ์ ด้ใชจ้ รงิ เพอ่ื หาข้อบกพร่องของเว็บไซต์ 6) แก้ไขปรับปรุง (Correct) คือ การนาข้อท่ีบกพร่องจากการทดลองใช้งานมา แกไ้ ขปรังปรุงก่อนใหผ้ ู้ใชง้ านเว็บไซตไ์ ด้ใช้งานจริง 2.2.3 รปู แบบโครงสร้างเว็บไซต์ การออกแบบโครงการสร้างเว็บไซต์ขึ้นอยู่กับลักษณะของข้อมูล ความเหมาะสม และความต้องการของกลมุ่ เป้าหมาย โดยมีรปู แบบหลกั ๆ 4 รูปแบบ ดังตอ่ ไปน้ี

7 1) โครงสร้างแบบเรยี งลาดบั (Sequential Structure) คือ โครงสร้างพ้ืนฐานหรือ โครงสรา้ งแบบลาดับขัน้ ตอนทีน่ ิยมใชก้ นั ทั่วไปเพราะงา่ ยต่อการจดั ระบบข้อมลู รูปที่ 2.1 โครงสร้างแบบเรียงลาดบั 2) โครงสร้างแบบลาดับขนั้ (Hierarchical Structure) คอื การจัดระบบโครงสรา้ ง ทม่ี ีความซับซอ้ นของข้อมลู โดยแบ่งเน้ือหาออกเปน็ ส่วนต่างๆ และมีรายละเอียดย่อยๆในแต่ละเวบ็ เพจ รูปที่ 2.2 โครงสร้างแบบลาดับช้นั 3) โครงสร้างแบบตาราง (Grid Structure) คือ การจัดระบบโครงสร้างท่ีมีความ ซบั ซ้อนมากกว่าโครงสร้างแบบลาดบั ขนั้ โดยการออกแบบท่มี คี วามยดื หยุน่ เพิ่มการเชอ่ื มโยงถึงกันได้ รปู ที่ 2.3 โครงสร้างแบบตาราง 4) โครงสร้างแบบใยแมงมุม (Web Structure) คือ โครงสร้างท่ีมีความยืดหยุ่น มากท่ีสุด โดยหน้าเว็บเพจทุกหน้าสามารถเชื่อมโยงหากันได้ท้ังหมด รวมท้ังสามารถเชื่อมโยงไป เว็บไซต์หรอื ลงิ คภ์ ายนอก

8 รูปที่ 2.4 โครงสรา้ งแบบใยแมงมุม 2.2.4 ทฤษฎีสใี นการออกแบบ การสรา้ งและการพัฒนาเว็บไซตท์ ส่ี ามารถดึงดดู ความสนใจจากผูใ้ ช้งานได้ ข้นึ อยู่ กับการออกแบบท่ีสนองความต้องการของผู้เข้าใช้งานด้วยการออกแบบที่คานึงถึงหลักความเป็นจริง ดังน้ัน การเลือกสีจึงมีหลักเกณฑ์ในการออกแบบ โดยใช้หลักจิตวิทยาเข้ามาช่วยในการเลือกใช้สีให้ เหมาะสมกับชิน้ งาน. 1) สีฟ้าและสีน้าเงิน ให้ความรู้สึกสงบ สดใส สุภาพ เคร่งขรึม รอบคอบ สง่างาม มศี กั ดศ์ิ รสี งู ศักด์ิ เป็นระเบียบ ถ่อมตน สามารถลดความตื่นเตน้ และชว่ ยทาให้มสี มาธิ 2) สีสม้ ให้ความร้สู ึก ความอบอุ่น ความสดใส รอ้ น มีชีวิตชวี า วยั รุน่ ความ คึกคะนอง การปลดปลอ่ ย ความเปรี้ยว ควรเลอื กใชร้ ่วมกบั สอี น่ื เพื่อไม่ใหเ้ ว็บเพจรสู้ กึ ร้อนเกนิ ไป 3) สีเหลืองเป็นสีแห่งการแผ่กระจาย อานาจบารมี ความร่าเริง ความเบิก บานสดช่นื เรา้ อารมณ์ และเรยี กร้องความสนใจให้ความรูส้ กึ แจม่ ใส ชวี ิตใหม่ ความสดใหม่ 4) สีเขียวเป็นสีท่ีทาให้มีความรู้สึกร่มเย็น สร้างความรู้สึกเย็นสบาย ช่วย ผ่อนคลายความเครยี ดได้ให้ความรู้สกึ สงบ เงียบ ร่มร่ืน การพักผ่อน การผ่อนคลาย ธรรมชาติ ความ ปลอดภยั ปกติ ความสขุ ความสุขุม เยอื กเย็น 5) สีขาวให้ความรู้สึก แสงสว่าง อ่อนโยน บริสุทธ์ิ สะอาด สดใส เบาบาง เปิดเผย การเกดิ ความรกั ความหวงั ความจรงิ ความเมตตา ความศรัทธา ความดีงาม 6) สีเทาให้ความรู้สึก ความสงบ ความเงียบ สุภาพ เศร้า อาลัย ท้อแท้ ความลึกลบั ความหดหู่ ความชรา สุขุม ถอ่ มตน แต่สรา้ งความร้สู กึ หมน่ หมองได้

9 2.3 โปรแกรมทีใ่ ชใ้ นการพฒั นาระบบ 2.3.1 โปรแกรม Adobe Photoshop CS6 โปรแกรม Adobe Photoshop cs6 เป็นโปรแกรมในตระกูล Adobe ที่ใช้สาหรับ ตกแต่งภาพถ่ายและภาพกราฟิก ได้อย่างมีประสิทธิภาพ ไม่ว่าจะเป็นงานด้านสิ่งพิมพ์ นิตยสาร และ งานด้านมัลติมีเดีย อีกทั้งยังสามารถ retouching ตกแต่งภาพและการสร้างภาพ ซ่ึงกาลังเป็นที่นิยม สูงมากในขณะนี้ เราสามารถใชโ้ ปรแกรม Photoshop ในการตกแต่งภาพการใส่ Effect ต่าง ๆให้กับ ภาพ และตัวหนังสือ การทาภาพขาวดา การทาภาพถ่ายเป็นภาพเขียน การนาภาพมารวมกัน การ Retouch ตกแต่งภาพต่าง โปรแกรม Adobe Photoshop เป็นโปรแกรมทีส่ ามารถท่จี ะเรยี นรู้ได้ด้วย ตนเองและทาการแก้ไขภาพ ตกแตง่ ภาพ ซอ้ นภาพในรูปแบบต่างๆได้อย่างงา่ ยดาย และสิ่งทข่ี าดไม่ได้ นั้นก็คือ การใส่ข้อความประกอบลงในภาพด้วย และเน่ืองด้วย Adobe Photoshop มีการพัฒนา โปรแกรมมาอย่างต่อเน่ือง ทาให้จาเปน็ ต้องศึกษาคาส่ังต่างๆให้เข้าใจ แตท่ ี่สาคัญ เม่อื ไดเ้ รยี นรู้การใช้ คาสั่งในเวอรช์ ันเกา่ แตก่ ย็ งั คงสามารถนาไปประยกุ ต์ใช้กบั เวอร์ชันใหม่ๆ ได้ด้วย 2.3.1.1 วิธกี ารตดิ ต้งั โปรแกรม Adobe Photoshop cs6 รูปท่ี 2.5 แสดงเขา้ ไปยงั โฟลเดอร์ของ Photoshop ตามภาพ ดบั เบลิ้ คลิก Set-up รูปที่ 2.6 แสดงการตรวจสอบก่อนทาการติดตั้งโปรแกรม รูปที่ 2.7 แสดงโปรแกรมตรวจสอบเสรจ็ แล้วจะเข้าสูห่ นา้ จอ เลอื ก Try

10 รูปท่ี 2.8 แสดงการกรอก Serial Number แลว้ คลิกทปี่ ุ่ม คลิก Accept รปู ที่ 2.9 แสดงการเลือกการตดิ ตัง้ ของโปรแกรม ใหเ้ ลอื ก Installs รปู ที่ 2.10 แสดงหน้าการโหลดของโปรแกรม

11 รูปที่ 2.11 แสดงการเสรจ็ สิ้นการติดตงั้ โปรเเกรม Adobe Photoshop CS6 2.3.1.2 การเร่มิ ตน้ ใช้งาน Adobe Photoshop CS6 การเร่ิมตน้ ใชง้ าน Adobe Photoshop CS6 เบือ้ งต้นหลังจากทีท่ าการ ตดิ ตง้ั Adobe Photoshop CS6 เรยี บรอ้ ยแล้ว กส็ ามารถเรยี กใช้งานโปรแกรมดว้ ยวิธีการตอ่ ไปน้ี 1) Click Mouse ทป่ี ่มุ 2) เลือกคาสงั่ All Program > Adobe Photoshop CS6 รปู ท่ี 2.12 แสดงขัน้ ตอนการเข้าส่โู ปรแกรม Adobe Photoshop CS6

12 รูปท่ี 2.13 แสดงหนา้ ตา่ งโปรแกรม Adobe Photoshop CS6 รอสกั ครู่จะปรากฏหน้าต่างการทางาน Menu Tool Toolb Palettes รปู ท่ี 2.14 แสดงหน้าจอหลกั การทางานของโปรแกรม Adobe Photoshop CS6

13 2.3.1.3 เครือ่ งมอื ตา่ งๆ (Toolbox) รูปที่ 2.15 แสดงเคร่อื งมือตา่ งๆ (Toolbox) Adobe Photoshop CS6 ตารางที่ 2.1 ตารางอธิบายเครื่องมือTool ตา่ งๆ สญั ลกั ษณ์ ความหมาย Marquee Tool เปน็ การเลอื กแบบสเ่ี หล่ียมผืนผา้ , วงกลม, แถวขนาด 1 Pixel หรือคอลัมน์ 1 Pixel Move Tool ใชเ้ พอื่ เลอ่ื นสว่ นท่ีเลือก หรอื ไว้เลื่อน Layer และ Guide ตา่ งๆ Lasso Tool จะใชเ้ พ่อื สรา้ ง Selection แบบอิสระ, แบบ Polygonal (ตามจดุ ท่ีคลกิ ) และ Magnetic (ดงึ เข้าหาขอบรปู ภาพ) Magic Wand Tool ใช้เลือกพื้นที่บรเิ วณทม่ี ีสเี ดยี วกนั Crop T Crop Tool ใช้ในการเลอื กบางสว่ นของรูปภาพ Slice Tool ใช้ในการสรา้ ง Slice Slice Selection Tool ใช้เลอื ก Slice ท่คี ุณสร้างขนึ้ มา

14 ตารางที่ 2.1 ตารางอธบิ ายเครอ่ื งมือTool ตา่ งๆ (ต่อ) สญั ลกั ษณ์ ความหมาย Healing Brush Tool ใช้ในการระบายสี เพือ่ ซอ่ มแซมรปู ภาพให้สมบรู ณ์แบบ Patch Tool ใชเ้ ฉพาะในบริเวณทีเ่ ลือกไว้เทา่ นน้ั เพอื่ ให้เกดิ ความสมบรู ณ์ของรูปภาพ โดยใช้ ลวดลาย หรือใชส้ ว่ นทเี่ ลอื กในภาพเป็นตน้ ฉบบั Brush Tool ใชใ้ นการวาดเสน้ Brush ต่างๆ Brush Tool ใชใ้ นการวาดเสน้ Brush ต่างๆ Pencil Tool ใช้ในการวาดเสน้ ทีม่ ีขอบชัดเจน Clone Stamp Tool ใช้กอ็ ปปีร้ ูปโดยอาศยั รปู ภาพตน้ ฉบบั Pattern Stamp Tool ใชเ้ พอื่ วาดรูปโดยใชบ้ างส่วนของรปู ภาพท่มี อี ย่เู ปน็ ตน้ ฉบับ Pattern Stamp Tool ใชเ้ พ่ือวาดรปู โดยใชบ้ างส่วนของรปู ภาพทีม่ ีอยูเ่ ปน็ ตน้ ฉบบั Art History Brush Tool ใชใ้ นการวาดรปู จาก State หรือ Snapshot ของรูปนโ้ี ดยอาศยั รูปแบบของ Stoke ทม่ี ีสไตลห์ ลากหลาย ช่วยใหส้ ไตล์ ของภาพดูตา่ งออกไป Eraser Tool ใช้ลบรูปภาพหรือลบบางสว่ นของพกิ เซลและทาการเก็บสว่ นตา่ งๆ เปน็ State ตา่ งๆ ใน History Palette Magic Eraser Tool ใชล้ บรูปภาพบรเิ วณท่ีมสี เี ดยี วกันใหก้ ลายเป็นพนื้ ท่ีโปรง่ ใส (Transparent) โดย การคลกิ เพยี งคร้ังเดียว Background Eraser Tool ใชล้ บรูปภาพบางสว่ นใหก้ ลายเป็นพน้ื ที่โปร่งใสโดยการลากเมาส์ Gradient Tools ใชเ้ พอ่ื ไล่สรี ะหว่างสหี ลายๆ สี ในแบบตา่ งๆ Straight-line, Radial, Angle, Reflected และ Diamond Paint Bucket Tool ใช้ในการเติมสี Fill ในบรเิ วณที่เป็นสีเดยี วกนั ด้วยสขี อง Foreground Burn Tool ใชล้ ดความสวา่ งทาให้รปู ภาพดมู ืดลง

15 ตารางที่ 2.1 ตารางอธิบายเครอื่ งมือTool ต่างๆ (ตอ่ ) สญั ลกั ษณ์ ความหมาย Sponge Tool Sponge Tool ใชเ้ ปลี่ยนสใี นสว่ นตา่ งๆ ของรปู ภาพ โดยการปรบั คา่ ความเขม้ สี Path Selection Tool ใชเ้ พื่อเลอื ก Shape หรอื Path เพ่ือแสดง Anchor Paint, Direction Line และ Direction Paint Path Selection Tool ใช้เพอื่ เลือก Shape หรอื Path เพ่ือแสดง Anchor Paint, Direction Line และ Direction Paint Path Selection Tool ใชเ้ พอ่ื เลอื ก Shape หรือ Path เพ่ือแสดง Anchor Paint, Direction Line และ Direction Paint Type Tool ใช้ในการสร้างตวั หนงั สือลงบนรูปภาพ Type Mask Tool ใชส้ รา้ ง Selection เป็นรูปร่างตวั หนังสอื Pen Tools ใช้ในการลากเสน้ Path ซง่ึ สามารถดัดโค้งตามรปู ภาพได้ Custom Shape Tool ใชเ้ ลือกรูปภาพเลือกรปู ภาพทมี่ รี ปู รา่ งเฉพาะจาก Custom Shape List Animations Tool ใช้เขยี นโน๊ต หรอื แนบเสยี งไปกบั รปู ภาพได้ Eyedropper Tool ใชใ้ นการดูดสจี ากรูปภาพเพ่อื ใชเ้ ป็นตน้ แบบของสีกบั งานชนิ้ อน่ื ๆ Measure Tool ใช้วดั ระยะห่าง, ตาแหนง่ และมมุ องศาระหวา่ งภาพ Hand Tool ใช้เล่ือนภาพท่ีอยใู่ นหนา้ ตา่ งเดียวกนั Zoom Tool ใชใ้ นการขยายและยอ่ สว่ นการแสดงภาพบนหนา้ จอ

16 2.3.1.4 การเปดิ ไฟล์ภาพ (Open) 1) คลิกทเ่ี มนูคาสง่ั File ที่แถบ Menu bar จากน้ันเลอื กคาสัง่ Open เปดิ มาใชง้ าน รปู ที่ 2.16 แสดงการเปิดไฟล์ภาพ (Open) 2) จะปรากฏ Dialog แสดงรายชอื่ ไฟลต์ า่ ง ๆ ดงั ภาพ เพือ่ เลอื กไฟล์ท่ตี ้องการ 3) คลกิ เลอื กไฟล์ที่ต้องการเปดิ ใช้งาน จากนน้ั คลิกปุ่ม Open Open รปู ท่ี 2.17 แสดงการเปดิ ไฟล์ภาพ (Open) 2.3.1.5 การสรา้ งไฟลใ์ หม่ (New) 1) คลกิ ทเ่ี มนูคาสั่ง File ที่แถบ Menu bar จากน้นั เลือกคาสัง่ New

17 รปู ที่ 2.18 การสรา้ งไฟล์ใหม่ (New) 2) จะปรากฏ Dialog สาหรับกาหนดคุณสมบตั ิต่าง ๆ ของไฟล์ภาพดงั นี้ รปู ท่ี 2.19 แสดงการกาหนดขนาดของกระดาษ - Name คอื ชือ่ ของช้ินงาน สามารถกาหนดใหมเ่ องได้ ชือ่ น้จี ะไประบุที่ช่ือ ไฟลต์ อ่ ไป - Preset คือ ขนาดงานท่ีโปรแกรมกาหนดมาให้ ซ่ึงมีหลากหลายขนาด ให้เลือก หรอื สามารถกาหนดเองจากช่อง Width และ Height ได้ - Width คอื ขนาดความกวา้ งของงาน (จากซา้ ยไปขวา) โดยกาหนดหน่วย และขนาดได้เอง จากรปู คือ 1024 Pixels - Height คือ ขนาดความกว้างของงาน (จากบนลงล่าง) โดยกาหนดหนว่ ย และขนาดไดเ้ อง จากรูป คอื 768 Pixels - Resolution คือ ความละเอียดของภาพ โดยใส่ตัวเลขค่าความละเอียด ของภาพ เช่น งานเว็บหรือรูปท่ีแสดงบนคอมพิวเตอร์เท่ากับ 72 pixels/inch งานส่ิงพิมพ์เท่ากับ 150-200 pixels/inch

18 - Color Mode คือ โหมดสีของภาพ ซ่ึงประกอบไปด้วย โหมดสี Bitmap, Grayscale, RGB Color, CMYK Color, Lab Color - Background Contents คือ สีพ้ืนหลังของภาพ เม่ือเร่ิมช้ินงานใหม่ มดี ังน้ี - White กาหนดใหส้ ีพ้นื หลงั เปน็ สีขาว - Background Color กาหนดใหส้ พี น้ื หลังเปน็ สเี ดยี วกับ Background - Transparent ไมม่ ีพื้นหลงั 3) หลังจากกาหนดคณุ สมบัติต่าง ๆ ให้คลกิ ปุ่ม OK เพ่ือเร่ิมช้ินงานใหม่ 2.3.1.6 การบนั ทึกข้อมูลลงบนไฟล์ (Save) หลังจากตกแต่งไฟล์ภาพเรียบร้อย จะต้องเก็บบันทึกข้อมูลลงบนไฟล์ (Save) สาหรบั การเรยี กใช้งานในครง้ั ตอ่ ไป โปรแกรมมีการบันทกึ ขอ้ มูลลงบนไฟล์ (Save) อยู่ 3 ลักษณะ คือ 1) Save บันทกึ ไฟล์ในรปู แบบ (Format) ปกติ 2) Save As บนั ทกึ ไฟลใ์ นรูปแบบ (Format) อื่น ๆ ได้ เชน่ JPEG, BMP, GIF 3) Save for Web บนั ทกึ ไฟล์ในรูปแบบ (Format) สาหรบั การ ใชง้ านบนเว็บ เชน่ ไฟล์ Html และไฟลร์ ูปภาพ JPEG, GIF, PGN เปน็ ต้น 2.3.1.7 การใช้งานของ Save และ Save As 1) คลิกที่เมนูคาสั่ง File ท่ีแถบ Menu bar จากน้ันเลือกคาส่ัง Save หรือ Save As หรอื Save for Web & Devices รูปที่ 2.20 แสดงการบันทึกขอ้ มูลลงบนไฟล์ (Save)

19 2) จะปรากฏ Dialog สาหรบั กาหนดคุณสมบตั ติ า่ ง ๆ ของไฟลภ์ าพ ดงั นี้ รปู ท่ี 2.21 แสดงการบันทึกขอ้ มลู ลงบนไฟล์ (Save) - ชื่อไฟล์ (File Name) - รปู แบบของไฟล์ (Format) - กาหนดคุณสมบัติของการบันทกึ ไฟล์ (Save Options) 3) As a Copy บนั ทกึ ไฟล์เป็นช่ืออ่นื รูปแบบ (Format) อ่ืน ขณะที่ไฟลเ์ ดิม กาลงั เปิดใชง้ าน 4) Layers จะเกบ็ คุณสมบัติของ Layer ตา่ ง ๆ 5) Use Proof setup เกบ็ ค่าโหมดสีทจ่ี ะใชแ้ สดงสีของภาพก่อนจะพิมพ์ 6) Thumbnail กาหนดให้ไฟลท์ บ่ี ันทึก (Save) สามารถแสดงภาพตวั อย่างใน Dialog ของการเปิดไฟล์ 7) Use Lower Case Extension กาหนดให้นามสกลุ ไฟลเ์ ปน็ อักษรตัวเล็ก 8) หลังจากกาหนดคุณสมบัติตา่ ง ๆ ให้คลกิ ปุ่ม Save เพื่อบนั ทกึ ข้อมลู 2.3.1.8 การปรับค่าความสว่าง/ความคมชดั (Brightness/Contrast) การปรบั ความสวา่ ง-ความมดื ของภาพ และการตัดกันของสีที่ชดั เจนขนึ้ น้นั สามารถ ทาไดโ้ ดยใชค้ าสงั่ Brightness/Contrast โดยเลอื กคลิกท่ี Image > Adjust > Brightness/Contrast Training Service Original Brightness Contrast รูปที่ 2.22 แสดงการปรับคา่ ความสวา่ ง/ความคมชดั

20 2.3.2 ขั้นตอนการตดิ ตัง้ โปรแกรม Microsoft Office 2010 โปรแกรมไมโครซอฟต์เวิร์ด ซึ่งเป็นโปรแกรมประมวลผลคาแบบพิเศษ ช่วยให้ สรา้ งเอกสารแบบมืออาชีพอย่างมีประสิทธิภาพและประหยัด เช่น เหมาะกับงานดา้ นการพิมพ์เอกสาร ทุกชนิด สามารถพิมพ์เอกสารออกมาเป็นชุด ๆ ซ่ึงเอกสารอาจเป็นจดหมาย บันทึกข้อความ รายงาน บทความ ประวัติย่อ และยังสามารถตรวจสอบ ทบทวน แก้ไข ปรับปรุงความถูกต้องในการพิมพ์ เอกสารได้อย่างง่ายดาย สามารถตรวจสอบ สะกดคา และหลักไวยากรณ์ เพิ่มตาราง เพิ่มกราฟิก ในเอกสารได้อย่างง่ายดาย หรือเพ่ิมเติมข้อมูลได้ตลอดเวลา สามารถใช้ลักษณะของการจัดพิมพ์ด้วย คอมพิวเตอร์แบบตั้งโต๊ะ (Desktop Publishing) เพื่อสร้างโบชัวร์ (Brochures) ด้านสื่อโฆษณา (Advertisements) และจดหมายขา่ ว (Newsletters) ไดด้ ว้ ยโปรแกรมประมวลผลคา (word Processor) 2.3.2.1 การตดิ ตง้ั Microsoft Office 2010 มขี ั้นตอนดังนี้ 1) ในโฟลเดอร์ที่เกบ็ ไฟล์ติดตัง้ Microsoft Office Professional Plus 2010 Beta ใหด้ ับเบลิ คลิกไฟล์ ProfessionalPlus.exe 2) ในหน้าเดอะล็อกบ็อกซ์ User Account Control (UAC) ให้คลิก Continue รูปท่ี 2.23 แสดงหน้าต่าง User Account Control 3) รอจนโปรแกรมเตรียมการเซ็ตออัพ ระบบแล้วเสร็จ จากนั้นในหน้า Read the Microsoft Software License Terms ให้เลือกเช็คบ็อกซ์หน้า I accept the terms in this agreement เสร็จแล้วคลิก Continue

21 รปู ที่ 2.24 แสดงหนา้ ตา่ ง Microsoft Software License Terms 4) ในหนา้ Choose the installation you want โปรแกรมจะให้เลือกว่า จะติดต้ังแบบDefault หรือทาการติดตั้งโดยปรับแต่งเอง ในท่ีน้ีเลือก Install Now เพื่อติดต้ังแบบ Default รปู ท่ี 2.25 แสดงหนา้ ตา่ ง Choose the installation 5) ในหน้าเดอะล็อกบ็อกซ์ Installation Progress รอจนการติดต้ัง โปรแกรมแล้วเสรจ็

22 รปู ท่ี 2.26 แสดงหน้าต่าง Installation Progress 6) ในหน้าเดอะล็อกบ็อกซ์ถัดไปคลิก Close เพื่อจบการติดต้ัง Microsoft Office Professional Plus 2010 Beta รปู ที่ 2.27 แสดงหน้าต่าง Successfully Installed

23 2.3.2.2 เร่มิ ต้นใชง้ าน Microsoft Office 2010 1) หลังจากทาการติดต้ัง Microsoft Office 2010 เสร็จเรียบร้อยแล้ว จากนนั้ ใหค้ ลิก Start 2) คลกิ Start แล้วคลิก All Programs คลกิ Microsoft Office แล้วคลิก Microsoft Word 2010 รปู ท่ี 2.28 หน้าต่าง Office Professional Plus 2010 2.3.3 โปรแกรม Adobe Dreamweaver CS6 เป็นโปรแกรมที่ช่วยในการสร้างเว็บไซต์ และเหมาะสมสาหรับนักพัฒนาเว็บไซต์ มือใหม่ โดยสามารถนารูปภาพหรือข้อความมาประกอบเป็นเว็บเพจ อีกท้ังยังเพ่ิมลูกเล่นต่าง ๆ เช่น เสียง ภาพเคล่ือนไหว วีดิโอ ซ่ึงไม่จาเป็นต้องรู้หลักการเขียนโปรแกรมด้วยภาษา HTML ก็สามารถ สรา้ งเวบ็ ไซตไ์ ด้ เป็นโปรแกรมแกไ้ ข HTML พฒั นาโดยบริษทั แมโครมีเดีย (ปจั จุบันควบกจิ การรวมกับ บริษัท อะโดบีซิสเต็มส์) ดรีมวีฟเวอร์มีทั้งในระบบปฏิบัติการแมคอินทอช และไมโครซอฟท์วินโดวส์ ดรมี วีฟเวอร์ยงั สามารถทางานบนระบบปฏิบัตกิ ารแบบยนู ิกซ์ ผ่านโปรแกรมจาลองอย่าง WINE ได้

24 2.3.3.1 ขั้นตอนการตดิ ตั้งโปรแกรม Adobe Dreamweaver CS6 รูปที่ 2.29 แสดงการเปดิ โฟลเดอร์โปรแกรม Adobe Dreamweaver CS6 รูปที่ 2.30 แสดงการดับเบิ้ลคลิกทไ่ี ฟล์ Set-up.exe จากนน้ั โปรแกรมอา้ งมีการแจ้งเตือนใหเ้ รา restart เราเลือก Ignore เพอื่ ดาเนนิ การต่อ ดังรปู รปู ที่ 2.31 แสดงโปรแกรมจะทาการตรวจสอบก่อนทาการติดตง้ั โปรแกรม

25 รปู ที่ 2.32 แสดงเมอื่ โปรแกรมตรวจสอบเสรจ็ แลว้ จะเขา้ สู่หน้าจอข้อกาหนดในการตดิ ตั้งโปรแกรม ใหเ้ ราคลิก Accept รปู ท่ี 2.33 แสดงการกรอก Serial Number แลว้ คลิกทป่ี มุ่ Next

26 รปู ท่ี 2.34 แสดงจะเขา้ สหู่ นา้ Option ของโปรแกรม ให้เลอื ก Installs รูปที่ 2.35 แสดงรอให้โปรแกรมติดต้งั จนเสรจ็

27 รูปท่ี 2.36 แสดงหนา้ เม่อื ติดต้ังเสร็จจะปรากฏหน้าจอดงั ภาพ ให้เราคลิก Close 2.3.3.2 ขั้นตอนการเปิดโปรแกรม Adobe Dreamweaver CS6 รปู ที่ 2.37 แสดงหนา้ ต่างการเปดิ โปรแกรม Dreamweaver โดยเขา้ ไปที่ เมนู Start > Apps > Adobe Dreamweaver CS6

28 รปู ท่ี 2.38 แสดงเมอ่ื เปิดโปรแกรมครั้งแรก จะพบหน้าจอดังภาพ ใหค้ ลิก Select All >> OK รปู ที่ 2.39 แสดงหนา้ ต่างการเขา้ สู่หน้าจอ Welcome Screen

29 1) Welcome Screen เป็นเครื่องมือสาหรับช่วยเลอื กขนั้ ตอนเรมิ่ ตน้ ใน การใช้งานโปรแกรมโดยตวั เลือกจะแบ่งออกเปน็ กลุ่มๆ ดังภาพ - หมายเลขท่ี 1 Open a Recent Item เปดิ ไฟลท์ เ่ี คยใช้โดยคลิกเลอื ก จากรายชื่อท่แี สดงอยู่ (เรยี งลาดับจากที่เคยเปิดหลังสดุ เปน็ ตน้ ไปหรือคลิก Open เพื่อเปิดไฟล์อน่ื ๆ) - หมายเลขที่ 2 Create New สร้างไฟล์ใหม่ โดยถ้าคลิก HTML จะเปน็ การสรา้ งเวบ็ เพจพืน้ ฐานแต่ถา้ คลกิ หัวข้ออืน่ จะเปน็ การสรา้ งเว็บเพจหรือไฟลต์ ามชนิดนัน้ ๆ - หมายเลขที่ 3 Top Features (videos) เปน็ เส้นทางลดั สาหรับเข้าดู รายละเอียดและเทคนิคในการใชง้ านต่าง ๆ ของโปรแกรมผ่านทางเวบ็ ไซต์ของ Adobe - หมายเลขท่ี 4 เปิดดูคาแนะนาการใชโ้ ปรแกรม - หมายเลขท่ี 5 ดาวน์โหลดโปรแกรมหรือดูข้อมูลบนเว็บไซต์ของ Adobe - หมายเลขที่ 6 คลิก ออปช่ันนี้หากไม่ต้องการแสดง Welcome Screen อกี ในครงั้ ตอ่ ไป รปู ท่ี 2.40 แสดงหนา้ ตา่ งส่วนประกอบของหนา้ จอโปรแกรม 2) ส่วนประกอบของหน้าจอโปรแกรม Adobe Dreamweaver ประกอบ ไปด้วยส่วนต่าง ๆ ดงั น้ี - แถบเมนูหลัก (Menu bar) เป็นแถบรวมรวมคาสั่งทั้งหมดของ โปรแกรม โดยแบ่งคาส่งั ทัง้ หมดออกเป็นหมวดหมตู่ ามลกั ษณะของการใชง้ าน

30 - แถบเคร่ืองมอื (Insert Bar) เปน็ แหลง่ รวมเครื่องมือซง่ึ ใช้ในการ วางออบเจ็กต์ชนิดต่าง ๆ ลงบนหนา้ เวบ็ เพจ เช่น ขอ้ ความ รปู ภาพ ลงิ ค์ รูปเคลือ่ นไหวเปน็ ตน้ โดยจะ แบง่ เป็นกลุ่มคาส่ังเพ่อื ใหใ้ ช้งานได้สะดวก ซึ่งจะประกอบดว้ ยกลุม่ คาส่งั ดังน้ี - Common ใช้วางออบเจ็กต์ท่ีต้องใช้งานบ่อย ๆ เช่น รูปภาพ ตาราง ไฟลม์ ัลตมิ ีเดีย เป็นตน้ - Layout ใช้วางออบเจ็กต์ท่ีใช้จัดโครงสร้างของเว็บเพจ เช่น ตาราง เฟรม และ AP element (หรอื เลเยอร)์ - Forms ใช้วางออบเจ็กต์ท่ีใช้ในการสร้างแบบฟอร์มรับข้อมูล เช่น ช่อง รบั ข้อความ ปมุ่ ตวั เลือกต่าง ๆ เป็นตน้ - Data ใช้วางคาสั่งที่ใช้การจัดการฐานข้อมูล และดึงข้อมูล จาก ฐานขอ้ มูลมาแสดงบนเวบ็ เพจ - Spry ใช้วางออบเจ็กต์ท่ใี ชเ้ ทคโนโลยขี อง Ajax - jQuery Mobile ใช้สร้างหน้าเพจที่แสดงบนอุปกรณ์มือถือและ แทบ็ เล็ตโดยใชเ้ ทคโนโลยแี บบ jQuery - InContext Edting ใช้สร้างออบเจ็กต์ทช่ี ่วยอานวยความสะดวก ให้ผใู้ ชง้ านสามารถแก้ไขเวบ็ เพจได้ - Text ใช้สาหรับจัดปรับแต่งหรือจัดรูปแบบของตัวอักษรและ ข้อความสะดวกให้ผู้ใช้งาน เช่น หัวเรื่อง ตัวหน้า ตัวเอียง รวมทั้งแทรกสัญลักษณ์พิเศษต่าง ๆ เช่น $ (Dollar) © (Copyright) เป็นตน้ - Favorites เป็นกลุ่มท่ีสามารถเพ่ิมปุ่มคาสั่งท่ีใช้บ่อยจากกลุ่มอื่น ๆ เข้ามาเกบ็ ไวใ้ ชง้ านเอง เพอ่ื ความสะดวกในการใชง้ าน 3) แถบ Document Toolbar ประกอบไปด้วยปุ่ม และป๊อปอัพเมนูที่ใช้ กาหนดรูปแบบมุมมองของ Document Window ท่ีเรากาลังทางานอยู่และ คาสั่งต่างๆท่ีใช้ทางาน กับ Document Window อย่างเช่น การแสดงเว็บเพจท่ีสร้างขึ้นในเว็บบราวเซอร์ หรือ การกาหนด ออปชั่นของ Document Window เปน็ ต้น - พ้นื ทสี่ ร้างงาน (Document Windows) คอื สว่ นท่ีใชส้ าหรับใส่ เนื้อหาและจัดองค์ประกอบของเว็บเพจ วิธีใช้งานวินโดว์น้ีจะคล้ายกับที่คุณใช้โปรแกรม เวิร์ดโปรเซสเซอร์ทั่วไป เช่น พิมพ์ข้อความ วางภาพกราฟิก และสร้างตารางข้อมูลโดยเน้ือหาต่างๆ จะแสดงออกมาคล้ายกับท่ีปรากฏบนบราวเซอร์ ซ่ึงสามารถเลือกเปิดพื้นที่สร้างงานได้ด้วยกัน 4 มุมมอง

31 ตารางที่ 2.2 ตารางอธิบายเครือ่ งมือในแถบ Document Toolbar สัญลกั ษณ์ ความหมาย แสดงเวบ็ เพจในมุมมองโค้ด แสดงเวบ็ เพจในมุมมองโค้ดและออกแบบ แสดงเว็บเพจในมุมมองออกแบบ แสดงผลโค้ด (ทางานรว่ มกับมมุ มอง Live View) ตรวจสอบความถูกต้องในการแสดงผลบนบราวเซอร์ท่เี ลอื ก ตรวจสอบความถูกตอ้ งของการใช้สไตล์ CSS ในส่วนตา่ ง ๆ บน เว็บเพจโดย ใช้รว่ มกบั พาเนล CSS Styles แสดงเมนสู าหรบั เลือกเปิดบราวเซอรเ์ พื่อทดสอบเวบ็ เพจ (คีย์ลดั F12) แสดงเมนซู ่งึ ประกอบดว้ ยคาส่ังจัดการไฟล์ ตรวจสอบความถูกต้องในการแสดงผลบนบราวเซอร์ทีเ่ ลือก แสดงเมนสู าหรับเปิด/ปดิ ลักษณะพิเศษของแท็กหรอื คาสัง่ บางอย่าง เชน่ ตาราง,เฟรม และ CSS เพอื่ ช่วยให้การแก้ไขเว็บเพจสะดวกขึ้น ปรับปรุงการแสดงผลของเว็บเพจ ใชก้ าหนดชอ่ื หรือคาอธิบายเวบ็ เพจ รปู ที่ 2.41 แสดงมุมมองโค้ด (Code View)

32 รูปท่ี 2.42 มมุ มองโคด้ และออกแบบ (Code and Design View หรือ Split) รปู ท่ี 2.43 แสดงมุมมองออกแบบ (Design View) รูปท่ี 2.44 แสดงมุมมองแสดงหน้าเวบ็ เหมือนดูบนบราวเซอร์ (Live View)

33 1) กลุ่มพาเนลต่างๆ (Panel Groups) พาเนลเป็นกรอบเล็ก ๆ ท่ีรวบรวม เครอื่ งมือต่าง ๆ สาหรบั ใชท้ างานเฉพาะเร่ืองไว้ เช่น พาเนล CSS Styles ใช้จดั การกบั สไตล์ CSS และ พาเนล Files ใช้จัดการกับไฟล์และโฟลเดอร์ภายในเว็บไซต์ใน Dreamweaver ประกอบไปด้วย พาเนลจานวนมาก ซึ่งสามารถเปิด/ปิดได้โดยเลือกคาส่ัง Window แล้วเลือกช่ือพาเนลน้ัน หรือ กดคียล์ ดั ท่ีแสดงดา้ นหลังชือ่ พาเนล ดงั รูป รูปท่ี 2.45 แสดงมมุ มองกลุ่มพาเนล 2) ไม้บรรทัด (Ruler) ไม้บรรทัดจะปรากฏท่ีด้านบนและด้านซ้ายของวินโดว์ Document เพ่ือให้สาหรับช่วยกาหนดตาแหน่งหรือขนาดขององค์ประกอบต่าง ๆ ท่ีวางบนเว็บเพจ สาหรบั การจัดการตา่ ง ๆ กบั ไม้บรรทัดจะทาได้ดงั น้ี 1. ซอ่ น/แสดงไมบ้ รรทัด เลอื กคาสั่ง View > Rulers > Show (คียลดั Ctrl +Alt +R) 2. ยา้ ยตาแหน่ง 0,0 ใหค้ ลิกลากรปู ไปวางตาแหน่งใหม่ 3. ยา้ ยตาแหน่ง 0,0 กลับมาทม่ี ุมซา้ ยบนสดุ ให้ดับเบลิ คลกิ ท่ี หรือคลกิ ขวาบน ไม้บรรทดั แล้วคลิกเลอื กคาสัง่ Reset Originเปลย่ี นหนว่ ยวัดบนไม้บรรทัดให้คลิก ขวาบนไม้บรรทัด แลว้ เลือกหนว่ ย ซง่ึ มีดงั น้ี - Pixels พกิ เซล - Inches นวิ้ - Centimeters เซนติเมตร

34 รูปที่ 2.46 แสดงหน้าต่างไม้บรรทดั 2.3.4 โปรแกรม Adobe Flash CS6 โปรแกรม Flash เป็นซอฟต์แวร์ท่ีช่วยในการสร้างส่ือมัลติมีเดีย, ภาพเคล่ือนไหว (Animation), ภาพกราฟิกที่มีความคมชัด เน่ืองจากเป็นกราฟิกแบบเว็คเตอร์(Vector), สามารถเล่น เสียงและวีดิโอ แบบสเตริโอได้, สามารถสร้างงานให้โต้ตอบกับผู้ใช้(Interactive Multimedia) มีฟังก์ชั่นสาหรับการเขียนโปรแกรม (Action Script) และยังทางานในลักษณะ CGI โดยเช่ือมต่อกับ การเขียนโปรแกรมภาษาอื่นๆ ได้มากมาย เช่น ภาษา PHP, JSP, ASP, ASP.NET, C/C++, C#, C#.NET, VB, VB.NET, JAVAและอ่ืนๆ โดยเฉพาะข้อดีของโปรแกรม Flash คือ ความสามารถในการ บีบอัดไฟล์ให้ มีขนาดเล็ก มีผลทาให้แสดงผลได้อย่างรวดเร็ว นอกจากน้ันยังแปลงไฟล์ไปอยู่ใน ฟอรแ์ มตอ่ืนไดห้ ลากหลาย เช่น avi, mov, gif, wav, emf,eps, ai, dxf, bmp, jpg, gif, png เปน็ ต้น โปรแกรม Flash เริ่มมีชื่อเสียงประมาณปี พ.ศ. 2539 จนถึง ปัจจุบันได้ถูกนามา ใช้งานอย่างแพร่หลาย โดยเฉพาะเทคโนโลยีเว็บ ทาให้การนาเสนอทาได้อย่างน่าสนใจ นอกจากน้ัน โปรแกรม Flash ยังสามารถสร้างแอพพลิเคชน่ั (Application) เพื่อใช้ทางานต่างๆ รองรับการใชง้ าน กับอุปกรณ์ท่ี เชื่อมต่อกับระบบเครือข่ายอินเตอร์เน็ต และทางานได้กับหลายๆ แฟลตฟอร์ม (Platform) 2.3.4.1 การเปดิ ใช้งานโปรแกรม Adobe Flash CS6 เขา้ สู่โปรแกรม Flash CS6 เมอื่ เปิดโปรแกรมครงั้ แรก โดยคลิกเมาสท์ ีป่ ุ่ม Start แล้ว เลือกคาส่ง All Programs->Adobe>Adobe Flash CS6 Professional จะปรากฏ หนา้ ต่าง ให้เราเลือกใช้งานโปรแกรม Flash CS6 ดงั น้ี

35 รปู ที่ 2.47 แสดงการเขา้ สโู่ ปรแกรม Adobe Flash CS6 รูปที่ 2.48 แสดงหน้าต่างเริม่ การทางานของ Adobe Flash CS6 รปู ที่ 2.49 แสดงหน้าตา่ งสว่ นประกอบของโปรแกรม Adobe Flash CS6

36 รปู ที่ 2.50 แสดงหนา้ ตา่ งสว่ นประกอบของโปรแกรม Adobe Flash CS6 1) ส่วนประกอบของโปรแกรม Adobe Flash CS6 มดี งั น้ี - ปุ่มแสดงหรือซ่อน Timeline - เลเยอร์ เฟรมจะต้องวางบนเลเยอร์ - ปมุ่ ซอ่ นและแสดงข้อมลู บนเลเยอร์ - ป่มุ อนญุ าตให้แก้ไขและปอ้ งการแก้ไขขอ้ มูลบนเลเยอร์ - เพลยเ์ ฮดหวั อา่ นเฟรมแตล่ ะชอ่ ง - หมายเลขประจาเฟรม - เฟรม เปรยี บเหมือนช่องเก็บเหตกุ ารณ์ของมูฟว่ี - ปุ่มสรา้ งเลเยอรใ์ หม่ - ป่มุ สร้างโฟลเดอร์เลเยอร์ - ปุ่มลบเลเยอร์ - ปุ่มเซน็ เตอร์เฟรม - ปุ่มโอเนียน สกิน - ป่มุ โอเนียน สกนิ แบบโครงรา่ ง - ปุ่มแก้ไขเฟรมหลายเฟรมพร้อมกัน - บอกตาแหน่งหมายเลขเฟรมในขณะทางาน - บอกความเร็วการแสดงก่เี ฟรมต่อวนิ าที - เวลาท่ีใชใ้ นการมูฟว่ี รูปท่ี 2.51 แสดงหนา้ ตา่ งเมนูบาร์ (Menu Bar) แถบเมนูแสดงรายการคาสั่งต่างๆ

37 รปู ที่ 2.52 แสดงหนา้ ตา่ งทลู บอ๊ กซ์ (Toolbox) 2) Timeline หน้าต่างแสดงเสน้ ควบคุมเวลาสาหรบั การนาเสนอผลงาน ประกอบด้วย ส่วนทางานเกีย่ วกบั Layer และ Timeline เราแบ่งไทมไลน์เปน็ 2 ส่วนใหญ่ ๆ ไดแ้ ก่ - ส่วนแสดงเลเยอร์ (Layer) ซึ่งแต่ละเลเยอร์เปรียบเหมือนแผนใส ท่ีสามารถวางภาพหรือออบเจ็กต์ได้ โดยแต่ละเลเยอร์นั้นแยกเป็นอิสระต่อกันแต่ประกอบกันเป็นชัน งานเดียว (เราจะกลา่ วถึงเรอ่ื งเลเยอร์เพ่มิ เติมภายหลงั ) - ส่วนเฟรม (Frame) ที่แสดงช่องเฟรมต่างๆ ซึ่งทางานเหมือนกับเฟรมที่ ประกอบกันเป็นภาพยนตร์โดยเม่ือมีการนาเฟรมเหล่าน้ีมาแสดง อย่างต่อเน่ือง ก็จะทาให้เกิด ภาพเคลื่อนไหว ท้ังนี้ Frame จะแสดงผล ทีละเฟรม โดยจะมีหัวอ่าน (Playhead) ที่เป็นเส้นสีแดง คอยบอกตาแหน่งวา่ งกาลงั ทางานอยทู่ ่ีเฟรมใด รปู ที่ 2.53 แสดงหน้าตา่ ง Timeline - เราสามารถเปิด/ปิดไทมไลน์น้ีได้โดยคาส่ังView >Thmeline ให้มี เคร่ืองหมายถูกอยู่หน้าคาว่า Timeline เพ่ือเปิดไทมไลน์ และใช้คาสั่ง View > Timeline อีกครั้ง ยกเลิกเคร่ืองหมายถูกเพ่ือปิดไทมไลน์ซึ่งเราอาจเปรียบการทางานของไทมไลน์เหมือนกับม่วนฟิลม์ ในขณะทส่ี เตจคอื ส่วนที่แสดงแต่ละเฟรม ในม้วนฟิลม์น้นั ตามลาดับทก่ี าหนดไว้

38 - เราสามารถแบ่งไฟล์ชิ้นงานที่สร้างเป็นส่วนย่อยๆ ท่ีเรียกว่าฉากหรือซนี (Scene) โดยในโดยในมูฟวี่หนึ่งๆ จะประกอบดว้ ยซีนหรือหลายซีนก็ได้ เนือ่ งจากจะทางานได้ทีละซีน นั้นจึงต้องเลือกซีนท่ีจาทางานด้ยโดยคลิกท่ีเมนู Window > Other Panels > Scene หรือเลือกใช้ ปุ่มการแทรกซนี สามารถแทรกได้ โดยเลือกท่เี มนคู าสั่ง Inserts > Scene1 รปู ท่ี 2.54 แสดงหนา้ ต่างพื้นทวี่ ่างสาหรบั วางวตั ถแุ บบชว่ั คราว และพ้นื ที่การทางาน รปู ท่ี 2.55 แสดงหนา้ ตา่ งคณุ สมบัตติ ่าง ๆ ของออบเจ็กต์

39 รปู ท่ี 2.56 แสดงหน้าต่างเลอื กใช้สีและผสมสตี ามท่ตี ้องการ รปู ที่ 2.57 แสดงหน้าตา่ งควบคมุ เกยี่ วกับชุดวตั ถขุ องโปรแกรม 2.3.5 โฮสตง้ิ (Hosting) เว็บโฮสต้ิงเป็นคอมพิวเตอร์ขนาดใหญ่ (เซิร์ฟเวอร์) ซึ่งเก็บเว็บไซต์ของพวกเขา เป็นพื้นที่ในการใช้งานในอินเทอร์เน็ต สาหรับเว็บไซต์ท่ัวไป โฮสติ้งมีลักษณะท่ีเปรียบเทียบได้ เหมือนกับ ฮาร์ดดิสก์ ในเครื่องคอมพิวเตอร์ ฉะน้ันถ้ามีพ้ืนท่ีการใช้งานโฮสต้ิงที่มาก ก็จะสามารถเก็บ ไฟล์, รูปภาพ, เอกสาร และอ่ืนๆ ได้มากตามไปด้วยเช่นกัน จึงอาจเรียกได้อีกหลายแบบ เช่น โฮสต้ิง เว็บโฮสตงิ้ โฮส แต่ทงั้ หมดกม็ คี วามหมายเหมอื นกัน โฮสต้ิง จะมีการติดต้ังโปรแกรมต่างๆ ที่ทาหน้าที่หลากหลาย เช่น WebServer, FTP, Database, DNS, E-mail, Subdomain, Cronjob และอื่นๆ ซึ่งผู้ที่ต้องการสร้างระบบโฮสต้ิ งเอง อาจจะมีค่าใช้จ่ายสูง หากต้องการแค่จะมีเว็บไซต์เล็กๆ ก็เพียงเช่าบริการโฮสต้ิง และ จ่าย ค่าบริการรายปีแค่ไม่กี่บาท และข้อดขี องระบบโฮสติ้งคือ ผู้ให้บรกิ ารจะต้งั คา่ ทุกอยา่ งให้ท่านพร้อมใช้ งาน ท่านมีหน้าที่แค่อัพโหลดไฟล์เว็บไซด์ที่ท่านไดส้ ร้างไว้ข้ึนระบบ โฮสติ้ง และสามารถทาให้เว็บไซด์ ของท่านทางานได้ทันทีหรือจะง่ายย่ิงกว่านั้น ถ้าท่านใช้ระบบเว็บไซด์สาเร็จรูปไม่ต้องเขียนเว็บไซด์ ขึ้นมาเอง ก็สามารถกดติดต้ังเว็บไซด์สาเร็จรปู ได้จากระบบจัดการโฮสติ้ง (DirectAdmin) เพียงไม่ก่ี คลิก ก็ได้เว็บไซด์ทันที แต่ถ้าท่านต้องการทาเว็บไซด์ขนาดใหญ่ ใช้พ้ืนท่ีเยอะ คนเข้าใช้งานเยอะ

40 อาจจะใช้บริการโฮสติ้งไม่ได้ ท่านต้องเช่าบริการแบบ VPS ซึ่งราคาอาจจะเพิ่มสูงขึ้น แต่ก็จะมีความ เปน็ สว่ นตวั และรองรับผเู้ ขา้ ใชง้ านเยอะๆ ได้ รปู ที่ 2.58 แสดงการหาเว็บโฮสต้งิ ทดี่ ตี ้องคานึงถึงส่ิงใดบา้ ง 2.3.6 โดเมนเนม (domain name) โดเมนเนม ความหมายโดยทั่วๆ ไป หมายถึง ชือ่ เว็บไซต์ ชอ่ื บล็อก ซึง่ เปน็ ชอ่ื ท่ตี ั้ง ข้ึนเพ่อื ใหจ้ ดจาและนาไปใชง้ านได้ง่ายท้ังในการเขา้ ชมผา่ นบราวเซอรข์ องผูใ้ ชท้ ัว่ ไป ยังรวมไปถึงผ้ดู ูแล ระบบโดเมนเนมซีสเทม ท่ีสามารถแก้ไขไอพีแอดเดรสของช่ือโดเมนเนมน้ันๆ ได้ทันทีโดยที่ผู้ใช้ทั่วไป ไมจ่ าเป็นต้องรบั รหู้ รือจดจาไอพแี อดเดรสที่มีการเปลย่ี นแปลง เครอื่ งคอมพิวเตอร์ทที่ าหนา้ ที่เผยแพร่ เว็บไซต์ จะมีโดนเมนเนมเฉพาะไม่ซา้ กับใคร หลังจากจดโดนเมนเนมเป็นท่ีเรียบร้อยแล้ว สิ่งสาคัญลาดับถัดมานั้นก็คือ โฮสติ้ง (Hosting) หรือ ที่เก็บข้อมูลเว็บไซต์นั้นเอง ซึ่งโฮสติ้งแต่ละที่จะมี DNS หรือ Name Server ที่ทางผู้ ใหบ้ ริการโฮสต้ิง จะเป็นคนกาหนดและแจ้งใหท้ ราบเพื่อเอาไปใสใ่ หโ้ ดมเมนเนมของเว็บไซต์ที่สร้างข้นึ รูปท่ี 2.59 แสดงหน้าต่างโดเมนเนมเม่ือเราจดทะเบียนแล้ว 2.3.7 โปรแกรม Spss โปรแกรม SPSS (Statistical Package for the Social Science for Windows) เป็นโปรแกรมท่ีมีประสิทธิภาพสูง ในการวิเคราะห์ข้อมูลทางสถิติ และการจัดการข้อมูลต่าง ๆ ผู้ใช้ โปรแกรมสามารถวิเคราะห์ข้อมูลโดยใช้สถิติประเภทต่าง ๆ และแสดงผลการวิเคราะห์ข้อมูลออกมา ในรูปของตาราง หรือแผนภูมิชนิดตา่ ง ๆ ได้ทั้งแบบ 2 มิติ และ 3 มิติ การใช้งานโปรแกรมไม่ซับซ้อน เหมาะสาหรับผู้ใช้ที่ต้องการประมวลผลข้อมูลที่ถูกต้องแม่นยาและรวดเร็ว แต่ก็ยังมีคนอยู่จานวนไม่ น้อยที่ยังมีแนวคิดที่ว่า การวิเคราะห์ข้อมูลด้วยโปรแกรม SPSS เป็นเร่ืองที่ยากและต้องใช้ความรูท้ าง สถติ ิเปน็ อย่างดีบ้าง โอกาสในการนาไปใช้ในการปฏิบัตงิ านค่อนข้างน้อยบ้าง แตผ่ ้เู ขยี นไม่เห็นด้วยกับ แนวคิดดังกล่าวข้างต้น เนื่องจากการใช้โปรแกรม SPSS ไม่จาเป็นต้องมีความรู้พื้นฐานทางสถิติเป็น

41 อย่างดีเสมอไป แต่ขอให้มีความรู้พื้นฐานเก่ียวกับการนาเสนอข้อมูลด้วยสถิติเบ้ืองต้น เช่น ค่าความถี่ (Frequency) ค่าร้อยละ (Percentage) ค่าเฉล่ียเลขคณิต (Mean) และค่าส่วนเบี่ยงเบนมาตรฐาน (Standard Deviation) เป็นต้น โดยส่วนใหญ่แล้วการใช้งานโปรแกรม SPSS มักจะเก่ียวข้องกับการ วเิ คราะห์ขอ้ มลู ในงานวิจยั แตก่ ็ไมเ่ สมอไป กลา่ วคือ SPSS สามารถนาไปประยกุ ต์ใชใ้ นการดาเนนิ ชีวิต ได้เป็นอย่างดี เช่น การทาบัญชีและคานวณรายรับรายจ่ายในครอบครัว ใช้สาหรับการวิเคราะห์เพ่ือ ประเมินการปฏบิ ตั ิงานของบุคลากรในหนว่ ยงาน วิเคราะห์ทศั นคติ และความพงึ พอใจต่อสงิ่ ต่าง ๆ นอกจากนี้ SPSS ยังสามารถนามาใช้เป็นเคร่ืองมือที่ช่วยในการตัดสินใจของผู้บริหาร หรือบุคคลใน ระดบั อื่น ๆ อยู่ทว่ี ่าจะรู้จกั ประยุกตใ์ ช้เทคโนโลยที ่ีทนั สมยั และมปี ระสิทธภิ าพดังกล่าวน้นั อย่างไร รปู ที่ 2.60 แสดงหนา้ ต่างของโปรแกรม SPSS รูปที่ 2.61 แสดงหน้าตา่ งการกรอกขอ้ มลู จากแบบสอบถาม

42 รูปท่ี 2.62 แสดงหน้าต่างการหาค่ารอ้ ยละ 2.3.8 Google Form Google Form เป็นส่วนหน่ึงในบริการของกลุ่ม Google Docs ที่ช่วยให้เราสร้าง แบบสอบถามออนไลน์ หรือใช้สาหรับรวบรวมข้อมูลได้อย่างรวดเร็ว โดยที่ไม่ต้องเสียค่าใช้จ่าย ในการใชง้ าน Google Form ผ้ใู ช้สามารถนาไปปรับประยุกต์ใช้งานไดห้ ลายรปู แบบอาทิ เชน่ การ ทาแบบฟอร์มสารวจความคิดเห็น การทาแบบฟอร์มสารวจความพึงพอใจ การทาแบบฟอร์ม ลงทะเบียน และการลงคะแนนเสียง เป็นต้นทั้งนี้การใช้งานกูเกิ้ลฟอร์มน้ัน ผู้ใช้งานหรือผู้ท่ีจะ สรา้ งแบบฟอร์มจะต้องมบี ัญชีของ Gmail หรือ Account ของ Google เสยี ก่อน ผู้ใช้งานสามารถ เข้าใชง้ านสร้างแบบฟอร์มผ่าน Web Browser ได้เลยโดยทไ่ี มต่ อ้ งตดิ ต้ังโปรแกรมใดๆ ทัง้ สิ้น รูปท่ี 2.63 แสดงหน้าต่างแบบฟอร์มทใ่ี ชเ้ กบ็ ข้อมูลใน Google Form

43 รูปที่ 2.64 แสดงหน้าต่างของการออกแบบ 2.4 พาณชิ ยอ์ ิเลก็ ทรอนกิ ส์ ความหมายของอิเล็กทรอนิกส์พาณิชยอ์ ิเล็กทรอนกิ ส์ หมายถงึ การทาธุรกรรมทกุ รูปแบบ โดยครอบคลุมถึงการซ้ือขายสินค้า/บริการ การชาระเงิน การโฆษณาโดยผ่านส่ืออิเล็กทรอนิกส์ ประเภทต่าง ๆ โดยเฉพาะเครือขา่ ยทางอินเทอร์เน็ตกรมส่งเสรมิ การส่งออก กระทรวงพาณชิ ย์ ระบุว่า พาณิชย์อิเล็กทรอนิกส์ หมายถึง การดาเนินธุรกิจทุกรูปแบบที่เกี่ยวข้องกับการซ้ือขายสินค้าและ บริการผ่าน และระบบส่ือสารโทรคมนาคมหรือสื่ออิเล็กทรอนิกส์องค์กรการค้าโลก ให้คาจากัดความ ไว้ว่า พาณิชย์อิเล็กทรอนิกส์ หมายถึง การผลิต การกระจาย การตลาด การขาย หรือการขนส่ง ผลติ ภณั ฑ์และบริการโดยใชส้ ่ืออเิ ลก็ ทรอนกิ ส์ E-Commerce คืออะไร Electronic Commerce หรือ E-Commerce คือ การซื้อขาย สินค้าหรือบริการโดยส่งข้อมูลด้วยสื่ออิเล็กทรอนิกส์ผ่านทางเครือข่าย เช่น Internet ถ้าผู้ใช้มีเครื่อง คอมพิวเตอร์ คู่สายโทรศัพท์ โมเด็ม และเป็นสมาชิกของบริการ Internet ก็สามารถทาการค้าผ่าน ระบบเครือข่ายได้E-Commerce เป็นการผสมผสานระหว่างเทคโนโลยี Internet กับการจาหน่าย สินค้าและบริการ โดยสามารถนาเสนอข้อมูลท่ีเก่ียวข้องกับตัวสินค้าหรือบริการผ่านทาง Internet สู่คนทั่วโลกภายในระยะเวลาอันรวดเร็ว ทาให้การดาเนินการซื้อขายอย่างมีประสิทธิภาพ และ กอ่ ให้เกิดรายไดใ้ นระยะเวลาอันสน้ั ความสาคญั ของพาณิชย์อเิ ล็กทรอนิกส์เนื่องมาจากอัตราการเติบโตของการ ใชอ้ ินเตอร์เน็ต และการเพิ่มขึ้นของเว็บไซต์ทางธุรกิจที่มีอย่างต่อเน่ือง ทาให้การประกอบธุรกิจโดยเฉพาะธุรกิจบน อินเตอร์เน็ตเป็นช่องทางการตลาดขนาดใหญ่ของโลกไร้พรมแดนท่ีสามารถเข้าถึงกลุ่มผู้บริโภค เปา้ หมายไดโ้ ดยตรงอย่างรวดเร็ว ไรข้ ีดจากัดของเร่ืองเวลาและสถานท่ี การแข่งขันทางการคา้ เสรีและ ระหว่างประเทศท่ีต้องแข่งขันและชิงความได้เปรียบกันท่ี “ความเร็ว”ท้ังการนาเสนอสินค้าผ่านส่ือ อิเล็กทรอนิกส์ มีความสาคัญอย่างย่ิงในสังคมเศรษฐกิจฐานความรู้ พาณิชย์อิเล็กทรอนิกส์จึงเป็นอีก ทางเลือกหนึ่งของการประกอบธุรกิจในปัจจุบัน และได้รับความนิยมเพ่ิมขันเป็นลาดับกรอบแนวคิด ของพาณชิ ยอ์ เิ ลก็ ทรอนกิ สก์ รอบแนวคิดของพาณิชย์อเิ ล็กทรอนิกสป์ ระกอบดว้ ย 4 สว่ นใหญ่ ๆ คอื - แอพพลิเคชั่นของพาณชิ ยอ์ เิ ล็กทรอนิกส์ - ปัจจยั ทางการบรหิ าร - โครงสร้างพนื้ ฐาน

44 - ประเภทสนิ คา้ ของพาณิชย์อเิ ล็กทรอนกิ ส์ สาหรับสินค้าท่ีซื้อขายในพาณิชย์อิเล็กทรอนิกส์ จาแนกได้ดังนี้สินค้าที่มีลักษณะเป็น ข้อมูลดิจิทัล (Digital Products) สินค้าท่ีไม่ใช่ข้อมูลดิจิทัล (Non-Digital Products) ประเภทของ อีคอมเมิร์ซ มีการแบ่งประเภทอีคอมเมิร์ซกันหลายแบบ เช่น แบ่งอีคอมเมิร์ซเป็น 5 ประเภท แบ่ง อีคอมเมิร์ซเป็น 3 ประเภท แบ่งอีคอมเมิร์ซเป็น 6 ส่วน และแบ่ง อีคอมเมิร์ซตามประเภทสินค้าเป็น 2 ประเภทเป็นต้นอีคอมเมิร์ซ 5 ประเภท ถ้าจะแบ่งอีคอมเมิร์ซเป็น 5 ประเภทก็ได้ดังต่อไปนี้ ธุรกิจ กบั ผ้ซู ือ้ ปลีกหรือบีทูซี (B-to-C = Business-to-Consumer) คือประเภทที่ผซู้ ้ือปลีกใช้อินเตอร์เน็ตใน การซื้อสินค้าจากธุรกิจที่โฆษณาอยู่ในอินเตอร์เน็ต ธุรกิจกับธุรกิจหรือบีทูบี (B-to-B = Business-to- Business) คือ ประเภท ท่ีธุรกิจกับธุรกิจติดต่อซื้อขายสินค้ากันผ่านอินเตอร์เน็ตธุรกิจกับรัฐบาลหรือ บีทูจี (B-to-G = Business-to-Government) คือประเภทที่ธุรกิจติดต่อกับหน่วยราชการรัฐบาลกับ รัฐบาลหรือจีทูจี (G-to-G = Government to Government) คือ ประเภทที่หน่วยงานรัฐบาล หน่วยงานใดหน่วยงานหน่งึ ติดต่อกับหนว่ ยงานรัฐบาลอีกหนว่ ยงานหน่ึงผู้บริโภคกับผู้บริโภคหรือซีทูซี (C-to-C = Consumer-to-Consumer) คือ ประเภทท่ีผู้บริโภคประกาศขายสินค้าแล้วผู้บริโภคอีก รายหนึ่งก็ซื้อไป เช่น ท่ีอีเบย์ดอทคอม (Ebay.com) เป็นต้น ซึ่งผู้บริโภคสามารถจ่ายเงินให้กันทาง บตั รเครดิตได้ อีคอมเมริ ์ซ 3 ประเภท ถา้ จะแบง่ อีคอมเมริ ์ซเป็น 3 ประเภทก็อาจจะแบ่งได้ ดังต่อไปน้ี อีคอมเมิร์ซระหว่างผู้บริโภคกับธุรกิจ หรือ บีทูซี (B-to-C = Business-to-Consumer) ซ่ึงอาจจะมี ตวั อย่างดงั ตอ่ ไปน้ี – การติดต่อสื่อสารระหว่างผู้บริโภคกับธุรกิจโดยใช้ไปรษณีย์อิเล็กทรอนิกส์ วิดีโอ คอนเฟอเรน็ ซ์ กล่มุ สนทนา กระดานขา่ ว เปน็ ต้น – การจัดการด้านการเงิน ช่วยให้ผู้บริโภคสามารถจัดการเร่ืองการเงินส่วนตัว เชน่ ฝาก-ถอน เงนิ กับธนาคาร ซ้ือขายหนุ้ กับผคู้ ้าหุ้น เชน่ อีเทรด (www.etrade.com) เป็นตน้ – ซื้อขายสินค้าและข้อมูล ช่วยให้ผู้บริโภคสามารถซ้ือขายสินค้าและข้อมูลผ่าน อนิ เตอร์เน็ตไดโ้ ดยสะดวกอีคอมเมริ ์ซภายในองค์กรหรอื แบบอนิ ทราออร์ก (Intra-Org E-commerce) คือ การใช้อีคอมเมิร์ซในการช่วยให้บริษัทหรือองค์ใดองค์กรหนึ่งสามารถปรับปรุงการทางานภายใน และให้บริการลูกค้าไดด้ ีขึ้น ดังตัวอยา่ งตอ่ ไปนี้ – การติดต่อส่ือสารภายในองค์กรจะสะดวกรวดเร็วจะได้ผลดีข้ึน โดยใช้ไปรษณีย์ อิเล็กทรอนิกส์ วดี ีโอคอนเฟอเรนซ์ และปา้ ยประกาศ เปน็ ต้น – การจดั พิมพเ์ อกสารทางอิเล็กทรอนิกส์ หรอื อีพบั ลซิ ซงิ (Electronic Publishing) ช่วยให้บริษัทสามารถออกแบบเอกสาร จัดพิมพ์เอกสาร และแจกจ่ายเอกสารได้สะดวกรวดเร็ว และ ใช้ค่าใช้จ่ายน้อย ไม่ว่าจะเป็นคู่มือข้อกาหนดสินค้า (Product Specifications) รายงานการประชุม เป็นตน้ ท้งั น้ีโดยผ่านเว็บ – การปรับปรุงประสิทธิภาพพนักงานขาย การใช้อีคอมเมิร์ซแบบน้ีช่วยปรับปรุง การส่ือสารระหว่างฝ่ายผลิตกับฝ่ายขาย และระหว่างฝ่ายขายกับลูกค้า ทาให้ได้ประสิทธิภาพดีข้ึน อีคอมเมิร์ซระหว่างองค์กรหรือแบบอินเตอร์ออร์ก (Inter-Org E-commerce) ซึ่งก็คือแบบเดียวกับ แบบท่เี รยี กวา่ บที บู ี (Business to Business) ทงั้ น้โี ดยมีตวั อย่างต่อไปนี้