จดท ำโดย

นกศกษำ

คอมพวเตอรศกษำ

ป 4หม 3

Website

รายชอผจดท า

นางสาวชนากานต ตอพนธ รหส 533410080308

นางสาวเบญจพร แสงสวอ รหส 533410080313

นายศราวฒ จนทะมาลา รหส 533410080344

ป 4 หม 3

สาขาคอมพวเตอรศกษา

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

ภาคเรยนท 1 ปการศกษา 2556

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

สงแรกทนกพฒนาเวบควรท าเมอเรมตนพฒนาเวบไซต คอ ก าหนดกรอบกระบวนการท างาน

(Framework) ทแสดงใหเหนถงขนตอนของการพฒนาเวบ และรายละเอยดของงานในแตละขนตอน ตงแต

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

การก าหนดกรอบการท างานจะเปนขนตอนทมความยงยากแตกเปนเครองมอส าคญทชวยใหการพฒนาเวบ

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

ในระหวางการพฒนาเวบ โดยนกพฒนาเวบสามารถยอนกลบมาตรวจสอบงานตามกรอบการท างานใน

ภายหลงไดกรอบการท างานหรอแบบจ าลองกระบวนการ (Process Model) ทใชเพอพฒนาเวบมหลาย

รปแบบ ยกตวอยาง เชน แบบจ าลองกระบวนการในรปแบบ Agile Process (XP, Scrum, DSDM, FDD

และ AM) แบบจ าลองล าดบเชงเสน (Linear Sequential Model : LSM) เปนตน ส าหรบในทนจะขอ

แบบจ าลองกระบวนการทพฒนาขนโดย Jesse James Garrett ซงจ าแนกกระบวนการพฒนาเวบออกเปน

5 ขนตอน ไดแก การสรางกลยทธในการออกแบบ (Strategy Plane)

การก าหนดขอบเขตของขอมล (Scope Plane) การท าโครงสรางขอมล (Structrue Plane) การ

ออกแบบโครงรางเวบเพจ (Skeleton Plane) และการออกแบบรปลกษณของเวบเพจ (Surface Plane)

การสรางกลยทธในการออกแบบ (Strategy Plane) เปนขนตอนการวเคราะหปจจยหลก 3 ประการ คอ

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

มรายละเอยดดงน

- ผใช (User) เปนการวเคราะหความตองการของผใช โดยการศกษาหรอท าการส ารวจจากผใชท

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

ฟงกชนหรอการใชงานรปแบบใดบนเวบไซตทผใชตองการ และปญหาหรอขอบกพรองทเกดจากการใช

งานเวบทไดพบ

- องคกร (Organization) เปนการวเคราะหเปาหมายทางธรกจ (Business Goal) ทงในสวน

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

ขององคกรทจ าเปนตอการออกแบบหนาเวบ เชน โลโก (Logo) แบนเนอร (Banner) หรอการโฆษณา

ประชาสมพนธเวบไซต เหลานจะชวยใหผใชจดจ าเวบไซตไดงายขน

- คแขง (Competitor) เปนการประเมนขอบเขตขอมล รปแบบน าเสนอ และเปาหมายทางการคา

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

เวบของบรษทตอไป

การก าหนดขอบเขตของขอมล (Scope Plane) เปนการสรปขอบเขตของขอมลทควรมบนหนาเวบให

ชดเจนขน เนองจากผออกแบบบางคนอาจมเทคนคน าเสนอขอมลทชนชอบ หรอมแนวทางพฒนาเวบหลาย

วธจนท าใหเกดความสบสนขนตอนนจงเปนการสรปแนวทางพฒนาเวบ โดยพจารณาขอบเขตขอมลให

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

เวบไซตออกเปน 2 ประเภท ดงน

- เนอหา (Content Requirements) เปนขอมลทวไปทน าเสนอใหกบผใชงาน เชน ขอความ

บรรยาย รปภาพ หรอ เสยงเพลง เปนตน

- การใชงาน (Functional Specfications) เปนระบบการท างานหรอการใชงานบนหนาเวบ ซง

มกจะเปนงานทตองมการปฏสมพนธโตตอบกบผใช เขน การบสง E-mail การประมวลผลคาขอมลของ

แบบฟอรม โปรแกรมสนทนาระหวางผใช เปนตน

การจดท าโครงการสรางขอมล (Structrue Plane) ภายหลงจากทไดก าหนดขอบเขตขอมลแลว กเรมตน

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

ดงน

- การออกแบบสวนปฏสมพนธกบผใช (Interaction Design) เปนการออกแบบหนาเวบส าหรบงาน

ทมลกษณะโตตอบกบผใช เชน การสงซอสนคา การกรอกแบบฟอรม และการรบสง E-mail เปนตน

สถาปตยกรรมขอมล (Information Architecture) เปนการก าหนดโครงสรางของเนอหาทงหมดทจะ

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

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

โครงสรางการน าเสนอเนอหาของเวบม 4 ชนดไดแก Linear Structrue, Hierarchical Structure, Grid

Structure และ Network Structure

1. โครงสรางเชงเสน (Linear Structrue) เปนโครงสรางเนอหาทจดเรยงล าดบหนาเวบเพอเขาถง

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

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

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

เพราะตองผานหนาเวบทไมจ าเปนหลายขนตอน

2. โครงสรางแบบล าดบขน (Hierarchical Structure) เรยกอกชอหนงวา “โครงสรางตนไม (Tree

Structure) ” เปนโครงสรางทนยมใชงาน โดยจดล าดบการเขาถงขอมลตามความสมพนธจากหวขอใหญ

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

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

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

3. โครงสรางแบบตาราง (Grid Structure) เปนโครงสรางเนอหาทเพมเสนทางการเชอมโยงขอมล

มากขน เพอใหการเขาถงเวบเพจมความยดหยน กลาวคอ ผใชสามารถเปลยนทศทางการเขาถงผานขอมล

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

ความซบซอนสง และตองระวงผใชหลงเสนทางการเชอมโยงดวย

4. โครงสรางเครอขาย (Network Structure) เปนโครงสรางเนอหาทมความยดหยนในการเขาถง

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

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

ผออกแบบก าหนดใหกบผใชงาน แตขอเสย คอ การออกแบบมความซบซอนมาก จงตองอาศยความ

เชยวชาญของผออกแบบสง

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

กระบวนการในการสรางและออกแบบเวบมกระบวนการพนฐานอยดวยกน 5 ขนตอนคอ

1. การวางแผน (Planning) เปนขนตอนทผสรางเวบจะตองรวบรวมขอมลทตองการจะน า

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

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

ใช ตองการมกระดานขาว หองสนทนา ฯลฯ รวมถงขนตอนและกระบวนการในการบ ารงรกษาอยางเปน

ระบบ

การวางแผนเบองตนของการสรางเวบส าหรบ Dreamweaver คอ

- ก าหนดพนทจดเกบเวบในเครองคอมพวเตอร

- ก าหนดพนทตดตงเวบเมอสรางเสรจ

2. การออกแบบ (Design) เปนขนตอนทน าขอมลและแผนทวางไวไปปฏบต โดยการลงมอปฏบตโดย

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

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

- การเลอกเนอหา เปนสวนส าคญของการเรมตนสรางเวบเพจ ผเยยมชนแตละกลมจะคนหาขอมลท

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

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

หนาแนน ผชมอดอด ไมดงดดความสนใจ

3. การพฒนา (Development) เปนขนตอนทตอเนองจากการออกแบบและการสราง โดย

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

เราความสนใจ และเพมเตมเทคนคตาง ๆ ของโปรแกรมสนบสนนการสรางเวบ

4. การตดตง (Publishing) เปนขนตอนทจะน าเอาเวบทไดสรางขนเขาไปตดตงในเวบเซอรเวอรเพอใหแสดง

ผลไดในระบบอนเทอรเนต หรอจะเรยกวา การอบโหลด (Up load) ซงเปนขนตอนทจะตองด าเนนการอย

เสมอเมอสรางเวบเสรจ

5. การบ ารงรกษา (Maintenance) เปนขนตอนประเมนผลและตดตามผลการตดตงเวบไซต

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

อบเดท (Up date

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

(เสนย แดงวง 2525 ; วจตร อาวะกล 2526)

ความหมายของการประชาสมพนธ

การประชาสมพนธมกจะถกเขาใจสบสนกบการโฆษณา คนจ านวนมากมกจะเขาใจวาการโฆษณาและ

การประชาสมพนธมความหมายเหมอนกนจนบางทเราเรยกการโฆษณาและการประชาสมพนธเปน

“การโฆษณาประชาสมพนธ” ซงในความเปนจรงการโฆษณาและการประชาสมพนธมความแตกตางกน

พอสมควร ดงน

การโฆษณา (Advertising) เปนการกระท าการใดๆ อนเปนการชกจงใจตอกลมเปาหมายเฉพาะโดย

มวตถประสงคเพอการจ าหนายสนคาหรอบรการ ซงอาศยสอมวลชน (Mass media) ในการสงผานขอมล

ขาวสารซงตองเสยคาใชจายและมไดเปนไปในรปสวนตว

การประชาสมพนธ (Public Relation) เปนการตดตอสอสารจากองคการไปสสาธารณชนทเกยวของ

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

เชอถอ ภาพลกษณ ความร และแกไขขอผดพลาดในเรองใดเรองหนง

ลกษณะของการประชาสมพนธ

ลกษณะของการประชาสมพนธมดงตอไปน

การประชาสมพนธเปนการสอสารสองทาง (Two-way communication) เปนการสอสารจากผสงไป

ยงผรบเกยวกบขาวสารขององคการทตองการสอสารใหสาธารณชนรบทราบและเขาใจ และยงเปน

การสอสารยอนกลบจากผรบคอ สาธารณชนไปยงองคการเกยวกบความคดเหนทเกยวกบองคการ

การประชาสมพนธอาจมกลมเปาหมายหลายกลม (Multiple target group) เชน พนกงาน ลกคา ผถอ

หนชมชน รฐบาล หรอหนวยงานตางๆ เปนตน ทงนขนอยกบวตถระสงคในการประชาสมพนธวาตองการ

ประชาสมพนธไปยงกลมเปาหมายใดบาง

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

จรงเพอมงใหเกดความเชอถอและปฏบตตามดวยความสมครใจ

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

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

กจการอยในระยะยาวได

การประชาสมพนธเปนการด าเนนงานอยางเปนระบบ โดยจะมการวางแผนควบคมและประเมนผล

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

ประสทธผล

องคประกอบของการประชาสมพนธ

ถาหากพจารณาจากกระบวนการสอสารเพอการประชาสมพนธแลว กสามารถจ าแนกองคประกอบ

ส าคญของการประชาสมพนธออกเปน 4 ประการ คอ

1. องคกร สถาบนหรอหนวยงาน

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

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

รฐวสาหกจ องคการสาธารณกศล และธรกจเอกชน เชน รฐบาล กระทรวง ทบวง กรม หนวยราชการ

หรอหนวยรฐวสาหกจตาง ๆ มลนธ บรษทหางราน ธนาคารพาณชย เปนตน

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

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

รปภาพ สญลกษณ หรอเครองหมาย ทสามารถสอสารความเขาใจได

3. สอประชาสมพนธ

ไดแก เรองราวทเปนเนอหา สาระ รปภาพ สญลกษณ หรอเครองหมาย อาจจะเปนสอค าพด เชน การ

สนทนา การประชม การสมมนา การอภปราย การปาฐกถา ฯลฯ สอสงพมพ เชน จดหมาย บตรอวย

พร แผนปลว หนงสอ วารสาร รปลอก ฯลฯ หรอสอภาพและเสยง เชน ถายภาพ สไลด แผนโปรงใส

วทยกระจายเสยง วทยโทรทศน สไลดมลตวชน เทปเสยง ภาพยนตร คอมพวเตอร ฯลฯ ซงเปนสอท

สามารถสอสารความเขาใจได การเลอกใชสอในการประชาสมพนธมความส าคญ ถาเปนบคคลภายในอาจ

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

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

4. กลมประชาชนเปาหมายในการประชาสมพนธ

ไดแก กลมบคคลหรอประชาชนทเปนเปาหมายในการสอสารประชาสมพนธครงนน ๆ ดงน

4.1 กลมประชาชนภายใน หมายถง กลมบคลากร เจาหนาท พนกงาน ขององคกร สถาบนหรอหนวยงาน

4.2 กลมประชาชนภายนอก หมายถง กลมบคคลทอยภายนอกองคกร สถาบนหรอหนวยงาน อนไดแก

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

ประชาชนทวไป

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

1. หนาทของเวบไซต (Authority) เกยวกบหนาทของเวบทสรางขนนนตองดวาใครหรอผใชเวบน

อะไรคอความถกตอง เหมาะสม ชอบธรรม ระหวางความสมพนธของเรองและการรบประกนคณภาพของ

เวบเพจนทมตอผชม

2. ความถกตอง (Accuracy) แหลงขอมลและขอเทจจรงทน ามาสรางเวบสามารถแยกแยะเปน

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

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

นนชดเจน

4. ความเปนปจจบน (Currency) เวบเพจทสรางขนนนตองแสดงวนททเปนปจจบนดวย เชน บอกวา

สรางเมอใดและมการแกไขครงหลงสดเมอใด

5. ความครอบคลม (Coverage) การสรางเวบไซตตองใหตรงกบจดสนใจ หวเรองมความชดเจน

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

แหลงอางอง : ประเภทและสวนประกอบของเวบไซต.(2554).

http://www.websuay.com/th/web_page/web_component

การประเมนเวบไซด

การออกแบบและพฒนาเวบไดเพมขนโดยล าดบและนบวนจะยงทวจ านวนขน ในปจจบนมเวบเพจ

ออนไลนในระบบอนเทอรเนตนบรอย ๆ ลานเวบ แตมค าถามส าคญทตองมาหาค าตอบกคอ เวบแบบไหน

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

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

แนนซ อเวอรฮารท (Everhart, 1996) ภาควชาบรรณารกษและสารสนเทศศาสตร มหาวทยาลยเซนตจอหน

รฐนวยอรค สหรฐอเมรกา ซงก าหนดระดบการใหคะแนนเอาไวอยางนาสนใจและนาจะน ามาขยายความ

เพอประโยชนในการประเมนคณภาพของเวบส าหรบนกออกแบบและพฒนาเวบ รวมถงผท เกยวของใน

การจดสารสนเทศผานระบบอนเทอรเนต จะไดมแนวทางในการตรวจสอบและประเมนคณภาพทสามารถ

อธบายเหตผลได

โดยแนวคดของอเวอรฮารท จะมดวยกน 9 ดานคอ

1. ความทนสมย (Currency)

2. เนอหาและขอมล (Content and Information)

3. ความนาเชอถอ (Authority)

4. การเชอมโยงขอมล (Navigation)

5. การปฏบตจรง (Experience)

6. ความเปนมลตมเดย (Multimedia)

7. การใหขอมล (treatment)

8. การเขาถงขอมล (Access)

9. ความหลากหลายของขอมล (Miscellaneous)

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

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

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

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

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

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

เปนการโฆษณาผานทางสอหนงสอพมพโดยการลงโฆษณาในหนงสอพมพทวๆไปเพอใหคนรจก

และเขาถงไดโฆษณาผานทางบลบอรดตามแหลงชมชน ถนนใหญๆ หรอแหลงทมคนผานในแตละ

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

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

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

เสอเพอใหตดตาคนทพบเหนการโฆษณาผานถงกระดาษ ถงพลาสตก หรอแพคกงขางขวดหบหอ

ตางๆ

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

ตองการใหผลลพธของการคนหาปรากฏอยในล าดบตนๆ อาจตองเสยคาใชจายเพมขนอก ไดแก

yahoo.com,mickinley.com และ google.com

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

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

sanook.com,hunsa.com,hotbot.com เปนตน

การเรยนการสอนผานเวบ (Web-Based Instruction)เปนการผสมผสานกนระหวางเทคโนโลย

ปจจบนกบกระบวนการออกแบบการเรยนการสอน เพอเพมประสทธภาพทางการเรยนรและแกปญหาใน

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

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

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

เครอขายอนเทอรเนตซงไดรบความนยมอยางแพรหลายในปจจบน เรมเขามาเปน ทรจกในวงการศกษาใน

ประเทศไทยตงแต พ.ศ. 2538 ทผานมาเวบไดเขามามบทบาทส าคญทางการศกษาและ กลายเปนคลงแหง

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

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

ทางดานเวลาและสถานท (ถนอมพร เลาหจรสแสง.2544)

การเรยนการสอนผานเวบ (Web-Based Instruction) เปนการผสมผสานกนระหวางเทคโนโลย ปจจบนกบ

กระบวนการออกแบบการเรยนการสอน เพอเพมประสทธภาพทางการเรยนรและแกปญหาในเรองขอจ ากด

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

การจดสภาพแวดลอมทสงเสรมและสนบสนนการเรยนการสอน ซงการเรยนการสอนทจดขนผานเวบนอาจ

เปนบางสวนหรอทงหมดของกระบวนการเรยนการสอนกได

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

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

การศกษา การจดการเรยนการสอนผานเวบ (Web-Based Instruction) มชอเรยกหลายลกษณะ เชนการจดการ

เรยนการสอนผานเวบ(Web-Based Instruction) เวบการเรยน(Web-Based Learning) เวบฝกอบรม (Web-

Based Training) อนเทอรเนตฝกอบรม (Internet-Based Training) อนเทอรเนตชวยสอน(Internet-Based

Instruction) เวลดไวดเวบฝกอบรม (WWW-Based Training) และเวลดไวดเวบชวยสอน (WWW-Based

Instruction) (สรรรชต หอไพศาล. 2545) ทงนมผนยามและใหความหมายของการเรยนการสอนผานเวบ

เอาไวหลายนยาม ไดแก

คาน (Khan, 1997) ไดใหค าจ ากดความของการเรยนการสอนผานเวบ (Web-Based Instruction)ไววาเปนการ

เรยนการสอนทอาศยโปรแกรมไฮเปอรมเดยทชวยในการสอน โดยการใชประโยชนจากคณลกษณะและ

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

อยางมากมายและสนบสนนการเรยนรในทกทาง

คลารก (Clark, 1996) ไดใหค าจ ากดความของการเรยนการสอนผานเวบวา เปนการเรยนการสอนรายบคคล

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

บราวเซอรสามารถเขาถงขอมลทตดตงไวไดโดยผานเครอขาย

รแลน และกลลาน (Relan and Gillani, 1997) ไดใหค าจ ากดความของเวบในการสอนเอาไววาเปนการ

กระท าของคณะหนงในการเตรยมการคดในกลวธการสอนโดยกลมคอนสตรคตวซมและการเรยนรใน

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

ประเภทของการเรยนการสอนผานเวบ

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

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

เกยวกบประเภทของการเรยนการสอนผานเวบ ดงตอไปน

พารสน(Parson,1997) ไดแบงประเภทของการเรยนการสอนผานเวบออกเปน 3 ลกษณะคอ

1.เวบชวยสอนแบบรายวชาอยางเดยว (Stand - Alone Courses) เปนรายวชาทมเครองมอและแหลงทเขาไป

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

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

เขามาใชจรงแตจะมการสงขอมลจากรายวชาทางไกล

2.เวบชวยสอนแบบเวบสนบสนนรายวชา (Web Supported Courses) เปนรายวชาทมลกษณะเปนรปธรรมท

มการพบปะระหวางครกบนกเรยนและมแหลงใหมาก เชน การก าหนดงานทใหท าบนเวบ การก าหนดให

อาน การสอสารผานระบบคอมพวเตอร หรอการมเวบทสามารถชต าแหนงของแหลงบนพนทของเวบไซต

โดยรวมกจกรรมตางๆ เอาไว

3.เวบชวยสอนแบบศนยการศกษา (Web Pedagogical Resources) เปนชนดของเวบไซตทมวตถดบเครองมอ

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

เขามาใชกจะมสอใหบรการอยางรปแบบอยางเชน เปนขอความ เปนภาพกราฟก การสอสารระหวางบคคล

และการท าภาพเคลอนไหวตางๆ เปนตน

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

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

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

วามเนอหาอะไรบางภายในเวบไซต และแตละหนาเวบเพจนนมการเชอมโยงกนอยางไร

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

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

1. รวบรวมขอมล เนอหาทจะน ามาสรางเวบ แลวน ามาจดหมวดหม และล าดบเนอหากอนหลง

(ตดสวนทไมจ าเปนออก) แลววางโครงสรางเวบไซตในภาพรวมทงหมด

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

การเชอมโยงสวนตางๆ อยางชดเจน

3. ออกแบบหนาแรกของเวบไซต หรอทเรยกวา Home page

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

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

ขนทสองออกแบบการเชอมโยงไฟล

ขนทสามออกแบบหนาโฮมเพจ (Home Page)

วธการออกแบบหนาตาของเวบไซตอย 3 รปแบบ คอ

ออกแบบหนาเวบไซตทเนนการน าเสนอเนอหามากๆ

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

หลก เพอใสขอความแบบหนาสารบญ และรปภาพทเปนชนเลกๆได

ออกแบบหนาเวบไซตทเนนภาพกราฟกเปนหลก

เปนการออกแบบเวบไซตทมภาพกราฟกทสวยงามถกจดวางไวในหนาโฮมเพจ ซงแตกตางจากขอ

แรกมากเพราะจะไมคอยมขอความในเวบเพจ แตจะเปนการ Link ทภาพเพอเขาไปยงหนาเวบเพจอนๆ

ตอไป การสรางเวบไซตแบบนจะใหโปรแกรม Photoshop ส าหรบตกแตงภาพกอนน าไปใชบนหนาแวบ

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

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

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

ดวยภาพกราฟกทน ามาประกอบและใสเนอหาไดอยางสมบรณดวย

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

1. เวบไซตสวนตว (Personal website) เปนเวบทสรางขนเพอเผยแพรขอมลสวนตว เชน ขอมล

เกยวกบสวนตว การศกษา การงาน ความสนใจ เปนตน

2. เวบไซตเพอธรกจการคา (Promotional website) เวบไซตนมจดประสงค เพอการคาขายสนคา

การโฆษณาสนคา การสงเสรมการขาย ในเวบไซตจะมขอมลของสนคา ราคาและการบรการตางๆ ซงใน

ปจจบนตลาดประเภทนก าลงใชกนมากขน

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

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

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

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

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

ชกน าใหเหนคลอยตามในเรองทผสรางตองการ

6. เวบไซตเพอการสอน (Instructional website) เปนเวบทสรางขนเปนการสอนโดยเฉพาะเปน

รายวชา (Course) อาจแยกยอยเปนหวเรองเรองยอยๆ กได ส าหรบเวบไซตประเภทนจะจ ากดผใชเฉพาะราย

7. เวบไซตทจ ากดเฉพาะสมาชก (Registrational website) เปนเวบไซตทบรการเฉพาะสมาชก

เทานน ผทจะใชตองลงทะเบยนตามราคาทก าหนดโดยบตรเครดต หรอผานธนาคาร ผใหบรการจงจะให

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

โดยมตวอยางสนคาหรอบรการใหศกษาบางสวนจนพอใจดวย

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

วตถประสงคไวหรอไม โดยทวไปประกอบดวย

1. Domain Name :ชอและทอยของเวบไซตในการเรยกขอมลเวบไซตของทานมาแสดงผล เชน

www.yourcompany.com เปนตน ปจจบนมกจดชอ domain name ใหเปนชอทสอถงสนคาหรอบรการหรอ

เปนชอองคกร และอาศยการท าประชาสมพนธผาน Search Engine และ Web Directory การเลอกใชชอ

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

2. Design & Development : การออกแบบและจดท าเวบไซตโดยทวไปแลวส าหรบเวบไซต

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

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

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

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

ปรมาณผเขาเยยมชมไดในความเปนจรงแลว การเขาถงกลมเปาหมายและเพมปรมาณของผเขาเยยมชมนน

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

3. Content :เนอหาของเวบไซตถอวาเปนสงทส าคญทสดในองคประกอบของเวบไซต เพราะคอสงทผเยยม

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

ละเอยด อกทงจ าตองน าเสนออยางชดเจนอกดวย เชน รปภาพของสนคา หรอสถานทบรการ เปนตน จงจะ

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

อนาคตได

4. Hosting : พนทจดวางและตดตงเวบไซต เปนองคประกอบทส าคญมากไมนอยกวาเนอหาของเวบไซต

(Content) เพราะการเลอกผใหบรการโฮสตงทดมการซพพอรตลกคาทดและรวดเรว เซรฟเวอรมความ

เสถยรภาพสง สามารถตดตอเจาหนาททดแลเซรฟเวอรไดตลอดเวลา คอหวใจส าคญในการเลอกผใหบรการ

ดานน นอกจากความพรอมในการออกแบบและจดท าเวบไซตแลว เรายงมความพรอมอยางยงในการ

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

ตลอดเวลาอนสงผลใหธรกจของลกคามความตอเนองในการท างานอยเสมอ

5. Promotion :การท าประชาสมพนธเวบไซต เปนองคประกอบทส าคญมากอกอยางหนง เมอเราไดจดท า

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

วธการตางผานชองทางอนเตอรเนต เชน Search Engine Submission, Registration Web Directory, Mailing

List, Banner Link Exchange เหลานเปนตน นอกเหนอจากน อาจใชชอ domain name ในการประชาสมพนธ

เวบไซตผานสออน ๆ เชน ในนามบตร, ใบปลวหรอ โบรชวรของบรษท เปนตน

เวบไซต

เวบไซต (องกฤษ: website, web site, Web site) หมายถง หนาเวบเพจหลายหนา ซงเชอมโยงกนผานทาง

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

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

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

ไดแกขอมลทางวชาการ ขอมลตลาดหลกทรพย หรอขอมลสอตางๆ ผท าเวบไซตมหลากหลายระดบ ตงแต

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

เรยกดผานซอฟตแวรในลกษณะของ เวบเบราวเซอร

โฮมเพจ

โฮมเพจ (Home Page) คอเวบเพจหนาแรกซงเปนทางเขาหลกของเวบไซต ปกตเวบเพจทกๆ หนาในเวบ

ไซทจะถกลงค (โดยตรงหรอโดยออมกตาม) มาจากโฮมเพจ ดงนนบางครงจงมผใชค าวาโฮมเพจโดย

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

เปนเสมอนหนารานนนเอง ดงนนจงมกถกออกแบบใหโดดเดนและนาสนใจมากทสด

เวบเพจ

เวบเพจ (Web Page) หมายถง หนาเอกสารของบรการ WWW ซงตามปกตจะถกเกบอยในรปแบบไฟล

HTML (Hyper Text Markup Language) โดยไฟล HTML 1 ไฟลกคอเวบเพจ 1 หนานนเอง ภายในเวบ

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

แตละหนาจะมการเชอมโยงหรอ “ลงค” (Link) กน เพอใหผชมเรยกดเอกสารหนาอนๆ ทเกยวของได

สะดวกอกดวย

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

แบงออกเปน 3 สวน

1. สวนหวของเวบเพจ (Page Header)

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

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

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

นาเชอถอ

- ชอเวบไซต

- เมนหลกหรอลงค (Navigation Bar) เปนจดเชอมโยงไปสเนอหาของเวบไซต

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

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

ตารางขอมล ภาพกราฟก วดโอ และอนๆ และอาจมเมนหลกหรอเมนเฉพาะกลมวางอยในสวนนดวย

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

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

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

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

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

ตดตอกบผดแลเวบไซต, ค าแนะน าการใชเวบไซต เปนตน

สวนประกอบยอยอนๆ ทจ าเปน

1. Text เปนขอความปกต โดยเราสามารถตกแตงใหสวยงามและมลกเลนตางๆ ดงเชนโปรแกรม

ประมวลค า 2. Graphic ประกอบดวยรปภาพ ลายเสน ลายพน ตางๆ มากมาย

3. Multimedia ประกอบดวยรปภาพ ภาพเคลอนไหว และแฟมเสยง

4. Counter ใชนบจ านวนผทเขามาเยยมชมเวบไซตของเรา

5. Cool Links ใชเชอมโยงไปยงเวบไซตของตนเองหรอเวบไซตของคนอน

6. Forms เปนแบบฟอรมทใหผเขาเยยมชม กรอกรายละเอยด แลวสงกลบมายงเวบไซต

7. Frames เปนการแบงจอภาพเปนสวนๆ แตละสวนกจะแสดงขอมลทแตกตางกนและเปนอสระจาก

กน

8. Image Maps เปนรปภาพขนาดใหญทก าหนดสวนตางๆ บนรป เพอเชอมโยงไปยงเวบไซตอนๆ

9. JavaApplets เปนโปรแกรมส าเรจรปเลกๆ ทใสลงในเวบไซต เพอใหการใชงานเวบไซตม

ประสทธภาพมากยงขน

หลกการและทฤษฏการสอสาร

การสอสาร

ชวตเปนเรองของการเรยนรและสงหนงทส าคญและตองมการเรยนรคอ ความสมพนธ หรอ มนษย

สมพนธ เพราะทกสงทกอยางในโลกนมกเปนบทเรยนของกนและกน ถาไมใสใจเรยนรซงกนและกนกจะ

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

โอกาสเรยนรเรองราวและสงใหมๆตามทเราตองการ

ดงนนความส าเรจของมนษยในการด ารงชวตทวไปจงมกมขอก าหนดไวอยางกวางๆวา เราจะตอง

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

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

(Arts) มากกวาศาสตร(Science) ซงกหมายความวา การเรยนรเกยวกบความสมพนธของบคคลแตเพยงอยาง

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

ได

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

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

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

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

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

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

ผรบสารโดยผานชองทางในการสอสารโดยมองคประกอบทส าคญคอ ผสงสาร(Sender) สาร(Message)

ชองทาง(Channel) และตวผรบสาร(Reciever) ซงมกเรยกกนวา SMCR

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

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

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

ท าใหเกดการแสดงออก ท าใหเกดการพกผอนหยอนใจ ท าใหเกดการเรยนร ท าใหเกดก าลงใจ(หา

ภาพประกอบแตละประเภท)

ประเภทของการสอสาร

การสอสารภายในบคคล(Intrapersonal Communication) การคดหรอจนตนาการกบตวเองเปนการ

คดไตรตรองกบตวเองกอนทจะมการสอสาร ประเภทอนตอไป

การสอสารระหวางบคคล(Interpersonal Communication)

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

ในเรองใดเรองหนง

การสอสารกลมยอย(Small-group) Communication)

การสอสารทมบคคลรวมกนท าการสอสารเพอท ากจกรรมรวมกนแตจ านวนไมเกน 25 คน เชนชน

เรยนขนาดเลก หองประชมขนาดเลก

การสอสารกลมใหญ(Large-group Communication)

การสอสารระหวางคนจ านวนมาก เชนภายในหองประชมใหญ โรงภาพยนตร โรงละครชนเรยน

ขนาดใหญ

การสอสารในองคกร(Organization Communication)

การสอสารระหวางสมาชกภายในหนวยงานเพอปฏบตงานใหส าเรจลลวง เชนการสอสารระหวา

เพอนรวมงาน

การสอสารมวลชน(Mass Communication)

การสอสารกบคนจ านวนมากในหลายๆพนทพรอมกน โดยใชสอมวลชน เชน หนงสอพมพ

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

ในเวลาเดยวกน

การสอสารระหวางประเทศ(International Communication)

การสอสารระหวางบคคลทมความแตกตางกนใน เชอชาต ภาษา วฒนธรรม การเมองและสงคม

เชนการสอสารทางการทต การสอสารเจรจาตอรองเพอการท าธรกจ

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

เปนโครงสรางในการจดวางหนาเวบเพจทงหมด เปรยบเสมอนแผนท ทท าใหเหนโครงสรางทงหมดของ

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

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

ทสามารถสรางความส าเรจใหกบผทท าหนาทในการออกแบบและพฒนาเวบไซต (Webmaster) การ

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

และใหอยในมาตรฐานเดยวกน จะชวยใหนาใชงานและงาย ตอการเขาอานเนอหาของผใชเวบไซต

หลกการออกแบบเวบไซต ควรพจารณาดงน

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

2. ศกษาคณลกษณะของผทเขามาใชวากลมเปาหมายใดทผสรางตองการสอสาร ขอมลอะไรทพวกเขา

ตองการโดยขนตอนนควรปฏบตควบคไปกบขนตอนทหนง

3. วางแผนเกยวกบการจดรปแบบโครงสรางเนอหาสาระ การออกแบบเวบไซตตองมการจด

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

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

ๆ จดหมวดหมในเรองทสมพนธกน รวมทงอาจมการแสดงใหผใชเหนแผนทโครงสรางเพอปองกนความ

สบสนได

4. ก าหนดรายละเอยดใหกบโครงสราง ซงพจารณาจากวตถประสงคทตงไว โดยตงเกณฑในการใช

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

5. หลงจากนน จงท าการสรางเวบไซตแลวน าไปทดลองเพอหาขอผดพลาดและท าการแกไขปรบปรง

แลวจงน าเขาสเครอขายอนเทอรเนตเปนขนสดทาย

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

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

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

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

การอานเนอหาของผใช

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

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

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

การเขาสเนอหา (Navigation) ไมวาจะเปนเดนหนา ถอยหลง หากเปนเวบไซตทมเวบเพจจ านวนมาก ควรจะ

จดท าแผนผงของเวบไซต (Site Map) ทชวยใหผใชทราบวา ตอนนอย ณ จดใด หรอเครองมอสบคน (Search

Engine) ทชวยในการคนหาหนาททตองการ

3. การเชอมโยงทด ลกษณะไฮเปอรเทกซทใชในการเชอมโยง ควรอยในรปแบบทเปนมาตรฐาน ทวไปและ

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

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

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

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

จดเรมตนใหม ระวงอยาใหมหนาทไมมการเชอมโยง (Orphan Page) เพราะจะท าใหผใชไมรจะท าอยางไร

ตอไป

4. ความเหมาะสมในหนาจอ เนอหาทน าเสนอในแตละหนาจอควรสน กระชบ และทนสมย หลกเลยงการใช

หนาจอทมลกษณะการเลอนขนลง (Scrolling) แตถาจ าเปนตองม ควรจะใหขอมลทม ความส าคญอยบรเวณ

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

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

เนอหาเทานน นอกจากนการใชรปภาพเพอเปนพนหลง (Background) ไมควรเนนสสนทฉดฉาดมากนก

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

เทคนคตาง ๆ เชน ภาพเคลอนไหว หรอตวอกษรวง (Marquees) ซงอาจจะเกดการรบกวนการอานได ควรใช

เฉพาะทจ าเปนจรง ๆ เทานนตวอกษรทน ามาแสดงบนจอภาพควรเลอกขนาดทอานงาย ไมมสสนและ

ลวดลายมากเกนไป

5.ความรวดเรว ความรวดเรวเปนสงส าคญประการหนงทสงผลตอการเรยนร ผใชจะเกดอาการเบอหนาย

และหมดความสนใจกบเวบทใชเวลาในการแสดงผลนาน สาเหตส าคญทจะท าใหการแสดงผลนานคอการ

ใชภาพกราฟกหรอภาพเคลอนไหว