การออกแบบหน้าเว็บacademic.udru.ac.th/~samawan/content/web...

49
การออกแบบหน้าเว็บ หน้า 1

Upload: others

Post on 20-Jan-2020

8 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: การออกแบบหน้าเว็บacademic.udru.ac.th/~samawan/content/Web design2-57.pdf · ขั้นตอนการพัฒนาเว็บไซต์

การออกแบบหนาเวบ

หนา 1

Page 2: การออกแบบหน้าเว็บacademic.udru.ac.th/~samawan/content/Web design2-57.pdf · ขั้นตอนการพัฒนาเว็บไซต์

ขนตอนการพฒนาเวบไซต

1. ก าหนดเปาหมายและวางแผน (Site Definition and Planning) 2. วเคราะหและจดโครงสรางขอมล (Analysis and Information

Architecture) 3. ออกแบบและเตรยมขอมล (Page Design and Content Editing) 4. ลงมอสรางและทดสอบ (Construction and Testing) 5. เผยแพรและสงเสรมใหเปนทรจก (Publishing and Promotion) 6. การดแลและปรบปรงอยางตอเนอง (Maintenance and

Innovation)

หนา 2

Page 3: การออกแบบหน้าเว็บacademic.udru.ac.th/~samawan/content/Web design2-57.pdf · ขั้นตอนการพัฒนาเว็บไซต์

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

1.ก าหนดวตถประสงคของเวบไซท 2.ก าหนดกลมผชมเปาหมาย 3.เตรยมแหลงขอมล 4.เตรยมทกษะของบคลากร 5.เตรยมทรพยากรตางๆ ทจ าเปน

หนา 3

Page 4: การออกแบบหน้าเว็บacademic.udru.ac.th/~samawan/content/Web design2-57.pdf · ขั้นตอนการพัฒนาเว็บไซต์

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

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

หนา 4

Page 5: การออกแบบหน้าเว็บacademic.udru.ac.th/~samawan/content/Web design2-57.pdf · ขั้นตอนการพัฒนาเว็บไซต์

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

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

5.เตรยมทรพยากรตางๆ ทจ าเปน เชน โปรแกรมส าหรบสรางเวบไซท , โปรแกรมส าหรบสรางภาพกราฟก , ภาพเคลอนไหว และมลตมเดย , โปรแกรมยทลตอนๆ ทตองใช , การจดทะเบยนโดเมนเนม ตลอดจนการเตรยมหาผใหบรการรบฝากเวบไซท (Web Hosting) และเลอกแผนบรการทเหมาะสม

หนา 5

Page 6: การออกแบบหน้าเว็บacademic.udru.ac.th/~samawan/content/Web design2-57.pdf · ขั้นตอนการพัฒนาเว็บไซต์

วเคราะหและจดโครงสรางขอมล

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

หนา 6

Page 7: การออกแบบหน้าเว็บacademic.udru.ac.th/~samawan/content/Web design2-57.pdf · ขั้นตอนการพัฒนาเว็บไซต์

ผลทไดรบจากขนการวเคราะหและจดโครงสรางขอมลควรจะประกอบดวย • แผนผงโครงสรางของเวบไซท (Site Structure) , สารบญ (Table of Content) , ล าดบการน าเสนอ (Storyboard) หรอแผนผง (Flowchart)

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

• องคประกอบตางๆ ทจะน ามาใชในการสรางเวบเพจมอะไรบาง เชน รปภาพและภาพกราฟก , เสยง , วดโอ , มลตมเดย , แบบฟอรม ,ฯลฯ อะไรบางทบราวเซอรของผชมสนบสนน และอะไรบางทตองอาศยโปรแกรมเสรม

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

• คณสมบตของเวบเซรฟเวอร รวมถงขอจ ากด และบรการเสรมตางๆทมให

หนา 7

Page 8: การออกแบบหน้าเว็บacademic.udru.ac.th/~samawan/content/Web design2-57.pdf · ขั้นตอนการพัฒนาเว็บไซต์

ออกแบบและเตรยมขอมล

1. วาดลงในกระดาษ เปนวธทงายมาก คณตองการใหแตละหนาเวบมอะไรบาง โลโกอยตรงไหน วางเนอหาและรปภาพอยางไร วาดลงไปในกระดาษไดเลย

ขอด รวดเรว แกไขเพมเตมสงทตองการไดงาย เหมาะกบเวบเพจทมรายละเอยดไมมาก ขอเสย ก าหนดการวางองคประกอบตางๆ ในเวบเพจไดอยางคราวๆ เทานน 2. ออกแบบผานโปรแกรมกราฟก วธนเปนมาตรฐานของเหลาบรรดามออาชพปฏบตกน โดยโปรแกรมทนยมใชในการออกแบบ mock up ส าหรบเวบเพจคอ Adobe Photoshop และ Macromedia Fireworks

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

ขอเสย ของวธนกคอ จ าเปนตองอาศยความช านาญในการใชโปรแกรมกราฟกพอสมควร แตถาคณพรอมจะหด นนกเปนสงทดมาก

หนา 8

Page 9: การออกแบบหน้าเว็บacademic.udru.ac.th/~samawan/content/Web design2-57.pdf · ขั้นตอนการพัฒนาเว็บไซต์

ลงมอสรางและทดสอบ

• เปนขนตอนทเวบเพจจะถกสรางขนมาจรงทละหนาๆ โดยอาศยเคาโครง และองคประกอบกราฟกตามทออกแบบไว

• เนอหาตางๆ จะถน ามาใสและถกจดรแบบลงค และระบบน าทางถกสราง องคประกอบเสรมตางๆถกวางเขาท

• เมอลงมอสรางเวบเพจเราอาจพบวาสงทออกแบบไวแลว บางอยางไมเหมาะสม หรอควรไดรบการปรบแตง กสามารถท าได

• โปรแกรมทใชในขนตอนนกคอโปรแกรมส าหรบสรางเวบไซท เชน Adobe Deramweaver • เวบไซททสรางขนมาควรไดรบการทดสอบกอนทจะน าออกเผยแพร • ไมวาจะเปนในเรองความถกตองของเนอหา , การท างานของลงคและระบบน าทาง , ตรวจหาความผดพลาดของโปรแกรมสครปตและฐานขอมล

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

หนา 9

Page 10: การออกแบบหน้าเว็บacademic.udru.ac.th/~samawan/content/Web design2-57.pdf · ขั้นตอนการพัฒนาเว็บไซต์

เผยแพรและสงเสรมใหเปนท รจก

• โดยทวไปการน าเวบไซทขนเผยแพรบนอนเทอรเนตจ าเปนตองท าการอพโหลดไฟลทงหมด คอไฟล HTML และไฟลอนๆทเกยวของกบเวบเราขนไปบนอนเทอรเนต

• การอพโหลดทละมากโดยใชโปรแกรมสรางเวบไซทเอง หรอจะใชโปรแกรมยทลต ประเภท FTP เชน CuteFTP และ WS_FTP

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

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

หนา 10

Page 11: การออกแบบหน้าเว็บacademic.udru.ac.th/~samawan/content/Web design2-57.pdf · ขั้นตอนการพัฒนาเว็บไซต์

การดแลและปรบปรงอยางตอเนอง

• เวบไซททเผยแพรไปแลวควรทจะดและโดยตลอด ซงหนาทนครอบคลมหลายเรอง ตงแตการตรวจสอบเวบเซรฟเวอร ลงคเชอมโยงไปภายนอกยงใชไดหรอไม (เนองจากบางเวบไซทอาจเปลยน URL หรอ ถกปด)

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

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

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

หนา 11

Page 12: การออกแบบหน้าเว็บacademic.udru.ac.th/~samawan/content/Web design2-57.pdf · ขั้นตอนการพัฒนาเว็บไซต์

หลกการออกแบบเวบ

•สรางล าดบชนความส าคญขององคประกอบ

• เนนในสงทส าคญมาก ส าคญรองลงมา หรอส าคญนอยตามล าดบ

•ต าแหนงและล าดบขององคประกอบ

•สและความแตกตางของส

•ภาพเคลอนไหว

หนา 12

Page 13: การออกแบบหน้าเว็บacademic.udru.ac.th/~samawan/content/Web design2-57.pdf · ขั้นตอนการพัฒนาเว็บไซต์

หลกการออกแบบเวบ(ตอ)

•สรางบคลกและสไตล • การจดโครงสรางของหนา รปแบบกราฟก ชนดและการจดตวอกษร

•สรางความสม าเสมอตลอดทวทงไซท

•จดวางองคประกอบทส าคญไวในสวนบนของหนาเสมอ • ชอของเวบไซท ชอหวเรอง ชอแสดงหมวดหม

• ระบบเนวเกชน

หนา 13

Page 14: การออกแบบหน้าเว็บacademic.udru.ac.th/~samawan/content/Web design2-57.pdf · ขั้นตอนการพัฒนาเว็บไซต์

หลกการออกแบบเวบ(ตอ)

•สรางจดสนใจดวยความแตกตาง • ใชเทคนคการจดโครงสรางของหนา (Page Layout) • การจดระเบยบตวอกษร การใชส

•จดแตงหนาเวบใหเปนระเบยบและเรยบงาย • แยกเปนสดสวน ไมดแนน แออดจนเกนไป

• ใชกราฟฟกอยางเหมาะสม

หนา 14

Page 15: การออกแบบหน้าเว็บacademic.udru.ac.th/~samawan/content/Web design2-57.pdf · ขั้นตอนการพัฒนาเว็บไซต์

หลกการออกแบบเวบ (ตอ)

•สรางล าดบชนความส าคญขององคประกอบ • ต าแหนงและล าดบขององคประกอบ

• สและความแตกตางของส

• ภาพเคลอนไหว

หนา 15

Page 16: การออกแบบหน้าเว็บacademic.udru.ac.th/~samawan/content/Web design2-57.pdf · ขั้นตอนการพัฒนาเว็บไซต์

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

1.ออกแบบโครงสรางเวบไซท (Site Structure Design)

2.การออกแบบระบบเนวเกชน (Site Navigation Design)

หนา 16

Page 17: การออกแบบหน้าเว็บacademic.udru.ac.th/~samawan/content/Web design2-57.pdf · ขั้นตอนการพัฒนาเว็บไซต์

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

• วธจดโครงสรางเวบไซทสามารถท าไดหลายแบบ แตแนวคดหลกๆ ทนยมใชกนมอย 2 แบบคอ (ในทางปฏบตอาจมการใชหลายแนวคดผสมผสานกนกได)

• จดตามกลมเนอหา (Content-based Structure) • จดตามกลมผชม (User- based Structure

หนา 17

Page 18: การออกแบบหน้าเว็บacademic.udru.ac.th/~samawan/content/Web design2-57.pdf · ขั้นตอนการพัฒนาเว็บไซต์

1. รปแบบโครงสรางเวบไซท (Structure)

•แบบเรยงส าดบ (Sequence)

•แบบทละขนตอนแบบล าดบชน (Hierarchy)

•แบบผสม (Combination)

หนา 18

Page 19: การออกแบบหน้าเว็บacademic.udru.ac.th/~samawan/content/Web design2-57.pdf · ขั้นตอนการพัฒนาเว็บไซต์

* แบบเรยงล าดบ ( Sequence) เหมาะส าหรบเวบไซททมจ านวนเวบเพจไมมากนก หรอเวบไซททมการน าเสนอขอมลแบบทละขนตอน

หนา 19

Page 20: การออกแบบหน้าเว็บacademic.udru.ac.th/~samawan/content/Web design2-57.pdf · ขั้นตอนการพัฒนาเว็บไซต์

* แบบระดบชน (Hierarchy) เหมาะส าหรบเวบไซททมจ านวนเวบเพจมากขนเปนรปแบบทเราสามารถพบไดทวไป

หนา 20

Page 21: การออกแบบหน้าเว็บacademic.udru.ac.th/~samawan/content/Web design2-57.pdf · ขั้นตอนการพัฒนาเว็บไซต์

*แบบผสม (Combination) เหมาะส าหรบเวบไซททซบซอน เปนการน าขอดของรปแบบ ทงสองขางตนมาผสมกน

หนา 21

Page 22: การออกแบบหน้าเว็บacademic.udru.ac.th/~samawan/content/Web design2-57.pdf · ขั้นตอนการพัฒนาเว็บไซต์

2.การออกแบบระบบเนวเกชน (Site Navigation Design)

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

• เครองน าทาง (Navigation Control)

• เครองบอกต าแหนง (Location Indication)

หนา 22

Page 23: การออกแบบหน้าเว็บacademic.udru.ac.th/~samawan/content/Web design2-57.pdf · ขั้นตอนการพัฒนาเว็บไซต์

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

• เมนเฉพาะกลม เปนเมนทเชอโยงเวบเพจปจจบนกบเวบเพจอนภายในกลมยอยทมเนอหาเกยวเนองเทานน มกอยในรปของลงคขอความหรอกราฟกเชนเดยวกน

• เครองมอเสรม ส าหรบชวยเสรมการท างานของเมน มไดหลายรปแบบ เชน ชองคนหาขอมล (Search Box) , อมเมจแมพ (Image Map) , แผนทเวบไซท (Site Map)

หนา 23

Page 24: การออกแบบหน้าเว็บacademic.udru.ac.th/~samawan/content/Web design2-57.pdf · ขั้นตอนการพัฒนาเว็บไซต์

เครองบอกต าแหนง (Location Indication)

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

• Books > Computer & Internet > Hardware

หนา 24

Page 25: การออกแบบหน้าเว็บacademic.udru.ac.th/~samawan/content/Web design2-57.pdf · ขั้นตอนการพัฒนาเว็บไซต์

หนา 25

Page 26: การออกแบบหน้าเว็บacademic.udru.ac.th/~samawan/content/Web design2-57.pdf · ขั้นตอนการพัฒนาเว็บไซต์

ลกษณะระบบเนวเกชนทด

• อยในต าแหนงทเหนไดชดและเขาถงงาย • เขาใจงายหรอมขอความก ากบชดเจน ใชไดทนทโดยไมตองเสยเวลาศกษา • มความสม าเสมอและเปนระบบ ไมชวนใหสบสนหรอกลบไปกลบมา • มการตอบสนองเมอใชงาน เชน เปลยนสเมอผชมชเมาสคลก • มจ านวนรายการพอเหมาะไมมากเกนไป • มหลายทางเลอกใหใช เชน เมนกราฟก , ขอความ , ชองคนหาขอมล (Search Box), เมนแบบดรอปดาวน (Drop-down menu) , แผนทเวบไซท (Site Map) • มลงคใหคลกกลบไปยงหนาโฮมเพจไดเสมอ เพอใหผชมกลบไปเรมตนใหมในกรณทหลงทางไมรวาตวเองอยทต าแหนงใด

หนา 26

Page 27: การออกแบบหน้าเว็บacademic.udru.ac.th/~samawan/content/Web design2-57.pdf · ขั้นตอนการพัฒนาเว็บไซต์

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

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

หนา 27

Page 28: การออกแบบหน้าเว็บacademic.udru.ac.th/~samawan/content/Web design2-57.pdf · ขั้นตอนการพัฒนาเว็บไซต์

เขาใจลกษณะการใชงานของเวบเพจ

• ออกแบบหนาเวบส าหรบการพมพ • แบงเนอหาเปนสวนยอยประมาณ 2-3 หนาจอ เพอใหอานงายบนจอ

• สรางลงคจากหนาแรกไปยงเวบทรวมเนอหาทงหมดไวในไฟลเดยวกน เพอสะดวกแกการพมพหรอดาวนโหลด

หนา 28

Page 29: การออกแบบหน้าเว็บacademic.udru.ac.th/~samawan/content/Web design2-57.pdf · ขั้นตอนการพัฒนาเว็บไซต์

การออกแบบหนาเวบ 2

Page 30: การออกแบบหน้าเว็บacademic.udru.ac.th/~samawan/content/Web design2-57.pdf · ขั้นตอนการพัฒนาเว็บไซต์

รปแบบโครงสรางของหนาเวบ

• โครงสรางหนาเวบในแนวตง

• โครงสรางหนาเวบในแนว

• โครงสรางหนาเวบทพอดกบหนาจอ

• โครงสรางหนาเวบแบบสรางสรรค

Page 31: การออกแบบหน้าเว็บacademic.udru.ac.th/~samawan/content/Web design2-57.pdf · ขั้นตอนการพัฒนาเว็บไซต์

สวนประกอบของหนาเวบ • สวนหว (Page Header) • เปนสวนทส าคญทสดในหนา เพราะเปนสวนดงดด • ประกอบดวยชอเวบ หวขอหลก ชอเนอหา ระบบเนวเกชน • ทมมซายบนเปนบรเวณแรกทผใชใหความสนใจ

• สวนของเนอหา (Page Body) • สวนทายของหนา (Page Footer)

Page 32: การออกแบบหน้าเว็บacademic.udru.ac.th/~samawan/content/Web design2-57.pdf · ขั้นตอนการพัฒนาเว็บไซต์

สวนของเนอหา (Page Body)

• ควรจะมความกะทดรด จดเปนระเบยบ เพอใหมองหาไดอยางรวดเรว

• แสดงความส าคญไวในสวนตน ๆ

• จดรปแบบตวอกษรไดอยางเหมาะสม

• ขนาดตวอกษร

Page 33: การออกแบบหน้าเว็บacademic.udru.ac.th/~samawan/content/Web design2-57.pdf · ขั้นตอนการพัฒนาเว็บไซต์

สวนทายของหนา (Page Footer)

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

Page 34: การออกแบบหน้าเว็บacademic.udru.ac.th/~samawan/content/Web design2-57.pdf · ขั้นตอนการพัฒนาเว็บไซต์

เทคนคการจดโครงสรางของหนา

• จดโครงสรางของหนาโดยใชตาราง

• จดโครงสรางของหนาโดยใชเฟรม

• ก าหนดพนทวางโดยใชกราฟฟกใส

Page 35: การออกแบบหน้าเว็บacademic.udru.ac.th/~samawan/content/Web design2-57.pdf · ขั้นตอนการพัฒนาเว็บไซต์

จดโครงสรางของหนาโดยใชตาราง • เปนการแบงขอบเขตท าใหสามารถจดรปแบบโครงสรางของเวบได • ใสตวอกษร หรอ กราฟก ลงในต าแหนงทตองการ • ก าหนดความยาวของบรรทดใหเหมาะสมหรอการสรางคอลมนใหกบเนอหา • จดระเบยบองคประกอบตาง ๆ • รวมภาพกราฟกหลายๆรปใหตดกน • สรางพนทวาง หรอ White Space ขนในบรเวณทตองการ

Page 36: การออกแบบหน้าเว็บacademic.udru.ac.th/~samawan/content/Web design2-57.pdf · ขั้นตอนการพัฒนาเว็บไซต์

จดโครงสรางของหนาโดยใชเฟรม

• เปนการรวมเวบเพจหลาย ๆหนาใหอยภายใตหนาตางบราวเซอรเดยวกน

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

• ขอเสยคอท าใหการ Bookmark ผดพลาดได

Page 37: การออกแบบหน้าเว็บacademic.udru.ac.th/~samawan/content/Web design2-57.pdf · ขั้นตอนการพัฒนาเว็บไซต์

ก าหนดพนทวางโดยใชกราฟกใส

• นกออกแบบนยมใชกราฟกประเภท gif ขนาด1 x 1

พกเซลทมลกษณะใส (Transparent) เขามาชวยในการวางต าแหนงรป หรอตวอกษรไดตามตองการ

Page 38: การออกแบบหน้าเว็บacademic.udru.ac.th/~samawan/content/Web design2-57.pdf · ขั้นตอนการพัฒนาเว็บไซต์

ออกแบบหนาโฮมเพจ

• แสดงถงภาพรวมและสงทเปนประโยชนในเวบไซท

• ดนาสนใจและมลกษณะทสมพนธกบเนอหา

• มลงคทสามารถเชอมโยงไปสสวนหลก ๆของเวบไซท

• แสดงผลไดอยางรวดเรว โดยใชรปกราฟฟกอยางจ ากด

• แสดงถงสงทปรบเปลยนใหมตลอดเวลา

Page 39: การออกแบบหน้าเว็บacademic.udru.ac.th/~samawan/content/Web design2-57.pdf · ขั้นตอนการพัฒนาเว็บไซต์

ออกแบบหนาโฮมเพจ (ตอ)

• แสดงถงเอกลกษณของเวบไซท

• ใชองคประกอบทมลกษณะเหมอนกบในหนาอน ๆ ท าใหผใชรวาก าลงอยในเวบเดยวกน

Page 40: การออกแบบหน้าเว็บacademic.udru.ac.th/~samawan/content/Web design2-57.pdf · ขั้นตอนการพัฒนาเว็บไซต์

แนวทางของการแสดงวาขอมลในเวบไซท มการเปลยนแปลงอยเสมอ • แสดงวนทปจจบน

• เปลยนแปลงรปกราฟฟกเปนประจ าทกวน สปดาห หรอเดอน

• แสดงขาวหรอขอมลความเคลอนไหวใหม ๆ ใหผใชไดรบรในหนาแรก

• สรางสวนของเนอหาทแสดงถงสงใหม ๆ (What’s New)

Page 41: การออกแบบหน้าเว็บacademic.udru.ac.th/~samawan/content/Web design2-57.pdf · ขั้นตอนการพัฒนาเว็บไซต์

หนากอนโฮมเพจ

Page 42: การออกแบบหน้าเว็บacademic.udru.ac.th/~samawan/content/Web design2-57.pdf · ขั้นตอนการพัฒนาเว็บไซต์

การออกแบบหนาแบบฟอรม

Page 43: การออกแบบหน้าเว็บacademic.udru.ac.th/~samawan/content/Web design2-57.pdf · ขั้นตอนการพัฒนาเว็บไซต์
Page 44: การออกแบบหน้าเว็บacademic.udru.ac.th/~samawan/content/Web design2-57.pdf · ขั้นตอนการพัฒนาเว็บไซต์

เทคนคการออกแบบเวบใหแสดงผลเรว

• ลดขนาดของไฟล HTML • ใชตวอกษรและลงคแบบ HTML • ใชไฟลกราฟกใหถกประเภท

• ก าหนดคา Width และ Height ของกราฟก

• การก าหนดคา Lowsrc (low resolution source) และ Alt

Page 45: การออกแบบหน้าเว็บacademic.udru.ac.th/~samawan/content/Web design2-57.pdf · ขั้นตอนการพัฒนาเว็บไซต์

ก าหนดคา Width และ Height ของกราฟก

• เปนการบอกบราวเซอรเตรยมพนทขนาดตามทก าหนดไวในขณะททก าลงดาวนโหลดกราฟก

• การก าหนดคา ALT ไว บราวเซอรกจะแสดงใหผใชรวากราฟกนนเกยวกบอะไร

Page 46: การออกแบบหน้าเว็บacademic.udru.ac.th/~samawan/content/Web design2-57.pdf · ขั้นตอนการพัฒนาเว็บไซต์

การก าหนดคา Lowsrc (low resolution source) และ Alt

• ถามรปกราฟกขนาดใหญทตองใชเวลาในการดาวนโหลดคอนขางมาก

• การก าหนดคา LOWSRC ใหบราวเซอรน ารปทมไฟลขนาดเลกมาแสดงกอน

Page 47: การออกแบบหน้าเว็บacademic.udru.ac.th/~samawan/content/Web design2-57.pdf · ขั้นตอนการพัฒนาเว็บไซต์

เทคนคการออกแบบเวบใหแสดงผลเรว(ตอ)

• น ากราฟกกลบมาใชใหมในหนาอน ๆ • บราวเซอรมระบบความจ าพเศษทเรยกวา “แคช” • ซงเปนการเกบรวบรวมไฟลชนดตาง ๆรวมถงรปกราฟกทดาวนโหลดมาแลว

• ใช Style Sheet (CSS) ในการออกแบบ • สามารถน าสไตลชทไปใชกบขอมลทกหนาเวบ • ชวยประหยดเวลา และลดปรมาณค าสงเกยวกบรปแบบภาษา HTML ใหไฟลขนาดเลกลง

Page 48: การออกแบบหน้าเว็บacademic.udru.ac.th/~samawan/content/Web design2-57.pdf · ขั้นตอนการพัฒนาเว็บไซต์

ขอแนะน าในการออกแบบ

• ออกแบบโครงสรางของหนา โดยใชโปรแกรมกราฟก • การเรมตนออกแบบโครงสรางของหนาเวบในโปรแกรมกราฟกทมคณสมบตของ

Layer เชน Photoshop ดวยการก าหนดพนทใหกบองคประกอบตาง ๆตามความเหมาะสม

• ก าหนดชอของเวบใหสอความหมาย

Page 49: การออกแบบหน้าเว็บacademic.udru.ac.th/~samawan/content/Web design2-57.pdf · ขั้นตอนการพัฒนาเว็บไซต์

ขอแนะน าในการออกแบบ (ตอ)

• สรางความแตกตางของสงทแตกตางกนใหเหนชดเจน

• เลอกใชรปพนหลงทเหมาะสม

• หลกเลยงการใชเทคโนโลยขนสง

• อยาใชภาพเคลอนไหวมากเกนไป