การออกแบบ และ การสราง Website

BI Systems Services Ltd.,Part

การออกแบบ และ การสราง Website

• ตวอยาง Website ทใชส าหรบการออกแบบ

http://www.textures.com/ เปนการใชลายไม หรอ ลายทางเปน

background

https://www.pexels.com/การหาภาพฟร

http://www.123rf.com/

https://color.adobe.com/c

reate/color-wheel/ทฤษฎส

http://www.f0nt.com/ เตมวญญาณใสงานอกษร

หลกการออกแบบเวบไซต

♦ การก าหนดขนาดเวบเพจ ♦

ขนาดของเวบไซตทนยมในปจจบนม 2 ขนาด คอ

1. ขนาดเวบไซตแบบ 800 X 600 pixels เปนขนาดทสามารถใชไดกบหนาจอทกขนาด

ในปจจบนเปนขนาดของการออกแบบเวบไซตทใชในอดต เนองจากอดตขนาดของ

จอคอมพวเตอรมขนาดเลก

2. ขนาดเวบไซตแบบ 1024 X 768 pixels เปนขนาดทนยมในปจจบน เนองจากผใช

นยมใชจอคอมพวเตอรขนาดใหญขนเนองมาจากราคาจอคอมพวเตอรทถกลง

การออกแบบ และ การสราง Website

หลกการออกแบบเวบไซต♦ รปแบบการออกแบบเวบไซต ♦

เวบไซตในปจจบนจะมการออกแบบทแตกตางกนไมมากนก ซงการออกแบบหนาตาเวบไซตสวนใหญ

จะมองดองคประกอบขององคกร หนวยงาน หรอเนอหาเรองทน าเสนอเปนหลก ซงการออกแบบ

หนาตของเวบไซตมอย 3 แบบ คอ

1. การออกแบบเวบไซตทเนนการน าเสนอเนอหา

เปนการออกแบบเวบไซตทเนนการน าเสนอเนอหามากกวารปภาพ โดยโครงสรางใชรปแบบตาราง

เปนหลก มการออกแบบหนาตารปแบบงาย เชน มเมนสารบญ และเนอหา

2. การออกแบบเวบไซตทเนนภาพกราฟก

เปนการออกแบบเวบไซตทเนนภาพกราฟกทสวยงาม ซงอาจจะใชโปรแกรม Photoshop ส าหรบ

การตกแตงภาพ ขอด สวยงาม นาสนใจ ขอเสย อาจจะใชเวลาในการโหลดเวบนาน

3.การออกแบบเวบไซตทมทงภาพและเนอหา

เปนการออกแบบเวบทนยมในปจจบนซงประกอบดวยขอความ รปภาพ โดยมการจดองคประกอบ

ตาง ๆ เพอใหเวบนาสนใจ

การออกแบบ และ การสราง Website

ก าหนด

วตถประสงค

และ ก าหนด

กลมเป าหมาย

กลมเป าหมายใด

ทผสรางตองการ

สอสาร

วางแผนเกยวกบ

การจดรปแบบ

โครงสรางเนอหา

สาระ

ก าหนด

รายละเอยด

ใหกบ

โครงสราง

ท าการสราง

เวบไซตแลวน าไป

ทดลองเพอหา

ขอผดพลาดและท า

การแกไขปรบปรง

หลกในการออกแบบโครงสรางเวบไซต ควรพจารณาดงน

การออกแบบ และ การสราง Website

การออกแบบ และ การสราง Website

โครงสรางทชดเจน

จดโครงสรางหรอ

จดระเบยบของขอมล

ทชดเจน แยกยอย

เนอหาออกเปนสวน

ตาง ๆ ทสมพนธกน

และใหอยใน

มาตรฐานเดยวกน

การใชงานทงาย

ลกษณะของเวบทม

การใชงานงายจะ

ชวยใหผใชรสกสบาย

ใจตอการอานและ

สามารถท าความ

เขาใจกบเนอหาได

อยางเตมท

การเชอมโยงทด

ลกษณะไฮเปอรเทกซ

ทใชในการเชอมโยง

ควรอยในรปแบบท

เปนมาตรฐาน

ความเหมาะสมในหนาจอ

เนอหาทน าเสนอใน

แตละหนาจอควรสน

กระชบ และทนสมย

หลกเลยงการใช

หนาจอทมลกษณะ

การเลอนขนลง

(Scrolling)

ความรวดเรว

ความรวดเรวเปนสง

ส าคญประการหนงท

สงผลตอการเรยนร

ผใชจะเกดอาการเบอ

หนายและหมดความ

สนใจกบเวบทใชเวลา

ในการแสดงผลนาน

องคประกอบทดของการออกแบบเวบไซต

แนวทางการ Design Website ยคใหม

• สวนหว (Header)

• สวนเนอหา (Content Area)

• เมนหลก (Primary Navigation)

• เมนรอง (Secondary Navigation)

• หวเรอง (Headlines)

• สวนทายของบทความ (Post’s Footer)

• สวนทายของเวบไซด (Footer)

• โฆษณา (Advertisements)

การออกแบบ และ การสราง Website

สวนหว (Header)

• ผเยยมชมสวนใหญจะเหนเปนสวนแรก

• เปนสวนทส าคญทสด มนเปนสงเดยวทจะแยก ใหเหนถงความ

แตกตางระหวางเวบของคณกบเวบอน ๆ นบลานเวบ

• เปนสงทสดงถงเอกลกษณของเวบคณเพอใหเกดการจดจ า

การออกแบบ และ การสราง Website

ส ‹‹Çนเนอหา (Content Area)

• สวนเนอหาเปนสวนทผอานหรอผเยยมชม ใชเวลาจดจออยนาน

ทสด

• สวนเนอหางายตอการอาน

• ไมควรมสงทดงความสนใจผอานมากจนเกนไป

• สงส าคญอกสงหนงคอ ตองวางโครงสรางเนอหาใหดกวา อะไร

ส าคญทสด ไปจนถง ส าคญนอยทสด

การออกแบบ และ การสราง Website

เมนหลก (Primary Navigation)

• เมนหลก คอ ชดของลงคทจะน าพาไปสสวนอน ๆ ของเวบท

แตกตางกนอยางชดเจน

• วางไวใกลกบสวนหว เพราะผเยยมชมสวนใหญจะคาดหวงวา

เมนหลกจะตองอยแถวน

การออกแบบ และ การสราง Website

เมน Ù รอ§ (Secondary Navigation)

• เมนรอง คอ ชดของลงคทน าพาผเยยมชมไปยง สวนยอยอน ๆ

ของเนอหาทอยในขอบเขตเดยวกน (section)

• อยในรปแบบสวนดานขาง (sidebar)

• เมนรองทดควรจะเปนลงคไปยงบทความ ทผเยยมชมคลกดมาก

ทสด

การออกแบบ และ การสราง Website

การออกแบบ และ การสราง Website

หวเรอง (Headlines)

• หวเรองของแตละบทความมไวเพอดงดดความสนใจผกาน

• ยวเยาใหอานเนอหาทงหมดในทสด

• หวเรองของคณจะตองเดน โดยสามารถท าไดหลากหลายวธ

การออกแบบ และ การสราง Website

สวนทายของบทความ (Post’s Footer)

• สวนทายของบทความจะอยระหวางดานลางบทความ บรรทด

สดทายกบสวนแสดงความคดเหน

• สวนทชกจงผเยยมชม/ผอาน ไปยงบทความอนๆ ทเกยวของ หรอ

บทความทส าคญ

การออกแบบ และ การสราง Website

สวนทายของเวบ (Footer)• สามารภน าเมนรองมาใสไวได เพอลดความแออดของลงค ในเมนรองดานขางเวบ

• ผอาน อานเนอหาจบแลว หรอ อานสวนแสดงความคดเหนเสรจแลว นบเปนชวงเวลาทด

ทสดทตณจะได น าเสนอบทความอนๆ ดวยการวางเมนรองไวในสวนทายเวบน

• ลงคทนาจะน ามาใสควรเปน บทความทมผอานมากทสด บทความแนะน า คณอาจจะใส

ลงค เกยวกบเรา และ การตดตอไปดวย ถาหากเปาหมายของคณคอ ผเยยมชมเวปคณ

การออกแบบ และ การสราง Website

ตงชอเวป

สราง Framework layout

เปรยบเทยบขอมลกบเวปคแขง

เลอก Hosting และ จด Domain

name

จด Domain name กอน แลวคอย

สราง website

กระบวนการสรางเวปไซต

การออกแบบ และ การสราง Website