สมุดเล่มเล็ก

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

สมาชกในกลมท 9

นางสาวจราวรรณ ผกาเชด รหสนกศกษา 533410080505 นางสาวนฐยา ดอนปรชา รหสนกศกษา 533410080519 นางสาวนนทหทย แสนโสภา รหสนกศกษา 533410080510 นายยทธภม จนทยทธ รหสนกศกษา 533410080542

เสนอ

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

รายวชาโปรแกรมสรางเวปเพอการศกษา (Web Programmin for Education) ภาคเรยนท 1 สาขาวชาคอมพวเตอรศกษา คณะครศาสตร

มหาวทยาลยราชภฏมหาสารคาม พ.ศ. 2556

ค าน า

หนงสอเลมเลกนเปนสวนหนงของรายวชา 1193524 โปรแกรมสรางเวบเพอการศกษา (Web Programming for Education) โดยมจดประสงคเพอการศกษาหาความรไดจากเรอง การพฒนาเวบไซตจากแหลงความร และงานวจยทเกยวของกบการพฒนาเวบไซต องคประกอบของเวบไซต ซงรายงานนมเนอหาเกยวกบ หลกการและทฤษฎการสอสาร การประชาสมพนธ การจดการเรยนการสอนผานเวบ ความหมายของเวบไซต การออกแบบและการพฒนา ขนตอนการพฒนา การออกแบบโครงสรางเวบไซต สวนประกอบของเวบไซต กระบวนการพฒนา ประเภทของเวบไซต การประเมนเวบไซต และการโปรเมทเวบไซต (Promote wed)

ผจดท าไดเลอกหวขอนในการท ารายงาน เนองมาจากเปนเรองทนาสนใน ตรงกบจดประสงคในการเรยนในรายวชา 1193524 โปรแกรมสรางเวบเพอการศกษา (Web Programming for Education) ผจดท าจะตองขอขอบคณ ทาน อาจารยปวรศ สารมะโน ผใหความรและแนวทางการศกษา เพอน ๆ ทกคนทใหความชวยเหลอมาโดยตลอด ผจดทาหวงวารายงานฉบบนจะใหความร และเปนประโยชนแกทก ๆ ทาน

คณะผจดท า จราวรรณ ผกาเชดและคณะ

สารบญ

เรอง หนา การพฒนาเวบไซต บทท 1 หลกการและทฤษฎการสอสาร…………………………………………..… 1 บทท 2 การประชาสมพนธ……………………………………………………………... 2 บทท 3 การจดการเรยนการสอนผานเวบ………………………………………… 4 บทท 4 ความหมายของเวบไซต…………………………………………………….…. 7 บทท 5 การออกแบบและการพฒนาเวบไซต ……………………………………. 8 บทท 6 ขนตอนการพฒนา……………………………………………………………… 11 บทท 7 การออกแบบโครงสรางเวบไซต…………………………………….……… 13 บทท 8 สวนประกอบของเวบไซต…………………………………………….……… 20 บทท 9 กระบวนการพฒนาเวบไซต……………………………….………………… 22 บทท 10 ประเภทของเวบไซต……………………………………………………….… 23 บทท 11 การประเมนเวบไซต…………………………………………………….…… 28 บทท 1 การโปรโมทเวบไซต…………………………………………………………… 29 บทท 1 องคประกอบของเวบไซต……………………………………..…………….. 30 บทท 1 องคประกอบของการจดทาเวบเพจ……………………………………... 31 บทท 1 ขนตอนการจดท าเวบเพจ………………………………………………….… 32 บทท 1 หลกการออกแบบเวบเพจทด…………………………………………….… 33 บรรณานกรม

บทท 1 หลกการและทฤษฎการสอสาร

ทฤษฎการสอสารกคอการอธบายการสอสารในดานความหมาย กระบวนการ องคประกอบ หลกการ วธการ บทบาทหนาท ผล อทธพล การใช การควบคม ปรากฏการณทเกยวกบการสอสาร สภาพปญหา และแนวโนมในอนาคต รวมทงการอธบายแนวคดของศาสตรตาง ๆ ทเกยวกบการสอสาร

เราอาจจ าแนกทฤษฎการสอสารออกไดเปน 3 ประเภทใหญ ๆ คอ (1) ทฤษฎการสอสารแนวปฏบต ทพฒนามาจากทฤษฎเพอการสอสาร (2) ทฤษฎการสอสารแนวปรชญาวทยาศาสตร ทพฒนามาจากทฤษฎของการสอสาร และ (3) ทฤษฎการสอสารแนววพากษ ทพฒนามาจากทฤษฎเกยวกบการสอสาร

คอ การถายทอดขอมลขาวสารจากบคคลฝายหนงทเรยกวาผสงสารไปยงยงบคคลอกฝาย

หนงทเรยกวาผรบสารโดยผานชองทางในการสอสาร โดยมองคประกอบทส าคญคอ ผสงสาร(Sender) สาร(Message) ชองทาง(Channel) และตวผรบสาร(Reciever) ซงมกเรยกกนวา SMC

การสอสารในชวตของแตละบคคลนนลวนมวตถประสงคทแตกตางกนออกไป และสงผล

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

บทท 1 หลกการและทฤษฎการสอสาร

ความหมายของการสอสาร

วตถประสงคของการสอสาร

1

บทท 2 การประชาสมพนธ

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

เนอหา การประชาสมพนธคงเปนสงแรกทตองท า เพราะมของดแลวไมมใครรกเปนเรองทนาเสยดาย ส าหรบการแนะน าเวบไซตใหเปนทรจก มหลากหลายรปแบบ แตในสวนนแนะน าพนฐานททกคนสามารถท าไดโดยไมมคาใชจายใดๆ คอ 1. Search Engine การประชาสมพนธเวบผใชงานอนเทอรเนตสวนใหญเมอตองการคนหาขอมล คงหนไมพนเขาไปยงผใหบรการคนหาเวบไซตหรอ Search Engine ถาจะท าใหเวบเปนทรจกกตองใหเวบของเราเขาไปอยในฐานขอมลของผใหบรการเหลานน โดยผใหบรการ Search Engine จะมสวนบรการทใหเขาไปเพมเวบไซต (Add URL) พรอมแนะน าขอมลเบองตน หรอใหเพมเฉพาะ URL ของเวบไซตอยางเดยว ตามแตระบบของผใหบรการดงน - Google - Yahoo - MSN โดยผใหบรการ Search Engine แตละรายจะสง Robot หรอเครองมออตโนมตเขามายงเวบไซตเพอเกบเนอหา ค าตางๆเขาไปท าดชนยงฐานขอมล เมอผใชอนเทอรเนตคนหา"ค า" ทตรงกบเนอหากบเวบไซตของเรากจะถกแสดงใหผใชงานอนเทอรเนตไดเลอกเขาชม 2.หมวดหมเวบ (Directory) เปนอกชองทางในการประชาสมพนธเวบไปยงผใหบรการรวมลงคตางๆ เพราะจะเปนแหลงทมผใชอนเทอรเนตเขาไปหาขอมลเปนจ านวนมาก มการจดแบงเวบไซตไวเปนหมวดหมงายตอการเขาชม


2


3. แลกเปลยนลงค (banner exchange) การแลกเปลยนลงคเปนอกชองทางในการแนะน าเวบไซตใหเปนทรจก เวบไซตทรบแลกเปลยนลงคจะประกาศแจงไว หรอหากไมมกสามารถสงอเมลไปสอบถามหรอขอแลกเปลยนไดเชนกน อาจดจากความใกลเคยงของเนอหาหรอกลมเปาหมาย การแลกลงคมทงแบบลงคขอความ หรอแบนเนอร ตกลงกนไดตามความพอใจ

1. เมอออกแบบเวบไซตเสรจเรยบรอยแลว ใหท าการอบโหลดเวบไซตใหสามารถเผยแพรสโลกอนอนเทอรเนตได 2. ตองท าการประชาสมพนธเวบไซต มวธการประชาสมพนธใหตรงกบกลมเปาหมาย ม 2 แบบใหเลอกคอ 2.1 แบบไมเสยคาบรการ 2.2 แบบเสยคาบรการ 3. ตองท า SEO (Search Engine Optimization)มาจากค าเตมๆ วา Search Engine Optimization ความหมายคอ การปรบแตงเวบไซต และกระบวนการตางๆ ของเวบไซตตงแตการออกแบบเขยนโปรแกรม และการโปรโมทเวบ เพอใหตดอนดบตนๆ ของ Search Engine (เครองมอคนหาเวบไซตตางๆ เชน Google, MSN, Yahoo, AOL เปนตน)

ขนตอนการประชาสมพนธเวบไซต

3

บทท 3 การจดการเรยนการสอนผานเวบ

การใชเวบเพอการเรยนการสอน เปนการน าเอาคณสมบตของอนเทอรเนตมาออกแบบเพอใชในการศกษาดวยการใชอนเทอรเนตเปนสอกลางในการเรยนการสอนระหวางผเรยนและผสอนซงการจดการเรยนการสอนผานเวบมชอเรยกหลายลกษณะ เชน การจดการเรยนการสอนผานเวบ(Web-based Instruction) เวบการเรยน (Web-based Learning) เวบฝกอบรม (Web-basedTraining) อนเทอรเนตฝกอบรม (Internet-based Training) อนเทอรเนตชวยสอน (InternetbasedInstruction) เวลดไวดเวบฝกอบรม (WWW-based Training) และเวลดไวดเวบชวยสอน(WWW-based Instruction)

การเรยนการสอนผานเวบ (Web-based Instruction) หมายถง การจดการเรยนการสอนทงกระบวนการหรอบางสวนผานบรการเวลดไวดเวบในเครอขายอนเทอรเนต มการออกแบบบทเรยนในลกษณะโปรแกรมแบบไฮเปอรมเดย โดยอาศยประโยชนจากคณลกษณะและทรพยากรบนเวลดไวดเวบมาจดสภาพแวดลอมทสงเสรมและสนบสนนการเรยนการสอน รวมกบทฤษฎการเรยนรและหลกการออกแบบการเรยนการสอน เพอสนบสนนผเรยนใหเรยนรอยางมความหมาย การเรยนการสอนผานเวบจงถอเปนวธการใหมทชวยสงเสรมพฒนาใหเกดการเรยนร และชวยขจดอปสรรคของการเรยนการสอนทางดานสถานทและเวลา


การออกแบบบทเรยนผานเวบ

ความหมายของการเรยนการสอนผานเวบ

1. การสรางแรงจงใจใหกบผเรยน (Motivating the Learned)ActiveInvolvement) 2. บอกวตถประสงคของการเรยน (Identifying What is to be Learned)

4


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

5

การจดการเรยนการสอนผานเวบ

5. ใหค าแนะน าและใหขอมลยอนกลบ (Providing Guidance and Feedback)

6. ทดสอบความร (Testing)

4. ผเรยนตองมความกระตอรอรนทจะเรยนร (Requiring ActiveInvolvement)

7. การน าความรไปใช (Providing Enrichment and Remediation)

3. ทบทวนความรเดม (Reminding Learners of Past Knowledge ActiveInvolvement)


1. การสอนบนเวบเปนการเปดโอกาสใหผเรยนทอยหางไกล หรอไมมเวลาในการมาเขาชนเรยนไดเรยนในเวลาและสถานท ๆ ตองการ 2. การสอนบนเวบยงเปนการสงเสรมใหเกดความเทาเทยมกนทางการศกษา 3. การสอนบนเวบน ยงชวยสงเสรมแนวคดในเรองของการเรยนรตลอดชวต 4.การสอนบนเวบ ชวยทลายก าแพงของหองเรยนและเปลยนจากหองเรยนสเหลยมไปสโลกกวางแหงการเรยนร เปดโอกาสใหผเรยนสามารถเขาถงแหลงขอมลตางๆไดอยางสะดวกและมประสทธภาพ 5. การสอนบนเวบเปนวธการเรยนการสอนทมศกยภาพ เนองจากทเวบไดกลายเปนแหลงคนควาขอมลทางวชาการรปแบบใหมครอบคลมสารสนเทศทวโลกโดยไมจ ากดภาษา 6. การสอนบนเวบจะชวยสนบสนนการเรยนรทกระตอรอรน 7. การสอนบนเวบเออใหเกดการปฏสมพนธ คอปฏสมพนธกบผเรยนดวยกนและ/หรอผสอน ปฏสมพนธกบบทเรยนในเนอหาหรอสอการสอนบนเวบ 8. การสอนบนเวบยงเปนการเปดโอกาสส าหรบผเรยนในการเขาถงผเชยวชาญสาขาตาง ๆ ทงในและนอกสถาบนจากในประเทศและตางประเทศทวโลก 9. การสอนบนเวบเปดโอกาสใหผสอนสามารถปรบปรงเนอหาหลกสตร ใหทนสมยไดอยาง สะดวกสบาย 10. การสอนบนเวบเปดโอกาสใหผเรยนไดมโอกาสแสดงผลงานของตน สสายตาผอนอยางงายดาย

ประโยชนการเรยนการสอนผานเวบ

6

บทท 4 ความหมายของเวบไซต

ธวชชย ศรสเทพ (2544,หนา) ไดกลาวถงความหมายของเวบไซตวาเปนกลมของเวบเพจท

หนวยงานเดยวกนเชอมโยงกนดวยระบบไฮเปอรลงค ในเวบไซตหนงจงประกอบดวยเวบเพจหลายๆ หนา

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

อเนก ปนศร (2552: 9) กลาววา “เวบไซต หมายถง แหลงทเกบรวบรวมขอมลเอกสารและสอประสมตางๆ เชน ภาพ เสยง ขอความ เปนตน ของแตละหนวยงานบนอนเทอรเนต”

เวบไซต (Web Site) คอเวบเพจอยางนองสองหนาทมลงคถงกน ม บรรยากาศสภาพแวดลอม เชน สพนและโครงสรางเวบเพจคลายคลงกน อยางไรกตาม ในทางปฏบตแลวค าวาเวบไซทจะใชเฉพาะกบผมคอมพวเตอรเซรฟเวอรเปนของตนเอง และจดทะเบยนขนชอเวบไซทของตนไวเรยบรอย อยางทเรยกกนวา โดเมนเนม (Domain Name) เชน CNN.COMเปนตน

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

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

บทท 4 ความหมายของเวบไซต

7

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

การออกแบบเวบไซต เปนการก าหนดรปแบบการน าเสนอเนอหาของเวบไซต สามารถ

ด าเนนไดดงน

หลกการออกแบบหนาเวบไซต 1. สรางล าดบชนความส าคญขององคประกอบ (Visual Hierarchy) การสรางล าดบชนความส าคญขององคประกอบตางๆภายในเวบ เพอเนนใหเหนวาอะไรเปนเรองส าคญมาก ส ารองลงไปหรอส าคญนอยตามล าดบการจดระเบยบขององคประกอบอยางเหมาะสม จะชวยแสดงถงความสมพนธระหวางองคประกอบอยางเหมาะสม


1. การออกแบบโฮมเพจ (Homepage)

2. การออกแบบเวบเพจ (Wedpage)

3. องคประกอบภายในเวบเพจ)

4. การเชอมโยง

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

8


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

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

-ชอหวเรองหรอชอแสดงหมวดหมของเนอหา ชวยใหผใชรถงสวนของเนอหา ทปรากฎอย

สงส าคญทคณตองการโปรโมทในเวบไซต เพราะเปนบรเวณทผใชทกคนจะไดเหน เลอกใชสส าหรบเวบไซต (Designing Wed Colors) สสนในหนาเวบเพจ เปนสงทมความส าคญมากในการดงดดความสนใจของผใช เนองจากสงแรกทพวกเขามองเหนจากเวบเพจกคอ ส ซงเปนสงก าหนดบรรยากาศและความรสกโดยรวมของเวบไซต ขอคดในเกยวกบการใชสในเวบไซต 1. ใชสอยางสม าเสมอ 2. ใชสอยางเหมาะสม 3. ใชสเพอสอความหมาย

ตวอยางเวบไซตทมการใชทฤษฎสเปนตวสอความหมาย

9


การพฒนาเวบไซต เปนการก าหนดโครงสรางหลกทใชในการพฒนาเวบไซต ท

ประกอบดวยขอความ เสยง ภาพนง ภาพวดทศน ในเครอขายซงประกอบดวยการเชอมโยงภายในเวบเพจเดยวกน การเชอมโยงกบเวบเพจอนทอยภายในเวบไซตเดยวกน การเชอมโยงไปยงเวบไซตอนๆ ในสวนของเสยง และวดทศนใชโปรแกรมเรยลเพล-เยอรในการเปดฟงหรอชมโดยมขนตอนในการพฒนาเวบไซต ดงน 1. การก าหนดแหลงเกบขอมล ส าหรบเวบไซตทสรางขนผวจยก าหนดใหจดเกบไวทตวบรการเวบของส านกการศกษาตอเนอง และสวนกลางของมหาวทยาลยสโขทยธรรมาธราช 2. การก าหนดโฟลเดอร (Folder) ส าหรบจดเกบขอมล และก าหนดประเภทแฟม ขอมล (File) ทใชในการพฒนาเวบไซต 3. การก าหนดรปแบบของค าสงหลกทใชในการพฒนาเวบไซต ไดแก 3.1) อนคลด (Includes) ใชในการจดการกบเมนหลก เมนยอย และสวนทาย (Footer)ของทกๆ เวบเพจซงมขอดคอ ชวยใหการบรหารจดการเวบไซตงายและสะดวก ลดการซ าซอนในการท างานลดความผดพลาดในการเขยนค าสง การแกไขสามารถท าไดงายและรวดเรว (รจกา สภาพนธ 2543 : 71) 3.2) แผนแบบ (Cascading style sheets หรอ CSS) ใชในการก าหนดการแสดงผลของตวอกษรใหมรปแบบและขนาดเหมอนๆ กน ซงมขอดคอ ผดแลเวบไซตสามารถควบคมรปแบบของตวอกษรใหเปนมาตรฐานเดยวกนทงเวบไซต ท าใหไมตองเสยเวลาในการดาวนโหลดเวบเพจนาน และสามารถจดรปแบบการแสดงผลภายในเวบเพจไดตามทออกแบบไว (อตพงศ จลโพธ 2545 : 156-157) 4. โปรแกรมในการพฒนาเวบเพจ เปนการสรางเวบเพจหนาตางๆ โดยการน าเนอหาทท าการศกษาและรวบรวม มาสรางเวบเพจตามรปแบบทก าหนดดวยโปรแกรมแมโครมเดย ดรมวพเวอร(Macromedia Dreamweaver) และโปรแกรมแมโครมเดยแฟลช (Macromedia flash)

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

10

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

การพฒนาเวบไซตและน าเวบไซตเขาสระบบ www ใหบคคลอนเขามาเยยมชมไดนน กระบวนการพฒนาเวบไซตสามารถจ าแนกได3ขนตอน ดงน (ประไพ ศรสะอาด, 2549 : 22-26) 1. การเตรยมการและการวางแผนงาน(pre-production) เปรยบเสมอนเขมทศทจะชน าทางหรอบงบอกใหผพฒนาเวบไซตทราบวา ควรจะตองเดนทางไปในทศทางใด ซงขนตอนนจะประกอบดวย การเตรยมกอนการด าเนนการ การวางแผนการด าเนนการ รวมทงการรวบรวมและวเคราะหโครงสราง 1.1 การเตรยมกอนการด าเนนการ ประกอบดวย 1.1.1 ก าหนดวตถประสงคและเปาหมายของเวบไซต เพอใหเหนภาพทชดเจน 1.1.2 ก าหนดชอเวบไซต และชอยอารแอล 1.1.3 ก าหนดกลมเปาหมายทจะใหเขาชมเวบไซต เพอจะไดทราบวาผทจะเขาชมเวบคอใคร จะไดด าเนนการออกแบบและด าเนนการจดท าเวบไซต เพอใหตอบสนองความตองการผชมกลมนนไดทากทสด 1.1.4 ศกษากลมคแขง 1.2 การวางแผนการด าเนนการ หลงการเตรยมกอนการด าเนนการ ควรมการวางแผนไวลวงหนา เพอใหการพฒนาเวบไซตมแนวทางทชดเจน 1.3 การรวบรวมและวเคราะหโครงสราง 2. การท างานจรงในการออกแบบและพฒนาเวบเพจ(on- production) แบงไดเปน 2 สวน คอ 2.1 การออกแบบเวบเพจนบเปนขนตอนในการออกแบบรปราง โครงสรางและลกษณะทางดานกราฟกทางหนาเวบเพจ โดยโปรแกรมทนยมน ามาใชในการออกแบบคอ โฟโตชอป หรอ ไฟลเวรก ซงจะชวยในการสรางเคาโครงของหนาเวบและองคประกอบตางๆ เชน ชอเวบไซต โลโก รปไอคอน ภาพเคลอนไหว แบรนเนอรโฆษณา เปนตน


11


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

ภาพอธบายของขนตอนพฒนาเวบไซต

12

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

ประสาน จนทะคาม(2552 :12) กลาววา “การออกแบบโครงสรางเวบไซต คอ การวางแผนการจดล าดบ เนอหาสาระของเวบไซต ออกเปนหมวดหม เพอจดท าเปนโครงสรางในการจดวางหนาเวบเพจทงหมด เปรยบเสมอนแผนท ทท าใหเหนโครงสรางทงหมดของเวบไซต ชวยในนกออกแบบเวบไซตไมใหหลงทาง การจดโครงสรางของเวบไซต มจดมงหมายส าคญคอ การทจะท าใหผเขาเยยมชม สามารถคนหาขอมลในเวบเพจไดอยางเปนระบบ ซงถอวาเปนขนตอนทส าคญ ทสามารถสรางความส าเรจใหกบผทท าหนาทในการออกแบบและพฒนาเวบไซต (Webmaster) การออกแบบโครงสรางหรอจดระเบยบของขอมลทชดเจน แยกยอยเนอหาออกเปนสวนตาง ๆ ทสมพนธกนและใหอยในมาตรฐานเดยวกน จะชวยใหนาใชงานและงาย ตอการเขาอานเนอหาของผใชเวบไซต”

โครงสรางเวบไซตสามารถแบงได4ประเภท ดงน (วชาการพฒนางานบนเวบ, 2551: ไมปรากฏหนา) 2.1 โครงสรางเวบไซตแบบเรยงล าดบ มลกษณะเปนโครงสรางแบบธรรมดาทนยมใชกนมากทสด เนองจากงายตอการจดระบบขอมล เปนโครงสรางทใชเกบขอมลทเปนเรองราวตามล าดบเวลา หรอด าเนนเนอหาไปตามล าดบ หรอด าเนนเนอหาจากเรองทวๆไป กวางๆ ไปสเรองทจ าเพาะเจาะจงมากขนหรอมรายละเอยดมากขน หรอการเรยงล าดบตามตวอกษร เชน ดรรชน สารานกรม หรออภธานศพท เปนตน


1.ความหมายของโครงสรางเวบไซต

2. ประเภทของโครงสรางเวบไซต

13


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

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

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

แกไขเวบไซตไดงาย 2.2.2 การน าเวบไซตแบบล าดบชนไปใช โครงสรางแบบนเหมาะกบเวบไซตทมขนาดใหญ ม

เนอหามาก แตมโครงสรางไมซบซอน สวนใหญจะใชกบเวบไซตการเรยนการสอน

14

บทท 7 การออกแบบโครงสรางเวบไซต 2.3 โครงสรางเวบไซตแบบตาราง มความซบซอนมากกวารปแบบทผานมา การออกแบบเพมความยดหยนใหแกการเขาสเนอหาของผใช โดยเพมการเชอมโยงซงกนและกน ระหวางเนอหาแตละสวน เหมาะแกการแสดงใหเหนถงความส าพนธกนของเนอหา การเขาสเนอหาของผใชจะไมเปนลกษณะเชงเสนตรง เนองจากผใชสามารถเปลยนทศทางการเขาสเนอหาของตนเองได 2.3.1 ประโยชนของเวบไซตแบบตาราง โครงสรางแบบตาราง เปนโครงสรางทมความยดหยนส าหรบผใช ทกๆเนอหามความส าคญเทาๆกน และมลกษณะรวมกน ดงนน ทกๆเนอหาจงสามารถเชอมโยงถงกนได ตามทผใชตองการ 2.3.2 การน าเวบไซตแบบตารางไปใช โครงสรางแบบนเหมาะกบเวบไซตทมขนาดใหญ มเนอหาจ านวนมากและมโครงสรางซบซอน ในการจดระบบโครงสรางแบบน เนอหาทน ามาใชแตละสวนควรมลกษณะทเหมอนกน และสามารถใชรปแบบรวมกน2.4 โครงสรางเวบไซตแบบใยแมงมม มความยดหยนมากทสด ทกหนาในเวบสามารถจะเชอมโยงไปถงกนไดหมด เปนการสรางรปแบบการเขาสเนอหาทเปนอสระ ผใชสามารถก าหนดวธการเขาสเนอหาไดดวยตนเอง การเชอมโยงแตละหนาอาศยการโยงใยขอความทมมโนทศนเหมอนกน 2.4.1 ประโยชนของเวบไซตแบบใยแมงมม คอ งายตอผใชในการทองเทยวบนเวบ โดยผใชสามารถก าหนดทศทางการเขาสเนอหาไดดวยตนเอง แตขอเสย คอ ถามการเพมเนอหาใหมๆอยเสมอ 2.4.2 การน าเวบไซตแบบใยแมงมมไปใช เนองจากโครงสรางแบบใยแมงมม เปนโครงสรางทมความยดหยนมากทสด จงนยมใชในแวดวงธรกจเพออ านวยความสะดวกแกผเยยมชม หรอผทคาดวาจะเปนลกคาอยางเตมท

15

บทท 7 การออกแบบโครงสรางเวบไซต ควรพจารณาดงน (รตนสดา ประกะสา, 2547 : 21) 3.1 ก าหนดวตถประสงค โดยพจารณาวาเปาหมายของการสรางเวบไซตนท าเพออะไร 3.2 ศกษาคณลกษณะของผทเขามาใชวากลมเปาหมายใดทผสรางตองการสอสาร ขอมลอะไรทพวกเขาตองการโดยขนตอนนควรปฏบตควบคไปกบขนตอนทหนง 3.3 วางแผนเกยวกบการจดรปแบบโครงสรางเนอหาสาระ การออกแบบเวบไซตตองมการจดโครงสรางหรอจดระเบยบขอมลทชดเจน การทเนอหาม ความตอเนองไปไมสนสดหรอกระจายมากเกนไป อาจท าใหเกดความสบสนตอผใชได 3.4 ก าหนดรายละเอยดใหกบโครงสราง ซงพจารณาจากวตถประสงคทตงไว โดยตงเกณฑในการใช เชน ผใชควรท าอะไรบาง จ านวนหนาควรมเทาใด มการเชอมโยง มากนอยเพยงใด 3.5 หลงจากนน จงท าการสรางเวบไซตแลวน าไปทดลองเพอหาขอผดพลาดและท าการแกไขปรบปรง แลวจงน าเขาสเครอขายอนเทอรเนตเปนขนสดทาย

การออกแบบโครงสรางเวบไซต (Site Design) เปนสงส าคญประการหนงในการพฒนามลตมเดยบนเวบ เพราะชวยท าใหมองเหนความสมพนธของขอมลทมอยในโครงสราง สะดวกตอการจดการกบการไหลของขอมลมลตมเดย ชวยในการจดการกบแฟม HTML และแหลงขอมลตางๆ ท าใหงายตอการคนหาขอมลเหลานน และน ากลบมาแกไขไดอยางเปนระบบความสมพนธของขอมลทมอยในโครงสรางเวบไซตแยกออกเปนระดบตางๆ แตละระดบมรปสญลกษณทใชเพอแสดงการจดระดบในเวบไซต ดงตอไปน

3. หลกในการออกแบบโครงสรางเวบไซต

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

16

บทท 7 การออกแบบโครงสรางเวบไซต (1) ระดบกอนหนาโฮมเพจ (Home Splash Page) ใชสญรป

ภาพรปแทนระดบกอนหนาโฮมเพจ

(2) ระดบท 1 เปนระดบของหนาโฮมเพจแสดงสวนตางๆของเนอหาสาระซงเปนระดบของหวขอหลกเชนเดยวกบหวขอหลกในสวนตางๆของหนงสอวารสารนตยสารหรอหนงสอพมพมสญรปทแสดงวาเปนเวบไซตระดบท 1

ภาพ สญรปแทนระดบท 1 หรอระดบของหนาโฮมเพจ

(3) ระดบท 2 เปนระดบทเปนขอมล (data) จดเปนระดบทเพมรายละเอยดของเนอหาเปนเสมอนบทแตละบท (chapter) ของเวบไซตในแตละสวนนนมสญรปเปนรปหกเหลยม

ภาพ สญรปแทนระดบท 2 หรอระดบขอมล (4) ระดบท 3 เปนระดบของแหลงขอมล (resource) เปนระดบทแสดงรายละเอยดของขอมลมสญรปเปนรปสเหลยม

ภาพสญรปแทนระดบทเปนแหลงขอมล

17

บทท 7 การออกแบบโครงสรางเวบไซต (1) โครงสรางเปนแนวเสนตรง (linear design) เมอตองการใหมการน าเสนอขอมลจากสวนทหนงไปสวนทสองและสวนทสามตามล าดบโดยแตละสวนกจะมบทแตละบทเรยงล าดบกนพรอมรายละเอยดของขอมลในแตละบทนน

ภาพ แสดงโครงสรางเวบไซตเปนแนวเสนตรง

(2) โครงสรางเปนล าดบชน (hierarchical structure) เมอมขอมลสมพนธกนทแยกออกไดเปนแตละสวนและแตละสวนนนไมจ าเปนตองเรยงไปตามล าดบจะไปยงสวนใดกอนกไดและในแตละสวนเองกจะมทางเลอกใหไปยงบทหรอหวขอทตองการเพอเขาสรายละเอยดของเนอหาในแตละบทหรอหวขอนน

ภาพแสดงโครงสรางเวบไซตเปนล าดบชน

18


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

ภาพแสดงโครงสรางเวบไซตแบบปรามด (4) โครงสรางเปนขว (polar structure) เปนโครงสรางทมความเหมาะสมตอการน ามาใชเมอมการจดแหลงขอมลทอยในระดบท 3 ใหพรอมใชงานไดโดยทวไปหวขอทอยในระดบท 2 และขอมลในระดบท 3 นนเปนขอมลทเกยวของเชอมโยงโดยตรงกบหวขอในระดบท 2

ภาพแสดงโครงสรางเวบไซตเปนขว

19

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

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

1. Containing block โดยปรกตเราจะเขยน<div>หรอ<table>ตอจาก<body>เพอเอาไวเกบเนอหาทงหมดของเวบไซตกอน เพอเอาไวเปนกลองในการเกบเนอหาทงหมด

2. Logo เปนสญลกษณทแสดงถงตวตนของเรา

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


20


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

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

5. Footer คอสวนลางสดของหนาเวบไซต สวนใหญจะเกบลงกตางๆเอาไว หรอเปนเนอหาทเกยวกบเวบไซตเชนลขสทธตางๆ

6. Whitespace พนทวางในเวบไซต คนสวนใหญมกไมเหนความส าคญของการเวนพนทวางไวในเวบไซต เรามกจะใสภาพหรอตวหนงสอเขาไปใหมากทสดเพราะคดวาจะท าใหเวบดสวยงามขน

21

บทท 9 กระบวนการพฒนา

ธวชชยศรสเทพ (2544) สรปกระบวนการพฒนาเวบไซตออกมาเปน 13 ขนตอนดงภาพ

ขนตอนท 1ส ารวจปจจยส าคญ (Research) 1. รจกตวเอง-ก าหนดเปาหมายและส ารวจความพรอม 2. เรยนรผใช-ระบกลมผใชและศกษาความตองการ 3.ศกษาคแขง-ส ารวจการแขงขนและเรยนรคแขง ขนตอนท 2พฒนาเนอหา (Site Content) 4.สรางกลยทธการออกแบบ 5.หาขอสรปขอบเขตเนอหา ขนตอนท 3พฒนาโครงสรางเวบไซต (Site Structure) 6.จดระบบขอมล 7.จดท าโครงสรางขอมล 8. พฒนาระบบเนวเกชน ขนตอนท 4ออกแบบและพฒนาหนาเวบ(Visualdesign) 9.ออกแบบลกษณะหนาตาเวบเพจ 10.พฒนาเวบตนแบบและขอก าหนดสดทาย ขนตอนท 5 พฒนาและด าเนนการ(Production and Operation) 11.ลงมอพฒนาเวบเพจ 12 .เปดตวเวบไซต 13. ดแลและพฒนาตอเนอง

บทท 9 กระบวนการพฒนา

22

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

ประเภทของเวบไซตม 9 ประเภทดงน

1. Online Store :เวบจ าหนายสนคา เชนเวบไซต http://www.chulabook.com/ ขายหนงสอของส านกพมพจฬาลงกรณวทยาลย

ภาพของหนาเวบไซต Online Store

2. Online service provider :ใหบรการออนไลน เชน http://www.thaitravelcenter.com ใหบรการดานการทองเทยวและอ านวยความสะดวกดานการจองทพกออนไลน

ภาพของหนาเวบไซต Online service provider


23

http://www.chulabook.com/


3. Online Brochure &Catalog :เวบใหขอมลองคกร สนคาบรษท เชน

http://www.seacon.co.th/ ใหขอมลองคกรวาเปนบรษทรบสรางบาน

ภาพของหนาเวบไซต Online Brochure &Catalog

4. Portal Website :เวบทารวมบรการตางๆ สาระบนเทง http://sanook.com/

เวบไซตทรวมบรการและความบนเทงตางๆ

ภาพของหนาเวบไซต Portal Website

24

http://www.seacon.co.th/

http://sanook.com/


5. Online Publisher/Content site :เวบขอมลทเปนประโยชนhttp://www.tourthailands.com/ บรการดานขอมลทองเทยวใหแกผทสนใจ

ภาพของหนาเวบไซต Online Publisher/Content

6. Online mall :แหลงซอขายสนคา รายไดจากคอมมชชน คาประกาศ และโฆษณา

http://www.weloveshopping.com/ เวบไซตทประกาศขายสนคา และโฆษณาของสมาชก

ภาพของหนาเวบไซต Online mall

25

http://www.tourthailands.com/


7. Online Community :เวบชมชนออนไลนhttp://www.pantipmarket.com/ ชมชน

ทมการแลกเปลยนความคดเหนในเรองตางๆตามทสนใจ

ภาพของหนาเวบไซต Online Community

8. Affiliate Marketer :เวบทสรางรายไดจากการเปนนายหนาออนไลน

http://webhostinggeeks.com/ เวบไซตทจ าหนาย web hosting

ภาพของหนาเวบไซต Online Community

26

http://webhostinggeeks.com/


9. Social Media Website :เวบสงคมออนไลนรนใหมhttp://www.facebook.com/

ภาพของหนาเวบไซต Social Media Website

27

http://www.facebook.com/

บทท 11 การประเมนเวบไซต

แนวทางในการประเมนเวบไซตมดงน (prachyanun, 2552 :ไมปรากฏหนา)

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

บทท 11 การประเมนเวบไซต

28

บทท12 การโปรโมทเวบไซต

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

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

1. การโปรโมทเวบไซตแบบออฟไลนเปนการโฆษณาผานทางสอหนงสอพมพโดยการลงโฆษณาในหนงสอพมพทวๆไป

2. การโปรโมทเวบไซตแบบออนไลน วธการโฆษณาแบบออนไลน การลงโฆษณาในเวบไซตดงๆ เชน Sanook.com , Pantip.com , Thai2hand.com เปน

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

ประกาศซอขายหรอลงโฆษณา ซงเปนบรการฟร โดยการแลกลงคกบพนธมตร โดยเฉพาะเวบไซตหรอบลอกทมเนอหาเกยวของกบเรา จะ

ชวยใหมคนมาเยยมชมในระดบหนงได การโปรโมทเวบไซตผาน Search Engine การโปรโมทประเภทนจะใหผลตรงจดมากทสด

ผคนในโลกออนไลนในปจจบนนยมคนหาขอมลตางๆ

ภาพของเวบไซตทใช Search Engine

บทท12 การโปรโมทเวบไซต

29

บทท 13. องคประกอบของเวบไซต

สามารถแบงออกเปน 4 สวน ไดแก - สวนหวของหนา(Page Header) - สวนของเนอหา(Page Content) - สวนคอลมนการเชอมโยง(Page Sidebar) - สวนทายของหนา(Page Footer)

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

บทท 13 องคประกอบของเวบไซต

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

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

30

บทท 14 องคประกอบของการจดท าเวบเพจ

1. ขอมล(data) เปนขอเทจจรงตางๆทไดจากการด าเนนการ ซงจะชวยในการตดสนใจ การรวบรวมขอมลขาวสารและการเขยนเวบเพจผเขยนจ าเปนตองเรยนรการเขยน โดยเฉพาะHTML ซงเปนภาษาสากลส าหรบเขยนเวบ

2. การก าหนดขนาดของแตละละหนาเอกสารในเวบเพจ 3. การก าหนดสของตวอกษรและสพน การใชสตวอกษรกบสพนท าใหอานงาย ควรมการ

จดคสตวน อกษรขาว พนสน าเงน อกษรเหลองพนสน าเงน อกษรเขยวพนสมวง อกษรเหลองพนสเขยว

4. การใชตวอกษรในเวบเพจ การเลอกตวอกษรแบบเรยบสภาพ หรอดเดนสะดดตา สอดคลองกบองคประกอบอน ๆ และเนอหา ตลอดจนจดประสงคของเวบเพจนน ๆ

5. ลกษณะโครงสรางของตวอกษร ตวอกษรทอานไดงาย คอ อกษรตวหนาและมหว เชน มานพ 2 จากการทมความแตกตางระหวางแตละตวอกษรอยางชดเจน

6. สงทชวยอ านวยความสะดวก 7. รปแบบทเปนสากล เนองจากการเผยแพรขอมลบนเครอขายเวลดไวดเวบ มผอาน

หลายเชอชาตภาษา ดงนนจงควรเลยงค าเฉพาะทไมเปนทเขาใจ โดยทวไปหรอตวยอทคลมเครอ

บทท 14 องคประกอบของการจดท าเวบเพจ

31

บทท 15 ขนตอนการจดท าเวบเพจ

ธวชชย ศรสเทพ (2544,หนา 31) ไดกลาวถงกระบวนการพฒนาเวบไซต โดยท

กระบวนการพฒนาเวบไซตนน จะตองมกระบวนการ13 ขนตอน ดงน 1. ก าหนดจดเปาหมายและส ารวจความพรอม 2. ระบกลมผใชและศกษาความตองการ 3. ส ารวจการแขงขนและเรยนรผแขง 4. สรางกลยทธการออกแบบ 5. หาขอสรปขอบเขตเนอหา 6. จดระบบขอมล 7 . จดท าโครงสรางขอมล 8. พฒนาระบบเนวเกชน 9. ออกแบบลกษณะหนาตาเวบไซต 10. พฒนาเวบตนแบบและขอก าหนดสดทาย 11. ลงมอพฒนาเวบไซต 12. เปดตวเวบไซต 13. ดแลและพฒนาอยางตอเนอง

บทท 15 ขนตอนการจดท าเวบเพจ

32

บทท16 หลกการออกแบบเวบเพจทด หลกการออกแบบเวบเพจทดมดงตอไปน

1. ความเปนเอกลกษณ (Identity) 2. ความนาเชอถอ 3. ความเปนเอกภาพ (Unity) 4. ลกษณะนาสนใจ (Visual Appeal) 5. ความสมดล (Balancing) 6. ความแตกตาง (Contrast) 7. ความกลมกลน(Harmony) 8. ความเรยบงาย (Simplicity) 9. ความสมบรณขนส าเรจ (Finish)

บทท16 หลกการออกแบบเวบเพจทด

33

สรป

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

34

บรรณานกรม

กฤณฐ สตยสนทร .(2552). การออกแบบเวบไซตการศกษาส าหรบการเรยนร

ประวตศาสตรซ : กรณศกษางานวจยแวดเวยงเชยงใหม .วทยานพนธศลปสตรมหาบณทต

มหาวทยาลยเชยงใหม.

การศกษาประสทธภาพการเรยนการสอนผานเวบเพจของนกศกษาวทยาลยพยาบาลทสงกดกระทรวงสาธารณสข. (2543, หนา 18-21).

จราภรณ หนสวสด. (2554). การพฒนารปแบบการเรยนการสอนแบบบรณาการผาน

เวบตามแนวทฤษฎการขยายความคดเพอสงเสรมผลสมฤทธทางการเรยน ความสามารถ

ในการแกปญหาและการถายโยงการเรยนรของผเรยนในระดบอดมศกษา. วทยานพนธดษฎ

บณฑต มหาวทยาลยเทคโนโลยพระจอมเกลาพระนครเหนอ.

ใจทพย ณสงขลา. (2542). การสอนผานเครอเครอเวลดไวดเวบ. กรงเทพ: จฬาลงกรณ

มหาวทยาลย.

ณรงคชย บญศร (2550) การพฒนาเวบไซตสถาบนอนทรจนทรสถตยเพอการคนควาและพฒนาพชศาสตรมหาวทยาลยเกษตรศาสตร. วทยานพนธศกษาศาสตรมหาบณฑต คณะศกษาศาสตร.

นฐพงษ เจนวรวฒน.(2546).การพฒนาเวบไซตของบณวทยาลย มหาวทยาลยบรพา.วทยานพนธหลกสตรปรญญาการศกษามหาบณฑต สาขาวชาเทคโนโลยทางการศกษาบณฑต มหาวทยาลยบรพา. ประชาสมพนธเวบไซต. คนเมอ 29มถนายน 2556. จากhttp://www.iwebpack.com/tutor.php?id=26

บรรณานกรม (ตอ) พงศศกด อภลกขตพงศ. 2552. สรางเวบไซตในพรบตาดวยJoomla! ฉบบสมบรณ.

ส านกพมพซเอดยเคชน , กรงเทพฯ. มหาวทยาลยเกษตรศาสตรวทยาลยสารพดชางพระนคร. (2549). โครงสรางเวบไซต.คน

เมอ29มถนายน 2556. จาก http://202.29.42.235/~eleaning/index.php?option=com_content&view.

ศรพร มณจนทร, (2549). การพฒนาเวบไซต. กรงเทพฯ:เธรดเอดยเคชน. สวนประกอบของเวบไซตทด. คนเมอวนท8 กรากฎาคม 2556 . จาก

http://www.hellomyweb.com/index.php/main/content/134 สพล กตตเพมพนวงศ .(2546).การพฒนาเวบไซตเพอเผยแพรความรดานวทยาศาสตรและ

เทคโนโลยบนเครอขายอนเทอรเนต .วทยานพนธหลกสตรปรญญาการศกษามหาบณฑต มหาวทยาลยบรพา.

สาวตร ลมงาม. (2554). แนวทางการพฒนาเวบไซต.คนเมอ 29มถนายน 2556. จาก http://www.cybered.co.th/warnuts/wbi/index3.htm.

เสถยร พลวงศ. (2549). ความหมายของส.คนเมอ 29มถนายน 2556. จากhttp://www.pointstudio.Net/wpoint/content/View/17/28.

หสนย รยาพนธ. (2554, หนา 11-14). การพฒนาเวบไซตศาลาพมขาวบณฑ มหาวทยาลยสโขทยธรรมาธราช (The Development of WebSite on Sala Phum Khao Bin, Sukhothai Thammathirat Open University).

อเนก ปนศร.(2552). ความรเบองตนเกยวกบการออกแบบเวบไซต.กรงเทพฯ: เคทพ. Hellomyweb. (2554). สวนประกอบของเวบไซตทด.คนเมอ29มถนายน 2556. จาก

เอก บ ารงศร.(2549).การพฒนารปแบบเวบไซตมหาวทยาลย กรณศกษา เวบไซตภาค

วทยาการคอมพวเตอร มหาวทยาลยสยาม .วทยานพนธปรญญาครศาสตรอสาหกรรมบณฑต

มหาวทยาลยเทคโนโลยพระจอมเกาธนบร.

สมุดเล่มเล็ก

Documents

based training

based instruction

web programming

web

www

google

http

hellomyweb