รายงานวิชาการออกแบบเว็บไซต์

รายงาน เรื่องการ การเขียนออกแบบเว็บไซต์ จัดท าโดย นาย อนสุทิธิ์พรหมสขุ ชนั้มธัยมศกึษาปีที่3/1 เลขที่8 เสนอโดย ครูว่าที่ร้อยตรี ฮอลิค โต๊ะดอล๊ะ รายงานนเี้ป็นสว่นหนงึ่ของการเรยีนวชิา การออกแบบเว็บไซต์ ภาคเรยีนที่2 ปีการศกึษา 2565 โรงเรียน ควนกาหลงวิททยาคม นิคมวัฒนา

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

สารบัญ เรื่อง หน้า ค าน า ก หลักการออกแบบเว็บไซต์ 1 รูปแบบการออกแบบไซต์ 1 การออกแบบโครงสร้างเว็บไซต์ 3 ส ำคญัทคี่ วรมีอยู่ในเว็บไซต์ 4 สว่นประกอบส ำคญับนหนำ้เว็บเพจ ทตี่อ้งม ี 5 อ ้ำงอิง 6

การออกแบบเว็บไซต์ การสรา้งเว็บไซตส์งิ่ส าคัญอยทู่กี่าร ออกแบบเว็บ เพราะเว็บไซต์ที่มีรูปแบบสวยงาม จะสามารถ ดงึดดูความสนใจจากผคู้นไดด้กีวา่ท าใหผ้คู้นเกดิความรสู้กึประทับใจ อยากกลับมาใชง้านเว็บไซต์ อีกครั้งในอนาคต ดังนั้นเริ่มแรกก่อนท าเว็บไซต์ จึงจ าเป็นต ้องท าความเข ้าใจ กับหลักการออกแบบ และรูปแบบโครงสร้างของเว็บก่อน องค์ประกอบในการออกแบบเว็บไซต์ การออกแบบเว็บไซตเ์พอื่ใหม้ปีระสทิธภิาพ และสามารถดงึดดูความสนใจของผคู้นไดด้ ีจะตอ้งมี องคป์ระกอบของเว็บไซตอ์ยา่งครบถว้น ซงึ่ไดแ้ก่ 1. ความเรียบง่าย เข้าใจง่าย การออกแบบเว็บไซตท์ดี่ีจะตอ้งเนน้ทคี่วามเรยีบงา่ยเป็นหลัก โดยเลอืกน าเสนอเฉพาะสงิ่ที่ ต ้องการน าเสนอจริงๆ ในรปูแบบทหี่ลากหลาย โดยอาจจะเป็นสสีนักราฟิก ภาพเคลอื่นไหวหรอื ตัวอักษร ทสี่ าคัญจะตอ้งมกีารน าเสนอทไี่มด่รูกหนา้เว็บจนเกนิ ไป เพอื่ไมใ่หเ้กดิความรสู้กึรกสายตา หรือสร้างความเบื่อหน่าย น่าร าคาญให ้กับผู้ที่เข ้าชมเว็บไซต์ มีตัวอย่างเว็บไซต์ที่มีการออกแบบ โดยเน้นความเรียบง่ายได ้ดี คือ Apple, Nokia และ Microsoft เป็นต ้น 2. ความสม า่เสมอ ไมส่บัสน ควรออกแบบเว็บไซตด์ว้ยความสม า่เสมอ คอืจะตอ้งมรีปูแบบ กราฟิก โทนสแีละการตกแตง่ ต่างๆ ให ้แต่ละหน้าบนเว็บไซต์มีความคล ้ายคลึงกัน และเป็นแนวเดียวกันไปตลอดทั้งเว็บไซต์ ดัง ตัวอยา่งเว็บไซตท์ ั่วๆ ไปทจี่ะสงัเกตเห็นไดว้า่ทกุหนา้ของเว็บไซตน์ ัน้จะเนน้การตกแตง่ ในรปูแบบ เดียวกันทั้งหมด ต่างก็แค่การน าเสนอของแต่ละหน้าเท่านั้น 3. สร้างความโดดเด่น เป็ นเอกลักษณ์ การออกแบบเว็บไซตเ์พอื่ใหส้ามารถสอื่ถงึจดุประสงคใ์นการน าเสนอเว็บไดด้ ีจะตอ้งมกีารสรา้ง ความเป็นเอกลักษณ์และจุดเด่นให ้กับเว็บไซต์ เพื่อให ้สามารถสะท้อนถึงลักษณะขององค์กรได ้มาก ทสี่ดุโดยการสรา้งเอกลักษณ์ดังกลา่วนัน้อาจใชช้ดุสีรปูภาพ ตัวอักษรหรอืกราฟิก นอกจากนกี้ ็ตอ้ง ขึ้นอยู่กับว่า เป็นเว็บไซต์แบบบทางการหรือไม่ เพื่อจะได ้ออกแบบได ้อย่างเหมาะสมที่สุด 4. เนอื้หาตอ้งดีครบถว้น เนื้อหาเป็นสงิ่ทสี่ าคัญทสี่ดุของการสรา้งเว็บไซต์เพราะสงิ่ทที่ าใหผ้คู้นเกดิความสนใจ และ หมั่นติดตามเว็บไซต์เหล่านั้นอยู่เสมอ ก็คือเนื้อหาที่มีความสมบูรณ์และน่าสนใจ นอกจากนี้จะต ้องมี การปรับปรุง พัฒนาเนื้อหาบนเว็บให ้มีความทันสมัยอยู่เสมอ รวมถึงข ้อมูลต ้องมีความถูกต ้องที่สุด

5. ระบบเนวเิกชน่ั ใชง้า่ย ระบบเนวเิกชนั่เป็นเสมอืนป้ายบอกทางเพอื่ใหผ้ ใู้ชง้าน ไมเ่กดิความสบัสนในขณะใชง้าน เว็บไซต์ซงึ่การออกแบบเนวเิกชนั่ก็จะตอ้งเนน้ทคี่วามเรยีบงา่ย ใชง้านสะดวก และมคีวามเขา้ใจได้ งา่ย ทสี่ าคัญจะตอ้งมตี าแหน่งการวางทสี่ม า่เสมอเพอื่ใหด้เูป็นแนวทางเดยีวกัน ท าใหผ้ ใู้ชง้านหรอื ผชู้มรสู้กึประทับใจ และจดจ าเว็บไซตไ์ดง้า่ยขนึ้สว่นใครทมี่กีารน ากราฟิกมาใชใ้นระบบเนวเิกชนั่ก็ จะตอ้งเลอืกกราฟิกทสี่ามารถสอื่ความหมายไดด้เีชน่กัน 6. คุณภาพของเว็บไซต์ เว็บไซตท์ดี่จีะตอ้งมคีณุภาพ ทัง้สงิ่ทปี่รากฏใหเ้ห็นบนเว็บไซต์ ไมว่า่จะเป็นกราฟิก ชนดิ ตัวอักษร รปูภาพหรอื สสีนัทใี่ช้เนอื้หาทนี่ ามาแสดงผล ซงึ่หากเว็บไซตม์คีณุภาพก็จะสรา้งความ น่าเชอื่ถอืและเป็นจดุเดน่ทที่ าใหผ้คู้นสว่นใหญเ่กดิความสนใจไดด้ ีเพราะฉะนัน้หา้มละเลยในสว่น ของคุณภาพเด็ดขาด 7. ความสะดวกในการเขา้ใชง้าน เว็บไซตค์วรใหค้วามสะดวกสบายแกผ่ ใู้ชง้านไดด้ ีคอืจะตอ้งมกีารแสดงผลไดใ้นทกุ ระบบปฏบิ ัตกิาร ไมว่า่จะเป็นเว็บเบราวเ์ซอร์คอมพวิเตอร์ โน๊ตบคุ๊หรอืบนโทรศัพทม์อืถอืทสี่ าคัญ จะต ้องมีความละเอียดของการแสดผลและสามารถใชง้านไดโ้ดยไมม่ ปี ัญหาดว้ย 8. ความคงที่ของการออกแบบ การออกแบบเว็บไซต์ควรจะมีความคงที่ในการออกแบบ ด ้วยการสร้างเว็บไซต์ด ้วยแบบแผน เดยีวกัน และมกีารเรยีบเรยีงเนอื้หาอยา่งรอบคอบ ท าใหเ้ว็บมคีวามน่าเชอื่ถอืและดมูคีณุภาพ ชว่ย สร้างความประทับใจให ้กับผใู้ชง้านไดเ้ป็นอยา่งดี 9. ความคงที่ของการท างาน ระบบการท างานบนเว็บไซตจ์ะตอ้งมคีวามคงที่และสามารถใชง้านไดด้ ีซงึ่นอกจากการ ออกแบบระบบการท างานให ้มีความทันสมัยและสร้างสรรค์แล ้ว ก็จะต ้องหมั่นตรวจสอบอยู่เสมอ เพราะหากระบบการใชง้านมคีวามผดิ ปกตกิ็จะไดแ้กป้ ัญหาไดท้ ัน นอกจากนอี้าจมกีารอัพเดตดไีซน์ ใหท้ ันสมัยขนึ้บอ่ยๆ เพอื่ใหผ้ ใู้ชง้านรสู้กึสนุกไปกับการใชง้านเว็บไซต์ หลักการออกแบบทั้งหมด เป็นหลักการออกแบบที่ 1Belief นยิมใชเ้พอื่สรา้งเว็บไซต์ ให ้กับลูกค ้า ที่เรารับท าการตลาดออนไลน์ รวมไปถึงรับดูแลเว็บไซต์ หลักการเด่น ทสี่ดุส าหรบัเว็บไซตเ์พอื่การขายสนิคา้และบรกิาร คอืความนา่เชอื่ถอืรองลงมา คือ การออกแบบโครงสร้างให้เหมาะกับ Search Engine เพื่อให ้ง่ายต่อการท า SEO ในอนาคตรูปแบบโครงสร้างของเว็บไซต์

การออกแบบโครงสรา้งของเว็บไซต์สามารถท าไดห้ลากหลายแบบ ซงึ่ก็ขนึ้อยู่ กับความชอบและความถนัดของแต่ละบุคคล นอกจากนี้ยังขึ้นอยู่กับกลุ่มเป้าหมายที่ ตอ้งการน าเสนอ เพราะจะตอ้งออกแบบใหเ้หมาะกบัการใชง้านของกลมุ่เป้าหมาย มากทสี่ดุโดยโครงสรา้งของเว็บไซตส์ว่นใหญก่ ็จะประกอบไปด ้วย 4 รูปแบบดังนี้ 1. โครงสร้างแบบเรียงล าดับ โครงสร้างเว็บไซต์แบบ เรียงล าดับ จะเป็นโครงสรา้งแบบธรรมดาทนี่ยิมใชง้านกนัมากทสี่ดุเนอื่งจากมคีวามง่ายตอ่การ จัดระบบข ้อมูล และสามารถน าเสนอเรื่องราวตามล าดับได ้เป็นอย่างดี เหมาะกับ เว็บไซตท์มี่ขีนาดเลก็มเีนอื้หาทไี่มซ่บัซอ้น สว่นใหญก่ ็จะเป็นพวกเว็บไซตท์ ใี่ห้ ความรู้ หรือเว็บไซต์องค์กรขนาดย่อม โดยลักษณะการลิ้งค์เนื้อหา ก็จะลิ้งค์ไปทีละ หนา้มที ศิทางการเขา้สเู่นอื้หาตา่งๆ ในแบบเสน้ตรง ใชป้่มุเดนิหนา้-ถอยหลังในการ ก าหนดทศิทาง จงึท าใหก้ารใชง้านเป็นไปอยา่งง่าย แตโ่ครงสรา้งเว็บไซตแ์บบ เรยีงล าดบัก็มขีอ้เสยีคอืจะท าใหผ้ ใู้ชง้านตอ้งเสยีเวลาในการเขา้สเู่นอหาเพราะไม่ ื้ สามารถก าหนดทศิทางการเขา้สเู่นอื้หาดว้ยตวัเองได้ 2. โครงสร้างแบบล าดับขั้น โครงสร้างแบบล าดับขั้น นยิมใชก้บัเว็บทมี่คีวามซบัซอ้นของขอ้มลูเพอื่ใหส้ามารถ เข ้าถึงข ้อมูลต่างๆ ได ้ง่ายขึ้น โดยจะมกีารแบง่เนอื้หาออกเป็นสว่นๆ และมกีารน าเสนอ รายละเอียดย่อยๆ ที่ลดหลั่นกันมา ท าให ้สามารถท าความข ้าใจกับโครงสร ้างเนื้อหา ไดง้า่ยขนึ้ โดยจะมโีฮมเพจเป็นจดุเรมิ่ตน้และจดุรว่มจดุเดยีวทจี่ะน าไปสกู่าร เชอื่มโยงเนอื้หาเป็นล าดบัจากบนลงลา่ง

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

ส าคญัทคี่ วรมีอยู่ในเว็บไซต์ จดุประสงคห์นงึ่ของการสรา้งเว็บไซต์ก็เพอื่ดงึดดูใหผ้คู้นเกดิความสนใจ ดังนัน้สงิ่ทจี่ะขาดไมไ่ด้ เลย ก็คอืขอ้มลูส าคัญทผี่คู้นมักจะคาดหวงัวา่จะไดเ้ห็นเมอื่เขา้ชมเว็บไซตต์า่งๆ นั่นเอง ซงึ่ไดแ้ก่ รายละเอียดของผลิตภัณฑ์ ซงึ่เป็นรายละเอยีดตามจรงิ ข ้อมูลเกี่ยวกับบริษัทหรือสถานที่ผลิต-ขาย ขอ้มลูส าหรับการตดิตอ่เชน่เชอื่เบอรโ์ทร ชอ่งทางการตดิตอ่อนื่ๆ ข่าวสารความคืบหน้าต่างๆ หรือเรื่องราวอัพเดตที่น่าสนใจ ค าถามยอดนิยมต่างๆ การออกแบบโครงสร ้างของเว็บไซต์ โครงสร้างเว็บไซต์ ก็คือการจัดล าดับของเนื้อหาบนเว็บไซต์ออกเป็นแผนผังที่เข ้าใจง่าย ว่า ตอ้งการใหเ้ว็บไซตม์เีนอื้หาอะไรบา้ง มเีว็บเพจอยตู่รงไหน หนา้ไหนบา้งทจี่ะน ามาเชอื่มโยงถงึกัน หรือกล่าวง่ายๆ ก็คือเหมือนการวางโครงเรื่องก่อนจะเขียนเนื้อหาให ้ออกมาอย่างสมบูรณ์แบบ นั่นเอง ดังนัน้การออกแบบโครงสรา้งเว็บไซตจ์งึมคีวามส าคัญมาก ซงึ่ก็สามารถท าไดห้ลากหลาย รูปแบบด ้วยกัน แต่มีแนวคิดหลักๆ ที่ได ้รับความนิยมมากที่สุดอยู่ 2 รูปแบบ คือ จัดโครงสร ้างตามกลุ่มเนื้อหา (Content-based Structure) จัดโครงสร ้างตามกลุ่มผู้ชม (User-based Structure) การออกแบบเว็บไซต์ ต ้องค านึงถึงอะไรบ ้าง การออกแบบเว็บไซต์ที่ดีจะต ้องค านึงถึงหลายๆ อย่างด ้วยกัน โดยมี 9 ข ้อหลักๆ ที่ควรค านึงถึงดังนี้ 1. ความเรียบง่าย เว็บไซตท์ดี่คีวรมรีปูแบบทเี่รยีบง่ายและไมซ่บัซอ้น เพื่อให ้ผู้ชม สามารถใชง้านเว็บไซตไ์ดอ้ยา่งสะดวกมากขนึ้ โดยเฉพาะพวกกราฟฟิคทัง้หลาย จะตอ้งไมใ่ ชต่วัอกัษรทเี่คลอื่นไหวอยตู่ลอดเวลา และไมม่ สี สีนัทดี่แูสบตาจนเกนิ ไป 2. ความสม ่าเสมอ คอืการเลอืกใชร้ปูแบบ กราฟฟิค โทนสีและการตกแตง่หรอืการ แสดงผลต่างๆ ในเว็บไซต์ให ้เป็นรูปแบบเดียวกันหรือคล ้ายคลึงกันตลอดทั้งเว็บ 3. ความเป็ นเอกลักษณ์ เว็บไซต์ควรมีเอกลักษณ์เฉพาะตัว ที่สามารถบ่งบอกได ้ถึง ความเป็นบรษิ ัท องคก์รหรอืแบรนดต์า่งๆ ตวัอยา่งเชน่ เว็บไซต์ของ 1 Belief จะมสีฟี้า ที่ เป็นเอกลักษณ์ของบริษัทอยู่บนเว็บ 4. เนอื้หา โดยเนื้อหาที่น ามาลงในเว็บ ควรเป็นเนื้อหาที่มีความเกี่ยวข ้องกับเว็บ หรืออาจ เป็นเนอื้หาทไี่ดส้าระ มปีระโยชน์สามารถดงึดดูความสนใจของผคู้นไดด้ีและทสี่า คญั จะต ้องมีความถูกต ้อง สมบูรณ์และมีความทันสมัย

5. ระบบเนวเิกชนัควรออกแบบใหส้ามารถใชง้านไดง้่ายและสะดวก สอื่ความหมาย ตา่งๆ และอธบิายไดอ้ยา่งชดัเจน รวมถงึตอ้งมรีปูแบบ และล าดบัรายการทมี่คีวาม สม ่าเสมอ 6. ลักษณะเด่น สว่นนจี้ะถอืเป็นหนา้ตาของเว็บไซตเ์พอื่ใชใ้นการดงึดดูลกูคา้อาจ ออกแบบลักษณะเด่นของเว็บใหต้รงกบัความชอบสว่นใหญข่องกลมุ่เป้าหมาย หรือจะ ออกแบบใหส้มัพนัธป์ระเภทของเว็บ และคณุภาพขององคป์ระกอบตา่งๆ บนเว็บ 7. การใชง้านทไี่มจ่ ากดัการท าเว็บไซตใ์หร้องรบัการเขา้ใชง้านจากหลายระบบ ไมว่า่ จะเป็นการเขา้ใชง้านจากเครอื่ง PC สมารท์ โฟน หรอืการใชเ้บราเซอรต์ างๆ ในการเข ้า ่ ใชง้าน 8. คุณภาพในการออกแบบ จ าเป็นต ้องท าเว็บไซต์ให ้มีคุณภาพมากที่สุด ไม่ว่าจะเป็น ในเรื่องของการเรียบเรียงเนื้อหาอย่างรอบคอบ การตรวจสอบความถูกต ้องและการท า ใหเ้ว็บไซตม์คีวามน่าเชอื่ถอื 9. การเชอื่มโยงไปยงัลงิ้คต์า่งๆ ซงึ่จะตอ้งเชอื่มโยงไปยงัหนา้เว็บทมีอยู่จริง และมี ี่ เนอื้หาทเี่กยี่วพนักนัและควรหมนั่ตรวจสอบอยเู่ สมอ วา่ระบบการเชอื่มโยงยังคง ท างานได ้ตามปกติและมีความถูกต ้อง แม่นย า อยู่หรือไม่ สว่นประกอบสา คญับนหนา้เว็บเพจ ทตี่อ้งมี 10.บนหนา้เว็บเพจ จะมสีว่นประกอบส าคัญทจี่ าเป็นตอ้งมอียู่ 3 สว่น ไดแ้ก่ 1. สว่นหัวของหนา้ (Header) 11.อยตู่อนบนสดุของหนา้และเป็นสว่นทสี่ าคัญทสี่ดุโดยจะตอ้งท าใหส้ามารถดงึดดูผชู้มใหร้สู้กึ ส าคัญหลักๆ เลย ก็คอื โลโก้ชอื่เว็บไซตแ์ละเมนูหลักทสี่ามารถลงิ้คไ์ ปยังเนอื้หาในหนา้เว็บเพจ ต่างๆ ได ้ 2. สว่นของเนอื้หา (Body) 12.อยบู่รเิวณตอนกลางของหนา้เว็บ โดยจะแสดงขอ้มลูเกยี่วกับเนอื้หาบนเว็บแบบครา่วๆ ซงึ่ก็จะมี ข ้อความ กราฟฟิค ตารางข ้อมูลหรือวิดีโอประกอบอยู่ และหากมีเมนูแบบเฉพาะกลุ่มก็จะถูกจัด ไวใ้นหนา้นเี้ชน่กัน และทสี่ าคัญเนอื้หาในสว่นนคี้วรจะมคีวามกระชบัเขา้ใจงา่ย มกีารใชร้ปูแบบ ตัวอักษรแบบเรียบง่ายและเป็นระเบียบ 3. สว่นทา้ยของหนา้ (Footer) 13.อยลู่า่งสดุของหนา้เว็บ ซงึ่จะมหีรอื ไมม่กี็ได้สว่นนจี้ะแสดงถงึขอ้มลูตา่งๆ เพมิ่เตมิเขา้ไป เชน่ ขอ้ความทแี่สดงถงึการเป็นลขิสทิธิ์ขอ้มลูเจา้ของเว็บไซต์วธิกีารตดิตอ่และค าแนะน าตา่งๆ เกี่ยวกับการใชง้านเว็บไซตอ์ยา่งถกูตอ้ง เป็นตน้

อ้างอิง https://sites.google.com/a/eisth.org/krusasiraphak/bth-thi-3-kar-xxkbaebwebsit