การพฒนาเวบไซต Website Development

ผจดท ำ

ปยะนนท เสนำวงค ประวรรณญำ ภโค พรพชรำ ทองทำ อ ำนวยพร รำชำชย

ผสอน

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

Web Programming for Education

สำขำคอมพวเตอรศกษำ คณะครศำสตร

มหำวทยำลยรำชภฏมหำสำรคำม

กลม 6

ผจดท า

นายปยะนนท เสนาวงค ID533410080438 นางสาวประวรรณญา ภโค ID 533410080413

นางสาวพรพชรา ทองทา ID 533410080416 นางสาวอ านวยพร ราชาชย ID 533410080434

คอมพวเตอรศกษา คณะครศาสตร มหาวทยาลยราชภฏมหาสารคาม

ค าน า

ในปจจบนเทคโนโลยล ำสมยขนทกวน จนแทบจะไมร

เลยวำอนไหนใหม อนไหนเกำไปแลว เพรำะมกำรอพเดทอย

ตลอดเวลำ ซงในตอนนเวบไซตตำงๆกเขำมำมบทบำทในกำร

เรยนกำรสอนเพมมำกขน กำรสอน กำรเรยน กำรสงงำนผำน

Face book เปนตน

ในเนอหำชองกำรพฒนำเวบไซตนกจะประกอบไปดวย

ควำมหมำยของเวบไซต หลกกำรออกแบบเวบไซต องคประกอบ

กำรออกแบบเวบไซต กำรออกแบบพฒนำเวบไซต ในหวขอนก

จะมหวขอยอยๆใหเขำไปศกษำ รวมไปถงประเภทของเวบไซต

สวนประกอบ และกำรประเมนเวบไซต

อยำงไรกตำม ผจดท ำยนดทจะรบควำมคดเหน

ขอเสนอแนะ ทเปนประโยชนจำกทำนผอำน เพอใชเปนขอมลใน

กำรปรบปรงหนงสอเลมนใหมควำมสมบรณมำกยงขน

คณะผจดท ำ

กรกฎำคม 56

บรรณานกรม

ชลตำ ไวรกษ. กำรพฒนำเวบไซตเพอประชำสมพนธองคกร :

กรณศกษำสโมสรทำรซำน ฮท เพนท บอล เชยงใหม. วทยำนพนธศลปศำสตรมหำบณฑต.มหำวทยำลยเชยงใหม,กนยำยน 2551.

เตมโชค มำนตสกล. กำรพฒนำเวบไซต; พำณชยอเลกทรอนกส; แ เวบไซต -- กำรออกแบบ. วทยำนพนธศลปศำสตรมหำ บ บณฑต. มหำวทยำลยเชยงใหม , 2554

Padoungkiat.(2554).ทฤษฎกำรออกแบบเวบไซต. ค คนเมอ 27 กรกฎำคม 2556 จำก

http://patamweb.blogspot.com.

สารบญ

ควำมหมำยของเวบไซต……………………………………………….1 หลกกำรออกแบบเวบไซต…………………………………………….2 องคประกอบกำรออกแบบเวบไซต…………………………………4 กำรออกแบบพฒนำเวบไซต………………………………………….13

- กำรออกแบบหนำเวบไซต…………………………….13 - ขอค ำนงในกำรออกแบเวบไซต…………………..…14 - กำรออกแบบโครำงสรำงเวบไซต…………………....16 - รปแบบของโครงสรำงเวบไซต…………………….….17 - ทฤษฎกำรใชส……………………………………………..18

ประเภทของเวบไซต……………………………………………………22 สวนประกอบของเวบไซต…………………………………………….29 กำรประเมนเวบไซต……………………………………………………37สรปผล……………………………………………………………………..38 บรรณำนกรม

38

สรปผล

กำรพฒนำนน หมำยถง กำรท ำใหเกดกำรเปลยนแปลง

จำกสภำพหนงไปสอกสภำพหนงทดกวำเดมอยำงเปนระบบ ก

เหมอนกบกำรพฒนำเวบไซตถอวำเปนบทบำททส ำคญมำกเลย

ทเดยว เพรำะมผลตอกำรน ำไปใชใหเกดประโยชน ในกำรเขำไป

ศกษำ คนควำ ในเรองของกำรจดกำรเนอหำเปนสงทส ำคญทสด

ในระบบเวบไซต เพรำะเปนสงทบงบอกไดวำเปนเวบไซตทด

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

ระบบ จะตองสำมำรถเพม แกไข หรอบทควำมหรอเนอหำได

อยำงเปนระบบระเบยบ ไมยงยำก และมควำมนำสนใจ

1

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

ความหมายของเวบไซต เวบไซต (องกฤษ: website, web site, Web site)

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

2

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

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

37

การประเมนเวบไซต แนวกำรประเมนเวบไซต 1. หนำทของเวบไซต (Authority) เกยวกบหนำทของเวบทสรำงขนนนตองดวำใครหรอผใชเวบน อะไรคอควำมถกตอง เหมำะสม ชอบธรรม ระหวำงควำมสมพนธของเรอง และ กำรรบประกนคณภำพของเวบเพจนทมตอผชม 2. ควำมถกตอง (Accuracy) แหลงขอมลและขอเทจจรงทน ำมำสรำงเวบสำมำรถแยกแยะเปนประเดนรำยกำรตำงๆ สำมำรถตรวจสอบยอนหลงไดหรอไม

36

3. จดประสงค (Objective) จดมงหมำยในกำรสรำงชดเจนและบอกควำมสมพนธของสงทตองกำรนนชดเจน 4. ควำมเปนปจจบน (Currency) เวบเพจทสรำงขนนนตองแสดงวนททเปนปจจบนดวย เชน บอกวำสรำงเมอใด และมกำรแกไขครงหลงสดเมอใด 5. ควำมครอบคลม (Coverage) กำรสรำงเวบไซตตองใหตรงกบจดสนใจ หวเรองมควำมชดเจน เหมำะกบรปภำพ โครงเรองและเนอหำสำระวธกำรคนหำขอมลในเวบไซตชดเจน

3

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

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

4

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

กำรออกแบบเวบไซตทมประสทธภำพนนตองค ำนงถง องคประกอบส ำคญดงตอไปน

1. ควำมเรยบงำย (Simplicity) หมำยถง กำรจ ำกดองคประกอบเสรมใหเหลอเฉพำะ

องคประกอบหลก กลำวคอในกำรสอสำรเนอหำกบผใชนน เรำตองเลอกเสนอสงทเรำตองกำรน ำเสนอจรง ๆ ออกมำในสวนของกรำฟก สสน ตวอกษรและภำพเคลอนไหว ตองเลอกใหพอเหมำะ ถำหำกมมำกเกนไปจะรบกวนสำยตำและสรำงควำมค ำรำญตอผใชตวอยำงเวบไซตทไดรบกำรออกแบบทด ไดแก เวบไซตของบรษทใหญ ๆ อยำงเชน Apple Adobe Microsoft หรอ Kokia ทมกำรออกแบบเวบไซตในรปแบบทเรยบงำย ไมซบซอน และใชงำนอยำงสะดวก

35

Footer คอสวนลำงสดของหนำเวบไซต สวนใหญจะเกบลงค

ตำงๆเอำไว หรอเปนเนอหำทเกยวกบเวบไซตเชนลขสทธตำงๆ

ถำมวำจ ำเปนตองมหรอไม บอกไดวำจ ำเปนอยำงยง footer จะ

เปนตวบอกผชมวำสวนนคอลำงสดของหนำทก ำลงแสดงอยแลว

นะ ไมมเนอหำเพมเตมแลว ท ำไมตองบอกเนองจำกกำรแสดง

เวบไซตในบำงครงนนหนำนนอำจโหลดไดไมหมด อำจแสดงได

แคเนอหำภำยใน หำกเรำออกแบบใหม footer ตงแตแรก

ผใชงำนกจะรไดทนทวำหนำทแสดงผลนอำจแสดงไดไมสมบรณ

เพรำะยงไมเหน footer และยงมผลตอภำพลกษณของเวบไซต

โดยตรง

34

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

5 2. ควำมสม ำเสมอ ( Consistency) หมำยถง กำรสรำงควำมสม ำเสมอใหเกดขนตลอดทง

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

6 3. ควำมเปนเอกลกษณ (Identity) ในกำรออกแบบเวบไซตตองค ำนงถงลกษณะขององคกร

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

33

Navigation

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

32

Content

สวนเนอหำของเวบไซต เปนสวนทส ำคญมำกทสด

หำกผใชงำนไมสำมำรถเขำถงไดโดยงำยผใชงำนจะเปลยนไปชม

เวบใหมทนท ต ำแหนงทควรวำงเนอหำไวคอสแดง หรอต ำแหนง

อนๆทคดวำจะท ำใหผหำเจอไดโดยไมล ำบำก หำกสงเกตดจะ

พบวำเวบไซตบำงเวบไซตมโฆษณำทมำกจนเกนไป ท ำใหผใชงำน

หำเนอหำไมเจอ นนถอเปนกำรออกแบบทผดพลำด

7

4. เนอหำ (Useful Content) ถอเปนสงส ำคญทสดในเวบไซต เนอหำในเวบไซตตอง

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

8 5. ระบบเนวเกชน (User-Friendly Navigation) เปนสวนประกอบทมควำมส ำคญตอเวบไซตมำก

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

31

Containing block โดยปรกตเรำจะเขยน <div> หรอ <table> ตอจำก

<body> เพอเอำไวเกบเนอหำทงหมดของเวบไซตกอน เพอเอำไวเปนกลองในกำรเกบเนอหำทงหมด โดยกลองของเรำจะมขอดอยตรงท สำมำรถท ำใหปรบเปลยนขนำดในกำรแสดงผลของเนอหำได หรอต ำแหนงกำรแสดงผลของเวบไซตไดเชน จดกลำง ชดซำย หรอชดขวำ หำกนกภำพไมออก ลองเขยนเวบไซตโดยเรมทใสตวหนงสอลงไปกอน จำกนนหำกตองกำรจดตวหนงสอเหลำนนจะท ำไดยำกมำก ดงนนทกครงทออกแบบเวบไซตอยำงลมทจะสรำง containing block เอำไวใสเนอหำทงหมดกอน เพอควำมสะดวกของเรำเอง

30

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

9

6. คณภำพของสงทปรำกฏใหเหนในเวบไซต (Visual Appeal)

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

10

7. ควำมสะดวกของกำรใชในสภำพตำง ๆ (Compatibility)

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

29

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

ส ำหรบคนทเรมตนออกแบบเวบไซตในครงแรกไมรวำ

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

28 7. เวบไซตทจ ากดเฉพาะสมาชก (Regis rational website)

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

11

8. ควำมคงทในกำรออกแบบ (Design Stability)

ถำตองกำรใหผใชงำนรสกวำเวบไซตมคณภำพ ถกตอง

และเชอถอได ควรใหควำมส ำคญกบกำรออกแบบเวบไซตเปน

อยำงมำก ตองออกแบบวำงแผนและเรยบเรยงเนอหำอยำง

รอบคอบ ถำเวบทจดท ำขนอยำงลวก ๆ ไมมมำตรฐำนกำร

ออกแบบและระบบกำรจดกำรขอมล ถำมปญหำมำกขนอำจ

สงผลใหเกดปญหำและท ำใหผใชหมดควำมเชอถอ

12

9. ควำมคงทของกำรท ำงำน (Function Stability)

ระบบกำรท ำงำนตำง ๆ ในเวบไซตควรมควำมถกตอง

แนนอน ซงตองไดรบกำรออกแบบสรำงสรรคและตรวจสอบอย

เสมอ ตวอยำงเชน ลงคตำง ๆ ในเวบไซต ตองตรวจสอบวำยง

สำมำรถลงคขอมลไดถกตองหรอไม เพรำะเวบไซตอนอำจมกำร

เปลยนแปลงไดตลอดเวลำ ปญหำทเกดจำกลงค กคอ ลงคขำด

ซงพบไดบอยเปนปญหำทสรำงควำมร ำคำญกบผใชเปนอยำงมำก

27

6. เวบไซตเพอการสอน (Instructional website)

เปนเวบทสรำงขนเปนกำรสอนโดยเฉพำะเปนรำยวชำ (Course)

อำจแยกยอยเปนหวเรองเรองยอยๆ กไดส ำหรบเวบไซตประเภท

นจะจ ำกดผใชเฉพำะรำย

26 5. เวบไซตทสรางขนเพอชกชวนหรอโฆษณาชวนเชอ (Persuasive website)

เปนเวบทเชญชวนหรอชกน ำใหเหนคลอยตำมในเรองทผสรำงตองกำร

13

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

ออกแบบหนาเวบไซต (Page Design) หนำเวบเปนสงแรกทผใชจะไดเหนขณะทเปดเขำส

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

โดยมเปำหมำยส ำคญเพอกำรสอควำมหมำยทชดเจนและนำสนใจ บนพนฐำนของควำมเรยบงำยและควำมหนำเวบจะประกอบดวย รปภำพ ตวอกษร สพน ระบบเนวเกชน และองคประกอบอน ๆ ทชวยสอควำมหมำยของเนอหำและอ ำนวยควำมสะดวกตอกำรใชงำน

หลกส ำคญในกำรออกแบบหนำเวบกคอ กำรใชรปภำพและองคประกอบตำง ๆ รวมกนเพอสอควำมหมำย เกยวกบเนอหำหรอลกษณะส ำคญของเวบไซต สะดวกของผใช

14

การออกแบบเวบไซต ตองค านงถง

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

25 4. เวบไซตสงเสรมการบรการเปนสอกลางของขอมล (Share Information website)

เปนเวบทมจดประสงคทจะใชเปนกำรแลกเปลยนขอมลตำมกลมสนใจ เชน แบงตำมอำชพ ตำมงำนอดเรก เปนตน

24 3. เวบไซตทเสนอขาวประจ าวน (Current website)

เปนเวบทเสนอขอมลประเภทขำว ซงจะเปลยนไปเปนประจ ำวน เชน เวบไซตของหนงสอพมพไทยรฐ เดลนวส เปนตน

15

5. ระบบเนวเกชนทใชงำนงำย ตองออกแบบใหผใชเขำใจงำยและใชงำนสะดวก ใชกรำฟกทสอควำมหมำยรวมกบค ำอธบำยทชดเจน 6. ลกษณะทนำสนใจ หนำตำของเวบไซตจะตองมควำมสมพนธกบคณภำพขององคประกอบตำงๆ เชน คณภำพของกรำฟกทจะตองสมบรณ กำรใชส กำรใชตวอกษรทอำนงำย สบำยตำ กำรใชโทนสทเขำกนลกษณะหนำตำทนำสนใจนนขนอยกบควำมชอบของแตละบคคล 7. กำรใชงำนอยำงไมจ ำกด ผใชสวนใหญสำมำรถเขำถงไดมำกทสดเลอกใชบรำวเซอรชนดใดกไดในกำรเขำถงเนอหำ 8. คณภำพในกำรออกแบบ กำรออกแบบและเรยบเรยงเนอหำอยำงรอบคอบ สรำงควำมรสกวำเวบไซตมคณภำพ ถกตอง และเชอถอได

16

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

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

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

23 2. เวบไซตเพอธรกจการคา (Promotional website) เวบไซตนมจดประสงค เพอกำรคำขำยสนคำกำรโฆษณำสนคำ กำรสงเสรมกำรขำย ในเวบไซตจะมขอมลของสนคำ รำคำและกำรบรกำรตำงๆ ซงในปจจบนตลำดประเภทนก ำลงใชกนมำกขน

22

ประเภทของเวบไซต

ในอนเตอรเนตมเวบไซตทสรำงขนเพอจดประสงคตำงๆหลำยประเภทซงพอจะแยกเวบไซตได7ประเภท ดงน 1. เวบไซตสวนตว (Personal website) เปนเวบทสรำงขนเพอเผยแพรขอมลสวนตว เชน ขอมลเกยวกบสวนตว กำรศกษำ กำรงำน ควำมสนใจ เปนตน

17

รปแบบของโครงสรางเวบไซต เรำสำมำรถวำงรปแบบโครงสรำงเวบไซทไดหลำยแบบ

ตำมควำมเหมำะสม เชน แบบเรยงล ำดบ ( Sequence ) เหมำะส ำหรบเวบไซทท

มจ ำนวนเวบเพจไมมำกนก แบบระดบชน ( Hierarchy ) เหมำะส ำหรบเวบไซททม

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

18

ทฤษฎการใชส ตาราง คสของตวอกษรและพนหลงทนยมใช ทมำ : ถนอมพร เลำหจรสแสง, หลกกำรออกแบบและกำรสรำงเวบเพอกำรเรยน กำรสอน :Designing e-Learning (กรงเทพฯ : ส ำนกพมพแหงจฬำลงกรณมหำวทยำลย, 2545), 170.

สตวอกษร สพนหลง ขำว ฟำ แดง เขยว ชมพ (Magenta)

เหลอง ฟำ ด ำ

ฟำอมเขยว (Cyan) ขำว ฟำ เขยว ขำว เหลอง

ชมพ (Magenta) ขำว ฟำ

แดง ขำว เหลอง ฟำอมเขยว เขยว ฟำ ขำว ด ำ

ด ำ ขำว เหลอง

21

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

ส มวง ความหมายในเชงบวก ควำมลกลบ ควำมสงสงหรหรำ ควำมทนสมย ควำมสรำงสรรค กำรใหควำมรกำรบ ำบดรกษำ ควำมรอบร ความหมายในเชงลบ ควำมหยงยโส ควำมแปลกควำมเศรำโศกเสยใจ สญลกษณ สงของทเกยวของ จต วญญำณ ปญญำ

20

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

19

ส เหลอง ความหมายในเชงบวก ควำมสดใสรำเรง ควำมหวงควำมอบอน ควำมร ำรวย กำรมองโลกในแงด ควำมสขปรชญำ ควำมคดฝน ความหมายในเชงลบ ควำมไมซอสตย กำรทรยศควำมขลำดกลว ควำมอจฉำควำมไมแนนอน อำกำรปวย สญลกษณ สงของทเกยวของ แสงอำทตย ฤดรอนทอง ศำสนำ ปรชญำอดมคตสญญำณเตอนภย

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