Chaper1

บทที่1 หลกั การออกแบบและพฒั นาเวบ็ ไซต์ 5663507N การออกแบบและพฒั นาเวบ็ ไซต์ DESIGN AND WEB DEVELOPMENT

หลกั การออกแบบและพฒั นาเวบ็ ไซต์  1. กระบวนการพฒั นาเวบ็ ไซต์  2. การใชส้ ี  3. การจดั ตวั อกั ษร  4. รปู ภาพและการจดั วาง  5. การออกแบบโครงสรา้ งหนา้ เวบ็  6. การออกแบบระบบเนวิเกชนั่

1. กระบวนการพฒั นาเวบ็ ไซต์  1.1 กระบวนการกาหนดวตั ถุประสงคแ์ ละวางแผน (Site objectives and planning)  1.2 การกาหนดเน้ ือหาและจดั โครงสรา้ งเวบ็ ไซต์ (Site Content and Structure)  1.3 การออกแบบเวบ็ ไซต์ (Website Design)  1.4 การพฒั นาเวบ็ ไซต์ (Website Development)  1.5 การเผยแพร่และส่งเสริมเวบ็ ไซต์ (Website Publishing and promote Website)  1.6 การดูแลและบารุงรกั ษาเวบ็ ไซต์ (Website maintenance and innovation)

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

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

1.1กระบวนการกาหนดวตั ถุประสงคแ์ ละวางแผน(ต่อ)  2) การกาหนดกลุ่มเป้าหมายท่ีจะเขา้ ใชง้ านเวบ็ ไซต์ เป็ นการศึกษาถึงกลุ่ม บุคคลท่ีเขา้ มาใชง้ านเวบ็ ไซต์ วธิ ีการศึกษากลุ่มเป้าหมายอาจจะใชว้ ธิ ี 5W+1H คือ

5W1H  Who ใคร หมายถึงกลุ่มเป้าหมายคือกลุ่มใด รสนิยมส่วนตวั เป็ นอย่างไร มี พฤติกรรมในการท่องเวบ็ ไซตอ์ ยา่ งไร  What อะไร หมายถึงส่ิงที่กลุ่มเป้าหมายตอ้ งการจากเวบ็ ไซต์ เป็ นการศึกษา ถึงความตอ้ งการของกลุ่มเป้าหมายท่ีตอ้ งการไดจ้ ากเวบ็ ไซต์  Where ที่ไหน หมายถึงกลุ่มเป้าหมายมาจากท่ีใด เป็ นกลุ่มคนในประเทศ หรือกลุ่มคนตา่ งประเทศ  When เม่ือไร หมายถึง เมือ่ ไรท่ีกลุ่มเป้าหมายจะเขา้ มาเยย่ี มชมเวบ็ ไซต์ และ เขา้ มาบอ่ ยมากนอ้ ยแคไ่ หน  Why ทาไม หมายถึง เหตุผลที่กลุ่มเป้าหมายตอ้ งเขา้ มาเย่ยี มชมเว็บไซต์  How อยา่ งไร หมายถึง วธิ ีการท่ีเวบ็ ไซตต์ อบสนองความตอ้ งการของ กลุ่มเป้าหมายกระทาดว้ ยวธิ ีการอยา่ งไร

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

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

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

ตวั อยา่ งแผนผงั โครงสรา้ งเวบ็ ไซตบ์ ริการจองตวั๋ ภาพยนตร์

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

ตวั อยา่ งการออกแบบเคา้ โครงของเวบ็ เพจ

ตวั อยา่ งหนา้ เวบ็ เพจจากเคา้ โครงที่ไดอ้ อกแบบ โดยมกี าร ใชเ้ ครื่องมอื ช่วยในการออกแบบ

1.4 กระบวนการพฒั นาเวบ็ ไซต์ (Website Development)  เป็ นข้นั ตอนที่รวบรวมขอ้ มลู จากขน้ั ตอนกาหนดเน้ ือหา การพฒั นาโครงสรา้ ง เวบ็ ไซต์ และการออกแบบมาพฒั นาเป็ นเว็บไซตท์ ี่สามารถทางานไดจ้ รงิ ตามวตั ถุประสงคท์ ่ีกาหนดไวต้ ้งั แต่เรมิ่ ตน้ พฒั นาเวบ็ ไซต์

1.5 กระบวนการเผยแพร่และส่งเสรมิ เวบ็ ไซต์  เป็ นข้นั ตอนการนาเวบ็ ไซตท์ ่ีพฒั นาเรยี บรอ้ ยแลว้ ข้ ึนเผยแพร่บนเครือขา่ ย อินเทอรเ์ น็ต และประชาสมั พนั ธใ์ หเ้ วบ็ ไซตเ์ ป็ นท่ีรจู้ กั ของกลุ่มเป้าหมายท่ีได้ วางแผนไวใ้ นขน้ั ตอนแรก โดยขน้ั ตอนการเผยแพร่เร่มิ จากที่ตอ้ งมีพ้ นื ที่ใน การจดั เกบ็ ไฟลบ์ นเครือขา่ ยอินเทอรเ์ น็ต หรือเรียกวา่ Web Hosting  จดทะเบียนช่อื เวบ็ ไซต์ หรือเรยี กวา่ ช่ือโดเมน (Domain Name)

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

2. การใชส้ ี 2.1 การเลือกใชส้ ีสาหรบั เวบ็ ไซต์ 2.2 ประโยชน์ของสีในเวบ็ ไซต์ 2.3 ความรูเ้ บืองตน้ เก่ียวกบั สีและการผสมสี 2.4 ความหมายของสีกบั ความรสู้ ึก 2.5 การใชส้ ีใหเ้ กดิ ประโยชน์ในเวบ็ ไซต์ 2.6 สีในเวบ็ ไซต์

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

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

3.3 ชุดสีพ้ นื ฐาน ชุดของสีพน้ ื ฐานที่นิยมใชจ้ ะพจิ ารณาจากวงลอ้ ของสี แบง่ เป็ น 7 ชุดดงั น้ี 1.3.1. ชุดสีรอ้ นและชุดสีเยน็ 1.3.2. ชุดสีแบบสีเดียว 1.3.3. ชุดสีแบบสามเสา้ 1.3.4. ชุดสีคลา้ ยกนั 1.3.5. ชุดสีตรงขา้ ม 1.3.6. ชุดสีตรงขา้ มขา้ งเคียง 1.3.7. ชุดสีตรงขา้ มขา้ งเคียงท้งั 2 ดา้ น

ตวั อยา่ ง ชุดสีแบบสีเดียว  ชุดสีแบบสีเดียว หรือ Monochromatic Color Scheme เป็ นชุดของสีท่ีเกิด จากสีบริสุทธเ์ิ พยี งค่าเดียว เกิดจากความเขม้ และอ่อนของสีที่แตกต่างกนั หลายระดบั

2.4 ความหมายของสีกบั ความรสู้ ึก  2.4.1สีแดงสื่อ ถึงความรกั การแขง่ ขนั หรือความกลา้ หาญโดยความหมายของสี แดง สามารถส่ือไดถ้ ึงเลือด หวั ใจ หรือไฟ รวมไปถึงดวงอาทิตย์ ใหค้ วามรูส้ ึก รอ้ นแรง ต่ืนเตน้ การใชส้ ีแดงตกแต่งเว็บไซตจ์ ะทาใหเ้ วบ็ ไซตด์ ูโดดเด่น มากขน้ึ  2.4.2 สีน้าเงิน หมายถึงทอ้ งฟ้า ทอ้ งทะเล ใหค้ วามรสู้ ึกสดชน่ื และอาจจะดูเรียบ งา่ ยใน เวลาเดียวกนั ความหมายในทางลบสีน้าเงินใหค้ วามรสู้ ึกหดหู่ เศรา้ หรือ เสียใจ  2.4.3 สีเขียว สื่อถึงตน้ ไม้ ธรรมชาติ และความสดชืน่ ใหค้ วามรูส้ ึกถึงความ ปลอดภยั ความอบอุน่ และความแข็งแรง  2.4.4 สีเหลือง ส่ือถึงแสงท่ีส่องยามเชา้ ใหค้ วามรูส้ ึกถึงความรา่ เริง ความ สนุกสนานและ ความสดใส หากใชส้ ีเหลืองตดั กบั สีเขียวจะทาใหเ้ ว็บไซตด์ ูโดดเดน่ มาก

2.4 ความหมายของสีกบั ความรสู้ ึก (ต่อ)  2.4.5 สีสม้ และสีนา้้ ตาลส่ือถึงเปลวไฟท่อนไมเ้ ป็ นสีที่ใหค้ วามรูส้ ึกเรียบงา่ ยแต่ โดดเด่น แฝงไปดว้ ยความแข็งแรง  2.4.6 สีขาว ส่ือถึงฤดูหนาวหรือความเยน็ ใหค้ วามรูส้ ึกสะอาด สบายตา เว็บไซต์ ทวั่ ไป มกั ใชส้ ีขาวเป็ นหลกั เพอ่ื ทาใหร้ ูส้ ึกถึงความเรียบงา่ ยของเวบ็ ไซต์ ในทางลบ สีขาวจะส่ือถึงความออ่ นแอ ความเจ็บป่ วยและความโศกเศรา้  2.4.7 สีดา สื่อถึงความลึกลบั ความน่ากลวั และความมืด เป็ นสญั ลกั ษณข์ องความ โศกเศรา้ สว่ นใหญ่มกั จะใชก้ บั สินคา้ ท่ีหรหู ราและมีเกยี รติสีดาทาใหเ้ ว็บไซตโ์ ดด เด่นหากทาเป็ นสีพน้ื จะทาใหส้ ีอนื่ ๆเด่นขน้ึ มา

ตวั อยา่ งการใชส้ ีที่สง่ ผลต่อความรสู้ ึก

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

3. การจดั ตวั อกั ษร 3.1 การจดั แนวตวั อกั ษร 3.2 การใชข้ นาดตวั อกั ษร 3.3 การใชส้ ีกบั ตวั อกั ษร

3.1 การจดั แนวตวั อกั ษร การจดั แนวตวั อกั ษรแบ่งออกเป็ น4รปู แบบคือ  3.1.1การวางชดิ ซา้ ยหรือการวางตวั อกั ษรแบบเสมอหนา้  3.1.2 การวางชดิ ขวา หรือ การวางตวั อกั ษรเสมอหลงั  3.1.3 การวางแบบจดั กึ่งกลาง หรือ การวางขอ้ มลู แบบตรงกลาง  3.1.4 การจดั ขอ้ มลู ชดิ ขอบดา้ นหนา้ และดา้ นหลง้ หรือการวางขอ้ มูลแบบ เสมอหนา้ และ เสมอหลงั

3.2 การใชข้ นาดตวั อกั ษร  การเลือกใชข้ นาดตวั อกั ษรในเวบ็ ไซต์ ควรเลือกใหพ้ อดีกบั วตั ถุประสงคใ์ น การใช้ เชน่ หาก เป็ นตวั อกั ษรหวั เรื่องควรเป็ นตวั อกั ษรท่ีมขี นาดใหญ่กวา่ ปกติและอาจจะมไี ล่สีที่แตกต่างกนั เพือ่ ให้ สงั เกตไดง้ ่าย หรืออาจจะใช้ ตวั อกั ษรที่มีขนาดใหญแ่ สดงโลโกข้ องเวบ็ ไซต์ การใชต้ วั อกั ษรขนาดใหญ่ จะ ทาใหร้ ้้ ู สึกสนใจและตอ้ งการติดตาม ส่วนขอ้ ความปกติควรจะมีขนาดที่ พอดีอา่ นไดง้ ่าย ขนาดที่นิยม ใชก้ นั คือขนาด14 พอยต์ โดยที่72พอยตจ์ ะมี ขนาดเทา่ กบั 1น้ ิว

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

4 ประเภทของรปู ภาพ  4.1 ภาพบิทแมพ (Bitmap) เป็ นภาพท่ีประกอบขน้ึ จากจุดสีขนาดเล็กจานวน มากเรียงไล่ เฉดสีกนั จนกลายเป็ นภาพๆ หน่ึง จุดสีเล็กๆ น้เี รียกวา่ พิกเซล (pixel) ซ่ึงภาพประเภทน้มี คี ่าท่ีแน่นอน ตายตวั เมอื่ ขยายขนาดภาพจึงหยาบและ เหน็ จุดสีชดั เจน ภาพประเภทบิทแมพไดแ้ ก่  GIF (Graphic Interchange Format) เป็ นภาพท่ีแสดงสีไดส้ งู สุด 256 สี เหมาะกบั ภาพโลโก้ การต์ นู ภาพลายเสน้ งา่ ยๆ ภาพตวั อกั ษร ไมม่ ีการไล่เฉดสีมากนัก ภาพ ชนิดนม้ี ีจุดเด่นเร่อื งการทาภาพเคล่ือนไหวและความโปรง่ ใส นามสกุลของไฟลช์ นิดนค้ี ือ .gif  JPG (Joint Photographic Expert Group) เป็ นภาพที่แสดงสีไดส้ งู สุด 16.7 ลา้ นสี เหมาะ กบั ภาพท่ีตอ้ งการการไล่เฉดสี เช่น ภาพถ่าย หรอื ภาพท่ีตอ้ งการความคมชดั ของสี นามสกุลของไฟลช์ นิดนค้ี ือ.jpg,.jpeg  PNG (Portable Network Graphic) เป็ นภาพที่แสดงสีไดเ้ ท่ากบั ไฟล์ GIF ในกรณีท่ีเป็ น PNG-8 และสามารถแสดงสีไดเ้ ท่ากบั ไฟล์ JPEG ในกรณที่เป็ น PNG-24 ท้งั สองแบบ สามารถเป็ นภาพที่มีพน้ื หลงั โปรง่ ใสไดโ้ ดยการโปรง่ สามารถไล่เฉดสีได้

4. ประเภทของรูปภาพ (ต่อ)  4.2 ภาพเวกเตอร์ (Vector) เป็ นภาพท่ีประกอบขน้ึ ดว้ ยคาสงั่ โปรแกรมและ ค่าตวั เลขซ่ึงเกิดจากการคานวณคา่ ทางคณิตศาสตร์ ภาพประเภทนจ้ี ะมี ความคมชดั คงเดิมไมว่ า่ จะขยายขนาดใหญ่เท่าใดก็ตามความละเอียดของ ภาพท่ีใชก้ บั เวบ็ ไซตก์ ็ยงั คงเดิม รปู ภาพที่แสดงในเว็บไซตค์ วรมีความละเอียดไมเ่ กิน 72 ppi เพราะความละเอียด ของหน้าจอผใู้ ช้ มีขนาดไมเ่ กนิ 72 ppi (ppi ยอ่ มากจาก Pixel per Inch คือ จานวนจุดสี (Pixel) ต่อ หน่ึงตารางน้ ิว (Inch) ซง่ึ บ่งบอกถึงความละเอียดของ ภาพกราฟิ กน้ันๆ วา่ ในหน่ึงตารางน้ ิวของภาพดงั กลา่ วประกอบไปดว้ ยจุดสีท้งั หมด กจ่ี ุดโดยมีหน่วยเป็ น ppi นัน่ เอง)และถา้ หากใส่ภาพที่มีความสูงมากกวา่ 72ppi ลงไปในเวบ็ ไซต์ ผใู้ ชก้ ็ไมส่ ามารถเห็นความแตกต่างไดเ้ ลย ดงั น้ันจงึ ควรเลือกใช้ ภาพที่มีความละเอียด พอดีเพราะจะทาใหเ้ ว็บไซตม์ ีขนาดใหญ่เกินไป

5.การออกแบบโครงสรา้ งหน้าเวบ็ โครงสรา้ งหนา้ เวบ็ หรือ Site Structure คือ การวางโครงสรา้ งท้งั หมด ของเวบ็ ไซตว์ า่ ประกอบไปดว้ ยขอ้ มลู อะไรบา้ ง และขอ้ มลู แต่ละสว่ นมีการ เชื่อมโยงกนั อยา่ งไร โดยการออกแบบ โครงสรา้ งหนา้ เวบ็ สามารถทาได4้ รปู แบบ ดงั น้ี 5.1 โครงสรา้ งแบบเรียงลาดบั (Sequential Structure) 5.2 โครงสรา้ งลาดบั ชน้ั (Hierarchical Structure) 5.3 โครงสรา้ งแบบตาราง (Grid Structure) 5.4 โครงสรา้ งแบบใยแมงมุม (Web Structure)

5.1 โครงสรา้ งแบบเรียงลาดบั (Sequential Structure)

5.2 โครงสรา้ งลาดบั ช้นั (Hierarchical Structure)

5.3 โครงสรา้ งแบบตาราง (Grid Structure)

5.4 โครงสรา้ งแบบใยแมงมุม (Web Structure)

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

6.1 ระบบเนวเิ กชนั่ 6.1.1 ระบบเนวเิ กชนั่ แบบลาดบั ชน้ั (Hierachical) เป็ นระบบที่มีการเชอื่ มโยง จากหนา้ โฮมเพจ ไปยงั หนา้ ยอ่ ยอ่นื ๆ ถดั ลงไปหรือยอ้ นกลบั ขน้ึ มาไดจ้ ากหนา้ ยอ่ ยมาหนา้ หลกั 6.1.2 ระบบเนวเิ กชนั่ แบบโกบอล (Global) เป็ นระบบที่มีการเชอ่ื มโยงถึงกนั ทุกหนา้ เวบ็ เพจของเวบ็ ไซตโ์ ดยทุกหนา้ ของเวบ็ เพจวางการเชอื่ มโยงไปยงั หนา้ เวบ็ เพจอน่ื ๆในเวบ็ ไซต์ 6.1.3 ระบบเนวเิ กชนั่ แบบโลคอล (Local) เป็ นระบบท่ีมีการเชอ่ื มโยงเฉพาะ หนา้ เวบ็ เพจ ที่เป็ นส่วนยอ่ ยของเนอ้ื หาหลกั ในเวบ็ เพจน้ัน 6.1.4 ระบบเนวเิ กชนั่ แบบเฉพาะท่ี (Ad Hoc) เป็ นระบบเนวเิ กชนั่ ที่สรา้ งขน้ึ มา เฉพาะที่ตามความจาเป็ นของเน้ ือหาในหนา้ เวบ็ เพจน้ันๆ

6.2 รปู แบบเนวเิ กชนั่ 6.2.1 เนวเิ กชนั่ บาร์ (Navigation Bar) จะประกอบดว้ ยกลุ่มของลิงคต์ ่างๆ ท่ีอยู่ ร่วมกนั ในบริเวณหนึ่งของหนา้ เวบ็ เพจโดยอาจเป็ นตวั หนังสือหรือรปู ภาพกราฟิ ก

6.2 รูปแบบเนวเิ กชนั่ 6.2.2 เนวเิ กชนั่ บารร์ ะบบเฟรม (Frame-Based) จะใชค้ ุณสมบตั ิของเฟรมท่ี สามารถแบง่ หนา้ จอออกเป็ นหลายไฟลม์ าสรา้ งเป็ นระบบเนวเิ กชนั่ โดยมีเฟรมที่ ทาหนา้ ที่คุมการแสดงผลทาใหผ้ ูใ้ ชเ้ ขา้ ถึงระบบเนวเิ กชนั่ ไดต้ ลอด

6.2 รูปแบบเนวเิ กชนั่ 6.2.3 เนวเิ กชนั่ แบบ Pull down Menu เป็ นเนวเิ กชนั่ ที่มรี ายการยอ่ ยจาก รายการหลกั เมอื่ ผูใ้ ชน้ าเมาสไ์ ปวางเหนือตาแหน่งของรายการหลกั จะปรากฏ รายการยอ่ ยออกมาใหเ้ ลือกโดยแสดงผล ในลกั ษณะจากบนลงล่าง เหมาะ สาหรบั เวบ็ เพจท่ีไมม่ พี น้ื ที่ใหจ้ ดั วางเนวเิ กชนั่

6.2 รูปแบบเนวเิ กชนั่ 6.2.4 เนวเิ กชนั่ แบบ Pop-Up Menu เป็ นเนวเิ กชนั่ ที่มรี ายการหรอื รายการยอ่ ย ใหเ้ ลือกเมือ่ ผูใ้ ชน้ าเมาสไ์ ปวางเหนือตาแหน่งของวตั ถุใดๆบนเว็บเพจ

6.2 รูปแบบเนวเิ กชนั่ 6.2.5 Image Map เป็ นการนาภาพมาสรา้ งเป็ นตวั เชอ่ื มโยงไปยงั ส่วนต่างๆ ท่ี ตอ้ งการ เมอื่ ผูใ้ ชน้ าเมาสไ์ ปวางเหนือรปู ภาพจะปรากฎคาอธิบายสนั้ ๆและเมอ่ื คลิกรูปก็จะทาการเชอ่ื มโยงไปยงั หนา้ เวบ็ เพจหรือตาแหน่งที่ระบุในคาอธิบาย

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

6.3 องคป์ ระกอบของระบบเนวเิ กชัน่ เสริม  6.3.1 ระบบสารบญั (Table Contents) เป็ นการแสดงรายการขอ้ มลู ท้งั หมดภายในเวบ็ ไซตโ์ ดยแบ่งเนอ้ื หาออกเป็ นหมวดหมแู่ ลว้ ทาการเชื่อมโยงไป ยงั เวบ็ เพจขอ้ มลู

6.3 องคป์ ระกอบของระบบเนวเิ กชัน่ เสริม 6.3.2 ระบบดชั นี (Index System) เป็ นการนาเอาคาหรือขอ้ ความมาจดั เรียง ตามตวั อกั ษรเพอ่ื ใหผ้ ูใ้ ชส้ ามารถใชง้ านไดง้ า่ ย เหมาะกบั เวบ็ ไซต์ท่ีมขี อ้ มลู ปริมาณมาก และผูใ้ ชร้ ถู้ ึงช่อื ท่ีตอ้ งการคน้ หาอยแู่ ลว้

6.3 องคป์ ระกอบของระบบเนวเิ กชัน่ เสริม 6.3.3 แผนที่เวบ็ ไซต์ (Site Map) เป็ นการแสดงโครงสรา้ งขอ้ มลู ในเวบ็ ไซต์ แบบกราฟิ ก เพอื่ ความสวยงามและสื่อความหมายของเนอ้ื หา ทาใหเ้ ขา้ ใจไดง้ า่ ย ผูใ้ ชส้ ามารถคลิกเลือกหนา้ เวบ็ เพจ็ ในแผนท่ีเวบ็ ไซตเ์ พ่อื นาทางไปสหู่ นา้

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

6.4 พ้ นื ฐานของระบบเนวเิ กชนั่  ตอนน้ ีกาล้งั อยทู่ ่ีใด แสดงตาแหน่งหรือหนา้ ท่ีอยปู่ ัจจุบนั ได้  จากท่ีอยปู่ ัจจุบนั สามารถไปยงั ที่ใดไดบ้ า้ ง  จะไปสสู่ ่ิงต่างๆ ไดอ้ ยา่ งไร เสน้ ทางที่เลือกสามารถ คลิกไปตามเสน้ ทางท่ี เลือกตามหวั ขอ้ ต่างๆ ไดอ้ ยา่ งไร  จะกลบั มาท่ีเดิมไดอ้ ยา่ งไร โดยไมใ่ ชป้ ่ ุม back บน browser