บทที่1

บทที่ 1 หลักการออกแบบและพัฒนาเว็บไซต์ เมื่อพูดถึงการสร้างเว็บไซต์หลายคนอาจจะนึกถึงแต่การใช้โปรแกรมช่วยสร้างเว็บอย่าง Dreamweaver เพื่อจัดหน้าเว็บเพจ และใช้โปรแกรม Photoshop เพื่อสร้างภาพกราฟิกส าหรับตกแต่งแต่ ความจริงแลว้งานดงักล่าวเป็นเพียงส่วนหน่ึงของกระบวนการพฒั นาเวบ็ ไซตท์ ้งัหมดเท่าน้นั เพราะหาก คุณตอ้งการเวบ็ ไซตท์ ี่ตรงกบวัตถุประสงค์และประสบความส าเร็จ ั ก็จา เป็นจะตอ้งมีการเตรียมการที่ดี ทา งานอยา่ งเป็นข้นั ตอน ตลอดจนพิจารณาปัจจัยต่างๆที่เกี่ยวขอ้งอยา่ งรอบดา้น เช่นเดียวกบัการพฒั นา โครงการประเภทอื่นโดยทวั่ ไป การสร้างเว็บไซต์ที่มีคุณภาพมีองค์ประกอบที่เกี่ยวข้องอยู่มากมายซ่ึงคุณจะต้องหาข้อมูล วเิคราะห์และตดัสินใจก่อนลงมือทา เช่น วตัถุประสงคค์ืออะไร, ใครเป็นกลุ่มผชู้ มเป้าหมาย, ทีมงานมี ใครบา้งและแต่ละคนเชี่ยวชาญเรื่องใด, เน้ือหาหรือขอ้ มูลจะมาจากที่ไหน, เทคโนโลยีอะไรบ้างที่จะ น ามาใช้, รูปแบบเวบ็ เพจเป็นอยา่ งไรและการประชาสัมพนัธ์จะทา ใน รูปแบบใดบา้ง ซ่ึงที่กล่าวมาเป็น สิ่งที่เราจะพิจารณากนั ในบทน้ี ขั้นตอนการพัฒนาเว็บไซต์ กระบวนการพฒั นาเวบ็ ไซตแ์ บ่งออกเป็นข้นั ตอนต่างๆ ซ่ึงมีอยหู่ ลายแนวคิด หนงัสือเล่มน้ีจึง ขอรวบรวมและสรุปมาเฉพาะประเด็นส าคัญๆ เพื่อใหเ้หมาะสา หรับผเู้ริ่มตน้ ที่จะใชเ้ป็นแนวทางในการ สร้างเวบ็ไซตต์ ้งัแต่ขนาดเล็กจนถึงขนาดกลาง ก าหนดเป้ าหมายและวางแผน (Site Definition and Planning) ในการพฒั นาเวบ็ไซตค์วรกา หนดเป้าหมายและวางแผนไวล้่วงหนา้ เพื่อให้การทา งานในข้นั ต่อ ๆไปมีแนวทางที่ชัดเจน เรื่องหลักๆ ที่คุณควรทา ในข้นั ตอนน้ีประกอบดว้ย 1.กา หนดวตัถุประสงคข์องเวบ็ไซต์เพื่อใหเ้ห็นภาพที่ชดัเจนวา่ เวบ็ ไซตน์ ้ีตอ้งการนา เสนอหรือ ตอ้งการให้เกิดผลอะไร เช่น เป็นเว็บไซต์ส าหรับให้ขอ้ มูลหรือขายสินคา้ ซ่ึงวตัถุประสงค์น้ีจะเป็น ตวักา หนดรายละเอียดอื่นๆที่จะตามมา เช่น โครงสร้างของเวบ็ ไซต์รวมท้งัลกั ษณะหน้าตาและสีสัน ของเวบ็ เพจ ในกรณีที่เป็นเวบ็ ไซต์ของบริษทั หรือองคก์ รวตัถุประสงคน์ ้ีก็จะตอ้งวางให้สอดคลอ้งกบั ภารกิจขององคก์รดว้ย 2.กา หนดกลุ่มผูช้ มเป้าหมาย เพื่อจะไดรู้้ว่าผชู้ มหลกัของคุณคือใครและออกแบบเวบ็ ไซตใ์ห้ ตอบสนองความตอ้งการหรือโดนใจผูช้ มกลุ่มน้นั ให้มากที่สุด ไม่ว่าจะเป็นการเลือกเน้ือหา โทนสี กราฟิ ก เทคโนโลยีที่น ามาสนับสนุน และอื่น ๆ 3. เตรียมแหล่งขอ้มูลเน้ือหาหรือขอ้ มูลคือสาระส าคญั ที่แทจ้ริงของเวบ็ ไซต์คุณตอ้งรู้วา่ ขอ้ มูล ที่จา เป็นตอ้งใชจ้ะมาจากแหล่งใดไดบ้ า้ง เช่น ถา้เป็นเวบ็ของบริษทั ใครที่จะเป็นผใู้ห้ขอ้ มูล หรือถา้เป็น เวบ็ข่าวสารข่าวน้นัจะมาจากแหล่งใด มีลิขสิทธ์ิหรือไม่ 4. เตรียมทักษะหรือบุคลากร การสร้างเว็บต้องอาศัยทักษะหลาย ๆ ด้าน เช่น ในการเตรียม เน้ือหาออกแบบกราฟิกเขียนโปรแกรม และการดูแลเวบ็ เซิร์ฟเวอร์เป็นตน้ ซ่ึงถา้เป็นเวบ็ ไซต์ขนาด ใหญ่อาจจะตอ้งใชบ้ ุคลากรเป็นจา นวนมากแต่สา หรับเวบ็ไซตเ์ล็ก ๆ ที่ตอ้งดูแลเพียงคนเดียวคุณจะตอ้ง ศึกษาหาความรู้ในเรื่องน้นั ๆ เพื่อเตรียมพร้อมเอาไว้ 5. เตรียมทรัพยากรต่าง ๆ ที่จา เป็น เช่น โปรแกรมสา หรับสร้างเวบ็ ไซต,์โปรแกรมส าหรับสร้าง กราฟิ ก ภาพเคลื่อนไหว และมัลติมีเดีย,โปรแกรมยทู ิลิต้ี,โปรแกรมสร้างฐานข้อมูลและอื่น ๆ ที่ต้องใช้, การจดทะเบียนโดเมนเนม ตลอดจนการเตรียมหาผู้ให้บริการรับฝากเว็บไซต์ (web hosting) และเลือกแผนบริการที่เหมาะสม วเิคราะห์และจัดโครงสร้างข้อมูล(Analysis and Information Architecture) ข้นั ตอนน้ีจะเป็นการนา ขอ้ มูลต่าง ๆ ที่รวบรวมไดจ้ากข้นัแรกไม่ว่าจะเป็นวตัถุประสงค์ของ เว็บไซต์,คุณลกัษณะและขอ้จา กดัของกลุ่มผชู้มเป้าหมายรวมท้งัเน้ือหาหลกัของเวบ็ ไซต์นา มาประเมิน วิเคราะห์และจดัระบบ เพื่อให้ได้โครงสร้างข้อมูลและขอ้กา หนด ซ่ึงจะใช้เป็นกรอบส าหรับการ ออกแบบและดา เนินการในข้นั ต่อๆไป ผลที่ไดร้ับจากข้นั ตอนน้ีควรประกอบไปดว้ย  แผนผังโครงสร้างของเว็บไซต์ (site structure), สารบัญ (table of content) ,ล าดับการ น าเสนอ (storyboard) หรือผังงาน (flowchart)  ระบบนา ทางหรือเนวิเกชนั่ (navigation) ซ่ึงผูช้ มจะใชส้ าหรับเปิดเขา้ไปยงัส่วนต่างๆของ เวบ็ไซต์ตวัอยา่ งเช่น โครงสร้างและรูปแบบของเมนู  องค์ประกอบที่จะนา มาใช้บนเวบ็ เพจมีอะไรบา้ง เช่น ภาพกราฟิก,เสียง,วิดีโอ,มัลติมีเดีย, แบบฟอร์ม ฯลฯ อะไรบ้างที่บราวเซอร์ของผู้ชมสนับสนุน และอะไรต้องอาศัยโปรแกรมเสริม  ขอ้กา หนดเกี่ยวกบัลกัษณะหนา้ตาและรูปแบบของเวบ็ เพจ  ขอ้กา หนดของโปรแกรมภาษาสคริปตห์ รือแอพพลิเคชนั่ และฐานขอ้มูลที่ใชใ้นเวบ็ไซต์  คุณสมบตัิของเวบ็ เซิร์ฟเวอร์รวมถึงขอ้จา กดัและบริการเสริมต่างๆที่มีให้ ออกแบบเวบ็ เพจและเตรียมข้อมูล(Page Design and Content Editing) เป็นข้นั ตอนของการออกแบบเคา้โครง หน้าตา และลกั ษณะทางดา้นกราฟิกของหน้าเวบ็ เพจ เพื่อให้ผู้ชมเกิดอารมณ์ความรับรู้ต่อเว็บเพจตามที่คุณต้องการ ดังน้ันผู้ที่ท าหน้าที่น้ีจึงควรมี ความสามารถทางด้านศิลปะ โปรแกรมที่เหมาะจะใช้ในการออกแบบคือ Adobe Photoshop หรือ Adobe Fireworks สา หรับผลลพัธ์ที่ไดจ้ะประกอบดว้ยไฟล์กราฟิกต่างๆที่ใชบ้ นเวบ็ เพจ เช่น โลโกภ้ าพ พ้ืนหลงั ปุ่มเมนูไอคอนที่เป็นหวัคอลมั น์และแบบเนอร์โฆษณา การออกแบบเวบ็ เพจยงัรวมไปถึงการกา หนดสีสันและรูปแบบของส่วนประกอบต่างๆที่ไม่ใช่ ภาพกราฟิกเช่น ฟอนต์ขนาดและสีขอ้ความ สีพ้ืนบริเวณที่วา่ ง สีและลวดลายของเส้นกรอบ เป็นตน้ นอกจากน้นัองคป์ ระกอบเสริมอื่นๆของเวบ็ เพจก็ตอ้งถูกเตรียมไวด้ว้ย เช่น ภาพเคลื่อนไหว Flash และ โปรแกรม JavaScript ที่ใชโ้ตต้อบกบัผชู้มหรือเล่นเอฟเฟ็คตต์ ่างๆ ในส่วนของเน้ือหาข้นั ตอนน้ีจะเป็นการนา เอาเน้ือหาที่เลือกไวม้าปรับแกแ้ละตรวจทานความ ถูกตอ้ง เพื่อใหพ้ ร้อมสา หรับจะนา ไปใส่เวบ็ เพจแต่ละหนา้ในข้นั ตอนถดัไป ลงมือสร้างและทดสอบ (Construction and Testing) เป็นข้นั ตอนสร้างเวบ็ เพจข้นั มาจริงโดยอาศยัเคา้โครงและองคป์ ระกอบกราฟิกตามที่ออกแบบ ไว้เน้ือหาต่างๆจะถูกนา มาใส่และจดัรูปแบบลิงค์ระบบนา ทางถูกสร้างและองคป์ ระกอบเสริมต่าง ๆ ถูกวางเข้าที่ อย่างไรก็ตามเมื่อลงมือสร้างเว็บเพจจริงคุณอาจพบว่าสิ่งที่ออกแบบไวแ้ล้วบางอย่างไม่ เหมาะสม หรือควรได้รับการปรับแต่งก็สามารถทา ได้โปรแกรมที่ใช้ในข้นั ตอนน้ีก็คือโปรแกรม สา หรับสร้างเวบ็ไซต์เช่น Adobe Dreamweaver เวบ็ ไซต์ที่สร้างข้ึนมาควรไดร้ับการทดสอบก่อนที่จะออกเผยแพร่ไม่ว่าจะเป็นในเรื่องความ ถูกตอ้งของเน้ือหา การท างานของลิงค์และระบบน าทาง,ตรวจหาความผิดพลาดของโปรแกรมสคริปต์ และฐานขอ้ มูล นอกจากน้ีก็ควรทดสอบโดยใชส้ ภาพแวดลอ้ มที่เหมือนกบัของกล่มผชู้ มเป้าหมาย เช่น เวอร์ชนั่ ของบราวเซอร์ความละเอียดของจอภาพและความเร็วที่เชื่อมต่อกบัอินเทอร์เน็ต เพื่อดูวา่ ผชู้ ม เป้ าหมายสามารถชมเวบ็ไซตไ์ดอ้ยา่ งสมบูรณ์และมีประสิทธิภาพหรือไม่ เผยแพร่และส่งเสริมให้เป็นทรี่ ู้จัก (Publishing and Promotion) โดยทวั่ ไปการนา เวบ็ ไซต์ข้ึนเผยแพร่บนอินเทอร์เน็ต จะทา ดว้ยการอพั โหลดไฟล์ท้งัหมดคือ HTML และไฟล์อื่นๆที่เกี่ยวขอ้งข้ึนไปเก็บบนเวบ็ เซิร์ฟเวอร์ที่มีคุณเปิดบริการไว้ การอพั โหลดเวบ็ไซตห์ รือบางคร้ังเรียกวา่ การ“พับบลิช” (publish) อาจท าด้วยโปรแกรมสร้างเว็บไซต์เอง ซึ่งมี คุณสมบตัิน้ีอยใู่ นตวั หรืออาจใชโ้ปรแกรมยทู ิลิต้ีประเภท FTP เช่น FileZilla,CuteFTP หรือใช้เครื่องมือ อื่นบนเวบ็ เซิร์ฟเวอร์ก็ได้ หลงัจากน้นั เวบ็ ไซต์ควรไดร้ับการทดสอบอีกคร้ัง เพื่อตรวจหาปัญหาบางอย่างที่ไม่สามารถ ทดสอบบนคอมพิวเตอร์ของคุณเอง เช่น การลิงค์ของเว็บเพจกับเว็บไซต์อื่น และการทา งานของ โปรแกรมสคริปต์กับฐานข้อมูล ซ่ึงท าไม่ได้บนเครื่องของคุณ หรือบนเว็บเซิ ร์ ฟเวอร์ อาจมี สภาพแวดลอ้ มที่ต่างจากเครื่องของคุณ เว็บไซต์ที่จะประสบความส าเร็จ นอกจากต้องมีเน้ือหาที่ดีมีการวางโครงสร้างและการ ออกแบบที่เหมาะสมแลว้ ยงัตอ้งไดร้ับการโฆษณาและส่งเสริมให้เป็นที่รู้จกัในกลุ่มผชู้ มเป้าหมาย หรือ ในวงกวา้งออกไปอีกด้วย การส่งเสริมน้ีมีกลยุทธ์ที่ทา ได้หลายวิธีซ่ึงไม่จา เป็นตอ้งใช้งบประมาณ จา นวนมากเสมอไป โดยสามารถทา ไดต้้งัแต่แบบง่ายๆ คือการแลกเปลี่ยนลิงคแ์ละแบนเนอร์ประกาศ บนเวบ็ บอร์ดสาธารณะการส่งอีเมลแ์ นะนา ตวั การเพิ่มขอ้มูลใน เสิร์ชเอนจิ้นหรือเวบ็ ไดเร็ค ทอรี เรื่อยไปจนถึงแบบที่ใช้งบประมาณมากข้ึน เช่น การจดังานเปิดตวั การลงโฆษณาบนเวบ็ ไซตอ์ื่น บนสิ่งพิมพ์หรือตามวทิยแุ ละโทรทศัน์เป็นตน้ ดูแลและพฒั นา (Maintenance and Innovation) เวบ็ไซตท์ ี่เผยแพร่ออกไปแลว้คุณไม่ควรทิ้งขวา้งแต่ควรดูแลโดยตลอด ซ่ึงหนา้ที่น้ีครอบคลุม หลายเรื่อง ต้งัแต่การตรวจสอบเวบ็ เซิร์ฟเวอร์วา่ ไม่หยุดทา งานบ่อยๆ ,ลิงค์ที่เชื่อมโยงไปภายนอกยังคง ใชไ้ด้(เนื่องจากเวบ็ไซตน์ ้นัอาจปิดไป),คอยตอบอีเมล์หรือค าถามที่มีผู้ฝากไว้บน เว็บเพจ ถ้าเป็ นเว็บ ข่าวสารก็ตอ้ งปรับปรุงข้อมูลให้ทนั สมยัตลอดเวลา,ถ้ามีการใช้ฐานขอ้ มูลก็ตอ้งแบ็คอพั ขอ้ มูลอย่าง สม ่าเสมอ นอกจากน้นัควรตรวจสอบสถิติของการเขา้ชมเป็นระยะๆ ซ่ึงเป็นบริการเสริมที่เวบ็ เซิร์ฟเวอร์ มกั มีให้เช่น จา นวนผูช้ ม เวบ็ เพจใดมีผูช้ มมากหรือเป็นที่นิยม ผชู้ มมีการเปลี่ยนคุณสมบตัิ(เช่น ความ ละเอียดของจอภาพและรุ่นของบราวเซอร์)ไปหรือไม่หรือมาสู่เวบ็ ไซตข์องคุณจากทิศทางใดมากที่สุด เช่น จากเวบ็ไซตอ์ื่นที่ลิงคม์ าหา หรือมาจากเสิร์ชเอนจิ้นใดเป็นตน้ หลงัจากที่เวบ็ ไซตไ์ดร้ับการเผยแพร่ไประยะหน่ึงคุณควรปรับปรุงเพื่อให้ผูช้ มรู้สึกว่ามีความ เปลี่ยนแปลง มีความสดใหม่ทนั สมยั โดยอาจนา ขอ้ มูลสถิติที่รวบรวมไว้มาพิจารณาประกอบด้วยการ เปลี่ยนแปลงท าได้ท้ังในส่วนของเน้ือหา,โครงสร้างเว็บไซต์,การออกแบบหน้าตา และการน า เทคโนโลยีๆเข้ามาเสริม ทีมงานพัฒนาเว็บไซต์ การพฒั นาเวบ็ไซตส์ ามารถทา เพียงคนเดียวหรือทา เป็นทีมก็ได้ข้ึนอยกู่ บัความจา เป็นที่แตกต่าง กนั กล่าวคือเป็นเวบ็ไซตข์ นาดใหญ่หรือเล็ก หรือเวบ็ ไซตท์ ี่ส่วนตวั ส าหรับประเภทของบุคลากรที่ตอ้ง ใช้ก็จะข้ึนอยู่กบั เน้ือหา ขอ้ มูล และเทคโนโลยีที่ตอ้งการจะนา เสนอ โดยในองค์กรขนาดใหญ่หรือ บริษทั ที่รับพฒั นาเว็บไซต์อาจตอ้งมีการแบ่งแยกหน้าที่อย่างชดั เจนว่าใครทา อะไร ซ่ึงแต่ละคนจะมี ความชา นาญเฉพาะเรื่องไป โดยทวั่ ไปแลว้ทีมงานพฒั นาเวบ็ไซตจ์ะประกอบดว้ยบุคลากรต่างๆ ดงัน้ี Web Masterคือผู้รับผิดชอบและดูแลเว็บไซต์ในภาพรวมหรืออาจจะมีหน้าที่ออกแบบและ พฒั นาเวบ็ไซตท์ ้งัหมดเลยก็ไดด้งัน้นัจึงตอ้งเป็นผทู้ี่มีความรู้เรื่องต่างๆอยา่ งกวา้งขวาง Web Designerเป็นผอู้อกแบบลกัษณะหนา้ตาท้งัหมดของเวบ็ ไซตไ์ ม่วา่ จะเป็นการวางโครง ร่างของหนา้เวบ็ เพจการเลือกสีการออกแบบภาพกราฟิกที่เป็นส่วนประกอบต่างๆ ดงัน้นั จะตอ้งเป็นผู้ ที่มีความรู้ทางศิลปะและการนา มาประยกุ ตใ์ชอ้ยา่ งเหมาะสม Web Programmerเป็ นนักเขียนโปรแกรมซ่ึงสามารถพฒั นาโปรแกรมดว้ยภาษาต่างๆ ที่ใช้ บนเวบ็ ไซต์เช่น JavaScript, VBScript, ASP.NET และ PHP บุคลากรดา้นน้ีกา ลงัมีความส าคญั ใช้ จดัการระบบฐานขอ้มูล หรือเพิ่มลูกเล่นบนเวบ็ เพจใหน้ ่าสนใจ Content Writer/Editorคือนักเขียนและบรรณาธิการที่ดูแลด้านเน้ือหาของเว็บไซต์ เป็ น ผรู้ับผดิชอบในการจดัเตรียมเน้ือหา ตรวจสอบความถูกตอ้งและปรับปรุงเมื่อมีการเปลี่ยนแปลง การศึกษาความต้องการของผู้ชมเวบ็ ไซต์ วตัถุประสงค์หลักอย่างหน่ึงของการสร้างเว็บไซต์ก็คือให้มีผูม้ าชม ใช้บริการ และอยู่ใน เวบ็ ไซต์ให้นานที่สุดดงัน้ันคุณจึงจา เป็นตอ้งใส่เน้ือหาและองค์ประกอบที่น่าสนใจหลายๆอย่างเพื่อ ดึงดูด ซ่ึงตอ้งศึกษาและเขา้ใจถึงธรรมชาติของสิ่งที่ผชู้ มส่วนใหญ่คาดหวงัวา่ จะไดร้ับจากการเขา้มาใน เวบ็ไซตข์องคุณ วา่ มีอะไรบา้งความตอ้งการของผชู้มโดยทวั่ ไปสามารถแบ่งเป็นหวัขอ้หลกัๆไดด้งัน้ี ข้อมูล (Content) หรือเน้ือหาหลักที่คุณน าเสนอในเว็บไซต์ไม่ว่าจะเป็นข้อมูลเกี่ยวกับ หน่วยงาน รายละเอียดของสินคา้/บริการและการบริการหลงัการขาย ข่าวสารความเคลื่อนไหว (News) เกี่ยวกบั สินคา้/บริการ กิจกรรมต่างๆของเว็บไซต์หรือ ของหน่วยงาน เช่น การเปิดตวัสินคา้ใหม่,สิทธิประโยชน์,โปรโมชนั่ สินคา้/บริการ เป็นตน้ ของฟรี (Free Service)คนส่วนใหญ่ชอบของฟรีดงัน้นั เวบ็ไซตท์ ี่แจกของฟรีหรือให้บริการ ฟรีต่างๆ จึงมีผใู้ชบ้ ริการจา นวนมากเช่น อีเมล,์พ้ืนที่เก็บขอ้มูล,โปรแกรม,เกมส์ หรือเพลงส าหรับดาวน์ โหลด เป็ นต้น การมีปฏิสัมพันธ์ (Interactive) เช่น ให้มีการถาม/ตอบปัญหา ร่วมแสดงความคิดเห็น หรือ โหวตในหัวขอ้ ต่างๆเวบ็ ไซต์ของคุณอาจจะมีเวบ็ บอร์ดไวใ้ห้ผูช้ มแสดงความคิดเป็นหรือต้งักระทูไ้ด้ หรืออยา่ งนอ้ยก็ใชก้ารโตต้อบดว้ยอีเมล์ยงิ่ ถา้เป็นเวบ็ไซตท์ ี่ทา ธุรกิจออนไลน์เมื่อผชู้ มสั่งซ้ือสินคา้และ ชา ระเงิน คุณจะตอ้งตอบกลบัโดยเร็วเพื่อใหลู้กคา้มนั่ ใจวา่ ธุรกรรมน้นัดา เนินไปดว้ยความเรียบร้อย ความบันเทิง (Entertainment)คนส่วนใหญ่ชอบบริโภคขอ้ มูลที่สร้างความสนุกสนานและ ความบนั เทิงในรูปแบบต่างๆตามลกัษณะของกลุ่มผชู้มน้นั ซ่ึงอาจจะอยใู่ นรูปแบบของบทความตลกขา ขัน,ข่าวซุบซิบของดารานกัร้อง,การแข่งขนั ชิงรางวลั ดูดวง เล่นเกมส์ฟังเพลงดาวน์โหลดภาพหนา้จอ/ เสียงเรียกเข้าส าหรับมือถือและดูภาพยนตร์ตวัอยา่ ง เป็นตน้ เนื้อหาที่ควรมีในเว็บไซต์ การศึกษาตวัอยา่ งจากเวบ็ไซตอ์ื่นๆ และโดยเฉพาะที่เป็นประเภทเดียวกนั จะช่วยให้มองเห็นวา่ ในเว็บไซต์ของคุณควรมีเน้ือหาอะไรบา้ง อย่างไรก็ตามเรื่องน้ีไม่ได้มีการกา หนดไวเ้ป็นมาตรฐาน ตายตวัแต่ข้ึนอยกู่ บั สิ่งที่จะนา เสนอและจุดเด่นที่คุณตอ้งการให้มีซ่ึงจะทา ให้รายละเอียดปลีกยอ่ ยของ แต่ละเว็บไซต์แตกต่างกันออกไป แต่หลักๆแล้วพอสรุปได้ว่าข้อมูลพ้ืนฐานที่ควรมีในเว็บไซต์ ประกอบด้วย 1.ขอ้ มูลเกี่ยวกบั บริษทั องคก์ ร หรือผจู้ดัทา (About Us)คือขอ้ มูลเกี่ยวกบั เจา้ของเวบ็ ไซตเ์พื่อ บอกให้ผูช้ มรู้ว่าคุณเป็นใครมาจากไหน และต้องการน าเสนออะไร เช่น วตัถุประสงค์ของเว็บไซต์ ประวัติและความเป็ นมา 2. รายละเอียดของผลิตภัณฑ์หรือบริการ (Product/Service Information) คือข้อมูลหลักที่ ตอ้ งการนา เสนอ ซ่ึงหากเป็นเว็บไซต์ทางธุรกิจผูช้ มจา เป็นตอ้ งได้รู้รายละเอียดของผลิตภัณฑ์หรือ บริการรวมท้งัอาจมีการเปรียบเทียมสเปคและราคา เพื่อเป็นขอ้ มูลประกอบการตดัสินใจซ้ือแต่หากเป็น เวบ็ไซตท์ ี่ใหค้วามรู้ส่วนน้ีก็อาจจะประกอบดว้ยบทความ ภาพกราฟิก มลั ติมีเดียและลิงคไ์ ปยงัเวบ็ ไซต์ อื่นที่ใหข้อ้มูลเพิ่มเติม 3. ข่าวสาร (News/Press Release)อาจจะเป็นข่าวสารที่ตอ้งการส่งถึงบุคคลทวั่ ไปหรือสมาชิก เพื่อให้รับรู้ความเคลื่อนไหวเกี่ยวกบั บริษทั หรือเวบ็ ไซตข์องคุณ เช่น การเปิดตวัสินคา้และบริการใหม่ โปรโมชนั่ หรือกิจกรรมต่างๆที่เกิดข้ึน 4. ค าถาม/ค าตอบ (Frequently Asked Question) ค าถาม/ค าตอบ มีความจ าเป็ น เพราะผู้ชม บางส่วนอาจไม่เขา้ใจขอ้ มูลหรือมีปัญหาตอ้งการสอบถามการติดต่อทางอีเมล์หรือช่องทางอื่นแมว้า่ จะ ทา ไดแ้ต่ก็เสียเวลาดงัน้นัคุณควรคาดการณ์หรือรวบรวมคา ถามที่เคยตอบไปแลว้ใส่ไวเ้วบ็ เพจ ซ่ึงผชู้ ม ที่สงสัยจะสามารถเปิ ดดูได้ทันที นอกจากน้ีก็อาจจะมีเว็บบอร์ดส าหรับให้ผูดู้แลเว็บไซต์คอยตอบ รวมท้งัอาจเปิดให้ผดูู้แลเวบ็ ไซตค์อยตอบ รวมท้งัอาจเปิดให้ผชู้ มดว้ยกนั ช่วยตอบก็ได้FAQ บางคร้ังก็ อยใู่ นรูปของ Help หรือขอ้มูลช่วยเหลือ 5. ขอ้ มูลในการติดต่อ(Contact Information) เพื่อให้ผชู้ มที่เกิดขอ้ สงสัยหรือต้องการสอบถาม ข้อมูลเพิ่มเติม สามารถติดต่อกับคุณได้โดยควรระบุอีเมล์แอดเดรส ที่อยู่บริษทั /หน่วยงาน เบอร์ โทรศพั ทแ์ละแฟกซ์ไวใ้นเวบ็ไซตด์ว้ย รวมท้งัอาจจะมีแผนที่สา หรับลูกคา้ที่ตอ้งการติดต่อดว้ยตวัเอง หลักการออกแบบเว็บไซต์ ในการออกแบบเว็บไซต์ คุณจะต้องน าขอ้ มูลต่าง ๆ ที่รวบรวมไว้ไม่ว่าจะเป็นวตัถุประสงค์ ของเวบ็ ไซต์กลุ่มผูช้ มเป้าหมาย ตลอดจนเน้ือหาท้งัหมด มาวิเคราะห์จดัระบบ และสรุปเป็นแนวคิด เพื่อจดัวางโครงสร้างและกา หนดรูปแบบของเว็บไซต์จะนา เสนออกสู่ผูช้ ม การออกแบบเว็บไซต์มี องคป์ ระกอบ 2 ส่วน คือ การออกแบบโครงสร้างเว็บไซต์ (Site structure design)  การออกแบบระบบเนวเิกชนั่ (Site navigation design) การออกแบบโครงสร้างเว็บไซต์ (Site Structure Design) โครงสร้างเว็บไซต์ (Site structure) เป็นแผนผงัของการลา ดบั เน้ือหาหรือการจดัวางตา แหน่ง เวบ็ เพจท้งัหมด ซ่ึงจะทา ให้คุณรู้ว่าท้งัเวบ็ ไซต์ประกอบไปดว้ยเน้ือหาอะไรบา้ง และมี เวบ็ เพจหน้า ไหนที่เกี่ยวขอ้งเชื่อมโยงถึงกนั ดงัน้นัการออกแบบโครงสร้างเวบ็ ไซตจ์ึงเป็นเรื่องส าคญั เปรียบเสมือน กับการเขียนแบบอาคารก่อนที่จะลงมือสร้าง เพราะจะทา ให้คุณมองเห็นหน้าตาของเว็บไซต์เป็น รูปธรรมมากข้ึน สามารถออกแบบระบบเนวิกชั่นได้เหมาะสม และมีแนวทางการทา งานที่ชัดเจน สา หรับข้นั ตอนต่อไป นอกจากน้ีโครงสร้างเวบ็ไซตท์ ี่ดีช่วยใหผ้ ชู้มไม่สับสนและคน้ หาขอ้ มูลที่ตอ้งการ ไดอ้ยา่ งรวดเร็ว วธิีจดัโครงสร้างเวบ็ไซตส์ ามารถทา ไดห้ลายแบบ แต่แนวคิดหลกัๆที่นิยมใชก้ นั มีอยู่2แบบ คือ (ในทางปฏิบตัิอาจมีการใชห้ลายแนวคิดผสมผสานกนัก็ได)้ จดัตามกลุ่มเน้ือหา (content-based structure) จดัตามกลุ่มผชู้ม (user-based structure) รูปแบบของโครงสร้างเวบ็ ไซต์ สามารถวางรูปแบบโครงสร้างเวบ็ไซตไ์ดห้ลายแบบตามความเหมาะสม เช่น แบบเรี ยงล าดับ (Sequence) เหมาะส าหรับเว็บไซต์ที่มีจา นวนเว็บเพจไม่มากนัก หรือ เวบ็ไซตท์ ี่มีการนา เสนอขอ้มูลแบบทีละข้นั ตอน  แบบระดบั ช้นั (Hierarchy) เหมาะส าหรับเวบ็ ไซตท์ ี่มีจา นวนเวบ็ เพจมากข้ึน เป็นรูปแบบที่ พบไดท้วั่ ไป แบบผสม (Combination) เหมาะส าหรับเว็บไซต์ที่ซบั ซอ้ น เป็นการนา ขอ้ดีของรูปแบบท้งั 2 ขา้งตน้ มาผสมกนั การออกแบบระบบเนวิกชั่น (Site Navigation Design) เป้าหมายของระบบนา ทาง หรือเนวกิชนั่ คือช่วยใหผ้ ชู้มเขา้ถึงขอ้มูลที่ตอ้งการไดอ้ยา่ งรวดเร็ว และไม่หลงทางดงัน้นัองคป์ ระกอบของระบบนา ทางจึงมี2 ส่วนดว้ยกนัคือ เครื่องน าทาง (Navigation Controls) คือเครื่องมือสา หรับใหผ้ ชู้มเปิดไปยงัเวบ็ ต่างๆภายในเวบ็ไซต์โดยแยกไดเ้ป็น  เมนูหลักเป็นเมนูสา หรับเปิดไปยงัหวัขอ้เน้ือหาหลกัของเวบ็ไซต์มกัอยใู่ นรูปของกลุ่มลิงค์ ที่เป็นขอ้ความหรือภาพกราฟิกและควรมีปรากฏอยบู่ นเวบ็ เพจทุกหนา้  เมนูเฉพาะกลุ่ม เป็นเมนูที่เชื่อมโยงเวบ็ เพจปัจจุบนักบั เวบ็ เพจอื่นภายในกลุ่มยอ่ ยที่มีเน้ือหา เกี่ยวเนื่องเท่าน้นั มกัอยใู่ นรูปของกลุ่มลิงคข์อ้ความหรือกราฟิกเช่นกนั เครื่องมือเสริม ส าหรับช่วยเสริมการทา งานของเมนูมีได้หลากหลายรูปแบบ เช่น ช่อง ค้นหาข้อมูล (search box), เมนูแบบดร็อปดาวน์ (drop-down menu),อิมเมจแมพ (image map) ,แผนผัง เว็บไซต์ (Site map) เครื่องบอกต าแหน่ง (Location Indicator) เป็นสิ่งที่ใชแ้สดงวา่ ขณะน้ีผชู้มกา ลงัอยทู่ ี่ตา แหน่งใดในเวบ็ไซต์เครื่องบอกตา แหน่งมีไดห้ ลาย รูปแบบ เช่น ขอ้ความหรือภาพกราฟิกที่แสดงชื่อเวบ็ เพจ หรือขอ้ความบ่งช้ีทา นองน้ี และบ่อยคร้ังที่เครื่องบอกตา แหน่งถูกรวมไวก้ บั ตวัเมนูเลย โดยแสดงด้วยสีหรือรูปแบบที่ แตกต่างไปจากปุ่มเมนูอื่นๆ ลกัษณะระบบเนวกิชนั่ ที่ดี  อยใู่ นตา แหน่งที่เห็นไดช้ดัและเขา้ถึงง่าย เช่น ส่วนบนหรือดา้นซา้ยของเวบ็ เพจ  เขา้ใจง่ายหรือมีขอ้ความกา กบั ชดัเจน ผชู้มใชไ้ดท้ นั ทีโดยไม่ตอ้งเสียเวลาศึกษา Location :Software>Business Software  มีความสม่า เสมอและเป็นระบบ ไม่ชวนใหส้ ับสนหรือกลบัไปกลบั มา  มีการตอบสนองเมื่อใชง้าน เช่น เปลี่ยนสีเมื่อผชู้มช้ีเมาส์หรือคลิก  มีจา นวนรายการพอเหมาะ ไม่มากเกินไป  มีหลายทางเลือกให้ใช้เช่น เมนูกราฟิก,เมนูข้อความ,ช่องคน้ หาขอ้ มูล (search box),เมนู แบบดร็อปดาวน์ (drop-down menu),แผนผังเว็บไซต์ (site map)  มีลิงค์ให้คลิกกลบั ไปยงัโฮมเพจไดเ้สมอเพื่อให้ผชู้ มกลบั ไปเริ่มตน้ ใหม่ไดใ้นกรณีที่หลง ทางไม่รู้วา่ ตวัเองอยทู่ ี่ตา แหน่งใด การออกแบบเว็บเพจ (Page Design) วิธีที่สะดวกที่สุดในการออกแบบเวบ็ เพจก็คือใช้โปรแกรมสร้างภาพกราฟิกเช่น Photoshop หรือ Fireworks วางเคา้โครงของหนา้และสร้างองคป์ ระกอบต่างๆข้ึนมาให้ครบสมบูรณ์ในภาพเดียวไม่ ว่าจะเป็นโลโก,้ชื่อเว็บไซต์,ปุ่ มเมนู,ปุ่ มไอคอน,แถบสี,ภาพเคลื่อนไหว และอื่นๆ เนื่องจากโปรแกรม เหล่าน้ีมีเครื่องมือพร้อมส าหรับงานดงักล่าว อีกท้งัในข้นั สุดทา้ยคุณสามารถจะบนั ทึกองค์ประกอบ ท้งัหมดแยกเป็นไฟลก์ราฟิกยอ่ ยๆพร้อมกบัไฟล์HTML เพื่อน าไปใช้เป็ นต้นแบบในโปรแกรมสร้างเว็บ เพจได้ทันที ส่วนประกอบของหน้าเว็บเพจ โดยทวั่ ไปหนา้เวบ็ เพจจะแบ่งออกเป็นส่วนหลกัๆ ดงัน้ี ส่วนหวั (Page Header)อยู่ตอนบนสุดของหน้า เป็นบริเวณที่ส าคญั ที่สุดเนื่องจากผใู้ชจ้ะ มองเห็นก่อนบริเวณอื่น ส่วนใหญ่นิยมใช้วางโลโก้ชื่อเวบ็ ไซต์ป้ายโฆษณาลิงคส์ าหรับการติดต่อหรื อลิงค์ที่ส าคัญ และระบบน าทาง ส่วนของเน้ือหา (Page Body)อยู่ตอนกลางหนา้ ใช้แสดงเน้ือหาของเวบ็ เพจน้นั ซ่ึงอาจจะ ประกอบไปดว้ยขอ้ความ ภาพกราฟิก ตารางขอ้ มูลและอื่นๆ บางคร้ังเมนูหลกัหรือเมนูเฉพาะกลุ่มอาจ มาอยใู่ นส่วนน้ีก็ได้โดยมกัจะวางไวด้า้นซา้ยมือสุดเนื่องจากผใู้ชจ้ะมองเห็นไดง้่ายกวา่ ส่วนทา้ย(Page Footer)อยดู่ า้นล่างสุดของหนา้ ส่วนใหญ่จะนิยมใชว้างระบบนา ทางแบบที่ เป็นลิงค์ขอ้ความง่ายๆ นอกจากน้ีก็อาจจะมีชื่อเจา้ของขอ้ความแสดงลิขสิทธ์ิและอีเมล์แอดเดรสของ ผู้ดูแลแว็บไซต์  แถบข้าง (Side Bar) ในปัจจุบนั นิยมออกแบบดา้นขา้งของหน้าเวบ็ เพจให้น่าสนใจเพื่อใช้ วางป้ายแบบเนอร์หรือลิงคแ์ นะนา เกี่ยวกบัการบริการของเวบ็ไซต์เป็นตน้ แนวคิดในการออกแบบเว็บเพจ ส าหรับผูท้ี่กา ลงัจะเริ่มลงมือสร้างเวบ็ เพจแต่ยงันึกไม่ออกว่าจะออกแบบให้มีหนา้ตาอย่างไร หรือเป็นแนวไหนดีวธิีง่ายๆ ที่จะช่วยใหเ้กิดแนวความคิดก็คือ  ศึกษาจากเว็บไซต์อื่นๆ เป็นวิธีที่ง่ายที่สุดโดยสามารถศึกษาจากเวบ็ ไซตต์ ่าง ๆ ที่มีอยแู่ ลว้ และนา รูปแบบที่เหมาะสมมาประยกุ ตใ์ช้(มิใช่การลอกแบบ) ไม่วา่ จะเป็นในเรื่องแนวคิดการออกแบบ การใช้สี ข้อความ กราฟิ ก การจัดองค์ประกอบศิลป์ และเทคนิคที่ใช้สร้างเว็บเพจ  ประยุกต์รูปแบบจากสิ่งพิมพ์สิ่งพิมพ์เช่น นิตยสาร แผ่นพบั โปรชัวร์โปสเตอร์และ หนงัสือบางเล่ม มีรูปแบบที่สวยงามซ่ึงคุณนา มาใชเ้ป็นแนวทางการออกแบบเวบ็ เพจได้ ในด้านของข้อความและกราฟิ ก เว็บเพจที่มีข้อความมากๆ อาจท าให้ผู้ชมรู้สึกกลัวและเบื่อ เพราะไม่อยากอ่านเน้ือหายาวๆ ในทางตรงกนัขา้มถา้เวบ็ เพจมีแต่รูปภาพอย่างเดียวผูช้ มก็อาจสับสน เพราะบางทีดูรูปแล้วไม่เขา้ใจว่าต้องการนา เสนออะไร ดังน้ันคุณควรออกแบบเว็บเพจในแนวทาง กลางๆ ไม่มีองค์ประกอบอย่างใดอย่างหน่ึงมากหรือน้อยจนเกินไป แต่ดูให้เหมาะสมกบั เน้ือหาและ กลุ่มผชู้ม เว็บเพจที่จดัแบบเรียบง่ายแต่ดูดีจะสร้างความน่าสนใจและน่าเชื่อถือกบัผชู้ม นอกจากน้ีการวาง ตา แหน่งของเน้ือหาต่างๆ อยา่ งมีระเบียบเป็นสัดส่วน ก็ทา ใหผ้ ชู้มหาขอ้มูลที่ตอ้งการไดอ้ยา่ งรวดเร็ว ให้ความส าคัญกับส่วนบนของเว็บเพจ ส่วนสา คญั ที่สุดของเวบ็ เพจคือดา้นบนสุดของหนา้ ซึ่งผู้ชมจะสัมผัสได้ทันเมื่อเปิ ดเข้ามาที่หน้า น้นั เวบ็ เพจส่วนใหญ่นิยมจดัวางองคป์ ระกอบดงัน้ี โลโกแ้ละชื่อของเวบ็ไซต์  ระบบน าทาง,ลิงค์ที่ส าคัญ และเครื่องมือเสริมส าหรับค้นหาข้อมูลภายในเว็บไซต์  ป้ ายแบนเนอร์โฆษณา หรือข้อความที่ส าคัญ สร้างระดับความส าคัญของเนื้อหา การสร้างระดบัความส าคญั ขององคป์ ระกอบต่าง ๆ บนเวบ็ เพจ จะช่วยเน้นให้ผชู้ มมองเห็นว่า ส่วนไหนส าคญั มากหรือน้อยได้อย่างรวดเร็ว ตวัอย่างเช่น ข้อความขนาดใหญ่แสดงว่าส าคญั กว่า ขอ้ความขนาดเล็กเป็นตน้ ลกัษณะองคป์ ระกอบต่างๆที่ตอ้งคา นึงถึงมีดงัน้ี  ตา แหน่งและลา ดบัขององคป์ ระกอบบนเวบ็ เพจ  สี และขนาดขององค์ประกอบ  การใช้ภาพเคลื่อนไหว หรือข้อความที่เคลื่อนไหวได้ซ่ึงจะดึงดูดสายตามากกว่า องคป์ ระกอบทวั่ ไป ใช้กราฟิ กให้พอดี การใชก้ราฟิกบนเวบ็ เพจจะให้ผลท้งั 2ดา้น คือดา้นหน่ึงช่วยให้เวบ็ เพจสวยงามและน่าสนใจ แต่อีกดา้นหน่ึงถา้ใส่กราฟิกมากเกินไปอาจทา ให้ดูรกตา และเวบ็ เพจโหลดไดช้ ้าผูช้ มตอ้งเสียเวลารอ นาน ดงัน้นัจึงควรจา กดัปริมาณของภาพกราฟิกที่นา มาใชใ้หเ้หมาะสม ออกแบบขนาดของเว็บเพจให้พอดีกับหน้าจอ การออกแบบเวบ็ เพจที่ดีน้ัน ตอ้งคา นึงถึงกลุ่มผูช้ มป้าหมายส่วนใหญ่ว่าใช้จอภาพที่มีความ ละเอียด (resolution) กี่พิกเซล และกา หนดว่าจะให้เว็บเพจของคุณแสดงผลได้ดีบนจอความละเอียด เท่าใด ความละเอียดของจอภาพที่ใชก้ นั มากที่สุดในปัจจุบนั มีอยู่2ระดบั คือ 1024 × 768 พิกเซล  1280 × 800 หรือ 1280 ×1024 พิกเซล หากออกแบบเว็บเพจส าหรับจอ 1024 × 768 พิกเซลผูช้ มที่ใชจ้อความละเอียดเท่ากนั น้ีก็จะ สามารถชมเน้ือหาท้งัหมดไดพ้อดีเตม็จอภาพ แต่ถา้ผชู้มใชจ้อความละเอียด1280 ×1024 ขนาดของเว็บ เพจและองคป์ ระกอบต่างๆจะเล็กลงและแสดงไม่เตม็จอภาพ ในทางกลับกัน ถ้าคุณออกแบบเว็บเพจส าหรับจอ 1280 × 1024 พิกเซล ผู้ชมที่ใช้จอความ ละเอียดเท่าน้ีจะชมไดพ้ อดีเต็มจอภาพ แต่ส าหรับผชู้ มที่ใชจ้อความละเอียด1024 × 768 หนา้เวบ็ เพจน้ี จะลน้ จอโดยประเด็นส าคญั ที่สุดอยู่ที่ความกวา้งของเวบ็ เพจ ซ่ึงไม่ควรออกแบบให้กวา้งเกินจอภาพ ของผูช้ ม เพราะจะทา ให้ตอ้งเลื่อนหน้าจอในแนวนอนเพื่อดูเน้ือหาที่ตกไป ซ่ึงไม่สะดวกเป็นอย่างยิ่ง ส่วนทางความสูงน้นั ไม่เป็นปัญหานกั แต่ก็ควรให้เน้ือหาที่ส าคญั สามารถมองเห็นไดท้ นั ทีโดยผชู้ มไม่ ต้องเลื่อนจอลง เนื่องจากปัจจุบันยังมีผู้ชมจ านวนหนึ่งที่ใช้จอความละเอียดเพียง 800 ×600 พิกเซลดงัน้นั จึงมี หลายเวบ็ ไซตท์ ี่ออกแบบเวบ็ เพจกวา้งไม่เกิน 800 พิกเซลเท่าน้นั (ความกวา้งที่ใชไ้ดจ้ริง หรือประมาณ 780 พิกเซล) เลือกใช้สีอย่างเหมาะสม การออกแบบเวบ็ เพจใหส้ วยงามน้นั ส่วนหน่ึงจะข้ึนอยกู่ บัการเลือกใชชุ้ดสีที่ผสมกลมกลืนกนั เช่นสีของพ้ืนเวบ็ เพจ, สีขอ้ความ และสีขององคป์ ระกอบอื่นๆ เช่น กราฟิก,ปุ่ มเมนู หรือลิงค์ และการใช้ สีน้นั ยงับ่งบอกบุคลิกของเวบ็ ไซต์ดว้ยว่าเน้ือหาออกมาในแนวไหนเทคนิคการจัดโครงสร้างหน้าเว็บ เพจ จัดหน้าเว็บเพจด้วยตาราง ตาราง (table) เป็นเครื่องมือหลกั ที่นกัออกแบบเวบ็ ทวั่ ไปนิยมนา มาใช้ช่วยจดั ตา แหน่งในการ วางเน้ือหาลงบนส่วนต่างๆของเว็บเพจ เพราะสามารถจดัการได้ง่าย ซ่ึงคุณจะพบไดใ้นเวบ็ เพจส่วน ใหญ่ จัดหน้าเว็บเพจด้วย AP Element AP Element (เดิมเรียกวา่ “เลเยอร์”) เป็นเครื่องมือที่ช่วยให้คุณออกแบบโครงสร้างของ เวบ็ เพจไดอ้ย่างอิสระ โดยจะจดัวางเน้ือหาต่างๆลงตรงส่วนใดของหน้าก็ไดต้ ามตอ้งการ ไม่มีขอ้จา กดัว่า ตอ้งวางเป็นแถวและคอลมั น์เหมือนตาราง นอกจากน้ียงัสามารถใช้สร้างเอฟเฟ็คต์พิเศษได้อีกด้วยใน Dreamweaver คุณสามารถแปลง AP Element ไปเป็นตารางหรือกลบักนัก็ได้ จัดหน้าเว็บเพจด้วยเฟรม เฟรม (frame)คือการแบ่งพ้ืนที่บนวนิโดวส์ของบราวเซอร์ออกเป็นส่วนๆ เพื่อแสดงเน้ือหาจาก หลายเวบ็ เพจพร้อมๆกนั โดยมีเวบ็ เพจหลกั (frameset) เป็นตวัควบคุมการแบ่งพ้ืนที่และกา หนดว่าเวบ็ เพจใดจะถูกแสดงในเฟรมยอ่ ยใด Frame 1 Frame 2 Frame 3 จัดหน้าเว็บเพจด้วย CSS Layout เป็นเทคนิคที่กา ลงัไดร้ับความนิยมเพิ่มข้ึนเนื่องจากมีความยืดหยุ่นสูง แมว้า่ การเริ่มสร้างจะมี ข้นั ตอนที่ยุ่งยากกว่า แต่ Dreamweaver ก็ได้เตรียมรูปแบบโครงสร้างส าเร็จรูปที่นิยมกันทวั่ ไปให้ มาแลว้ ซ่ึงคุณสามารถนา มาปรับแต่งเพิ่มเติมได้