การออกแบบ และ การสราง้ website...
TRANSCRIPT
การออกแบบ และ การสราง 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