ebook2

หนว่ ยที่ 2การออกแบบเวบ็ ไซต์

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

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

1. เวบ็ ทมี่ โี ครงสรา้ งแบบเรยี งลาดับ (Sequential Structure) เป็นโครงสรา้ งแบบธรรมดาที่ใช้กันมากที่สุดเน่ืองจากง่ายต่อการจัดระบบข้อมูล ข้อมูลที่นิยม จัดด้วยโครงสรา้ งแบบนม้ี กั เป็นข้อมูลที่มลี กั ษณะเป็นเร่ืองราวตามลาดับของเวลา เช่น การเรียงลาดับตามตัวอักษรดรรชนี สารานุกรม หรอื อภิธานศพั ท์ โครงสรา้ งแบบน้ี เหมาะกับเว็บไซต์ทม่ี ขี นาดเลก็ เนอื้ หาไม่ซับซอ้ นใช้การลิงก์ (Link) ไปทีละหน้า ทิศทางของการเข้าสู่เนื้อหา (Navigation) ภายในเว็บจะเป็นการดาเนินเร่ืองในลกั ษณะเสน้ ตรง โดยมี ปุ่มเดินหน้า-ถอยหลังเป็นเคร่ืองมือหลักในการกาหนดทิศทาง ข้อเสียของโครงสร้างระบบน้ีคือ ผูใ้ ชไ้ มส่ ามารถกาหนดทศิ ทางการเข้าสเู่ น้ือหาของตนเองได้ ทาให้เสียเวลาเข้าส่เู นือ้ รูปท่ี 2.1 โครงสรา้ งของเวบ็ ไซตแ์ บบเรยี งลาดบั ทม่ี า : http://krupiyadanai.wordpress.com/2. เว็บที่มีโครงสร้างแบบลาดับขัน้ (Hierarchical Structure) เป็นวิธีที่ดีทสี่ ดุ วธิ หี นงึ่ ในการจดั ระบบโครงสรา้ งทม่ี ีความซบั ซอ้ นของขอ้ มลู โดยแบ่งเนื้อหา ออกเปน็ สว่ นต่างๆ และมรี ายละเอยี ดยอ่ ยๆ ในแต่ละส่วนลดหลน่ั กนั มาในลักษณะแนวคิดเดียวกับ แผนภูมิองค์กร จึงเป็นการง่ายต่อการทาความเขา้ ใจกับโครงสรา้ งของเนอ้ื หาในเวบ็ ลกั ษณะน้ี ลกั ษณะเด่นเฉพาะของ เว็บประเภทน้ีคอื การมีจดุ เริม่ ตน้ ทจ่ี ดุ ร่วมจุดเดียว น่ันคือ โฮมเพจ (Homepage) และเชื่อมโยงไปสู่เน้ือหา ในลักษณะเป็นลาดบั จากบนลงลา่ ง รูปท่ี 2.2 โครงสร้างของเวบ็ ไซตแ์ บบลาดบั ข้ัน ทมี่ า : http://krupiyadanai.wordpress.com/

3. เวบ็ ทม่ี ีโครงสร้างแบบตาราง (Grid Structure) โครงสร้างรปู แบบนม้ี ีความซบั ซอ้ นมากกวา่ รปู แบบทผ่ี ่านมา การออกแบบเพิม่ ความยดื หยุ่น ใหแ้ ก่การเข้าสเู่ น้ือหาของผู้ใช้ โดยเพ่มิ การเช่อื มโยงซง่ึ กนั และกันระหว่างเน้อื หาแต่ละสว่ น เหมาะแก่ การแสดงให้เหน็ ความสมั พันธก์ ันของเนือ้ หา การเขา้ สูเ่ น้ือหาของผใู้ ชจ้ ะไมเ่ ปน็ ลกั ษณะเชงิ เสน้ ตรง เนอ่ื งจากผู้ใช้สามารถเปล่ียนทิศทางการเข้าสเู่ นอ้ื หาของตนเองได้ รปู ที่ 2.3 โครงสรา้ งของเวบ็ ไซตแ์ บบตาราง ที่มา : http://krupiyadanai.wordpress.com/ ในการจัดระบบโครงสร้างแบบน้ี เนอ้ื หาทน่ี ามาใชแ้ ตล่ ะส่วนควรมลี กั ษณะทเ่ี หมือนกัน และ สามารถใช้รปู แบบร่วมกนั หลักการออกแบบคือนาหวั ขอ้ ทง้ั หมดมาบรรจลุ งในทเี่ ดียวกันซงึ่ โดยทว่ั ไป จะเปน็ หนา้แผนภาพ (Map Page) ทแ่ี สดงในลกั ษณะเดียวกบั โครงสรา้ งของเว็บ เมื่อผู้ใช้คลกิ เลอื ก หัวข้อใด กจ็ ะเข้าไปสู่หน้าเนอื้ หา (Topic Page) ทแี่ สดงรายละเอียดของหวั ขอ้ นนั้ ๆ และภายในหน้าน้นั กจ็ ะมกี ารเชื่อมโยงไปยังหน้ารายละเอียดของหวั ข้ออ่นื ที่เปน็ เร่ืองเดยี วกนั นอกจากนย้ี งั สามารถนา โครงสร้างแบบเรียงลาดบั และแบบลาดบั ขน้ั มาใช้ร่วมกนั ไดอ้ กี ด้วย ถึงแมโ้ ครงสร้างแบบน้ี อาจจะสรา้ งความยงุ่ ยากในการเขา้ ใจได้ และอาจเกิดปญั หาการคงค้าง ของหัวข้อ (Cognitive Overhead) ได้ แต่จะเปน็ ประโยชน์ทส่ี ดุ เมอื่ ผู้ใชไ้ ด้เขา้ ใจถึงความสมั พันธ์ ระหว่างเนื้อหา ในส่วนของการออกแบบจาเปน็ จะต้องมีการวางแผนทดี่ ี เนือ่ งจากมกี ารเชอื่ มโยงท่เี กดิ ข้นึ ได้หลายทศิ ทาง นอกจากน้ีการปรับปรุงแกไ้ ขอาจเกดิ ความยงุ่ ยากเมอ่ื ตอ้ งเพ่ิมเน้อื หาในภายหลงั4. เวบ็ ท่มี ีโครงสรา้ งแบบใยแมงมมุ (Web Structure) โครงสร้างประเภทน้จี ะมคี วามยืดหยนุ่ มากทสี่ ดุ ทุกหน้าในเวบ็ สามารถจะเช่ือมโยงไปถึงกนั ได้หมด เป็นการสร้างรูปแบบการเขา้ ส่เู นอ้ื หาทเ่ี ปน็ อสิ ระ ผูใ้ ช้สามารถกาหนดวธิ กี ารเขา้ สเู่ น้ือหาได้ดว้ ย ตนเอง การเช่ือมโยงเนื้อหาแต่ละหนา้ อาศัยการโยงใยขอ้ ความทมี่ มี โนทศั น์ (Concept) เหมอื นกัน ของแตล่ ะหนา้ ในลกั ษณะของไฮเปอร์เท็กซห์ รือไฮเปอร์มเี ดยี โครงสร้างลักษณะนจี้ ัดเป็นรปู แบบที่ ไม่มโี ครงสรา้ งทีแ่ นน่ นอน

ตายตวั (Unstructured) นอกจากนก้ี ารเชือ่ มโยงไมไ่ ดจ้ ากดั เฉพาะเนือ้ หา ภายในเวบ็ นนั้ ๆ แตส่ ามารถเชื่อมโยงออกไปส่เู นื้อหาจากเว็บภายนอกได้ รปู ท่ี 2.4 โครงสรา้ งของเวบ็ ไซต์แบบใยแมงมุม ท่ีมา : http://krupiyadanai.wordpress.com/ ลกั ษณะการเชอ่ื มโยงในเวบ็ นน้ั นอกเหนือจากการใชไ้ ฮเปอรเ์ ท็กซ์หรือไฮเปอรม์ เี ดยี กบั ขอ้ ความท่ีมีมโนทัศน์ (Concept) เหมือนกันของแต่ละหน้าแลว้ ยังสามารถใช้ลกั ษณะการเชื่อมโยง จากรายการทรี่ วบรวมชือ่ หรอื หัวข้อของเนอื้ หาแต่ละหน้าไว้ ซึ่งรายการนจ้ี ะปรากฏอยบู่ รเิ วณใด บรเิ วณหนงึ่ ในหน้าจอ ผูใ้ ชส้ ามารถคลิกทห่ี ัวขอ้ ใดหวั ขอ้ หน่ึงในรายการเพื่อเลอื กทจ่ี ะเขา้ ไปสหู่ นา้ ใดๆ ก็ได้ตามความตอ้ งการ ข้อดขี องรปู แบบนี้คือง่ายตอ่ ผู้ใชใ้ นการท่องเท่ยี วบนเวบ็ โดยผู้ใช้สามารถกาหนดทศิ ทาง การเขา้ สู่เนอื้ หาได้ดว้ ยตนเอง แตข่ ้อเสยีคือถ้ามกี ารเพมิ่ เนอ้ื หาใหมๆ่ อยู่เสมอจะเปน็ การยากในการ ปรบั ปรงุ นอกจากน้ีการเชอ่ื มโยงระหวา่ งขอ้ มลู ทมี่ ีมากมายนน้ั อาจทาใหผ้ ูใ้ ช้เกิดการสบั สนและ เกิดปญั หาการคงค้างของหวั ข้อ (Cognitive Overhead) ได้ 2.3 กระบวนการเตรียมขอ้ มลู การเตรียมเน้ือหาสาหรบั แสดงผลบนหน้าเว็บไซต์ ถือเปน็ จดุ เร่มิ ตน้ และเปน็ หวั ใจสาคัญในการสร้างเวบ็ ไซต์ เพราะเนอื้ หาเปน็ ส่วนทที่ าใหผ้ อู้ า่ นทราบถึงจุดประสงค์ว่าเราทาเวบ็ ไซตเ์ พ่อื อะไร ต้องการนาเสนอสินค้า บริการ หรอื ขอ้ มลู ดา้ นใดเป็นสาคัญ เปน็ การสร้างความเข้าใจต่อผชู้ ม และนาไปสกู่ ารสง่ั ซ้ือสินคา้ หรอืเลือกใชบ้ รกิ ารองคก์ รของทา่ นในทสี่ ุด ในการจดั เตรยี มขอ้ มลู อาจจะเป็นการรวบรวมขอ้ มลู ดิบ ก่อนทีจ่ ะนามาสรปุ เพ่อื นาไปใชจ้ รงิ ในส่วนของเน้ือหาในเว็บไซต์ รวมไปถงึ การกาหนดคร่าวๆวา่ ตอ้ งการใหเ้ วบ็ ไซต์ไปในทศิ ทางใด ซึ่งหลงั จากทเ่ี ราได้รวบรวมขอ้ มลู แล้ว จะต้องมกี ารนาข้อมูลทไี่ ดม้ าแยกย่อยเปน็ ประเด็นตา่ งๆแลว้ จงึ นามากลัน่ กรองเตรยี มสาหรับการใช้จรงิ โดยอาจจะพิมพเ์ ก็บไวในเอกสาร ต่างๆ

จัดแบง่ ข้อมลู ออกเปน็ หมวดหมู่ เม่ือทราบถงึ คุณสมบัตขิ องขอ้ มลู ทรี่ ะบบเว็บไซตส์ าเรจ็ รปู ยอมรบั แล้ว ตอ่ มาคือการวางแผนจดั แบ่งข้อมลูออกเป็นหมวดหมู่ โดยคานงึ ถงึ จดุ ประสงคห์ ลกั วา่ \"เราจดั ทาเวบ็ ไซต์เพ่ืออะไร\" เช่น เพื่อนาเสนอขายสินค้า,เพอื่ ประชาสมั พนั ธอ์ งค์กร, เพ่ือแลกเปล่ยี นความร,ู้ เพื่อเผยแพรข่ า่ วสาร เปน็ ต้น โดยแนะนาให้จาแนกขอ้ มลูออกเปน็ 3 หมวดหมหู่ ลกั ๆ (อาจรา่ งแบบคร่าวๆในกระดาษกอ่ น) ดังนคี้ ่ะ กลุม่ บทความ คอื กลุ่มของข้อมลู ข่าวสาร เร่อื งราวความรูต้ ่าง ๆ ท่ตี อ้ งการเผยแพร่บนหนา้ เวบ็ ไซต์ เช่น - กลุ่มขา่ วประชาสมั พนั ธ์ เพ่ือนาเสนอบทความข่าวสาร กจิ กรรมตา่ ง ๆ ทเ่ี กดิ ขึ้นในองคก์ ร - กลมุ่ บทความสาระความรู้ นาเสนอเกร็ดความรตู้ ่าง ๆ ทมี่ ปี ระโยชน์กบั ผอู้ ่านซง่ึ เก่ียวข้องกับขอ้ มูลใน เว็บไซต์ - กลุม่ บทความขอ้ มลู สินคา้ ที่ใช้บทความชว่ ยนาเสนอขา่ วที่เก่ียวข้องกบั สินคา้ ในเว็บไซต์ ลกู ค้า สามารถอ่านเปน็ ความรู้เพม่ิ เติม ชว่ ยประกอบการตัดสินใจในการเลือกซื้อสนิ คา้ ไดด้ ยี ง่ิ ขน้ึ เปน็ ต้น กล่มุ สินคา้ คือ กลุ่มของสินคา้ ประเภทต่าง ๆ สาหรบั เว็บไซตท์ ี่มรี ะบบตะกรา้ สนิ คา้ ทต่ี ้องการ ขายและให้ลกู ค้าสามารถคลิกส่ังซอื้ ผ่านเว็บไซตไ์ ดโ้ ดยตรง ในการแยกกลุ่มสนิ ค้า อาจใชห้ ลกั การแยกกล่มุ เช่น แยกตามชนดิ ของสินค้า แยกตามลกั ษณะการใช้งาน แยกตามการจดั โปรโมช่นั เป็นตน้ โดยคานึงถึง ความสะดวกของลกู ค้าในการเขา้ ชมสินคา้ บนหนา้ เวบ็ ไซตเ์ ปน็ หลัก ขอ้ มลู อื่นๆ คอื ขอ้ มลู นอกเหนอื จาก 2 ขอ้ ขา้ งตน้ ท่ีไม่จาเป็นตอ้ งจดั รวมอยูใ่ นกลุ่มขอ้ มลู อน่ื ๆ หรือมีเน้อื หาทจ่ี บเร่ืองไดภ้ ายในหน้าเดียว เช่น่ รายละเอียดบทนาที่ใช้แจง้ ข้อความตอ้ นรบั ผ้อู ่านสู่ เว็บไซต์ ประวัติองคก์ ร ขอ้ มลู ตดิ ต่อเรา หากเปน็ เวบ็ ไซตข์ ายสินคา้ อาจมีขอ้ มลู วิธกี ารสัง่ ซอ้ื สินค้า วิธีการชาระเงนิ เพ่มิ เตมิ เป็นต้น สว่ นประกอบของหน้าเว็บเพจแบง่ ออกเปน็ 3 ส่วนหลกั ๆ คือ1. สว่ นหัวของหน้า (Page Header) เปน็ ส่วนท่ีอย่ตู อนบนสดุ ของหนา้ และเปน็ ส่วนท่ีสาคัญทสี่ ดุ ของหน้า เพราะเป็นสว่ นที่ดงึ ดดู ผชู้ มใหต้ ิดตามเนอ้ื หาภายในเวบ็ ไซต์ มกั ใสภ่ าพกราฟกิ เพอื่ สร้างความประทับใจ ส่วนใหญป่ ระกอบดว้ ย  โลโก้ (Logo) เป็นสง่ิ ทเี่ ว็บไซตค์ วรมี เป็นตัวแทนของเวบ็ ไซต์ไดเ้ ปน็ อย่างดี และยงั ทาใหเ้ ว็บน่าเชือ่ ถอื  ช่อื เวบ็ ไซต์  เมนูหลกั หรอื ลงิ ค์ (Navigation Bar) เป็นจุดเช่อื มโยงไปสูเ่ นอ้ื หาของเวบ็ ไซต์

2.สว่ นของเนือ้ หา (Page Body) เปน็ ส่วนท่ีอยูต่ อนกลางของหน้า ใชแ้ สดงข้อมลู เนอื้ หาของเวบ็ ไซต์ ซึง่ ประกอบด้วยขอ้ ความ,ตารางขอ้ มลู ภาพกราฟกิ วดี ีโอ และอ่ืนๆ และอาจมเี มนหู ลัก หรือเมนเู ฉพาะกลุ่มวางอย่ใู นสว่ นน้ีดว้ ยสาหรบั สว่ นเน้ือหาควรแสดงใจความสาคัญทีเ่ ปน็ หวั เรอ่ื งไวบ้ นสุด ขอ้ มลู มคี วามกระชบั ใชร้ ูปแบบตัวอกั ษรท่ีอ่านงา่ ย และจดั Layout ให้เหมาะสมและเปน็ ระเบียบ3. สว่ นท้ายของหน้า (Page Footer) เปน็ ส่วนทอี่ ยู่ด้านลา่ งสุดของหน้า จะมหี รอื ไม่มกี ไ็ ด้ มกั วางระบบนาทางท่เี ปน็ ลงิ ค์ข้อความงา่ ย ๆและอาจแสดงข้อมูลเพม่ิ เติมเก่ยี วกับเน้ือหาภายในเวบ็ ไซต์ เชน่ เจ้าของเว็บไซต์, ข้อความแสดงลิขสิทธ,ิ์วิธกี ารติดต่อกับผู้ดแู ลเวบ็ ไซต,์ คาแนะนาการใชเ้ ว็บไซต์ เปน็ ตน้.ตัวอย่าง แสดงส่วนประกอบของหนา้ เวบ็ เพจ ส่วนหัวเวบ็ ส่วนเน้ือหา ส่วนทา้ ยเวบ็รูปท่ี 2.5 แสดงสว่ นประกอบของหน้าเวบ็ เพจ (ทมี่ า : นางวาสนา สขุ ใจ ,2559)

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

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

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

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

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