หน่วยที่ 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 ตารางที่ 2.1 การจดั หนา้ เวบ็ เพจดว้ ยเฟรมจัดหน้าเวบ็ เพจด้วย CSS Layout เป็ นเทคนิคที่กาลงั ไดร้ ับความนิยมเพิ่มข้ึนเนื่องจากมีความยืดหยุน่ สูง แมว้ า่ การเร่ิมสร้างจะมีข้นั ตอนท่ียุ่งยากกว่า แต่ Dreamweaver ก็ได้เตรียมรูปแบบโครงสร้างสาเร็จรูปท่ีนิยมกันทวั่ ไปให้มาแลว้ ซ่ึงคุณสามารถนามาปรับแตง่ เพ่ิมเติมได้