web site

11/0/25 91 ความรู้เบอื ้ งต้น เกี่ยวกบั เว็บไซต์ เป็ นบริการหน่งึ ในอนิ เทอรเ์ นต็ ทีไ่ ด้รบั ความนิยมเป็ นอยา่ งมาก เป็ นระบบทพี่ ฒั นาข้ึนเพอื่ เชอ่ื มโยงข้อมูลทอี่ ยบู่ น เครือ่ งคอมพวิ เตอร์ตา่ งๆ โดยใช้โปรโตคอลเป็น Http (Hypertext Transfer Protocol) ในการเรยี กใช้เอกสารผา่ นโปรแกรม ประเภทเวบ็ บราวเซอร์Watcharirat kohsang 11/0/2591

บทที่ 2 ความร้เู บือ้ งต้นเกยี่ วกับเวบ็ ไซต์1. ความร้เู บ้อื งต้นเกีย่ วกบั เวบ็ ไซต์ 1.1. เวลิ ด์ ไวด์ เวบ็ (World wide web หรือ www) เป็นบริการหน่ึงในอินเทอร์เน็ตทไ่ี ดร้ ับความนิยมเป็นอยา่ งมาก เป็นระบบท่ีพฒั นาข้นึ เพอื่ เชื่อมโยงขอ้ มลู ท่ีอยูบ่ นเคร่ืองคอมพิวเตอร์ตา่ งๆ โดยใชโ้ ปรโตคอลเป็น Http (Hypertext Transfer Protocol) ในการเรียกใชเ้ อกสารผา่ นโปรแกรมประเภทเวบ็ บราวเซอร์ ผใู้ ชส้ ามารถเชือ่ มโยงเอกสารหน่ึงไปยงั อีกเอกสารหน่ึงท่ีอย๋ใู นคอมพิวเตอร์เคร่ืองเดียวกนั หรือตา่ งเครื่องกนั ท่ีอยู๋คนละประเทศไดอ้ ยา่ งรวดเร็ว เครือขา่ ยของเอกสารเหลา่ น้ีประกอบกบั เทคโนโลยที เ่ี กยี่ วขอ้ งในการนาเสนอข้อมลู น้ีบนอนิ เตอร์เน็ตรู้จกั โดยทวั่ ไปวา่ World wide web (www) หรือ W หรือ Web และเครื่องคอมพิวเตอร์ทใ่ี ห้บริการเว็บเพจเรียกวา่ เวบ็ ไซต์ (Website) 1.2. ส่วนประกอบของหน้าเวบ็ เพจ สว่ นประกอบของหนา้ เวบ็ เพจแบง่ ออกเป็น สว่ น ดงั น้ี รูปสว่ นประกอบของหน้าเวบ็ เพจ

1. ส่วนหวั ของหน้า(Page Header) จะอยบู่ ริเวณบนสุดของหน้าเวบ็ เพจ เป็นสว่ นที่แสดงช่อื เวบ็ ไซต์ โลโก้แบนเนอร์โฆษาลงิ ค์สาหรับขา้ มไปยงั หนา้ เว็บอื่น 2. ส่วนของเน้ือหา (Page Body) จะอยบู่ ริเวณตอนกลางของหน้าเวบ็ เพจ ซ่งึ เป็นสว่ นที่แสดงเน้ือหาในหนา้ เวบ็เพจน้นั โดยประกอบดว้ ยขอ้ ความ ขอ้ มลู ภาพเคลอ่ื นไหว เป็นตน้ 3. ส่วนทา้ ยกระดาษ (Page Footer) จะอยบู่ ริเวณดา้ นลา่ งสุดของหนา้ เวบ็ เพจ สว่ นมากใชส้ าหรบั ลงิ คข์ อ้ ความส้ัน ๆ เขา้ ใจงา่ ย หรือจะมชี อื่ เจา้ ของเวบ็ ไซต์ อีเมล์แอดเดรสของผดู้ แู ลเว็บเว็บไซตส์ าหรับติดตอ่ กบั ทางเว็บไซต์ 1.3. รปู แบบของเว็บไซต์ รูปแบบของเวบ็ ไซต์สามารถแบง่ ไดเ้ ป็น รูปแบบหลกั ๆ คือ 1. Static Website Static Wedsiteหมายถงึ เวบ็ ไซต์ทส่ี รา้ งดว้ ยภาษา HTML ธรรมดา และบนั ทึกเป็นไพลน์ ามสกลุ.html เน้ือหาขอ้ ความ รูปภาพในหน้าเวบ็ เพจน้นั จะไปตามท่เี ราเขียนกาหนดไว้ 2. Dynamic Website Dynamic Website หมายถึง เวบ็ ไซต์ทห่ี นา้ เวบ็ เพจสามารถเปล่ียนแปลงขอ้ มลู เองไดโ้ ดยไมต่ อ้ งเขยี นแตล่ ะหนา้ เวบ็ เพจเอง เชน่ กระดาษขา่ ว (Webboard), ระบบสืบคน้ ขอ้ มลู เวบ็ ไซต์ รูปแบบน้ีจะถูกสร้างดว้ ยภาษาสคริปต์ (Script) แบบ Sever Side Script เชน่ PHP,ASP,ASP.NET,JSP และขอ้ มลู อืน่ ๆ ไพล์เอกสารท่ไี ดจ้ ะมีนามสกลุ .php, .asp เป็นตน้ และมกั จะมกี ารตดิ ตอ่ กบั ฐานข้อมลู เพอื่ บนั ทกึ ขอ้ มลู ลงในฐานขอ้ มลู หรือนาขอ้ มลู จากฐานขอ้ มลู ข้นึ มาแสดงผลเป็นหนา้ เว็บเพจ 1.4. แนวทางหลักการออกแบบเว็บไซต์ แนวทางหลกั การออกแบบเว็บไซต์สามารถแบง่ ออกเป็นขน้ั ตอนตา่ ง ๆ เพือ่ ใหเ้ หมาะสมกบั ผูเ้ ร่ิมตน้ ใชเ้ ป็นแนวทางในการสรา้ งและพฒั นาเวบ็ ไซต์ ตลอดจนการเชื่อมโยงเวบ็ เพจแตล่ ะหน้าเขา้ ด้วยกนั 1. การวางแผน การวางแผนนับวา่ มคี วามสาคญั มากในการสร้างเวบ็ ไซต์ เพอ่ื ใหก้ ารทางาน ในขน้ั ตอนตา่ งๆ มีแนวทางท่ชี ดั เจนและสามารถปฏบิ ัตไิ ดต้ ามทีต่ ้งั เป้ าไว้ 2. การกาหนดเนอ้ื หาและจุดประสงค์ของเวบ็ ไซต์ การกาหนดเนื้อหาและจุดประสงคข์ องเวบ็ ไซต์ที่จะสรา้ งนับเป็นสิ่งสาคญั อยา่ งมากในการเร่ิมตน้ สรา้ งเวบ็ ไซต์เลยทเี ดยี วเพือ่ ใหเ้ ห็นภาพวา่ เราตอ้ งการนาเสนอขอ้ มลู แบบใด เมอ่ืสามารถกาหนดจุดประสงค์ไดแ้ ลว้ เงื่อนไขเหลา่ น้ีจะเป็นตวั กาหนดโครงสร้างรูปแบบรวมถึงหน้าตาและสีเวบ็ ไซตข์ องเราไดด้ ว้ ย 3. การกาหนดกลุ่มเป้ าหมาย เพ่ือสร้างและออกแบบเวบ็ ไซตไ์ ดร้ ับความนิยม การกาหนดกลมุ่ เป้ าหมายในการเขา้ มาชมเวบ็ ไซตก์ น็ ับวา่ มคี วามสาคญั ไมน่ ้อย 4. การเตรยี มข้อมูล เนื้อหาหรือขอ้ มลู จดั วา่ เป็นส่ิงที่เชญิ ชวนให้ผอู้ น่ื เขา้ มาเยี่ยมชมเวบ็ ไซต์ และตอ้ งทราบวา่

ขอ้ มลู ขา่ วสารตา่ ง ๆ สามารถนามาจากแหลง่ ใดบา้ ง และท่สี าคญั ขออนุญาติเจา้ ของบทความกอ่ นเพือ่ ป้ องกนั เรื่องลขิ สิทธ์ิ 5. การเตรียมส่ิงต่างๆทจ่ี าเป็น การออกแบบเวบ็ ไซต์ตอ้ งอาศัยความสามารถตา่ งๆ เชน่ โปรแกรมสาหรบั สร้างเวบ็ ไซต์ ภาพเคล่ือนไหว มลั ติมเี ดีย การจดโดเมนเนม การหาผใู้ ห้บริการรับฝากเวบ็ ไซต์ (Web Hosting) เป็นตน้ 6. การออกแบบหน้าเว็บหลัก หนา้ แรกของเวบ็ เพจถือเป็นหนา้ สาหรับต้อนรับผชู้ ม เป็นหน้าเริ่มตน้ ของเวบ็ ไซต์เมอื่ ผชู้ มเปิดเขา้ มาจะพบหนา้ น้ีเป็นอนั ดับแรกโดยปกติหนา้ แรกจะมอี งค์ประกอบหลกั คือ โลโก องคก์ ร แถวช่ือองค์กรรูปภาพ โฆษณา ตวั อยา่ งการออกแบบหนา้ เวบ็ หลกั 7. การจัดโครงสร้างข้อมลู เมอ่ื ไดข้ อ้ มลู ตา่ งๆ เชน่ กาหนดเน้ือหาและจดุ ประสงคข์ องเวบ็ ไซต์ การกาหนดกลมุ่ เป้ าหมาย การเตรียมขอ้ มลู การเตรียมสิ่งตา่ งๆ ที่จาเป็นจากข้นั แรกเรียบรอ้ ยแลว้ ในขน้ั ตอนน้ีจะตอ้ งจดั ระบบเพือ่ ใช้เป็นกรอบสาหรบั การออกแบบและดาเนินการในข้นั ตอนตอ่ ไป ซ่ึงมรี ายละเอยี ดดงั ตอ่ ไปน้ี - การใชร้ ะบบนาผเู้ ขา้ ชมไปยงั สว่ นตา่ ง ๆ ภายในเวบ็ ไซตห์ รือทีเ่ ราเรียกวา่ ระบบนาทาง(Navigation) - องคป์ ระกอบที่ตอ้ งนามาใช้ เชน่ สื่อมลั ตมิ เี ดีย ภาพกราฟิก แบบฟอร์มตา่ ง ๆ - การกาหนดรูปแบบและลกั ษณะของเวบ็ เพจ - การกาหนดฐานขอ้ มลู ภาษาสคริปต์หรือแอปพลิเคชนั ทีน่ ามาใชใ้ นเวบ็ ไซต์ - การบริการเสริมตา่ ง ๆ - การออกแบบเวบ็ ไซต์ นบั เป็นขน้ั ตอนในการออกแบบรูปรา่ ง โครงสรา้ งและลกั ษณะทางดา้ นกราฟิกของหน้าเวบ็เพจโดย โปรแกรมทเ่ี หมาะสมในการออกแบบคือ Photoshop หรือ Fireworks ซ่งึ จะชว่ ยในการสรา้ งเคา้ โครงของหนา้เวบ็ และองค์ประกอบตา่ ง ๆ เชน่ ชอื่ เวบ็ ไซต์ โลโก้ รูปไอคอน ป่มุ ไอคอน ภาพเคล่ือนไหว แบนเนอร์โฆษณา เป็นตน้ ในการออกแบบเวบ็ ไซต์น้นั ยงั ตอ้ งคานึงถึงสีสนั และรูปแบบของสว่ นประกอบตา่ ง ๆท่ไี มใ่ ชภ่ าพกราฟิก เชน่ ขนาดของตวั อกั ษร สีของขอ้ ความ สีพ้ืน ลวดลายของเส้นกรอบเพ่อื ความสวยงามและดงึ ดูดผเู้ ยี่ยมชมดว้ ย

ตวั อยา่ งการออกแบบเว็บไซตเ์ กยี่ วกบั รา้ นเสื้อผา้ 1.5. กระบวนการพฒั นาเว็บไซต์ การท่จี ะสร้างพฒั นาเวบ็ เพจและนาเวบ็ ไซต์เขา้ สูร่ ะบบเวลิ ด์ ไวด์ เวบ็ ใหค้ นอน่ื เขา้ มาเยี่ยมชมไดน้ ้นั มกี ระบวนการท่ีผพู้ ฒั นาเวบ็ ไซต์จะตอ้ งศกึ ษาและปฏิบตั ิตาม ดงั น้ี 1. การวางแผนการทางาน การวางแผนการทางานเปรียบเหมอื นเข็มทศิ ท่ีจะช้ที างให้เรารู้วา่ ควรจะเดินทางไปในทิศทางใดเพ่อื ไมใ่ ห้หลงทางการสร้างเวบ็ ไซต์กเ็ หมอื นกนั จาเป็นตอ้ งมกี ารวางแผนการทางานให้รอบด้านกอ่ นทีจ่ ะเร่ิมลงมอื ทาโดยมหี ลักที่ตอ้ งกาหนดในการวางแผน ดงั น้ี 1.1 ระยะเวลาการทางาน เป็นการกาหนดชว่ งเวลาที่จะใชใ้ นการสรา้ งเวบ็ 1.2 ทีมงานหรือผรู้ ว่ มงาน ปกติการสร้างเวบ็ ตอ้ งทางานเป็นทีมอยา่ งนอ้ ยตอ้ งมผี เู้ ชี่ยวชาญ ฝ่าย คอื ผเู้ ช่ยี วชาญดา้ นภาษา HTML หรือโปรแกรมสรา้ งเวบ็ เพจผเู้ ช่ยี วชาญดา้ นการออกแบบและตกแตง่ ภาพ และผเู้ ช่ียวชาญดา้ นเนื้อหาหรือบรรณาธิการ 1.3 งบประมาณ เป็นการกาหนดคา่ ใชจ้ า่ ย 1.4 อุปกรณ์หรือเครื่องมอื ชว่ ยงาน เชน่ เครื่องคอมพวิ เตอร์ เคร่ืองสแกนเนอร์และรูปภาพประกอบเวบ็ เพจ เป็นตน้ 1.5 ปัญหาและอุปสรรค์ 2. การรวบรวมและวเิ คราะห์โครงสร้าง เป็นขน้ั ตอนหน่ึงท่ตี อ่ จากการวางแผน เป็นการแผนงานไปปฏิบตั ิ โดยการรวบรวมขอ้ มลู ท่ีจาเป็นต้องใชใ้ นการ

สรา้ งเวบ็ ตามหวั ขอ้ ท่เี ลอื กไว้ ทง้ั เนื้อหา ภาพ เสียงและภาพเคลื่อนไหว เกบ็ รวบรวมเป็นไฟลข์ อ้ มูล หรือใสแ่ ฟ้ มแยกเป็นหมวดหมู่ เพ่อื ความสะดวกในการนามาใชง้ าน 3. การออกแบบและการสร้างเว็บไซต์ เป็นข้นั ตอนการนาขอ้ มลู ท้งั หมดมาสร้างเป็นเวบ็ ไซต์ดว้ ยภาษา HTML หรือเครื่องมอื ในการสรา้ งเวบ็ อื่นๆ หลกัสาคญั ในการออกแบบและสร้างเวบ็ คอื 1. กาหนดจดุ ประสงค์เวบ็ ไซต์ โดยวางเป้ าหมายของผเู้ ขา้ ชมวา่ จะเป็นกลุม่ ใด 2. เลอื กเวบ็ เบราวเ์ ซอร์ เป็นการเลือกเวบ็ เบราวเ์ ซอร์ท่ใี ชแ้ สดงผลเวบ็ ไซต์ จะไดก้ าหนดขนาดกวา้ ง ยาว และลกั ษณะการวางองคป์ ระกอบเวบ็ ให้สวยงามและแสดงผลไดเ้ ร็ว 3. วางโครงรา่ งของเวบ็ ไซต์ กาหนดโครงรา่ งวา่ มที ง้ั หมดกเี่ วบ็ เพจแตล่ ะเวบ็ เพจมเี นื้อหาอะไรบา้ งควรเขียนเป็นแผนผงั เวบ็ ไซต์ออกมาบนกระดาษ 4. ออกแบบหนา้ ตาเวบ็ เป็นข้นั ตอนในการลงมอื สร้างเว็บเพจแตล่ ะหนา้ ตามที่ไดอ้ อกแบบไว้ พร้อมกบั ทดสอบผา่ นเวบ็ เบราวเ์ ซอร์ (แบบ Offline) 4. ทดสอบและปรับปรงุ เวบ็ ไซต์ ทดสอบและปรับปรุงเว็บไซต หมายถงึ การทดสอบแบบออฟไลน์ โดยทยี่ งั ไมไ่ ดน้ าเวบ็ ไซตเ์ ขา้ สูอ่ ินเทอร์เน็ตแตก่ ส็ ามารถแสดงผลไดเ้ หมือนจริงผา่ นเวบ็ เบราวเ์ ซอร์ เชน่ IE เพอื่ ตรวจสอบตวั อยา่ งเวบ็ ที่สรา้ งไว้ เชน่ ขนาดตวั อกั ษรขนาดภาพ การใชส้ ี ตาราง ฯลฯ วา่ เหมาะสมหรือไม ่ พรอ้ มกบั การปรบั ปรุงจนเป็นทน่ี า่ พอใจ 5. เผยแพร่ผ่านเวบ็ ไซต์ เผยแพรผ่ า่ นเวบ็ ไซตเป็นการเผยแพรใ่ หค้ นทวั่ ไปไดร้ ู้จกั หรือเรียกวา่ การอพั โหลด (Upload) โดยเจา้ ของเวบ็จะตอ้ งจดทะเบียนโดเมนเนม และเชา่ พืน้ ทโี่ ฮสต์ กส็ ามารถนาเวบ็ เพจอพั โหลดข้ึนสูอ่ ินเทอร์เน็ต และประชาสัมพนั ธ์ให้คนทว่ั ไปไดร้ ูจ้ กั การทจี่ ะทาให้คนรับรู้และเขา้ มาใชบ้ ริการเวบ็ ไซตไ์ ด้มากน้นั จะตอ้ งมกี ารประชาสัมพนั ธ์อยา่ งตอ่ เน่ืองและใชเ้ วลาพอสมควร และถา้ จะใหด้ ีควรมเี คาน์เตอร์ (Counter) หรือตวั จดสถติ ิผเู้ ขา้ ชม กจ็ ะชว่ ยให้ประเมนิ ไดว้ า่เวบ็ ไซต์ของเราไดร้ บั ความสนใจมากน้อยเพยี งใด 6. การพฒั นาเว็บไซต์ การพฒั นาเวบ็ ไซต์ เป็นการปรับปรุงเน้ือหา ภาพประกอบหรืออพั เดท (Update) เวบ็ ไซต์ ถอื เป็นขน้ั ตอนสาคญัเพราะในโลกของอนิ เทอร์เน็ตมกี ารเปลีย่ นแปลงอยา่ งรวดเร็วอยูต่ ลอดเวลา ผู้ชมเวบ็ มกั จะใชเ้ วลาในการคน้ หาและเปิดผา่ นเวบ็ ไซตต์ า่ งๆ อยา่ งรวดเร็วหากพบวา่ เวบ็ ไซต์ของเราไมไ่ ดเ้ ปลย่ี นแปลงหรือมีขอ้ มลู ใหมๆ่ เพ่ิมข้ึนเลย ผเู้ ขา้ ชมเวบ็ ก็จะลดจานวนลงไปเรื่อยๆ จนกลายเป็นเวบ็ ที่ไมม่ ผี คู้ นเขา้ มาเลยหรือเป็นเวบ็ ทตี่ ายแลว้

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