โครงสร้างเว็บไซต์

การสร้างเวบ็ ไซตด์ ว้ ย Adobe Dreamweaver By ครูววี ่ี

เอกสารประกอบการเรยี นการสอน

ในรปู แบบออนไลน์

โโ

วิชาคอมพวิ เตอร์
เรอ่ื ง หลกั การ ออกแบบเวบ็ ไซตข์ น้ั พนื้ ฐาน

คณุ ครู ยาวรี า่ เหมเสม็

ครผู สู้ อน

โรงเรยี นอัรรอยยานพทิ ยานุสรณ์

การสร้างเวบ็ ไซต์ดว้ ย Adobe Dreamweaver By ครวู ีว่ี

ใบความรู้
เรื่อง หลกั การ ออกแบบเว็บไซตข์ ้ันพืน้ ฐาน

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

การออกแบบเวบ็ ไซตเ์ พ่ือให้มปี ระสิทธิภาพ และสามารถดึงดูดความสนใจของผคู้ นได้ดี จะตอ้ งมอี งค์ประกอบของ
เว็บไซต์อย่างครบถ้วน ซ่ึงได้แก่
1. ความเรยี บงา่ ย เขา้ ใจงา่ ย
การออกแบบเวบ็ ไซต์ท่ีดี จะต้องเน้นที่ความเรียบง่ายเป็นหลกั โดยเลือกนำเสนอเฉพาะสิ่งทีต่ ้องการนำเสนอจรงิ ๆ ใน
รูปแบบทห่ี ลากหลาย โดยอาจจะเปน็ สีสัน กราฟิก ภาพเคลอื่ นไหวหรอื ตวั อักษร ที่สำคัญจะต้องมกี ารนำเสนอท่ไี ม่ดูรก
หน้าเว็บจนเกนิ ไป เพ่ือไม่ใหเ้ กิดความรู้สึกรกสายตา หรือสร้างความเบ่ือหนา่ ย น่ารำคาญใหก้ บั ผู้ท่ีเข้าชมเว็บไซต์ มี
ตัวอยา่ งเวบ็ ไซต์ที่มีการออกแบบโดยเนน้ ความเรียบง่ายได้ดี คือ Apple, Nokia และ Microsoft เปน็ ตน้

2. ความสม่ำเสมอ ไมส่ ับสน

การสร้างเว็บไซต์ด้วย Adobe Dreamweaver By ครวู ีว่ี

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

8. ความคงทีข่ องการออกแบบ

การสร้างเว็บไซต์ดว้ ย Adobe Dreamweaver By ครวู ีวี่

การออกแบบเวบ็ ไซต์ควรจะมีความคงที่ในการออกแบบ ด้วยการสร้างเว็บไซตด์ ว้ ยแบบแผนเดียวกนั และมกี ารเรยี บ
เรยี งเนื้อหาอย่างรอบคอบ ทำให้เว็บมคี วามนา่ เชอื่ ถือ และดูมีคณุ ภาพ ชว่ ยสรา้ งความประทบั ใจให้กบั ผ้ใู ช้งานได้เปน็
อย่างดี
9. ความคงทขี่ องการทำงาน
ระบบการทำงานบนเว็บไซต์จะตอ้ งมีความคงที่ และสามารถใชง้ านไดด้ ี ซึ่งนอกจากการออกแบบระบบการทำงานให้มี
ความทนั สมยั และสรา้ งสรรค์แล้ว ก็จะต้องหม่นั ตรวจสอบอยเู่ สมอ เพราะหากระบบการใชง้ านมคี วามผิดปกติก็จะได้
แกป้ ัญหาไดท้ ัน นอกจากนอ้ี าจมกี ารอัพเดตดีไซน์ให้ทนั สมัยขึ้นบ่อยๆ เพือ่ ให้ผ้ใู ชง้ านรสู้ ึกสนุกไปกับการใช้งานเว็บไซต์
หลกั การออกแบบทง้ั หมด เป็นหลักการออกแบบท่ี 1Belief นยิ มใช้เพื่อสร้างเวบ็ ไซต์ใหก้ ับลูกค้า ทีเ่ รารับทำการตลาด
ออนไลน์ รวมไปถึงรับดูแลเวบ็ ไซต์ หลกั การเดน่ ที่สุดสำหรับเวบ็ ไซต์เพื่อการขายสนิ คา้ และบรกิ าร คือ ความ
น่าเชื่อถอื รองลงมาคือ การออกแบบโครงสร้างให้เหมาะกับ Search Engine เพื่อให้ง่ายตอ่ การทำ SEO ในอนาคต
รปู แบบโครงสร้างของเว็บไซต์
การออกแบบโครงสรา้ งของเว็บไซต์ สามารถทำได้หลากหลายแบบ ซงึ่ ก็ขึ้นอยู่กบั ความชอบและความถนัดของแตล่ ะ
บคุ คล นอกจากนีย้ งั ข้ึนอยู่กบั กล่มุ เป้าหมายท่ตี ้องการนำเสนอ เพราะจะต้องออกแบบให้เหมาะกับการใช้งานของ
กลุ่มเปา้ หมายมากที่สุด โดยโครงสร้างของเวบ็ ไซตส์ ว่ นใหญก่ ็จะประกอบไปด้วย 4 รูปแบบดงั นี้
1. โครงสรา้ งแบบเรยี งลำดับ

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

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

การสร้างเว็บไซตด์ ว้ ย Adobe Dreamweaver By ครวู วี ่ี

3. โครงสรา้ งแบบตาราง

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

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

การสรา้ งเว็บไซต์ดว้ ย Adobe Dreamweaver By ครวู ีว่ี

จดั โครงสรา้ งตามกลุ่มผูช้ ม (User-based Structure)
การออกแบบเว็บไซต์ ต้องคำนงึ ถงึ อะไรบ้าง
การออกแบบเวบ็ ไซต์ที่ดจี ะต้องคำนึงถงึ หลายๆ อยา่ งดว้ ยกัน โดยมี 9 ข้อหลักๆ ท่คี วรคำนงึ ถึงดังนี้
ความเรยี บง่าย เว็บไซต์ทดี่ คี วรมีรูปแบบทีเ่ รียบงา่ ยและไม่ซับซอ้ น เพ่อื ใหผ้ ูช้ มสามารถใชง้ านเว็บไซตไ์ ด้อยา่ งสะดวก
มากข้ึน โดยเฉพาะพวกกราฟฟิคท้ังหลาย จะต้องไมใ่ ชต่ วั อักษรทีเ่ คลื่อนไหวอยตู่ ลอดเวลา และไม่มสี สี ันทีด่ แู สบตา
จนเกินไป
ความสม่ำเสมอ คือการเลือกใช้รูปแบบ กราฟฟิค โทนสี และการตกแตง่ หรือการแสดงผลตา่ งๆ ในเวบ็ ไซต์ให้เป็น
รูปแบบเดียวกนั หรอื คลา้ ยคลึงกันตลอดทงั้ เว็บ
ความเปน็ เอกลกั ษณ์ เวบ็ ไซต์ควรมีเอกลักษณ์เฉพาะตัว ท่สี ามารถบง่ บอกได้ถึงความเป็นบรษิ ทั องคก์ รหรือแบรนด์
ต่างๆ ตัวอย่างเชน่ เวบ็ ไซต์ของ 1 Belief จะมีสฟี ้า ทเี่ ปน็ เอกลักษณ์ของบริษทั อยบู่ นเว็บ
เนอ้ื หา โดยเนือ้ หาท่นี ำมาลงในเว็บ ควรเปน็ เนื้อหาทีม่ ีความเก่ยี วข้องกับเว็บ หรืออาจเป็นเนื้อหาที่ไดส้ าระ มีประโยชน์
สามารถดึงดูดความสนใจของผูค้ นได้ดี และทส่ี ำคัญจะต้องมีความถูกต้อง สมบูรณแ์ ละมีความทนั สมยั
ระบบเนวิเกชัน ควรออกแบบให้สามารถใชง้ านได้ง่ายและสะดวก สอื่ ความหมายตา่ งๆ และอธบิ ายไดอ้ ย่างชดั เจน
รวมถงึ ต้องมีรูปแบบ และลำดับรายการทม่ี ีความสมำ่ เสมอ
ลกั ษณะเด่น ส่วนนี้จะถือเป็นหน้าตาของเว็บไซต์เพ่ือใชใ้ นการดึงดดู ลกู ค้า อาจออกแบบลักษณะเด่นของเว็บใหต้ รงกบั
ความชอบส่วนใหญ่ของกลุ่มเปา้ หมาย หรือจะออกแบบให้สมั พนั ธป์ ระเภทของเว็บ และคณุ ภาพขององคป์ ระกอบตา่ งๆ
บนเว็บ
การใชง้ านทไี่ มจ่ ำกัด การทำเว็บไซต์ใหร้ องรับการเขา้ ใช้งานจากหลายระบบ ไม่วา่ จะเป็นการเข้าใช้งานจากเครื่อง PC
สมารท์ โฟน หรอื การใช้เบราเซอรต์ า่ งๆ ในการเข้าใชง้ าน
คณุ ภาพในการออกแบบ จำเป็นตอ้ งทำเว็บไซต์ให้มีคุณภาพมากทสี่ ดุ ไม่ว่าจะเปน็ ในเร่ืองของการเรียบเรียงเน้ือหา
อยา่ งรอบคอบ การตรวจสอบความถูกต้องและการทำให้เว็บไซต์มีความนา่ เช่ือถือ
การเชือ่ มโยงไปยงั ลิ้งคต์ า่ งๆ ซงึ่ จะต้องเชื่อมโยงไปยังหนา้ เวบ็ ทม่ี ีอยู่จริง และมเี น้ือหาทเ่ี ก่ยี วพนั กัน และควรหมน่ั
ตรวจสอบอยู่เสมอ วา่ ระบบการเช่ือมโยงยังคงทำงานไดต้ ามปกตแิ ละมีความถูกต้อง แม่นยำ อยูห่ รอื ไม่
ส่วนประกอบสำคญั บนหนา้ เวบ็ เพจ ที่ต้องมี
บนหนา้ เว็บเพจ จะมีสว่ นประกอบสำคัญท่จี ำเปน็ ต้องมอี ยู่ 3 ส่วน ได้แก่
1. สว่ นหัวของหนา้ (Header)
อยู่ตอนบนสุดของหนา้ และเป็นสว่ นทสี่ ำคญั ท่ีสุด โดยจะต้องทำให้สามารถดงึ ดูดผชู้ มใหร้ ู้สกึ อยากตดิ ตามเน้ือหาใน
เวบ็ ไซต์ตอ่ ไป ซง่ึ ส่วนใหญ่ก็มักจะมีการใส่ภาพกราฟฟิคให้ดสู วยงาม สง่ิ สำคญั หลักๆ เลย กค็ ือ โลโก้ ชือ่ เว็บไซต์และเมนู
หลักทส่ี ามารถลิง้ ค์ไปยังเนอ้ื หาในหน้าเว็บเพจตา่ งๆ ได้
2. ส่วนของเนอ้ื หา (Body)
อยู่บรเิ วณตอนกลางของหนา้ เว็บ โดยจะแสดงขอ้ มลู เกี่ยวกับเนือ้ หาบนเว็บแบบครา่ วๆ ซง่ึ ก็จะมขี ้อความ กราฟฟิค
ตารางข้อมลู หรอื วิดีโอประกอบอยู่ และหากมเี มนูแบบเฉพาะกลมุ่ กจ็ ะถูกจัดไวใ้ นหน้าน้เี ช่นกนั และทส่ี ำคัญเน้ือหาใน
สว่ นน้ีควรจะมีความกระชบั เขา้ ใจง่าย มีการใช้รูปแบบตวั อักษรแบบเรียบง่ายและเปน็ ระเบยี บ

การสร้างเว็บไซตด์ ้วย Adobe Dreamweaver By ครูววี ี่

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

วธิ ีการเลือกใชส้ ีสำหรับการออกแบบเว็บไซต์
การเลือกใชส้ ีในการออกแบบเว็บไซต์มคี วามสำคัญเป็นอย่างมาก เพราะสสี ามารถกำหนดอารมณ์ ความรู้สกึ และกระตุ้น
การรับรู้ทางด้านจิตใจของมนุษยไ์ ดด้ ี ดงั น้ันสีทใ่ี ช้จึงต้องมคี วามสอดคลอ้ งกับเนื้อหาและจดุ ประสงค์ของเวบ็ วา่ ตอ้ งการ
ให้ผเู้ ข้าชมร้สู ึกอย่างไรต่อเนื้อหาท่ไี ด้อ่าน โดยรูปแบบของสีทสี่ ายตาของมนุษย์สามารถมองเห็นได้กแ็ บง่ ออกเป็น 3
กลุ่มดังต่อไปนี้
สโี ทนรอ้ น (Warm Colors) เปน็ สีแหง่ ความอบอุ่น ปลอบโยนและกระตุน้ ความสขุ ได้ดี ซงึ่ จะทำใหผ้ ู้เขา้ ชมรสู้ ึกมี
ชวี ิตชีวาและมแี รงผลกั ดันมากขนึ้ อีกทงั้ ยังชว่ ยดึงดูดใหผ้ ู้ชมรูส้ กึ อยากตดิ ตามเน้ือหามากขน้ึ
สีโทนเย็น (Cool Colors) เปน็ สีแห่งความสภุ าพและความอ่อนโยน ทำให้ผชู้ มรู้สกึ ผอ่ นคลายและเพลดิ เพลนิ มากข้ึน
และยงั สามารถใชโ้ น้มนา้ วจากในระยะไกลได้อกี ดว้ ย
สโี ทนกลาง (Neutral Colors) สเี หล่าน้ีมักจะถูกนำไปผสมกบั สีอน่ื ๆ เพื่อใหเ้ กดิ สีท่เี ปน็ กลางมากขึ้น และให้ความรูส้ ึก
ท่เี ปน็ ธรรมชาติ
สีสามารถสอ่ื ถึงอารมณค์ วามรู้สกึ และสือ่ ความหมายของเวบ็ ไซต์น้ันๆ ไดอ้ ย่างชัดเจน ดงั นั้นหากเลือกใชส้ ีไม่เหมาะสม
กบั เนื้อหาหรือจดุ ประสงค์ของเวบ็ ก็จะทำให้เว็บดูไม่น่าสนใจ ขาดความน่าเช่ือถือและทำให้ผู้ท่ีเคยเข้ามาใช้บริการไม่
คิดจะกลับมาใชบ้ ริการอกี
ประโยชน์ของสใี นรูปแบบต่างๆ
ช่วยชกั นำใหผ้ ้อู ่านเกดิ ความสนใจในเนื้อหาบางจุด บางตำแหนง่ บนหน้าเวบ็ และทำให้ผอู้ ่านรู้สกึ อยากติดตามเน้ือหา
ในบริเวณท่ีเราใช้สกี ำหนดไว้มากขน้ึ โดยจะตอ้ งเลือกใชส้ อี ยา่ งรอบคอบ และเป็นสีทส่ี ามารถเน้นความโดดเดน่ ของ
เนอ้ื หาในส่วนนนั้ ไดด้ ี ซึ่งสว่ นใหญ่จะนยิ มใชส้ เี พื่อชกั นำในส่วนของข้อมลู ใหม่ๆ โปรโมชัน่ พิเศษ หรือเนอื้ หาในสว่ นท่ีไม่
คอ่ ยได้รบั ความสนใจ เป็นต้น
ช่วยในการเชือ่ มโยงขอ้ มูลที่มคี วามสัมพันธ์แบบไมเ่ ด่นชัดเข้าดว้ ยกัน เพ่ือไม่ให้ผู้อา่ นมองข้ามข้อมลู บางสว่ นไป
เพราะการใช้สีในลกั ษณะนี้จะทำใหผ้ อู้ ่านรู้สกึ ว่าเน้ือหาบรเิ วณท่มี สี ีเดยี วกนั นา่ จะมคี วามสำคัญเทา่ ๆ กนั

การสรา้ งเวบ็ ไซต์ดว้ ย Adobe Dreamweaver By ครวู วี ี่

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

Responsive เป็นวิธีการออกแบบเวบ็ ไซต์เพื่อให้รองรับกับขนาดของหนา้ จออุปกรณ์ทุกชนดิ ไมว่ ่าจะเปน็ คอมพิวเตอร์
โน๊ตบุ๊ค สมารท์ โฟนและแท็บเล็ต เนอ่ื งจากอุปกรณเ์ หลา่ น้ลี ว้ นมีขนาดหนา้ จอทต่ี า่ งกนั จึงจำเปน็ ต้องออกแบบเวบ็ ให้ใช้
งานไดก้ ับทุกขนาดหน้าจอในคร้งั เดียว
ทำไมต้อง Responsive Design?
Responsive Web Design เป็นการพัฒนาเว็บไซตท์ ่ีกำลังได้รับความนยิ มมากในปัจจุบัน มีจดุ มุ่งหมายเพ่ือให้ User
สามารถใช้งานได้งา่ ยท่ีสุด และชว่ ยประหยัดเวลา ค่าใช้จา่ ยในการพัฒนาเวบ็ ไซต์ไดด้ ี เพราะการพฒั นาเว็บไซตใ์ น
รปู แบบนี้ จะใช้ Source Code เพยี งชุดเดียว แตส่ ามารถปรับการแสดงผลให้เหมาะกบั อุปกรณต์ า่ งๆ ได้อยา่ งมี
ประสทิ ธภิ าพ สำหรับเทคนิคทีใ่ ช้ในการทำ Responsive Web Design น้นั ก็คือ JavaScript และ CSS3 ซึง่ ทำให้
สามารถเขา้ ใชง้ านเว็บไซต์ไดง้ ่ายขน้ึ และไมต่ ้องคำนึงถึงขนาดหน้าจอหรอื ชนิดของอุปกรณท์ ใ่ี ช้ในการเขา้ เว็บ
ประโยชน์จากการทำเวบ็ ไซต์ Responsive Web Design
สามารถติด Index Google ได้ท้งั บน desktop และ mobile ในหนา้ เดียว นน่ั ก็เพราะเปน็ รูปแบบเว็บไซต์ท่ไี ด้รบั การ
รบั รองจาก Google
รองรบั ได้ทกุ อปุ กรณ์เพยี งแค่ไซต์เดยี ว ไมต่ ้องทำหลายหนา้ และไมท่ ำใหห้ นักเซิฟเวอรจ์ นเกนิ ไป
ประหยัดเวลาและค่าใชจ้ ่ายในการทำ สง่ ผลใหก้ ารพฒั นาเวบ็ ไซต์เปน็ ไปอยา่ งรวดเรว็ ย่ิงข้ึน

การสรา้ งเวบ็ ไซต์ดว้ ย Adobe Dreamweaver By ครวู วี ่ี

ดแู ลและจัดการเว็บไซต์ไดอ้ ย่างรวดเรว็ และไม่ยุ่งยาก
ไมต่ ้องเสียเวลากับการ Redirect เพื่อไปหาหน้าท่เี ป็น Mobile
สามารถทำ SEO ผ่าน Mobile ได้อยา่ งง่าย เพราะ Googlebot-mobile สว่ นใหญ่ จะใหค้ วามสนใจกบั เวบ็ ทีร่ องรับ
อปุ กรณ์ Mobile โดยตรง
การคน้ หาผ่าน Mobile สามารถทำได้งา่ ยขน้ึ กวา่ เดมิ
ข้อเสียของ Responsive Web Design
ถงึ แมว้ า่ Responsive Web Design จะมปี ระโยชนแ์ ละสามารถใช้งานไดง้ า่ ยบนทุกอุปกรณ์ แตก่ ็ยังคงมีขอ้ เสียอย่บู า้ ง
ก็คืออาจทำให้เกดิ ปัญหาในการใชง้ านได้ เชน่ การที่ข้อมูลบางอย่างทไี่ มจ่ ำเป็นถูกโหลดเข้ามา ท้ังทป่ี กติควรจะซ่อนไว้
หรือในเรือ่ งของ Image Resizing ทีจ่ ำเปน็ ตอ้ งโหลดรูปเดียวกับรูปท่ใี ช้แสดงบน Desktop จึงทำให้เกิดการเสียเวลา
โดยที่ไมจ่ ำเปน็ โดยปัญหาเหล่านีก้ ็มักจะเกดิ ขึน้ ได้บอ่ ยๆ
ข้อจำกัดของการทำ Responsive Web Design
นอกจากข้อเสยี ดังกลา่ วแล้ว การทำ Responsive Web Design ก็มขี ้อจำกดั เช่นกนั นัน่ คือ
เวบ็ ไซตท์ ่ที ำข้ึนมาห้ามเปน็ Flash เดด็ ขาด!! เพราะอปุ กรณ์บางอย่างไม่รองรับการใช้งานแบบ Flash อย่างเชน่
iPhone และ iPad ซงึ่ จะทำให้เกิดการติดขัดในการใช้งานได้
มีข้อจำกัดในการออกแบบเว็บไซต์พอสมควร เพราะเวบ็ ไซต์ในรูปแบบนี้จะสามารถออกแบบใหเ้ ป็นลักษณะกล่องหรือ
Block ไดเ้ ทา่ นนั้ หากต้องการออกแบบให้ดูแปลกออกไปจะไมส่ ามารถทำได้ หรือทำไดย้ ากและมีความซบั ซอ้ นมาก
มคี วามยงุ่ ยากในการแก้ไขสูง ดงั น้ันจงึ ต้องวางแผนใหด้ แี ละคิดใหร้ อบคอบก่อนออกแบบ จะได้ไม่ต้องย้อนกลบั มาแก้ไข
ภายหลัง
การเขียนโปรแกรมขน้ึ มาจะต้องใช้ระบบ HTML 5 เท่านนั้
เมอื่ เขียนเวบ็ ไซต์ข้นึ มาแล้ว จะต้องทดสอบใหด้ วี า่ สามารถใช้ไดท้ กุ อุปกรณห์ รอื ไม่ ถา้ ไม่ไดจ้ ะต้องมีการแก้ไข
การออกแบบเว็บในรูปแบบ Responsive Web Design มีข้อจำกดั พอสมควร แตเ่ นื่องจากเทคโนโลยีในทุกวันน้มี ีการ
พฒั นาข้นึ ใหมท่ ุกวัน จึงต้องออกแบบเว็บไซต์ให้รองรับการใชง้ านทที่ นั สมัยอยู่เสมอ และใหส้ ามารถใช้งานได้อยา่ ง
เหมาะสมมากทส่ี ุด
ออกแบบเวบ็ ไซต์ใหด้ นู า่ เชือ่ ถอื

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

การสรา้ งเว็บไซตด์ ้วย Adobe Dreamweaver By ครวู วี ี่

1. ความทนั สมัย
เว็บไซต์ทด่ี ี น่าสนใจ และสามารถสะกดลูกคา้ ใหก้ ลา้ กดสงั่ ซ้ือสนิ คา้ บนหน้าเว็บมากขน้ึ ก็คือความทันสมยั ดังนนั้ จึงควร
ออกแบบเว็บให้มีความทนั ต่อยคุ สมัยอยเู่ สมอ และคอยปรับเปลี่ยนรปู แบบหนา้ เวบ็ หรืออัปเดตสินค้า ข้อมลู ข่าวสารอยู่
ตลอดเวลา เพ่อื ให้เว็บมคี วามเปน็ ปัจจุบนั ไมด่ ูเหมือนเว็บที่ถูกปล่อยร้างจนเกินไป
2. ความเป็นศลิ ปะ
ศลิ ปะ เปน็ สิ่งท่ีจะช่วยดงึ ดดู ความสนใจของผ้ชู มไดด้ ี ไมว่ ่าจะเป็นการใชส้ ีสนั หรอื การเลน่ ลวดลายต่างๆ ดงั น้นั จึงควร
สร้างเวบ็ ให้ดเู ปน็ งานศลิ ปะ ที่สามารถสือ่ อารมณ์ถงึ ผู้รบั ชมได้ดี และบ่งบอกถึงความเปน็ เอกลักษณ์ของสนิ ค้าและ
บรกิ ารได้อยา่ งดเี ย่ียม แต่ทัง้ น้ีสีสันทีน่ ำมาใชใ้ นการออกแบบควรจะมีความกลมกลืนและไมด่ รู กตาจนเกินไป ที่สำคัญคือ
จะตอ้ งตรงตามกลมุ่ เปา้ หมายชดั เจน
3. มีข้อมลู ผู้ขายชัดเจน
เว็บไซตจ์ ะมีความน่าเชื่อถือมากขนาดไหน ข้ึนอยกู่ ับการลงขอ้ มลู ผู้ขายวา่ มีความครบถว้ น และเป็นข้อมูลท่ีจริงแท้
เพียงใด โดยข้อมูลหลักๆ ทีจ่ ำเป็นตอ้ งมี ก็คือ ชอ่ื ของบรษิ ัท ท่ีอยู่ เบอรโ์ ทร แผนทรี่ ้านคา้ แฟกซ์ (ถ้ามี) และช่องทาง
การติดต่ออน่ื ๆ ทสี่ ามารถติดต่อได้ง่ายและรวดเร็ว นอกจากน้ีหากมีการจดทะเบยี นพาณิชย์พร้อมและมีหลักฐานชดั เจน
ก็จะยิง่ สรา้ งความน่าเช่อื ถือและความม่ันใจให้กับลูกค้าได้มากขึ้น
4. อยา่ เน้น Hard Sell มากไป
หนา้ เว็บไซตห์ ากมโี ฆษณาหรือ Pop up ตา่ งๆ ขึน้ มารบกวนมากเกนิ ไป จะทำให้ผชู้ มรู้สึกเบ่ือหน่ายและรำคาญได้
โดยเฉพาะหากโฆษณาเหล่านั้นข้ึนมาปิดตรงส่วนของเนื้อหาทลี่ กู ค้าสนใจพอดี นอกจากน้ีก็รวมถึงพวกแบบฟอร์มตดิ ต่อ
กับทางร้านด้วย ไมค่ วรออกแบบใหม้ าอย่บู นหน้าเว็บหลกั เพราะหากลูกค้าสนใจกจ็ ะเข้าไปยังหน้าตดิ ต่อและกรอก
แบบฟอร์มเอง ดงั นั้นจงึ ควรใช้ Hard Sell ให้มคี วามเหมาะสมทส่ี ุด
5. อา้ งถึงระยะเวลาทีเ่ ปิดให้บริการ
เวบ็ ไซต์ท่มี ีการเปิดใหบ้ ริการมาอยา่ งยาวนาน จะยิ่งสร้างความน่าเช่ือถือให้กับผูช้ มไดม้ ากขน้ึ เพราะลูกค้าส่วนใหญจ่ ะ
ยึดความเชอื่ ทว่ี า่ เว็บไซต์หรือร้านทเี่ ปิดขายสนิ ค้ามาอย่างยาวนานมกั จะเปน็ เวบ็ ทีไ่ มโ่ กง การอา้ งถึงระยะเวลาทีเ่ ปิด
ใหบ้ ริการมาแล้ว ควรอ้างตามความเป็นจรงิ ไม่ใช่พึ่งเปิดไดเ้ พียงเดือนเดียว แต่อ้างไปเป็น 10 ปี
6. ตัวอักษรมีความโดดเด่น อ่านง่าย
ตวั อักษรท่ีใชจ้ ะต้องมีความโดดเด่นและสามารถอ่านไดง้ ่าย โดยใหเ้ ลือกตวั อักษรที่มีขนาดพอเหมาะ มีการลดหลน่ั
ขนาดกันตามลำดบั หัวข้อ ใช้สีตวั อกั ษรที่มองเหน็ ได้อย่างเด่นชัด และเลือกฟ้อนท์ที่มีความเป็นมาตรฐานท่สี ุด สำหรบั
ฟ้อนท์แปลกๆ ทอ่ี าจจะดูสวยแปลกตาแต่อา่ นยากสำหรบั คนท่วั ๆ ไป ไม่ควรนำมาใชเ้ ด็ดขาด
7. อัพเดตหรือนำเสนอขอ้ มูลอย่ตู ลอด
เว็บไซตท์ ่ีไมม่ ีการอัพเดตใดๆ เลย มักจะถูกมองวา่ เป็นเวบ็ ท่ีปล่อยทิ้งรา้ งและทำให้ลกู คา้ เกิดความลังเลวา่ ร้านนแ้ี มค่ า้ ยัง
ขายสินค้าอย่หู รือเปล่า เมื่อส่ังซอ้ื แลว้ จะไดร้ บั สินค้าไหม และตัดสนิ ใจไมซ่ ้ือในท่สี ดุ ดังน้ันจงึ ควรมกี ารอัพเดตข้อมูล
ความเคลอื่ นไหวตา่ งๆ อยตู่ ลอดเวลา หรือจะเป็นการอพั สินค้าใหม่ๆ เพ่ิม นำบทความมาลง กจ็ ะทำใหเ้ วบ็ ดมู ีการ
เคลอ่ื นไหวและนา่ เช่ือถือได้ดี
8. สะกดอักษรให้ถูกต้อง

การสรา้ งเวบ็ ไซต์ดว้ ย Adobe Dreamweaver By ครูววี ่ี

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