1

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

1. หลกการและทฤษฎการสอสาร ทฤษฎการสอสาร คอ การอธบายการสอสารในดานความหมาย กระบวนการ องคประกอบ วธการ

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

เราแปลคานมาจากภาษาองกฤษทวา communication theory ซงมความหมายครอบคลมกวางขวาง รวมไปถง theory of communication (ทฤษฎของการสอสาร) theories in communication (ทฤษฎในการสอสาร) theories for communication (ทฤษฎเพอการสอสาร) และ theories about communication (ทฤษฎเกยวกบการสอสาร)

1. ทฤษฎเพอการสอสาร เกดขนมานานกอนทจะมการศกษาในสาขาวชานเทศศาสตร เรมดวยปรชญาพทธและปรชญากรก ทวาดวยการคดและการพด หลกวธการเผยแพรศรทธาของศาสนาครสต ทฤษฎเศรษฐกจการเมองตาง ๆ วาดวยเสรภาพของการแสดงออกตงแตกอนการปฏวตฝรงเศส ทฤษฎทางการแพทยและสรรวทยาทวาดวยประสาทกบการรบสารและสมรรถภาพในการสงสารของมนษย ทฤษฎจตวเคราะหและจตบาบดของฟรอยด รวมไปถงหลกและทฤษฎตาง ๆ วาดวยภาษา สงคม และวฒนธรรม ลวนแลวแตเปนทฤษฎของสาขาตาง ๆ ททาหนาทเปนทฤษฎแนวปฏบต เพอการสอสารภายในบคคล ระหวางบคคล การสอสารในกลมหรอการสอสารในสงคมใหญ แมแตภายในสาขานเทศศาสตร กอนทจะมการสถาปนาเปนสาขาการศกษาในยโรปและอเมรกาตอนตนศตวรรษท 20 ความรทไดมาจากการปฏบตงานวชาชพวารสารศาสตร กยงมบทบาทเปนทฤษฎหลกเพอการปฏบตเรอยมา จนกระทงกลายเปนหลกสตรระดบปรญญาตรทสหรฐอเมรกาขยายไปเจรญเตบโตทเอเชยตะวนออก เอเชยใต องกฤษ และออสเตรเลย ในชวง 20 ป กอนศตวรรษท 21 การศกษาทางดานวารสารศาสตรทแยกเปนเอกเทศในระดบมหาวทยาลย เรมตนเปนครงแรกทมหาวทยาลยมสซร และมหาวทยาลยโคลมเบยทนวยอรค จนในปจจบนมวทยาลยหรอภาควชานเทศศาสตรในสหรฐอเมรกาประมาณ 1,500 แหง ในประเทศไทย เกดขนแลวประมาณ 50 แหง โดยเรมตนทมหาวทยาลยธรรมศาสตรและจฬาลงกรณมหาวทยาลย แลวขยายออกไปสสถาบนการศกษาทงของรฐและเอกชน ในตอนตน ๆ การศกษานเทศกศาสตรจะมงเนนในดานการใชทฤษฎเพอการสอสารมาประยกตเปนเทคนควธ และทกษะในการประกอบอาชพทางดานการสอสารมวลชนในระบบการเมองตาง ๆ โดยเฉพาะแบบเสรประชาธปไตย และระบบตลาดเสร บนพนฐานลทธทนนยม

โดยสรปทฤษฎเพอการสอสารกคอ ทฤษฎแนวปฏบต (operational theory) หรอหลกวชาทงมวลในการปฏบตงานดานการสอสาร โดยเฉพาะการสอสารมวลชนทอาศยหนงสอพมพ วทยกระจายเสยง โทรทศน ภาพยนตร และการสอสารธรกจทมการโฆษณา และการประชาสมพนธเปนหลกสาคญ

2. ทฤษฎของการสอสาร (Theory of communication) หลงสงครามโลกครงท 2 มหาวทยาลยในสหรฐไดพฒนาการศกษานเทศศาสตรทเนนสอนการปฏบตงานทางวชาชพ (professional practice) ไปสการศกษาวจยเพอสรางทฤษฎแนวปรชญาวทยาศาสตร โดยแรงผลกดนสวนหนงจากอทธพลทางปญญา (intellectual influence) ของนกวชาการทอพยพมาจากยโรป อาท ลอน และลาซารสเฟลด

2

ทฤษฎของการสอสารจงเรมกอตงขน โดยคอย ๆ แยกจากทฤษฎทางสงคมวทยา จตวทยา และภาษา กลายมาเปนศาสตรไหมในตวของมนเองทเรยกวา การสอสารมวลชน (mass communication study) มงวจยผลของสอมวลชนทมตอการเมอง สงคม และวฒนธรรม เราเรยกทฤษฎแนวปรชญาวทยาศาสตรในระยะเรมแรกนวา ทฤษฎการสอสารมวลชน (Mass Communication Theory) ซงจะเหนไดชดจากผลงานของวลเบอร ชรามม เมลวน เดอเฟอร และเดนส แมคเควล

แตกลมทฤษฎระบบ (Systems Theories) ของวเนอร แชนนอน และวเวอร (Wiener – Shannon – Weaver) และในเชงการสอสารของมนษย (Human Communication) ของเบอรโล (Berlo) รวมทงในเชงการสอสารระหวางบคคล (Interpersonal Communication) ของไฮเดอร นวคอมบ เฟสตงเกอร และออสกด (Heider-Newcomb-Festiger-Osgood) สงผลใหการศกษาดานสอสารมวลชนขยายตวออกไปครอบคลมอาณาบรเวณของการสอสาร (communication spheres) ทกวางขวางขน วชาการสอสารมวลชนจงไดปรบปรงตนเอง และขยายตวจากความเปนเพยงนเทศศลป(communication art) มาเปนนเทศศาสตร (Communication art and science หรอทเรยกสน ๆ วา communication arts) สมบรณในสองทศวรรษสดทายของศตวรรษท 20 ทฤษฎของการสอสารมไดจากดอยเฉพาะทเกยวกบสอมวลชนเทานน แตจะครอบคลมการสอสารทกประเภทและในทกปรบท (cintext) นบตงแตการสอสารภายในบคคล (intrapersonal communication) จนไปถงการสอสารของโลก (global communication) สรางเปนองคความรทอธบายการสอสารทวไป ในแงขององคประกอบ โครงสราง กระบวนการ บทบาทหนาท จดประสงค (purposes) ประสทธผล (effectiveness) ประสทธภาพ (efficiency) และคาประสทธภาพ (cost-efficiency)

ทฤษฎของการสอสารดงกลาว อาจจาแนกแยกยอยออกเปนทฤษฎตาง ๆ ในการสอสาร (theories in communication) เมอองคความรเขาไปเกยวของกบการสอสารประเภทใดประเภทหนงโดยเฉพาะ เชน ทฤษฎตาง ๆ ในการสอสารระหวางบคคล หรอในการสอสารมวลชน เปนตน

3. ทฤษฎเกยวกบการสอสาร (Theories about communication) ทฤษฎแนวปฏบตในนเทศศลป และทฤษฎแนวปรชญาวทยาศาสตรในนเทศศาสตร ไดรวมกนสรางความเจรญกาวหนาใหแกทฤษฎการสอสารเปนอยางยง สามารถผลตบณฑตออกไปทางานในวชาชพปละมาก ๆ เฉพาะในประเทศไทย ซงมนกศกษาในสาขานรวมทงสนไมตากวาหาหมนคน มบณฑตทจบออกไปปละหลายพนคน ปญหาทบณฑตสวนใหญในประเทศตาง ๆ ตองเผชญมความคลายคลงกน คอไมสามารถนาทฤษฎไปใชปฏบตไดในวงการวชาชพทสวนมากยงมลกษณะอนรกษนยม (conservatism)... อนรกษนยมในแงทนกวชาชพสวนใหญยงมไดศกษาเลาเรยนมาโดยตรง และในแงทยงจะตองผกพนกบผลประโยชนของธรกจทเปนเจาของสอหรอเปนผอปถมภสอโดยการใหโฆษณาหรอประชาสมพนธ ชองวางระหวางวชาการและการปฏบตในวชาชพยงขยายวงกวางออกไป การศกษาวจยสวนใหญในมหาวทยาลยผลกดนใหทฤษฎโนมเอยงไปในทางผลประโยชนของประชาชน และในทางการสรางสรรคประชาสงคม (civil society) มากขน ในขณะทการปฏบตในวชาชพสวนใหญยงเนนสงเสรมธรกจและอตสาหกรรมในระบบทนนยมเปนเสมอนหนงพาณชยศลปอนเปนกลไกของตลาดเสรทมทนเปน

3

ปจจยหลก ชองวางทกวางใหญกลายเปนความขดแยงของอดมการณสองขว (bipolar ideoloty) และนเองทเปนจดเรมตนความเตบโตของทฤษฎสอสารแนววพากษ ทฤษฎเศรษฐกจการเมอง เศรษฐกจสงคม สงคมจตวทยา มานษยวทยา จรยศาสตร นเวศวทยา และสนทรยศาสตร ไดถกนามาเปนหลกและแนวในการมองการสอสารมวลชน สรางขนเปนกลมทฤษฎตาง ๆ ทเกยวกบการสอสาร จดวาเปนกลมทฤษฎทพยายามอธบายเชงวพากษตอการสอสารทมผลกระทบตอชวตและสงคม

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

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

วทยาศาสตร ทพฒนามาจากทฤษฎของการสอสาร และ (3) ทฤษฎการสอสารแนววพากษ ทพฒนามาจากทฤษฎเกยวกบการสอสาร

การสอสาร (กมลรฐ อนทรทศน และ พรทพย เยนจะบก)

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

ดงนนความสาเรจของมนษยในการดารงชวตทวไป จงมกมขอกาหนดไวอยางกวางๆวา เราจะตองเขากบคนทเราตดตอดวยใหได และตองเขาใหไดด ดวยการเรยนรทจะสรางความสมพนธรวมกน โดยอาศยวธการสอสารและหลกจตวทยา ความสมพนธระหวางมนษยโดยทวไปมกถกมองวาเปนเรองของศลปะ(Arts) มากกวาศาสตร(Science) ซงกหมายความวา การเรยนรเกยวกบความสมพนธของบคคลแตเพยงอยางเดยว โดยขาดศาสตรของการสอสาร ยอมขาดศลปะในการนาไปปรบใชในชวตจรงใหประสบความสาเรจได

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

ไดมนกวชาการหลายทานใหความหมายของการสอสารไวในหลายแงมม เชน

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

4

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

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

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

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

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

5

ผใชงานอนเทอรเนตไดเลอกชม แตจะแสดงอยในลาดบทดหรอไมนน ขนอยกบผใหบรการแตละรายมการกาหนดรปแบบการจดลาดบในลกษณะใด. 2.หมวดหมเวบ (Directory) เปนอกชองทางในการประชาสมพนธเวบไปยงผใหบรการรวมลงคตางๆ เพราะจะเปนแหลงทมผใชอนเทอรเนตเขาไปหาขอมลเปนจานวนมาก มการจดแบงเวบไซตไวเปนหมวดหมงายตอการเขาชม และตรงตามกลมเปาหมายซงสวนใหญจะเปดใหบรการฟร เรากสามารถเพมเวบไซตไปยงเวบผใหบรการเหลานได โดยเลอกหมวดหมไดตามตองการ ตวอยางผใหบรการของไทย - Sanook.com - Siamguru.com - Thaipromote.com - Truehits (เฉพาะผสนบสนน ฟรยงไมเปดรบสมาชกเพม) - Thaitopsites.com - Hunsa.com - Pixiart.com - Ragnarok.in.th - สรรสาร - Thaiseek.com - Allofthai.com - Thai-index.com 3.แลกเปลยนลงค (banner exchange) การแลกเปลยนลงคเปนอกชองทางในการแนะนาเวบไซตใหเปนทรจก เวบไซตทรบแลกเปลยนลงคจะประกาศแจงไว หรอหากไมมกสามารถอเมลไปสอบถามหรอขอแลกเปลยนไดเชนกน อาจดจากความใกลเคยงของเนอหาหรอกลมเปาหมาย การแลกลงคมทงแบบลงคขอความ หรอแบนเนอร ตกลงกนไดตามความพอใจ นอกจากนยงมผเปดใหบรการศนยกลางแลกเปลยนลงค-แบนเนอรระหวางเวบมาสเตอรดวยกน โดยมรปแบบงายๆ คอ สมครสมาชกไปยงผใหบรการกจะไดโคดมาแปะไวทหนาเวบ โดยมการกาหนดอตราการแสดงผล ตามจานวนการแสดงแบนเนอรระบบ แบนเนอรของเรากจะแสดงในเวบไซตอนดวยเชนกน ผใหบรการ - ThaiLE ( ยงไมเปดรบสมาชกใหม ตองไดรบแนะนาจากสมาชกเกา) ขอมาไดทเวบแพค - Thaibanner ขนตอนการประชาสมพนธเวบไซต

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

6

2.1แบบไมเสยคาบรการ (ฟร) โดยทาการประกาศไปยงเวบไซตตาง ๆ ทใหบรการฝากประชาสมพนธเวบไซต เชน www.thaipr.net , www.sanook.com ฯลฯ เปนตน

2.2 แบบเสยคาบรการ โดยการซอพนทปายโฆษณา (Banner) โดยคดอตราคาบรการทแตกตางกนไปตามความนยมของเวบไซตนน ๆ เชน www.sanook.com, www.dek-d.com 3. ตองทา SEO (Search Engine Optimization)มาจากคาเตมๆ วา Search Engine Optimization ความหมายคอ การปรบแตงเวบไซต และกระบวนการตางๆ ของเวบไซตตงแตการออกแบบเขยนโปรแกรม และการโปรโมทเวบ เพอใหตดอนดบตนๆ ของ Search Engine (เครองมอคนหาเวบไซตตางๆ เชน Google, MSN, Yahoo, AOL เปนตน)

SEO สาคญยงไงอนเทอรเนตในยคปจจบนน คนสวนใหญใช Search Engine ในการคนหาขอมล แทนทจะตองพมพ URL (Uniform Resource Locator) กใช Keyword (คาคน) ปอนลงไปใน Search Engine Box ตางๆกจะคนหาสงทตวเองตองการไดอยางงายดาย และตรงประเดนมใหเลอกเปรยบเทยบอกหลายๆ แหง สาหรบเรองๆ นน และเมอคนพบแลวกจะมการแสดงผลออกมาหลายๆ หนา หลายๆ เวบไซต เวบทถกแสดงเปนอนดบท 1 2 3 หรอทแสดงผลในหนาแรก กจะถกคลกเขาไปดขอมลมากทสด ดวยเหตนเองเวบไซตตางๆ ยอมตองการใหเวบตวเองขนอนดบ 1 ของ Keyword นนๆเผอผลประโยชนหลายๆ ดานเชน ขายสนคา โฆษณา หรอโปรโมทรานคา บรษทของตวเองทาใหไดเปรยบคแขง สรป ความสาคญของ SEO ออกมาเปนขอๆ ดงน 1. ทาใหเวบของเราตดอนดบตนๆในการแสดงผลงการคนหา 2. การเขยน Title ทด Keyword ททนสมยชวยทาใหสะดดตา แมอนดบตากวา กมสทธถกคลกมากกวา 3. เมอตดอนดบตนๆทาใหขายสนคาได โฆษณาเขามา เพราะมการเคลอนไหวของหนาเวบไซต 4. มโอกาสทจะไดรบเงนคาโฆษณาทสง

การทา SEO มใหเลอก 2 แบบคอ 1. แบบไมเสยคาบรการ โดยการประชาสมพนธใหมชอคาคน (Keyword) ทตองการปรากฏอยบนโลกอนเทอรเนตใหมากทสด เชน การประชาสมพนธขาวตาง ๆ ลงบนเวบบอรดเวบไซตยอดนยมตาง ๆ ตามกลมเปาหมายทตองการ 2.แบบเสยคาบรการโดยการเชาชอการทา SEO ซงคดอตราคาบรการตามจานวนคาคน และระยะเวลาในการตดอนดบบน Search Engine 4. การใช Social Network ชวยในการประชาสมพนธ โดยเพมเตมจากเวบไซตหลก เพอตดตามความเคลอนไหวและสารวจความตองการของกลมเปาหมาย ตลอดทงสามารถประชาสมพนธขาวไปยงกลมเปาหมายไดอยางทวถงและรวดเรว

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

7

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

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

3. การจดการเรยนการสอนผานเวบ การใชเวบเพอการเรยนการสอน เปนการนาเอาคณสมบตของอนเทอรเนตมาออกแบบเพอใชใน

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

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

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

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

8

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

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

การออกแบบบทเรยนผานเวบ Ritchie and Hoffman (1997) เสนอแนะวาในการออกแบบบทเรยนผานเวบเพอใหเกดการเรยนทดทสดควรอาศยหลกกระบวนการเรยนการสอน 7 ขนตอน ดงน 1. การสรางแรงจงใจใหกบผเรยน (Motivating the Learned) โดยการออกแบบควรเราความสนใจ โดยการใชภาพกราฟก ภาพเคลอนไหว สและเสยงประกอบเพอกระตนผเรยนใหอยากเรยนร ควรใชกราฟกขนาดใหญ ไมซบซอน การเชอมโยงไปยงเวบอนตองนาสนใจและเกยวของกบเนอหา 2. บอกวตถประสงคของการเรยน (Identifying What is to be Learned) เพอเปนการบอกใหผเรยนรลวงหนาถงประเดนสาคญของเนอหาและเปนการบอกถงเคาโครงของเนอหาซงจะเปนผลใหการเรยนรมประสทธภาพขน อาจบอกเปนวตถประสงคเชงพฤตกรรมหรอวตถประสงคทวไปโดยใชคาสนๆ หลกเหลยงคาทไมเปนทรจก ใชกราฟกงายๆ เชน กรอบหรอลกศร เพอใหการแสดงวตถประสงคนาสนใจยงขน การเชอมโยงไปยงเวบภายนอกอาจทาใหผเรยนลมวตถประสงคของบทเรยน การแกไขปญหานคอผออกแบบควรเลอกทจะเชอมโยงเวบภายนอกทเกยวของกบบทเรยนเทานน 3. ทบทวนความรเดม (Reminding Learners of Past Knowledge) เพอเปนการเตรยมพนฐานผเรยนสาหรบรบความรใหม การทบทวนไมจาเปนตองเปนการทดสอบเสมอไป อาจใชการกระตนใหผเรยนนกถงความรทไดรบมากอนเรองน โดยใชเสยงพด ขอความภาพหรอใชหลายๆ อยางมาผสมผสานกน ทงนขนอยกบความเหมาะสมของเนอหา มการแสดงความเหมอนความแตกตางของโครงสรางบทเรยนเพอทผเรยนจะไดรบความรใหมไดเรว นอกจากนนผออกแบบควรตองทราบภมหลงของผเรยนและทศนคตของผเรยน 4. ผเรยนตองมความกระตอรอรนทจะเรยนร (Requiring ActiveInvolvement) นกการศกษาตางเหนพองตองกนวา การเรยนรจะเกดขนเมอผเรยนมความตงใจทจะรบความรใหม ผเรยนทมลกษณะกระตอรอรนจะรบความรไดดกวาผเรยนทมลกษณะเฉอยผเรยนจะจดจาไดดถามการนาเสนอเนอหาดและ

9

สมพนธกบประสบการณเดมของผเรยน ผออกแบบบทเรยนควรหาเทคนคตางๆ เพอใชกระตนผเรยนใหนาความรเดมมาใชในการศกษาความรใหมรวมทงตองพยายามหาทางทาใหการศกษาความรใหมของผเรยนกระจางชดมากขน พยายามใหผเรยนรจกเปรยบเทยบ แบงกลม หาเหตผล คนควา วเคราะหหาคาตอบดวยตนเอง โดยผออกแบบบทเรยนตองคอยๆ ชแนวทางจากมมกวางแลวรวบรดใหแคบลง รวมทงใชขอความกระตนใหผเรยนคด เปนตน 5. ใหคาแนะนาและใหขอมลยอนกลบ (Providing Guidance and Feedback) การใหคาแนะนาและใหขอมลยอนกลบในระหวางทผเรยนศกษาอยในเวบเปนการกระตนความสนใจของผเรยนไดด ผเรยนจะทราบความกาวหนาในการเรยนของตนเอง การเปดโอกาสใหผเรยนรวมคดรวมกจกรรมในสวนทเกยวของกบเนอหา การถาม การตอบ จะทาใหผเรยนจดจาไดมากกวาการอานหรอลอกขอความเพยงอยางเดยว ควรใหผเรยนตอบสนองวธใดวธหนงเปนครงคราวหรอตอบคาถามไดหลายๆ แบบ เชน เตมคาลงในชองวาง จบค แบบฝกหดแบบปรนย โดยใชความสามารถของโปรแกรม CGI (Common Gateway Interface) ซงเปนโปรแกรมการปฏสมพนธกบคอมพวเตอรมาชวยในการออกแบบ 6. ทดสอบความร (Testing) เพอใหแนใจวานกเรยนไดรบความรผออกแบบสามารถออกแบบแบบทดสอบแบบออนไลนหรอออฟไลนกได เปนการเปดโอกาสใหผเรยนสามารถประเมนผลการเรยนของตนเองได อาจจดใหมการทดสอบระหวางเรยนหรอทดสอบทายบทเรยน ทงนควรสรางขอสอบใหตรงกบจดประสงคของบทเรยน ขอสอบ คาตอบและขอมลยอนกลบควรอยในกรอบเดยวกนและแสดงตอเนองกนอยางรวดเรว ไมควรใหผเรยนพมพคาตอบยาวเกนไป ควรบอกผเรยนถงวธตอบใหชดเจน คานงถงความแมนยาและความเชอถอไดของแบบทดสอบ 7. การนาความรไปใช (Providing Enrichment and Remediation) เปนการสรปแนวคดสาคญ ควรใหผเรยนทราบวาความรใหมมสวนสมพนธกบความรเดมอยางไรควรเสนอแนะสถานการณทจะนาความรใหมไปใช และบอกใหผเรยนทราบถงแหลงขอมลทจะใชอางองหรอคนควาตอไป

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

การจดการเรยนการสอนผานเวบมลกษณะการเรยนการสอนทแตกตางไปจากการเรยนการสอนในชนเรยนปกตทคนเคยกนด ซงการจดการเรยนการสอนแบบดงเดมในชนเรยนสวนใหญจะมลกษณะทเนนใหผสอนเปนผปอนความรใหแกผเรยน ทาใหผเรยนไมใฝทจะหาความรเพมเตมสวนการจดการเรยนการสอนผานเวบจะมวธการจดทแตกตางไปจากการจดการเรยนการสอนตามปกต เพราะคณลกษณะและรปแบบของเวบเปนสอทมลกษณะเฉพาะของตนเอง ซงแตกตางไปจากการจดการเรยนการสอนดวยสอแบบอนๆ จงตองคานงถงการออกแบบระบบการสอนทสอดคลองกบคณลกษณะของเวบ เชน การสอสารระหวางผเรยนกบคร การสอสารระหวางผเรยนกบผเรยนทกระทาไดแตกตางไปจากการเรยนการสอนแบบเดม ซงมวธการหลายวธ อาท การสอสารผานเวบโดยตรงในรปการคยกนในหองสนทนา (Chat Room) การฝากขอความบนกระดานอเลกทรอนกสหรอกระดานขาวสาร (Bulletin Board) หรอสอสารผานไปรษณยอเลกทรอนกส (e-Mail) เปนตนความเปนเวบชวยสอนจงไมใชแคการสรางเวบไซตเนอหาวชาหนงหรอรวบรวมขอมลซกเรองหนง

10

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

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

1. สงทพงปฏบตในการจดการเรยนการสอนผานเวบ (Hughes and Hewson,

1998) มดงน 1.1 การแจงลวงหนา (Notices) เปนการใชเวบโดยกาหนดพนทเฉพาะทเปนบอรดในเวบ สาหรบอาจารยกาหนดนดหมายหรอสงงาน ซงผเรยนอาจจะไดรบการแจงลวงหนาผานไปรษณยอเลกทรอนกสและสามารถสอบถามได โดยไปรษณยอเลกทรอนกสเชนกน 1.2 การนาเสนอ (Presentations) เปนการนาเสนอดวยเวบททาขนทงผสอนและผเรยน โดยนาเสนองานทไดรบมอบหมาย จดทาแบบสมมนาหรอประชมนาเสนอผานเวบไซตหรอโดยไปรษณยอเลกทรอนกสหรอการเผยแพรในกลม เปนกจกรรมสอสารกนระหวางผสอนและผเรยน 1.3 การอภปรายปกต (Formal Discussions) เปนการอภปรายกนบนเวบโดยการใชไปรษณยอเลกทรอนกสและการประชมสนทนาแบบกลม ซงเปนเครองมอบนเวบทจดเหมอนประชมสมมนา ซงเปนกลมสนทนาทแสดงเปนรปภาพแทนผใชหรอแทนชอของผใชกได

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

1.5 การระดมสมอง (Brainstorms) เปนการออกแบบเพอใหเกดการตอบสนองตอคาถาม โดยผเรยนตองรวมหาคาตอบ กระตนใหเกดการอภปรายในเวบจากคาถามทกาหนดในกจกรรมเดยวกน

1.6 การกาหนดสภาพงาน (Task Setting) เปนการกาหนดกระบวนการในการทางานสงตามกจกรรม ซงอาจจะเปนรายงานหรอกลมยอย ซงอยในรปของเวบไซตหรอไปรษณยอเลกทรอนกส

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

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

ขนตอนการจดการเรยนการสอนทางอนเทอรเนตทเปนเวบ (วรท, 2551) มดงน

11

1. กาหนดวตถประสงคของการเรยนการสอน 2. การวเคราะหผเรยน 3. การออกแบบเนอหารายวชา ก) เนอหาตามหลกสตรและสอดคลองกบความตองการของผเรยน ข) จดลาดบเนอหา จาแนกหวขอตามหลกการเรยนรและลกษณะเฉพาะในแตละหวขอ ค) กาหนดระยะเวลาและตารางการศกษาในแตละหวขอ ง) กาหนดวธการศกษา จ) กาหนดสอทใชประกอบการศกษาในแตละหวขอ ฉ) กาหนดวธการประเมนผล ช) กาหนดความรและทกษะพนฐานทจาเปนตอการเรยน ซ) สรางประมวลรายวชา 4. การกาหนดกจกรรมการเรยนการสอนทางอนเทอรเนตโดยใชคณสมบตของอนเทอรเนตทเหมาะสมกบกจกรรมการเรยนการสอนนนๆ

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

6. การปฐมนเทศผเรยน ไดแก ก) แจงวตถประสงค เนอหา และวธการเรยนการสอน ข) สารวจความพรอมของผเรยนและเตรยมความพรอมของผเรยน ในขนตอนนผสอนอาจจะตองมการทดสอบหรอสรางเวบเพจเพมขน เพอใหผเรยนทมความรพนฐานไมเพยงพอไดศกษาเพมเตมใน เวบเพจเรยนเสรม หรอใหผเรยนถายโอนขอมลจากแหลงตางๆ ไปศกษาเพมเตมดวยตนเอง

7. จดการเรยนการสอนตามแบบทกาหนดไว โดยในเวบเพจจะมเทคนคและกจกรรมตางๆ ทสามารถสรางขน ไดแก ก) การใชขอความเราความสนใจทอาจเปนภาพกราฟกภาพเคลอนไหว ข) แจงวตถประสงคเชงพฤตกรรมของรายวชาหรอหวขอในแตละสปดาห ค) สรปทบทวนความรเดม หรอโยงไปหวขอทศกษาแลว ง) เสนอสาระของหวขอตอไป จ) เสนอแนะแนวทางการเรยนร เชน กจกรรมสนทนาระหวางผสอนกบผเรยน และระหวางผเรยนกบผเรยน กจกรรมการอภปรายกลม กจกรรมการคนควาหาขอมลเพมเตม กจกรรมการตอบคาถาม กจกรรมการประเมนตนเอง และกจกรรมการถายโอนขอมล ฉ) เสนอกจกรรมดงกลาวมาแลว แบบฝกหด หนงสอหรอบทความ การบาน การทารายงาน

12

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

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

ประโยชนการเรยนการสอนผานเวบ ประโยชนของการเรยนการสอนผานเวบมมากมายหลายประการ ทงนขนอยกบวตถประสงคของการ

นาไปใชในการจดการเรยนการสอน ซงประโยชนของการเรยนการสอนผานเวบไวดงน (สรยนตเงาะเศษ, 2549 :34-35)

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

2.2 การสอนบนเวบยงเปนการสงเสรมใหเกดความเทาเทยมกนทางการศกษา ผเรยนทศกษาอยในสถาบนการศกษาในภมภาคหรอในประเทศหนงสามารถทจะศกษา ถกเถยง อภปราย กบอาจารย ครผสอนซงสอนอยทสถาบนการศกษาในนครหลวงหรอในตางประเทศกตาม

2.3 การสอนบนเวบน ยงชวยสงเสรมแนวคดในเรองของการเรยนรตลอดชวต เนองจากเวบเปนแหลงความรทเปดกวางใหผทตองการศกษาในเรองใดเรองหนง สามารถเขามาคนควาหาความรไดอยางตอเนองและตลอดเวลาการสอนบนเวบ สามารถตอบสนองตอผเรยนทมความใฝรรวมทงมทกษะในการตรวจสอบการเรยนรดวยตนเอง (Meta-cognitive Skills) ไดอยางมประสทธภาพ

2.4 การสอนบนเวบ ชวยทลายกาแพงของหองเรยนและเปลยนจากหองเรยน 4 เหลยมไปสโลกกวางแหงการเรยนร เปดโอกาสใหผเรยนสามารถเขาถงแหลงขอมลตางๆไดอยางสะดวกและมประสทธภาพสนบสนนสงแวดลอมทางการเรยนทเชอมโยงสงทเรยนกบปญหาทพบในความเปนจรง โดยเนนใหเกดการเรยนรตามบรบทในโลกแหงความเปนจรง(Contextualization) และการเรยนรจากปญหา (Problem-based Learning) ตามแนวคดแบบConstructivism

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

13

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

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

2.7 การสอนบนเวบเออใหเกดการปฏสมพนธ ซงการเปดปฏสมพนธนอาจทาได 2 รปแบบ คอ ปฏสมพนธกบผเรยนดวยกนและ/หรอผสอน ปฏสมพนธกบบทเรยนในเนอหาหรอสอการสอนบนเวบ ซงลกษณะแรกนจะอยในรปของการเขาไปพดคย พบปะ แลกเปลยน ความคดเหนกน สวนในลกษณะหลงนนจะอยในรปแบบของการเรยนการสอน แบบฝกหดหรอแบบทดสอบทผสอนไดจดหาไวใหแกผเรยน

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

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

2.10 การสอนบนเวบเปดโอกาสใหผสอนสามารถปรบปรงเนอหาหลกสตร ใหทนสมยไดอยาง สะดวกสบายเนองจากขอมลบนเวบมลกษณะเปนพลวตร ( Dynamic ) ดงนนผสอนสามารถอพเดตเนอหาหลกสตรททนสมยแกผเรยนไดตลอดเวลา นอกจากนการใหผเรยนไดสอสารและแสดงความคดเหนทเกยวของกบเนอหา ทาใหเนอหาการเรยนมความยดหยนมากกวาการเรยนการสอนแบบเดมและเปลยนแปลงไปตามความตองการของผเรยนเปนสาคญ การสอนบนเวบสามารถนาเสนอเนอหาในรปของมลตมเดย ไดแก ขอความ ภาพนง เสยง ภาพเคลอนไหว วดทศน ภาพ 3 มต โดยผสอนและผเรยนสามารถเลอกรปแบบของการนาเสนอเพอใหเกดประสทธภาพสงสดทางการเรยน

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

ใจทพย ณ สงขลา (2542: 18-28) ไดใหความหมายของการเรยนการสอนผานเวบเพจไววา หมายถง การผนวกคณสมบตไฮเปอรมเดยเขากบคณสมบตของเครอขาย เวรล ไวด เวบ เพอสรางสงแวดลอมแหงการเรยนรในมตทไมมขอบเขตทจา กดดวยระยะทางและเวลาของผเรยน วชดา รตนเพยร (2542: 29-35) ไดใหความหมายของการเรยนการสอนผานเวบเพจไววาการเรยนการสอนผานเวบเพจ เปนการนา เสนอโปรแกรมบทเรยนบนเวบเพจ โดยนา เสนอผานบรการในเครอขายอนเตอรเนต ซงผออกแบบไดสรางโปรแกรมและบทเรยนผานเวบเพจ นามนต เรองฤทธ (2543: 92-97) ไดใหความหมายของการเรยนการสอนผานเวบเพจไววาเปน

14

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

รปแบบการเรยนการสอนผานเวบเพจ

การเรยนการสอนผานเวบเพจ มลกษณะโดดเดน คอ ผเรยนสามารถเรยนเวลาใดกไดสถานทใดกได ทมความพรอมดานการเชอมตอระบบ สามารถใชเครองมอตางๆ เชน E-Mail, Chat,Webboard, Newsgroup สอสารกบเพอนๆ ผสอน หรอบคคลอนๆ ทสนใจและผเชยวชาญตางๆแตผเรยนไมตองเขาชนเรยน เขาโรงเรยน เพราะถอวาเวบไซท เปนเสมอนหองเรยน หรอโรงเรยนหนงสอเนอหาการเรยนถกแทนทดวยเนอหาดจตอลลกษณะตางๆ ทงขอความ, ภาพนง,ภาพเคลอนไหว, เสยง และวดทศน ตามแตลกษณะของเวบไซท สาคญทสดคอผเรยนทไมกลาแสดงออกในหองเรยนปกต จะกลาแสดงออก และแสดงความคดเหนไดมากกวาเดมรปแบบของการเรยนการสอนผานเวบเพจ แบงออกเปน 2 รปแบบ คอ 1. Instructor Centric กลาวคอ รปแบบน จะมองวาจดศนยรวมของความรทงหมดจะอยทอาจารยผสอน อาจารยเปนคนสา คญทสดทจะเกดการเรยนรขนมาได และเปนคนควบคมการเรยนรทงหมด การเรยนโดยใชวธน จะไดผลดเมอ

1.1 นกเรยนมการเตรยมตวทเทาเทยมกน ทมความพรอมทจะเรยนเทาๆกน 1.2 นกเรยนมสไตลของการเรยนรเหมอนกน 1.3 นกเรยนอยากเรยนเทาๆกน 1.4 นกเรยนมความสามารถเทาๆกน

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

นกเรยน

คร

นกเรยน

นกเรยน นกเรยน

15

ภาพ รปแบบการเรยนการสอนผานเวบเพจแบบ Instructor Centric

2. Learner Centric กลาวคอ รปแบบนจะมองวาผเรยนเปนศนยกลางของการเรยนรโดยความรจะมอยทวไป ผเรยนสามารถเลอกเรยนไดวาจะเรยนทไหน เรยนเมอใด และจะเรยนอยางไรการเรยนในรปแบบนจะไมจากดอยในโรงเรยนเพราะความรมอยทวไป การเรยนการสอนในรปแบบนจะไดผลหรอไมขนอยกบผเรยนเปนสาคญ กลาวคอ ผเรยนมพนฐานเพยงใด ผเรยนมการเตรยมตวอยางไร และ ผเรยนมความสามารถทจะเรยนรไดรวดเรวเพยงใด

ภาพ รปแบบการเรยนการสอนผานเวบเพจแบบ Learner Centric

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

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

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

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

แหลงการเรยนร

นกเรยน

แหลงการเรยนร

แหลงการเรยนร

แหลงการเรยนร

16

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

1.กาหนดวตถประสงคของการเรยนการสอน 2. การวเคราะหผเรยน 3. การออกแบบเนอหารายวชา 3.1 เนอหาตามหลกสตรและสอดคลองกบความตองการของผเรยน 3.2 จดลา ดบเนอหา จาแนกหวขอตามหลกการเรยนร และลกษณะเฉพาะในแตละหวขอ 3.3 กาหนดระยะเวลาและตารางการศกษาในแตละหวขอ 3.4 กาหนดวธการศกษา 3.5 กาหนดสอทใชประกอบการศกษาในแตละหวขอ 3.6 กาหนดประเมนผล 3.7 กาหนดความรและทกษะพนฐานทจา เปนตอการเรยน 3.8 สรางประมวลรายวชา 4. การกาหนดกจกรรมการเรยนการสอนทางอนเตอรเนต โดยใชคณสมบตของอนเตอรเนตทเหมาะสมกบ กจกรรม การเรยนการสอนนนๆ 5. การเตรยมความพรอมสงแวดลอมการเรยนการสอนทางอนเตอรเนต ไดแก 5.1 สารวจแหลงทรพยากรสนบสนนการเรยนการสอน ทผเรยนสามารถเชอมโยงได 5.2 กาหนดสถานทและอปกรณทใหบรการและทตองใชในการตดตอทางอนเตอรเนต 5.3 สรางเวบเพจเนอหาความรตามหวขอของการเรยนการสอนรายสปดาห 5.4 สรางแฟมขอมลเนอหาวชาเสรมการเรยนการสอนสา หรบการถายโอนแฟมขอมล 6. การปฐมนเทศผเรยนไดแก 6.1 แจงวตถประสงคเนอหา และวธการเรยนการสอน 6.2 สารวจความพรอมของผเรยน และเตรยมความพรอมของผเรยน ในขนตอนนผสอน อาจจะตองม การทดสอบ หรอสรางเวบเพจเพมขนเพอใหผเรยน ทมความรพนฐาน ไมเพยงพอไดศกษา เพมเตม ในเวบเพจเรยนเสรม หรอใหผเรยนถายโอนขอมลจากแหลงตางๆ ไปศกษาเพมเตมดวยตนเอง 7. จดการเรยนการสอนตามแบบทกาหนดไวโดยในเวบเพจจะมเทคนคและกจกรรมตางๆทสามารถสรางขน ไดแก 7.1 การใชขอความเราความสนใจทอาจเปนภาพกราฟฟกส ภาพการเคลอนไหว 7.2 แจงวตถประสงคเชงพฤตกรรมของรายวชา หรอหวขอในแตละสปดาห 7.3 สรปทบทวนความรเดม หรอโยงไปหวขอทศกษาแลว 7.4 เสนอสาระของหวขอตอไป 7.5 เสนอแนะแนวทางการเรยน

17

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

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

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

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

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

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

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

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

18

โฮมเพจ (Home Page) อาจคดตามนยามดงเดมวาโฮมเพจ คอ เวบไซท แตในทางปฏบตแลว หาเวบไซตของคณอยในคอมพวเตอรของคนอน และไมมชอโดเมนเปนของตนเอง อยางนเขานยมใหเรยกเปนโฮมเพจมากกวา ซงมนจะทา ใหสบสนกบนยามดงเดมของโฮมเพจ กลาวคอ

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

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

1. สวนของรปภาพหรอโลโกแสดงความเปนเจาของโฮมเพจ เปนรปภาพทมขนาดความจาไมมากนก เพองายตอการโอนยายขอมลบนเครอขายคอมพวเตอร

2. สวนหวเรองของมล เปนหวขอของขาวสารหรอเปนชอของบรษท องคกร หรอสถาบน ทเปนเจาของเวบไซต

3. สวนเนอหาขอมลและเชอมโยงไปยงเพจทเกยว เปนสวนของขาวสารทเปนเนอแสดงถงรายละเอยด หรอเปนเนอความการคดยอทสามารถเชอมตอโยงไปยงขอมลแบบแสดงนายละเอยดของเวบเพจทเกยวของโดยผานไฮเปอรเทกซ โดยทวไปแลวสวนของเนอหาเปนสวนของการบรรยาย เชนเดยวกบบทความปกตอนๆ แตมรปแบบของการนาเสนอทแตกตางไปตามความคดของผสรางเวบไซต (ธวชชย ศรสเทพ ,2544,หนา 27 ; งานนจ อาจอนทร,2542,หนา 9 ; วทยา เรองพรพสทธ ,2540ก ,หนา 119-120)

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

เวบเพจ (Wed Page) หมายถง เปรยบเสมอนหนากระดาษอเลกทรอนกส เปนเอกสารแบบไฮเปอรเทกซ ทสามารถแสดงทงตวอกษร ภาพนงภาพเคลอนไหว และเสยง โดยจะเกบอยทเวบไซตตางๆ ในรปของแฟมขอมลทสรางขนดวยภาษา HTML โดยมนามสกลเปน .htm หรอ .html โดยจะแสดงหนาเวบเพจผานโปรแกรมบราวเซอร ซงในแตละหนาเวบเพจสามารถทจะเชอมโยงกนภายในหนาเวบเดยวกน ระหวางหนาเวบไซตเดยวกน และสามารถเชอมโยงกนระหวางเวบไซตดวย (ธวชชย ศรสเทพ ,2544,หนา 27 ; สรพงศ ภรมยประเมศ,2542,หนา 29 ; ขนษฐา รจโรจน ,2541ก ,หนา 1 ; โอฬาร เมธาไชย, 2542,หนา 170) เวบเพจอาจเปนการสอสารประชาสมพนธใหความรขาวศกษา การบรการทางสงคม

19

วทยา เรองพรวสทธ (2540, หนา 46) ไดกลาวถง เวบเพจวาหมายถงไฟลขอมลเอชทเอมเอล (HTML) หรอเปนขอมลในระบบเวลดไวดเวบ (WWW) ซงประกอบไปดวยคา หรอวลพเศษทเรยกวา "ไฮเปอรเทกซ" หรอเปนการเชอมตอแบบไฮเปอรลงก ทงไฮเปอรเทกซ และไฮเปอรลงกกเปนการเชอมโยงเพอตดตอไปยงเวลดเวบ แหลงตางๆ ทกาหนดไวบนเวลดเวบเพจนนๆ

ศรนย (2543: 9-10) ไดใหความหมายของเวบเพจกลาวไววา เวบเพจ (Web Page) คอเอกสารหนงไฟลทคณสามารถบราวซดไดดวยบราวเซอร กลาวโดยงายแลวคณอาจจะนกถงไฟลทมนามสกล .html ซงยอมาจาก Hypertext Markup Language อนเปนมาตรฐานการทา เทกซไฟลธรรมดาใหปรากฏแสดงในบราวเซอร เปนขอความทคลกเลอกใหเชอมโยงไปยงเนอหาสวนอนภายในอนเตอรเนตได

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

การออกแบบเวบไซต เปนการกาหนดรปแบบการนาเสนอเนอหาของเวบไซต สามารถดาเนนไดดงน 1. การออกแบบโฮมเพจ (Homepage) เปนหนาแรกของเวบไซต ประกอบดวยชอเวบไซต ตวอกษร รปภาพ เสยง และหวขอหลกของเวบไซตทเชอมโยงไปยงหนาตางๆ 2. การออกแบบเวบเพจ (Wedpage) เปนการสรางหนาเนอหาสวนตางๆ ทเชอมโยงจากโฮมเพจ 3. องคประกอบภายในเวบเพจ เปนการจดวางองคประกอบของแตละเวบเพจตามตาแหนงทเหมาะสมและสวยงาม จดสดสวนระหวางขอความและภาพกราฟกใหเหมาะสม ไดแก ขอความ เสยง ภาพนง ภาพกราฟก และภาพเคลอนไหว เปนตน 4. การเชอมโยง เปนการกาหนดการเชอมโยงจากขอความ รปภาพ ภายในเวบเพจเดยวกน และไปยงเวบเพจอนทอยภายในเวบไซตเดยวกน รวมถงการเชอมโยงไปยงเวบไซตอนๆ ดงแสดงในภาพ

การออกแบบโฮมเพจ

การออกแบบโฮมเพจ

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

การเชอมโยง

20

ดวงพร เกยงคาและวงศประชา จนทรสมวงศ ไดกลาวถง หลกการออกแบบเวบไซต ซงสงทควรรกอนเรมลงมอสรางเวบไซต คอ 1. กาหนดเปาหมายของเวบไซต วาจดมงหมายทสรางเวบไซตขนมาเพออะไร ซงจะไดเตรยมขอมล และวางแนวทางของเวบไซตไดตรงกบเปาหมายทวางไวไดมากทสด 2. ใหความสาคญของการออกแบบเวบไซต การออกแบบเวบไซตทด จะมสวนชวยใหเวบไซตเปนทนยมของนกทองเวบได จงมสวนสาคญทจะดงดดใจใหผใชเขาไปใชบรการและอยกบเวบไซตนานทสด และกลบเขามาใชบรการอกในอนาคต 3. หาจดเดนของเวบไซต เพราะเวบไซตกคอหนารานของคณ ลกคาเดนเขาไปแลวอยากใหเจออะไรกอน อะไรหลง เหมอนกบการจดโชวสนคาใหกบลกคาไดดไดลองนนเอง 4. ความเรยบงาย อานงายสบายตา เวบไซตทมรปแบบเรยบงาย ไมซบซอน และใชงานไดอยางสะดวก การจดหมวดหมใหกบขอมลภาพกราฟกหรอตวอกษร และใชสอยางเหมาะสม จะไดเปรยบเวบทสบสนวนวาย 5. ความสมาเสมอ เวบเพจในเวบไซตตองเปนไปในทศทางเดยวกนตลอดทงเวบไซตอาจใชรปแบบเดยว หรอแตกตางบางระหวางหนาหลกกบหนาทวไป 6. เนอหาดมประโยชน เนอหาเปนสงสาคญทสดสาหรบเวบไซต โดยนาเสนอเนอหาทถกตอง ครบถวนและสมบรณ และควรมการปรบปรงใหทนตอเหตการณอยเสมอ 7. มความเปนเอกลกษณ รปแบบเวบไซตสามารถสะทอนถงเอกลกษณและลกษณะขององคกรนนได เชน การใชชดส ชนดตวอกษร รปภาพและกราฟกทเปนสขององคกรนนๆ 8. มระบบเนวเกชนทด เนวเกชน หรอระบบนาทางในเวบไซต ทกทศมทไป มเครองหมายใหตดตาม เพอใหผเขาเยยมชมเวบไซตสามารถเลอกทจะเขาไปใชบรการไดตรงจดทสนใจไดอยางสะดวก และสามารถทจะยอนกลบไปยงหนาเวบตางๆ ภายในเวบไซตได 9. ระบบการใชงานทถกตอง การทางานตางๆ ในเวบไซตจะตองมความแนนอนและทาหนาทไดอยางถกตอง ตองตรวจสอบลงค และการแสดงผลกบบราวเซอรทแตกตางกนตางๆ 10. ลดขนาดของภาพใหพอด (Fixed Image Size) ภาพกราฟกทนามาใชอยามขนาดใหญจนเกนไป เพราะเวลาโหลดจะชาและนานทาใหผชมเบอกบการรอคอย (1) โหลดไมชาหนาไมยาว (Fast Load) เนอหาภายในเวบเพจโดยปกตไมควรยาวเกน 3 หนาจอ ถาเนอหายาวมากควรจะแยกหวขอหรอเพมลงคใหดหนาตอไป (2) มคาถามคาตอบ (FAQ) หากผชมเขาไปใชบรการแลวมปญหาหรอสงสยตองการความชวยเหลอ ตองมคาตอบให ซงจะทาใหผชมรสกดกบเวบไซตของคณ (3) ตดตอไดสะดวก (Contact) โลโก ชอการคา เบอรโทร รวมไปถงขอมลทใชตดตอเวบไซต เชน แผนท อเมลล หรออนๆ ตองเหนชด เพอใหผชมสามารถตดตอกบเวบไซตไดสะดวก (4) หมนปรบปรงเวบไซตใหทนสมยอยเสมอ ขอมลตอง Update ใหทนสมยอยเสมอ

21

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

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

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

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

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

22

ของผใชไดดขน โดยคณสามารถจาลองรปแบบของสงตางๆ ทมความสมพนธกบเนอหาของเวบไซตไปใชได เชน เวบทมเนอหาเกยวกบภาพยนตกอาจจะออกแบบหนาเวบใหคลายกบโรงภาพยนตจรงๆ 5.2.1.2 รปแบบ บคลก เวบไซตแตละประเภทอาจมบคลกลกษณะแตกตางกน ขนอยกบเนอหาและเปาหมายในการนาเสนอ บคลกทเมาะสมกบเนอหายอมทาใหผใชเขาถงเนอหาไดดขน เวบไซตแตละแหงสามารถใหความรสกสนกสนาน เชยวชาญ วชาการ ทนสมย ลกลบ หรอเปนทางการ ตวอยางเชน ในการออกแบบเวบเพจทเกยวของกบเทคโนโลย คณกควรออกแบบใหแสดงถงความทนสมย ไฮเทค เชนเดยวกบเนอหาภายในเวบไซต ดวยเหตนเองเวบไซต 2 แหงทมเนอหาเหมอนกน แตมบคลกตางกนกจะจะใหความรสกทแตกตางกนได 5.2.1.3 รปแบบ สไตล สไตลในทนหมายถงลกษณะการจดโครงสรางของหนา รปแบบกราฟก ชนดและการจดตวอกษร ชดสทใช และรวมถงองคประกอบอนๆทงหมด คณไมควรสรางสไตลของเวบไซตตามอาเภอใจ โดยไมคานงถงความเหมาะสม และจะตองระวงเปนพเศษ เมอนากราฟกจากเวบไซตอนทมสไตลแตกตางจากของคณเขามาใช นอกจากนรปแบบของกราฟกตางๆ รวมถงสไตลของเวบไซตควรมความสมพนธกบเนอหาในเวบไซตอยางมเหตผล ไมใชใชเพยงเพอแสดงฝมอวาคณสามารถตกแตงกราฟก โดยใชเทคนคแปลกๆได และไมวาคณจะเลอกรปแบบ บคลก และสไตลใดมาใชกตาม คณควรใชลกษณะเหลานนใหสมาเสมอตลอดทงเวบไซต เพอปองกนความสบสนทอาจเกดขนได เชน ถาคณใชปมเนวเกชนทเปนแบบ 2Dมาตลอด แลวกลบเปลยนเปนแบบ 3D ในบางสวน ผใชจะรสกสบสนกบความแตกตางทเกดขนอยางไมมเหตผลได

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

23

-ชอของเวบไซต เพอใหผใชรไดทนทวากาลงอยในเวบอะไร

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

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

5.1.5 เลอกใชสส าหรบเวบไซต (Designing Wed Colors) สสนในหนาเวบเพจ เปนสงทมความสาคญมากในการดงดดความสนใจของผใช เนองจากสงแรกทพวกเขามองเหนจากเวบเพจกคอ ส ซงเปนสงกาหนดบรรยากาศและความรสกโดยรวมของเวบไซตเราสามารถใชสไดกบทกองคประกอบของเวบเพจ ตงแตตวอกษร รปภาพ ลงค สพนหลง และรปภาพพนหลง การเลอกใชสอยางเหมาะสมจะชวยในการสอความหมายของเนอหา และเพมความสวยงามใหกบหนาเวบนน แตในทางกลบกน สทไมเหมาะสมอาจสรางความยากลาบากในการอานหรอรบกวนสายตาผใช รวมทงอาจทาใหการสอสารความหมายไมถกตองได เรองของสในเวบไซตมความซบซอนพอสมควร เรมตงแตการเขาใจถงการแสดงออกของสภายใตสงแวดลอมทตางกนของบราวเซอร จอมอนเตอร และระบบปฏบตการ ตลอดจนถงการเขาใจทฤษฎส รจกเลอกใชสใหเหมาะสมเพอการสอความหมายอยางสวยงาม ดงนน เปาหมายของเราคอ การตดสนใจเลอกใชใหเหมาะสมกบบคลกและเปาหมายของเวบไซต เพอการแสดงผลทตรงกบความประสงคมากทสด กลมกลน ไมเพยงแตจะสรางความพงพอใจใหกบผใช แตยงทาใหพวกเขามความรสกรวมไปกบเปาหมายของเวบไซตนนดวย ไมวาจะเปนการใหขอมล สรางความบนเทง รวมถงการขายสนคาหรอบรการ

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

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

24

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

-จอมอนเตอร:เปนเพราะเวบเพจถกเรยกดผานทางจอมอนเตอร ดงนนการแสดงสของเวบเพจจงขนอยกบประสทธภาพดานสของจอมอนเตอร

-บราวเซอร:เนองจากบราวเซอรมระบบการควบคมและแสดงสภายในตวเอง เมอใดทมการแสดงผลในหนาจอทมจานวนสจากด บราวเซอรจะทาการสรางสทดแทนใหดเหมอนหรอไกลเคยงกบสทกาหนดไว ผลลพธทไดจงไมแนนอน

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

5.1.8 การจดรปแบบตวกษรส าหรบเวบไซต - การจดตาแหนง (Alignment) การจดตาแหนงของตวอกษรในแตละสวนมผลตอความรสกขอเอกสาร โดยทการจดตาแหนงแตละแบบจะใหความรสกทตางกน ตวอกษรทถกจดใหชดขอบดานซายโดยทปลอยใหดานขวามลกษณะไมสมาเสมอ จะทะใหความรสกไมเปนทางการ และจะอานไดงายกวาการจดชดขอบขวา โดยทวไปแลวพยายามหลกเลยงการจดชดขวา ยกเวนเมอมความเหมาะสมกบรปแบบจรงๆ สวนตวอกษรทมการปรบระยะใหชดของทงซายและขวา(justift) เปนทนยมใชในหนงสอพมพและจลสาร พรอมกบใหความรสกทเปนทากการอกดวย - ชองวางระหวางตวอกษร (Tracking)และชองวางระหวางคา ความรสกของตวอกษรอาจจะเปนผลมาจากพนทวางโดยรอบ ทอยระหวางตวอกษร ระหวางคา หรอระหวางบรรทด คณสามารถปรบระยะของชองวางเหลานเพอใหอานไดงายขน แมวาตวอกษรจะถกออกแบบมาใหมระยะหางทเหมาะสมอยแลว แตในบางสถานการณ อาจมความตองการใหตวอกษรดเนน เพราะถกอกแบบใหใชรวมกบตวพมพเลก ดงนนคณควรเพมชองวางระหวางตวอกษรใหมากขนเลกนอย สาหรบคาทใชตวพมพใหญทงหมด - ระยะหางระหวางบรรทด (Leading) ระยะหางระหวางบรรทด หรอ Leading ถกนามาใชในการกาหนดระยะหางระหวางบรรทด ในโปรแกรมใชในการกาหนดระยะหางระหวางบรรทดในโปรแกรมออกแบบสงพมพและ word processing ทระยะหางนอยจะมจานวนตวอกษรไดมากจะขยายพนทของตวอกษรและยงเพมความสะดวกในการอานอกดวย - ความยาวของบรรทด เมอบรรทดของตวอกษรยาวขน อาจสรางความไมสะดวดใหกบผอานทตองเลอนสายตาจากปลายบรรทดไปยงสวนตนของบรรทดใหม ในทางตรงกนขามบรรทดทคอนขางสน ขอความจะถกแยกจากกนบอยครงซงเปนการรบกวนผอานเชนกน ความยาวทเหมาะสมของบรรทดขนอยกบ

25

หลายปจจย อยางเชน ชนดตวอกษร ขนาด ระยะหางระหวางบรรทด และความยาวของเนอหา ความยาวของหนาเวบ โดยปรกตแลว ความยาวของหนาเวบไมควรยาวจนเกนไป เพราะหนาเวบทยาวมากๆ จะทาใหผใชรสกเหนอยลาทจะอาน ทางทดควรจะแบงออกเปนหนาสนๆหลายๆหนาตอกน ซงจะใหความรสกทดกวา อยางไรกตาม ไมมขอกาหนดตามตวเกยวกบความยาวสงสดทควรจะเปน ทงนขนอยกบรปหนาและขนาดไฟลนนๆ แบงเนอหาออกเปนยอหนา (Paragraph)เมอใดทเนอหาของคณมความยาวมากๆหลายบรรทดตอกน กควรแบงขอความเหลานนใหเปนสวนยอยๆ หรอเรยกวา ยอหนา หรอ Paragraph ซงแตละยอหนาแตละเวบเพจแยกออกจากกนโดยการขนยอหนาใหมคอ <P>จะทาใหเกดบรรทดวางระหวางยอหนาดวยกน เพอแยกใหเหนไดชดวาเปนขอความทอยคนละยอหนา ขนาดของตวอกษร ขนาดของตวอกษรมผลตอคณสมบตและลกษณะของเนอหาหลายประการ การเขาถงบอบาทและความสาคญของขนาดตวอกษร จะชวยใหคณออกแบบเวบเพจทสามารถดงความสนใจของผอานไปยงขอมลทตองการ และมผลในการนาทางใหผใชคลกไปยงสวนตางๆ ได แนวทางตอไปนจะชวยใหคณชวยใหคณใชประโยชนจากขนาดของตวอกษรไดอยางมประสทธภาพ ดงดดความสนใจดวยอกษรขนาดใหญ คณอาจนาสายตาของผอานใหมงไปยงเปาหมายดวยกานใชตวอกษรขนาดใหญ เชน ในสวนของโลโกหรอหวขอหลกตางๆ หรอบรเวณทคณตองการใหผอานสนใจ ซงเปนการกาหนดตาแหนงใหผอานใชเปนจดเรมตน โดยปรกตแลวผอานจะเรมตนจากดานบนซาย แตถาหากคณตองการใหเรมสนใจทสวนอนของหนากอาจใชตวอกษรขนาดใหญใหสะดดสายตาผอานกอน การใชตวอกษรขนาดใหญเรมตนประโยค (Initial caps หรอ Drop caps) บางครงคณไมจาเปนตองใชตวอกษรแบบกราฟก เพอดงดดความสนใจเนนถงความสาคญของขอความ เมอคณสามารถใชตวอกษรทมขนาดใหญเรมตนจากประโยคเปนเทคนคทนยมใชกนมานานแลวในสงพมพ เพอดงดดความสนใจของผอานดวยการสรางความแตกตางของขนาดตวอกษร โดยทวไปแลวตวอกษรตวแรกจะมขนาดใหญวาตวอนประมาณ 5-2พอยท และยงนยมทจะใชตวอกษรชนดอนเพอใหเกดความแตกตางมากขน นอกจากนนแลวยงอาจใชรปแบบสลบส ซงจะใชตวอกษรสออนเหนอพนหลงสเขมเพอใหเหนไดเดนชด หรอคณอาจยกเนอหาบางสวนหรอขอความสาคญออกมาแสดใหเดนชด เพอเพมความนาสนใจใหกบเนอหาคอนขางยาว

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

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

26

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

แนวทางในการเนนขอความชดเจนสามารถทาไดหลายรปแบบ ซงเมอนาไปใชอยางเหมาะสมกจะชวยสรางความนาสนใจกบเนอหา และยงชวยเสรมความงามใหกบเวบเพจไดอกดวย ดงวธการตอไปน 1. การใชขนาดและนาหนกของตวอกษร เปนเรองปกตทจะสรางความเดนใหกบตวอกษรโดยทาใหมขนาดใหญกวา หรอมลกษณะเสนหนาและเขมกวา ซงจะทาใหดมความสาคญมากกวาสงรอบขาง ในการอานอยางคราวๆ สงทตองการเนนจะมลกษณะเดนและสะดดตาผอาน ในทางตรงกนขาม ขอความทไมตองเนนจะมขาดเลกและบางกวา 2. การทาตวเอยง (Italic) ลกษณะตวอกษรแบบเอยงเปนทนยมใชกบสงพมพในการเนนคาหรอขอความ ตวอกษรแบบเอยงนมกจะทาใหอานยากกวาตวปรกตเลกนอยจงทาให ผอานตองหยดเพออานซา 3. การขดเสนใต เทคนคการขดเสนใตเปนทนยมในการพมพดดสมยกอน ทมการใชสบเนองจนถงการพมพในโปรแกรมคอมพมพคอมพวเตอร แตเนองจากการขดเสนใตมความหมายพเศษในระบบเวบไซต 4. แนวตวอกษร (Orientaion) ตวอกษรทอยในแนวตงจากลางไปบนเปนสงแปลกใหม สงเกตไดงาย แตกทาใหไมสะดวกในการอานในหนาหนงสอปกตเราแตกลบดานหนงสอกจะอานไดแตในจอมอนเตอรผอานตองเอยงคอจงจะอานได 5. พนทวาง นอกเหนอจากขนาดตวหนงสอทเเสดงถงความสาคญ พนทวางรอบๆ ตวอกษรกเปนสงทสาคญเชนกน ตวอกษรขนาดเลกพนทกวางๆ จะมความโดเดนมากกวาปกต นอกจากนนการมพนทวางมากๆ ในหนาเวบไซตยงชวยใหเนอหานนนาอานมากกวาหนาทเตมไปดวยตวหนงสอ

5.1.8 ความส าคญของสทมตอการออกแบบเวบไซต สเปนองคประกอบทมความละเอยดซบซอน และตองอาศยความเชยวชาญในการผสมผสานความแตกตางของส ใหสามารถเขากนไดอยางลงตว โดยสามารถสรปความสาคญในการเลอกใชสเพอการออกแบบเวบ ไดดงน (เสถยร พลวงศ, 2549 :ไมปรากฏหนา)

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

27

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

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

5.1.9 การวางแผนเพอการออกแบบเวบไซต เวบไซตเปนสอทไดรบความนยมอยางมากบนอนเทอรเนต ผใชงานเวบไซตสามารถตดสนใจไดวาจะเลอกเยยมชมเวบไซตใดหรอไมเยยมชมเวบไซตใดไดตามตองการ ถาผใชเหนวาเวบไซตทกาลงเยยมชมอยนนไมมประโยชน หรอไมเขาใจวาเวบไซตนใชงานอยางไร เนองจากใชงานไดไมสะดวก ผใชอาจเปลยนไปเยยมชมเวบไซตอนๆได เนองจากปจจบนมเวบไซตตางๆอยจานวนมาก และยงมเวบไซตเกดขนใหมๆทกวน ผใชจงมทางเลอกมากขน และสามารถเปรยบเทยบคณภาพของเวบไซตตางๆไดเอง (ฐตรศญาณ แกนเพชร, 2551 : 6-9)

เวบไซตทไดรบการออกแบบอยางสวยงาม มการใชงานทสะดวก ยอมไดรบความสนใจมากกวาเวบไซตทมความสบสนวนวาย มขอมลมากมายแตหาสาระสาคญไมพบ หรอใชเวลาในการแสดงผลแตละหนานานเกนไป ปญหาเหลานลวนมาจากการออกแบบเวบไซตไมดทงสน ดงนนการออกแบบเวบไซตจงเปนกระบวนการสาคญในการสรางเวบไซตใหประทบใจผใช ทาใหผใชอยากกลบเขามาในเวบไซตเดมอกในอนาคต ซงนอกจากตองพฒนาเวบไซตทดมประโยชนแลว ยงตองคานงถงการแขงขนกบเวบไซตอนๆอกดวย (วนจศรา อนผา, 2548 : 37)

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

28

พอใจทจะทองไปในเวบไซตนน ดงนนทกสงทกอยางในเวบไซตทงทมองเหนและมองไมเหน ลวนเปนมาจากกระบวนการออกแบบเวบไซตทงสน เวบไซตทดสวยงามและมลกเลนมากมายนน อาจจะไมนบวาเปนการออกแบบทดกได ถาความสวยงามและลกเลนเหลานน ไมเหมาะสมกบภาพลกษณของเวบไซต ดวยเหตน จงเปนเรองยากทจะระบวาการออกแบบเวบไซตทดนนเปนอยางไร เนองจากไมมหลกเกณฑแนนอนทจะใชไดกบทกเวบไซต แนวทางการออกแบบบางอยางทเหมาะสม กบเวบไซตหนง อาจจะไมเหมาะสมกบอกเวบไซตหนงกได ทาใหแนวทางการออกแบบของแตละเวบไซตนน แตกตางกนไปตามเปาหมายและลกษณะของเวบไซตนน เวบไซตบางแหงอาจตองการนาเสนอความสนกสนานหรอความบนเทง ในขณะทเวบไซตอนกลบตองการนาเสนอเนอหาทถกตอง นาเชอถอเปนหลก ดงนนการออกแบบเวบไซตโดยรวม ควรคานงถงสงตอไปน (วราวรรณ ธนธา, 2550 : 35) 1. ความเรยบงาย ไดแก มรปแบบทเรยบงาย ไมซบซอน และใชงานไดสะดวก ไมมกราฟกหรอภาพทเคลอนไหวอยตลอดเวลา ชนดและสของตวอกษรไมมากจนเกนไปทาใหวนวาย 2. ความสม าเสมอ ไดแก ใชรปแบบเดยวกนตลอดเวบไซต เชนรปแบบของกราฟก ระบบเนวเกชนและโทนส ควรมความคลายคลงกนตลอดทงเวบไซต 3. ความเปนเอกลกษณ การออกแบบเวบไซตควรคานงถงลกษณะขององคกร เพราะรปแบบของเวบไซตจะสะทอนถงเอกลกษณและลกษณะขององคกรนนๆ เชน ถาเปนเวบไซตของทางราชการจะตองดนาเชอถอ 4. เนอหาทมประโยชน เนอหาเปนสงทสาคญทสดในเวบไซต ดงนนควรจดเตรยมเนอหาและขอมลทผใชตองการใหถกตอง และสมบรณ มการปรบปรงและเพมเตมใหทนเหตการณอยเสมอ เนอหาไมควรซากบเวบไซตอน จงจะดงดดความสนใจ 5. ระบบเนวเกชนทใชงานงาย ตองออกแบบใหผใชเขาใจงายและใชงานสะดวก ใชกราฟกทสอความหมายรวมคาอธบายทชดเจน มรปแบบและลาดบของรายการสมาเสมอ เชนวางไวทตาแหนงเดยวกนของทกหนา

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

29

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

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

1. เนอหาในการน าเสนอ การทจะนาขอมลผานเวบนน ควรพจารณาถงขอมลทนาเสนอนนวาเปนขอมลทอยในความสนใจหรอเกยวของของผชมหรอไมและการนาเสนอขอมลนนถาหากมากเกนไปกอาจทาใหผชมเกดความสบสนและเบอหนายทอานตอไป ดงนน ในการนาเสนอขอมลผานเวบเพจนนควรจะเรมตนดวยขอมลทวไปกอนและนาเขาสเนอหาทตองการจะนาเสนอซงเนอหาโดยทวไป อาจจะอยในโฮมเพจ สวนรายละเอยดตางๆ นน กอยเวบเพจอนภายในเวบไซตเดยวกน 2.ความจของขอมล เนองจากเวบเพจสามารถทจะเชอมโยงเวบตางๆ เขาหากนไดโดยงาย เพยงแตกาหนดจดในการเชอมโยงเทานน ดงนนในแตละหนาจงไมควรมความจของขอมลมากจนเกนไป เพราะจะทาใหผอานเกดความเบอหนายได โดยเฉพาะการใชแถบเลอนดานขางในการเลอน เพออานขอมลนน บางครงผอานอาจจะละทงการอานและออกจากเวบเพจของเราไป ดงนนในการนาเสนอขอมลในแตละหนา ใหดวาจานวนเนอทวาง (White space) ในหนาเวบเพจ ไมควรตากวา 30 เปอรเซนต 3.รปแบบของการน าเสนอ 3.1 การใชโครงสรางเวบเพจทเหมาะสม จะทาใหผใชสามารถตดตามเนอหา และเชองโยงไปยงหวขอหรอหนาทตองการไดอยางสะดวก รวดเรว และในการนาเสนอ เนอหานนควรจะนาเสนอดวยขอมลทวไปกอน แลวเชอมโยงตอไปยงหนาทมขอมลเพมเตม ซงขอมลในหนาทผอานเชอมโยงมาจะเปนการอธบายรายละเอยดตอจากหนากอนหนาน การกระทาเชนนคลายดงเราเรยบเรยงเนอหาเปนตอนๆ โดยทผใชสามารถอานรายละเอยดเองได 3.2 การใชรปแบบของตวอกษรและการฟก สวนนจะทาใหเวบเพจมความนาสนใจและประทบใจเมอเขามาครงแรกนบเปนสงททาทายนกออกแบบเปนอยางยง ซงหลกการตอไปนอาจชวยใหการออกแบบเวบเพจมความนาสนใจเพมขน

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

30

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

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

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

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

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

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

31

สานกการศกษาตอเนอง และสวนกลางของมหาวทยาลยสโขทยธรรมาธราช 2. การกาหนดโฟลเดอร (Folder) สาหรบจดเกบขอมล และกาหนดประเภทแฟม

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

6. ขนตอนการพฒนาเวบไซต การพฒนาเวบไซตและนาเวบไซตเขาสระบบ www ใหบคคลอนเขามาเยยมชมไดนน กระบวนการพฒนาเวบไซตสามารถจาแนกได3ขนตอน ดงน (ประไพ ศรสะอาด, 2549 : 22-26) 1 การเตรยมการและการวางแผนงาน(pre-production) เปรยบเสมอนเขมทศทจะชนาทางหรอบงบอกใหผพฒนาเวบไซตทราบวา ควรจะตองเดนทางไปในทศทางใด ซงขนตอนนจะประกอบดวย การเตรยมกอนการดาเนนการ การวางแผนการดาเนนการ รวมทงการรวบรวมและวเคราะหโครงสราง

การกาหนดแหลงเกบขอมล

การกาหนดโฟลเดอร

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

โปรแกรมในการพฒนาเวบเพจ

32

1.1 การเตรยมกอนการด าเนนการ ประกอบดวย 1.1.1 กาหนดวตถประสงคและเปาหมายของเวบไซต เพอใหเหนภาพทชดเจน วาเวบไซตตองการนาเสนอสงใด มวตถประสงคอยางไร โดยวตถประสงคของเวบไซตสามารถจาแนกไดหลากหลายประเภท ไดแก เวบไซตสวนบคคล เวบไซตเผยแพรขอมลสาหรบบรษท/หางราน/องคกรตางๆ/สถาบน/โรงเรยน เวบไซตเพอการทาธรกรรมคาขาย เวบไซตเพอการโฆษณารายการสนคา เวบไซตเพอการศกษาทางไกล เวบไซตเพอศนยรวมและชองทางนาไปสแหลงขอมลอน เวบไซตเพอเปนศนยรวมชมชนคนออนไลน และเวบแอพลเคชนเพอการใชงานเฉพาะทาง ทงนการกาหนดวตถประสงคของเวบไซต จะมผลตอการกาหนดโครงสรางรปแบบ รวมถงหนาตา และสสนของเวบไซตดวย 1.1.2 กาหนดชอเวบไซต และชอยอารแอล 1.1.3 กาหนดกลมเปาหมายทจะใหเขาชมเวบไซต เพอจะไดทราบวาผทจะเขาชมเวบคอใคร จะไดดาเนนการออกแบบและดาเนนการจดทาเวบไซต เพอใหตอบสนองความตองการผชมกลมนนไดทากทสด 1.1.4 ศกษากลมคแขง เพอจะไดทราบวา คแขงของเวบทจะพฒนาคอใคร จะไดศกษาแนวทางการออกแบบ และการดาเนนดารของคแขง เพอเปนตวอยางหรอแนวทางในการออกแบบและดาเนนการในการจดทาเวบไซตตอไป

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

2.การท างานจรงในการออกแบบและพฒนาเวบเพจ(on- production) แบงไดเปน2สวน คอ 2.1 การออกแบบเวบเพจนบเปนขนตอนในการออกแบบรปราง โครงสรางและลกษณะทางดานกราฟกทางหนาเวบเพจ โดยโปรแกรมทนยมนามาใชในการออกแบบคอ โฟโตชอป หรอ ไฟลเวรก ซงจะชวยในการสรางเคาโครงของหนาเวบและองคประกอบตางๆ เชน ชอเวบไซต โลโก รปไอคอน ภาพเคลอนไหว แบรนเนอรโฆษณา เปนตน สงสาคญทตองคานงถงในการออกแบบและคานงถงในการสรางเวบเพจ คอวตถประสงคในการจดทาเวบไซต และเปาหมายของกลมผเขาชม เวบเบราวเซอรทใชแสดงผลเวบไซต เพอทจะไดทาการกาหนดรปแบบและลกษณะเวบเพจ ไดแก ขนาดของหนาเวบเพจ และลกษณะการวางองคประกอบของเวบไซตใหสวยงามและแสดงผลไดเรว รวมทง ควรกาหนดและวางโครงรางของเวบเพจ ทงในสวนของจานวนเวบเพจ และเนอหาในแตละเวบเพจ เปนแผนผงเวบไซตออกมาบนกระดาษ 2.2 การพฒนาเวบเพจหลงจากออกแบบโครงรางของเวบเพจและแตละหนาเวบเพจแลว ขนตอนตอไปคอ การดาเนนการสรางเวบเพจ ซงรวมถงการจดหาองคประกอบทตองนามาใช เชน สอมลตมเดย ภาพกราฟก แบบฟอรมตางๆ และการสรางไฟลรปภาพ/เสยง ทเกยวของกบเนอหา ซงตองคานงถงรปแบบ

33

ของไฟลทนามาใชและสอดคลองกบซอฟตแวรทใชในการพฒนาดวย จากนนนาภาพและเสยงมาเกบไวในไดเรกทอรหรอโฟลเดอรทกาหนดไว แลวนาขอมลทงหมดทรวบรวมไวจากทกลาวมาขางตน มาสรางเปนเวบไซตดวยภาษา HTML หรอเครองมอในการสรางเวบเพจอนตามแนวคดทไดออกแบบไวแลว ซงรวมถงการเขยนโปรแกรมสครปตในการใชงานดวย 3. การสรปงานเพอสงมอบ(post- production) ประกอบดวย3.1การทดสอบและปรบปรงเวบไซต หมายถง การทดสอบเวบเพจทสรางขนแบบออฟไลน โดยยงไมไดมการนาเวบไซตเขาสอนเทอรเนต แตกสามารถแสดงผลไดเหมอนจรงผานเวบเบราวเซอร เชน ใชโปรแกรมอนเทอรเนตเอกซพลอเรอร ตรวจสอบตวอยางเวบเพจหนาตางๆทสรางไว เชน ขนาดตวอกษร ขนาดรปภาพ เสยง การใชส ตาราง เปนตน วามความเหมาะสมหรอไม พรอมกบทาการแกไขปรบปรงจนเปนทนาพอใจ 3.2 การเผยแพรเวบไซต เมอทดสอบเวบไซตจนสมบรณแลว ขนตอนในการเผยแพรผานเวบไซต คอ การเผยแพรใหคนทวไปไดรจก หรอเรยกวาการนาเวบไซตขนเซรฟเวอร หรอการอพโหลด ซงเปนการถายโอนเวบเพจและสวนประกอบอน เชน ไฟลภาพ ไฟลเพลงประกอบ เปนตน ไปฝากไวทโฮสต โดยเจาของเวบอาจตองจดทะเบยนโดเมนเนม และเชาพนทโฮสตจากผใหบรการอนเทอรเนต (Internet Service Provider : ISP) รายใดรายหนง เมอเลอกโฮสตไดแลว ขนตอไปกเปนการถายโอนเวบเพจไปฝากไวทโฮสต ซงโดยทวไปจะใชซอฟตแวรถายโอนขอมลเปนเครองมอ ซอฟตแวรประเภทน เรยกวา ซอฟตแวรเอฟทพไคลเอนด (FTP client) ผพฒนากสามารถนาเวบเพจอพโหลดขนสอนเทอรเนตและประชาสมพนธใหคนทวไปไดรจกได ซงการทาใหคนทวไปรบรและใชบรการเวบไซตไดมากนน จาเปนตองมการประชาสมพนธอยางตอเนองและใชระยะเวลาพอสมควร ซงอาจทาโดยมปายโฆษณาประชาสมพนธออนไลนในหนาเวบไซตอนๆ หรอการแลกเปลยนปายโฆษณาระหวางกน การโฆษณาผานเครองมอคนหา การโฆษณาผานจดหมายอเลกทรอนกส การตลาดแบบไวรล ซงคลายกบกลยทธการบอกแบบปากตอปาก หากแตเปนการประชาสมพนธโดยสอประเภทเครอขายสงคมทมอย และควรมการเกบสถตของผเขาชมดวย กสามารถทาใหประเมนไดวา เวบไซตทพฒนาขนนนไดรบความสนใจมากนอยเพยงใด 3.3 การบ ารงรกษาเวบไซต เปนการปรบปรงเนอหา ภาพประกอบ หรอการปรบปรงเวบไซตใหเปนปจจบน ซงถอเปนขนตอนทสาคญ เพราะในโลกอนเทอรเนตมการเปลยนแปลงอยางรวดเรวอยตลอดเวลา ผเขาชมเวบมกใชเวลาในการคนหาและเปดผานเวบไซตตางๆอยางรวดเรว หากพบวาเวบไซตทผสรางนาเสนอไมไดมการปรบปรงเปลยนแปลงหรอมขอมลใหมๆเพมขนเลย ผเขาชมเวบกอาจลดจานวนลงเรอยๆ จนกลายเปนเวบทไมมคนเขามาเยยมชมเลยหรอเปนเวบทตายแลว ดงนน การปรบปรงเวบไซตอยเสมอ โดยมการเพมขอมลขาวสารใหมๆอยเปนประจา กจะทาใหเวบไซตทนสมย มผชมเขาชมเปนประจาและมากขน จนพฒนาเปนเวบไซตยอดนยมไดในทสด

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

34

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

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

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

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

ภาพ ตวอยางเวบไซตแบบเรยงลาดบทมการเพมเนอหายอย

35

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

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

36

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

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

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

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

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

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

37

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

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

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

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

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

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

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

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

38

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

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

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

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

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

39

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

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

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

40

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

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

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

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

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

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

41

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

42

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

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

ขนตอนท 1 สารวจปจจยสาคญ (Research)

1. รจกตวเอง-กาหนดเปาหมายและสารวจความพรอม

2. เรยนรผใช-ระบกลมผใชและศกษาความตองการ

3. ศกษาคแขง-สารวจการแขงขนและเรยนรคแขง

สงทไดรบ

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. ดแลและพฒนาตอเนอง

1. แนวทางการออกแบบเวบไซต

2. ขอบเขตเนอหาและการใชงาน

3. ขอมลทถกจดอยางเปนระบบ

1. แผนผงโครงสรางขอมล

2. แนวทางการทองเวบ

3. ระบบเนวเกชน

1. เวบไซตทสมบรณ

2. เปดตวและทาเวบไซตใหเปนทรจก

3. แนวทางการดแลและพฒนาตอไป

1. ลกษณะหนาตาของเวบไซต

2. เวบเพจตนแบบทใชพฒนา

3. รปแบบโครงสรางของเวบไซต

4. ขอกาหนดในการพฒนาเวบไซต

43

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

(1) แบบแผนระบบขอมล คอ การกาหนดลกษณะพนฐานของขอมลภายในกลมเดยวกน เหมอนกบแบบแผนการจดการระบบตางๆในชวตประจาวน เชน การจดระบบตามตวอกษรของเบอรโทรศพทในสมดโทรศพทหรอการแบงหมวดหมสนคาในหางสรรพสนคาเปนตน - แบบแผนระบบขอมลแบบแนนอน เกดจากการแบงขอมลออกเปนกลมทแนนอน โดยไมมการเหลอมลาของขอมลในแตละกลม ตวอยางรปแบบขอมลรปแบบนไดแกระบบขอมลตามตวอกษร , ระบบขอมลตามลาดบเวลา และระบบขอมลตามพนท ลกษณะเดนของแบบแผนประเภทน คอ ความงายตอการออกแบบ , การดแล และการใชงาน แตมขอจากดคอผใชตองรถงชอและรายละเอยดของสงทตองการคนหา มฉะนนกจะหาไมเจอ - แบบแผนระบบขอมลแบบไมแนนอน ม 4 ชนดดงน จดกลมตามหวขอ, จดกลมตามผใช, จดกลมตามการทางาน และจดกลมตามแบบจาลอง ขอมลทอยในแบบแผนน เปนขอมลทถกจดอยในกลมโดยไมมการกาหนดแนนอน ซงยากตอการออกแบบ, การดแล และการใชงาน แตอยางไรกตาม รปแบบนกลบมความสาคญและเปนทนยมใชมากกวาแบบระบบขอมลแบบแนนอนเสยอก เพราะวาผใชอนเตอรเนตบางคนไมรแนชดถงสงทกาลงคนหาอยดงนน ในกระบวนการคนหาขอมลประเภทน ผใชจงสามารถเรยนรรายละเอยดของสงทคนหาเพมได ตามจานวนครงการคนหา เหมอนกบทเราคนหาขอมลจาก เสรช เอนจน (Search Engine) โดยใชคาทมความหมายกวางกอน และผลจากการเสรช ทาใหเรารถงสงทมความเฉพาะเจาะจงขนเรอยๆ แลวจงนาขอมลนนมาเสรชตอ จนเจอขอมลทตองการหาในทสด แตระบบแบบนมขอเสยตรงทใชเวลานานและตองทาหลายครง - แบบแผนระบบขอมลแบบผสม การจดระบบขอมลโดยใชแบบใดเพยงแบบเดยวอาจมขอจากด จงมการนาเอาแบบแผนระบบขอมลทงสองแบบมาผสมกน เพอใหผใชไดรบประโยชนสงสด อยางไรกด ในการผสมแบบแผนเหลานควรเลอกใชอยางระวง เพราะอาจทาใหผใชเวบไซตสบสนได (ธวชชย ศรสเทพ,2544)

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

44

- โครงสรางระบบขอมลแบบลาดบชน นบวาเปนพนฐานของโครงสรางระบบขอมลทด เนองจากมการแบงแยกกลมอยางชดเจน อกทงความสมพนธระหวางชนขอมลกเปนสงทผใชคนเคย และเขาใจโครงสรางของขอมลทซบซอนในเวบไซตไดงายและรวดเรว มขอพงระวงเพยง อยาสรางโครงสรางระบบขอมลทลกเกนไป หรอมจานวนชนของขอมลในโครงสรางแคบและลกมากเกนไป เพราะจะทาใหผใชตองคลกหลายครงจนกวาจะเขาถงสงทตองการ ขณะทถาออกแบบโครงสรางระบบขอมลมลกษณะแบบกวางและตนมาก หมายถงมจานวนรายการทมอยในแตละชนขอมล อาจทาใหผใชรสกวาเนอหาในสวนนนมนอยเกนกวาทคดเอาไวหลงผใชคลกไปได - โครงสรางระบบขอมลแบบไฮเปอรเทกซ เปนโครงสรางระบบขอมลแบบใหมทมลกษณะคลายเครอขายโยงใย โครงสรางระบบนประกอบไปดวย 2 สวน คอรายการ หรอกลมขอมลทถกลงค กบลงคทเชอมโยงขอมลเหลานน องคประกอบ 2 สวนนเมอรวมกน จะเกดเปนระบบการเชอมโยงขอมลประเภทตางๆ ไมวาจะเปนตวอกษร, ขอมล, รปภาพ, เสยง หรอภาพยนตร โดยการเชอมโยงนนอาจเปนไปตามลาดบชนขอมลหรอไมเปนไปตามตามลาดบชนขอมล หรอทงสองอยางรวมกนกไดจากความยดหยนสงของระบบไฮเปอรเทกซนเอง จงเปนไปไดงายทนกออกแบบจะทาการเชอมโยงซบซอนเกนไปจนผใชสบสน และไมสามารถนกถงโครงสรางรวมของเวบไซตได เราจงมกนาเอาไฮเปอรเทกซมาใชเปนสวนเสรมใหกบโครงสรางขอมลแบบลาดบชนมากกวาจะใชเปนโครงสรางหลกเสยเอง - โครงสรางระบบขอมลแบบฐานขอมล โครงสรางระบบขอมลแบบนมกนาไปใชกบเวบขนาดใหญ ทมผรบผดชอบเรองระบบฐานขอมลโดยเฉพาะ การจดระบบขอมลแบบฐานขอมลน ขอมลจะถกจดอยในรปแถวและคอลมนดวยกฎเกณฑบางอยางทมการกาหนดไวเฉพาะฐานขอมลนนๆ การนาระบบฐานขอมลมาใชในเวบไซตจะชวยเพมความสามารถในการคนหาขอมลไดอยางถกตองและรวดเรว นอกจากนนการใชระบบฐานขอมลยงชวยเพมความสะดวกในการดแลและปรบปรงเนอหาอกดวย อยางไรกด ในระบบฐานขอมลมความซบซอนของกฎเกณฑและขอจากดตางๆ อยมาก จงควรนาไปใชกบบางสวนของเวบไซตหรอเวบไซตยอยทมกลมของขอมลประเภทเดยวกน ตวอยางเชน รายชอสมาชก , แหลงรวมขอมล, ขาวยอนหลง หรอขอมลสนคา เปนตน 2. ระบบเนวเกชน นอกเหนอจากการออกแบบโครงสรางขอมลทด จะชวยใหผใชเขาถงขอมลไดงายขน ระบบเนวเกชนกเปนสวนเสรมอกอนหนงในการสรางสงแวดลอมทสอความหมาย เพอชวยใหผใชทองเวบไดอยางคลองตว คนหาสงทตองการเจออยางรวดเรว รปแบบของเนวเกชนแบงออกเปน 4 รปแบบดงน (1) ระบบเนวเกชนแบบลาดบชน ระบบเนวเกชนแบบลาดบชนนเปนแบบพนฐานทผคนมกใชกนตามปกตอยแลว คอการทมโฮมเพจหนงหนา และมลงคไปยงหนาอนๆ ภายในเวบไซตนนกถอวาเปนลาดบชนอยางหนงแลว อยางไรกด เวบไซตแบบนมขอจากดในการเคลอนทไดเฉพาะแนวตง คอจากหนาหลกไปหนายอยถดลงไปหรอยอนกลบขนมา (2) ระบบเนวเกชนแบบโกลบอล ระบบเนวเกชนแบบโกลบอล หรอแบบตลอดทวทงเวบไซต เปนระบบทชวยเสรมขอจากดของระบบเนวเกชนแบบลาดบชน ทาใหสามารถเคลอนทไดทงในแนวตงและแนวนอนอยางมประสทธภาพตลอดทงเวบไซต โดยปกตแลวระบบนจะใชเพอเปนลงคไปยงสวนหลกๆ ของ

45

เวบไซต ซงอาจอยในรปของเนวเกชนบารทวางไวดานบนหรอดานลางสดของเวบเพจทกหนากได (3) ระบบเนวเกชนแบบโลคอล สาหรบเวบทมความซบซอนมาก นอกจากระบบเนวเกชนแบบโกลบอลแลว ยงอาจตองใชระบบเนวเกชนแบบโลคอล หรอแบบเฉพาะสวนเขามาชวยเมอมบางสวนของเวบไซตทตองการระบบเนวเกชนซงมลกษณะเฉพาะตว เชน หวขอยอยของเนอหาทอยภายในสวนหลกๆ ของเวบไซต เพอความสะดวกและสอความหมายไดชดเจนขน (4) ระบบเนวเกชนเฉพาะท ระบบเนวเกชนแบบนมอกชอหนงวา ระบบเนวเกชนแบบเฉพาะทตามความจาเปนของเนอหา ซงกคอลงค ของคาหรอขอความทนาสนใจซงฝงอยในประโยค (Embedded Link) ทเชอมโยงไปยงรายละเอยดเกยวกบคานนๆ เพมเตม (ธวชชย ศรสเทพ ,2544)

10. ประเภทของเวบไซต เวบไซตทเกดขนมา ในประเทศไทยเองมเวบไซตทเกดขนมาประมาณหนงแสนสหมนกวาเวบไซต

นบวาเปนจานวนทไมนอยเลยทเดยว จากเวบไซตเหลานนไดถกจดประเภทออกประเภทตางๆดงน

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

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

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

46

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

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

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

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

47

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

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

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

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

48

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

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

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

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

8. Affiliate Marketer :เวบทสรางรายไดจากการเปนนายหนาออนไลน http://webhostinggeeks.com/ เวบไซตทจาหนาย web hosting

49

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

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

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

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

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

50

5. ความครอบคลม (Coverage)การสรางเวบไซตตองใหตรงกบจดสนใจ หวเรองมความชดเจน เหมาะกบรปภาพ โครงเรองและเนอหาสาระวธการคนหาขอมลในเวบไซตชดเจฯ

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

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

การโปรโมทเวบไซต คอ การโฆษณาเผยแพรเวบไซตทเราสรางขนใหเปนทรจกอยางทวถง โดยเฉพาะใหเปนทรจกของผทใชอนเทอรเนต ถอเปนกลยทธอยางหนงสาหรบใชแจงขาวสาร เพอเชญชวนใหนกทองเวบไดเขามาเยยมชมเวบไซตของตน โดยทวไปแลวนกทองเวบมกจะทาการคนหาขอมลของเวบไซตผานทางเครองมอประเภท เวบไดเรกทอร และ Search Engine จงสามารถนามาใชเปนชองทางในการโปรโมทเวบไซต 12.1 การโปรโมทเวบไซตแบบออฟไลนเปนการโฆษณาผานทางสอหนงสอพมพโดยการลงโฆษณาในหนงสอพมพทวๆไปเพอใหคนรจกและเขาถงไดโฆษณาผานทางบลบอรดตามแหลงชมชน ถนนใหญๆ หรอแหลงทมคนผานในแตละวนเปนจานวนมากโฆษณาผานสอรถยนต เชน โฆษณาดวยการตดแบนเนอรหรอชอเวบไซตขางรถยนตของตวเองหรอรถยนตประจาทาง ( รถเมล )ผานนามบตร โดยการพมพชอเวบไซตหรอ URL ลงบนนามบตร ซงถอวาเปนอกชองทางหนงผานเสอทสวมใส โดยการพมพชอเวบไซตลงบนเสอเพอใหตดตาคนทพบเหนการโฆษณาผานถงกระดาษ ถงพลาสตก หรอแพคกงขางขวดหบหอตางๆ 12.2 การโปรโมทเวบไซตแบบออนไลน เนองจากในยคปจจบน E-Commerce มบทบาทสาคญในการเปนชองทางหนงของธรกจเวบไซต คอ เครองมอสาคญของ E-Commerce เปนชองทางทใชในการโปรโมทสนคาและขายสนคา นอกจากนแลวเวบไซตยงทาหนาทแนะนาบคคล สถานท หรอเปนทแลกเปลยนกนระหวางบคคล ดงนนวธจะทาใหธรกจกวางไกล มยอดจาหนายทเพมมากขน และสามารถแนะนาบคคลหรอสถานทใหเปนทรจกมากขนกเปนสงท วธการโฆษณาแบบออนไลน

1. การลงโฆษณาในเวบไซตดงๆ เชน Sanook.com , Pantip.com , Thai2hand.com เปนตน ซงการโฆษณาหรอประชาสมพนธเวบไซตดวยวธนมทงแบบซอแบอรเนอรและเปนแบบเทกซลงค ซ งใหผลตอบกลบมาคอนขางดทเดยว สวนคาโฆษณามตงแตฟร(ในระยะแรก) 2. โดยการเขาไปโพสทหรอลงประกาศในเวบบอรดตางๆของหลายๆเวบไซตทมบอรดสาหรบประกาศซอขายหรอลงโฆษณา ซงเปนบรการฟร

51

3. โดยการแลกลงคกบพนธมตร โดยเฉพาะเวบไซตหรอบลอกทมเนอหาเกยวของกบเรา จะชวยใหมคนมาเยยมชมในระดบหนงได 4. การโปรโมทเวบไซตผาน Search Engine การโปรโมทประเภทนจะใหผลตรงจดมากทสด ผคนในโลกออนไลนในปจจบนนยมคนหาขอมลตางๆ ซงรวมทงสนคาและบรการตางๆผานเครองมอคนหาจากเวบไซตทใหบรการการคนหาขอมลอยาง Google , Yahoo , MSN และเวบไซตพนธไทยอยาง Sanook.com กเปนอกวธหนง ทดทสดทแพรหลายและไดผลดเชนเดยวกน นอกจากนยงมอกหลายวธทจาเปน และเราจะสามารถทาไดอยางไร ในบทความนจะชวยใหทานไดรจกชองทางทหลากหลายในการทจะชวยเผยแพรเวบไซตของทานใหเปนทรจกอยางกวางขวาง ซงมวธการกาหนดเวบไซต ดงน 1. บอกเพอนๆ เรองเวบของคณ เปนประชาสมพนธแบบงายๆ และไดผลดทสดแบบหนง ซงสามารถทาไดตลอดเวลา และไมเสยคาใชจาย แตอยางใด 2. สงอเมลแจงใหเพอนๆทราบ คอการ สงอเมล แจงใหเพอน หรอคนทคณตดตอ ดวยทราบ เพอแจงใหทราบวาทานมเวบไซต ทสามารถเขาไปใชงานได ซงทานควรสงอเมลไปยงคนทคณรจก ไมควรหวานสงไปทว เพราะจะเปนอเมล ทเรยกวา spam mail ซงผใชอนเตอรเนตทวไป ไมยอมรบ วธสงอเมล อกวธหนงคอใช links E-mail to Friends ขางลางของหนาเวบแตละหนา เพอแจงใหเพอน คลกเขามาดขอมล ทหนานน 3. เพมชอเวบของทานใน search engine หรอ web directory ตางๆ

หรอเวบรวมลงค โดยทานเพยงกรอกขอมล ทสาคญของเวบของคณ หลงจากนน อกประมาณ สปดาหหนง เวบของคณกจะปรากฏอยในฐานขอมล ของเวบ search engine สาหรบเวบ search engine ทสาคญๆ เชน Google 4. แลกลงค กบเพอน ทมเวบไซต โดยทาการแลกลงค ( URL ) กบเพอน ทมเวบ โดยคณ สามารถนา urlของเวบเพอน มาใสใน Cool Links ของเวบคณได ซง เพอนของคณกทาเชนเดยวกน คอ จะมชอเวบของคณ ในหนาเวบของเพอน เพอนเปนการแลกเปลยน visitor กน จะทาใหเวบของคณมผเขาชม มากและหลากหลายมากขน 5. ทาสตกเกอร ตดรถ จะเปนรถของคณ และ ของเพอนๆ กได จะมากนอยเทาไหร กได วธนไดผลอยางไมนาเชอ เพราะทกท ทมคนเหน URL ของเวบคณ กอาจจะมคนสนใจเขามาเยยมชม

6. ทา E-mail signature วธน คอการลงทาย อเมลของคณ ดวยขอความประชาสมพนธ เวบของคณ ทาใหเวลามใครไดรบ อเมลจากคณ กจะเหน URL เวบคณ 7. ลงภาพถาย ทนาสนใจ สงอเมลบอกเพอน เชน คณไปเทยวกบเพอนมา กสามารถนาภาพไปเทยว มาลงใน photoalbum 8. เขยน webmaster talkเพอเปนการทกทาย โตตอบกบผเขาชม สมาเสมอ กจะเปนการ สรางความเปนกนเอง กบผเขาชมเพอ ใหเปน แฟนประจา

52

9. ตอบกระทในเวบบอรด หรอ แสดงความเหน ในบทความตางๆ ซงจะทาใหเวบของคณ มสสน มากขน โดยคณ อาจจะตอบหรอ ตงกระท ดวยรหสสมาชก จะชวยสรางความนาเชอถอ ใหกบผเขาชม รวมทงทาน สามารถสนกกบการโหวต ของผชม สาหรบความเหน ทดเปนประโยชน ยงมสมาชก ready portal มากๆ และ มผชมมากๆ กจะทาใหเวบยงมสสน และ คะแนนโหวต ของสมาชก กจะมากดวย 10. ทานามบตร สาหรบแจกผอน วธน ทาไดกวางขวาง 11. ทาแผนพบ อาจทาแบบงาย ใสรายละเอยดเนอหาของเวบทสาคญๆ เพอใชโฆษณาเวบของคณ 12. ลงประชาสมพนธในเวบบอรด ทอนญาต ใหโฆษณาได ตามเวบไซตตางๆ (ตองระวง ไมโฆษณาเวบของคณผานหวขอเวบบอรด ทไมเกยวของ เพราะจะทาใหเวบคณเสยชอเสยงได เนองจากสงคมอนเตอรเนตไมยอมรบ) 13. โพสโฆษณา ประชาสมพนธ ผานเวบ Classified ลงประกาศโฆษณาผานเวบไซตประเภทClassified ทมบรการลงประกาศซอ-ขาย โพสตโฆษณาอยางนอยวนละ 30-40โพสต/วน จะชวยเรอง Seoไดเปนอยางด 14. อพเดทเนอหนาเวบไซตอยเสมอ ลองอพเดทเรองหา บทความทเกยวของกบบรการมาอพเดท หรออพเดทสนคา เพอใหเวบไซตนาตดตามอยเสมอ

13. องคประกอบของเวบไซต องคประกอบของเวบไซตสามารถแบงออกเปน4สวน ไดแก (Hellomyweb, 2554 :ไมปรากฎหนา) 1. สวนหวของหนา(Page Header) เปนสวนทอยดานบนสดของหนาเวบเพจ เปนองคประกอบทสาคญทสดของหนา เนองจากเปนสวนทดงดดผชมใหตดตามเนอหาภายในเวบไซต มกใสภาพกราฟกเพอสรางความประทบใจ สวนใหญประกอบดวย ซงเวบไซตหรอชอหวขอของเวบเพจยอย เมนในการเชอมโยง และแบรนเนอรโฆษณา การออกแบบสวนหวของเวบเพจมหลกการทสาคญ คอ ตองระบชอหรอโลโกขององคกรทกครง เพอผชมเวบไซตจะไดทราบวากาลงชมเวบไซตใดอย 2. สวนของเนอหา(Page Content) เปนองคประกอบสาคญทมผลตอการตดสนใจเยยมชมขอมลของผชมเวบ วาควรชมเวบไซตนตอหรอไม การออกแบบสวนเนอหา ควรกาหนดวตถประสงคของเวบไซตวาตองการนาเสนอขอมลเกยวกบอะไร จากนนจงคนหาขอมลใหครอบคลมเรองทเกยวของใหมากทสด แลวนาขอมลเหลานนมากาหนดรปแบบการนาเสนอขอมล เชน การนาเสนอดวยรปภาพ เสยง คลป วดโอ หรอตวอกษร เปนตน ขอควรระวงในการออกแบบสวนเนอหาคอ ขอความในเพจไมควรมความจไฟลขอมลมากเกนไป เนองจากจะทาใหโหลดเวบไดชา หากเปนตวอกษรไมควรยาวจนเกนไป ควรทาใหสวนเนอหากระชบ ไดใจความ 3. สวนคอลมนการเชอมโยง(Page Sidebar) เปนเครองมอทนกออกแบบเวบไซตควรกาหนดไวเพมเตม (อาจไมมสวนนกได) เพออานวยความสะดวกกบผชมในการเลอกชมสงทตองการอยางงายดาย หลกการออกแบบสวนคอลมนการเชอมโยง จะเนนความงายในการใชงานและความสมาเสมอบนเวบเพจ ผออกแบบเวบเพจตองมนใจวา สามารถเชอมโยงการทางานทกเวบเพจไดอยางถกตอง 4. สวนทายของหนา(Page Footer) เปนสวนทอยดานลางสดของหนา มกวางระบบนาทางท

53

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

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

54

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

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

14.1 ขอมล 14.1.1 ขอมล (data) เปนขอเทจจรงตางๆทไดจากการดาเนนการ ซงจะชวยในการตดสนใจ การรวบรวมขอมลขาวสารและการเขยนเวบเพจผเขยนจาเปนตองเรยนรการเขยน โดยเฉพาะHTML ซงเปนภาษาสากลสาหรบเขยนเวบ ภาษาHTML เปนภาษาทไมยงยากสามารถเรยนรไดจากตาราและเวบเพจในอนเทอรเนต ทจดสรางขนมาเพอใหความรในการจดทาเวบเพจ การออกแบบเวบเพจ หากผจดทารจกนาศลปะและวธการของการสรางสรรค จะชวยใหเวบเพจดด สวยงามและนาสนใจมากยงขน 14.1.1 ความถกตองความชดเจนของขอมล การนาเสนอขอมลทถกตองชดเจนบนเวบ เปนสงสาคญในการสรางความเชอถอใหกบผใช การทาเวบเพจจงควรออกแบบอยางละเอยดรอบคอบและเปนมาตรฐาน ทงในตอนเรมแรกสรางเสรจและในชวงใชงาน อกทงตองรบฟงคาแนะนาความคดเหนของผใชเวบเพจทดจงควรม จดเชอมตรงใชตดตอกบผทาเวบ หรอทเยกวา”Webmaster”สงนจะเปนสวนหนงทจะชวยใหเวบเพจไดรบความนยม และกอประโยชนใหแกกลมเปาหมายไดในระยะยาว 14.2 การก าหนดขนาดของแตละละหนาเอกสารในเวบเพจ การเรยกเอกสารไฮเปอรเทกซผานเครอขายอนเทอรเนตสวนหนงขนอยกบความเรวของสายสญญาณสอสาร เชน เมอเรยกเขาสโฮมเพจทใดทหนง เราจะตองใชเวลาในการโหลดขอมลทจะปรากฏขนบนจอภาพ การโหลดขอมลไมควรจะตองเสยเวลานานเกนไป โดยทวไปถาใชกะโมเดมควรจะทาใหการเรยกหนาเอกสารหนาหนงไมควรนานเกนกวาสองนาท หากตองเสยเวลารอนานจะทาใหผดแลขอมลเกดความรสกเบอในการเรยกคนขอมลได จงควรควบคมขอมลแตละหนาใหมปรมาณพอเหมาะ เพอใหผใชไมตองรอนาน 14.3 การก าหนดสของตวอกษรและสพน ปกตเอกสารเวบเพจสามารถใชรปภาพ ส และพนหลงเขามาชวยใหนาสนใจไดมาก การวางสจะตองสอดคลองกบการดหรอการอานงาย ดแลวสบายตา บางแหงเนนสสนบงบอกถงอารมณ เชน บางเวบเพจทตองการแสดงถงความโดดเดน เชนรปแบบทกาลงไดรบความนยม อาจใชสพนเปนสแดงเขมผสมดา หรอบางสวนควรกาหนดสพน เพอใหรายการทงหมดทเปนรปภาพหรอตวอกษรดโดดเดน ขอควรระวงอยางยงในการใชส คอ ระวงไมใหรปภาพหรอขอความใกลเคยงกนจนกลนหายหรออานยาก หากมขอความทตองการใหอานจานวนมาก ไมควรใชสพนหลงททาใหการอานหนงสอดยาก ควรกาหนดสพนแบบสเขมเพอเนนรายการเมนใหโดดเดน การใชสตวอกษรกบสพนทาใหอานงาย ควรมการจดคสตวน อกษรขาว พนสนาเงน อกษรเหลองพนสนาเงน อกษรเขยวพนสมวง อกษรเหลองพนสเขยว 14.4 การใชตวอกษรในเวบเพจ

55

รปแบบและขนาดตวอกษร เปนองคประกอบสาคญในการออกแบบเวบเพจ การเลอกตวอกษรแบบเรยบสภาพ หรอดเดนสะดดตา สอดคลองกบองคประกอบอน ๆ และเนอหา ตลอดจนจดประสงคของเวบเพจนน ๆ เมอจะเปนเอกสารทมเนอความทวๆไป จะตองมวธการหรอเทคนคประกอบดวย เชน มพาดหวขอหลก พาดหวขอยอย มการเนน เลอกใชตวอกษรตองมความกลมกลน ไมใหเกดความไมแนใจ หรอทาใหดเปนของตลก 14.5 ลกษณะโครงสรางของตวอกษร มความยาวงายตางกน จากการศกษาวเคราะหความยากงาย ของตวอกษรไทย 10รปแบบของนกเรยนชนประถมศกษา โดย สรสห ฉงถน (253) พบวาความคนเคยกบตวอกษรแบบใด ทาใหสามารถอานตวอกษรนนไดงายขน วงสอดคลองกบคากลาวของคอสกย(Thomas , koskey, 1956 , p.5) ซงไดเสนอแนะวา ความยากงาย ความคนเคยเปนสงสาคญและชวยใหเสนอสงทตองการไดงายขน ทงในการอานของผอานและงายในการจดทาดวย ตวอกษรทอานไดงาย คอ อกษรตวหนาและมหว เชน มานพ 2 จากการทมความแตกตางระหวางแตละตวอกษรอยางชดเจน อกษรทมโครงสรางคลายคลงกนของตวอกษรแตละตวในแบนนๆ อาจสรางความสบสนใหกบผอาน ซงสอดคลองกบผลการวเคราะหของแกรนส (Graver, 1967.pp. 83-494) ทพบวาตวอกษรทมความคลายคลงกนในเรองรปราง กอใหเกดความยงยากในการอานมากทสด ตวอกษรทใชสามารถกาหนดในการเขยนเวบเพจ หรอใหผใชกาหนดดวยโปรแกรมเวบบราวเซอรในภายหลงกได และบางครงอาจประสบปญหาทเวบบราวเซอรบางรนไมสามารถอาน อกษรไทยบางแบบ(Font) ได ดงนนการจดเวบเพจจงควรทดลองเปดอานดวยเวบบราวเซอรหลาย ๆ ตว โดยเฉพาะการจดทาเวบ ใหเวบบราวเซอรทไดรบความนยมสามารถอานเวบทสรางขนได

14.6 สงทชวยอ านวยความสะดวก การมแผนผงลาดบหวขอ ตลอดจนการออกแบบตวไอคอนและกราฟกตางๆ ทจะชวยใหผใชรวาขอมลทตองการอยสวนใดของเวบ ศพทนยามเฉพาะ ชอยอและ FAQ (คาถามทถกถามบอย) “Frequently Asked Questions” เปนสวนทชวยอานวยความสะดวกและไขขอปญหาใหกบผใชไดมาก สวนกลมผใชทมความชานาญ มกตองการใหเวบมขอมลททนสมยและถกตองชดเจน สามารถเรยกคนไดอยางรวดเรว 14.7 รปแบบทเปนสากล นอกจากนยงควรคานงถงรปแบบทเปนสากล เนองจากการเผยแพรขอมลบนเครอขายเวลดไวดเวบ มผอานหลายเชอชาตภาษา ดงนนจงควรเลยงคาเฉพาะทไมเปนทเขาใจ โดยทวไปหรอตวยอทดลมเคลอ เชนตวยอของวนเดอนป “3/4/97” ผใชบางประเทศจะเขาใจวาเปนวนท 3 เมษายน ค.ศ. 1997 เวลดไวดเวบเพจ แตกตางจากหนงสอและสงพมพทวๆ ไป ตรงทมการเชอมโยงขอมลแบบ ไฮเปอรลงค ทาใหผอานอานหรอผใชสามารถเขาถงขอมลไดอยางรวดเรวตรงเปาประสงค มความเปนอสระในการเลอนชม และเขาถงขอมลมากกวาหนงสอหรอสงพมพทวไป สวนตนและสวนทายของเวบเพจ จงมกมขอมลและรายละเอยดเพมมากกวาสงพมพทว ๆ ไป เชน มลขสทธ ผจดทา และวนทของการจดทาหรอ

56

นาเสนอ อยทสวนลางขงทกหนา เพราะเวบเพจหนานนอาจเปนพยงหนาเดยวทผใชเขามาดและขอมลเหลานจะเปนสวนทผอานสามารถนาไปอางองไดเมอนาขอความในเวบเพจไป การระบชอหนอยงานและผจดทาเวบเพจ เปนสวนหนงทสาคญทจะชวยใหผอานรวาไดรบขอมลขาวสารจากใคร หากสงสยหรไมแนใจในขอมลหรอตองการขอมลเพมเตมจะสามารถตดตอกบผจดทาเวบไซตได การก าหนดหวขอเรอง การกาหนดหวขอเรองของเวบทชดเจนตรงประเดนสมพนธกบเนอหาหรอขอมลทนาเสนอเปนเรองสาคญ เพราะตามปกตแลวหวขอเรองเปนสงแรกทผใชตองการดในหนาโฮมเพจและมองเหนเปนสงแรก ถาผอานตองการเกบ URL ไวหวขอเรองจะปรากฏใน “Bookmark” หรอ “Favorite” การกาหนดหวเรองไมตรงกบเนอหาหรอคลมเคลอ หรอไมใชภาษาทปกต อาจสรางความสบสนในการเรยกดเวบเพจในครงตอๆ ไปไดขนาดความกวางของหนากราฟก

พนทบนหนาจอคอมพวเตอร นนแตกตางจากหนงสอและวารสารสวนใหญ ดงนน ความผดพลาดในการออกแบบเวบเพจทมกเกดขน คอการขยายสวนของหนาเวบเพจเกนกวาทผดเวบเพจจะดไดจาดขนาด 14-15นว จงตองกาหนดใหพอดกบการกาหนดขนาดหนาจอของผใชซงสวนใหญกาหนดเปน 800x600 การใชภาพแบบสไตลซด สไตลชต คอระบบทชวยกาหนดลกษณะการจดรปแบบ เชน ขนาดฟอนต รปแบบฟอนต ลฟอนต ความกวางของฟอนต ระยะหางระหวางบรรทด การและยอหนาในรปแบบของการสรปไวสวนบนของเอกสาร HTML หรอในไฟล สไตลซตทแยกไวตางหาก การใชรปแบบสไตลซตชวยลดการใชแทกซทวบซอนตลอดทงเอกสาร สะดวกในการแกไขเปลยนแปลง เพาระขอมลการจดรปแบบถกแยกเกบไวเปนสวนหนง 15. ขนตอนการจดท าเวบเพจ ธวชชย ศรสเทพ (2544,หนา 31) ไดกลาวถงกระบวนการพฒนาเวบไซต โดยทกระบวนการพฒนาเวบไซตนน จะตองมกระบวนการ13 ขนตอน ดงน 1. กาหนดจดเปาหมายและสารวจความพรอม 2. ระบกลมผใชและศกษาความตองการ 3. สารวจการแขงขนและเรยนรผแขง 4. สรางกลยทธการออกแบบ 5. หาขอสรปขอบเขตเนอหา 6. จดระบบขอมล . จดทาโครงสรางขอมล 8. พฒนาระบบเนวเกชน 9. ออกแบบลกษณะหนาตาเวบไซต 10. พฒนาเวบตนแบบและขอกาหนดสดทาย

57

11. ลงมอพฒนาเวบไซต 12. เปดตวเวบไซต 13. ดแลและพฒนาอยางตอเนอง เนองจากในปจจบนเทคโนโลยสารสนเทศไดเปนทนยมใชกนอยางกวางขวาง และผใชงานกสามารถเขาถงเครอขายอนเทอรเนตกนไดสะดวกมากขน จงไดมผนยมสรางเวบไซตกนอยางแพรหลาย โดยวตถประสงคสวนใหญจะเปนการประชาสมพนธองคกรหรอหนวยงาน ซงในการสรางและพฒนาเวบไซตทดและมคณภาพนนจะตองศกษาวธการและคานงคณสมบตของเวบไซตทด จะทาใหการพฒนาเวบไซต นนคณภาพ 16. หลกการออกแบบเวบเพจทด การจดทาเวบเพจขนมาสกหนานน นอกจากนาเสนอเนอหาแลวแลวจาเปนอยางยงทจะตองคานงถงหลกการออกแบบเวบเพจทด การจดทาเวบนนจะตองมทงสองศาสตรและศลป ในสวนของศาสตรนน คอจะตองมความรความเขาใจเกยวกบภาษาHTML ทใชในการสรางเวบเพจหรอโปรแกรมทใชในการสรางเวบเพจ เชน Macromedia Dreamweaver เปนตน และในสวนของศลปนนเปนสงทถามการจดรสาคญเชนเดยวกนเพราะถามการจดรปแบบของเวบเพจทนาสนใจแลวสรางความรสกประทบใจใหกบผทเขามาใชบรการเวบไซตไดเปนอยางด ทงนนอกจากผชมจะไดรบสาระความรทเปนประโยชนแลวยงไดรบความเพลดเพลนดวย แตในทางตรงกนขามถาหากการออกแบบเวบเพจนนขาดการคานงถงหลกการออกแบบ ขาดการวางแผนในการออกแบบทดนน โอกาสทผเขามาใชบรการจะกลบเขามาเยยมชมอกครงยอมเปนไปไดยาก เพราะฉะนนการออกแบบเวบเพจนนจะตองคานงถงหลกการออกแบบเวบเพจทดดวย หลกการออกแบบเวบเพจทดมดงตอไปน 1. ความเปนเอกลกษณ (Identity) การออกแบบตองคานงถงลกษณะขององคกร เนองจากรปแบบของเวบไซตสามารถสะทอนถงเอกลกษณและลกษณะขององคกรนนได เวบไซตของธนาคารจงไมควรจะดเหมอนกบสวนสนกการใชชดส , ชนดตวอกษร, รปภาพและกราฟก จะมผลตอรปแบบของเวบไซตอยางมาก ผออกแบบจงตองเลอกใชองคประกอบเหลานอยางเหมาะสม 2. ความนาเชอถอ ไดกลาวถงการออกแบบเวบไซตวา ควรออกแบบใหดนาเชอถอ การออกแบบอยางประณตจะทาใหผใชเชอถอในสารสนเทศทนาเสนอบนเวบไซต ในขณะเดยวกนเวบไซตทออแบบอยางไมพถพถน เชนเวบเพจทเตมไปดวยการพมพทผดพลาด เปนตน กทาใหผใชหมดความเชอถอไดเชนกน นอกจากนยงควรทดสอบการทางานใหมความนาเชอถอดวย ทงในขณะทออกแบบและเมอนาออกใชงานแลว เชน การทดสอบการทางานของลงคตางๆ ทงภายในและภายนอกวาไมมลงคเสย และเนองจากการเปลยนแปลงบนเวบเกดขนอยางรวดเรว การทดสอบวาการเชอมโยงไปยงเนอหาภายนอกนนมการเปลยนแปลงไปอยางไรหรอไม จงเปนสงจาเปนมาก 3. ความเปนเอกภาพ (Unity) ในการออกแบบผออกแบบจะตองคานงถงงานทงหมดใหอยในหนวยงานเดยวกนเปนกลมเปนกอน หรอมความสมพนธกนทงหมดของงานนนๆ คณสมบตในการสรางความสมาเสมอตลอดทวทงเวบไซต (Consistency) คอ การออกแบบทสามารถสรางความสมาเสมอใหกบเวบไซตได

58

โดยใชรปแบบเดยวกนตลอดทงไซต เนองจากผใชจะรสกกบเวบไซตวาเปนเสมอนสถานทจรง ถาลกษณะของแตละหนาในเวบไซตเดยวกนกนนนแตกตางกนมากผใชกจะเกดความสบสนและไมแนใจวากาลงอยในเวบเดออมหรอไม ดงนนรปแบบของหนา , สไตลของกราฟกระบบเนวเกชน และโทนสทใชควรจะมความคลายคลงกน ใหเปนมาตรฐานเดยวกนตลอดทงเวบไซต เพอเปนเอกลกษณใหผใชสามารถจดจาลกษณระของเวบไซตไดยงขน 4. ลกษณะนาสนใจ (Visual Appeal) 4.1 ภาพเคลอนไหว เปนสงทดงดดความสนใจไดเปนอยางด แตจะตองใชอยางจาจดและระมดระวง เพราะการทเราใชสงทเคลอนไหวในหนาเวบมากเกนไปนน จะทาใหมจดสนใจบนหนาจอมากมายจนผใชตดสนไดลาบากวาสงไหนสาคญกวากน 4.2 การเนน การจดทาเวบไซตนน ผออกแบบจะตองใหความสาคญในการเนนความรสกอนไดแก 4.2.1 จดเนนหรอจดสาคญ ในการจดทงหมดจะตองมการเนนจดสนใจใหเหนชดกวาสงอนๆ เพอใหเกดจดประทบใจอนดบแรก 4.2.2 จดรอง ผออกแบบจะตองมเจตนาทจะเนนจดทมความสาคญรองมาใหเปนอนดบท 2 หรอ 3 ตามความสาคญทจะไมแขงหรอเดนขนมาเทากบจดเนน ในการเนนทจะใหเกดจดเดนจดรอง อาจทาไดหลายวธ เชน เนนดวยเสน ขนาด ส นาหนก ผว 4.3 สรางลาดบชนความสาคญขององคประกอบ หลกการสาคญในการออกแบบหนาเวบอยางหนงกคอ สรางลาดบชนความสาคญขององคประกอบตางๆ ภายในหนาเวบ เพอเนนใหเหนวาอะไรเปนเรองสาคญมาก สาคญรองลงมาไปหรอสาคญนอยตามลาดบ การจดระเบยบขององคประกอบอยางเหมาะสม จะชวยแสดงถงความสมพนธระหวางองคประกอบตางๆ ในหนาเวบได ในการออกแบบจงควรใหความสนใจกบปจจยเหลานดวย ขนาดเปรยบเทยบขององคประกอบตาง ๆ ในหนาเวบจะชวยสอความหมายถงความสาคญของสงหนงตอสงอนๆ โดยองคประกอบทมขนาดใหญยอมสามารถดงดดความสนใจของผใชไดกอน และยงแสดงถงความสาคญทมเหนอองคประกอบขนากเลก 4.4 สและความแตกตางของส แสดงถงความสาคญและความสมพนธของสงตางๆ ภายในหนาสทเดนเหมาะสาหรบองคประกอบทมความสาคญมาก สวนองคประกอบทใชสเดยวกนยอมสอความหมายถงความสมพนธทใกลชดและความสาคญทเทาเทยมกน โดยทวไปการใชสทแตกตางกนอยางชดเจนจะสามารถดงดดความสนใจจากผใชใหมองเหนและตอบสนองอยางรวดเรว 5. ความสมดล (Balancing) หมายถงเปนหลกทว ๆ ไปของงานศลปทจะตองดความสมดลของงานนนๆ หรอเปนการจดวสดสงของนทรรศการทมองแลวใหความรสกสมดลคอ ไมเอยงหรอหนกไปดานใดดานหนงเกนไป ความรสกทางสมดลอาจเกดไดจากองคประกอบตางๆ เชน จากขนาด นาหนก ความหนาแนน ส ลกษณะตาง ๆ ดงกลาวอาจแบงได 3 ลกษณะคอ 5.1 ความสมดลในลกษณะเทากน คอมลกกษณะเทากนทงวายขวา ดงายและเขาใจงาย ใหความรสกนงเฉยและคงท

59

5.2 ความสมดลในลกษณะทไมเทากน คอ มความสมดลในตวเองไมจาเปนตองเทากน แตใหความรสกทสมดลกนในลกษณะนอาจเกดจากความแตกตางกนทางวสด ขนาด ผว และเงา หรอส 5.3 ความสมดลในลกษณะจดศนยถวง มกใชในการออกแบบใดๆทเปนวสด 3 มต 6. ความแตกตาง (Contrast) เปนการจดทมความประสงคใหมการขดแยง เพอแกปญหาความซาซอน ความจาเจ หรอเบอหนายจากการจดลกษณะทานองเดยวกนหมด ไมมลกษณะตนเตนแอบแฝงอย ดงนนการออกแบบโดยอาศยหลกความแตกตางโดยการทาใหมบางสวนหรอหลายสวนทาใหเกดความขดแยงกน จะเปนเสนทตดกน ผวเรยบนมนวล ตดดวยผวขรขระ หรอการใชสตรงกนขามกนเพอใหรสกขดแยงกนบางในสวนเลกๆ นอยๆ อนจะชวยใหมชวตชวาเพมขนเพมรสชาตแตกตางกนออกไป 7. ความกลมกลน(Harmony) หมายถงการพจารณาในสวนรวมทงหมด แมจะมบางอยางทแตกตางกนกตาม แตเมอมองดแลวใหความรสกผสมผสานกลมกลนเขากนได 8. ความเรยบงาย (Simplicity)เปนสงทสาคญในการจดทาโฮมเพจ เพราะสงแสดงตางไมวาจะเปนภาพ หรอตวอกษรทสอความหมายชดเจนจะชวยใหผชมเกดความเขาใจไดรวดเรวขนควรระลกเสมอวาจดมงหมายทสาคญของการจดทาโฮมเพจ เพอใหคนดเขาใจเรองราวทเราแสดงการใชภาพ หรอภาพกระพรบ เคลอนไหว ทเกนความจาเปน หรอมลกษณะแปลกพสดารทไมตรงกบเนอหายอมไมเกดผลด ดงนน ความชดเจนเรยบงายจะชวยทาใหโฮมเพจ ดสบายตานาสนใจไมนอย 9. ความสมบรณขนสาเรจ (Finish) เปนการสารวจขนสดทายทจะสรปผลการออกแบบอนมผลโดยตรงตอสวนรวมทงหมด มสวนใดบกพรองไมเหมาะสมตองปรบปรงเปลยนแปลงแกไขโดยใชความคด หรอถายงไมพอใจอาจตองมการทดลองจดตามทคดวาถกตองเหมาะสมแลวกพจารณาเปรยบเทยบกบประสบการณทเคยจดมาแลว เมอไดรสกวาไมดกโยกยายกลบทเดมถอเปนการประลองความคดอนจะเปนผลดแกการจดทาโฮมเพจ(ธวชชย ศรสเทพ ,2544,หนา 16,131,129;พยงศกด ประจศลปะ ,2535,หนา,27-30;ถนอมพร เลาหจรสแสง,2545,หนา153) การออกแบบโฮมเพจ ควรคานงถงหลกการออกแบบ ยน ภวรวรรณ (2540,หนา66-70) ไดกลาวถงการเขยนโฮมเพจ โดยใชหลกกฎพนฐาน 4 ขอ ดงน 1.กฎแหงความแปลกแตกตาง (Contrast) เนนการออกแบบโฮมเพจใหมความแปลก หลกเลยงการใชองคประกอบบนจอภาพทดคลาย ๆ กนอาท เชน การใชตงหนงสอ ส ขนาด ความหนาขอองเสน รปราง ทวางบนจอถาองคประกอบของเนอหาไมใชสงเดยวกนควรสรางใหเหนความแปลกแตกตางอยางชดเจนสงทมความหมายหรอตองการแยกเนนใหเหนชดเจนตองใหเหนความแปลก ความแปลกแตกตางบนจอจงเปนสวนสาคญทใชความนาสนใจไดเปนอยางด 2. กฎการยาซา (Repetition) ในการออกแบบโฮมเพจควรมรปแบบทเปนแบบแผน การหารปแบบ การใหส การสรางรปราง การกาหนดพนหลง ความสมพนธของระยะหาง ความหมายของตวอกษร เสน ขนาดจะตองมลกษณะสอดคลองกนทงหมด วธการสรางโฮมเพจแบบยาซา ชวยเสรมใหดเปนหนงเดยวหรอเรยกวา Unity การออกแบบดวยการยาซา แมวาในการออกแบบเวบเพจจะมผจดทาหลายคนแตจะตองใหมรปรางแบบเดยวกน

60

3. กฎการจดวางแนว (Alignment) การจดวางองคประกอบ ตองมแนวโดยมองวตถทอยขางหนาเสมอ เชน ตวอกษรหรอรปภาพทอยตอนลาง กไมควรลาแนวขององคประกอบทอยดานบนหากอยดานขวากดสงทอยซายมอทมมากอนการวางแถว วางแนว จะทาใหเวบเพจ ดสะอาด ทนสมย และเปนไปในลกษณะไมขดกบความรสกของผอาน 4. ความใกลเคยง ความเกยวเนอง (Proximity) เปนกฎอกขอหนงทจะตองใหวตถตาง ๆ ทอยบนโฮมเพจมความเปนระเบยบเกยวเนองกน การจดวางองคประกอบทเกยวเนองกนเปนกอนทาใหมองเปนไดงาย ไมกระจดกระจายการรวมกลมเปนวธการลดความยงเหยง สรางความเปนระเบยบ การใชไฟลภาพหรอกราฟกทมความหลากหลายแตซา ๆ กน ในสวนตาง ๆ ของแตละหนาเอกสารหรอเวบ ยงชวยใหการเรยกดเวบไซตเปนไปอยางรวดเรวและนาสนใจ เมอโปรแกรมเวบบราวเซอรนาเสนอเวบ เวบบราวเซอรจะอานไฟลภาพหรอการฟกนนๆ ในครงเดยวแลวเกบไวในหนวยความจาของเครองคอมพวเตอรทใช เมอมการใชไฟลภาพนนในครงถดมาภาพกราฟกนนกจะปรากฏขนอยางรวดเรวเพราะโปรแกรมเวบบราวเซอรจะนามาจากหนวยความจาแคชของเครอง