powerpoint-02

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

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

แนวทางในการออกแบบเวบ็ ไซตท์ ่ีดี 1. มีความเป็นเอกภาพ 5. มีภาพลกั ษณ์ท่ีน่าเชื่อถือ 2. มีประโยชน์ 6. มีภาพประกอบและลิงกค์ รบถ้วน 3. มีระบบเช่ือมโยงที่ดี 7. ใช้งานได้ทนั ทีกบั ทกุ คน 4. มีรปู ลกั ษณ์ท่ีดึงดดู 4

เนื้อหาที่ควรมีในเวบ็ ไซต์ 1. เนื้อหาหลกั ของเวบ็ ไซต์ 2. ข้อมลู เกี่ยวกบั องคก์ ร บริษทั หรือผจู้ ดั ทาเวบ็ ไซต์ 3. ข่าวสารของเวบ็ ไซต์ 4. คาถามที่พบบอ่ ย (Frequently Asked Question ; FAQ) 5. ข้อมลู สาหรบั การติดต่อเป็นข้อมลู สาคญั ท่ีต้องมี 5

ส่วนประกอบของเวบ็ เพจ 1. Page Header 2. Navigation Bar 3. Page Body 4. Page Footer 6

การออกแบบโครงสรา้ งเวบ็ ไซต์ 1. แบบเรียงลาดบั (Sequence) คือ โครงสร้างเวบ็ ไซตแ์ บบเช่ือมโยงเวบ็ เพจแต่ละหน้าเป็นลาดบั ๆ เหมือนเรียงหน้าหนังสือ โดยสามารถคลิกไป-กลบั ระหว่างหน้าต่าง ๆ หรอื กลบั มาที่หน้าโฮมเพจได้ แบบเรียงลาดบั จะเหมาะกบั เวบ็ ไซตท์ ่ีเนื้อหา ไม่มาก หรอื ต้องการแสดงเนื้อหาแบบเป็นลาดบั ขนั้ ตอน 7

2. แบบระดบั ชนั้ (Hierarchy) คือ โครงสรา้ งเวบ็ ไซตท์ ี่มีหน้าเวบ็ เพจหลกั (Home) และจะเชื่อมโยง ไปยงั เนื้อหาในเวบ็ เพจแยกย่อยลงไปเป็นกล่มุ ๆ โดยในแต่ละกล่มุ ที่ เช่ือมโยงย่อย ๆ ลงไป อาจมีการเช่ือมโยงไปยงั หลาย ๆ เวบ็ เพจย่อยลงไป อีก เป็นระดบั ขนั้ โดยจะเช่ือมโยงกนั ระหว่างระดบั ล่าง-บนเท่านัน้ ไม่มีการ เชื่อมโยงในระดบั เดียวกนั เป็นโครงสร้างเวบ็ ไซตท์ ี่นิยมใช้งานมากที่สดุ 8

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

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

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

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

การเลือกใช้รปู แบบตวั อกั ษร 1. ใชร้ ปู แบบตวั อกั ษร Font ใหเ้ หมาะสม เชน่ หากเป็นเน้ือความสว่ นทต่ี อ้ งอา่ นมาก ๆ ควรเลอื กใชร้ ปู แบบตวั อกั ษรประเภทมหี วั โดยทวั่ ไปทน่ี ิยมใชส้ าหรบั เน้ือความจะ เป็น AngsanaNews, THSarabunPSK, Tahoma เป็นตน้ สว่ นการใชร้ ปู แบบ ตวั อกั ษรบรเิ วณทเ่ี ป็นหวั ขอ้ หรอื กราฟิกนนั้ สามารถใชร้ ปู แบบตวั อกั ษรทม่ี ลี กู เลน่ สวยงามได้ 2. เลอื กขนาดรปู แบบตวั อกั ษรใหเ้ หมาะสม หากใชต้ วั อกั ษรทม่ี ขี นาดเลก็ หรอื ใหญ่ เกนิ ไป จะทาใหอ้ า่ นไดย้ าก โดยทวั่ ไปขนาดทน่ี ิยมใชแ้ ละอ่านงา่ ยอยทู่ ่ี 14-18 pt. 3. เลอื กรปู แบบการจดั แถวขอ้ ความ (Align) ใหเ้ หมาะสม โดยจะมสี ามแบบ คอื ชดิ ซา้ ย อยกู่ ง่ึ กลาง และชดิ ขวา เชน่ หากเป็นหวั ขอ้ อาจจะไวต้ รงกลางหน้ากระดาษ เป็นตน้ 13

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

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

เวบ็ โฮสติ้ง (Web Hosting) คือ พืน้ ท่ีจดั เกบ็ ไฟล์ html หรอื ไฟลใ์ ด ท่ีใช้ในเวบ็ ไซตท์ วั่ ไปรวมไปถึงเวบ็ เพจทงั้ หมด ในกรณีนี้สามารถออกแบบ เวบ็ ไซตใ์ ห้เสรจ็ ก่อนท่ีจะจดทะเบียนเวบ็ โฮสติ้งได้ เวบ็ โฮสติ้งจะมีทงั้ แบบ ไม่มีค่าใช้จ่าย (มกั จะอย่คู ่กู บั การจดโดเมนเนม และมกั บงั คบั ให้มีชื่อของ โฮสติ้งอย่ใู นช่ือโดเมนเนมที่จะใช้) และมีค่าใช้จ่าย ซึ่งโดยทวั่ ไปหากจด ทะเบียนไว้ก่อนสร้างเวบ็ ไซตเ์ สรจ็ อาจกินเวลาท่ีคิดสาหรบั ค่าใช้จ่ายใน เวบ็ โฮสติ้งนัน้ ๆ การจะให้เวบ็ ไซตพ์ ร้อมใช้งาน จาเป็นต้องลงทะเบียนทงั้ สองอย่างดงั กล่าวเตรียมไว้ จากนัน้ จึงเช่ือมโยงโดเมนเนมกบั เวบ็ โฮสติ้ง เข้าด้วยกนั จึงสามารถอปั โหลดเวบ็ ไซตท์ ี่ เตรียมไวข้ ึน้ ไปใช้งานได้ 16

การอปั โหลดเวบ็ ไซต์ เม่ือทาการพฒั นาและตรวจสอบเวบ็ ไซต์ รวมไปถงึ การเตรียม โดเมนเนมและเวบ็ โฮสติ้งเรียบร้อยแล้ว ขนั้ ตอนต่อไป คือ การอปั โหลด เวบ็ ไซต์ ในท่ีนี้จะใช้การอปั โหลดผา่ น Adobe DreamweaverCS6 โดย ขนั้ ตอนการอปั โหลดโดยละเอียดจะกล่าวถึงต่อไปในบทของการนา เวบ็ ไซตไ์ ปใช้งานอีกครงั้ เมื่ออปั โหลดเสรจ็ แล้วอาจมีการประชาสมั พนั ธ์ เวบ็ ไซตใ์ ห้คนทวั่ ไปรจู้ กั และเข้ามาใช้งาน เช่น ผา่ นการบอกปากต่อปาก โซเชียลเน็ตเวิรก์ หรือใช้บริการของ Search Engine ต่าง ๆ ที่มีบริการให้ โปรโมทเวบ็ ไซต์ โดยอาจมีค่าใช้จ่ายในการนาเวบ็ ไซตไ์ ปเผยแพร่ เช่น Google AdSense เป็นต้น 17