1

การพั�ฒนาเว็บไซต์�

คว็ามหมายของเว็บไซต์�

อเนก ปิ่�� นศรี� (2552 : 9) กล่ าวว า เว�บไซต์� หมายถึ�ง แหล่ งที่��เก�บ“

รีวบรีวมข้�อม ล่เอกสารีแล่ะส#�อปิ่รีะสมต์ างๆ เช่ น ภาพ เส�ยง ข้�อความ เปิ่)นต์�น ข้องแต์ ล่ะหน วยงานบนอ*นเที่อรี�เน�ต์”

เว�บไซต์�สามารีถึ

จะใช่�ภาพเคล่#�อนไหวแที่น เพรีาะเปิ่)นส วนส-าค.ญที่��จะที่-าให�ผู้ �เย��ยมช่มเว�บสนใจในต์.วเว�บมากข้�1น

2.เว็บเพัจ ค#อรีายล่ะเอ�ยดข้องแบ งได�2 ส วน ได�แก (โซนซ า, 2549 : ไม ปิ่รีากฏหน�า)

1.โฮมเพัจ ค#อข้�อม ล่หน�าแรีกข้องเว�บไซต์� หรี#อหน�าปิ่กข้องน*ต์ยสารี ด.งน.1นโฮมเพจ ควรีม�รี ปิ่แบบที่��น าสนใจ ส�ส.นสวยงามม�ภาพเคล่#�อนไหว แล่ะเพล่งที่��เหมาะสมก.บต์.วเว�บ แต์ เน#�องจากไฟล่�เพล่งอาจที่-าให�โหล่ดเว�บได�ช่�า ด.งน.1น ปิ่7จจ8บ.นจ�งไม น*ยมใส เพล่ง แต์ เว�บแต์ ล่ะหน�าต์ อๆก.นไปิ่ เหม#อนหน�ากรีะดาษแต์ ล่ะหน�าภายในน*ต์ยสารีน.�นเอง ในหน�าโฮมเพจจะม�ล่*งค�เพ#�อเช่#�อมโยงไปิ่ย.งหน�าน.1นๆด�วย เพ#�อความสะดวก รีวดเรี�ว โยอย ในรี ปิ่แบบไฟล่� HTML

สรี8ปิ่ เว�บไซต์� หมายถึ�ง หน�าเว�บเพจหล่ายหน�า ซ��งเช่#�อมโยงผู้ านที่างไฮเปิ่อรี�ล่*งค� ส วนใหญ จ.ดที่-าข้�1นเพ#�อน-าเสนอข้�อม ล่ผู้ านคอมพ*วเต์อรี� โดยถึ กจ.ดเก�บไว�ใน www

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

1.คว็ามหมายของการจ�ดการเร�ยนการสอนผ่�านเว็บ

2

วรี.ที่ พฤกษากล่น.นที่� (2548 : ไม ปิ่รีากฎหน�า) กล่ าวว า การีจ.ดการี“

เรี�ยนผู้ านเว�บ ม�ล่.กษณะการีเรี�ยนการีสอนที่��แต์กต์ างไปิ่จากการีเรี�ยนการีสอนในช่.1นเรี�ยนปิ่กต์*ที่��ค8�นเคยก.นด� ซ��งการีจ.ดการีเรี�ยนการีสอนแบบด.1งเด*มในช่.1นเรี�ยนส วนใหญ จะม�ล่.กษณะที่��เน�นให�ผู้ �สอนเปิ่)นผู้ �ปิ่=อนความรี �ให�แก ผู้ �เรี�ยนที่-าให�ผู้ �เรี�ยนไม ใฝ่?ที่��จะหาความรี � เพ*�มเต์*ม

การีจ.ดการีเรี�ยนการีสอนโดยการีใช่�เว�บช่ วยสอนจะม�ว*ธี�การีจ.ดที่��แต์กต์ างไปิ่จากการีจ.ดการีเรี�ยนการีสอนต์ามปิ่กต์* เพรีาะค8ณล่.กษณะแล่ะรี ปิ่แบบข้องเว�บเปิ่)นส#�อที่��ม�ล่.กษณะเฉพาะข้องต์นเอง ซ��งแต์กต์ างไปิ่จากการีจ.ดการีเรี�ยนการีสอนด�วยส#�อแบบอ#�น ๆ จ�งต์�องค-าน�งถึ�งการีออกแบบรีะบบการีสอนที่��สอดคล่�องก.บค8ณล่.กษณะข้องเว�บ เช่ น การีส#�อสารีรีะหว างผู้ �เรี�ยนก.บครี การีส#�อสารีรีะหว างผู้ �เรี�ยนก.บผู้ �เรี�ยน ที่��กรีะที่-าได�แต์กต์ างไปิ่จากการีเรี�ยนการีสอนแบบเด*ม เช่ น การีใช่�เว�บช่ วยสอนสามารีถึส#�อสารีก.นได�โดยผู้ านเว�บโดยต์รีงในรี ปิ่ค8ยก.นในห�องสนที่นา(Chat Room) การีฝ่ากข้�อความบนกรีะดานอ*เล่�กที่รีอน*กส�หรี#อกรีะดานข้ าวสารี (Bulletin

Board) หรี#อจะส#�อสารีก.นโดยผู้ านไปิ่รีษณ�ย�อ*เล่�กที่รีอน*กส� (e-mail) ก�สามารีถึกรีะที่-าได�ในรีะบบน�1 ความเปิ่)นเว�บช่ วยสอนจ�งไม ใช่ แค การีสรี�างเว�บไซต์�เน#1อหาว*ช่าหน��งหรี#อรีวบรีวมข้�อม ล่ซ.กเรี#�องหน��งแล่�วบอกว าเปิ่)นเว�บช่ วยสอน เว�บช่ วยสอนม�ความหมายกว�างข้วางอ.นเก*ดจากการีรีวมเอาค8ณล่.กษณะข้องเว�บ โปิ่รีแกรีมแล่ะเครี#�องม#อส#�อสารีในรีะบบอ*นเที่อรี�เน�ต์แล่ะการีออกแบบรีะบบการีเรี�ยนการีสอนเข้�าด�วยก.น ที่-าให�เก*ดการีเรี�ยนรี �ข้�1นอย างม�ความหมายไม เปิ่)นเพ�ยงแค แหล่ งข้�อม ล่เที่ าน.1น (ปิ่รี.ช่ญน.นที่� น*ล่ส8ข้,2543 : 56)

สามารีถึสรี8ปิ่หล่.กการีพ#1นฐานข้องการีจ.ดการีเรี�ยนการีสอนก.บการีเรี�ยนการีสอนผู้ านเว�บ 5 ปิ่รีะการีด.งน�1 ค#อ (ครี บ�านนอก, 2552 : ไม ปิ่รีากฏหน�า)

1.1 ในการีจ.ดการีเรี�ยนการีสอนโดยที่.�วไปิ่แล่�ว ควรีส งเสรี*มให�ผู้ �เรี�ยนแล่ะผู้ �สอนสามารีถึต์*ดต์ อ ส#�อสารีก.นได�ต์ล่อดเวล่า การีต์*ดต์ อรีะหว าง

3

ผู้ �เรี�ยนแล่ะผู้ �สอนม�ส วนส-าค.ญในการีสรี�างความกรีะต์#อรี#อรี�นก.บการีเรี�ยนการีสอน โดยผู้ �สอนสามารีถึให�ความช่ วยเหล่#อผู้ �เรี�ยนได�ต์ล่อดเวล่าในข้ณะก-าล่.งศ�กษา ที่.1งย.งช่ วยเสรี*มสรี�างความค*ดแล่ะความเข้�าใจ ผู้ �เรี�ยนที่��เรี�ยนผู้ านเว�บสามารีถึสนที่นาแล่กเปิ่ล่��ยนความค*ดเห�นรีวมที่.1งซ.กถึามข้�อข้�องใจก.บผู้ �สอนได�โดยที่.นที่�ที่.นใด เช่ น การีมอบหมายงานส งผู้ านอ*นเที่อรี�เน�ต์จากผู้ �สอน ผู้ �เรี�ยนเม#�อได�รี.บมอบหมายก�จะสามารีถึที่-างานที่��ได�รี.บมอบหมายแล่ะส งผู้ านอ*นเที่อรี�เน�ต์ กล่.บไปิ่ย.งอาจารีย�ผู้ �สอน หล่.งจากน.1นอาจารีย�ผู้ �สอนสามารีถึต์รีวจแล่ะให�คะแนนพรี�อมที่.1งส งผู้ล่ย�อนกล่.บไปิ่ย.งผู้ �เรี�ยนได�ในเวล่าอ.นรีวดเรี�วหรี#อในที่.นที่�ที่.นใด

1.2 การีจ.ดการีเรี�ยนการีสอนควรีสน.บสน8นให�ม�การีพ.ฒนาความรี วมม#อรีะหว างผู้ �เรี�ยน ความรี วมม#อรีะหว างกล่8 มผู้ �เรี�ยนจะช่ วยพ.ฒนาความค*ดความเข้�าใจได�ด�กว าการีที่-างานคนเด�ยว ที่.1งย.งสรี�างความส.มพ.นธี�เปิ่)นที่�มโดยการีแล่กเปิ่ล่��ยนความค*ดเห�นรีะหว างก.นเพ#�อหาแนวที่างที่��ด�ที่��ส8ด เปิ่)นการีพ.ฒนาการีแก�ไข้ปิ่7ญหาการีเรี�ยนรี �แล่ะการียอมรี.บความค*ดเห�นข้องคนอ#�นมาปิ่รีะกอบเพ#�อหาแนวที่างที่��ด�ที่��ส8ด ผู้ �เรี�ยนที่��เรี�ยนผู้ านเว�บแม�ว าจะเรี�ยนจากคอมพ*วเต์อรี�ที่��อย ก.นคนล่ะที่�� แต์ ด�วยความสามารีถึข้องเครี#อข้ ายอ*นเที่อรี�เน�ต์ที่��เช่#�อมโยงเครี#อข้ ายคอมพ*วเต์อรี�ที่.�วโล่กไว�ด�วยก.น ที่-าให�ผู้ �เรี�ยนสามารีถึต์*ดต์ อส#�อสารีก.นได�ที่.นที่�ที่.นใด เช่ น การีใช่�บรี*การีสนที่นาแบบออนไล่น�ที่��สน.บสน8นให�ผู้ �เรี�ยนต์*ดต์ อส#�อสารีก.นได�ต์.1งแต์ 2 คนข้�1นไปิ่จนถึ�งผู้ �เรี�ยนที่��เปิ่)นกล่8 มใหญ

1.3 ควรีสน.บสน8นให�ผู้ �เรี�ยนรี �จ.กแสวงหาความรี �ด�วยต์นเอง (Active Learners) หล่�กเล่��ยงการีก-าก.บให�ผู้ �สอนเปิ่)นผู้ �ปิ่=อนข้�อม ล่หรี#อค-าต์อบ ผู้ �เรี�ยนควรีเปิ่)นผู้ �ข้วนข้วายใฝ่?หาข้�อม ล่องค�ความรี �ต์ างๆ เองโดยการีแนะน-าข้องผู้ �สอน เปิ่)นที่��ที่รีาบด�อย แล่�วว าอ*นเที่อรี�เน�ต์เปิ่)นแหล่ งข้�อม ล่ที่��ใหญ ที่��ส8ดในโล่ก ด.งน.1นการีจ.ดการีเรี�ยนการีสอนผู้ านเว�บน�1 จะช่ วยให�ผู้ �

4

เรี�ยนสามารีถึหาข้�อม ล่ได�ด�วยความสะดวกแล่ะรีวดเรี�ว ที่.1งย.งหาข้�อม ล่ได�จากแหล่ งข้�อม ล่ที่.�วโล่กเปิ่)นการีสรี�างความกรีะต์#อรี#อรี�นในการีใฝ่?หาความรี �

1.4 การีให�ผู้ล่ย�อนกล่.บแก ผู้ �เรี�ยนโดยที่.นที่�ที่.นใดช่ วยให�ผู้ �เรี�ยนได�ที่รีาบถึ�งความสามารีถึข้องต์น อ�กที่.1งย.งช่ วยให�ผู้ �เรี�ยนสามารีถึปิ่รี.บแนวที่างว*ธี�การีหรี#อพฤต์*กรีรีมให�ถึ กต์�องได� ผู้ �เรี�ยนที่��เรี�ยนผู้ านเว�บ สามารีถึได�รี.บผู้ล่ย�อนกล่.บจากที่.1งผู้ �สอนเองหรี#อแม�กรีะที่.�งจากผู้ �เรี�ยนคนอ#�นๆ ได�ที่.นที่�ที่.นใด แม�ว าผู้ �เรี�ยนแต์ ล่ะคนจะไม ได�น. �งเรี�ยนในช่.1นเรี�ยนแบบเผู้ช่*ญหน�าก.นก�ต์าม

1.5 ควรีสน.บสน8นการีจ.ดการีเรี�ยนการีสอนที่��ไม ม�ข้�ดจ-าก.ด ส-าหรี.บบ8คคล่ที่��ใฝ่?หาความรี � การีเรี�ยนการีสอนผู้ านเว�บเปิ่)นการีข้ยายโอกาสให�ก.บที่8กๆคนที่��สนใจศ�กษา เน#�องจากผู้ �เรี�ยนไม จ-าเปิ่)นจะต์�องเด*นที่างไปิ่เรี�ยน ณ ที่��ใดที่��หน��ง ผู้ �ที่��สนใจสามารีถึเรี�ยนได�ด�วยต์นเองในเวล่าที่��สะดวก จะเห�นได�ว าการีเรี�ยนการีสอนผู้ านเว�บน�1ม�ค8ณล่.กษณะที่��ช่ วยสน.บสน8นหล่.กพ#1นฐานการีจ.ดการีเรี�ยนการีสอนที่.1ง 5 ปิ่รีะการีได�อย างม�ปิ่รีะส*ที่ธี*ภาพ

การีเรี�ยนการีสอนผู้ านเว�บได�ม�การีด-าเน*นการีอย างจรี*งจ.งที่.�วโล่ก โดยเฉพาะอย างย*�งในกล่8 ม ปิ่รีะเที่ศที่างซ�กโล่กต์ะว.นต์ก ส-าหรี.บวงการีการีศ�กษาในปิ่รีะเที่ศไที่ยเรี*�มม�ความเปิ่ล่��ยนแปิ่ล่งจากเปิ่)นเพ�ยงผู้ �รี .บข้�อม ล่แล่ะส.งเกต์การีณ�การีเรี�ยนการีสอนบนเครี#อข้ ายเปิ่)นความพยายามในการีจ.ดการีเรี�ยนการีสอนแล่ะใช่�เครี#�องม#อบนเครี#อข้ ายเว*ล่ด�ไวด�เว�บเสรี*มในช่.1นเรี�ยนปิ่กต์* แล่ะบางมหาว*ที่ยาล่.ยที่��ด-าเน*นการีเรี�ยนการีสอนแบบที่างไกล่ก-าล่.งด-าเน*นการีที่��จะสรี�างช่.1นเรี�ยนเสม#อนให�เก*ดข้�1นจรี*ง การีด-าเน*นการีเรี�ยนการีสอนผู้ านเว�บม�รีายล่ะเอ�ยดด.งต์ อไปิ่น�1 (ใจที่*พย� ณ สงข้ล่า, 2542 : 67-68)

1.1 ความพรี�อมข้องเครี#�องม#อแล่ะที่.กษะการีใช่�งานเบ#1องต์�น ความไม พรี�อมข้องเครี#�องม#อแล่ะ การีข้าดที่.กษะที่างเที่คน*คที่��จ-าเปิ่)นในการีใช่�

5

เครี#�องม#อหรี#อโปิ่รีแกรีมเปิ่)นสาเหต์8ส-าค.ญที่��ก อให�เก*ดความ ส.บสนแล่ะผู้ล่ที่างล่บต์ อที่.ศนคต์*ข้องผู้ �ใช่� จากการีศ�กษาการีน-าเที่คโนโล่ย�เครี#อข้ ายมาใช่�พบว าผู้ �ใช่�ที่�� ไม ม�ความพรี�อมที่างที่.กษะการีใช่�จะพยายามแก�ปิ่7ญหาแล่ะศ�กษาเรี#�องข้องเที่คน*ค มากกว าจ-าก.ด ความสนใจอย ที่��เน#1อหา นอกจากน.1น

1.2 การีสน.บสน8นจากฝ่?ายบรี*หารีแล่ะผู้ �ใช่�เช่ นเด�ยวก.บการีน-าเที่คโนโล่ย�อ#�นเข้�าส องค�กรีต์�องอาศ.ยการีสน.บสน8นอย างจรี*งจ.งจากฝ่?ายบรี*หารี ที่.1งในการีสน.บสน8นด�านเครี#�องม#อแล่ะนโยบายส งเสรี*มการีใช่�เครี#อข้ ายเว*ล่ด�ไวด�เว�บเพ#�อปิ่รีะโยช่น�ที่างการีศ�กษา การีก-าหนดการีใช่�เครี#�องม#อด.งกล่ าวจ�งไม สามารีถึเปิ่)นไปิ่ในล่.กษณะแนวด*�ง (Top down) โดยการีก-าหนดจากฝ่?ายบรี*หารีเพ�ยงฝ่?ายเด�ยว แต์ ต์�องเปิ่)นการีปิ่รีะสานจากที่.1งสองฝ่?ายค#อฝ่?ายบรี*หารีแล่ะผู้ �ใช่�จะต์�องม�การีปิ่รีะสานจากแนวล่ างข้�1นบน ผู้ �ใช่�จะต์�องม�ที่.ศนะที่��ยอมรี.บการีใช่�ส#�อด.งกล่ าวเพ#�อปิ่รีะโยช่น�ที่างการีศ�กษา ฝ่?ายบรี*หารีสามารีถึสรี�างนโยบายที่��กรีะต์8�นแรีงจ งใจข้องผู้ �ใช่� เช่ น สรี�างแรีงจ งใจจากภายในข้องผู้ �ใช่�ให�รี �ส�กถึ�งความที่�าที่ายแล่ะปิ่รีะโยช่น�ที่��จะได�รี.บหรี#อสรี�างแรีงจ งใจจากภายนอก เช่ น สรี�างเง#�อนไข้ผู้ล่ต์อบแที่นพ*เศษที่.1งในรี ปิ่นามธีรีรีมแล่ะรี ปิ่ธีรีรีม

1.3 การีเปิ่ล่��ยนพฤต์*กรีรีมผู้ �เรี�ยนจากการีเรี�ยนรี �แบบต์.1งรี.บ (Passive) โดยพ��งพ*งการีปิ่=อนจากครี ผู้ �สอนมาเปิ่)นพฤต์*กรีรีมการีเรี�ยนที่��สอดคล่�องก.บการีเรี�ยนรี �แบบผู้ �เรี�ยนเปิ่)นศ นย�กล่าง กล่ าวค#อ เปิ่)นผู้ �เรี�ยนที่��เรี�ยนรี �ว*ธี�การีเรี�ยน (Learning How to learn) เปิ่)นผู้ �เรี�ยนที่��กรีะต์#อรี#อรี�นแล่ะม�ที่.กษะที่��สามารีถึเล่#อกรี.บข้�อม ล่ ว*เครีาะห� แล่ะส.งเครีาะห�ข้�อม ล่ได�อย างม�รีะบบน.1น ผู้ �สอนจะต์�องสรี�างว8ฒ*ที่างการีเรี�ยนให�เก*ดก.บผู้ �เรี�ยนก อน กล่ าวค#อจะต์�องเต์รี�ยมการีให�ผู้ �เรี�ยนพ.ฒนาที่.กษะพ#1นฐานที่��จ-าเปิ่)นต์ อการีเล่#อกสรีรี ว*เครีาะห�แล่ะส.งเครีาะห�ในการีเรี�ยนผู้ านเครี#อข้ ายที่.กษะด.งกล่ าว ได�แก ที่.กษะการีอ านเข้�ยน ที่.กษะในเช่*งภาษา ที่.กษะในการีอภ*ปิ่รีายแล่ะที่��จ-าเปิ่)นค#อ ที่.กษะในการีควบค8มต์รีวจสอบการีเรี�ยนรี �ข้องต์นเอง

6

1.4 บที่บาที่ข้องผู้ �สอนในการีเรี�ยนการีสอนบนเครี#อข้ าย จะต์�องม�การีเปิ่ล่��ยนแปิ่ล่งไปิ่ส บที่บาที่ที่��เอ#1อต์ อการีเรี�ยนการีสอนที่��ผู้ �เรี�ยนเปิ่)นศ นย�กล่าง โดยในเบ#1องต์�นจะเปิ่)นบที่บาที่ผู้ �น-าเพ#�อสน.บสน8นกล่8 มแล่ะว.ฒนธีรีรีมการีเรี�ยนรี �บนเครี#อข้ าย ผู้ �สอนต์�องใช่�เวล่ามากไปิ่กว าการีเรี�ยนการีสอนในช่.1นเรี�ยนธีรีรีมดา

1.5 การีสรี�างความจ-าเปิ่)นในการีใช่� ผู้ �สอนที่��จะน-าการีเรี�ยนการีสอนผู้ านเครี#อข้ ายมาใช่�ควรีค-าน�งถึ�งความจ-าเปิ่)นแล่ะผู้ล่ปิ่รีะโยช่น�ที่��ต์�องการีจากก*จกรีรีมบนเครี#อข้ าย ซ��งจะเปิ่)นต์.วก-าหนดรี ปิ่แบบการีใช่�ว าผู้ �สอนเพ�ยงต์�องการีใช่�เครี#อข้ ายเพ#�อเสรี*มการีเรี�ยนหรี#อเปิ่)นการีศ�กษาที่างไกล่ ผู้ �สอนต์�องสรี�างสภาวะให�ผู้ �ใช่�ม�ความจ-าเปิ่)นที่��ต์�องใช่�เช่ น การีส งผู้ านข้�อม ล่ที่��จ-าเปิ่)นที่างการีเรี�ยนให�ก.บผู้ �ใช่�ผู้ านที่างเครี#อข้ ายหรี#อสรี�างแรีงจ งใจที่��เปิ่)นผู้ล่ปิ่รีะโยช่น�ที่างการีเรี�ยนให�ก.บผู้ �ใช่�

1.6 ผู้ �สอนต์�องออกแบบการีเรี�ยนการีสอนแล่ะใช่�ปิ่รีะโยช่น�ข้องความเปิ่)นเครี#อข้ ายอย างส งส8ด แล่ะเหมาะสมว*ธี�ออกแบบการีเรี�ยนการีสอนควรีต์�องพ.ฒนาให�เข้�าก.บค8ณสมบ.ต์*ความเปิ่)นคอมพ*วเต์อรี�เครี#อข้ ายซ��งม�ความแต์กต์ างจากการีออกแบบส-าหรี.บโปิ่รีแกรีมช่ วยสอนในคอมพ*วเต์อรี�ที่.�วไปิ่ นอกเหน#อจากเน#1อหาบที่เรี�ยนที่��ผู้ �สรี�างเสนอส งผู้ านเครี#อข้ าย ผู้ �สอนสามารีถึสรี�างการีเช่#�อมโยงแหล่ งข้�อม ล่อ#�นที่��สน.บสน8นเน#1อหาหล่.กที่��ผู้ �สอนสรี�างเปิ่)นการีแนะแนวที่างให�ผู้ �เรี�ยนได�ศ�กษา ที่.1งน�1เน#1อหาแล่ะการีเช่#�อมโยง ควรีจะต์�องปิ่รี.บปิ่รี8งให�ที่.นสม.ยต์ล่อดเวล่าแล่ะควรีจะต์�องม�การีจ.ดก*จกรีรีมการีปิ่ฏ*ส.มพ.นธี�ให�ผู้ �เรี�ยนได�ปิ่รีะโยช่น�จากการีศ�กษารี วมก.บผู้ �อ#�น การีจ.ดการีเรี�ยนการีสอนผู้ านเว�บน.1น ผู้ �สอนแล่ะผู้ �เรี�ยนจะต์�องม�ปิ่ฏ*ส.มพ.นธี�ก.นโดยผู้ านรีะบบเครี#อข้ ายคอมพ*วเต์อรี� ที่��เช่#�อมโยงคอมพ*วเต์อรี�ข้องผู้ �เรี�ยนเข้�าไว�ก.บเครี#�องคอมพ*วเต์อรี�ข้องผู้ �ให�บรี*การีเครี#อข้ าย (File Server) แล่ะเครี#�องคอมพ*วเต์อรี�ข้องผู้ �ให�บรี*การีเว�บ (Web Server) อาจเปิ่)นเปิ่)นการีเช่#�อม

7

โดยรีะยะใกล่�หรี#อเช่#�อมโยงรีะยะไกล่ผู้ านที่างรีะบบการีส#�อสารีแล่ะอ*นเที่อรี�เน�ต์

2.ประโยชน�การเร�ยนการสอนผ่�านเว็บ

ปิ่รีะโยช่น�ข้องการีเรี�ยนการีสอนผู้ านเว�บม�มากมายหล่ายปิ่รีะการี ที่.1งน�1ข้�1นอย ก.บว.ต์ถึ8ปิ่รีะสงค�ข้องการีน-าไปิ่ใช่�ในการีจ.ดการีเรี�ยนการีสอน ซ��งปิ่รีะโยช่น�ข้องการีเรี�ยนการีสอนผู้ านเว�บไว�ด.งน�1 (ส8รี*ย.นต์� เงาะเศษ, 2549 :34-35)

2.1 การีสอนบนเว�บเปิ่)นการีเปิ่�ดโอกาสให�ผู้ �เรี�ยนที่��อย ห างไกล่ หรี#อไม ม�เวล่าในการีมาเข้�าช่.1นเรี�ยนได�เรี�ยนในเวล่าแล่ะสถึานที่�� ๆ ต์�องการี ซ��งอาจเปิ่)นที่��บ�าน ที่��ที่-างาน หรี#อสถึานศ�กษาใกล่�เค�ยงที่��ผู้ �เรี�ยนสามารีถึเข้�าไปิ่ใช่�บรี*การีที่างอ*นเที่อรี�เน�ต์ได� การีที่��ผู้ �เรี�ยนไม จ-าเปิ่)นต์�องเด*นที่างมาย.งสถึานศ�กษาที่��ก-าหนดไว�จ�งสามารีถึช่ วยแก�ปิ่7ญหาในด�านข้องข้�อจ-าก.ดเก��ยวก.บเวล่า แล่ะสถึานที่��ศ�กษาข้องผู้ �เรี�ยนเปิ่)นอย างด�

2.2 การีสอนบนเว�บย.งเปิ่)นการีส งเสรี*มให�เก*ดความเที่ าเที่�ยมก.นที่างการีศ�กษา ผู้ �เรี�ยนที่��ศ�กษาอย ในสถึาบ.นการีศ�กษาในภ ม*ภาคหรี#อในปิ่รีะเที่ศหน��งสามารีถึที่��จะศ�กษา ถึกเถึ�ยง อภ*ปิ่รีาย ก.บอาจารีย� ครี ผู้ �สอนซ��งสอนอย ที่��สถึาบ.นการีศ�กษาในนครีหล่วงหรี#อในต์ างปิ่รีะเที่ศก�ต์าม

2.3 การีสอนบนเว�บน�1 ย.งช่ วยส งเสรี*มแนวค*ดในเรี#�องข้องการีเรี�ยนรี �ต์ล่อดช่�ว*ต์ เน#�องจากเว�บเปิ่)นแหล่ งความรี �ที่��เปิ่�ดกว�างให�ผู้ �ที่��ต์�องการีศ�กษาในเรี#�องใดเรี#�องหน��ง สามารีถึเข้�ามาค�นคว�าหาความรี �ได�อย างต์ อเน#�องแล่ะต์ล่อดเวล่าการีสอนบนเว�บ สามารีถึต์อบสนองต์ อผู้ �เรี�ยนที่��ม�ความใฝ่?รี �รีวมที่.1งม�ที่.กษะในการีต์รีวจสอบการีเรี�ยนรี �ด�วยต์นเอง (Meta-

cognitive Skills) ได�อย างม�ปิ่รีะส*ที่ธี*ภาพ

2.4 การีสอนบนเว�บ ช่ วยที่ล่ายก-าแพงข้องห�องเรี�ยนแล่ะเปิ่ล่��ยนจากห�องเรี�ยน 4 เหล่��ยมไปิ่ส โล่กกว�างแห งการีเรี�ยนรี � เปิ่�ดโอกาสให�ผู้ �เรี�ยน

8

สามารีถึเข้�าถึ�งแหล่ งข้�อม ล่ต์ างๆได�อย างสะดวกแล่ะม�ปิ่รีะส*ที่ธี*ภาพสน.บสน8นส*�งแวดล่�อมที่างการีเรี�ยนที่��เช่#�อมโยงส*�งที่��เรี�ยนก.บปิ่7ญหาที่��พบในความเปิ่)นจรี*ง โดยเน�นให�เก*ดการีเรี�ยนรี �ต์ามบรี*บที่ในโล่กแห งความเปิ่)นจรี*ง(Contextualization) แล่ะการีเรี�ยนรี �จากปิ่7ญหา (Problem-

based Learning) ต์ามแนวค*ดแบบ Constructivism

2.5 การีสอนบนเว�บเปิ่)นว*ธี�การีเรี�ยนการีสอนที่��ม�ศ.กยภาพ เน#�องจากที่��เว�บได�กล่ายเปิ่)นแหล่ งค�นคว�าข้�อม ล่ที่างว*ช่าการีรี ปิ่แบบใหม ครีอบคล่8มสารีสนเที่ศที่.�วโล่กโดยไม จ-าก.ดภาษา การีสอนบนเว�บช่ วยแก�ปิ่7ญหาข้องข้�อจ-าก.ดข้องแหล่ งค�นคว�าแบบเด*มจากห�องสม8ดอ.นได�แก ปิ่7ญหาที่รี.พยากรีการีศ�กษาที่��ม�อย จ-าก.ดแล่ะเวล่าที่��ใช่�ในการีค�นหาข้�อม ล่ เน#�องจากเว�บม�ข้�อม ล่ที่��หล่ากหล่ายแล่ะเปิ่)นจ-านวนมาก รีวมที่.1งการีที่��เว�บใช่�การีเช่#�อมโยงในล่.กษณะข้องไฮเปิ่อรี�ม*เด�ย (ส#�อหล่ายม*ต์*) ซ��งที่-าให�การีค�นหาที่-าได�สะดวกแล่ะง ายดายกว าการีค�นหาข้�อม ล่แบบเด*ม

2.6 การีสอนบนเว�บจะช่ วยสน.บสน8นการีเรี�ยนรี �ที่��กรีะต์#อรี#อรี�น ที่.1งน�1เน#�องจากค8ณล่.กษณะข้องเว�บที่��เอ#1ออ-านวยให�เก*ดการีศ�กษา ในล่.กษณะที่��ผู้ �เรี�ยนถึ กกรีะต์8�นให�แสดงความค*ดเห�นได�อย ต์ล่อดเวล่า โดยไม จ-าเปิ่)นต์�องเปิ่�ดเผู้ยต์.วต์นที่��แที่�จรี*ง ต์.วอย างเช่ น การีให�ผู้ �เรี�ยนรี วมม#อก.นในการีที่-าก*จกรีรีมต์ าง ๆ บนเครี#อข้ ายการีให�ผู้ �เรี�ยนได�ม�โอกาสแสดงความค*ดเห�นแล่ะแสดงไว�บนเว�บบอรี�ดหรี#อการีให�ผู้ �เรี�ยนม�โอกาสเข้�ามาพบปิ่ะก.บผู้ �เรี�ยนคนอ#�น ๆ อาจารีย� หรี#อผู้ �เช่��ยวช่าญในเวล่าเด�ยวก.นที่��ห�องสนที่นา เปิ่)นต์�น

2.7 การีสอนบนเว�บเอ#1อให�เก*ดการีปิ่ฏ*ส.มพ.นธี� ซ��งการีเปิ่�ดปิ่ฏ*ส.มพ.นธี�น�1อาจที่-าได� 2 รี ปิ่แบบ ค#อ ปิ่ฏ*ส.มพ.นธี�ก.บผู้ �เรี�ยนด�วยก.นแล่ะ/หรี#อผู้ �สอน ปิ่ฏ*ส.มพ.นธี�ก.บบที่เรี�ยนในเน#1อหาหรี#อส#�อการีสอนบนเว�บ ซ��งล่.กษณะแรีกน�1จะอย ในรี ปิ่ข้องการีเข้�าไปิ่พ ดค8ย พบปิ่ะ แล่กเปิ่ล่��ยน ความค*ดเห�นก.น ส วนในล่.กษณะหล่.งน.1นจะอย ในรี ปิ่แบบข้องการีเรี�ยนการีสอน แบบฝ่Dกห.ดหรี#อแบบที่ดสอบที่��ผู้ �สอนได�จ.ดหาไว�ให�แก ผู้ �เรี�ยน

9

2.8 การีสอนบนเว�บย.งเปิ่)นการีเปิ่�ดโอกาสส-าหรี.บผู้ �เรี�ยนในการีเข้�าถึ�งผู้ �เช่��ยวช่าญสาข้าต์ าง ๆ ที่.1งในแล่ะนอกสถึาบ.นจากในปิ่รีะเที่ศแล่ะต์ างปิ่รีะเที่ศที่.�วโล่ก โดยผู้ �เรี�ยนสามารีถึต์*ดต์ อสอบถึามปิ่7ญหาข้อข้�อม ล่ต์ าง ๆ ที่��ต์�องการีศ�กษาจากผู้ �เช่��ยวช่าญจรี*งโดยต์รีงซ��งไม สามารีถึที่-าได�ในการีเรี�ยนการีสอนแบบด.1งเด*ม นอกจากน�1ย.งปิ่รีะหย.ดที่.1งเวล่าแล่ะค าใช่�จ ายเม#�อเปิ่รี�ยบเที่�ยบก.บการีต์*ดต์ อส#�อสารีในล่.กษณะเด*ม ๆ

2.9 การีสอนบนเว�บเปิ่�ดโอกาสให�ผู้ �เรี�ยนได�ม�โอกาสแสดงผู้ล่งานข้องต์น ส สายต์าผู้ �อ#�นอย างง ายดาย ที่.1งน�1ไม ได�จ-าก.ดเฉพาะเพ#�อนๆ ในช่.1นเรี�ยนหากแต์ เปิ่)นบ8คคล่ที่.�วไปิ่ที่.�วโล่กได� ด.งน.1นจ�งถึ#อเปิ่)นการีสรี�างแรีงจ งใจภายนอกในการีเรี�ยนอย างหน��งส-าหรี.บผู้ �เรี�ยน ผู้ �เรี�ยนจะพยายามผู้ล่*ต์ผู้ล่งานที่��ด�เพ#�อไม ให�เส�ยช่#�อเส�ยงต์นเองนอกจากน�1ผู้ �เรี�ยนย.งม�โอกาสได�เห�นผู้ล่งานข้องผู้ �อ#�นเพ#�อน-ามาพ.ฒนางานข้องต์นเองให�ด�ย*�งข้�1น

2.10 การีสอนบนเว�บเปิ่�ดโอกาสให�ผู้ �สอนสามารีถึปิ่รี.บปิ่รี8งเน#1อหาหล่.กส ต์รี ให�ที่.นสม.ยได�อย าง สะดวกสบายเน#�องจากข้�อม ล่บนเว�บม�ล่.กษณะเปิ่)นพล่ว.ต์รี ( Dynamic ) ด.งน.1นผู้ �สอนสามารีถึอ.พเดต์เน#1อหาหล่.กส ต์รีที่��ที่.นสม.ยแก ผู้ �เรี�ยนได�ต์ล่อดเวล่า นอกจากน�1การีให�ผู้ �เรี�ยนได�ส#�อสารีแล่ะแสดงความค*ดเห�นที่��เก��ยวข้�องก.บเน#1อหา ที่-าให�เน#1อหาการีเรี�ยนม�ความย#ดหย8 นมากกว าการีเรี�ยนการีสอนแบบเด*มแล่ะเปิ่ล่��ยนแปิ่ล่งไปิ่ต์ามความต์�องการีข้องผู้ �เรี�ยนเปิ่)นส-าค.ญ การีสอนบนเว�บสามารีถึน-าเสนอเน#1อหาในรี ปิ่ข้องม.ล่ต์*ม�เด�ย ได�แก ข้�อความ ภาพน*�ง เส�ยง ภาพเคล่#�อนไหว ว�ด�ที่.ศน� ภาพ 3 ม*ต์* โดยผู้ �สอนแล่ะผู้ �เรี�ยนสามารีถึเล่#อกรี ปิ่แบบข้องการีน-าเสนอเพ#�อให�เก*ดปิ่รีะส*ที่ธี*ภาพส งส8ดที่างการีเรี�ยน

คว็ามส#าค�ญของส�ที่�&ม�ต์�อการออกแบบเว็บไซต์�

10

ส�เปิ่)นองค�ปิ่รีะกอบที่��ม�ความล่ะเอ�ยดซ.บซ�อน แล่ะต์�องอาศ.ยความเช่��ยวช่าญในการีผู้สมผู้สานความแต์กต์ างข้องส� ให�สามารีถึเข้�าก.นได�อย างล่งต์.ว โดยสามารีถึสรี8ปิ่ความส-าค.ญในการีเล่#อกใช่�ส�เพ#�อการีออกแบบเว�บ ได�ด.งน�1 (เสถึ�ยรี พล่วงศ�, 2549 :ไม ปิ่รีากฏหน�า)

1.การด(งด)ดคว็ามสนใจของผ่)+เย�&ยมชม เน#�องจากส*�งแรีกที่��มองเห�นได�จากเว�บค#อ ส� ซ��งเปิ่)นส*�งที่��ช่ วยก-าหนดบรีรียากาศ แล่ะความรี �ส�กโดยรีวมข้องเว�บไซต์�

2.การน#าส�มาใช+ก�บองค�ประกอบต์�างๆของเว็บเพัจ เน#�องจากในหน�าเว�บม�ข้�อม ล่ปิ่รี*มาณมาก ผู้ �ออกแบบม.กใช่�โที่นส�ในการีจ.ดกล่8 มข้�อม ล่ เช่ น ต์.วอ.กษรี รี ปิ่ภาพ ล่*งค� แล่ะพ#1นหล่.ง เปิ่)นต์�น เพ#�อความสะดวกต์ อการีเข้�าใช่�งานข้องผู้ �เย��ยมช่มเว�บไซต์�

3.การเช-&อมโยงองค�ประกอบหน+าเว็บเข+าด+ว็ยก�น ผู้ �ออกแบบสามารีถึใช่�การีไล่ รีะด.บส�หรี#อโที่นส� เพ#�อเช่#�อมโยงองค�ปิ่รีะกอบแต์ ล่ะส วนไว�ด�วยก.น ให�หน�าเว�บมรีความเปิ่)นเอกภาพได�

4.การสร+างอารมณ์�และคว็ามร)+ส(ก การีเล่#อกใช่�ส�แต์ ล่ะส� ล่�วนม�ผู้ล่ต์ อความรี �ส�กข้องผู้ �เย��ยมช่มเว�บไซต์� เช่ น ส�แดงกรีะต์8�นให�เกดความสนใจ อยากรี � ม�ช่�ว*ต์ช่�วา หรี#อส�ด-า กรีะค8�นให�เก*ดความน าล่�กล่.บ น าค�นหา เปิ่)นต์�น

5.การสร+างส�ญล�กษณ์�หร-อเป1นต์�ว็แที่นขององค�กร ส วนใหญ องค�กรีข้นาดใหญ จะม�การีสรี�างส.ญล่.กษณ�ที่��เปิ่)นต์.วแที่นข้ององค�กรี ที่.1งน�1อาจอย ในรี ปิ่แบบเครี#�องหมายการีค�าหรี#อส�ส.นต์ างๆ ที่��ผู้ �เย��ยมช่มเว�บไซต์�มองเห�นแล่�วที่รีาบที่.นที่�ว าเปิ่)นส.ญล่.กษณ�องค�กรีใด โดยใช่�ส�ปิ่รีะจ-าองค�กรีมาใช่�รี วมก.บการีออกแบบหน�าเว�บ เช่ น มหาว*ที่ยาล่.ยส8โข้ที่.ยธีรีรีมมาธี*รีาช่ ส�ปิ่รีะจ-ามหาว*ที่ยาล่.ยค#อ ส�เข้�ยวก.บส�ที่อง

11

อย างไรีก�ต์าม การีเล่#อกใช่�ส�ในการีออกแบบเว�บเพจน.1น หากเล่#อกใช่�ส�ไม เหมาะสมอาจสรี�างความล่-าบากในการีอ านหรี#อรีบกวนสายต์าผู้ �เย��ยมช่ม รีวมที่.1งอาจที่-าให�การีส#�อความหมายไม ถึ กต์�อง การีเล่#อกใช่�ส�ต์ างๆน.1น ต์�องเข้�าใจถึ�งการีแสดงผู้ล่ข้องเว�บเพจในสภาพแวดล่�อมที่��แต์กต์ างก.น

การว็างแผ่นเพั-&อการออกแบบเว็บไซต์�

เว�บไซต์�เปิ่)นส#�อที่��ได�รี.บความน*ยมอย างมากบนอ*นเที่อรี�เน�ต์ ผู้ �ใช่�งานเว�บไซต์�สามารีถึต์.ดส*นใจได�ว าจะเล่#อกเย��ยมช่มเว�บไซต์�ใดหรี#อไม เย��ยมช่มเว�บไซต์�ใดได�ต์ามต์�องการี ถึ�าผู้ �ใช่�เห�นว าเว�บไซต์�ที่��ก-าล่.งเย��ยมช่มอย น. 1นไม ม�ปิ่รีะโยช่น� หรี#อไม เข้�าใจว าเว�บไซต์�น�1ใช่�งานอย างไรี เน#�องจากใช่�งานได�ไม สะดวก ผู้ �ใช่�อาจเปิ่ล่��ยนไปิ่เย��ยมช่มเว�บไซต์�อ#�นๆได� เน#�องจากปิ่7จจ8บ.นม�เว�บไซต์�ต์ างๆอย จ-านวนมาก แล่ะย.งม�เว�บไซต์�เก*ดข้�1นใหม ๆ ที่8กว.น ผู้ �ใช่�จ�งม�ที่างเล่#อกมากข้�1น แล่ะสามารีถึเปิ่รี�ยบเที่�ยบค8ณภาพข้องเว�บไซต์�ต์ างๆได�เอง (ฐ*ต์*รี.ศญาณ� แก นเพช่รี, 2551 : 6-9)

เว�บไซต์�ที่��ได�รี.บการีออกแบบอย างสวยงาม ม�การีใช่�งานที่��สะดวก ย อมได�รี.บความสนใจมากกว าเว�บไซต์�ที่��ม�ความส.บสนว8 นวาย ม�ข้�อม ล่มากมายแต์ หาสารีะส-าค.ญไม พบ หรี#อใช่�เวล่าในการีแสดงผู้ล่แต์ ล่ะหน�านานเก*นไปิ่ ปิ่7ญหาเหล่ าน�1ล่�วนมาจากการีออกแบบเว�บไซต์�ไม ด�ที่.1งส*1น ด.งน.1นการีออกแบบเว�บไซต์�จ�งเปิ่)นกรีะบวนการีส-าค.ญในการีสรี�างเว�บไซต์�ให�ปิ่รีะที่.บใจผู้ �ใช่� ที่-าให�ผู้ �ใช่�อยากกล่.บเข้�ามาในเว�บไซต์�เด*มอ�กในอนาคต์ ซ��งนอกจากต์�องพ.ฒนาเว�บไซต์�ที่��ด�ม�ปิ่รีะโยช่น�แล่�ว ย.งต์�องค-าน�งถึ�งการีแข้ งข้.นก.บเว�บไซต์�อ#�นๆอ�กด�วย (วน*จศรีา อ8 นผู้า, 2548 : 37)

1.ข+อคว็รค#าน(งในการออกแบบเว็บไซต์�

12

การีออกแบบเว�บไซต์�น.1นไม ได�หมายถึ�งล่.กษณะหน�าต์าข้องเว�บไซต์�เพ�ยงอย างเด�ยว แต์ เก��ยวข้�องต์.1งแต์ การีเรี*�มต์�นก-าหนดเปิ่=าหมายข้องเว�บไซต์� รีะบ8กล่8 มผู้ �ใช่� การีจ.ดรีะบบข้�อม ล่ การีสรี�างรีะบบเนว*เกช่.�น การีออกแบบหน�าเว�บ รีวมไปิ่ถึ�งการีใช่�กรีาฟ�ก การีเล่#อกใช่�ส� การีจ.ดรี ปิ่แบบต์.วอ.กษรี นอกจากน.1นย.งต์�องค-าน�งถึ�งความแต์กต์ างข้องส#�อกล่างในการีแสดงผู้ล่เว�บไซต์�ด�วย ซ��งได�แก ช่น*ดแล่ะรี8 นข้องบรีาวเซอรี� ข้นาดข้องหน�าจอ ความล่ะเอ�ยดข้องส�ในรีะบบ รีวมไปิ่ถึ�งเครี#�องม#ออ-านวยความสะดวกในการีใช่�งาน (plug-in) ช่น*ดต์ างๆที่��ผู้ �ใช่�ม�อย เพ#�อให�ผู้ �ใช่�เก*ดความสะดวกแล่ะพอใจที่��จะที่ องไปิ่ในเว�บไซต์�น.1น ด.งน.1นที่8กส*�งที่8กอย างในเว�บไซต์�ที่.1งที่��มองเห�นแล่ะมองไม เห�น ล่�วนเปิ่)นมาจากกรีะบวนการีออกแบบเว�บไซต์�ที่.1งส*1น เว�บไซต์�ที่��ด สวยงามแล่ะม�ล่ กเล่ นมากมายน.1น อาจจะไม น.บว าเปิ่)นการีออกแบบที่��ด�ก�ได� ถึ�าความสวยงามแล่ะล่ กเล่ นเหล่ าน.1น ไม เหมาะสมก.บภาพล่.กษณ�ข้องเว�บไซต์�

ด�วยเหต์8น�1 จ�งเปิ่)นเรี#�องยากที่��จะรีะบ8ว าการีออกแบบเว�บไซต์�ที่��ด�น. 1นเปิ่)นอย างไรี เน#�องจากไม ม�หล่.กเกณฑ์�แน นอนที่��จะใช่�ได�ก.บที่8กเว�บไซต์� แนวที่างการีออกแบบบางอย างที่��เหมาะสม ก.บเว�บไซต์�หน��ง อาจจะไม เหมาะสมก.บอ�กเว�บไซต์�หน��งก�ได� ที่-าให�แนวที่างการีออกแบบข้องแต์ ล่ะเว�บไซต์�น.1น แต์กต์ างก.นไปิ่ต์ามเปิ่=าหมายแล่ะล่.กษณะข้องเว�บไซต์�น.1น เว�บไซต์�บางแห งอาจต์�องการีน-าเสนอความสน8กสนานหรี#อความบ.นเที่*ง ในข้ณะที่��เว�บไซต์�อ#�นกล่.บต์�องการีน-าเสนอเน#1อหาที่��ถึ กต์�อง น าเช่#�อถึ#อเปิ่)นหล่.ก ด.งน.1นการีออกแบบเว�บไซต์�โดยรีวม ควรีค-าน�งถึ�งส*�งต์ อไปิ่น�1 (ว*รีาวรีรีณ ธี.นธีา, 2550 : 35)

13

1.1 คว็ามเร�ยบง�าย ได�แก ม�รี ปิ่แบบที่��เรี�ยบง าย ไม ซ.บซ�อน แล่ะใช่�งานได�สะดวก ไม ม�กรีาฟ�กหรี#อภาพที่��เคล่#�อนไหวอย ต์ล่อดเวล่า ช่น*ดแล่ะส�ข้องต์.วอ.กษรีไม มากจนเก*นไปิ่ที่-าให�ว8 นวาย

1.2 คว็ามสม#&าเสมอ ได�แก ใช่�รี ปิ่แบบเด�ยวก.นต์ล่อดเว�บไซต์� เช่ นรี ปิ่แบบข้องกรีาฟ�ก รีะบบเนว*เกช่.�นแล่ะโที่นส� ควรีม�ความคล่�ายคล่�งก.นต์ล่อดที่.1งเว�บไซต์�

1.3 คว็ามเป1นเอกล�กษณ์� การีออกแบบเว�บไซต์�ควรีค-าน�งถึ�งล่.กษณะข้ององค�กรี เพรีาะรี ปิ่แบบข้องเว�บไซต์�จะสะที่�อนถึ�งเอกล่.กษณ�แล่ะล่.กษณะข้ององค�กรีน.1นๆ เช่ น ถึ�าเปิ่)นเว�บไซต์�ข้องที่างรีาช่การีจะต์�องด น าเช่#�อถึ#อ

1.4 เน-2อหาที่�&ม�ประโยชน� เน#1อหาเปิ่)นส*�งที่��ส-าค.ญที่��ส8ดในเว�บไซต์� ด.งน.1นควรีจ.ดเต์รี�ยมเน#1อหาแล่ะข้�อม ล่ที่��ผู้ �ใช่�ต์�องการีให�ถึ กต์�อง แล่ะสมบ รีณ� ม�การีปิ่รี.บปิ่รี8งแล่ะเพ*�มเต์*มให�ที่.นเหต์8การีณ�อย เสมอ เน#1อหาไม ควรีซ-1าก.บเว�บไซต์�อ#�น จ�งจะด�งด ดความสนใจ

1.5 ระบบเนว็3เกช�&นที่�&ใช+งานง�าย ต์�องออกแบบให�ผู้ �ใช่�เข้�าใจง ายแล่ะใช่�งานสะดวก ใช่�กรีาฟ�กที่��ส#�อความหมายรี วมค-าอธี*บายที่��ช่.ดเจน ม�รี ปิ่แบบแล่ะล่-าด.บข้องรีายการีสม-�าเสมอ เช่ นวางไว�ที่��ต์-าแหน งเด�ยวก.นข้องที่8กหน�า

1.6 ล�กษณ์ะที่�&น�าสนใจ หน�าต์าข้องเว�บไซต์�จะต์�องม�ความส.มพ.นธี�ก.บค8ณภาพข้ององค�ปิ่รีะกอบต์ างๆ เช่ น ค8ณภาพข้องกรีาฟ�กที่��สมบ รีณ� การีใช่�ส� การีใช่�ต์.วอ.กษรีที่��อ านง าย สบายต์า การีใช่�โที่นส�ที่��เข้�าก.น ล่.กษณะหน�าต์าที่��น าสนใจน.1นข้�1นอย ก.บความช่อบข้องแต์ ล่ะบ8คคล่

14

1.7 การใช+งานอย�างไม�จ#าก�ด ผู้ �ใช่�สามารีถึเข้�าถึ�งเว�บไซต์�โดยใช่�เบรีาว�เซอรี�ช่น*ดใดช่น*ดหน��งในการีเข้�าถึ�งเน#1อหา แล่ะสามารีถึแสดงผู้ล่ได�ที่8กรีะบบปิ่ฏ*บ.ต์*การีแล่ะความล่ะเอ�ยดหน�าจอต์ างก.น

1.8 ค4ณ์ภาพัในการออกแบบ การีออกแบบแล่ะเรี�ยบเรี�ยงเน#1อหาอย างรีอบคอบ แล่ะถึ กต์�อง บ งบอกถึ�งค8ณภาพ แล่ะความน าเช่#�อถึ#อข้องเว�บไซต์�

1.9 ล3งค�ต์�างๆจะต์+องเช-&อมโยงไปย�งหน+าที่�&ม�อย)�จร3งและถู)กต์+อง รีะบบการีต์ างๆในเว�บไซต์�จะต์�องม�ความแน นอน แล่ะที่-าหน�าที่��ได�อย างถึ กต์�อง

ด.งน.1น อาจสรี8ปิ่ได�ว า การีออกแบบที่��ด� ค#อ การีออกแบบให�เหมาะสมก.บเปิ่=าหมายแล่ะล่.กษณะข้องเว�บไซต์� โดยค-าน�งถึ�งความสะดวกข้องผู้ �ใช่�เปิ่)นหล่.ก

2.ข�2นต์อนการว็างแผ่นเพั-&อการออกแบบเว็บไซต์�

การีออกแบบเว�บไซต์�ไม ว าจะเปิ่)นเว�บไซต์�ปิ่รีะเภที่ใด ล่�วนแต์ ม�การีวางแผู้นเพ#�อการีออกแบบเว�บไซต์�ที่��คล่�ายๆก.น ได�แก ( ว*ที่ยาล่.ยสารีพ.ดช่ างพรีะนครี, 2549 :ไม ปิ่รีากฏหน�า)

2.1 การก#าหนดว็�ต์ถู4ประสงค�ของเว็บไซต์� เว�บไซต์�ส วนใหญ จะม�การีก-าหนดว.ต์ถึ8ปิ่รีะสงค�ช่.ดเจน ผู้ �เข้�าช่มเว�บไซต์�ต์�องการีข้�อเที่�จจรี*ง เม#�อเข้�าช่มแล่�วจะพยายามค�นหาข้�อม ล่หรี#อข้�อเที่�จจรี*งที่��ต์�องการี เว�บไซต์�ที่��ม�ว.ต์ถึ8ปิ่รีะสงค�ที่��ช่.ดเจน จะที่-าให�ผู้ �เข้�าช่มยอมรี.บเว�บไซต์�โดยง าย เช่ น ข้�อม ล่เพ#�อการีศ�กษาจะให�ข้�อม ล่ด�านการีศ�กษาอย างช่.ดเจน ผู้ �ที่��เข้�ามาเย��ยมช่มส วนใหญ จะเปิ่)นน.กศ�กษาหรี#อผู้ �สนในในการีศ�กษาหล่ากหล่ายสาข้าว*ช่า เปิ่)นต์�น การีก-าหนดว.ต์ถึ8ปิ่รีะสงค�เว�บไซต์�ที่��ช่.ดเจนก อนการีสรี�างเว�บไซต์� จะ

15

ที่-าให�ผู้ �สรี�างเว�บไซต์�ม.�นใจได�ว าเว�บไซต์�จะปิ่รีะสบผู้ล่ส-าเรี�จต์รีงต์ามว.ต์ถึ8ปิ่รีะสงค�ข้องเว�บไซต์� ค-าถึามแรีกในการีต์.1งว.ต์ถึ8ปิ่รีะสงค� ค#อ ที่-าไมต์�องการีสรี�างเว�บไซต์�น�1 ว.ต์ถึ8ปิ่รีะสงค�ส วนใหญ ข้องการีสรี�างเว�บไซต์�เพ#�อ

2.1.1 เพ#�อให�บรี*การี

2.1.2 เพ#�อข้ายส*นค�า

2.1.3 เพ#�อแสดงข้�อม ล่ในห.วข้�อต์ างๆ

2.1.4 เพ#�อปิ่รีะกาศหรี#อปิ่รีะช่าส.มพ.นธี�

2.1.5 เพ#�อแนะน-าต์.วเอง(เจ�าข้องเว�บไซต์�)

2.1.6 เพ#�อสรี�างเครี#อข้ ายช่8มช่น

2.1.7 เพ#�อเผู้ยแพรี ข้ าวสารีที่��ม�ความเฉพาะเจาะจง

การีก-าหนดว.ต์ถึ8ปิ่รีะสงค�ข้องเว�บไซต์�อาจเปิ่)นเรี#�องปิ่กต์*ที่.�วไปิ่ แต์ การีสรี�างว.ต์ถึ8ปิ่รีะสงค�ให�ม�เอกล่.กษณ�ที่��โดดเด นเปิ่)นเรี#�องยาก เช่ น ถึ�าจะสรี�างเว�บไซต์�ให�บรี*การีจะต์�องให�ข้�อม ล่ที่างการีต์ล่าดแล่ะเน#1อหาส วนที่��เก��ยวข้�อง ควรีเข้�าใจหล่.กการีในการีก-าหนดว.ต์ถึ8ปิ่รีะสงค�ข้องเว�บไซต์�ในกรีณ�ที่��จะให�บรี*การีด�วย ต์�องย�ดม.�นในว.ต์ถึ8ปิ่รีะสงค� เช่ น บางเว�บไซต์�จะม�ข้�อความบอกพ.นธีก*จข้องเว�บไซต์�หรี#อหน�าเว�บเพจที่��อธี*บายว.ต์ถึ8ปิ่รีะสงค�ข้องเว�บไซต์� บอกว าเว�บไซต์�น�1เก��ยวก.บอะไรี ม�ว.ต์ถึ8ปิ่รีะสงค�อย างไรี คาดว าผู้ �เย��ยมช่มเว�บไซต์�จะได�รี.บอะไรีบ�าง ส*�งเหล่ าน�1เปิ่)นว*ธี�การีที่��จะสามารีถึเช่#�อมโยงให�ผู้8�เข้�าช่มเว�บไซต์�ได�เข้�าใจว.ต์ถึ8ปิ่รีะสงค�ข้องเว�บไซต์�ที่��สรี�างข้�1น เม#�อผู้ �เย��ยมช่มเข้�าใจว.ต์ถึ8ปิ่รีะสงค�ข้องผู้ �ใช่�แล่�วก�จะสามารีถึต์อบข้�อสงส.ยต์ างๆได�

16

2.2 การก#าหนดกล4�มเป7าหมาย ผู้ �ที่��จะออกแบบเว�บไซต์�จะต์�องค-าน�งถึ�งผู้ �ที่��จะเข้�าช่มเว�บไซต์�ว าเปิ่)นกล่8 มเปิ่=าหมายที่��ส-าค.ญ ด.งน.1นก อนที่��จะออกแบบเว�บไซต์�จะต์�องว*เครีาะห�กล่8 มเปิ่=าหมายข้องเว�บไซต์�ให�ช่.ดเจน ว าต์�องการีให�ใครีมาเย��ยมช่ม โดยด ว.ต์ถึ8ปิ่รีะสงค�ข้องเว�บไซต์� ว าเว�บไซต์�น.1นๆม�การีถึ ายที่อดอะไรีก.บผู้ �เย��ยมช่มเว�บไซต์�ก�จะที่รีาบว ากล่8 มเปิ่=าหมายข้องเว�บไซต์�ค#อกล่8 มใด ส*�งส-าค.ญที่��ผู้ �ออกแบบเว�บไซต์�ต์�องต์รีะหน.ก ค#อการีพ.ฒนาเว�บไซต์� ต์�องค-าน�งว าใครีเปิ่)นผู้ �อ านข้�อม ล่เหล่ าน�1 ภาพแล่ะเส�ยงที่��เหมาะสมก.บกล่8 มเปิ่=าหมายเปิ่)นอย างไรี ค-าส-าค.ญที่��จะจ งใจก.บกล่8 มเปิ่=าหมายค#ออะไรี ส*�งเหล่ าน�1จะม�ความส.มพ.นธี�ก.นก.บกล่8 มเปิ่=าหมายซ��งม�ความส-าค.ญย*�งในการีออกแบบเว�บไซต์� เพ#�อที่��จะที่-าให�กล่8 มเปิ่=าหมายข้องเว�บไซต์�เข้�าใจความหมายได�ต์รีงก.น หมายความว าถึ�ากล่8 มเปิ่=าหมายเปิ่)นผู้ �หญ*งแล่�วปิ่รีากฏว าม�ผู้ �ช่ายเข้�ามาในเว�บไซต์� อ านข้�อความเหล่ าน�1ก�จะไม เปิ่)นปิ่รีะโยช่น�ส-าหรี.บผู้ �ช่าย ด.งน.1น การีออกแบบเว�บไซต์�ควรีว*เครีาะห�ข้�อด� ข้�อเส�ยข้องว.ต์ถึ8ปิ่รีะสงค�ในการีออกแบบเว�บไซต์� ก�จะที่รีาบว า ไม ว าจะเปิ่)นเว�บไซต์�ช่น*ดใด ก�ล่�วนจะม�การีต์*ดต์ อส#�อสารีก.บผู้ �ที่��เข้�าช่มเว�บไซต์�ที่.1งส*1น ด.งน.1นจ�งควรีออกแบบในการีส#�อสารีก.บกล่8 มเปิ่=าหมายไว�ต์.1งแต์ ต์อนเรี*�มต์�น การีออกแบบเว�บไวต์�จะปิ่รีะสบผู้ล่ส-าเรี�จถึ�าม�ปิ่ฏ*ส.มพ.นธี�ก.บผู้ �เข้�าช่มเว�บไซต์�ให�ต์รีงต์ามความต์�องการีข้องผู้ �เข้�าช่ม การีส.มภาษณ�หรี#อการีส-ารีวจผู้ �เข้�าช่มเว�บไซต์� จะช่ วยให�ผู้ �ออกแบบเว�บไซต์�เข้�าใจความต์�องการีข้องผู้ �เข้�าช่ม แล่ะสามารีถึน-าความต์�องการีต์ างๆเหล่ าน.1นมาปิ่รี.บปิ่รี8งแล่ะพ.ฒนาเว�บไซต์�ได�

2.3 การว็างแผ่นด+านเน-2อหา การีออกแบบเว�บไซต์�จะต์�องม�การีวางแผู้นให�ช่.ดเจนต์.1งแต์ เรี*�มต์�น เพรีาะถึ�าหากม�การีวางแผู้นด�านเน#1อหาไม ด� จะที่-าให�เว�บไซต์�ไม เปิ่)นรีะเบ�ยบ ส งผู้ล่ให�ผู้ �เข้�าช่มเว�บไซต์�เก*ดความส.บสน การีวางแผู้นด�านเน#1อหาควรีต์อบค-าถึามด�านต์ างๆให�ได� เช่ น ใครีเปิ่)นผู้8�รี .บผู้*ด

17

ช่อบเน#1อหา ม�การีบ.นที่�กข้�อม ล่ไว�ที่��ใด รี ปิ่แบบแฟ=มข้�อม ล่เปิ่)นแบบใด ควรีต์.1งช่#�อเน#1อหาอย างไรี การีต์*ดต์ามแกะรีอยที่-าได�อย างไรี ส*�งเหล่ าน�1เปิ่)นส*�งจ-าเปิ่)นที่��จะต์�องต์รีะหน.กถึ�งอย างมาก หากมองข้�ามส*�งเหล่ าน�1จะที่-าให�การีจ.ดการีก.บเน#1อหาจ-านวนมากที่��จะเพ*�มข้�1นในภายหล่.งน.1นได�ยาก จ�งควรีวางแผู้นเน#1อหาต์ างๆเปิ่)นล่-าด.บ จ.ดการีแฟ=มข้�อม ล่อย างม�ต์รีรีกะ เม#�อผู้ �ออกแบบเว�บไซต์�ต์.ดส*นใจให�ม�การีไหล่ข้องข้�อม ล่ก�ควรีจ.ดการีให�เปิ่)นข้.1นต์อน โดยต์�องม.�นใจว าม�ที่*ศที่างที่��ถึ กต์�อง แล่ะต์.1งช่#�อแฟ=มให�สอดคล่�องก.บเน#1อหา ซ��งเปิ่)นส*�งส-าค.ญอย างย*�ง จากน.1นจะเปิ่)นการีเก�บแฟ=มต์ างๆ

การีสรี�างแผู้นผู้.งข้องเน#1อหาจะที่-าให�เรีาที่รีาบว า ม�จ-านวนเว�บเพจที่��เก��ยวข้�องปิ่รี*มาณเที่ าน.1น หากเปิ่)นเว�บไซต์�ข้นาดใหญ ม�เว�บเพจจ-านวนมาก ควรีม�การีจ.ดกล่8 มข้องเน#1อหาที่.1งหมดที่��ความส.มพ.นธี�ก.นเปิ่)นกล่8 มๆ เช่ น การีศ�กษา ก�ฬา บ.นเที่*ง เปิ่)นต์�น ควรีที่-าบ.ญช่�กล่8 มเน#1อหาต์ างๆ รีวมที่.1งเน#1อหาย อยๆข้องแต์ ล่ะกล่8 มให�ครีอบคล่8มเน#1อหาที่.1งหมด โดยการีวาดภาพโครีงรี างเน#1อหา ด.งภาพที่��20 การีที่-าโครีงรี างเน#1อหาเช่ นน�1 จะช่ วยให�ผู้ �ออกแบบเห�นภาพรีวมข้องการีไหล่ข้องเน#1อหาแล่ะเข้�าใจกรีะบวนการีไหล่ข้องเน#1อหา ว าเม#�อเข้�าไปิ่ที่��เน#1อหาน�1จะพบเน#1อหาย อยๆอย างไรีบ�าง

ภาพที่��20 ต์.วอย างการีสรี�างแผู้นผู้.งข้องเน#1อหา

ที่��มา : http://buildinternet.com/2009/10/how-to-plan-a -

content-heavy-site/ ค�นเม#�อว.นที่��14 ม*ถึ8นายน 2556

18

2.4 การว็างแผ่นโครงสร+างของเว็บไซต์� ในที่��น�1ข้ออธี*บายต์ามรีะบบการีจ.ดการีเน#1อหา(Content Management System : CMS)

ในการีสรี�างแล่ะจ.ดการีเน#1อหาข้องเว�บไซต์�ที่��ได�ออกแบบไว� ปิ่รีะกอบด�วย การีสรี�างเน#1อหา(creation) การีปิ่รี.บปิ่รี8งเน#1อหา(updating) การีกรีะจายเน#1อหา(distribution) การีต์�พ*มพ�เน#1อหา(publishing) การีค�นหาเน#1อหา(discovery) CMS เปิ่�ดที่างให�ผู้ �ใช่�งานสามารีถึต์�พ*มพ�ได�หล่ายล่.กษณะ เช่ น ข้ าว การีปิ่รีะกาศ กรีณ�ศ�กษา ปิ่รีะว.ต์*บ8คคล่ บที่ความ หน.งส#อพ*มพ� ข้�อม ล่ส*นค�า หน.งส#อรี.บรีอง ล่*งค�ที่��ส-าค.ญ แหล่ งข้�อม ล่ออนไล่น� รีวมที่.1งการีดาวน�โหล่ด CMS จะให�ส*ที่ธี*Gในการีเข้�าถึ�งข้�อม ล่เปิ่)นล่-าด.บข้.1น โดย CMS ม�ค8ณล่.กษณะ ด.งน�1

2.1.1 สามารีถึสรี�างแล่ะบรี*หารีจ.ดการีเว�บเพจได�

2.1.2l มารีถึควบค8มรีะบบเนว*เกช่.�นแล่ะเน#1อหาจ-านวนมากข้องเว�บไซต์�ได�

2.1.3 สามารีถึให�ผู้ �ใช่�ควบค8มเน#1อหาได�ต์ามผู้ �ด แล่รีะบบวางโครีงสรี�างให�

2.1.4 สามารีถึบรี*หารีจ.ดการีแผู้นผู้.งเว�บไซต์�แล่ะเต์รี�ยมการีปิ่รี.บปิ่รี8งแก�ไข้ HTML

2.1.5 สามารีถึเข้�ยนกรีะที่ �บนเว�บไซต์�แล่ะสามารีถึเข้�ยนความพ�งพอใจ จ.ดหมวดหม ข้องกรีะที่ �ได�

2.1.6 ม�รีะบบรี.กษาความปิ่ล่อดภ.ย

2.1.7 สามารีถึล่ดความซ-1าซ�อนข้องเน#1อหา

19

2.1.8 สามารีถึจ.ดการีเน#1อหาบนเว�บไซต์� โดยไม ต์�องม�ความรี �เก��ยวก.บภาษา HTML

2.5 การว็างแผ่นการผ่ล3ต์เว็บเพัจ ควรีเข้�าใจหล่.กการีข้องเว�บไซต์�ก อนว า เว�บไซต์�เปิ่รี�ยบเสม#อนการีไหล่ข้องข้�อม ล่ ซ��งจะที่-าให�ผู้ �เข้�าเย��ยมช่มเว�บไซต์�ได�รี.บข้�อม ล่อย างเปิ่)นล่-าด.บ ข้.1นต์อน ถึ�าหากผู้ �สรี�างเว�บไซต์�ไม ม�การีวางแผู้น เว�บไซต์�ก�จะเรี*�มต์�นไม ถึ ก ไม รี �ว าจะเรี*�มต์�นจากต์รีงไหนด� ที่��ส-าค.ญที่��ส8ดค#อควรีออกแบบให�ง ายที่��ส8ด แล่ะรีวดเรี�วที่��ส8ดส-าหรี.บผู้ �ใช่�งานหรี#อผู้ �เข้�าเย��ยมช่มเว�บไซต์�

2.6 การว็างแผ่นระบบเนว็3เกช�&น เปิ่)นการีน-าแผู้นผู้.งโครีงสรี�างเว�บไซต์�จากการีวางแผู้นเว�บไซต์� มาวางแผู้นรีะบบเนว*เกช่.�น ด.งภาพที่��21

ภาพที่��21 ต์.วอย างการีวางแผู้นรีะบบเนว*เกช่.�น

ที่��มา : http://creately.com/examples/website-navigation-

plan ค�นเม#�อว.นที่��14 ม*ถึ8นายน 2556

ข�2นต์อนการพั�ฒนาเว็บไซต์�

การีพ.ฒนาเว�บไซต์�แล่ะน-าเว�บไซต์�เข้�าส รีะบบ www ให�บ8คคล่อ#�นเข้�ามาเย��ยมช่มได�น.1น กรีะบวนการีพ.ฒนาเว�บไซต์�สามารีถึจ-าแนกได�3 ข้.1นต์อน ด.งน�1 (ปิ่รีะไพ ศรี�สะอาด, 2549 : 22-26)

20

1.การเต์ร�ยมการและการว็างแผ่นงาน(pre-production)

เปิ่รี�ยบเสม#อนเข้�มที่*ศที่��จะช่�1น-าที่างหรี#อบ งบอกให�ผู้ �พ.ฒนาเว�บไซต์�ที่รีาบว า ควรีจะต์�องเด*นที่างไปิ่ในที่*ศที่างใด ซ��งข้.1นต์อนน�1จะปิ่รีะกอบด�วย การีเต์รี�ยมก อนการีด-าเน*นการี การีวางแผู้นการีด-าเน*นการี รีวมที่.1งการีรีวบรีวมแล่ะว*เครีาะห�โครีงสรี�าง

1.1 การเต์ร�ยมก�อนการด#าเน3นการ ปิ่รีะกอบด�วย

1.1.1 ก-าหนดว.ต์ถึ8ปิ่รีะสงค�แล่ะเปิ่=าหมายข้องเว�บไซต์� เพ#�อให�เห�นภาพที่��ช่.ดเจน ว าเว�บไซต์�ต์�องการีน-าเสนอส*�งใด ม�ว.ต์ถึ8ปิ่รีะสงค�อย างไรี โดยว.ต์ถึ8ปิ่รีะสงค�ข้องเว�บไซต์�สามารีถึจ-าแนกได�หล่ากหล่ายปิ่รีะเภที่ ได�แก เว�บไซต์�ส วนบ8คคล่ เว�บไซต์�เผู้ยแพรี ข้�อม ล่ส-าหรี.บบรี*ษ.ที่/ห�างรี�าน/องค�กรีต์ างๆ/สถึาบ.น/โรีงเรี�ยน เว�บไซต์�เพ#�อการีที่-าธี8รีกรีรีมค�าข้าย เว�บไซต์�เพ#�อการีโฆษณารีายการีส*นค�า เว�บไซต์�เพ#�อการีศ�กษาที่างไกล่ เว�บไซต์�เพ#�อศ นย�รีวมแล่ะช่ องที่างน-าไปิ่ส แหล่ งข้�อม ล่อ#�น เว�บไซต์�เพ#�อเปิ่)นศ นย�รีวมช่8มช่นคนออนไล่น� แล่ะเว�บแอพล่*เคช่.�นเพ#�อการีใช่�งานเฉพาะที่าง ที่.1งน�1การีก-าหนดว.ต์ถึ8ปิ่รีะสงค�ข้องเว�บไซต์� จะม�ผู้ล่ต์ อการีก-าหนดโครีงสรี�างรี ปิ่แบบ รีวมถึ�งหน�าต์า แล่ะส�ส.นข้องเว�บไซต์�ด�วย

1.1.2 ก-าหนดช่#�อเว�บไซต์� แล่ะช่#�อย อารี�แอล่

1.1.3 ก-าหนดกล่8 มเปิ่=าหมายที่��จะให�เข้�าช่มเว�บไซต์� เพ#�อจะได�ที่รีาบว าผู้ �ที่��จะเข้�าช่มเว�บค#อใครี จะได�ด-าเน*นการีออกแบบแล่ะด-าเน*นการีจ.ดที่-าเว�บไซต์� เพ#�อให�ต์อบสนองความต์�องการีผู้ �ช่มกล่8 มน.1นได�ที่ากที่��ส8ด

21

1.1.4 ศ�กษากล่8 มค แข้ ง เพ#�อจะได�ที่รีาบว า ค แข้ งข้องเว�บที่��จะพ.ฒนาค#อใครี จะได�ศ�กษาแนวที่างการีออกแบบ แล่ะการีด-าเน*นดารีข้องค แข้ ง เพ#�อเปิ่)นต์.วอย างหรี#อแนวที่างในการีออกแบบแล่ะด-าเน*นการีในการีจ.ดที่-าเว�บไซต์�ต์ อไปิ่

1.2 การว็างแผ่นการด#าเน3นการ หล่.งการีเต์รี�ยมก อนการีด-าเน*นการี ควรีม�การีวางแผู้นไว�ล่ วงหน�า เพ#�อให�การีพ.ฒนาเว�บไซต์�ม�แนวที่างที่��ช่.ดเจน

1.3 การรว็บรว็มและว็3เคราะห�โครงสร+าง เปิ่)นข้.1นต์อนที่��ต์ อจากการีวางแผู้นการีด-าเน*นการี เน#�องจากเน#1อหาแล่ะข้�อม ล่เปิ่)นส*�งที่��เช่*ญช่วนให�ผู้ �อ#�นเข้�ามาเย��ยมช่มเว�บไซต์� ฉะน.1น ข้. 1นต์อนน�1จ�งเปิ่)นการีรีวบรีวมข้�อม ล่ที่��จ-าเปิ่)นในการีสรี�างเว�บเพจต์ามห.วข้�อที่��ก-าหนดไว� เพ#�อจะได�ที่รีาบว า จ-าเปิ่)นต์�องใช่�ข้�อม ล่อะไรี จากแหล่ งใดบ�าง

2.การที่#างานจร3งในการออกแบบและพั�ฒนาเว็บเพัจ(on-

production) แบ งได�เปิ่)น 2 ส วน ค#อ

2.1 การออกแบบเว็บเพัจ น.บเปิ่)นข้.1นต์อนในการีออกแบบรี ปิ่รี าง โครีงสรี�างแล่ะล่.กษณะที่างด�านกรีาฟ�กที่างหน�าเว�บเพจ โดยโปิ่รีแกรีมที่��น*ยมน-ามาใช่�ในการีออกแบบค#อ โฟโต์�ช่อปิ่ หรี#อ ไฟล่�เว*รี�ก ซ��งจะช่ วยในการีสรี�างเค�าโครีงข้องหน�าเว�บแล่ะองค�ปิ่รีะกอบต์ างๆ เช่ น ช่#�อเว�บไซต์� โล่โก� รี ปิ่ไอคอน ภาพเคล่#�อนไหว แบรีนเนอรี�โฆษณา เปิ่)นต์�น

ส*�งส-าค.ญที่��ต์�องค-าน�งถึ�งในการีออกแบบแล่ะค-าน�งถึ�งในการีสรี�างเว�บเพจ ค#อว.ต์ถึ8ปิ่รีะสงค�ในการีจ.ดที่-าเว�บไซต์� แล่ะเปิ่=าหมายข้องกล่8 มผู้ �เข้�าช่ม เว�บเบรีาว�เซอรี�ที่��ใช่�แสดงผู้ล่เว�บไซต์� เพ#�อที่��จะได�ที่-าการีก-าหนดรี ปิ่แบบแล่ะล่.กษณะเว�บเพจ ได�แก ข้นาดข้องหน�าเว�บเพจ แล่ะล่.กษณะการีวางองค�

22

ปิ่รีะกอบข้องเว�บไซต์�ให�สวยงามแล่ะแสดงผู้ล่ได�เรี�ว รีวมที่.1ง ควรีก-าหนดแล่ะวางโครีงรี างข้องเว�บเพจ ที่.1งในส วนข้องจ-านวนเว�บเพจ แล่ะเน#1อหาในแต์ ล่ะเว�บเพจ เปิ่)นแผู้นผู้.งเว�บไซต์�ออกมาบนกรีะดาษ

2.2 การพั�ฒนาเว็บเพัจ หล่.งจากออกแบบโครีงรี างข้องเว�บเพจแล่ะแต์ ล่ะหน�าเว�บเพจแล่�ว ข้.1นต์อนต์ อไปิ่ค#อ การีด-าเน*นการีสรี�างเว�บเพจ ซ��งรีวมถึ�งการีจ.ดหาองค�ปิ่รีะกอบที่��ต์�องน-ามาใช่� เช่ น ส#�อม.ล่ต์*ม�เด�ย ภาพกรีาฟ�ก แบบฟอรี�มต์ างๆ แล่ะการีสรี�างไฟล่�รี ปิ่ภาพ/เส�ยง ที่��เก��ยวข้�องก.บเน#1อหา ซ��งต์�องค-าน�งถึ�งรี ปิ่แบบข้องไฟล่�ที่��น-ามาใช่�แล่ะสอดคล่�องก.บซอฟต์�แวรี�ที่��ใช่�ในการีพ.ฒนาด�วย จากน.1นน-าภาพแล่ะเส�ยงมาเก�บไว�ในไดเรี�กที่อรี��หรี#อโฟล่เดอรี�ที่��ก-าหนดไว� แล่�วน-าข้�อม ล่ที่.1งหมดที่��รีวบรีวมไว�จากที่��กล่ าวมาข้�างต์�น มาสรี�างเปิ่)นเว�บไซต์�ด�วยภาษา HTML หรี#อเครี#�องม#อในการีสรี�างเว�บเพจอ#�นต์ามแนวค*ดที่��ได�ออกแบบไว�แล่�ว ซ��งรีวมถึ�งการีเข้�ยนโปิ่รีแกรีมสครี*ปิ่ต์�ในการีใช่�งานด�วย

3.การสร4ปงานเพั-&อส�งมอบ(post- production) ปิ่รีะกอบด�วย

3.1 การที่ดสอบและปร�บปร4งเว็บไซต์� หมายถึ�ง การีที่ดสอบเว�บเพจที่��สรี�างข้�1นแบบออฟไล่น� โดยย.งไม ได�ม�การีน-าเว�บไซต์�เข้�าส อ*นเที่อรี�เน�ต์ แต์ ก�สามารีถึแสดงผู้ล่ได�เหม#อนจรี*งผู้ านเว�บเบรีาว�เซอรี� เช่ น ใช่�โปิ่รีแกรีมอ*นเที่อรี�เน�ต์เอ�กซ�พล่อเรีอรี� ต์รีวจสอบต์.วอย างเว�บเพจหน�าต์ างๆที่��สรี�างไว� เช่ น ข้นาดต์.วอ.กษรี ข้นาดรี ปิ่ภาพ เส�ยง การีใช่�ส� ต์ารีาง เปิ่)นต์�น ว าม�ความเหมาะสมหรี#อไม พรี�อมก.บที่-าการีแก�ไข้ปิ่รี.บปิ่รี8งจนเปิ่)นที่��น าพอใจ

23

3.2 การเผ่ยแพัร�เว็บไซต์� เม#�อที่ดสอบเว�บไซต์�จนสมบ รีณ�แล่�ว ข้. 1นต์อนในการีเผู้ยแพรี ผู้ านเว�บไซต์� ค#อ การีเผู้ยแพรี ให�คนที่.�วไปิ่ได�รี �จ.ก หรี#อเรี�ยกว าการีน-าเว�บไซต์�ข้�1นเซ*รี�ฟเวอรี� หรี#อการีอ.พโหล่ด ซ��งเปิ่)นการีถึ ายโอนเว�บเพจแล่ะส วนปิ่รีะกอบอ#�น เช่ น ไฟล่�ภาพ ไฟล่�เพล่งปิ่รีะกอบ เปิ่)นต์�น ไปิ่ฝ่ากไว�ที่��โฮสต์� โดยเจ�าข้องเว�บอาจต์�องจดที่ะเบ�ยนโดเมนเนม แล่ะเช่ าพ#1นที่��โฮสต์�จากผู้ �ให�บรี*การีอ*นเที่อรี�เน�ต์(Internet Service Provider :

ISP) รีายใดรีายหน��ง เม#�อเล่#อกโฮสต์�ได�แล่�ว ข้. 1นต์ อไปิ่ก�เปิ่)นการีถึ ายโอนเว�บเพจไปิ่ฝ่ากไว�ที่��โฮสต์� ซ��งโดยที่.�วไปิ่จะใช่�ซอฟต์�แวรี�ถึ ายโอนข้�อม ล่เปิ่)นเครี#�องม#อ ซอฟต์�แวรี�ปิ่รีะเภที่น�1 เรี�ยกว า ซอฟต์�แวรี�เอฟที่�พ�ไคล่เอนด�(FTP

client) ผู้ �พ.ฒนาก�สามารีถึน-าเว�บเพจอ.พโหล่ดข้�1นส อ*นเที่อรี�เน�ต์แล่ะปิ่รีะช่าส.มพ.นธี�ให�คนที่.�วไปิ่ได�รี �จ.กได� ซ��งการีที่-าให�คนที่.�วไปิ่รี.บรี �แล่ะใช่�บรี*การีเว�บไซต์�ได�มากน.1น จ-าเปิ่)นต์�องม�การีปิ่รีะช่าส.มพ.นธี�อย างต์ อเน#�องแล่ะใช่�รีะยะเวล่าพอสมควรี ซ��งอาจที่-าโดยม�ปิ่=ายโฆษณาปิ่รีะช่าส.มพ.นธี�ออนไล่น�ในหน�าเว�บไซต์�อ#�นๆ หรี#อการีแล่กเปิ่ล่��ยนปิ่=ายโฆษณารีะหว างก.น การีโฆษณาผู้ านเครี#�องม#อค�นหา การีโฆษณาผู้ านจดหมายอ*เล่�กที่รีอน*กส� การีต์ล่าดแบบไวรี.ล่ ซ��งคล่�ายก.บกล่ย8ที่ธี�การีบอกแบบปิ่ากต์ อปิ่าก หากแต์ เปิ่)นการีปิ่รีะช่าส.มพ.นธี�โดยส#�อปิ่รีะเภที่เครี#อข้ ายส.งคมที่��ม�อย แล่ะควรีม�การีเก�บสถึ*ต์*ข้องผู้ �เข้�าช่มด�วย ก�สามารีถึที่-าให�ปิ่รีะเม*นได�ว า เว�บไซต์�ที่��พ.ฒนาข้�1นน.1นได�รี.บความสนใจมากน�อยเพ�ยงใด

3.3 การบ#าร4งร�กษาเว็บไซต์� เปิ่)นการีปิ่รี.บปิ่รี8งเน#1อหา ภาพปิ่รีะกอบ หรี#อการีปิ่รี.บปิ่รี8งเว�บไซต์�ให�เปิ่)นปิ่7จจ8บ.น ซ��งถึ#อเปิ่)นข้.1นต์อนที่��ส-าค.ญ เพรีาะในโล่กอ*นเที่อรี�เน�ต์ม�การีเปิ่ล่��ยนแปิ่ล่งอย างรีวดเรี�วอย ต์ล่อดเวล่า ผู้ �เข้�าช่มเว�บม.กใช่�เวล่าในการีค�นหาแล่ะเปิ่�ดผู้ านเว�บไซต์�ต์ างๆอย างรีวดเรี�ว หากพบว าเว�บไซต์�ที่��ผู้ �สรี�างน-าเสนอไม ได�ม�การีปิ่รี.บปิ่รี8ง

24

เปิ่ล่��ยนแปิ่ล่งหรี#อม�ข้�อม ล่ใหม ๆ เพ*�มข้�1นเล่ย ผู้ �เข้�าช่มเว�บก�อาจล่ดจ-านวนล่งเรี#�อยๆ จนกล่ายเปิ่)นเว�บที่��ไม ม�คนเข้�ามาเย��ยมช่มเล่ยหรี#อเปิ่)นเว�บที่��ต์ายแล่�ว

ด.งน.1น การีปิ่รี.บปิ่รี8งเว�บไซต์�อย เสมอ โดยม�การีเพ*�มข้�อม ล่ข้ าวสารีใหม ๆ อย เปิ่)นปิ่รีะจ-า ก�จะที่-าให�เว�บไซต์�ที่.นสม.ย ม�ผู้ �ช่มเข้�าช่มเปิ่)นปิ่รีะจ-าแล่ะมากข้�1น จนพ.ฒนาเปิ่)นเว�บไซต์�ยอดน*ยมได�ในที่��ส8ด

การออกแบบโครงสร+างเว็บไซต์�

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

ปิ่รีะสาน จ.นที่ะคาม(2552 :12) กล่ าวว า การีออกแบบโครีงสรี�าง“

เว�บไซต์� ค#อ การีวางแผู้นการีจ.ดล่-าด.บ เน#1อหาสารีะข้องเว�บไซต์� ออกเปิ่)นหมวดหม เพ#�อจ.ดที่-าเปิ่)นโครีงสรี�างในการีจ.ดวางหน�าเว�บเพจที่.1งหมด เปิ่รี�ยบเสม#อนแผู้นที่�� ที่��ที่-าให�เห�นโครีงสรี�างที่.1งหมดข้องเว�บไซต์� ช่ วยในน.กออกแบบเว�บไซต์�ไม ให�หล่งที่าง การีจ.ดโครีงสรี�างข้องเว�บไซต์� ม�จ8ดม8 งหมายส-าค.ญค#อ การีที่��จะที่-าให�ผู้ �เข้�าเย��ยมช่ม สามารีถึค�นหาข้�อม ล่ในเว�บเพจได�อย างเปิ่)นรีะบบ ซ��งถึ#อว าเปิ่)นข้.1นต์อนที่��ส-าค.ญ ที่��สามารีถึสรี�างความส-าเรี�จให�ก.บผู้ �ที่��ที่-าหน�าที่��ในการีออกแบบแล่ะพ.ฒนาเว�บไซต์� (Webmaster) การีออกแบบโครีงสรี�างหรี#อจ.ดรีะเบ�ยบข้องข้�อม ล่ที่��ช่.ดเจน แยกย อยเน#1อหาออกเปิ่)นส วนต์ าง ๆ ที่��ส.มพ.นธี�ก.นแล่ะให�อย ในมาต์รีฐานเด�ยวก.น จะช่ วยให�น าใช่�งานแล่ะง าย ต์ อการีเข้�าอ านเน#1อหาข้องผู้ �ใช่�เว�บไซต์�”

2.ประเภที่ของโครงสร+างเว็บไซต์�

โครีงสรี�างเว�บไซต์�สามารีถึแบ งได�4 ปิ่รีะเภที่ ด.งน�1 (ว*ช่าการีพ.ฒนางานบนเว�บ, 2551:ไม ปิ่รีากฏหน�า)

25

2.1 โครงสร+างเว็บไซต์�แบบเร�ยงล#าด�บ ม�ล่.กษณะเปิ่)นโครีงสรี�างแบบธีรีรีมดาที่��น*ยมใช่�ก.นมากที่��ส8ด เน#�องจากง ายต์ อการีจ.ดรีะบบข้�อม ล่ เปิ่)นโครีงสรี�างที่��ใช่�เก�บข้�อม ล่ที่��เปิ่)นเรี#�องรีาวต์ามล่-าด.บเวล่า หรี#อด-าเน*นเน#1อหาไปิ่ต์ามล่-าด.บ หรี#อด-าเน*นเน#1อหาจากเรี#�องที่.�วๆไปิ่ กว�างๆ ไปิ่ส เรี#�องที่��จ-าเพาะเจาะจงมากข้�1น หรี#อม�รีายล่ะเอ�ยดมากข้�1น หรี#อการีเรี�ยงล่-าด.บต์ามต์.วอ.กษรี เช่ น ดรีรีช่น� สารีาน8กรีม หรี#ออภ*ธีานศ.พที่� เปิ่)นต์�น

2.1.1 ประโยชน�ของเว็บไซต์�แบบเร�ยงล#าด�บ ผู้ �ออกแบบเว�บไซต์�ออกแบบได�ง ายในการีจ.ดรีะบบโครีงสรี�าง แล่ะง ายต์ อการีปิ่รี.บปิ่รี8งแก�ไข้ เน#�องจากม�โครีงสรี�างที่��ไม ซ.บซ�อน การีเพ*�มเต์*มเน#1อหาเข้�าไปิ่สามารีถึที่-าได�ง าย เพรีาะม�ผู้ล่กรีะที่บต์ อบางส วนข้องโครีงสรี�างเที่ าน.1น แต์ ข้�อเส�ยข้องโครีงสรี�างรีะบบน�1ค#อ ผู้ �ใช่�ไม สามารีถึก-าหนดที่*ศที่างการีเข้�าส เน#1อหาข้องต์นเองได�

2.1.2 การน#าเว็บไซต์�แบบเร�ยงล#าด�บไปใช+ โครีงสรี�างน�1เหมาะก.บเว�บที่��ม�ข้นาดเล่�ก เน#1อหาไม ซ.บซ�อน เหม#อนการีอ านหน.งส#อเรี�ยงล่-าด.บไปิ่แต์ ล่ะหน�า ด.งภาพที่��22

ภาพที่��22 ต์.วอย างเว�บไซต์�แบบเรี�ยงล่-าด.บที่��ม�การีเพ*�มเน#1อหาย อย

ที่��มา : http://e-learning.nectec.or.th/ ค�นเม#�อว.นที่�� 14 ม*ถึ8นายน 2556

26

2.2 โครงสร+างเว็บไซต์�แบบล#าด�บข�2น

เปิ่)นโครีงสรี�างที่��ด�ว*ธี�หน��งในการีจ.ดรีะบบโครีงสรี�างที่��ม�ความซ.บซ�อนข้องข้�อม ล่ โดยแบ งเน#1อหาออกเปิ่)นส วนต์ างๆ แล่ะม�รีายล่ะเอ�ยดย อยๆล่ดหล่.�นก.น โดยใช่�แนวค*ดเด�ยวก.นก.บแผู้นภ ม*องค�กรี จ�งง ายต์ อการีที่-าความเข้�าใจก.บโครีงสรี�างข้องเน#1อหา ล่.กษณะเด น ค#อ การีม�จ8ดเรี*�มต์�นที่��จ8ดรี วมจ8ดเด�ยว น.�นค#อ โฮมเพจ แล่ะเช่#�อมโยงไปิ่ส เน#1อหาในล่.กษณะจากบนล่งล่ าง

2.2.1 ประโยชน�ของเว็บไซต์�แบบล#าด�บช�2น ค#อ ผู้ �ช่มเว�บไซต์�สามารีถึแยกแยะเน#1อหาได�ง าย แล่ะสะดวกต์ อการีจ.ดรีะบบข้�อม ล่ข้องผู้ �ออกแบบ นอกจากน�1ผู้ �ด แล่เว�บไซต์�สามารีถึด แล่แล่ะปิ่รี.บปิ่รี8งแก�ไข้เว�บไซต์�ได�ง าย เน#�องจากม�การีแบ งเปิ่)นหมวดหม ช่.ดเจน ส วนข้�อเส�ย ค#อในส วนข้องการีออกแบบโครีงสรี�าง ต์�องรีะว.งอย าให�โครีงสรี�างที่��ไม สมด8ล่ น.�นค#อ ม�ล่.กษณะการีจ.ดการีข้�อม ล่ในแต์ ล่ะห.วข้�อไม สมด8ล่ก.น โดยม�บางห.วข้�อที่��ม�เน#1อหาน�อยเก*นไปิ่ หรี#อบางห.วข้�อม�เน#1อหามากเก*นไปิ่ ที่-าให�โครีงสรี�างข้องเว�บไม สมด8ล่

2.2.2 การน#าเว็บไซต์�แบบล#าด�บช�2นไปใช+ โครีงสรี�างแบบน�1เหมาะก.บเว�บไซต์�ที่��ม�ข้นาดใหญ ม�เน#1อหามาก แต์ ม�โครีงสรี�างไม ซ.บซ�อน ส วนใหญ จะใช่�ก.บเว�บไซต์�การีเรี�ยนการีสอน

2.3 โครงสร+างเว็บไซต์�แบบต์าราง

ม�ความซ.บซ�อนมากกว ารี ปิ่แบบที่��ผู้ านมา การีออกแบบเพ*�มความย#ดหย8 นให�แก การีเข้�าส เน#1อหาข้องผู้ �ใช่� โดยเพ*�มการีเช่#�อมโยงซ��งก.นแล่ะก.น รีะหว างเน#1อหาแต์ ล่ะส วน เหมาะแก การีแสดงให�เห�นถึ�งความส-าพ.นธี�ก.นข้อง

27

เน#1อหา การีเข้�าส เน#1อหาข้องผู้ �ใช่�จะไม เปิ่)นล่.กษณะเช่*งเส�นต์รีง เน#�องจากผู้ �ใช่�สามารีถึเปิ่ล่��ยนที่*ศที่างการีเข้�าส เน#1อหาข้องต์นเองได�

2.3.1 ประโยชน�ของเว็บไซต์�แบบต์าราง โครีงสรี�างแบบต์ารีาง เปิ่)นโครีงสรี�างที่��ม�ความย#ดหย8 นส-าหรี.บผู้ �ใช่� ที่8กๆเน#1อหาม�ความส-าค.ญเที่ าๆก.น แล่ะม�ล่.กษณะรี วมก.น ด.งน.1น ที่8กๆเน#1อหาจ�งสามารีถึเช่#�อมโยงถึ�งก.นได� ต์ามที่��ผู้ �ใช่�ต์�องการี

2.3.2 การน#าเว็บไซต์�แบบต์ารางไปใช+ โครีงสรี�างแบบน�1เหมาะก.บเว�บไซต์�ที่��ม�ข้นาดใหญ ม�เน#1อหาจ-านวนมากแล่ะม�โครีงสรี�างซ.บซ�อน ในการีจ.ดรีะบบโครีงสรี�างแบบน�1 เน#1อหาที่��น-ามาใช่�แต์ ล่ะส วนควรีม�ล่.กษณะที่��เหม#อนก.น แล่ะสามารีถึใช่�รี ปิ่แบบรี วมก.นได� ในส วนข้องหารีออกแบบจ-าเปิ่)นต์�องม�การีวางแผู้นที่��ด� เน#�องจากม�การีเช่#�อมโยงที่��เก*ดข้�1นได�หล่ายที่*ศที่าง นอกจากน�1การีปิ่รี.บปิ่รี8งแก�ไข้อาจเก*ดความย8 งยาก เม#�อต์�องการีเพ*�มเน#1อหาในภายหล่.ง

2.4 โครงสร+างเว็บไซต์�แบบใยแมงม4ม

ม�ความย#ดหย8 นมากที่��ส8ด ที่8กหน�าในเว�บสามารีถึจะเช่#�อมโยงไปิ่ถึ�งก.นได�หมด เปิ่)นการีสรี�างรี ปิ่แบบการีเข้�าส �เน#1อหาที่��เปิ่)นอ*สรีะ ผู้ �ใช่�สามารีถึก-าหนดว*ธี�การีเข้�าส เน#1อหาได�ด�วยต์นเอง การีเช่#�อมโยงแต์ ล่ะหน�าอาศ.ยการีโยงใยข้�อความที่��ม�มโนที่.ศน�เหม#อนก.น ข้องแต์ ล่ะหน�าในล่.กษณะข้องไฮเปิ่อรี�เที่�กซ�หรี#อไฮเปิ่อรี�ม�เด�ย โครีงสรี�างล่.กษณะน�1จ.ดเปิ่)นรี ปิ่แบบที่��ไม ม�โครีงสรี�างที่��แน นอนต์ายต์.ว นอกจากน�1การีเช่#�อมโยงไม ได�จ-าก.ดเน#1อหาเฉพาะภายในเว�บน.1นๆ แต์ สามารีถึเช่#�อมโยงออกไปิ่ส เน#1อหาจากเว�บภายนอกได�อ�กด�วย

2.4.1 ประโยชน�ของเว็บไซต์�แบบใยแมงม4ม ค#อ ง ายต์ อผู้ �ใช่�ในการีที่ องเที่��ยวบนเว�บ โดยผู้ �ใช่�สามารีถึก-าหนดที่*ศที่างการีเข้�าส เน#1อหาได�

28

ด�วยต์นเอง แต์ ข้�อเส�ย ค#อ ถึ�าม�การีเพ*�มเน#1อหาใหม ๆ อย เสมอ จะเปิ่)นการียากในการีปิ่รี.บปิ่รี8ง นอกจากน�1การีเช่#�อมโยงรีะหว างข้�อม ล่ที่��ม�มากมายน.1น อาจที่-าให�ผู้ �ใช่�เก*ดความส.บสนได�

2.4.2 การน#าเว็บไซต์�แบบใยแมงม4มไปใช+ เน#�องจากโครีงสรี�างแบบใยแมงม8ม เปิ่)นโครีงสรี�าวที่��ม�ความย#ดหย8 นมากที่��ส8ด จ�งน*ยมใช่�ในแวดวงธี8รีก*จเพ#�ออ-านวยความสะดวกแก ผู้8�เย��ยมช่ม หรี#อผู้ �ที่��คาดว าจะเปิ่)นล่ กค�าอย างเต์�มที่��

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

ควรีพ*จารีณาด.งน�1 (รี.ต์น�ส8ดา ปิ่รีะกะสา, 2547 : 21)

3.1 ก-าหนดว.ต์ถึ8ปิ่รีะสงค� โดยพ*จารีณาว าเปิ่=าหมายข้องการีสรี�างเว�บไซต์�น�1ที่-าเพ#�ออะไรี

3.2 ศ�กษาค8ณล่.กษณะข้องผู้ �ที่��เข้�ามาใช่�ว ากล่8 มเปิ่=าหมายใดที่��ผู้ �สรี�างต์�องการีส#�อสารี ข้�อม ล่อะไรีที่��พวกเข้าต์�องการีโดยข้.1นต์อนน�1ควรีปิ่ฏ*บ.ต์*ควบค ไปิ่ก.บข้.1นต์อนที่��หน��ง

3.3 วางแผู้นเก��ยวก.บการีจ.ดรี ปิ่แบบโครีงสรี�างเน#1อหาสารีะ การีออกแบบเว�บไซต์�ต์�องม�การีจ.ดโครีงสรี�างหรี#อจ.ดรีะเบ�ยบข้�อม ล่ที่��ช่.ดเจน การีที่��เน#1อหาม� ความต์ อเน#�องไปิ่ไม ส*1นส8ดหรี#อกรีะจายมากเก*นไปิ่ อาจที่-าให�เก*ดความส.บสนต์ อผู้ �ใช่�ได� ฉะน.1นจ�งควรีออกแบบให�ม�ล่.กษณะที่��ช่.ดเจนแยกย อยออกเปิ่)นส วนต์ าง ๆ จ.ดหมวดหม ในเรี#�องที่��ส.มพ.นธี�ก.น รีวมที่.1งอาจม�การีแสดงให�ผู้ �ใช่�เห�นแผู้นที่��โครีงสรี�างเพ#�อปิ่=องก.นความส.บสนได�

29

3.4 ก-าหนดรีายล่ะเอ�ยดให�ก.บโครีงสรี�าง ซ��งพ*จารีณาจากว.ต์ถึ8ปิ่รีะสงค�ที่��ต์. 1งไว� โดยต์.1งเกณฑ์�ในการีใช่� เช่ น ผู้ �ใช่�ควรีที่-าอะไรีบ�าง จ-านวนหน�าควรีม�เที่ าใด ม�การีเช่#�อมโยง มากน�อยเพ�ยงใด

3.5 หล่.งจากน.1น จ�งที่-าการีสรี�างเว�บไซต์�แล่�วน-าไปิ่ที่ดล่องเพ#�อหาข้�อผู้*ดพล่าดแล่ะที่-าการีแก�ไข้ปิ่รี.บปิ่รี8ง แล่�วจ�งน-าเข้�าส เครี#อข้ ายอ*นเที่อรี�เน�ต์เปิ่)นข้.1นส8ดที่�าย

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

องค�ปิ่รีะกอบข้องเว�บไซต์�สามารีถึแบ งออกเปิ่)น 4 ส วน ได�แก (Hellomyweb, 2554 :ไม ปิ่รีากฎหน�า)ที่ฤษฎ�การีออกแบบเว�บที่ฤษฎ�การีออกแบบเว�บ

1.ส�ว็นห�ว็ของหน+า(Page Header)

เปิ่)นส วนที่��อย ด�านบนส8ดข้องหน�าเว�บเพจ เปิ่)นองค�ปิ่รีะกอบที่��ส-าค.ญที่��ส8ดข้องหน�า เน#�องจากเปิ่)นส วนที่��ด�งด ดผู้ �ช่มให�ต์*ดต์ามเน#1อหาภายในเว�บไซต์� ม.กใส ภาพกรีาฟ�กเพ#�อสรี�างความปิ่รีะที่.บใจ ส วนใหญ ปิ่รีะกอบด�วย ซ��งเว�บไซต์�หรี#อช่#�อห.วข้�อข้องเว�บเพจย อย เมน ในการีเช่#�อมโยง แล่ะแบรีนเนอรี�โฆษณา การีออกแบบส วนห.วข้องเว�บเพจม�หล่.กการีที่��ส-าค.ญ ค#อ ต์�องรีะบ8ช่#�อหรี#อโล่โก�ข้ององค�กรีที่8กครี.1ง เพ#�อผู้ �ช่มเว�บไซต์�จะได�ที่รีาบว าก-าล่.งช่มเว�บไซต์�ใดอย

2.ส�ว็นของเน-2อหา(Page Content)

เปิ่)นองค�ปิ่รีะกอบส-าค.ญที่��ม�ผู้ล่ต์ อการีต์.ดส*นใจเย��ยมช่มข้�อม ล่ข้องผู้ �ช่มเว�บ ว าควรีช่มเว�บไซต์�น�1ต์ อหรี#อไม การีออกแบบส วนเน#1อหา ควรี

30

ก-าหนดว.ต์ถึ8ปิ่รีะสงค�ข้องเว�บไซต์�ว าต์�องการีน-าเสนอข้�อม ล่เก��ยวก.บอะไรี จากน.1นจ�งค�นหาข้�อม ล่ให�ครีอบคล่8มเรี#�องที่��เก��ยวข้�องให�มากที่��ส8ด แล่�วน-าข้�อม ล่เหล่ าน.1นมาก-าหนดรี ปิ่แบบการีน-าเสนอข้�อม ล่ เช่ น การีน-าเสนอด�วยรี ปิ่ภาพ เส�ยง คล่*ปิ่ ว*ด�โอ หรี#อต์.วอ.กษรี เปิ่)นต์�น ข้�อควรีรีะว.งในการีออกแบบส วนเน#1อหาค#อ ข้�อความในเพจไม ควรีม�ความจ8ไฟล่�ข้�อม ล่มากเก*นไปิ่ เน#�องจากจะที่-าให�โหล่ดเว�บได�ช่�า หากเปิ่)นต์.วอ.กษรีไม ควรียาวจนเก*นไปิ่ ควรีที่-าให�ส วนเน#1อหากรีะช่.บได�ใจความ

3.ส�ว็นคอล�มน�การเช-&อมโยง(Page Sidebar)

เปิ่)นเครี#�องม#อที่��น.กออกแบบเว�บไซต์�ควรีก-าหนดไว�เพ*�มเต์*ม (อาจไม ม�ส วนน�1ก�ได�) เพ#�ออ-านวยความสะดวกก.บผู้ �ช่มในการีเล่#อกช่มส*�งที่��ต์�องการีอย างง ายดาย หล่.กการีออกแบบส วนคอล่.มน�การีเช่#�อมโยง จะเน�นความง ายในการีใช่�งานแล่ะความสม-�าเสมอบนเว�บเพจ ผู้ �ออกแบบเว�บเพจต์�องม.�นใจว า สามารีถึเช่#�อมโยงการีที่-างานที่8กเว�บเพจได�อย างถึ กต์�อง

4.ส�ว็นที่+ายของหน+า(Page Footer)

เปิ่)นส วนที่��อย ด�านล่ างส8ดข้องหน�า ม.กวางรีะบบน-าที่างที่��เปิ่)นล่*งค�ข้�อความง ายๆ แล่ะอาจแสดงข้�อม ล่เพ*�มเต์*มเก��ยวก.บเน#1อหาภายในเว�บไซต์� เช่ น เจ�าข้องเว�บไซต์� ข้�อความแสดงล่*ข้ส*ที่ธี*G ว*ธี�การีต์*ดต์ อก.บผู้ �ด แล่เว�บไซต์� การีแนะน-าการีใช่�เว�บไซต์� เปิ่)นต์�น การีออกแบบส วนที่�ายข้องเว�บเพจจะเน�นความสม-�าเสมอเช่ นเด�ยวก.บส วนห.วข้องเว�บเพจ ค#อ ส วนที่�ายข้องเว�บเพจจะปิ่รีากฏอย ในที่8กเว�บเพจย อยด�วย ส วนที่�ายข้องหน�าจะเปิ่)นต์.วบอกผู้ �ช่มว าส วนน�1ค#อล่ างส8ดข้องหน�าที่��แสดงอย แล่�ว ไม ม�เน#1อหาเพ*�มเต์*มแล่�ว

นอกจากส วนปิ่รีะกอบที่.1ง 4 ส วนแล่�ว ย.งควรีค-าน�งถึ�งพ#1นที่��ว างในเว�บไซต์� เน#�องจากเว�บไซต์�ส วนใหญ ม.กไม เห�นความส-าค.ญข้องการีเว�นพ#1นที่��

31

ว างในเว�บไซต์� ม.กม�การีใส ภาพหรี#อต์.วหน.งส#อเข้�าไปิ่ให�มากที่��ส8ด เน#�องจากค*ดว าจะที่-าให�เว�บด สวยงามข้�1น หรี#อใช่�พ#1นที่��ๆม�อย ค8�มค าที่��ส8ด หากออกแบบโดยไม ค-าน�งว าต์�องม�พ#1นที่��ว างอย ในเว�บไซต์� จะที่-าให�เว�บไซต์�ด ไม สบายต์า

การประเม3นเว็บไซต์� 

แนวที่างในการีปิ่รีะเม*นเว�บไซต์� ม�ด.งน�1 (prachyanun, 2552 :ไม ปิ่รีากฏหน�า)

1. หน+าที่�&ของเว็บไซต์� (Authority) เก��ยวก.บหน�าที่��ข้องเว�บที่��สรี�างข้�1นน.1นต์�องด ว าใครีหรี#อผู้ �ใช่�เว�บน�1 อะไรีค#อความถึ กต์�อง เหมาะสม ช่อบธีรีรีม รีะหว างความส.มพ.นธี�ข้องเรี#�อง แล่ะ การีรี.บปิ่รีะก.นค8ณภาพข้องเว�บเพจน�1ที่��ม�ต์ อผู้ �ช่ม

2. คว็ามถู)กต์+อง (Accuracy) แหล่ งข้�อม ล่แล่ะข้�อเที่�จจรี*งที่��น-ามาสรี�างเว�บสามารีถึแยกแยะเปิ่)นปิ่รีะเด�นรีายการีต์ างๆ สามารีถึต์รีวจสอบย�อนหล่.งได�หรี#อไม

3. จ4ดประสงค� (Objective) จ8ดม8 งหมายในการีสรี�างช่.ดเจนแล่ะบอกความส.มพ.นธี�ข้องส*�งที่��ต์�องการีน.1นช่.ดเจน

4. คว็ามเป1นป8จจ4บ�น (Currency) เว�บเพจที่��สรี�างข้�1นน.1นต์�องแสดงว.นที่��ที่��เปิ่)นปิ่7จจ8บ.นด�วย เช่ น บอกว าสรี�างเม#�อใด แล่ะม�การีแก�ไข้ครี.1งหล่.งส8ดเม#�อใด

5. คว็ามครอบคล4ม (Coverage) การีสรี�างเว�บไซต์�ต์�องให�ต์รีงก.บจ8ดสนใจ ห.วเรี#�องม�ความช่.ดเจน เหมาะก.บรี ปิ่ภาพ โครีงเรี#�องแล่ะเน#1อหาสารีะว*ธี�การีค�นหาข้�อม ล่ในเว�บไซต์�ช่.ดเจฯ

จากที่��กล่ าวมาที่.1งหมดน.1น ในการีจ.ดที่-าเว�บไซต์�ข้�1นมาเว�บไซต์�หน��ง สามารีถึก-าหนดว.ต์ถึ8ปิ่รีะสงค� หรี#อเล่#อกจ.ดที่-าเว�บไซต์�ในล่.กษณะใดล่.กษณะหน��ง หรี#อเล่#อกที่��จะใช่�รี ปิ่แบบ แล่ะปิ่รีะโยช่น�ข้องการีจ.ดที่-า จากที่8กปิ่รีะเภที่

32

ข้องเว�บไซต์�ก�ได� เหล่ าน�1เปิ่)นเพ�ยงการีที่-าความเข้�าใจ เก��ยวก.บเว�บไซต์� เพ#�อเปิ่)นแนวที่างให�ที่ านสามารีถึ เล่#อกปิ่รีะเภที่ข้องเว�บไซต์�ที่��เหมาะสมก.บธี8รีก*จข้องที่ าน, ก-าหนดข้อบเข้ต์ข้องการีจ.ดที่-า, แล่ะใช่�เปิ่)นแนวที่างปิ่รีะกอบ ในการีค.ดเล่#อกผู้ �จ.ดที่-า แล่ะให�บรี*การีที่างด�านเว�บไซต์�ต์ อไปิ่ได�

บรรณ์าน4กรม

กรีะจอกข้ าว. (2551). คว็ามส#าค�ญของส-&อที่�&ใช+เพั-&อการประชาส�มพั�นธ์�. ค�นเม#�อ 14 ม*ถึ8นายน 2556. จาก

33

http://www.oknation.net/blog/print.php?id=292121.

ครี บ�านนอก. (2552). พั-2นฐานของการจ�ดการเร�ยนการสอนก�บการเร�ยนการสอนผ่�าน. ค�นเม#�อ

14 ม*ถึ8นายน 2556. จาก http://www.kroobannok.com/133.

ใจที่*พย� ณ สงข้ล่า. (2542). Design e-Learning : หล�กการออกแบบและสร+างเว็บเพัจเพั-&อ

การเร�ยนการสอน. มหาสารีคาม: มหาว*ที่ยาล่.ยมหาสารีคาม.

โซนซ า. (2549). ประเภที่ของเว็บไซต์�. ค�นเม#�อ 14 ม*ถึ8นายน 2556.

จาก http://www.zoneza.com/.

ฐ*ต์*รี.ศญาณ� แก นเพช่รี. (2551). ออกแบบเว็บให+น�าใช+ Designing

Web Usability. กรี8งเที่พฯ: เคที่�พ�.

ปิ่รี.ช่ญน.นที่� น*ล่ส8ข้. (2543). การเร�ยนการสอนผ่�านเว็บ : ที่างเล-อกใหม�ของเที่คโนโลย�การศึ(กษาไที่ย.

เช่�ยงใหม : มหาว*ที่ยาล่.ยเช่�ยงใหม .

ปิ่รีะสาน จ.นที่ะคาม. (2552). E-Learning ที่างเล-อกใหม�ของการศึ(กษาในย4คเที่คโนโลย�สารสนเที่ศึ.

มหาสารีคาม: มหาว*ที่ยาล่.ยมหาสารีคาม.

วน*จศรีา อ8 นผู้า. (2548). หล�กการออกแบบเว็บไซต์�ที่�&ด�. กรี8งเที่พฯ:

เธี*รี�ดเอ�ดย เคช่.�น.

วรี.ที่ พฤกษากล่น.นที่�. (2548). การจ�ดการเร�ยนการสอนผ่�านเว็บ. ค�นเม#�อ 14 ม*ถึ8นายน 2556. จาก

34

http://inforzone.kktech.ac.th/wbixml/knowledge/wbiknowledge.html.

ว*ช่าการีพ.ฒนางานบนเว�บ. (2551). การออกแบบโครงสร+างเว็บไซต์�.

ค+นเม-&อ 14 ม3ถู4นายน 2556. จาก

https://sites.google.com/site/class0223/webdesign.

บรรณ์าน4กรม (ต์�อ)

ว*ที่ยาล่.ยสารีพ.ดช่ างพรีะนครี. (2549). โครงสร+างเว็บไซต์�. ค�นเม#�อ 14

ม*ถึ8นายน 2556. จาก

http://202.29.42.235/~eleaning/index.php?option=com_content&view.

ศ*รี*พรี มณ�จ.นที่รี�, (2549). การพั�ฒนาเว็บไซต์�. กรี8งเที่พฯ: เธี*รี�ดเอ�ดย เคช่.�น.

สาว*ต์รี� ล่8 มงาม. (2554). แนว็ที่างการพั�ฒนาเว็บไซต์�. ค�นเม#�อ 14

ม*ถึ8นายน 2556. จาก

http://www.cybered.co.th/warnuts/wbi/index3.htm.

เสถึ�ยรี พล่วงศ�. (2549). คว็ามหมายของส�. ค�นเม#�อ 14 ม*ถึ8นายน 2556. จาก http://www.pointstudio.

35

Net/wpoint/content/View/17/28.

อเนก ปิ่�� นศรี�. (2552). คว็ามร)+เบ-2องต์+นเก�&ยว็ก�บการออกแบบเว็บไซต์�. กรี8งเที่พฯ: เคที่�พ�.

Hellomyweb. (2554). ส�ว็นประกอบของเว็บไซต์�ที่�&ด�. ค�นเม#�อ 14

ม*ถึ8นายน 2556. จาก

http://www.hellomyweb.com/index.php/main/content/134.

Oxygen. (2554). หลากหลายว็3ธ์�ก�บการว็3ธ์�โปรโมที่เว็บไซต์�. ค�นเม#�อ

14 ม*ถึ8นายน 2556. จาก

http://oxygen.readyplanet.com/index.php?

lay=show&ac=article&Id=57372&Ntype=19