1. 1
การออกแบบเว็บไซต
ความหมายของเว็บไซต
อเนก ปนศรี (2552 : 9) กลาววา “เว็บไซต หมายถึง แหลงที่เก็บรวบรวมขอมูลเอกสารและสื่อ
ประสมตางๆ เชน ภาพ เสียง ขอความ เปนตน ของแตละหนวยงานบนอินเทอรเน็ต”
เว็บไซตสามารถแบงได2สวน ไดแก (โซนซา, 2549 : ไมปรากฏหนา)
1.โฮมเพจ คือขอมูลหนาแรกของเว็บไซต หรือหนาปกของนิตยสาร ดังนั้นโฮมเพจ ควรมีรูปแบบที่
นาสนใจ สีสันสวยงามมีภาพเคลื่อนไหว และเพลงที่เหมาะสมกับตัวเว็บ แตเนื่องจากไฟลเพลงอาจทําใหโหลด
เว็บไดชา ดังนั้น ปจจุบันจึงไมนิยมใสเพลง แตจะใชภาพเคลื่อนไหวแทน เพราะเปนสวนสําคัญที่จะทําใหผู
เยี่ยมชมเว็บสนใจในตัวเว็บมากขึ้น
2.เว็บเพจ คือรายละเอียดของเว็บแตละหนาตอๆกันไป เหมือนหนากระดาษแตละหนาภายใน
นิตยสารนั่นเอง ในหนาโฮมเพจจะมีลิงคเพื่อเชื่อมโยงไปยังหนานั้นๆดวย เพื่อความสะดวก รวดเร็ว โยอยูใน
รูปแบบไฟล HTML
สรุป เว็บไซต หมายถึง หนาเว็บเพจหลายหนา ซึ่งเชื่อมโยงผานทางไฮเปอรลิงค สวนใหญจัดทําขึ้น
เพื่อนําเสนอขอมูลผานคอมพิวเตอร โดยถูกจัดเก็บไวใน www
การจัดการเรียนการสอนผานเว็บ
1.ความหมายของการจัดการเรียนการสอนผานเว็บ
วรัท พฤกษากลนันท (2548 : ไมปรากฎหนา) กลาววา “การจัดการเรียนผานเว็บ มีลักษณะการเรียน
การสอนที่แตกตางไปจากการเรียนการสอนในชั้นเรียนปกติที่คุนเคยกันดี ซึ่งการจัดการเรียนการสอนแบบ
ดั้งเดิมในชั้นเรียนสวนใหญจะมีลักษณะที่เนนใหผูสอนเปนผูปอนความรูใหแกผูเรียนทําใหผูเรียนไมใฝที่จะหา
ความรู เพิ่มเติม
การจัดการเรียนการสอนโดยการใชเว็บชวยสอนจะมีวิธีการจัดที่แตกตางไปจากการจัดการเรียนการ
สอนตามปกติ เพราะคุณลักษณะและรูปแบบของเว็บเปนสื่อที่มีลักษณะเฉพาะของตนเอง ซึ่งแตกตางไปจาก
การจัดการเรียนการสอนดวยสื่อแบบอื่น ๆ จึงตองคํานึงถึงการออกแบบระบบการสอนที่สอดคลองกับ
คุณลักษณะของเว็บ เชน การสื่อสารระหวางผูเรียนกับครู การสื่อสารระหวางผูเรียนกับผูเรียน ที่กระทําได
แตกตางไปจากการเรียนการสอนแบบเดิม เชน การใชเว็บชวยสอนสามารถสื่อสารกันไดโดยผานเว็บโดยตรงใน
รูปคุยกันในหองสนทนา(Chat Room) การฝากขอความบนกระดานอิเล็กทรอนิกสหรือกระดานขาวสาร
(Bulletin Board) หรือจะสื่อสารกันโดยผานไปรษณียอิเล็กทรอนิกส (e-mail) ก็สามารถกระทําไดในระบบนี้
ความเปนเว็บชวยสอนจึงไมใชแคการสรางเว็บไซตเนื้อหาวิชาหนึ่งหรือรวบรวมขอมูลซักเรื่องหนึ่งแลวบอกวา
เปนเว็บชวยสอน เว็บชวยสอนมีความหมายกวางขวางอันเกิดจากการรวมเอาคุณลักษณะของเว็บ โปรแกรม

2. 2
และเครื่องมือสื่อสารในระบบอินเทอรเน็ตและการออกแบบระบบการเรียนการสอนเขาดวยกัน ทําใหเกิดการ
เรียนรูขึ้นอยางมีความหมายไมเปนเพียงแคแหลงขอมูลเทานั้น (ปรัชญนันท นิลสุข,2543 : 56)
สามารถสรุปหลักการพื้นฐานของการจัดการเรียนการสอนกับการเรียนการสอนผานเว็บ 5 ประการ
ดังนี้ คือ (ครูบานนอก, 2552 : ไมปรากฏหนา)
1.1ในการจัดการเรียนการสอนโดยทั่วไปแลว ควรสงเสริมใหผูเรียนและผูสอนสามารถติดตอ
สื่อสารกันไดตลอดเวลา การติดตอระหวางผูเรียนและผูสอนมีสวนสําคัญในการสรางความกระตือรือรนกับการ
เรียนการสอน โดยผูสอนสามารถใหความชวยเหลือผูเรียนไดตลอดเวลาในขณะกําลังศึกษา ทั้งยังชวย
เสริมสรางความคิดและความเขาใจ ผูเรียนที่เรียนผานเว็บสามารถสนทนาแลกเปลี่ยนความคิดเห็นรวมทั้ง
ซักถามขอของใจกับผูสอนไดโดยทันทีทันใด เชน การมอบหมายงานสงผานอินเทอรเน็ตจากผูสอน ผูเรียนเมื่อ
ไดรับมอบหมายก็จะสามารถทํางานที่ไดรับมอบหมายและสงผานอินเทอรเน็ต กลับไปยังอาจารยผูสอน
หลังจากนั้นอาจารยผูสอนสามารถตรวจและใหคะแนนพรอมทั้งสงผลยอนกลับไปยังผูเรียนไดในเวลาอัน
รวดเร็วหรือในทันทีทันใด
1.2การจัดการเรียนการสอนควรสนับสนุนใหมีการพัฒนาความรวมมือระหวางผูเรียน ความรวมมือ
ระหวางกลุมผูเรียนจะชวยพัฒนาความคิดความเขาใจไดดีกวาการทํางานคนเดียว ทั้งยังสรางความสัมพันธเปน
ทีมโดยการแลกเปลี่ยนความคิดเห็นระหวางกันเพื่อหาแนวทางที่ดีที่สุด เปนการพัฒนาการแกไขปญหาการ
เรียนรูและการยอมรับความคิดเห็นของคนอื่นมาประกอบเพื่อหาแนวทางที่ดีที่สุด ผูเรียนที่เรียนผานเว็บแมวา
จะเรียนจากคอมพิวเตอรที่อยูกันคนละที่ แตดวยความสามารถของเครือขายอินเทอรเน็ตที่เชื่อมโยงเครือขาย
คอมพิวเตอรทั่วโลกไวดวยกัน ทําใหผูเรียนสามารถติดตอสื่อสารกันไดทันทีทันใด เชน การใชบริการสนทนา
แบบออนไลนที่สนับสนุนใหผูเรียนติดตอสื่อสารกันไดตั้งแต 2 คนขึ้นไปจนถึงผูเรียนที่เปนกลุมใหญ
1.3ควรสนับสนุนใหผูเรียนรูจักแสวงหาความรูดวยตนเอง (Active Learners) หลีกเลี่ยงการกํากับ
ใหผูสอนเปนผูปอนขอมูลหรือคําตอบ ผูเรียนควรเปนผูขวนขวายใฝหาขอมูลองคความรูตางๆ เองโดยการ
แนะนําของผูสอน เปนที่ทราบดีอยูแลววาอินเทอรเน็ตเปนแหลงขอมูลที่ใหญที่สุดในโลก ดังนั้นการจัดการเรียน
การสอนผานเว็บนี้ จะชวยใหผูเรียนสามารถหาขอมูลไดดวยความสะดวกและรวดเร็ว ทั้งยังหาขอมูลไดจาก
แหลงขอมูลทั่วโลกเปนการสรางความกระตือรือรนในการใฝหาความรู
1.4การใหผลยอนกลับแกผูเรียนโดยทันทีทันใดชวยใหผูเรียนไดทราบถึงความสามารถของตน อีก
ทั้งยังชวยใหผูเรียนสามารถปรับแนวทางวิธีการหรือพฤติกรรมใหถูกตองได ผูเรียนที่เรียนผานเว็บ สามารถ
ไดรับผลยอนกลับจากทั้งผูสอนเองหรือแมกระทั่งจากผูเรียนคนอื่นๆ ไดทันทีทันใด แมวาผูเรียนแตละคนจะ
ไมไดนั่งเรียนในชั้นเรียนแบบเผชิญหนากันก็ตาม
1.5ควรสนับสนุนการจัดการเรียนการสอนที่ไมมีขีดจํากัด สําหรับบุคคลที่ใฝหาความรู การเรียนการ
สอนผานเว็บเปนการขยายโอกาสใหกับทุกๆคนที่สนใจศึกษา เนื่องจากผูเรียนไมจําเปนจะตองเดินทางไปเรียน
ณ ที่ใดที่หนึ่ง ผูที่สนใจสามารถเรียนไดดวยตนเองในเวลาที่สะดวก จะเห็นไดวาการเรียนการสอนผานเว็บนี้มี
คุณลักษณะที่ชวยสนับสนุนหลักพื้นฐานการจัดการเรียนการสอนทั้ง 5 ประการไดอยางมีประสิทธิภาพ

3. 3
การเรียนการสอนผานเว็บไดมีการดําเนินการอยางจริงจังทั่วโลก โดยเฉพาะอยางยิ่งในกลุม ประเทศ
ทางซีกโลกตะวันตก สําหรับวงการการศึกษาในประเทศไทยเริ่มมีความเปลี่ยนแปลงจากเปนเพียงผูรับขอมูล
และสังเกตการณการเรียนการสอนบนเครือขายเปนความพยายามในการจัดการเรียนการสอนและใชเครื่องมือ
บนเครือขายเวิลดไวดเว็บเสริมในชั้นเรียนปกติ และบางมหาวิทยาลัยที่ดําเนินการเรียนการสอนแบบทางไกล
กําลังดําเนินการที่จะสรางชั้นเรียนเสมือนใหเกิดขึ้นจริง การดําเนินการเรียนการสอนผานเว็บมีรายละเอียด
ดังตอไปนี้ (ใจทิพย ณ สงขลา, 2542 : 67-68)
1.1ความพรอมของเครื่องมือและทักษะการใชงานเบื้องตน ความไมพรอมของเครื่องมือและ การ
ขาดทักษะทางเทคนิคที่จําเปนในการใชเครื่องมือหรือโปรแกรมเปนสาเหตุสําคัญที่กอใหเกิดความ สับสนและ
ผลทางลบตอทัศนคติของผูใช จากการศึกษาการนําเทคโนโลยีเครือขายมาใชพบวาผูใชที่ ไมมีความพรอมทาง
ทักษะการใชจะพยายามแกปญหาและศึกษาเรื่องของเทคนิค มากกวาจํากัด ความสนใจอยูที่เนื้อหา
นอกจากนั้น
1.2การสนับสนุนจากฝายบริหารและผูใชเชนเดียวกับการนําเทคโนโลยีอื่นเขาสูองคกรตองอาศัย
การสนับสนุนอยางจริงจังจากฝายบริหาร ทั้งในการสนับสนุนดานเครื่องมือและนโยบายสงเสริมการใช
เครือขายเวิลดไวดเว็บเพื่อประโยชนทางการศึกษา การกําหนดการใชเครื่องมือดังกลาวจึงไมสามารถเปนไปใน
ลักษณะแนวดิ่ง (Top down) โดยการกําหนดจากฝายบริหารเพียงฝายเดียว แตตองเปนการประสานจากทั้ง
สองฝายคือฝายบริหารและผูใชจะตองมีการประสานจากแนวลางขึ้นบน ผูใชจะตองมีทัศนะที่ยอมรับการใชสื่อ
ดังกลาวเพื่อประโยชนทางการศึกษา ฝายบริหารสามารถสรางนโยบายที่กระตุนแรงจูงใจของผูใช เชน สราง
แรงจูงใจจากภายในของผูใชใหรูสึกถึงความทาทายและประโยชนที่จะไดรับหรือสรางแรงจูงใจจากภายนอก
เชน สรางเงื่อนไขผลตอบแทนพิเศษทั้งในรูปนามธรรมและรูปธรรม
1.3การเปลี่ยนพฤติกรรมผูเรียนจากการเรียนรูแบบตั้งรับ (Passive) โดยพึ่งพิงการปอนจาก
ครูผูสอนมาเปนพฤติกรรมการเรียนที่สอดคลองกับการเรียนรูแบบผูเรียนเปนศูนยกลาง กลาวคือ เปนผูเรียนที่
เรียนรูวิธีการเรียน (Learning How to learn) เปนผูเรียนที่กระตือรือรนและมีทักษะที่สามารถเลือกรับขอมูล
วิเคราะห และสังเคราะหขอมูลไดอยางมีระบบนั้น ผูสอนจะตองสรางวุฒิทางการเรียนใหเกิดกับผูเรียนกอน
กลาวคือจะตองเตรียมการใหผูเรียนพัฒนาทักษะพื้นฐานที่จําเปนตอการเลือกสรร วิเคราะหและสังเคราะหใน
การเรียนผานเครือขายทักษะดังกลาว ไดแก ทักษะการอานเขียน ทักษะในเชิงภาษา ทักษะในการอภิปราย
และที่จําเปนคือ ทักษะในการควบคุมตรวจสอบการเรียนรูของตนเอง
1.4บทบาทของผูสอนในการเรียนการสอนบนเครือขาย จะตองมีการเปลี่ยนแปลงไปสูบทบาทที่เอื้อ
ตอการเรียนการสอนที่ผูเรียนเปนศูนยกลาง โดยในเบื้องตนจะเปนบทบาทผูนําเพื่อสนับสนุนกลุมและ
วัฒนธรรมการเรียนรูบนเครือขาย ผูสอนตองใชเวลามากไปกวาการเรียนการสอนในชั้นเรียนธรรมดา
1.5การสรางความจําเปนในการใช ผูสอนที่จะนําการเรียนการสอนผานเครือขายมาใชควรคํานึงถึง
ความจําเปนและผลประโยชนที่ตองการจากกิจกรรมบนเครือขาย ซึ่งจะเปนตัวกําหนดรูปแบบการใชวาผูสอน
เพียงตองการใชเครือขายเพื่อเสริมการเรียนหรือเปนการศึกษาทางไกล ผูสอนตองสรางสภาวะใหผูใชมีความ

4. 4
จําเปนที่ตองใชเชน การสงผานขอมูลที่จําเปนทางการเรียนใหกับผูใชผานทางเครือขายหรือสรางแรงจูงใจที่เปน
ผลประโยชนทางการเรียนใหกับผูใช
1.6ผูสอนตองออกแบบการเรียนการสอนและใชประโยชนของความเปนเครือขายอยางสูงสุด และ
เหมาะสมวิธีออกแบบการเรียนการสอนควรตองพัฒนาใหเขากับคุณสมบัติความเปนคอมพิวเตอรเครือขายซึ่งมี
ความแตกตางจากการออกแบบสําหรับโปรแกรมชวยสอนในคอมพิวเตอรทั่วไป นอกเหนือจากเนื้อหาบทเรียน
ที่ผูสรางเสนอสงผานเครือขาย ผูสอนสามารถสรางการเชื่อมโยงแหลงขอมูลอื่นที่สนับสนุนเนื้อหาหลักที่ผูสอน
สรางเปนการแนะแนวทางใหผูเรียนไดศึกษา ทั้งนี้เนื้อหาและการเชื่อมโยง ควรจะตองปรับปรุงใหทันสมัย
ตลอดเวลาและควรจะตองมีการจัดกิจกรรมการปฏิสัมพันธใหผูเรียนไดประโยชนจากการศึกษารวมกับผูอื่น
การจัดการเรียนการสอนผานเว็บนั้น ผูสอนและผูเรียนจะตองมีปฏิสัมพันธกันโดยผานระบบเครือขาย
คอมพิวเตอร ที่เชื่อมโยงคอมพิวเตอรของผูเรียนเขาไวกับเครื่องคอมพิวเตอรของผูใหบริการเครือขาย (File
Server) และเครื่องคอมพิวเตอรของผูใหบริการเว็บ (Web Server) อาจเปนเปนการเชื่อมโดยระยะใกลหรือ
เชื่อมโยงระยะไกลผานทางระบบการสื่อสารและอินเทอรเน็ต
2.ประโยชนการเรียนการสอนผานเว็บ
ประโยชนของการเรียนการสอนผานเว็บมีมากมายหลายประการ ทั้งนี้ขึ้นอยูกับวัตถุประสงคของการ
นําไปใชในการจัดการเรียนการสอน ซึ่งประโยชนของการเรียนการสอนผานเว็บไวดังนี้ (สุริยันต เงาะเศษ,
2549 :34-35)
2.1 การสอนบนเว็บเปนการเปดโอกาสใหผูเรียนที่อยูหางไกล หรือไมมีเวลาในการมาเขาชั้นเรียนได
เรียนในเวลาและสถานที่ ๆ ตองการ ซึ่งอาจเปนที่บาน ที่ทํางาน หรือสถานศึกษาใกลเคียงที่ผูเรียนสามารถเขา
ไปใชบริการทางอินเทอรเน็ตได การที่ผูเรียนไมจําเปนตองเดินทางมายังสถานศึกษาที่กําหนดไวจึงสามารถชวย
แกปญหาในดานของขอจํากัดเกี่ยวกับเวลา และสถานที่ศึกษาของผูเรียนเปนอยางดี
2.2การสอนบนเว็บยังเปนการสงเสริมใหเกิดความเทาเทียมกันทางการศึกษา ผูเรียนที่ศึกษาอยูใน
สถาบันการศึกษาในภูมิภาคหรือในประเทศหนึ่งสามารถที่จะศึกษา ถกเถียง อภิปราย กับอาจารย ครูผูสอนซึ่ง
สอนอยูที่สถาบันการศึกษาในนครหลวงหรือในตางประเทศก็ตาม
2.3การสอนบนเว็บนี้ ยังชวยสงเสริมแนวคิดในเรื่องของการเรียนรูตลอดชีวิต เนื่องจากเว็บเปน
แหลงความรูที่เปดกวางใหผูที่ตองการศึกษาในเรื่องใดเรื่องหนึ่ง สามารถเขามาคนควาหาความรูไดอยาง
ตอเนื่องและตลอดเวลาการสอนบนเว็บ สามารถตอบสนองตอผูเรียนที่มีความใฝรูรวมทั้งมีทักษะในการ
ตรวจสอบการเรียนรูดวยตนเอง (Meta-cognitive Skills) ไดอยางมีประสิทธิภาพ
2.4การสอนบนเว็บ ชวยทลายกําแพงของหองเรียนและเปลี่ยนจากหองเรียน 4 เหลี่ยมไปสูโลก
กวางแหงการเรียนรู เปดโอกาสใหผูเรียนสามารถเขาถึงแหลงขอมูลตางๆไดอยางสะดวกและมีประสิทธิภาพ
สนับสนุนสิ่งแวดลอมทางการเรียนที่เชื่อมโยงสิ่งที่เรียนกับปญหาที่พบในความเปนจริง โดยเนนใหเกิดการ
เรียนรูตามบริบทในโลกแหงความเปนจริง(Contextualization) และการเรียนรูจากปญหา (Problem-based
Learning) ตามแนวคิดแบบConstructivism

5. 5
2.5การสอนบนเว็บเปนวิธีการเรียนการสอนที่มีศักยภาพ เนื่องจากที่เว็บไดกลายเปนแหลงคนควา
ขอมูลทางวิชาการรูปแบบใหมครอบคลุมสารสนเทศทั่วโลกโดยไมจํากัดภาษา การสอนบนเว็บชวยแกปญหา
ของขอจํากัดของแหลงคนควาแบบเดิมจากหองสมุดอันไดแก ปญหาทรัพยากรการศึกษาที่มีอยูจํากัดและเวลา
ที่ใชในการคนหาขอมูล เนื่องจากเว็บมีขอมูลที่หลากหลายและเปนจํานวนมาก รวมทั้งการที่เว็บใชการ
เชื่อมโยงในลักษณะของไฮเปอรมิเดีย (สื่อหลายมิติ) ซึ่งทําใหการคนหาทําไดสะดวกและงายดายกวาการคนหา
ขอมูลแบบเดิม
2.6การสอนบนเว็บจะชวยสนับสนุนการเรียนรูที่กระตือรือรน ทั้งนี้เนื่องจากคุณลักษณะของเว็บที่
เอื้ออํานวยใหเกิดการศึกษา ในลักษณะที่ผูเรียนถูกกระตุนใหแสดงความคิดเห็นไดอยูตลอดเวลา โดยไม
จําเปนตองเปดเผยตัวตนที่แทจริง ตัวอยางเชน การใหผูเรียนรวมมือกันในการทํากิจกรรมตาง ๆ บนเครือขาย
การใหผูเรียนไดมีโอกาสแสดงความคิดเห็นและแสดงไวบนเว็บบอรดหรือการใหผูเรียนมีโอกาสเขามาพบปะกับ
ผูเรียนคนอื่น ๆ อาจารย หรือผูเชี่ยวชาญในเวลาเดียวกันที่หองสนทนา เปนตน
2.7การสอนบนเว็บเอื้อใหเกิดการปฏิสัมพันธ ซึ่งการเปดปฏิสัมพันธนี้อาจทําได 2 รูปแบบ คือ
ปฏิสัมพันธกับผูเรียนดวยกันและ/หรือผูสอน ปฏิสัมพันธกับบทเรียนในเนื้อหาหรือสื่อการสอนบนเว็บ ซึ่ง
ลักษณะแรกนี้จะอยูในรูปของการเขาไปพูดคุย พบปะ แลกเปลี่ยน ความคิดเห็นกัน สวนในลักษณะหลังนั้นจะ
อยูในรูปแบบของการเรียนการสอน แบบฝกหัดหรือแบบทดสอบที่ผูสอนไดจัดหาไวใหแกผูเรียน
2.8การสอนบนเว็บยังเปนการเปดโอกาสสําหรับผูเรียนในการเขาถึงผูเชี่ยวชาญสาขาตาง ๆ ทั้งในและ
นอกสถาบันจากในประเทศและตางประเทศทั่วโลก โดยผูเรียนสามารถติดตอสอบถามปญหาขอขอมูลตาง ๆ ที่
ตองการศึกษาจากผูเชี่ยวชาญจริงโดยตรงซึ่งไมสามารถทําไดในการเรียนการสอนแบบดั้งเดิม นอกจากนี้ยัง
ประหยัดทั้งเวลาและคาใชจายเมื่อเปรียบเทียบกับการติดตอสื่อสารในลักษณะเดิม ๆ
2.9การสอนบนเว็บเปดโอกาสใหผูเรียนไดมีโอกาสแสดงผลงานของตน สูสายตาผูอื่นอยางงายดาย
ทั้งนี้ไมไดจํากัดเฉพาะเพื่อนๆ ในชั้นเรียนหากแตเปนบุคคลทั่วไปทั่วโลกได ดังนั้นจึงถือเปนการสรางแรงจูงใจ
ภายนอกในการเรียนอยางหนึ่งสําหรับผูเรียน ผูเรียนจะพยายามผลิตผลงานที่ดีเพื่อไมใหเสียชื่อเสียงตนเอง
นอกจากนี้ผูเรียนยังมีโอกาสไดเห็นผลงานของผูอื่นเพื่อนํามาพัฒนางานของตนเองใหดียิ่งขึ้น
2.10การสอนบนเว็บเปดโอกาสใหผูสอนสามารถปรับปรุงเนื้อหาหลักสูตร ใหทันสมัยไดอยาง
สะดวกสบายเนื่องจากขอมูลบนเว็บมีลักษณะเปนพลวัตร ( Dynamic ) ดังนั้นผูสอนสามารถอัพเดตเนื้อหา
หลักสูตรที่ทันสมัยแกผูเรียนไดตลอดเวลา นอกจากนี้การใหผูเรียนไดสื่อสารและแสดงความคิดเห็นที่เกี่ยวของ
กับเนื้อหา ทําใหเนื้อหาการเรียนมีความยืดหยุนมากกวาการเรียนการสอนแบบเดิมและเปลี่ยนแปลงไปตาม
ความตองการของผูเรียนเปนสําคัญ การสอนบนเว็บสามารถนําเสนอเนื้อหาในรูปของมัลติมีเดีย ไดแก
ขอความ ภาพนิ่ง เสียง ภาพเคลื่อนไหว วีดีทัศน ภาพ 3 มิติ โดยผูสอนและผูเรียนสามารถเลือกรูปแบบของ
การนําเสนอเพื่อใหเกิดประสิทธิภาพสูงสุดทางการเรียน

6. 6
ความสําคัญของสีที่มีตอการออกแบบเว็บไซต
สีเปนองคประกอบที่มีความละเอียดซับซอน และตองอาศัยความเชี่ยวชาญในการผสมผสานความ
แตกตางของสี ใหสามารถเขากันไดอยางลงตัว โดยสามารถสรุปความสําคัญในการเลือกใชสีเพื่อการออกแบบ
เว็บ ไดดังนี้ (เสถียร พลวงศ, 2549 :ไมปรากฏหนา)
1.การดึงดูดความสนใจของผูเยี่ยมชม เนื่องจากสิ่งแรกที่มองเห็นไดจากเว็บคือ สี ซึ่งเปนสิ่งที่ชวย
กําหนดบรรยากาศ และความรูสึกโดยรวมของเว็บไซต
2.การนําสีมาใชกับองคประกอบตางๆของเว็บเพจ เนื่องจากในหนาเว็บมีขอมูลปริมาณมาก
ผูออกแบบมักใชโทนสีในการจัดกลุมขอมูล เชน ตัวอักษร รูปภาพ ลิงค และพื้นหลัง เปนตน เพื่อความสะดวก
ตอการเขาใชงานของผูเยี่ยมชมเว็บไซต
3.การเชื่อมโยงองคประกอบหนาเว็บเขาดวยกัน ผูออกแบบสามารถใชการไลระดับสีหรือโทนสี เพื่อ
เชื่อมโยงองคประกอบแตละสวนไวดวยกัน ใหหนาเว็บมรความเปนเอกภาพได
4.การสรางอารมณและความรูสึก การเลือกใชสีแตละสี ลวนมีผลตอความรูสึกของผูเยี่ยมชมเว็บไซต
เชน สีแดงกระตุนใหเกดความสนใจ อยากรู มีชีวิตชีวา หรือสีดํา กระคุนใหเกิดความนาลึกลับ นาคนหา เปน
ตน
5.การสรางสัญลักษณหรือเปนตัวแทนขององคกร สวนใหญองคกรขนาดใหญจะมีการสราง
สัญลักษณที่เปนตัวแทนขององคกร ทั้งนี้อาจอยูในรูปแบบเครื่องหมายการคาหรือสีสันตางๆ ที่ผูเยี่ยมชม
เว็บไซตมองเห็นแลวทราบทันทีวาเปนสัญลักษณองคกรใด โดยใชสีประจําองคกรมาใชรวมกับการออกแบบ
หนาเว็บ เชน มหาวิทยาลัยสุโขทัยธรรมมาธิราช สีประจํามหาวิทยาลัยคือ สีเขียวกับสีทอง
อยางไรก็ตาม การเลือกใชสีในการออกแบบเว็บเพจนั้น หากเลือกใชสีไมเหมาะสมอาจสรางความ
ลําบากในการอานหรือรบกวนสายตาผูเยี่ยมชม รวมทั้งอาจทําใหการสื่อความหมายไมถูกตอง การเลือกใชสี
ตางๆนั้น ตองเขาใจถึงการแสดงผลของเว็บเพจในสภาพแวดลอมที่แตกตางกัน
การวางแผนเพื่อการออกแบบเว็บไซต
เว็บไซตเปนสื่อที่ไดรับความนิยมอยางมากบนอินเทอรเน็ต ผูใชงานเว็บไซตสามารถตัดสินใจไดวาจะ
เลือกเยี่ยมชมเว็บไซตใดหรือไมเยี่ยมชมเว็บไซตใดไดตามตองการ ถาผูใชเห็นวาเว็บไซตที่กําลังเยี่ยมชมอยูนั้น
ไมมีประโยชน หรือไมเขาใจวาเว็บไซตนี้ใชงานอยางไร เนื่องจากใชงานไดไมสะดวก ผูใชอาจเปลี่ยนไปเยี่ยมชม
เว็บไซตอื่นๆได เนื่องจากปจจุบันมีเว็บไซตตางๆอยูจํานวนมาก และยังมีเว็บไซตเกิดขึ้นใหมๆทุกวัน ผูใชจึงมี
ทางเลือกมากขึ้น และสามารถเปรียบเทียบคุณภาพของเว็บไซตตางๆไดเอง (ฐิติรัศญาณ แกนเพชร, 2551 :
6-9)

7. 7
เว็บไซตที่ไดรับการออกแบบอยางสวยงาม มีการใชงานที่สะดวก ยอมไดรับความสนใจมากกวา
เว็บไซตที่มีความสับสนวุนวาย มีขอมูลมากมายแตหาสาระสําคัญไมพบ หรือใชเวลาในการแสดงผลแตละหนา
นานเกินไป ปญหาเหลานี้ลวนมาจากการออกแบบเว็บไซตไมดีทั้งสิ้น ดังนั้นการออกแบบเว็บไซตจึงเปน
กระบวนการสําคัญในการสรางเว็บไซตใหประทับใจผูใช ทําใหผูใชอยากกลับเขามาในเว็บไซตเดิมอีกในอนาคต
ซึ่งนอกจากตองพัฒนาเว็บไซตที่ดีมีประโยชนแลว ยังตองคํานึงถึงการแขงขันกับเว็บไซตอื่นๆอีกดวย (วนิจศรา
อุนผา, 2548 : 37)
1.ขอควรคํานึงในการออกแบบเว็บไซต
การออกแบบเว็บไซตนั้นไมไดหมายถึงลักษณะหนาตาของเว็บไซตเพียงอยางเดียว แตเกี่ยวของ
ตั้งแตการเริ่มตนกําหนดเปาหมายของเว็บไซต ระบุกลุมผูใช การจัดระบบขอมูล การสรางระบบเนวิเกชั่น การ
ออกแบบหนาเว็บ รวมไปถึงการใชกราฟก การเลือกใชสี การจัดรูปแบบตัวอักษร นอกจากนั้นยังตองคํานึงถึง
ความแตกตางของสื่อกลางในการแสดงผลเว็บไซตดวย ซึ่งไดแก ชนิดและรุนของบราวเซอร ขนาดของหนาจอ
ความละเอียดของสีในระบบ รวมไปถึงเครื่องมืออํานวยความสะดวกในการใชงาน (plug-in) ชนิดตางๆที่ผูใชมี
อยู เพื่อใหผูใชเกิดความสะดวกและพอใจที่จะทองไปในเว็บไซตนั้น ดังนั้นทุกสิ่งทุกอยางในเว็บไซตทั้งที่
มองเห็นและมองไมเห็น ลวนเปนมาจากกระบวนการออกแบบเว็บไซตทั้งสิ้น เว็บไซตที่ดูสวยงามและมีลูกเลน
มากมายนั้น อาจจะไมนับวาเปนการออกแบบที่ดีก็ได ถาความสวยงามและลูกเลนเหลานั้น ไมเหมาะสมกับ
ภาพลักษณของเว็บไซต
ดวยเหตุนี้ จึงเปนเรื่องยากที่จะระบุวาการออกแบบเว็บไซตที่ดีนั้นเปนอยางไร เนื่องจากไมมี
หลักเกณฑแนนอนที่จะใชไดกับทุกเว็บไซต แนวทางการออกแบบบางอยางที่เหมาะสม กับเว็บไซตหนึ่ง อาจจะ
ไมเหมาะสมกับอีกเว็บไซตหนึ่งก็ได ทําใหแนวทางการออกแบบของแตละเว็บไซตนั้น แตกตางกันไปตาม
เปาหมายและลักษณะของเว็บไซตนั้น เว็บไซตบางแหงอาจตองการนําเสนอความสนุกสนานหรือความบันเทิง
ในขณะที่เว็บไซตอื่นกลับตองการนําเสนอเนื้อหาที่ถูกตอง นาเชื่อถือเปนหลัก ดังนั้นการออกแบบเว็บไซต
โดยรวม ควรคํานึงถึงสิ่งตอไปนี้ (วิราวรรณ ธันธา, 2550 : 35)
1.1ความเรียบงาย ไดแก มีรูปแบบที่เรียบงาย ไมซับซอน และใชงานไดสะดวก ไมมีกราฟกหรือ
ภาพที่เคลื่อนไหวอยูตลอดเวลา ชนิดและสีของตัวอักษรไมมากจนเกินไปทําใหวุนวาย
1.2ความสม่ําเสมอ ไดแก ใชรูปแบบเดียวกันตลอดเว็บไซต เชนรูปแบบของกราฟก ระบบเนวิ
เกชั่นและโทนสี ควรมีความคลายคลึงกันตลอดทั้งเว็บไซต
1.3ความเปนเอกลักษณ การออกแบบเว็บไซตควรคํานึงถึงลักษณะขององคกร เพราะรูปแบบของ
เว็บไซตจะสะทอนถึงเอกลักษณและลักษณะขององคกรนั้นๆ เชน ถาเปนเว็บไซตของทางราชการจะตองดู
นาเชื่อถือ

8. 8
1.4เนื้อหาที่มีประโยชน เนื้อหาเปนสิ่งที่สําคัญที่สุดในเว็บไซต ดังนั้นควรจัดเตรียมเนื้อหาและ
ขอมูลที่ผูใชตองการใหถูกตอง และสมบูรณ มีการปรับปรุงและเพิ่มเติมใหทันเหตุการณอยูเสมอ เนื้อหาไมควร
ซ้ํากับเว็บไซตอื่น จึงจะดึงดูดความสนใจ
1.5ระบบเนวิเกชั่นที่ใชงานงาย ตองออกแบบใหผูใชเขาใจงายและใชงานสะดวก ใชกราฟกที่สื่อ
ความหมายรวมคําอธิบายที่ชัดเจน มีรูปแบบและลําดับของรายการสม่ําเสมอ เชนวางไวที่ตําแหนงเดียวกันของ
ทุกหนา
1.6ลักษณะที่นาสนใจ หนาตาของเว็บไซตจะตองมีความสัมพันธกับคุณภาพขององคประกอบ
ตางๆ เชน คุณภาพของกราฟกที่สมบูรณ การใชสี การใชตัวอักษรที่อานงาย สบายตา การใชโทนสีที่เขากัน
ลักษณะหนาตาที่นาสนใจนั้นขึ้นอยูกับความชอบของแตละบุคคล
1.7การใชงานอยางไมจํากัด ผูใชสามารถเขาถึงเว็บไซตโดยใชเบราวเซอรชนิดใดชนิดหนึ่งในการ
เขาถึงเนื้อหา และสามารถแสดงผลไดทุกระบบปฏิบัติการและความละเอียดหนาจอตางกัน
1.8คุณภาพในการออกแบบ การออกแบบและเรียบเรียงเนื้อหาอยางรอบคอบ และถูกตอง บง
บอกถึงคุณภาพ และความนาเชื่อถือของเว็บไซต
1.9ลิงคตางๆจะตองเชื่อมโยงไปยังหนาที่มีอยูจริงและถูกตอง ระบบการตางๆในเว็บไซตจะตองมี
ความแนนอน และทําหนาที่ไดอยางถูกตอง
ดังนั้น อาจสรุปไดวา การออกแบบที่ดี คือ การออกแบบใหเหมาะสมกับเปาหมายและลักษณะของ
เว็บไซต โดยคํานึงถึงความสะดวกของผูใชเปนหลัก
2.ขั้นตอนการวางแผนเพื่อการออกแบบเว็บไซต
การออกแบบเว็บไซตไมวาจะเปนเว็บไซตประเภทใด ลวนแตมีการวางแผนเพื่อการออกแบบ
เว็บไซตที่คลายๆกัน ไดแก (วิทยาลัยสารพัดชางพระนคร, 2549 :ไมปรากฏหนา)
2.1การกําหนดวัตถุประสงคของเว็บไซต เว็บไซตสวนใหญจะมีการกําหนดวัตถุประสงคชัดเจน ผู
เขาชมเว็บไซตตองการขอเท็จจริง เมื่อเขาชมแลวจะพยายามคนหาขอมูลหรือขอเท็จจริงที่ตองการ เว็บไซตที่มี
วัตถุประสงคที่ชัดเจน จะทําใหผูเขาชมยอมรับเว็บไซตโดยงาย เชน ขอมูลเพื่อการศึกษาจะใหขอมูลดาน
การศึกษาอยางชัดเจน ผูที่เขามาเยี่ยมชมสวนใหญจะเปนนักศึกษาหรือผูสนในในการศึกษาหลากหลาย
สาขาวิชา เปนตน การกําหนดวัตถุประสงคเว็บไซตที่ชัดเจนกอนการสรางเว็บไซต จะทําใหผูสรางเว็บไซตมั่นใจ
ไดวาเว็บไซตจะประสบผลสําเร็จตรงตามวัตถุประสงคของเว็บไซต คําถามแรกในการตั้งวัตถุประสงค คือ ทําไม
ตองการสรางเว็บไซตนี้ วัตถุประสงคสวนใหญของการสรางเว็บไซตเพื่อ
2.1.1เพื่อใหบริการ

9. 9
2.1.2เพื่อขายสินคา
2.1.3เพื่อแสดงขอมูลในหัวขอตางๆ
2.1.4เพื่อประกาศหรือประชาสัมพันธ
2.1.5เพื่อแนะนําตัวเอง(เจาของเว็บไซต)
2.1.6เพื่อสรางเครือขายชุมชน
2.1.7เพื่อเผยแพรขาวสารที่มีความเฉพาะเจาะจง
การกําหนดวัตถุประสงคของเว็บไซตอาจเปนเรื่องปกติทั่วไป แตการสรางวัตถุประสงคใหมีเอกลักษณ
ที่โดดเดนเปนเรื่องยาก เชน ถาจะสรางเว็บไซตใหบริการจะตองใหขอมูลทางการตลาดและเนื้อหาสวนที่
เกี่ยวของ ควรเขาใจหลักการในการกําหนดวัตถุประสงคของเว็บไซตในกรณีที่จะใหบริการดวย ตองยึดมั่นใน
วัตถุประสงค เชน บางเว็บไซตจะมีขอความบอกพันธกิจของเว็บไซตหรือหนาเว็บเพจที่อธิบายวัตถุประสงคของ
เว็บไซต บอกวาเว็บไซตนี้เกี่ยวกับอะไร มีวัตถุประสงคอยางไร คาดวาผูเยี่ยมชมเว็บไซตจะไดรับอะไรบาง สิ่ง
เหลานี้เปนวิธีการที่จะสามารถเชื่อมโยงใหผุเขาชมเว็บไซตไดเขาใจวัตถุประสงคของเว็บไซตที่สรางขึ้น เมื่อผู
เยี่ยมชมเขาใจวัตถุประสงคของผูใชแลวก็จะสามารถตอบขอสงสัยตางๆได
2.2การกําหนดกลุมเปาหมาย ผูที่จะออกแบบเว็บไซตจะตองคํานึงถึงผูที่จะเขาชมเว็บไซตวาเปน
กลุมเปาหมายที่สําคัญ ดังนั้นกอนที่จะออกแบบเว็บไซตจะตองวิเคราะหกลุมเปาหมายของเว็บไซตใหชัดเจน
วาตองการใหใครมาเยี่ยมชม โดยดูวัตถุประสงคของเว็บไซต วาเว็บไซตนั้นๆมีการถายทอดอะไรกับผูเยี่ยมชม
เว็บไซตก็จะทราบวากลุมเปาหมายของเว็บไซตคือกลุมใด สิ่งสําคัญที่ผูออกแบบเว็บไซตตองตระหนัก คือการ
พัฒนาเว็บไซต ตองคํานึงวาใครเปนผูอานขอมูลเหลานี้ ภาพและเสียงที่เหมาะสมกับกลุมเปาหมายเปนอยางไร
คําสําคัญที่จะจูงใจกับกลุมเปาหมายคืออะไร สิ่งเหลานี้จะมีความสัมพันธกันกับกลุมเปาหมายซึ่งมีความสําคัญ
ยิ่งในการออกแบบเว็บไซต เพื่อที่จะทําใหกลุมเปาหมายของเว็บไซตเขาใจความหมายไดตรงกัน หมายความวา
ถากลุมเปาหมายเปนผูหญิงแลวปรากฏวามีผูชายเขามาในเว็บไซต อานขอความเหลานี้ก็จะไมเปนประโยชน
สําหรับผูชาย ดังนั้น การออกแบบเว็บไซตควรวิเคราะหขอดี ขอเสียของวัตถุประสงคในการออกแบบเว็บไซต ก็
จะทราบวา ไมวาจะเปนเว็บไซตชนิดใด ก็ลวนจะมีการติดตอสื่อสารกับผูที่เขาชมเว็บไซตทั้งสิ้น ดังนั้นจึงควร
ออกแบบในการสื่อสารกับกลุมเปาหมายไวตั้งแตตอนเริ่มตน การออกแบบเว็บไวตจะประสบผลสําเร็จถามี
ปฏิสัมพันธกับผูเขาชมเว็บไซตใหตรงตามความตองการของผูเขาชม การสัมภาษณหรือการสํารวจผูเขาชม
เว็บไซต จะชวยใหผูออกแบบเว็บไซตเขาใจความตองการของผูเขาชม และสามารถนําความตองการตางๆ
เหลานั้นมาปรับปรุงและพัฒนาเว็บไซตได
2.3การวางแผนดานเนื้อหา การออกแบบเว็บไซตจะตองมีการวางแผนใหชัดเจนตั้งแตเริ่มตน
เพราะถาหากมีการวางแผนดานเนื้อหาไมดี จะทําใหเว็บไซตไมเปนระเบียบ สงผลใหผูเขาชมเว็บไซตเกิดความ

10. 10
สับสน การวางแผนดานเนื้อหาควรตอบคําถามดานตางๆใหได เชน ใครเปนผุรับผิดชอบเนื้อหา มีการบันทึก
ขอมูลไวที่ใด รูปแบบแฟมขอมูลเปนแบบใด ควรตั้งชื่อเนื้อหาอยางไร การติดตามแกะรอยทําไดอยางไร สิ่ง
เหลานี้เปนสิ่งจําเปนที่จะตองตระหนักถึงอยางมาก หากมองขามสิ่งเหลานี้จะทําใหการจัดการกับเนื้อหาจํานวน
มากที่จะเพิ่มขึ้นในภายหลังนั้นไดยาก จึงควรวางแผนเนื้อหาตางๆเปนลําดับ จัดการแฟมขอมูลอยางมีตรรกะ
เมื่อผูออกแบบเว็บไซตตัดสินใจใหมีการไหลของขอมูลก็ควรจัดการใหเปนขั้นตอน โดยตองมั่นใจวามีทิศทางที่
ถูกตอง และตั้งชื่อแฟมใหสอดคลองกับเนื้อหา ซึ่งเปนสิ่งสําคัญอยางยิ่ง จากนั้นจะเปนการเก็บแฟมตางๆ
การสรางแผนผังของเนื้อหาจะทําใหเราทราบวา มีจํานวนเว็บเพจที่เกี่ยวของปริมาณเทานั้น หาก
เปนเว็บไซตขนาดใหญ มีเว็บเพจจํานวนมาก ควรมีการจัดกลุมของเนื้อหาทั้งหมดที่ความสัมพันธกันเปนกลุมๆ
เชน การศึกษา กีฬา บันเทิง เปนตน ควรทําบัญชีกลุมเนื้อหาตางๆ รวมทั้งเนื้อหายอยๆของแตละกลุมให
ครอบคลุมเนื้อหาทั้งหมด โดยการวาดภาพโครงรางเนื้อหา ดังภาพที่20 การทําโครงรางเนื้อหาเชนนี้ จะชวยให
ผูออกแบบเห็นภาพรวมของการไหลของเนื้อหาและเขาใจกระบวนการไหลของเนื้อหา วาเมื่อเขาไปที่เนื้อหานี้
จะพบเนื้อหายอยๆอยางไรบาง
ภาพที่20 ตัวอยางการสรางแผนผังของเนื้อหา
ที่มา : http://buildinternet.com/2009/10/how-to-plan-a -content-heavy-site/ คนเมื่อวันที่14
มิถุนายน 2556
2.4การวางแผนโครงสรางของเว็บไซต ในที่นี้ขออธิบายตามระบบการจัดการเนื้อหา(Content
Management System : CMS) ในการสรางและจัดการเนื้อหาของเว็บไซตที่ไดออกแบบไว ประกอบดวย
การสรางเนื้อหา(creation) การปรับปรุงเนื้อหา(updating) การกระจายเนื้อหา(distribution) การตีพิมพ
เนื้อหา(publishing) การคนหาเนื้อหา(discovery) CMS เปดทางใหผูใชงานสามารถตีพิมพไดหลายลักษณะ
เชน ขาว การประกาศ กรณีศึกษา ประวัติบุคคล บทความ หนังสือพิมพ ขอมูลสินคา หนังสือรับรอง ลิงคที่
สําคัญ แหลงขอมูลออนไลน รวมทั้งการดาวนโหลด CMSจะใหสิทธิ์ในการเขาถึงขอมูลเปนลําดับขั้น โดยCMSมี
คุณลักษณะ ดังนี้
2.1.1สามารถสรางและบริหารจัดการเว็บเพจได
2.1.2lมารถควบคุมระบบเนวิเกชั่นและเนื้อหาจํานวนมากของเว็บไซตได

11. 11
2.1.3สามารถใหผูใชควบคุมเนื้อหาไดตามผูดูแลระบบวางโครงสรางให
2.1.4สามารถบริหารจัดการแผนผังเว็บไซตและเตรียมการปรับปรุงแกไข HTML
2.1.5สามารถเขียนกระทูบนเว็บไซตและสามารถเขียนความพึงพอใจ จัดหมวดหมูของกระทูได
2.1.6มีระบบรักษาความปลอดภัย
2.1.7สามารถลดความซ้ําซอนของเนื้อหา
2.1.8สามารถจัดการเนื้อหาบนเว็บไซต โดยไมตองมีความรูเกี่ยวกับภาษา HTML
2.5การวางแผนการผลิตเว็บเพจ ควรเขาใจหลักการของเว็บไซตกอนวา เว็บไซตเปรียบเสมือนการ
ไหลของขอมูล ซึ่งจะทําใหผูเขาเยี่ยมชมเว็บไซตไดรับขอมูลอยางเปนลําดับ ขั้นตอน ถาหากผูสรางเว็บไซตไมมี
การวางแผน เว็บไซตก็จะเริ่มตนไมถูก ไมรูวาจะเริ่มตนจากตรงไหนดี ที่สําคัญที่สุดคือควรออกแบบใหงายที่สุด
และรวดเร็วที่สุดสําหรับผูใชงานหรือผูเขาเยี่ยมชมเว็บไซต
2.6การวางแผนระบบเนวิเกชั่น เปนการนําแผนผังโครงสรางเว็บไซตจากการวางแผนเว็บไซต มา
วางแผนระบบเนวิเกชั่น ดังภาพที่21
ภาพที่21 ตัวอยางการวางแผนระบบเนวิเกชั่น
ที่มา : http://creately.com/examples/website-navigation-plan คนเมื่อวันที่14 มิถุนายน 2556
ขั้นตอนการพัฒนาเว็บไซต
การพัฒนาเว็บไซตและนําเว็บไซตเขาสูระบบ www ใหบุคคลอื่นเขามาเยี่ยมชมไดนั้น
กระบวนการพัฒนาเว็บไซตสามารถจําแนกได3ขั้นตอน ดังนี้ (ประไพ ศรีสะอาด, 2549 : 22-26)
1.การเตรียมการและการวางแผนงาน(pre-production)

12. 12
เปรียบเสมือนเข็มทิศที่จะชี้นําทางหรือบงบอกใหผูพัฒนาเว็บไซตทราบวา ควรจะตองเดินทางไปใน
ทิศทางใด ซึ่งขั้นตอนนี้จะประกอบดวย การเตรียมกอนการดําเนินการ การวางแผนการดําเนินการ รวมทั้งการ
รวบรวมและวิเคราะหโครงสราง
1.1การเตรียมกอนการดําเนินการ ประกอบดวย
1.1.1กําหนดวัตถุประสงคและเปาหมายของเว็บไซต เพื่อใหเห็นภาพที่ชัดเจน วาเว็บไซตตองการ
นําเสนอสิ่งใด มีวัตถุประสงคอยางไร โดยวัตถุประสงคของเว็บไซตสามารถจําแนกไดหลากหลายประเภท
ไดแก เว็บไซตสวนบุคคล เว็บไซตเผยแพรขอมูลสําหรับบริษัท/หางราน/องคกรตางๆ/สถาบัน/โรงเรียน
เว็บไซตเพื่อการทําธุรกรรมคาขาย เว็บไซตเพื่อการโฆษณารายการสินคา เว็บไซตเพื่อการศึกษาทางไกล
เว็บไซตเพื่อศูนยรวมและชองทางนําไปสูแหลงขอมูลอื่น เว็บไซตเพื่อเปนศูนยรวมชุมชนคนออนไลน และเว็บ
แอพลิเคชั่นเพื่อการใชงานเฉพาะทาง ทั้งนี้การกําหนดวัตถุประสงคของเว็บไซต จะมีผลตอการกําหนด
โครงสรางรูปแบบ รวมถึงหนาตา และสีสันของเว็บไซตดวย
1.1.2กําหนดชื่อเว็บไซต และชื่อยูอารแอล
1.1.3กําหนดกลุมเปาหมายที่จะใหเขาชมเว็บไซต เพื่อจะไดทราบวาผูที่จะเขาชมเว็บคือใคร จะ
ไดดําเนินการออกแบบและดําเนินการจัดทําเว็บไซต เพื่อใหตอบสนองความตองการผูชมกลุมนั้นไดทากที่สุด
1.1.4ศึกษากลุมคูแขง เพื่อจะไดทราบวา คูแขงของเว็บที่จะพัฒนาคือใคร จะไดศึกษาแนว
ทางการออกแบบ และการดําเนินดารของคูแขง เพื่อเปนตัวอยางหรือแนวทางในการออกแบบและดําเนินการ
ในการจัดทําเว็บไซตตอไป
1.2การวางแผนการดําเนินการ หลังการเตรียมกอนการดําเนินการ ควรมีการวางแผนไวลวงหนา
เพื่อใหการพัฒนาเว็บไซตมีแนวทางที่ชัดเจน
1.3การรวบรวมและวิเคราะหโครงสราง เปนขั้นตอนที่ตอจากการวางแผนการดําเนินการ
เนื่องจากเนื้อหาและขอมูลเปนสิ่งที่เชิญชวนใหผูอื่นเขามาเยี่ยมชมเว็บไซต ฉะนั้น ขั้นตอนนี้จึงเปนการรวบรวม
ขอมูลที่จําเปนในการสรางเว็บเพจตามหัวขอที่กําหนดไว เพื่อจะไดทราบวา จําเปนตองใชขอมูลอะไร จาก
แหลงใดบาง
2.การทํางานจริงในการออกแบบและพัฒนาเว็บเพจ(on- production) แบงไดเปน2สวน คือ
2.1การออกแบบเว็บเพจ นับเปนขั้นตอนในการออกแบบรูปราง โครงสรางและลักษณะทางดาน
กราฟกทางหนาเว็บเพจ โดยโปรแกรมที่นิยมนํามาใชในการออกแบบคือ โฟโตชอป หรือ ไฟลเวิรก ซึ่งจะชวย

13. 13
ในการสรางเคาโครงของหนาเว็บและองคประกอบตางๆ เชน ชื่อเว็บไซต โลโก รูปไอคอน ภาพเคลื่อนไหว แบ
รนเนอรโฆษณา เปนตน
สิ่งสําคัญที่ตองคํานึงถึงในการออกแบบและคํานึงถึงในการสรางเว็บเพจ คือวัตถุประสงคในการ
จัดทําเว็บไซต และเปาหมายของกลุมผูเขาชม เว็บเบราวเซอรที่ใชแสดงผลเว็บไซต เพื่อที่จะไดทําการกําหนด
รูปแบบและลักษณะเว็บเพจ ไดแก ขนาดของหนาเว็บเพจ และลักษณะการวางองคประกอบของเว็บไซตให
สวยงามและแสดงผลไดเร็ว รวมทั้ง ควรกําหนดและวางโครงรางของเว็บเพจ ทั้งในสวนของจํานวนเว็บเพจ
และเนื้อหาในแตละเว็บเพจ เปนแผนผังเว็บไซตออกมาบนกระดาษ
2.2การพัฒนาเว็บเพจ หลังจากออกแบบโครงรางของเว็บเพจและแตละหนาเว็บเพจแลว ขั้นตอน
ตอไปคือ การดําเนินการสรางเว็บเพจ ซึ่งรวมถึงการจัดหาองคประกอบที่ตองนํามาใช เชน สื่อมัลติมีเดีย
ภาพกราฟก แบบฟอรมตางๆ และการสรางไฟลรูปภาพ/เสียง ที่เกี่ยวของกับเนื้อหา ซึ่งตองคํานึงถึงรูปแบบ
ของไฟลที่นํามาใชและสอดคลองกับซอฟตแวรที่ใชในการพัฒนาดวย จากนั้นนําภาพและเสียงมาเก็บไวในได
เร็กทอรี่หรือโฟลเดอรที่กําหนดไว แลวนําขอมูลทั้งหมดที่รวบรวมไวจากที่กลาวมาขางตน มาสรางเปนเว็บไซต
ดวยภาษา HTML หรือเครื่องมือในการสรางเว็บเพจอื่นตามแนวคิดที่ไดออกแบบไวแลว ซึ่งรวมถึงการเขียน
โปรแกรมสคริปตในการใชงานดวย
3.การสรุปงานเพื่อสงมอบ(post- production) ประกอบดวย
3.1การทดสอบและปรับปรุงเว็บไซต หมายถึง การทดสอบเว็บเพจที่สรางขึ้นแบบออฟไลน โดยยัง
ไมไดมีการนําเว็บไซตเขาสูอินเทอรเน็ต แตก็สามารถแสดงผลไดเหมือนจริงผานเว็บเบราวเซอร เชน ใช
โปรแกรมอินเทอรเน็ตเอ็กซพลอเรอร ตรวจสอบตัวอยางเว็บเพจหนาตางๆที่สรางไว เชน ขนาดตัวอักษร ขนาด
รูปภาพ เสียง การใชสี ตาราง เปนตน วามีความเหมาะสมหรือไม พรอมกับทําการแกไขปรับปรุงจนเปนที่นา
พอใจ
3.2การเผยแพรเว็บไซต เมื่อทดสอบเว็บไซตจนสมบูรณแลว ขั้นตอนในการเผยแพรผานเว็บไซต
คือ การเผยแพรใหคนทั่วไปไดรูจัก หรือเรียกวาการนําเว็บไซตขึ้นเซิรฟเวอร หรือการอัพโหลด ซึ่งเปนการถาย
โอนเว็บเพจและสวนประกอบอื่น เชน ไฟลภาพ ไฟลเพลงประกอบ เปนตน ไปฝากไวที่โฮสต โดยเจาของเว็บ
อาจตองจดทะเบียนโดเมนเนม และเชาพื้นที่โฮสตจากผูใหบริการอินเทอรเน็ต(Internet Service Provider :
ISP) รายใดรายหนึ่ง เมื่อเลือกโฮสตไดแลว ขั้นตอไปก็เปนการถายโอนเว็บเพจไปฝากไวที่โฮสต ซึ่งโดยทั่วไปจะ
ใชซอฟตแวรถายโอนขอมูลเปนเครื่องมือ ซอฟตแวรประเภทนี้ เรียกวา ซอฟตแวรเอฟทีพีไคลเอนด(FTP
client) ผูพัฒนาก็สามารถนําเว็บเพจอัพโหลดขึ้นสูอินเทอรเน็ตและประชาสัมพันธใหคนทั่วไปไดรูจักได ซึ่งการ
ทําใหคนทั่วไปรับรูและใชบริการเว็บไซตไดมากนั้น จําเปนตองมีการประชาสัมพันธอยางตอเนื่องและใช
ระยะเวลาพอสมควร ซึ่งอาจทําโดยมีปายโฆษณาประชาสัมพันธออนไลนในหนาเว็บไซตอื่นๆ หรือการ
แลกเปลี่ยนปายโฆษณาระหวางกัน การโฆษณาผานเครื่องมือคนหา การโฆษณาผานจดหมายอิเล็กทรอนิกส
การตลาดแบบไวรัล ซึ่งคลายกับกลยุทธการบอกแบบปากตอปาก หากแตเปนการประชาสัมพันธโดยสื่อ

14. 14
ประเภทเครือขายสังคมที่มีอยู และควรมีการเก็บสถิติของผูเขาชมดวย ก็สามารถทําใหประเมินไดวา เว็บไซตที่
พัฒนาขึ้นนั้นไดรับความสนใจมากนอยเพียงใด
3.3การบํารุงรักษาเว็บไซต เปนการปรับปรุงเนื้อหา ภาพประกอบ หรือการปรับปรุงเว็บไซตให
เปนปจจุบัน ซึ่งถือเปนขั้นตอนที่สําคัญ เพราะในโลกอินเทอรเน็ตมีการเปลี่ยนแปลงอยางรวดเร็วอยูตลอดเวลา
ผูเขาชมเว็บมักใชเวลาในการคนหาและเปดผานเว็บไซตตางๆอยางรวดเร็ว หากพบวาเว็บไซตที่ผูสรางนําเสนอ
ไมไดมีการปรับปรุงเปลี่ยนแปลงหรือมีขอมูลใหมๆเพิ่มขึ้นเลย ผูเขาชมเว็บก็อาจลดจํานวนลงเรื่อยๆ จน
กลายเปนเว็บที่ไมมีคนเขามาเยี่ยมชมเลยหรือเปนเว็บที่ตายแลว
ดังนั้น การปรับปรุงเว็บไซตอยูเสมอ โดยมีการเพิ่มขอมูลขาวสารใหมๆอยูเปนประจํา ก็จะทําให
เว็บไซตทันสมัย มีผูชมเขาชมเปนประจําและมากขึ้น จนพัฒนาเปนเว็บไซตยอดนิยมไดในที่สุด
การออกแบบโครงสรางเว็บไซต
1.ความหมายของโครงสรางเว็บไซต
ประสาน จันทะคาม(2552 :12) กลาววา “การออกแบบโครงสรางเว็บไซต คือ การวางแผนการ
จัดลําดับ เนื้อหาสาระของเว็บไซต ออกเปนหมวดหมู เพื่อจัดทําเปนโครงสรางในการจัดวางหนาเว็บเพจ
ทั้งหมด เปรียบเสมือนแผนที่ ที่ทําใหเห็นโครงสรางทั้งหมดของเว็บไซต ชวยในนักออกแบบเว็บไซตไมใหหลง
ทาง การจัดโครงสรางของเว็บไซต มีจุดมุงหมายสําคัญคือ การที่จะทําใหผูเขาเยี่ยมชม สามารถคนหาขอมูลใน
เว็บเพจไดอยางเปนระบบ ซึ่งถือวาเปนขั้นตอนที่สําคัญ ที่สามารถสรางความสําเร็จใหกับผูที่ทําหนาที่ในการ
ออกแบบและพัฒนาเว็บไซต (Webmaster) การออกแบบโครงสรางหรือจัดระเบียบของขอมูลที่ชัดเจน แยก
ยอยเนื้อหาออกเปนสวนตาง ๆ ที่สัมพันธกันและใหอยูในมาตรฐานเดียวกัน จะชวยใหนาใชงานและงาย ตอ
การเขาอานเนื้อหาของผูใชเว็บไซต”
2.ประเภทของโครงสรางเว็บไซต
โครงสรางเว็บไซตสามารถแบงได4ประเภท ดังนี้ (วิชาการพัฒนางานบนเว็บ, 2551:ไมปรากฏหนา)
2.1โครงสรางเว็บไซตแบบเรียงลําดับ มีลักษณะเปนโครงสรางแบบธรรมดาที่นิยมใชกันมากที่สุด
เนื่องจากงายตอการจัดระบบขอมูล เปนโครงสรางที่ใชเก็บขอมูลที่เปนเรื่องราวตามลําดับเวลา หรือดําเนิน
เนื้อหาไปตามลําดับ หรือดําเนินเนื้อหาจากเรื่องทั่วๆไป กวางๆ ไปสูเรื่องที่จําเพาะเจาะจงมากขึ้น หรือมี
รายละเอียดมากขึ้น หรือการเรียงลําดับตามตัวอักษร เชน ดรรชนี สารานุกรม หรืออภิธานศัพท เปนตน
2.1.1ประโยชนของเว็บไซตแบบเรียงลําดับ ผูออกแบบเว็บไซตออกแบบไดงายในการจัดระบบ
โครงสราง และงายตอการปรับปรุงแกไข เนื่องจากมีโครงสรางที่ไมซับซอน การเพิ่มเติมเนื้อหาเขาไปสามารถ

15. 15
ทําไดงาย เพราะมีผลกระทบตอบางสวนของโครงสรางเทานั้น แตขอเสียของโครงสรางระบบนี้คือ ผูใชไม
สามารถกําหนดทิศทางการเขาสูเนื้อหาของตนเองได
2.1.2การนําเว็บไซตแบบเรียงลําดับไปใช โครงสรางนี้เหมาะกับเว็บที่มีขนาดเล็ก เนื้อหาไม
ซับซอน เหมือนการอานหนังสือเรียงลําดับไปแตละหนา ดังภาพที่22
ภาพที่22 ตัวอยางเว็บไซตแบบเรียงลําดับที่มีการเพิ่มเนื้อหายอย
ที่มา : http://e-learning.nectec.or.th/ คนเมื่อวันที่ 14 มิถุนายน 2556
2.2โครงสรางเว็บไซตแบบลําดับขั้น
เปนโครงสรางที่ดีวิธีหนึ่งในการจัดระบบโครงสรางที่มีความซับซอนของขอมูล โดยแบงเนื้อหา
ออกเปนสวนตางๆ และมีรายละเอียดยอยๆลดหลั่นกัน โดยใชแนวคิดเดียวกันกับแผนภูมิองคกร จึงงายตอการ
ทําความเขาใจกับโครงสรางของเนื้อหา ลักษณะเดน คือ การมีจุดเริ่มตนที่จุดรวมจุดเดียว นั่นคือ โฮมเพจ และ
เชื่อมโยงไปสูเนื้อหาในลักษณะจากบนลงลาง
2.2.1ประโยชนของเว็บไซตแบบลําดับชั้น คือ ผูชมเว็บไซตสามารถแยกแยะเนื้อหาไดงาย และ
สะดวกตอการจัดระบบขอมูลของผูออกแบบ นอกจากนี้ผูดูแลเว็บไซตสามารถดูแลและปรับปรุงแกไขเว็บไซต
ไดงาย เนื่องจากมีการแบงเปนหมวดหมูชัดเจน สวนขอเสีย คือในสวนของการออกแบบโครงสราง ตองระวัง
อยาใหโครงสรางที่ไมสมดุล นั่นคือ มีลักษณะการจัดการขอมูลในแตละหัวขอไมสมดุลกัน โดยมีบางหัวขอที่มี
เนื้อหานอยเกินไป หรือบางหัวขอมีเนื้อหามากเกินไป ทําใหโครงสรางของเว็บไมสมดุล
2.2.2การนําเว็บไซตแบบลําดับชั้นไปใช โครงสรางแบบนี้เหมาะกับเว็บไซตที่มีขนาดใหญ มี
เนื้อหามาก แตมีโครงสรางไมซับซอน สวนใหญจะใชกับเว็บไซตการเรียนการสอน
2.3โครงสรางเว็บไซตแบบตาราง
มีความซับซอนมากกวารูปแบบที่ผานมา การออกแบบเพิ่มความยืดหยุนใหแกการเขาสูเนื้อหาของ
ผูใช โดยเพิ่มการเชื่อมโยงซึ่งกันและกัน ระหวางเนื้อหาแตละสวน เหมาะแกการแสดงใหเห็นถึงความสําพันธ