การวเคราะหและการพฒนาเวบไซต

วชาโปรแกรมสรางเวบเพอการศกษา สาขาคอมพวเตอรศกษา ชนปท 4 หม 5

อาจารยผสอน ปวรศ สารมะโน

กลมท 5

สมาชกกลมท 5

1. นางสาวจราวรรณ ศรอ านวย รหสนกศกษา 533410080506 2. นางสาวปยภาณ ผดงสนต รหสนกศกษา 533410080516 3. นางสาวพรพศ แพงสย รหสนกศกษา 533410080518 4. นายภาณเดช ศรนวลจนทร รหสนกศกษา 533410080541

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

การออกแบบเวบไซตนนไมได หมายถง ลกษณะหนาตาของเวบไซต เพยงอยางเดยว แตเกยวของทงหมดตงแตการก าหนดเปาหมาย การระบ กลมเปาหมายการจดระบบขอมล การสรางระบบ เนวเกชน การออกแบบ หนาเวบรวมไปถงการใชกราฟการเลอกใชส และการจดรปแบบตวอกษร นอกจากนนยงตองค านงถงความแตกตางของสอกลางในการแสดงผล เวบไซต

การออกแบบโครงสรางของเวบไซต

ปจจบนจะมหลกการออกแบบโครงสรางหนาเวบไซตจะไมแตกตางกนมากนก สามารถจ าแนกออกไดเปน 3 รปแบบใหญๆ คอ

การออกแบบโครงสรางของเวบไซต (ตอ)

1. ออกแบบหนาเวบไซตทเนนการน าเสนอเนอหาเปนหลกการออกแบบเวบไซตลกษณะนจะเนนการน าเสนอเนอหามากกวารปภาพซงใชโครงสรางของตารางเปนหลก เพอใสขอความแบบหนาสารบญและรปภาพประกอบทมขนาดเลกๆ

การออกแบบโครงสรางของเวบไซต (ตอ)

ภาพท 1 เวบไซตทมการน าเสนอเนอหาเปนหลก

การออกแบบโครงสรางของเวบไซต (ตอ)

2. ออกแบบหนาเวบไซตทเนนภาพกราฟกเปนหลก เวบไซตประเภทน จะไมเนนขอความภายในเวบเพจแตจะเนนใชภาพกราฟกเปนหลก และสรางลงคทภาพไปยงหนาเวบเพจอนๆ

การออกแบบโครงสรางของเวบไซต (ตอ)

ภาพท 2 เวบไซตทใชภาพกราฟกเปนสวนประกอบ

การออกแบบโครงสรางของเวบไซต (ตอ)

3. ออกแบบหนาไซตทมทงภาพ และเนอหา เปนลกษณะของการออกแบบเวบไซตทน ารปแบบทง 2 ทกลาวขางตนมาผสมกน โดยจะเนนการจดวางภาพและเนอหาใหเหมาะสม และสวยงาม

การออกแบบโครงสรางของเวบไซต (ตอ)

ภาพท 3 เวบไซตทใชภาพกราฟกและเนอหาเปนสวนประกอบ

ทฤษฏสและการออกแบบเวบไซต

ส(Color) ถอเปนหวใจหลกส าคญเพราะการเลอกใชสจะแสดงถงอารมณทตองการไดชดเจนมากกวาสวนประกอบอนๆทงหมดเชนสโทนรอนส าหรบงานทตองการความตนเตนทาทาย หรอส โทนเยนส าหรบงานทตองการใหดสภาพ สบาย ๆ

ทฤษฏสและการออกแบบเวบไซต (ตอ)

ตวอกษร(Text)

ทฤษฏสและการออกแบบเวบไซต (ตอ)

รปภาพ(Picture) ภาพนง (Still Picture) ภาพกราฟก (Graphic Picture) ภาพเคลอนไหว (Animation)

ทฤษฏสและการออกแบบเวบไซต (ตอ)

รปภาพ(Picture)

เวบไซตทเลอก King Mongkut's University of Technology

เวบไซตทเลอก King Mongkut's University of Technology

โลโก (LOGO) หรอสญญาลกษณ

เวบไซตทเลอก King Mongkut's University of Technology

โลโก (LOGO) หรอสญญาลกษณ (ตอ)

เปนสญลกษณทแสดงถงตวตนของเรา ท าใหลกคาหรอผใชงานจดจ าเราได ดวยเหตนเองท าใหการออกแบบเวบไซตนนจ าเปนตองมโลโกของเวบไซตเปนอยางยงต าแหนงสวนใหญจะจดวางอยมมซายบนของเวบไซต เพอใหผใชงานจ าไดและสะดดตา

เวบไซตทเลอก King Mongkut's University of Technology

Navigation หรอเมนน าทาง

เวบไซตทเลอก King Mongkut's University of Technology

Navigation หรอเมนน าทาง (ตอ)

การออกแบบพฒนาเวบนนเปนออกแบบเพอท าใหเวบของเรานนมความนาสนใจตอ ผทเขามารบชมเวบของเรา เวบทนาสนใจนนสวนมากเปนเวบทสามารถใชงานงายและสะดวกตอการใชงานNavigation นนเปนเหมอนปายบอกทางทจะท าใหผเขารบชมเวบของเรานนรวาจะไปยงจดใดของเพจตางๆในเวบของเรา

เวบไซตทเลอก King Mongkut's University of Technology

Content (เนอหา) เปนองคประกอบส าคญทมผลตอการตดสนใจเยยมชมขอมลของผชมเวบวาควรชมเวบไซตนตอหรอไม การออกแบบสวนเนอหาควรก าหนดวตถประสงคของเวบไซต วาตองการน าเสนอขอมลเกยวกบอะไรจากนนจงคนหาขอมลใหครอบคลมเรองทเกยวของใหมากทสด

เวบไซตทเลอก King Mongkut's University of Technology

Footer (สวนทายของหนา) เปนสวนทอยดานลางสดของหนามกวางระบบน าทางทเปนลงคขอความงายๆและอาจแสดงขอมลเพมเตมเกยวกบเนอหาภายในเวบไซต เชน เจาของเวบไซต ขอความแสดงลขสทธ วธการตดตอกบผดแลเวบไซตการแนะน าการใชเวบไซต เปนตน

เวบไซตทเลอก King Mongkut's University of Technology

- นกเรยนนกศกษา บคลากร อาจารย ทตองการทราบรบรขาวสารประชาสมพนธตางๆ - บคคล หรอ กลมประชาชนทวไป ทตองการตดตามขาวสาร ประชาสมพนธ

เปาหมายหลก

การออกแบบเวบไซต เปนสงทส าคญของการท าเวบไซตเพราะเวบไซตคอสวนหนงของหนวยงาน หรอ องคกร ไดสรางขนเพอใหผทสนใจหรอตองการตดตาม รบรขาวประชาสมพนธตางๆ รบรไดอยางสะดวกและรวดเรว มการอพเดตขาวสาร ประชาสมพนธอยเสมอ ซงท าใหไดรบความนาเชอถอและความไววางใจจากผเขาชม

สรป

จบการน าเสนอ