แผนการเร�ยนร�รายวิ ชา การเขี�ยนเว็�บไซต์� ประจำ�าภาคเร�ยนที่�� 1 ป�การศึ�กษา 2551

กลุ่��มสาระการเร�ยนร� การงานอาชี�พและเที่คโนโลย�

ระดั�บช��น มั%ธยมัศึ�กษาป�ที่�� 4………………………………………………………………………………………………………….มาตรฐานการเร�ยนร�มัาต์รฐานที่�� 4.1 ขี(อ 1 เขี(าใจำหล%กการและว็+ธ�การขีองเที่คโนโลย�สารสนเที่ศึ

ขี(อ 3 เขี(าใจำระบบคอมัพ+ว็เต์อร� ระบบส-�อสารขี(อมั.ลและระบบเคร-อขี/ายคอมัพ+ว็เต์อร�

ขี(อ 4 เขี(าใจำขี(อก�าหนดขีองคอมัพ+ว็เต์อร�และอ1ปกรณ์�ที่��เก��ยว็ขี(อง

ขี(อ 5 จำ%ดเก�บและบ�าร1งร%กษาสารสนเที่ศึให(ถู.กต์(องและเป4นป5จำจำ1บ%นอย./เสมัอ

ขี(อ 6 เขี(าใจำหล%กการและว็+ธ�แก(ป5ญหาด(ว็ยกระบว็นการที่างเที่คโนโลย�สารสนเที่ศึ

อย/างมั�ประส+ที่ธ+ภาพและประส+ที่ธ+ผลขี(อ 8 การใชี(ฮาร�ดแว็ร�และซอฟต์�แว็ร�ให(เหมัาะสมัก%บงานขี(อ 9 ค(นหาขี(อมั.ลคว็ามัร. (และต์+ดต์/อส-�อสารผ/าน

คอมัพ+ว็เต์อร�หร-อเคร-อขี/าย คอมัพ+ว็เต์อร�ขี(อ 10 การใชี(คอมัพ+ว็เต์อร�ชี/ว็ยประมัว็ลผลขี(อมั.ลให(เป4น

สารสนเที่ศึเพ-�อการต์%ดส+นใจำขี(อ 11 ใชี(เที่คโนโลย�สารสนเที่ศึ น�าเสนอผลงานในร.ปแบบ

ที่��เหมัาะสมัต์รงต์ามั ว็%ต์ถู1ประสงค�ขีองงานขี(อ 12 ใชี(คอมัพ+ว็เต์อร�สร(างงานอย/างมั�จำ+ต์ส�าน�กและมั�

คว็ามัร%บผ+ดชีอบ

ผลุ่การเร�ยนร�ที่��คาดัหวิ�ง1. อธ+บายบที่บาที่และผลกระที่บขีองเที่คโนโลย�อ+นเต์อร�เน�ต์ที่��มั�

ต์/อชี�ว็+ต์ประจำ�าว็%นได(2. สามัารถูว็+เคราะห�แนว็โน(มัขีองเที่คโนโลย�สารสนเที่ศึสมั%ยใหมั/

ได(3. เขี(าใจำคว็ามัหมัายขีองเว็�บเพจำ เว็�บไซต์�และอ1ปกรณ์�ที่��

เก��ยว็ขี(องได(4. สามัารถูส%งเคราะห�โครงสร(างเว็�บไซต์� รว็มัถู�งออกแบบได(5. เขี(าใจำหล%กการ ขี(อก�าหนดเก��ยว็ก%บการออกแบบและจำ%ดที่�า

เว็�บไซต์�6. มั�จำร+ยธรรมัในการใชี(เที่คโนโลย�สารสนเที่ศึในการสร(างงาน 7. เขี(าใจำโครงสร(างภาษาคอมัพ+ว็เต์อร�ระด%บต์��าส�าหร%บการเขี�ยน

เว็�บ8. บอกว็+ธ�การเขี�ยนเว็�บเพจำด(ว็ยภาษา HTML

9. ว็างแผนเล-อกใชี(เที่คโนโลย�ได(เหมัาะสมัก%บงาน10. ใชี(เที่คโนโลย�ในการที่�างาน การผล+ต์ การออกแบบ การแก(

ป5ญหา การสร(างงาน การสร(าง อาชี�พส1จำร+ต์อย/างมั�คว็ามัเขี(าใจำมั�การว็างแผนเชี+งกลย1ที่ธ� และ

มั�คว็ามัค+ดสร(างสรรค�11. สามัารถูใชี(โปรแกรมัคอมัพ+ว็เต์อร�สร(างงานเว็�บเพจำ และ

เว็�บไซต์�ได(12. ใชี(คอมัพ+ว็เต์อร�ชี/ว็ยสร(างงานจำากจำ+นต์นาการหร-องานที่��ที่�าใน

ชี�ว็+ต์ประจำ�าว็%นอย/างมั� จำ+ต์ส�าน�กและมั�คว็ามัร%บผ+ดชีอบ13. เขี(าใจำกระบว็นการอ%พโหลดเว็�บ และสามัารถูใชี(โปรแกรมัน�า

เสนอเว็�บไซต์�ได(สาระการเร�ยนร�

หน/ว็ยที่�� 1 คว็ามัหมัาย บที่บาที่และแนว็โน(มัขีองเที่คโนโลย�อ+นเต์อร�เน�ต์

หน/ว็ยที่�� 2 เว็�บเพจำ เว็�บไซต์� และโครงสร(างเว็�บฯหน/ว็ยที่�� 3 ขี(อคว็รร. (ก/อนเป4นเว็�บมัาสเต์อร�และจำรรยาบรรณ์ขีอง

ผ.(ที่�าเว็�บหน/ว็ยที่�� 4 สน1กก%บ HTML

หน/ว็ยที่�� 5 สร(างเว็�บไซต์�ด(ว็ย Dreamweaver

หน/ว็ยที่�� 6 เป4นเจำ(าขีองเว็�บไซต์�บนโลกอ+นเต์อร�เน�ต์จุ�ดัประสงค#การเร�ยนร�

หน�วิยการเร�ยนร�

จุ�ดัประสงค#น$าที่าง จุ�ดัประสงค#ปลุ่ายที่าง

หน/ว็ยที่�� 1 บอกคว็ามัหมัาย บที่บาที่และผลกระที่บขีองเที่คโนโลย�อ+นเต์อร�เน�ต์ที่��มั�ต์/อชี�ว็+ต์ประจำ�าว็%นได(

อธ+บายคว็ามัหมัาย บที่บาที่และผลกระที่บขีองเที่คโนโลย�อ+นเต์อร�เน�ต์ที่��มั�ต์/อชี�ว็+ต์ประจำ�าว็%นได(

ว็+เคราะห�แนว็โน(มัขีองเที่คโนโลย�สารสนเที่ศึสมั%ยใหมั/ได(

สามัารถูว็+เคราะห�แนว็โน(มัขีองเที่คโนโลย�สารสนเที่ศึสมั%ยใหมั/ได(

หน/ว็ยที่�� 2 บอกคว็ามัหมัายขีองเว็�บเพจำ เว็�บไซต์�และอ1ปกรณ์�ที่��เก��ยว็ขี(องได(

เขี(าใจำคว็ามัหมัายขีองเว็�บเพจำ เว็�บไซต์�และอ1ปกรณ์�ที่��เก��ยว็ขี(อง

ส%งเคราะห�โครงสร(างขีองเว็�บไซต์� และออกแบบได(

สามัารถูส%งเคราะห�โครงสร(างเว็�บไซต์� และออกแบบได(

หน/ว็ยที่�� 3 บอกหล%กการ ขี(อก�าหนดเก��ยว็ก%บการออกแบบและจำ%ดที่�าเว็�บไซต์�

เขี(าใจำหล%กการ ขี(อก�าหนดเก��ยว็ก%บการออกแบบและจำ%ดที่�าเว็�บไซต์�

บอกค1ณ์ค/าและคว็ามัส�าค%ญขีองจำร+ยธรรมัในการใชี(เที่คโนโลย�สารสนเที่ศึในการสร(างงาน

มั�จำร+ยธรรมัในการใชี(เที่คโนโลย�สารสนเที่ศึในการสร(างงาน

หน/ว็ยที่�� 4 บอกโครงสร(างภาษาคอมัพ+ว็เต์อร�ระด%บต์��าส�าหร%บการ

เขี(าใจำโครงสร(างภาษาคอมัพ+ว็เต์อร�ระด%บต์��าส�าหร%บ

เขี�ยนเว็�บ การเขี�ยนเว็�บบอกว็+ธ�การเขี�ยนเว็�บเพจำด(ว็ยภาษา HTML

สามัารถูเขี�ยนเว็�บเพจำด(ว็ยภาษา HTML

หน/ว็ยที่�� 5 บอกว็+ธ�ใชี(โปรแกรมัคอมัพ+ว็เต์อร�สร(างงานเว็�บเพจำ และเว็�บไซต์�ได(

ว็างแผนเล-อกใชี(เที่คโนโลย�ได(เหมัาะสมัก%บงาน

บอกว็+ธ�ใชี(เที่คโนโลย�ในการที่�างาน การผล+ต์ การออกแบบ การแก(ป5ญหา การสร(างงาน การสร(างอาชี�พส1จำร+ต์อย/างมั�คว็ามัเขี(าใจำมั�การว็างแผนเชี+งกลย1ที่ธ� และมั�คว็ามัค+ดสร(างสรรค�

ใชี(เที่คโนโลย�ในการที่�างาน การผล+ต์ การออกแบบ การแก(ป5ญหา การสร(างงาน การสร(างอาชี�พส1จำร+ต์อย/างมั�คว็ามัเขี(าใจำมั�การว็างแผนเชี+งกลย1ที่ธ� และมั�คว็ามัค+ดสร(างสรรค�

หน�วิยการเร�ยนร�

จุ�ดัประสงค#น$าที่าง จุ�ดัประสงค#ปลุ่ายที่าง

หน/ว็ยที่�� 5 บอกว็+ธ�ปฏิ+บ%ต์+การใชี(โปรแกรมัคอมัพ+ว็เต์อร�สร(างงานเว็�บเพจำ และเว็�บไซต์�ได(

สามัารถูใชี(โปรแกรมัคอมัพ+ว็เต์อร�สร(างงานเว็�บเพจำ และเว็�บไซต์�ได(

บอกว็+ธ�การใชี(คอมัพ+ว็เต์อร�ชี/ว็ยสร(างงานจำากจำ+นต์นาการหร-องานที่��ที่�าในชี�ว็+ต์ ประจำ�าว็%นอย/างมั�จำ+ต์ส�าน�กและมั�คว็ามัร%บผ+ดชีอบ

ใชี(คอมัพ+ว็เต์อร�ชี/ว็ยสร(างงานจำากจำ+นต์นาการหร-องานที่��ที่�าในชี�ว็+ต์ประจำ�าว็%นอย/างมั� จำ+ต์ส�าน�กและมั�คว็ามัร%บผ+ดชีอบ

หน/ว็ยที่�� 6 บอกกระบว็นการอ%พโหลดเว็�บ และว็+ธ�ใชี(โปรแกรมัน�าเสนอเว็�บไซต์�ได(

เขี(าใจำกระบว็นการอ%พโหลดเว็�บ และสามัารถูใชี(โปรแกรมัน�าเสนอเว็�บไซต์�ได(

จุ$านวินช��วิโมงที่��สอนหน�วิยการ ช'�อหน�วิย จุ$านวิน ช��วิโมง

เร�ยนร� แผนหน/ว็ยที่�� 1 คว็ามัหมัาย บที่บาที่และแนว็โน(มัขีอง

เที่คโนโลย�อ+นเต์อร�เน�ต์1 2

หน/ว็ยที่�� 2 เว็�บเพจำ เว็�บไซต์� และโครงสร(างเว็�บฯ 2 4

หน/ว็ยที่�� 3 ขี(อคว็รร. (ก/อนเป4นเว็�บมัาสเต์อร�และจำรรยาบรรณ์ขีองผ.(ที่�าเว็�บ

2 4

หน/ว็ยที่�� 4 สน1กก%บ HTML 1 4

หน/ว็ยที่�� 5 สร(างเว็�บไซต์�ด(ว็ย Dreamweaver 1 20

หน/ว็ยที่�� 6 เป4นเจำ(าขีองเว็�บไซต์�บนโลกอ+นเต์อร�เน�ต์ 1 2

รวิม 8 36

หน�วิยการเร�ยนร�ที่�� 1คว็ามัหมัาย บที่บาที่และแนว็โน(มัขีองเที่คโนโลย�อ+นเต์อร�เน�ต์

รายวิ ชา การเขี�ยนเว็�บไซต์� ประจำ�าภาคเร�ยนที่�� 1 ป�การศึ�กษา 2551กลุ่��มสาระการเร�ยนร� การงานอาชี�พและเที่คโนโลย�

ระดั�บช��น มั%ธยมัศึ�กษาป�ที่�� 4………………………………………………………………………………………………………….มาตรฐานการเร�ยนร�

มัาต์รฐานที่�� 4.1 ขี(อ 1 เขี(าใจำหล%กการและว็+ธ�การขีองเที่คโนโลย�สารสนเที่ศึผลุ่การเร�ยนร�ที่��คาดัหวิ�ง

1. อธ+บายบที่บาที่และผลกระที่บขีองเที่คโนโลย�อ+นเต์อร�เน�ต์ที่��มั�ต์/อชี�ว็+ต์ประจำ�าว็%นได(

2. สามัารถูว็+เคราะห�แนว็โน(มัขีองเที่คโนโลย�สารสนเที่ศึสมั%ยใหมั/ได(จุ�ดัประสงค#การเร�ยนร�

จุ�ดัประสงค#น$าที่าง- บอกคว็ามัหมัาย บที่บาที่และผลกระที่บขีองเที่คโนโลย�

อ+นเต์อร�เน�ต์ที่��มั�ต์/อชี�ว็+ต์ประจำ�าว็%นได(- ว็+เคราะห�แนว็โน(มัขีองเที่คโนโลย�สารสนเที่ศึสมั%ยใหมั/ได(จุ�ดัประสงค#ปลุ่ายที่าง- อธ+บายคว็ามัหมัาย บที่บาที่และผลกระที่บขีองเที่คโนโลย�

สารสนเที่ศึที่��มั�ต์/อชี�ว็+ต์ประจำ�าว็%นได(- สามัารถูว็+เคราะห�แนว็โน(มัขีองเที่คโนโลย�สารสนเที่ศึสมั%ยใหมั/ได(

จำ�านว็น 1 แผน 2 ชี%�ว็โมัง

หน�วิยการเร�ยนร�ที่�� 1

แผนการจุ�ดัการเร�ยนร�ที่�� 1

คว็ามัหมัาย บที่บาที่และแนว็โน(มัขีองเที่คโนโลย�อ+นเต์อร�เน�ต์

รายวิ ชา การเขี�ยนเว็�บไซต์� ประจำ�าภาคเร�ยนที่�� 1 ป�การศึ�กษา 2551กลุ่��มสาระการเร�ยนร� การงานอาชี�พและเที่คโนโลย�

ระดั�บช��น มั%ธยมัศึ�กษาป�ที่�� 4………………………………………………………………………………………………………….จุ�ดัประสงค#น$าที่าง

- บอกคว็ามัหมัาย บที่บาที่และผลกระที่บขีองเที่คโนโลย�อ+นเต์อร�เน�ต์ที่��มั�ต์/อชี�ว็+ต์ประจำ�าว็%นได(

- ว็+เคราะห�แนว็โน(มัขีองเที่คโนโลย�สารสนเที่ศึสมั%ยใหมั/ได(เน'�อหาสาระ

- คว็ามัหมัายขีองค�าว็/า อ+นเต์อร�เน�ต์“ ”

- บที่บาที่ขีองเที่คโนโลย�อ+นเต์อร�เน�ต์ในป5จำจำ1บ%น- เที่คโนโลย�สมั%ยใหมั/ต์/าง ๆ ที่��เก+ดขี�=นในป5จำจำ1บ%น ในร.ปแบบส-�อ

อ+นเต์อร�เน�ต์- บอกผลกระที่บขีองเที่คโนโลย�อ+นเต์อร�เน�ต์ที่��มั�ผลต์/อชี�ว็+ต์ประจำ�า

ว็%น- ป5ญหาที่��เก+ดจำากอ+นเต์อร�เน�ต์- แนว็ที่างการแก(ป5ญหาที่��เก+ดขี�=นจำากการใชี(เที่คโนโลย�

อ+นเต์อร�เน�ต์การจุ�ดักระบวินการเร�ยนร�

ขั้��นเตร�ยมหร'อขั้��นน$าเขั้�าส�บที่เร�ยน1. คร.แจำ(งจำ1ดประสงค�การเร�ยนร. ( และว็+ธ�การเร�ยนร. ( แล(ว็

ที่ดสอบก/อนเร�ยนและแนะน�าเว็�บไซต์�ประกอบการเร�ยนรายว็+ชีาน�=ค-อ http://www.puibuble.th.gs และอ�เมัลผ.(สอนค-อ puibuble@hotmail.com

2. น%กเร�ยนร/ว็มัแสดงคว็ามัร. (เด+มัเพ-�อพ+จำารณ์าคว็ามัหมัายขีองค�าว็/า อ+นเต์อร�เน�ต์ และร/ว็มัก%นแสดงคว็ามัค+ดเห�นเก��ยว็ก%บ“ ”

บที่บาที่ขีองอ+นเต์อร�เน�ต์ที่��มั�ผลต์/อชี�ว็+ต์ประจำ�าว็%น รว็มัถู�งเที่คโนโลย�สมั%ยใหมั/ที่��น/าสนใจำขั้��นสอน

3. คร.อธ+บายเก��ยว็ก%บ อ+นเต์อร�เน�ต์ และแนว็โน(มัเที่คโนโลย�ในอนาคต์ น%กเร�ยนจำดบ%นที่�กบที่เร�ยน ในชี%�ว็โมังที่�� 1

พร(อมัอธ+บายบที่เร�ยนในร.ปแบบ PowerPoint

4. คร.ใชี(ว็+ธ�สอนแบบ KWL ในการจำ%ดการเร�ยนร. (ชี% �ว็โมังที่�� 2

“ว็+เคราะห�แนว็โน(มัขีองเที่คโนโลย�สารสนเที่ศึสมั%ยใหมั/ในโลกอ+นเต์อร�เน�ต์ ” 3 ขี%=นต์อน ด%งน�=

ขั้��นที่�� 1 น%กเร�ยนชี/ว็ยก%นระดมัสมัองเพ-�อจำ�าแนกแยกแยะเที่คโนโลย�สมั%ยใหมั/ในโลกอ+นเต์อร�เน�ต์ที่��น/าสนใจำโดยการยกต์%ว็อย/างจำากที่��เคยร. (จำ%กมัาก/อนแล(ว็ (Know)

ขั้��นที่�� 2 น%กเร�ยนชี/ว็ยก%นระดมัสมัองเพ-�อจำ�าแนกแยกแยะเที่คโนโลย�สมั%ยใหมั/ในโลกอ+นเต์อร�เน�ต์ที่��น/าสนใจำโดยการยกต์%ว็อย/างจำากที่��ต์(องการเร�ยนร. ( (What you want know more)

ขั้��นที่�� 3 คร.และน%กเร�ยนชี/ว็ยก%นค(นหาว็+ธ�การเร�ยนร. (ถู�งคว็ามัก(าว็หน(าขีองเที่คโนโลย�ที่างอ+นเต์อร�เน�ต์ที่%=งในป5จำจำ1บ%นและอนาคต์ (How to learn) โดยคร.จำะที่�าการแจำกใบคว็ามัร. (ที่�� 1

เร-�อง อ+นเต์อร�เน�ต์ก%บแนว็โน(มัเที่คโนโลย�ในอนาคต์ และต์%ว็อย/างบนเว็�บไซต์�ให(น%กเร�ยนชีมั ค-อ http://pioneer.chula.ac.th/~ssukunya/nursinginfor/document/internet/sld029.htm

5. น%กเร�ยนสร1ปคว็ามัร. (จำากการอ/านใบคว็ามัร. (ที่�� 1 แล(ว็ให(น%กเร�ยนเขี�ยนลงสมั1ดบ%นที่�ก

6. คร.ต์รว็จำผลการสร1ปโดยต์รว็จำจำากสมั1ดน%กเร�ยน7. ที่ดสอบหล%งเร�ยน

ขั้��นสร�ป8. คร.เป>ดโอกาสให(น%กเร�ยนซ%กถูามัขี(อสงส%ยเก��ยว็ก%บเร-�องที่��

ย%งไมั/เขี(าใจำ และร/ว็มัก%นสร1ป เน-=อหาบที่เร�ยน

ส'�อแลุ่ะแหลุ่�งการเร�ยนร� (ม�จุ$านวินเที่�าก�บจุ$านวินน�กเร�ยน)

- ใบคว็ามัร. (ที่�� 1 เร-�อง อ+นเต์อร�เน�ต์ก%บแนว็โน(มัเที่คโนโลย�ในอนาคต์

- ใบงานที่�� 1 การว็+เคราะห�แนว็โน(มัเที่คโนโลย�ที่างอ+นเต์อร�เน�ต์ในอนาคต์ แบบ KWL

- ต์%ว็อย/างเว็�บไซต์�ที่��มั�ขี(อมั.ลเก��ยว็ก%บเที่คโนโลย�ที่างอ+นเต์อร�เน�ต์- เว็�บไซต์�ประกอบการเร�ยนร. ( http://www.puibuble.th.gs

- ชี+=นงานน�าเสนอบที่เร�ยน (PowerPoint) และ แบบที่ดสอบก/อนเร�ยนและหล%งเร�ยน

กระบวินการวิ�ดัแลุ่ะประเม นผลุ่ (ม�จุ$านวินเที่�าก�บจุ$านวินน�กเร�ยน)

วิ ธี�วิ�ดัผลุ่- ต์รว็จำผลงานจำากคว็ามัต์%=งใจำขีณ์ะอย./ภายในส%งคมัห(องเร�ยน- การให(คว็ามัร/ว็มัมั-อในการแสดงคว็ามัค+ดเห�น - การที่�าแบบที่ดสอบ และที่�าใบงาน และการจำดบ%นที่�ก

เคร'�องม'อวิ�ดั- ใบงาน- แบบที่ดสอบก/อนเร�ยนและหล%งเร�ยน

เกณฑ์#การประเม น - คะแนนแบบที่ดสอบก/อนเร�ยนและหล%งเร�ยน

1-3 คะแนน กล1/มัต์��า , 4-6 คะแนน กล1/มัปานกลาง , 7-10 คะแนน กล1/มัส.ง

ก จุกรรมเสนอแนะ ……………………………………………………………………………………………………………………………………………………………………………………………………………………

ใบควิามร�ที่�� 1 "DATAGRID" สะพานเช'�อมต�อส�โลุ่กย�คหน�า

ประว็%ต์+ศึาสต์ร�หน(าใหมั/ขีองระบบเคร-อขี/ายคอมัพ+ว็เต์อร�ก�าล%งจำะเป>ดขี�=นอ�กคร%=ง เมั-�อมั�การเต์ร�ยมัการ สร(างระบบคอมัพ+ว็เต์อร�ที่��ใหญ/เพ�ยงพอจำะที่�างานก%บขี(อมั.ลระด%บเที่ราไบต์�ได(อย/างสบายในอนาคต์อ%นใกล(น�=

ชี-�อขีองระบบด%งกล/าว็ค-อ "ดาต์(ากร+ด" (DATAGRID) ได(ร%บการก/อต์%=งขี�=นโดย Cern

ซ��งเป4นสถูาบ%นว็+จำ%ย และห(องแล�ป ด(านฟ>ส+กส�ที่��ใหญ/ที่��ส1ดในโลก ต์%=งอย./ที่��กร1งเจำน�ว็า ประเที่ศึสว็+สเซอร�แลนด� จำากแนว็คว็ามัค+ดหล%กขีอง CERN น%=น CERN

จำะเป4นเคร-�องมั-อในการว็+เคราะห�การเด+นที่างภายในเคร-อขี/าย และคอยต์รว็จำจำ%บหร-อรายงานเหต์1การณ์� ที่��ผ+ดปกต์+บนเคร-อขี/าย ส/ว็นจำ1ดมั1/งหมัายขีองโครงการน�=ค-อการสร(างระบบคอมัพ+ว็เต์อร�ให(มั�คว็ามัสามัารถูจำ%ดการ ขี(อมั.ลปร+มัาณ์มัาก ๆ ได( เพราะเชี-�อว็/าในอนาคต์การใชี(อ+นเต์อร�เน�ต์ที่��เพ+�มัมัากขี�=น ไมั/ว็/าจำะเป4นส-บค(นขี(อมั.ล การที่�าธ1รกรรมั การใชี(อ�เมัล ฯลฯ ผ/านที่างระบบอ+นเต์อร�เน�ต์จำะที่�าให(เก+ดการขีนส/งขี(อมั.ลในปร+มัาณ์มัหาศึาล ว็+�งไปมัาอย./บนระบบเคร-อขี/าย และหากไมั/มั�ระบบประมัว็ลผลระด%บส.งมัารองร%บจำะที่�าให(เก+ดการต์+ดขี%ด หร-อเก+ด คว็ามัเส�ยหายต์/อขี(อมั.ลต์/าง ๆ เหล/าน%=นได(อ+นเต์อร�เน�ต์ในอนาคต์

ไมั/เพ�ยงสร(าง DATAGRID มัาเพ-�อรองร%บการที่�างานก%บระบบเคร-อขี/ายขีนาดใหญ/ แนว็คว็ามัค+ดขีองผ.(สร(าง DATAGRID น�=ต์(องการที่��จำะสร(างระบบที่��รองร%บเชี-�อมัต์/อคอมัพ+ว็เต์อร�ที่%�ว็โลกบนเคร-อขี/าย อ+นเต์อร�เน�ต์เขี(าไว็( ด(ว็ยก%นเลยที่�เด�ยว็ ซ��งเมั-�อถู�งเว็ลาน%=น ระด%บและพล%งคว็ามัสามัารถูขีอง DATAGRID จำะต์(องเป4นส+�งที่��คาดไมั/ถู�ง อย/างแน/นอน

คว็ามัต์(องการในระบบเคร-อขี/ายคอมัพ+ว็เต์อร�พล%งส.งด%งกล/าว็น%=นเก+ดมัาจำากคว็ามัค+ดที่��ว็/า หากไมั/มั�คอมัพ+ว็เต์อร� พล%งส.ง ส%กเคร-�องแล(ว็ หากมั�โจำที่ย�ที่างว็+ที่ยาศึาสต์ร�ที่��ต์(องอาศึ%ยการค�านว็ณ์ระด%บส.งจำะที่�าอย/างไร เชี/นเด�ยว็ก%นก%บโลกขีอง คอมัพ+ว็เต์อร� ที่��หากมั�การประมัว็ลผลขี(อมั.ลระด%บส.งเก+ดขี�=น และไมั/มั�เคร-�องรองร%บได( จำะเก+ดผลเชี/นไร

ซ��งระบบเคร-อขี/าย "DATAGRID" ขีอง Cern น%=นสามัารถูรองร%บปร+มัาณ์ขี(อมั.ลได(ในระด%บเพต์ต์ะไบต์� (Petabytes) เลยที่�เด�ยว็ ที่%=งน�=ที่%=งน%=นมั%นเก+ดมัาเพ-�อรองร%บและป?องก%นส+�งที่��ผ.(เชี��ยว็ชีาญเร�ยกว็/า "Large Hadron Collider" หร-อ LHC หร-อการชีนก%นขีองขี(อมั.ลขีนาดใหญ/ หร-อที่��ร. (จำ%กก%นด�ก%บชี-�อที่ฤษฎี�บ+Bกแบงค� (Big Bang) ที่��เก+ดจำากการชีนก%นขีอง โปรต์อนอย/างร1นแรงจำนที่�าให(เก+ดพล%งงานมัหาศึาลน%�นเอง

ด%งน%=น หน(าที่��หล%กขีอง DATAGRID น%=นค-อการใชี(คว็ามัสามัารถูที่��มั�ต์รว็จำจำ%บเหต์1การณ์�ผ+ดปกต์+ต์/าง ๆ ที่��อาจำเก+ดขี�=นบนอ+นเต์อร�เน�ต์ให(ได(มัากที่��ส1ด เพ-�อจำะได(ป?องก%นได(ที่%นที่/ว็งที่�

และด(ว็ยโครงการ LHC Computing DATAGRID น�= น%กว็+ที่ยาศึาสต์ร�ผ.(ค+ดค(นต์(องการให(มั%นสามัารถูเชี-�อมัต์/อ ก%บคอมัพ+ว็เต์อร� รว็มัถู�งเขี(าไปถู�งที่ร%พยากรขีองระบบในเคร-�องน%=น ๆ ได(เลยด(ว็ย ซ��งหากมัองว็/าการสามัารถู น�าที่ร%พยากรขีองเคร-�องหลาย ๆ เคร-�องมัารว็มัก%นก�อาจำชี/ว็ยลดการเก+ดบ+Bกแบงค�ลงไปได( เพราะจำะชี/ว็ยให(มั� ที่ร%พยากรเพ�ยงพอต์/อการประมัว็ลผลขี(อมั.ล

เลส โรเบอร�ส%น ผ.(ด.แลโครงการน�=ที่��สถูาบ%น Cern กล/าว็ว็/า "DATAGRID จำะชี/ว็ยให(เราสามัารถูคว็บค1มัการที่�างาน ที่1กอย/างบนอ+นเต์อร�เน�ต์ได("ส%มัพ%นธภาพที่��ยากจำะคาดเดา

ในชี/ว็งแรกจำะด�าเน+นการที่ดสอบก%บสถูาบ%นว็+จำ%ยใน 12 ประเที่ศึก/อน ซ��งที่%=ง 12 ประเที่ศึน%=นได(แก/ อ%งกฤษ สหร%ฐอเมัร+กา สว็+สเซอร�แลนด� สาธารธร%ฐเชี�ค ฝร%�งเศึส เยอรมั%น ฮ%งการ� อ+ต์าล� ญ��ป1Dน ร%สเซ�ย สเปน และไต์(หว็%น ส%งเกต์ว็/าเป4นชีาต์+ในที่ว็�ปย1โรปเส�ยเป4นส/ว็นใหญ/ น%�นเป4น

เพราะโครงการน�=ร +เร+�มัโดยกล1/มัสหภาพย1โรปน%�นเอง และเมั�ดเง+นที่��สน%บสน1นก�มัาจำากชีาต์+ในย1โรปเป4นผ.(สน%บสน1นหล%ก

เป?าหมัายส.งส1ดขีอง DATAGRID ก�ค-อการสร(างระบบเคร-อขี/ายที่��ที่รงประส+ที่ธ+ภาพส.งส1ดเขี(าไว็(ในที่��เด�ยว็ ในระยะยาว็มั�ผ.(ที่�านายไว็(ว็/าเที่คโนโลย� DATAGRID จำะก/อให(เก+ดการเปล��ยนแปลงอย/างใหญ/หลว็งต์/อโลก คอมัพ+ว็เต์อร� เพราะว็/าเป?าหมัายส1ดที่(ายขีอง DATAGRID ค-อการเป4นศึ.นย�กลางขีองคอมัพ+ว็เต์อร�ที่%�ว็โลก

ขี(อมั.ลเพ+�มัเต์+มัโครงการ DATAGRID ได(เซ�นส%ญญาคร%=งแรกในว็%นที่�� 29 ธ%นว็าคมั 2000 และได(ร%บเง+นสน%บสน1นจำาก สหภาพย1โรปจำ�านว็น 9.8 ล(านเหร�ยญย.โร เป4นระยะเว็ลา 3 ป� โดยมั� CERN เป4นห%ว็เร��ยว็ห%ว็แรงในการพ%ฒนา

โดย ผ.(จำ%ดการออนไลน�

ใบงานที่�� 1 1. ให(น%กเร�ยนยกต์%ว็อย/างเที่คโนโลย�สมั%ยใหมั/ในโลกอ+นเต์อร�เน�ต์ที่��น/าสนใจำจำากที่��เคยร. (จำ%กมัาก/อนโดยแยกเป4นประเภที่ต์ามัเหมัาะสมั...........................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................

2. น%กเร�ยนบอกถู�งเที่คโนโลย�สมั%ยใหมั/ในโลกอ+นเต์อร�เน�ต์ที่��น/าสนใจำจำากที่��ต์(องการเร�ยนร. ( โดยแยกเป4นประเภที่ต์ามัเหมัาะสมั..................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................

3 ให(น%กเร�ยนค(นหาว็+ธ�การเร�ยนร. (ถู�งคว็ามัก(าว็หน(าขีองเที่คโนโลย�ที่างอ+นเต์อร�เน�ต์ที่%=งในป5จำจำ1บ%นและอนาคต์ ต์ามัห%ว็ขี(อได(ก�าหนดในขี(อ 1 และ ขี(อ 2 โดยพ+จำารณ์าร/ว็มัก%บใบคว็ามัร. (ที่�� 1 เร-�อง อ+นเต์อร�เน�ต์ก%บแนว็โน(มัเที่คโนโลย�ในอนาคต์ และต์%ว็อย/างบนเว็�บไซต์�ให(น%กเร�ยนชีมั ค-อ http://pioneer.chula.ac.th/~ssukunya/nursinginfor/document/internet/sld029.htm..................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................

แบบที่ดัสอบก�อนเร�ยนหน�วิยที่�� 1 ควิามหมาย บที่บาที่แลุ่ะแนวิโน�มขั้องเที่คโนโลุ่ย�อ นเตอร#เน.ต

ให(น%กเร�ยนเล-อกต์อบค�าต์อบที่��ค+ดว็/าถู.กต์(องที่��ส1ด1. หน/ว็ยงานใดในประเที่ศึไที่ยที่��เป4นผ.(พ%ฒนาอ+นเต์อร�เน�ต์เป4นหน/ว็ยงานแรก

ก. Nectec ขี. Thaigoodview ค. จำ1ฬาลงกรณ์�ง. ร%ฐบาลไที่ย

2. อ+นเต์อร�เน�ต์ เป4นการพ%ฒนามัาจำากหน/ว็ยงานใดก.โรงพยาบาล ขี. ร%ฐบาลไที่ยค. กระที่รว็งกลาโหมัขีองสหร%ฐอเมัร+กา ง. กระที่รว็ง

ศึ�กษาธ+การ3. อ+นเต์อร�เน�ต์ พ%ฒนามัาต์%=งแต์/ป�พ.ศึ.ใด

ก. 2500 ขี. 2501 ค. 2502

ง. 2503

4. อ+นเต์อร�เน�ต์ ย/อมัาจำากภาษาอ%งกฤษชี-�อเต์�มัว็/าอย/างไรก. Internet Network ขี. Internation

Networkค. InternetWork Connection ง.

Interconnection Network5. อ+นเต์อร�เน�ต์เก+ดขี�=นคร%=งแรกในประเที่ศึไที่ย เมั-�อป� พ.ศึ.ใด

ก. 2530 ขี. 2525 ค. 2527

ง. 2529

6. เคร-อขี/ายคอมัพ+ว็เต์อร�เคร-อขี/ายแรก มั�ชี-�อว็/าอย/างไรก. อาร�พาเน�ต์ ขี. อาคาเน�ต์ ค. อาสาเน�ต์ง. ปาปาเน�ต์

7. ป5จำจำ1บ%นอ+นเต์อร�เน�ต์น�ามัาใชี(ในชี�ว็+ต์ประจำ�าว็%นในด(านใดบ(างก. การต์+ดต์/อส-�อสาร ขี. คว็ามับ%นเที่+งค. การที่�าธ1รกรรมั ง. ถู.กที่1กขี(อ

8. บร+การใดที่��จำ%ดว็/าเป4นการบร+การเก��ยว็ก%บด(านเว็�บไซต์�ก. Telnetขี. Use Net ค. WWW. ง.

FTP9. บร+การใดที่��จำ%ดว็/าเป4นการบร+การโอนถู/ายขี(อมั.ล

ก. Telnetขี. Use Net ค. WWW. ง. FTP10. บร+การใดที่��จำ%ดว็/าเป4นการที่�างานขี(ามัเคร-�อง

ก. Telnetขี. Use Net ค. WWW. ง. FTP

เฉลุ่ย1. ค 2. ค 3. ง 4. ง. 5. ก.

6. ก. 7. ง. 8. ค. 9. ง.

10. ก.

แบบที่ดัสอบหลุ่�งเร�ยนหน�วิยที่�� 1 ควิามหมาย บที่บาที่แลุ่ะแนวิโน�มขั้องเที่คโนโลุ่ย�อ นเตอร#เน.ต

1. ระบบเคร-อขี/ายคอมัพ+ว็เต์อร�หมัายถู�งอะไรก. ระบบที่��มั�การน�าคอมัพ+ว็เต์อร�มัาใชี(ประโยชีน�ร/ว็มัก%บอ1ปกรณ์�

ต์/าง ๆ เชี/นแสกนเนอร� เคร-�องพ+มัพ� เป4นต์(นขี. ระบบที่��มั�การน�าคอมัพ+ว็เต์อร�ต์%=งแต์/ 2 เคร-�องขี�=นไปมัาเชี-�อมัต์/อ

เขี(าด(ว็ยก%นค. ระบบศึ.นย�กลางการส-�อสารคอมัพ+ว็เต์อร�ง. ระบบการใชี(งานคอมัพ+ว็เต์อร�ขีนาดเล�ก

2. อ+นเต์อร�เน�ต์เก+ดขี�=นคร%=งแรกในประเที่ศึใด และป� ค.ศึ.ใดก. อ%งกฤษ 1960 ขี. สหร%ฐอเมัร+กา 1960

ค. อ%งกฤษ 1975 ง. สหร%ฐอเมัร+กา 1975

3. ชี-�อโครงการขีองอ+นเต์อร�เน�ต์แห/งแรกชี-�อว็/าอะไรก. ALPanet ขี. ARPanet

ค. ARanet ง. Intranet

4. อ+นเต์อร�เน�ต์ พ%ฒนามัาต์%=งแต์/ป�พ.ศึ.ใด

ก. 2500 ขี. 2501 ค. 2502

ง. 2503

5. อ+นเต์อร�เน�ต์เก+ดขี�=นคร%=งแรกในประเที่ศึไที่ย เมั-�อป�พ.ศึ.ใดก. 2530 ขี. 2525 ค. 2527 ง. 2529

ให�น�กเร�ยนตอบค$าถามต�อไปน��โดัยอาศั�ยขั้�อมลุ่จุากการค�นหาที่างอ นเตอร#เน.ต1. ให(น%กเร�ยนอธ+บายค�าต์/อไปน�=

- Internet - FTP - Telnet - Usenet- WWW. - Chat - E-Learning

2. ป5จำจำ1บ%นอ+นเต์อร�เน�ต์เขี(ามัามั�บที่บาที่ในชี�ว็+ต์ขีองคนไที่ยอย/างไร น%กเร�ยนค+ดว็/ามั�ขี(อด� และขี(อเส�ยอย/างไร(ให(น%กเร�ยนอธ+บายอย/างละเอ�ยด)

หมายเหต�- พ+มัพ�ใส/กระดาษเอ 4 (เขี�ยนชี-�อนามัสก1ล ห(องมั1มัขีว็า)- พ+มัพ�ใส/Word เซฟมัาส/ง- ส/งอ�เมัลแบบแนบไฟล�มัาที่�� puibuble@hotmail.com

ให(น%กเร�ยนเล-อกว็+ธ�ใดว็+ธ�หน��งในการส/งงานเที่/าน%=น

เฉลุ่ย1. ขี. 2. ขี. 3. ขี. 4.ง.

5. ก.

ตอน 2 1. Internet ค-อระบบเคร-อขี/ายคอมัพ+ว็เต์อร�ที่��เชี-�อมัโยงก%นที่%�ว็

โลก2. FTP ค-อบร+การโอนถู/ายขี(อมั.ลบนเคร-อขี/ายอ+นเต์อร�เน�ต์3. Telnet ค-อบร+การใชี(งานขี(ามัเคร-�อง4. Usenet ค-อบร+การกล1/มัขี/าว็ที่��น/าสนใจำเชี/น กระดานสนที่นา5. WWW. ค-อบร+การเคร-อขี/ายใยแมังมั1มับนอ+นเต์อร�เน�ต์ที่��ให(

บร+การในร.ปแบบเว็�บไซต์�

6. Chat ค-อบร+การสนที่นาบนเคร-อขี/ายอ+นเต์อร�เน�ต์ เชี/น MSN Chat

7. E-Learning ค-อการเร�ยนร. (ต์/าง ๆ ผ/านเคร-อขี/ายอ+นเต์อร�เน�ต์โดยมั�ระบบแบบแผน

หน�วิยการเร�ยนร�ที่�� 2เว็�บเพจำ เว็�บไซต์� และโครงสร(างเว็�บฯ

รายวิ ชา การเขี�ยนเว็�บไซต์� ประจำ�าภาคเร�ยนที่�� 1 ป�การศึ�กษา 2551กลุ่��มสาระการเร�ยนร� การงานอาชี�พและเที่คโนโลย�

ระดั�บช��น มั%ธยมัศึ�กษาป�ที่�� 4………………………………………………………………………………………………………….มาตรฐานการเร�ยนร�

มัาต์รฐานที่�� 4.1 ขี(อ 4 เขี(าใจำขี(อก�าหนดขีองคอมัพ+ว็เต์อร�และอ1ปกรณ์�ที่��เก��ยว็ขี(อง

ขี(อ 5 จำ%ดเก�บและบ�าร1งร%กษาสารสนเที่ศึให(ถู.กต์(องและเป4นป5จำจำ1บ%นอย./เสมัอ

ผลุ่การเร�ยนร�ที่��คาดัหวิ�ง1. เขี(าใจำคว็ามัหมัายขีองเว็�บเพจำ เว็�บไซต์�และอ1ปกรณ์�ที่��

เก��ยว็ขี(องได(2. สามัารถูส%งเคราะห�โครงสร(างเว็�บไซต์� รว็มัถู�งออกแบบได(

จุ�ดัประสงค#การเร�ยนร�จุ�ดัประสงค#น$าที่าง- บอกคว็ามัหมัายขีองเว็�บเพจำ เว็�บไซต์�และอ1ปกรณ์�ที่��เก��ยว็ขี(องได(- ส%งเคราะห�โครงสร(างขีองเว็�บไซต์� และออกแบบได(จุ�ดัประสงค#ปลุ่ายที่าง- เขี(าใจำคว็ามัหมัายขีองเว็�บเพจำ เว็�บไซต์�และอ1ปกรณ์�ที่��เก��ยว็ขี(อง- สามัารถูส%งเคราะห�โครงสร(างเว็�บไซต์� และออกแบบได(

จำ�านว็น 2 แผน 4 ชี%�ว็โมัง

หน�วิยการเร�ยนร�ที่�� 2

แผนการจุ�ดัการเร�ยนร�ที่�� 1คว็ามัหมัายขีองเว็�บเพจำ และเว็�บไซต์�

รายวิ ชา การเขี�ยนเว็�บไซต์� ประจำ�าภาคเร�ยนที่�� 1 ป�การศึ�กษา 2551กลุ่��มสาระการเร�ยนร� การงานอาชี�พและเที่คโนโลย�

ระดั�บช��น มั%ธยมัศึ�กษาป�ที่�� 4………………………………………………………………………………………………………….จุ�ดัประสงค#น$าที่าง

- บอกคว็ามัหมัายขีองเว็�บเพจำ เว็�บไซต์�และอ1ปกรณ์�ที่��เก��ยว็ขี(องได(เน'�อหาสาระ

- คว็ามัหมัายขีองค�าว็/า เว็�บเพจำ และ เว็�บไซต์�“ ” “ ”

- คว็ามัแต์กต์/างขีองค�าว็/า เว็�บเพจำ และ เว็�บไซต์�“ ” “ ”

- บที่บาที่ขีอง เว็�บไซต์�ในอด�ต์ ป5จำจำ1บ%น และอนาคต์การจุ�ดักระบวินการเร�ยนร�

ขั้��นเตร�ยมหร'อขั้��นน$าเขั้�าส�บที่เร�ยน1. คร.แจำ(งจำ1ดประสงค�การเร�ยนร. ( และว็+ธ�การเร�ยนร. ( แล(ว็

ที่ดสอบก/อนเร�ยน2. น%กเร�ยนร/ว็มัแสดงคว็ามัร. (เด+มัเพ-�อพ+จำารณ์าคว็ามัหมัาย

ขีองค�าว็/า เว็�บเพจำ และ เว็�บไซต์� และร/ว็มัก%นแสดงคว็ามัค+ด“ ” “ ”

เห�นถู�งขี(อแต์กต์/างขีองค�าว็/า เว็�บเพจำ และ เว็�บไซต์�“ ” “ ”

ขั้��นสอน3. คร.อธ+บายเก��ยว็ก%บ คว็ามัหมัายขีองค�าว็/า เว็�บเพจำ “ ”

และ เว็�บไซต์� และขี(อแต์กต์/างขีองค�าว็/า เว็�บเพจำ และ “ ” “ ”

เว็�บไซต์� พร(อมัน%กเร�ยนจำดบ%นที่�กบที่เร�ยน พร(อมัอธ+บายบที่“ ”

เร�ยนในร.ปแบบ PowerPoint

4. คร.แจำกใบคว็ามัร. (ที่�� 2 เร-�อง เว็�บเพจำ และเว็�บไซต์�5. น%กเร�ยนสร1ปคว็ามัร. (จำากการอ/านใบคว็ามัร. (ที่�� 2 แล(ว็ให(

น%กเร�ยนเขี�ยนลงสมั1ดบ%นที่�ก 6. น%กเร�ยนร%บใบงานที่�� 2 แล(ว็ลงมั-อที่�า7. คร.ต์รว็จำผลการสร1ปโดยต์รว็จำจำากสมั1ดน%กเร�ยน และใบ

งานที่�� 2

ขั้��นสร�ป8. คร.เป>ดโอกาสให(น%กเร�ยนซ%กถูามัขี(อสงส%ยเก��ยว็ก%บเร-�องที่��

ย%งไมั/เขี(าใจำ และร/ว็มัก%นสร1ปเน-=อหาบที่เร�ยน

ส'�อแลุ่ะแหลุ่�งการเร�ยนร� (ม�จุ$านวินเที่�าก�บจุ$านวินน�กเร�ยน)

- ใบคว็ามัร. (ที่�� 2 เร-�อง เว็�บเพจำ และเว็�บไซต์�- ชี+=นงานน�าเสนอบที่เร�ยน (PowerPoint)

- เว็�บไซต์�ประกอบการเร�ยนร. ( http://www.puibuble.th.gs

- ใบงานที่�� 2

กระบวินการวิ�ดัแลุ่ะประเม นผลุ่ (ม�จุ$านวินเที่�าก�บจุ$านวินน�กเร�ยน)

วิ ธี�วิ�ดัผลุ่- ต์รว็จำผลงานจำากคว็ามัต์%=งใจำขีณ์ะอย./ภายในส%งคมัห(องเร�ยน- การให(คว็ามัร/ว็มัมั-อในการแสดงคว็ามัค+ดเห�น - การที่�าแบบที่ดสอบ และการจำดบ%นที่�ก

เคร'�องม'อวิ�ดั- ใบงานที่�� 2

เกณฑ์#การประเม น- คะแนนแบบที่ดสอบก/อนเร�ยนและหล%งเร�ยน 1-3 คะแนน กล1/มัต์��า4-6 คะแนน กล1/มัปานกลาง7-10 คะแนน กล1/มัส.ง

ก จุกรรมเสนอแนะ ………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………

………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………

ใบควิามร�ที่�� 2 ควิามหมายขั้องเวิ.บเพจุ แลุ่ะเวิ.บไซต#อะไรค-อโฮมัเพจำ อะไรค-อเว็�บเพจำ หลายคนคงค1(นเคยก%บค�าว็/าโฮมัเพจำ เว็�บเพจำและเว็�บไซต์�ก%นมัาบ(างแล(ว็ แต์/คงมั�หลายคนที่��ย%งส%บสนว็/าอะไรค-อเว็�บเพจำและอะไรค-อเว็�บไซต์� ค�า 3 ค�าน�=เหมั-อนหร-อแต์กต์/างก%นอย/างไรโฮมเพจุ (Home Page)

โฮมัเพจำ ค-อค�าที่��ใชี(เร�ยกหน(าแรกขีองเว็ปไซต์� ซ��งประกอบไปด(ว็ยเมัน.ต์/างๆและเร-�องราว็ต์/างๆมัากมัายคล(ายก%บหน(าปกน+ต์รสารบ(านเรา ด%งน%=นหากเราออกแบบหน(าโฮมัเพจำให(สว็ยงามัและน/าสนใจำ โอกาสที่��ผ.(ชีที่จำะแว็ะเขี(ามัาเย��ยมัเย�ยนโฮมัเพจำขีองเราก�จำะย+�งมัากต์ามัไปด(ว็ยเวิ.บเพจุ (Web Page)

เว็�บเพจำ ค-อ ค�าที่��ใชี(เร�ยกหน(าเอกสารต์/างๆ ที่��อย./ในร.ปแบบไฟล� HTML

(Hyper Text Markup Language) เปร�ยบเสมั-อนหน(ากระดาษแต์/ละหน(าที่��มั�เร-�องราว็ต์/างๆมัากมัายบรรจำ1อย./ในน+ต์รสาร แต์/แต์กต์/างก%นต์รงที่��มั�การเชี-�อมัโยง (Link) ซ��งเราสามัารถูคล+กไปที่��หน(าใดขีองโฮมัเพจำก�ได(เวิ.บไซต# (Web Site)

เว็�บไซต์� ค-อ ค�าที่��ใชี(เร�ยกกล1/มัขีองเว็�บเพจำ (ด%งน%=นภายในเว็�บไซต์�จำะประกอบไปด(ว็ยโฮมัเพจำและเว็�บเพจำ) โดยเรามั%กใชี(เร�ยกเว็�บที่��มั�ขีนาดใหญ/และมั�การจำดที่ะเบ�ยนชี-�อเว็�บไซต์�น%=นๆไว็(แล(ว็ (Domain Name) เชี/น

http://www.geocities.com , http://www.sanook.com , http://www.yahoo.com เป4นต์(นเราสามารถสร�างโฮมเพจุดั�วิยวิ ธี�การอย�างไรบ�าง ในการสร(างโฮมัเพจำน%=นมั�อย./หลายว็+ธ�ด(ว็ยก%น โดยแต์/ละว็+ธ�การก�มั�คว็ามัยากง/ายแต์กต์/างก%นไป สามัารถูแบ/งว็+ธ�การสร(างโฮมัเพจำออกเป4น 3 ว็+ธ�ใหญ/ๆ ด%งน�=1.สร(างโฮมัเพจำด(ว็ยโปรแกรมัขีอง Web Hosting

Web Hosting ค-อเว็�บไซต์�ที่��ที่�าหน(าที่��ให(บร+การจำ%ดเก�บขี(อมั.ล โดยบางเว็�บไซต์�น%=นมั�การให(บร+การสร(างโฮมัเพจำส�าเร�จำร.ปให(แก/ผ.(ที่��ต์(องการสร(างโฮมัเพจำแบบง/ายๆ โดยการคล+กเล-อกร.ปแบบขีองโฮมัเพจำจำากร.ปแบบที่��ที่างเว็�บไซต์�ก�าหนดให( จำากน%=นก�กรอกรายละเอ�ยดต์/างๆต์ามัแบบฟอร�มั เพ�ยงเที่/าน�=เราก�จำะสามัารถูสร(างโฮมัเพจำในร.ปแบบง/ายๆได(ต์ามัต์(องการ แต์/การสร(างโฮมัเพจำด(ว็ยโปรแกรมัขีอง Web Hosting น�= ก�มั�ขี(อเส�ย ค-อ มั�ร.ปแบบให(เล-อกน(อยและไมั/สามัารถูออกแบบล%กษณ์ะขีองโฮมัเพจำได(ต์ามัต์(องการ 2. ใชี(โปรแกรมัส�าหร%บสร(างเว็�บไซต์�ป5จำจำ1บ%นได(มั�การพ%ฒนาโปรแกรมัที่��ใชี(ในการสร(างเว็�บไซต์�ก%นอย/างมัากมัาย เชี/น FrontPage , GoLive และ HomeSite เป4นต์(น แต์/โปรแกรมัสร(างเว็�บไซต์�ที่��น+ยมัใชี(ก%นมัากที่��ส1ด ก�คงจำะหน�ไมั/พ(นโปรแกรมั Dreamweaver

Dreamweaver เป4นโปรแกรมัที่��ใชี(งานง/ายและไมั/จำ�าเป4นต์(องมั�คว็ามัร. (ในเร-�องขีองภาษา HTML ถู�งแมั(ว็+ธ�การสร(างโฮมัเพจำน%=นอาจำจำะไมั/ง/ายดายเที่/าการสร(างโฮมัเพจำด(ว็ยเว็�บ Hosting แต์/เราก�จำะสามัารถูออกแบบคว็ามัสว็ยงามัขีองโฮมัเจำได(ต์ามัต์(องการ 3. การใชี(ภาษา HTML และ JavaScript

การสร(างโฮมัเพจำด(ว็ยภาษา HTML และ JavaScript น%=นจำะต์(องใชี(คว็ามัสามัารถูและคว็ามัชี�านาญในการเขี�ยนโปรแกรมัพอสมัคว็ร เน-�องจำากการสร(างโฮมัเพจำด(ว็ยว็+ธ�น�= จำะใชี(ว็+ธ�การพ+มัพ�ขี(อคว็ามัที่��เป4นค�าส%�งลงไป จำากน%=นโปรแกรมัจำะที่�าการแปลงขี(อมั.ลให(กลายเป4นภาพหร-อขี(อคว็ามัที่��ต์(องการ โดยที่%�ว็ไปเรามั%กใชี(ภาษา HTML และ JavaScript ในการต์กแต์/งโฮมัเพจำ โดยต์%ว็อย/างที่��พบเห�นการใชี(ภาษา HTML และ JavaScript ได(แก/ การก�าหนดให(มั�ต์%ว็หน%งส-อว็+�ง การเปล��ยนแถูบส�ขีอง Scroll Bar เป4นต์(น

ใบงานที่�� 2เวิ.บเพจุ เวิ.บไซต#แลุ่ะโครงสร�างเวิ.บฯ

1. เว็�บเพจำค-อ...............................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................

2. เว็�บไซต์�ค-อ...............................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................

3. คว็ามัแต์กต์/างระหว็/างเว็�บเพจำและเว็�บไซต์�...............................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................

....................................................................................

....................................................................................

....................................................................................

....................................................................................

....................................................................................

.....................................................................………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………

หน�วิยการเร�ยนร�ที่�� 2

แผนการจุ�ดัการเร�ยนร�ที่�� 2โครงสร(างเว็�บไซต์�

รายวิ ชา การเขี�ยนเว็�บไซต์� ประจำ�าภาคเร�ยนที่�� 1 ป�การศึ�กษา 2551กลุ่��มสาระการเร�ยนร� การงานอาชี�พและเที่คโนโลย�

ระดั�บช��น มั%ธยมัศึ�กษาป�ที่�� 4………………………………………………………………………………………………………….จุ�ดัประสงค#น$าที่าง

- ส%งเคราะห�โครงสร(างขีองเว็�บไซต์� และออกแบบได(เน'�อหาสาระ

- องค�ประกอบโครงสร(างเว็�บเพจำ และเว็�บไซต์�- การก�าหนดร.ปแบบขีองเว็�บไซต์�- การออกแบบโครงสร(างเว็�บ

การจุ�ดักระบวินการเร�ยนร�ขั้��นเตร�ยมหร'อขั้��นน$าเขั้�าส�บที่เร�ยน

1. คร.แจำ(งจำ1ดประสงค�การเร�ยนร. ( และว็+ธ�การเร�ยนร. ( 2. น%กเร�ยนร/ว็มัแสดงคว็ามัค+ดเห�นเก��ยว็ก%บโครงสร(างขีอง

เว็�บไซต์�ต์ามัที่��ต์นเองเขี(าใจำแล(ว็ร/ว็มัก%นว็+เคราะห�ถู�งองค�ประกอบขีองโครงสร(างเว็�บขั้��นสอน

3. คร.อธ+บายเก��ยว็ก%บ ส/ว็นประกอบขีองโครงสร(างในหน(าเว็�บเพจำ และโครงสร(าง

เว็�บไซต์� เสนอพร(อมัก%บโปรแกรมั PowerPoint

น%กเร�ยนจำดบ%นที่�ก4. คร.แจำกใบคว็ามัร. (ที่�� 3 เร-�อง โครงสร(างเว็�บ5. น%กเร�ยนสร1ปคว็ามัร. (จำากการอ/านใบคว็ามัร. (ที่�� 3 แล(ว็

ต์อบค�าถูามัจำากใบคว็ามัร. ( 6. น%กเร�ยนร%บใบงานที่�� 3 ลงมั-อปฏิ+บ%ต์+ และประเมั+นผลการ

ที่�างานล%กษณ์ะกล1/มัขั้��นสร�ป

7. คร.เป>ดโอกาสให(น%กเร�ยนซ%กถูามัขี(อสงส%ยเก��ยว็ก%บเร-�องที่��ย%งไมั/เขี(าใจำ และร/ว็มัก%นสร1ปเน-=อหาบที่เร�ยน

ส'�อแลุ่ะแหลุ่�งการเร�ยนร� (ม�จุ$านวินเที่�าก�บจุ$านวินน�กเร�ยน)

- ใบคว็ามัร. (ที่�� 3 เร-�อง โครงสร(างเว็�บฯ- ชี+=นงานน�าเสนอบที่เร�ยน (PowerPoint)

- ใบงานที่�� 3- แบบประเมั+นการที่�างานเป4นกล1/มั- เว็�บไซต์�ประกอบการเร�ยนร. ( http://www.puibuble.th.gs

- ต์%ว็อย/างเว็�บไซต์�ที่��ใชี(เร�ยนร. (เก��ยว็ก%บด(านโครงสร(างเว็�บฯ

กระบวินการวิ�ดัแลุ่ะประเม นผลุ่ (ม�จุ$านวินเที่�าก�บจุ$านวินน�กเร�ยน)

วิ ธี�วิ�ดัผลุ่- ต์รว็จำผลงานจำากคว็ามัต์%=งใจำขีณ์ะอย./ภายในส%งคมัห(องเร�ยน- การให(คว็ามัร/ว็มัมั-อในการแสดงคว็ามัค+ดเห�น

- การที่�าใบงานที่�� 3 และแบบประเมั+นผลการที่�างานแบบกล1/มัเคร'�องม'อวิ�ดั

- แบบประเมั+นการที่�างานแบบกล1/มัเกณฑ์#การประเม น

- คะแนนแบบที่ดสอบหล%งเร�ยน คะแนนการประเมั+นการที่�างานแบบกล1/มั 0 – 50

คะแนน ไมั/ผ/าน51 – 100 คะแนน ผ/าน

ก จุกรรมเสนอแนะ ………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………

ใบงานที่�� 3เร-�อง การออกแบบโครงสร(างเว็�บ

กล1/มัที่��............จำ�านว็นสมัาชี+กในกล1/มั...............คน ชี%=น...................ว็%น/เด-อน/ป�............................

1. ชี-�อ ......................................................................... เลขีที่�� .......................

2. ชี-�อ ......................................................................... เลขีที่�� .......................

จุ�ดัประสงค#1. เพ-�อให(ผ.(เร�ยนเขี(าใจำคว็ามัหมัายขีองการออกแบบโครงสร(าง

เว็�บไซต์�จำากจำ+นต์นาการขีองต์นเอง2. เก+ดที่%กษะการค+ดอย/างมั�หล%กการ3. เก+ดที่%กษะการที่�างานเป4นกล1/มั

ค$าช��แจุง1. แบ/งน%กเร�ยนเป4นกล1/มั กล1/มัละ 2 คน แล(ว็ให(แต์/ละกล1/มัที่�าการ

ศึ�กษาค(นคว็(าเก��ยว็ก%บร.ปแบบการออกแบบโครงสร(างเว็�บไซต์�ในอ1ดมัคต์+ขีองน%กเร�ยน

2. ให(สมัาชี+กในกล1/มัต์กลงแบ/งงานศึ�กษาโครงสร(างขีองเว็�บไซต์�ที่��ถู.กต์(อง

3. จำากน%=นชี/ว็ยก%นน�าขี(อมั.ลที่��ค(นคว็(า น�ามัาสร1ปโครงสร(างและร/ว็มัก%นออกแบบโครงสร(างเว็�บไซต์�ในอ1ดมัคต์+ขีองต์นเองให(ถู.กต์(องและสว็ยงานที่��ส1ด

4. บ%นที่�กขี(อมั.ลลงในส-�อบ%นที่�ก

แบบประเม นการที่$างาน

รายการประเม นระดั�บค�ณภาพ

ต์(องปร%บปร1ง

(1 คะแนน)

พอใชี((2

คะแนน)

ด�(3

คะแนน)

ด�มัาก(4

คะแนน)

การประเม นการที่$างาน1. ที่�างานส�าเร�จำต์ามัเป?าหมัาย2. ที่�างานต์ามัว็+ธ�การและขี%=นต์อน3. การออกแบบถู.กต์(องครอบคล1มัเน-=อหา5. คว็ามัสว็ยงามัและส%ดส/ว็น4. การสร1ปคว็ามัหมัายการประเม นน ส�ยการที่$างาน

1. คว็ามัร%บผ+ดชีอบและเอาใจำใส/2. การที่�างานร/ว็มัก%บผ.(อ-�น3. คว็ามัซ-�อส%ต์ย�4. คว็ามัอดที่น5. คว็ามัประหย%ด

ผ.(ประเมั+น ..............................................................................

ว็%นที่�� ............เด-อน ...................................พ.ศึ. ...............

ใบควิามร�ที่�� 3 โครงสร�างเวิ.บไซต# ส�วินประกอบส$าค�ญ ๆ ในหน�าโฮมเพจุ ในหน(าโฮมัเพจำ (หน(าเเรกขีองเว็�บไซต์�) น%=นคว็รมั�ส/ว็นประกอบส�าค%ญ ๆ อย/างครบถู(ว็น เพ-�อให(ผ.(ชีมัสามัารถูเขี(ามัาใชี(งานได(สะดว็ก ซ��งหน(าโฮมัเพจำส/ว็นใหญ/มั%กมั�ส/ว็นประกอบที่��ส�าค%ญ ด%งน�= 1.โลโก( ( Logo)

ส+�งส�าค%ญที่��จำะชี/ว็ยให(ผ.(เขี(าเว็�บจำดจำ�าเว็�บไซต์�ขีอฃเราได(ก�ค-อ โลโก( นอกจำา“ ”

กน�=เเล(ว็โลโก(ย%งชี/ว็ยให(เว็�บไซต์�ขีอฃเราด.มั�เอกล%กษณ์�อ�กด(ว็ย โดยราน+ยมัว็างต์�าเเหน/งโลโก(ไว็(ที่��มั1มับนซ(ายเพราะเป4นจำ1ดที่��สามัารถูส%งเกต์1ได(ง/าย ซ��งจำากการว็+จำ%ยพบว็/าว็างต์�าเเหน/งโลโก(ที่��มั1มับนซ(ายน%=นชี/ว็ยให(ผ.(ชีมัสามัารถูจำดจำ�าเว็�บไซต์�ขีองเราได(ถู�ง 84% เลยที่��เด�ยว็

ค1ณ์ค/าขีองการว็างต์�าแหน/งโลโก( บนซ(าย (Upper Left) = 84%

บนขีว็า (Upper Right) = 6%

บนกลาง (Upper Center) = 6%

ที่��อ-�น ๆ (Other Position) = 4%

จำะส%งเกต์ได(ว็/าการออกแบบโลโก(ขีองเเต์/ละเว็�บไซต์�น%=จำะไมั/ซ%บซ(อนมัากน%=น แต์/จำะเน(นไปในที่างด(านการออกแบบให(เร�ยบง/ายและสามัารถูอ/านชี-�อเว็�บไซต์�ได(ชี%ดเจำนมัากกว็/า เน-�อฃจำากใชี(ภาพโลโก(ที่��ซ%บซ(อนอาจำส/งผลให(ผ.(เขี(าชีมัไมั/สามัารถูจำดจำ�าชี-�อเว็�บไซต์�ขีองเราได(น%�นเอง2.เมัน.หล%ก (Link Menu)

เมัน.หล%กเป4นจำ1ดเชี-�อมัโยงส+�งส�าค%ญ ๆ ที่��รว็บรว็มัไว็(ในร.ปแบบขีองเมัน.ป1Dมัหร-อขี(อคว็ามั โดยผ.(เขี(าชีมัจำะสามัารถูร%บร. (ได(ว็/าภายในเว็�บไซต์�น�=มั�เร-�องราว็ที่��น/าสนใจำอย/างไรบ(าง เชี/น News (ขี/าว็ใหมั/ ๆ) ,Shoooing และ Link (เชี-�อมัโยงเว็�บที่��เก��ยว็ขี(อง) เป4นต์(น ร.ปแบบขีองเมัน.หล%กที่��น+ยมัใชี(ก%นมั%กเป4นเมัน.แบบแนว็ต์%=งและเมัน1แบบแนว็นอนต์ามัล�าด%บ3.โฆษณ์า (Banner)

โฆษณ์าน%=นเป4นส/ว็นที่��ส�าค%ญอ�กเชี/นเด�ยว็ก%น เพราะเว็�บไซต์�ที่��มั�โฆษณ์าจำะชี/ว็ยส/งเสร+มัภาพล%กษณ์� คว็ามัน/าเชี-�อถู-อ และชี/ว็ยกระต์1(นคว็ามัสนใจำเพราะมั%กมั�การใชี(ภาพเคล-�อนไหว็ (Gif animation) ประกอบซ��งจำะที่�าให(เว็�บไซต์�ขีองเราด.ต์-�นต์าต์-�นใจำมัากย+�งขี�=น จำากการว็+จำ%ยพบว็/าภาพเคล-�อนไหว็ย%งชี/ว็ยให(เว็�บไซต์�ขีองเราด.น/าสนใจำมัากย+�งขี�=น 30% เลยที่��เด�ยว็ นอกจำากน�=แล(ว็ย%งสามัารถูเเสดงถู�งคว็ามัน+ยมัขีองผ.(เขี(าชีมัได(อ�กด(ว็ย แต์/ก�ไมั/คว็รให(มั�โฆษณ์ามัากเก+นไปและคว็รจำ%ดว็างต์�าเเหน/งให(เหมัาะสมัด(ว็ย4.ภาพประกอบเเละเน-=อหา (Content)

เน-=อหาสาระที่��น/าร. (เป4นส/ว็นส�าค%ญอย/างย+�งที่��จำะที่�าให(ผ.(เขี(าชีมัอยากจำะเขี(าเย��ยมัชีมัเว็�บไซต์�ขีองเรามัากขี�=นเเละใชี(บร+การอย/างสมั��าเสมัอ เราจำ�งคว็รอ%พเดจำเน-=อหาให(ใหมั/สด มั�ร.ปเเบบการจำ%ดว็างที่��อ/านง/าย เน-=อหาไมั/ยาว็หร-อส%=นจำนเก+นไป นอกจำากน�=หากเราใชี(ภาพประกอบที่��สว็ยงามัก�จำะชี/ว็ยให(เน-=อหาด.ด�งด1ดใจำมัากย+�งขี�=น ซ��งการใชี(ภาพประกอบที่��สว็ยงามัและฟอนต์�ที่��อ/านง/ายจำะชี/ว็ยให(เน-=อหาขีองเราน/าสนใจำเพ+�มัมัากย+�งขี�=นถู�ง 40-45%

การเเบ/งพ-=นที่��การใชี(งานในหน(าโฮมัเพจำ หล%งจำากที่��เราได(ร. (จำ%กก%บส/ว็นประกอบส�าค%ญ ๆ ในหน(าโฮมัเพจำเเล(ว็ ผ.(อ/านหลายที่/านจำะเร+�มัส%งส%ยว็/าในเมั-�อมั�ส/ว็นประกอบมัากมัายขีนาดน�=เราคว็รจำะจำ%ดว็าง

ต์�าแหน/งอย/างไรด� ต์%ว็อย/างขี(างล/างน�=เป4นต์%ว็อย/างหน��งที่��น+ยมัใชี(ก%นมัากในการจำ%ดว็างหน(าโฮมัเพจำ

เรามั%กพบเห�นการเเบ/งพ-=นที่��ในร.ปเเบบ 3 ส/ว็น และ 2 ส/ว็น การใชี(งานก%บเว็�บไซต์�ขีององกรและเว็�บไซต์�ที่��มั�ขีนาดใหญ/ เน-�องจำากเป4นร.ปแบบที่��ใชี(งานง/าย และมั�การแบ/งส%ดส/ว็นอย/างชี%ดเจำน เชี/น www.siemens.com, www.msn.com, www.sanook.com ส�าหร%บร.ปเเบบการเเบ/งพ-=นที่�� 1 ส/ว็นหร-อเเบบอ+สระน%=น เรามั%กพบเห�นก%บเว็�บไซต์�ที่��เน(นการออกแบบให(สว็ยงานมัากกว็/าเน(นการใชี(งาน และมั%กมั�การออกแบบที่��สล%บซ%บซ(อน เชี/น www.qooclup.com, www.rustboy.com, www.hardldbelker.com ที่�าอย/างไรให(โฮมัเพจำด.ด� ในคว็ามัเป4นจำร+งแล(ว็การออกเเบบเว็�บไซต์�ไมั/ได(มั�ร.ปเเบบที่��ต์ายต์%ว็และเเน/นนอนเเต์/ก�มั�องค�ประกอบหลายอย/างที่��จำะชี/ว็ยให�เว็�บไซต์�เราด.ด�เเละน/าใชี( ผ.(เขี�ยนจำ�งมั�ขี(อเเนะน�าและว็+ธ�การง/าย ๆ ที่��จำะชี/ว็ยให(โฮมัเพจำขีองค1ณ์ด.ด�ขี�=น1. เล-อกใชี(ส�ให(เหมัาะสมั การเล-อกใชี(ส�น%=นมั�ผลอย/างมัากในภาพรว็มัขีองเว็�บไซต์� เน-�องจำากส�เเต์/ละส�น%=นมั�ผลต์/ออารมัณ์�เเละคว็ามัร. (ส�กก%บผ.(ที่��เขี(ามัาใชี(บร+การ ด%งน%=นเราจำ�งคว็รเล-อกใชี(ส�ให(เหมัาะสมัก%บเว็�บไซต์� โดยเเต์/ละประเภที่ขีองส�น%=นจำะให(คว็ามัหมัายและคว็ามัร. (ส�กที่��ต์/าง ๆ ก%นน�= ส�ฟ?า เป4นส�ขีองที่(องฟ?าจำ�งชี/ว็ยให(เราร. (ส�กปลอดโปร/งโล/งสบาย ส�ฟ?าน%=นเป4นส�ที่��ด.แล(ว็สบายต์าและนอกจำากน�=ย%งร. (ส�กน1/มันว็ลและส1ขีสบายอ�กด(ว็ย ส�น�=าเง+น ให(คว็ามัร. (ส�กถู�งคว็ามัจำร+งจำ%ง มั%�งคงและจำร+งจำ%ง สงบและปลอดภ%ย นอกจำากน�=แล(ว็ย%งให( คว็ามัร. (ส�กหร.หรา มั�ระด%บ มั�ราคาและคว็ามัเป4นชีายอ�กด(ว็ย ส�เขี�ยว็ ส�เขี�ยว็เป4นส�ขีองต์(นไมั(ใบหญ(าที่�าให(เราร. (ส�กสดชี-�นเย�นสบายเเละชีว็นให(น�กถู�งคว็ามัเป4นธรรมัชีาต์+ ส�เขี�ยว็น%=นเป4นส�ที่��สบายต์ามัากที่��ส1ดส�หน��ง ส�เเดง ให(คว็ามัร. (ส�กร(อนเเรง คว็ามัร1นแรงคว็ามัมั�พล%งและคว็ามัต์-�นเต์(นสน1กสนานนอกจำากน�=เเล(ว็เป4นส�มังคลขีองคนจำ�นอ�กด(ว็ย ส�เหล-องและส�ส(มั

ส�เหล-องน%=นให(อารมัณ์�สดใสเเละด�งด.ดสายต์าเเต์/บางคร%=งอาจำที่�าให(ร.ส�กเหน-�อย ส/ว็นส�ส(มัน%=นที่�าให(คว็ามัร. (ส�กอบอ1/นกระต์-อร-อร(นและนอกจำากน�=แล(ว็ย%งด.ที่%นสมั%ยอ�กด(ว็ย ส�เที่า ให(คว็ามัร. (ส�กส1ภาพส1ขี1มั สงบ เเละมั%�นคง และย%งให(คว็ามัร. (ส�กหมั/อนหมัอง และโศึกเศึร(าอ�กด(ว็ย ส�ขีาว็ ให(คว็ามัร. (ส�กเร�ยบง/าย สะอาดสะอ(าน โล/งสบายและบร+ส1ที่ธ+I 2.มั�คว็ามัเป4นเอกล%กษณ์� เราสามัารถูออกเเบบเว็�บไซต์�ให(มั�คว็ามัเป4นเอกล%กษณ์�ย/างง/าย ๆ ด(ว็ยการเล-อกใชี(ส�ฟอนต์�และภาพประกอบที่��มั�คว็ามัคล(ายคล�งก%นที่1ก ๆ หน(าขีองเว็�บไซ๖ เน-�องจำากเว็�บไซต์�ที่��มั�เอกล%กษณ์�มั%กที่�าให(ผ.(ใชี(จำดจำ�าได(ง/าย นอกจำากน�=ย%งมั�จำ1ดสนใจำอ-�น ๆ เป4นส/ว็นประกอบอ�ก เชี/น โลโก( ส� เเละ คว็ามัคล(ายคล�งก%น 3.ต์(องสามัารถูใชี(งานได(อย/างเหมัาะสมั หากเว็�บไซต์�ขีองค1ณ์น%=นมั�การใชี(งานที่��สล%บซ%บซ(อนจำนเก+นไปอาจำมั�ผลที่�าให(ผ.(ที่��มัาใชี(บร+การหง1ดหง+ดร�าคาญใจำได(และที่�าให(ไมั/อยากกล%บมัาใชี(บร+การที่��เว็�บไซต์�ขีองเราอ�กโดยเฉพาะหากเว็�บไซต์�ขีองค1ณ์เป4นเว็�บไซต์�เพ-�อการบร+การซ-=อขีายแล(ว็ล/ะก�จำะย+�งเป4นผลเส�ยอย/างมัากในการส%�งซ-=อส+นค(าและใชี(บร+การ

4.สามัารถูแสดงผลได(อย/างรว็ดเร�ว็ ในการออกแบบหน(าโฮมัเพจำน%=นนอกจำากจำะเน(นหน(าต์าที่��น/าสนใจำแล(ว็ การแสดงผลที่��รว็ดเร�ว็ก�จำะที่�าให(เว็�บไซต์�ไมั/น/าเบ-�อ ด%งน%=นการใชี(ภาพหร-อกราฟ>กประกอบจำ�งคว็รค�าน�งถู�งเร-�องระยะเว็ลาในการแสดงผลเว็�บไซต์�ด(ว็ย เน-�องจำากย+�งมั�ภาพประกอบมัากเว็ลาในการแสดงผลก�จำะย+�งมัากด(ว็ยไปด(ว็ย นอกจำากห%ว็ขี(อต์/าง ๆ ที่��กล/าว็มัาแล(ว็ล%กษณ์ะขีองต์%ว็อ%กษรที่��ใชี(ประกอบก�เป4นส/ว็นส�าค%ญอ�กอย/างหน��งที่��จำะชี/ว็ยให(โฮมัเพจำขีองเราด.ที่%นสมั%ย น/าเชี-�อถู-อหร-อสน1กสนานมัากย+�งขี�=น เน-�องจำากต์%ว็หน%งส-อแต์/ละล%กษณ์ะน%=นจำะให(คว็ามัร. (ส�กแต์กต์/างก%นไปต์%ว็หน%งส-อแบบ Serif (มั�เชี+ง)

ให(คว็ามัร. (ส�กขีองคว็ามัคลาสส+ค ด.เก/าแก/ และค/อนขี(างเป4นที่างการต์%ว็หน%งส-อแบบ San Serif (ไมั/มั�เชี+ง)

ให(คว็ามัร. (ส�กเร�ยบง/าย มั�คว็ามัที่%นสมั%ยและนอกจำากน�=แล(ว็ย%งชี/ว็ยให(อ/านง/ายอ�กด(ว็ย Script (ต์%ว็อ%กษรแบบลายมั-อ)

ให(คว็ามัร. (ส�กสน1กสนานเป4นก%นเองและด.ไมั/เป4นที่างการ มั%กใชี(ก%บค�าโฆษณ์าส%=น ๆ ต์%ว็อ%กษรแบบมั�ห%ว็ มั%กใชี(ก%บบที่คว็ามัยาว็ ๆ เพราะชี/ว็ยให(อ/านง/าย เชี/น หน%งส-อเร�ยน แต์/ในขีณ์ะเด�ยว็ก%นก�ด.โบราณ์ ต์%ว็อ%กษรแบบไมั/มั�ห%ว็ ต์%ว็หน%งส-อแบบน�=ค/อนขี(างที่��จำะอ/านยาก มั%กใชี(ก%บขี(อคว็ามัส%=น ๆ แต์/ก�ให(คว็ามัร. (ส�กที่��ที่%นสมั%ย ที่%=งหมัดน�=เป4นเพ�ยงพ-=นฐานเล�ก ๆ น(อย ๆ ที่��จำะชี/ว็ยให(ค1ณ์สามัารถูเขี(าใจำว็+ธ�การง/าย ๆ ในการออกแบบเพ-�อที่��จำะน�าไปใชี(ก%บโฮมัเพจำขีองค1ณ์ โดยการศึ�กษาหาคว็ามัร. (ในส+�งที่��ต์นเองสนใจำเป4นพ+เศึษ การด.ต์%ว็อย/างโฮมัเพจำอ-�น ๆ และการฝLกฝนการใชี(คว็ามัค+ดสร(างสรรค� จำากน%=นจำ�งน�ามัาประย1กต์�ใชี( ส+�งเหล/าน�=จำะชี/ว็ยให(ค1ณ์สามัารถูออกแบบโฮมัเพจำได(อย/างสร(างสรรค�และสว็ยงามัมัากขี�=นน%�นเองขี%=นต์อนส�าค%ญในการสร(างโฮมัเพจำ ในการสร(างโฮมัเพจำน%=นมั�ขี%=นต์อนที่��สล%บซ%บซ(อนพอสมัคว็รแต์/ก�ไมั/ยากจำนเก+นไป ผ.(เขี�ยนจำ�งขีอเสนอแนว็ที่างง/าย ๆ ที่��จำะที่�าให(เราสามัารถูสร(างโฮมัเพจำได(อย/างเป4นขี%=นต์อนและมั�คว็ามัเขี(าใจำในการสร(างโฮมัเพจำมัากขี�=นด%งว็+ธ�การต์/อไปน�= 1.ขีอพ-=นที่��โฮมัเพจำจำาก Web Hosting

ในการขีอพ-=นที่��โฮมัเพจำเราจำะต์(องเล-อก Web Hosting เส�ยก/อน โดยการเปร�ยบเที่�ยบขี(อด�ขี(อเส�ยต์/าง ๆ รว็มัถู�งขีนาดขีองพ-=นที่��ให(บร+การด(ว็ย จำากน%=นจำ�งลงที่ะเบ�ยนขีอพ-=นที่��โฮมัเพจำ (ผ.(อ/านคว็รค+ดล%กษณ์ะและชี-�อโฮมัเพจำที่��ต์(องการสร(างไว็(ในใจำเส�ยก/อนเพ-�อให(ล%กษณ์ะขีองโฮมัเพจำและชี-�อที่��ต์% =งส%มัพ%นธ�ก%น)

2.ก�าหนดล%กษณ์ะขีองโฮมัเพจำ เมั-�อเราขีอพ-=นที่��โฮมัเพจำแล(ว็ ขี%=นต์อนต์/อไปค-อ การก�าหนดล%กษณ์ะโฮมัเพจำขีองเรา โดยในต์อนน�=เราต์(องค+ดและต์%ดส+นใจำว็/าเราาจำะสร(างโฮมัเพจำเก��ยว็ก%บอะไรด� มั�ล%กษณ์ะโที่นส�อะไร และใครจำะเขี(ามัาเย��ยมัชีมัในโฮมัเพจำขีองเราบ(าง เมั-�อต์%ดส+นใจำได(แล(ว็ก�จำะเขี(าส./ขี% =นต์อนต์/อไป 3.ออกแบบหน(าโฮมัเพจำด(ว็ย Photoshop

ในขี%=นต์อนน�=เราจำะต์(องมั�ภาพขีองหน(าโฮมัเพจำลาง ๆ ไว็(ในใจำแล(ว็ว็/าจำะมั�ล%กษณ์ะอย/างไร มั�ส/ว็นประกอบอะไรบ(าง จำากน%=นเราจำ�งมัาเร+�มัต์(นออกแบบและสร(างส/ว็นประกอบต์/าง ๆ ในหน(าโฮมัเพจำ ซ��งผ.(เขี�ยนจำะได(อธ+บายรายละเอ�ยดเพ+�มัเต์+มัในต์อนต์/อไป

4.สร(างโฮมัเพจำให(สมับ.รณ์�ด(ว็ย Dreamweaver MX

เมั-�อเราได(ออกแบบส/ว็นประกอบต์/าง ๆ ขีองหน(าโฮมัเพจำด(ว็ยโปรแกรมั Photoshop เสร�จำเร�ยบร(อยแล(ว็ ต์/อไปเราจำะเขี(าส./การสร(างโฮมัเพจำด(ว็ยโปรแกรมั Dreamweaver MX เพ-�อให(ได(โฮมัเพจำที่��สมับ.รณ์�ซ��งเราก�จำะได(เร�ยนร. (ในต์อนต์/อไปเชี/นก%น 5.อ%พโหลดโฮมัเพจำขี�=นอ+นเต์อร�เน�ต์ เมั-�อเราสร(างโฮมัเพจำเร�ยบร(อยแล(ว็ก�จำะเขี(าส./กระบว็นการอ%พโหลดโฮมัเพจำเขี(าส./ Web Hosting ที่��เราได(ขีอพ-=นที่��โฮมัเพจำไว็(เร�ยบร(อยแล(ว็ด(ว็ยโปรแกรมั Cute_FTP หร-อโปรแกรมัที่��ที่าง เว็�บไซต์�มั�ให(บร+การขี�=นโหลดขี(อมั.ล เพ�ยงเที่/าน�=เราก�จำะสามัารถูสร(างโฮมัเพจำได(อย/างสมับ.รณ์�แบบแล(ว็

การสร�างแลุ่ะออกแบบเวิ.บกระบว็นการในการสร(างและออกแบบเว็�บจำะมั�กระบว็นการพ-=นฐานอย./ด(ว็ยก%น 5 ขี%=นต์อนค-อ

1. การว็างแผน (Planning) เป4นขี%=นต์อนที่��ผ.(สร(างเว็�บจำะต์(องรว็บรว็มัขี(อมั.ลที่��ต์(องการจำะน�ามัาสร(างเว็�บ ก�าหนดว็%ต์ถู1ประสงค�และกล1/มัเป?าหมัาย จำากน%=นก�าหนดขีอบเขีต์และคว็ามัต์(องการขีองเว็�บว็/าจำะต์(องมั�อะไรบ(าง เชี/น ขีนาดขีองหน(าจำอภาพ บราว็เซอร�ที่��จำะใชี( ฯลฯ องค�ประกอบและเคร-�องมั-อที่��จำะต์(องใชี( ต์(องการมั�กระดานขี/าว็ ห(องสนที่นา ฯลฯ รว็มัถู�งขี%=นต์อนและกระบว็นการในการบ�าร1งร%กษาอย/างเป4นระบบการว็างแผนเบ-=องต์(นขีองการสร(างเว็�บส�าหร%บ Dreamweaver ค-อ

- ก�าหนดพ-=นที่��จำ%ดเก�บเว็�บในเคร-�องคอมัพ+ว็เต์อร�- ก�าหนดพ-=นที่��ต์+ดต์%=งเว็�บเมั-�อสร(างเสร�จำ2. การออกแบบ (Design) เป4นขี%=นต์อนที่��น�าขี(อมั.ลและแผนที่��

ว็างไว็(ไปปฏิ+บ%ต์+ โดยการลงมั-อปฏิ+บ%ต์+โดยจำ%ดพ+มัพ�เน-=อหา ก�าหนดการเชี-�อมัโยง และค1ณ์ล%กษณ์ะอ-�นที่��ต์(องใชี(ในเว็�บ การออกแบบก�จำะเน(นที่��การจำ%ดหน(าจำอขีองเว็�บให(สอดคล(องก%นและระมั%ดระว็%งป5ญหาต์/าง ๆ ในการออกแบบ

3. การพ%ฒนา (Development) เป4นขี%=นต์อนที่��ต์/อเน-�องจำากการออกแบบและการสร(าง โดยเน(นไปที่��การต์กแต์/งและเสร+มัเคร-�องมั-อต์/าง ๆ ส�าหร%บเว็�บ เชี/น การก�าหนดส� ภาพ การใชี( Flash ชี/ว็ยให(เว็�บเร(าคว็ามัสนใจำ และเพ+�มัเต์+มัเที่คน+คต์/าง ๆ ขีองโปรแกรมัสน%บสน1นการสร(างเว็�บ

4. การต์+ดต์%=ง (Publishing) เป4นขี%=นต์อนที่��จำะน�าเอาเว็�บที่��ได(สร(างขี�=นเขี(าไปต์+ดต์%=งในเว็�บเซอร�เว็อร�เพ-�อให(แสดงผลได(ในระบบอ+นเที่อร�เน�ต์ หร-อจำะเร�ยกว็/า การอ%บโหลด (Up load) ซ��งเป4นขี%=นต์อนที่��จำะต์(องด�าเน+นการอย./เสมัอเมั-�อสร(างเว็�บเสร�จำ

5. การบ�าร1งร%กษา (Maintenance) เป4นขี%=นต์อนประเมั+นผลและต์+ดต์ามัผลการต์+ดต์%=งเว็�บไซต์�ว็/ามั�ขี(อขี%ดขี(องหร-อต์(องปร%บปร1งเปล��ยนแปลงเว็�บเพ+�มัเต์+มัให(ที่%นสมั%ยอย./เสมัอ อาจำจำะเร�ยกได(ว็/าขี% =นต์อนการอ%บเดที่ (Up date)

การก$าหนดัรปแบบเวิ.บไซต# (Web-site)

เว็�บไซต์� (Web-site) หมัายถู�ง เว็�บที่��ประกอบด(ว็ยเว็�บเพจำหลาย ๆ เว็�บเพจำมัารว็มัก%น อย./ภายในพ-=นที่��เด�ยว็ก%นและเชี-�อมัโยงระหว็/างก%นภายใต์(โดเมันเนมัเด�ยว็ก%น โดยมั�โฮมัเพจำเป4นหน(าแรกขีองเว็�บไซต์�ที่�าหน(าที่��เชี-�อมัโยงไปย%งเว็�บเพจำต์/าง ๆ

โฮมัเพจำ (Homepage) หมัายถู�ง เว็�บเพจำที่��เป4นหน(าแรกขีองเว็�บไซต์� ที่��เขี(าถู�งได(ที่%นที่�เมั-�อเขี(าส./ระบบอ+นเที่อร�เน�ต์โดยการพ+มัพ�โดเมันเนมัหร-อย.อาร�แอลซ��งเป4นที่��ต์+ดต์%=งขีองเว็�บไซต์�

เว็�บเพจำ (Web page) หมัายถู�ง เอกสารที่��สร(างขี�=นโดยในร.ปแบบขีอง HTML หร-อโปรแกรมัการสร(างเว็�บโดยเฉพาะ จำะแสดงผลได(เฉพาะโปรแกรมับราว็เซอร� และต์(องต์+ดต์%=งในเว็�บเซอร�เว็อร�เพ-�อเขี(าไปอ/านขี(อมั.ลได(โดยผ/านระบบอ+นเที่อร�เน�ต์ เว็�บเพจำจำะมั� 2 ล%กษณ์ะใหญ/ค-อ

- เว็�บเพจำแบบหน(าเด�ยว็ (Single page) หร-อแบบส%=น (Short

page) หมัายถู�ง เว็�บเพจำที่��แสดงผลขี(อมั.ลหร-อเน-=อหาเพ�ยงหน(าเด�ยว็มั�

ขีนาดเที่/าก%บหน(าจำอคอมัพ+ว็เต์อร�พอด� หร-อมั�แถูบเล-�อนลงมัาด(านล/างส%=น ๆ หร-อมั�ร.ปแบบเป4นกรอบพอด�หน(าจำอภาพ

- เว็�บเพจำแบบแถูบเล-�อน (Scroll page) หร-อแบบยาว็ (Long

page) หมัายถู�ง เว็�บเพจำที่��แสดงผลขี(อมั.ลหร-อเน-=อหาเป4นแนว็ยาว็จำากด(านบนลงมัาย%งด(านล/างขีองหน(าจำอภาพ โดยมั�แถูบเล-�อนอย./ด(านขี(างส�าหร%บเล-�อนหน(าจำอภาพ เพ-�อด.ขี(อมั.ลที่��แสดงผลหน(าจำอภาพ

การออกแบบโครงสร�างเวิ.บส+�งที่��ต์(องพ+จำารณ์าในการสร(างเว็�บเพ-�อการศึ�กษาค-อ โครงสร(าง

หล%กขีองเว็�บ เน-�องจำากการจำ%ดการขี(อมั.ลเพ-�อการเร�ยนการสอนมั�คว็ามัแต์กต์/างก%น กล1/มัผ.(เร�ยนที่��แต์กต์/างและเน-=อหาขีองเว็�บแต์กต์/างก%น โครงสร(างขีองเว็�บก�จำะมั�ผลต์/อการเร�ยนการสอนเชี/นก%น (McCormack and Jones, 1998)โครงสร(างขีองเว็�บโดยพ-=นฐานจำะมั� 2 ล%กษณ์ะค-อ

1. โครงสร(างเว็�บแบบต์-=น เป4นโครงสร(างเว็�บในล%กษณ์ะที่��มั�การเชี-�อมัโยงจำากหน(าแรกหร-อหน(าที่��หล%กไปย%งเน-=อหาโดยต์รง โดยไมั/มั�เว็�บเพจำที่��เป4นเน-=อหาเชี-�อมัโยงต์/อไปอ�กมัากน%ก สามัารถูกล%บมัาย%งหน(าแรกหร-อหน(าหล%กขีองขีองเว็�บไซต์�ได(ในที่%นที่� อาจำจำะมั�การเชี-�อมัโยงขีองเน-=อหาต์/อไปอ�กบ(างแต์/ไมั/ต์/อเน-�องเป4นล�าด%บล�กลงไปเหมั-อนก%บโครงสร(างขีองเว็�บแบบล�ก โครงสร(างล%กษณ์ะน�=จำ�งเป4นโครงสร(างที่��มั�เน-=อหาแยกเป4นหน/ว็ยย/อย ๆ หร-อมั�เน-=อหาเฉพาะเร-�องไมั/เก��ยว็ขี(องก%น ที่�าให(ไมั/ต์(องเชี-�อมัโยงเว็�บเพจำต์/อไปเร-�อย ๆ เว็�บแบบต์-=นอาจำจำะมั�เน-=อหามัากก�ได( แต์/ไมั/เชี-�อมัโยงล�กลงไปอ�ก การออกแบบเว็�บเพจำอาจำเป4นแบบหน(าเด�ยว็ส%=น ๆ หร-อแบบแถูบเล-�อนยาว็ลงไปมัากก�ได( เน-=อหาจำบในหน(าน%=นและไมั/เชี-�อมัโยงไปอ�ก

โฮมัเพจำเว็�บไซต์�

รปแสดัง ลุ่�กษณะโครงสร�างเวิ.บแบบต'�น1. โครงสร(างเว็�บแบบล�ก เป4นโครงสร(างที่��มั�การเชี-�อมัโยงต์/อเน-�องก%นไปในเน-=อหาเด�ยว็ก%นโดยต์ลอดหลาย ๆ เว็�บ เน-�องจำากมั�เน-=อหามัากและเป4นล�าด%บต์/อเน-�อง ที่�าให(โครงสร(างขีองเว็�บต์(องลงล�กไปเร-�อย ๆ ส�าหร%บการเล-�อนแถูบเล-�อนด(านขีว็าขีองหน(าจำอไมั/ได(หมัายคว็ามัว็/า โครงสร(างเว็�บน%=นจำะเป4นแบบล�ก เพราะการเล-�อนแถูบเล-�อนด(านขี(างขีว็าขีองจำอภาพเป4นการออกแบบหน(าจำอเว็�บ ไมั/ใชี/โครงสร(างภาพ รว็มัขีองเว็�บ การ

เล-�อนแถูบเล-�อนด(านขีว็าขีองหน(าจำอภาพเป4นการออกแบบเว็�บแบบแถูบเล-�อน เร�ยกได(ว็/า การออกแบบหน(าจำอภาพแบบแถูบเล-�อน เป4นแผ/น

เน-=อหาเว็�บไซต์�

เน-=อหาเว็�บไซต์�

เน-=อหาเว็�บไซต์�

เน-=อหาเว็�บไซต์�

เน-=อหาเว็�บไซต์�

โฮมัเพจำเว็�บไซต์�

ห%ว็เร-�องเว็�บไซต์�

ห%ว็เร-�องเว็�บไซต์�

เน-=อหาเว็�บไซต์�

เน-=อหาเว็�บไซต์�

เน-=อหาเว็�บไซต์�

เน-=อหาเว็�บไซต์�

เน-=อหาเว็�บไซ

ต์�

เน-=อหาเว็�บไซ

ต์�

เน-=อหาเว็�บไซ

ต์�

เน-=อหาเว็�บไซ

ต์�

เน-=อหาเว็�บไซ

ต์�

เน-=อหาเว็�บไซ

ต์�

เน-=อหาเว็�บไซ

ต์�

เน-=อหาเว็�บไซ

ต์�

เด�ยว็ยาว็จำากด(านบนลงมัาด(านล/าง แต์/การออก แบบโครงสร(างเว็�บแบบล�ก เป4นการออกแบบที่��มั�เว็�บเพจำหลาย ๆ เว็�บเพจำต์/อเน-�องจำากเป4นจำ�านว็นมัาก

องค#ประกอบที่��ควิรม�ในเวิ.บเพจุองค�ประกอบที่%�ว็ไป1. ชี-�อขีองเว็�บเพจำ (Title) 2. ประว็%ต์+และร.ปภาพผ.(จำ%ดที่�า (Profile/Picture)

3. การเชี-�อมัโยงภายในและภายนอกเว็�บ (Links) 4. การแสดงที่��อย./ขีองเว็�บ : URL

5. ว็%น/เว็ลาที่��สร(างเว็�บ (Date/Time) 6. การปร%บปร1งคร%=งล/าส1ด (Update)

7. ผ.(จำ%ดที่�าเว็�บ : (created by) 8. การสงว็นล+ขีส+ที่ธ+I (Copy right) 9. การต์+ดต์/อผ.(จำ%ดที่�าเว็�บ (contract /e-mail) 10. สถูานที่��ต์+ดต์/อขีองเว็�บ (Address)

11. บราว็เซอร�ที่��เหมัาะสมัส�าหร%บการชีมั (Browser )12. ขีนาดหน(าจำอที่��เหมัาะสมัในการชีมั13. ค�าถูามัที่��ถู.กถูามับ/อย FAQ (Frequency Asked Question)

14. คว็ามัชี/ว็ยเหล-อ (Help)

องค#ประกอบพ เศัษ1. สมั1ดเย��ยมั (Guest book) 2. ฝากขี(อคว็ามั (Web board)3. กระดานขี/าว็ (Bulletin Board) 4. กระที่.( 5. แบบส�ารว็จำ (Web poll) 6. จำ�านว็นผ.(เขี(าชีมั (Counter)7. ห(องสนที่นา (Chat Room) 8. สถู+ต์+ที่1กประเภที่ (Web state) 9. เที่คน+คพ+เศึษด(ว็ยโปรแกรมัสคร+ปต์� (Java script, VBscript , cgi,asp,php)

10. โปรแกรมัพ+เศึษสน%บสน1น (Download) 11. สไลด�สร1ปบรรยาย (Presentation) องค�ประกอบเฉพาะส�าหร%บ E-learning 1. ค�าอธ+บายรายว็+ชีา 2. ว็%ต์ถู1ประสงค�รายว็+ชีา3. ค1ณ์สมับ%ต์+ขีองกล1/มัผ.(เร�ยน 4. การลงที่ะเบ�ยน5. ต์ารางเร�ยน 6. ผ.(บร+หารหล%กส.ต์ร7. ก+จำกรรมั 8. ขี/าว็สาร/ประกาศึ9. ต์ารางสอน/ต์ารางเร�ยน 10. ปฏิ+ที่+นการศึ�กษา11. แผนภ.มั+แสดงโครงสร(างรายว็+ชีา 12. สารบ%ญเน-=อหา13. เน-=อหารายละเอ�ยด 14. แบบที่ดสอบก/อนเร�ยน15. แบบฝLกห%ดระหว็/างเร�ยน 16. สร1ปสาระส�าค%ญ17. ขี(อสอบที่(ายการเร�ยน 18. โครงสร(างหล%กส.ต์ร19. บรรณ์าน1กรมั/รายการอ(างอ+ง 20. เว็�บไซต์�ที่��เก��ยว็ขี(อง

หน�วิยการเร�ยนร�ที่�� 3ขี(อคว็รร. (ก/อนเป4นเว็�บมัาสเต์อร�และจำรรยาบรรณ์ขีองผ.(ที่�าเว็�บ

รายวิ ชา การเขี�ยนเว็�บไซต์� ประจำ�าภาคเร�ยนที่�� 1 ป�การศึ�กษา 2551กลุ่��มสาระการเร�ยนร� การงานอาชี�พและเที่คโนโลย�

ระดั�บช��น มั%ธยมัศึ�กษาป�ที่�� 4………………………………………………………………………………………………………….มาตรฐานการเร�ยนร�

มัาต์รฐานที่�� 4.1 ขี(อ 6 เขี(าใจำหล%กการและว็+ธ�แก(ป5ญหาด(ว็ยกระบว็นการที่างเที่คโนโลย�

สารสนเที่ศึอย/างมั�ประส+ที่ธ+ภาพและประส+ที่ธ+ผล

ขี(อ 12 ใชี(คอมัพ+ว็เต์อร�สร(างงานอย/างมั�จำ+ต์ส�าน�กและมั�คว็ามัร%บผ+ดชีอบผลุ่การเร�ยนร�ที่��คาดัหวิ�ง

1. เขี(าใจำหล%กการ ขี(อก�าหนดเก��ยว็ก%บการออกแบบและจำ%ดที่�าเว็�บไซต์�

2. มั�จำร+ยธรรมัในการใชี(เที่คโนโลย�สารสนเที่ศึในการสร(างงาน จุ�ดัประสงค#การเร�ยนร�

จุ�ดัประสงค#น$าที่าง- บอกหล%กการ ขี(อก�าหนดเก��ยว็ก%บการออกแบบและจำ%ดที่�า

เว็�บไซต์�- บอกค1ณ์ค/าและคว็ามัส�าค%ญขีองจำร+ยธรรมัในการใชี(เที่คโนโลย�

สารสนเที่ศึในการสร(างงานจุ�ดัประสงค#ปลุ่ายที่าง- เขี(าใจำหล%กการ ขี(อก�าหนดเก��ยว็ก%บการออกแบบและจำ%ดที่�า

เว็�บไซต์�- มั�จำร+ยธรรมัในการใชี(เที่คโนโลย�สารสนเที่ศึในการสร(างงาน

จำ�านว็น 2 แผน 4 ชี%�ว็โมัง

หน�วิยการเร�ยนร�ที่�� 3แผนการจุ�ดัการเร�ยนร�ที่�� 1

ขี(อคว็รร. (ก/อนเป4นเว็�บมัาสเต์อร�

รายวิ ชา การเขี�ยนเว็�บไซต์� ประจำ�าภาคเร�ยนที่�� 1 ป�การศึ�กษา 2551กลุ่��มสาระการเร�ยนร� การงานอาชี�พและเที่คโนโลย�

ระดั�บช��น มั%ธยมัศึ�กษาป�ที่�� 4………………………………………………………………………………………………………….จุ�ดัประสงค#น$าที่าง

- บอกหล%กการ ขี(อก�าหนดเก��ยว็ก%บการออกแบบและจำ%ดที่�าเว็�บไซต์�เน'�อหาสาระ

- หล%กการที่%�ว็ไปในการออกแบบเว็�บ- คว็รมั�หน(าเว็�บเพจำอะไรบ(าง- หล%กการที่�าเว็�บไซต์�- การประชีาส%มัพ%นธ�เว็�บไซต์�ให(คนร. (จำ%ก

การจุ�ดักระบวินการเร�ยนร�ขั้��นเตร�ยมหร'อขั้��นน$าเขั้�าส�บที่เร�ยน

1. คร.แจำ(งจำ1ดประสงค�การเร�ยนร. ( และว็+ธ�การเร�ยนร. ( แล(ว็ที่ดสอบก/อนเร�ยน

2. น%กเร�ยนร/ว็มัแสดงคว็ามัค+ดเห�นเก��ยว็ก%บหล%กการการที่�าเว็�บไซต์�ที่%�ว็ ๆ ไป รว็มัถู�งคว็ามัค+ดเห�นเก��ยว็ก%บเว็�บไซต์�ที่��น/าชีมัและไมั/น/าชีมัขั้��นสอน

3. คร.อธ+บายเก��ยว็ก%บ หล%กการการสร(างเว็�บเพจำ และเว็�บไซต์� รว็มัถู�งคว็ามัเหมัาะสมัในการสร(างเว็�บและการประชีาส%มัพ%นธ�เว็�บไซต์�บนอ+นเต์อร�เน�ต์ น%กเร�ยนจำดบ%นที่�กบที่เร�ยน พร(อมัอธ+บายบที่เร�ยนในร.ปแบบ PowerPoint

4. คร.แจำกใบคว็ามัร. (ที่�� 4 เร-�อง ขี(อคว็รร. (ก/อนเป4นเว็�บมัาสเต์อร�

5. น%กเร�ยนสร1ปคว็ามัร. (จำากการอ/านใบคว็ามัร. (ที่�� 4 แล(ว็ให(น%กเร�ยนเขี�ยนลงสมั1ดบ%นที่�ก

6. คร.ต์รว็จำผลการสร1ปโดยต์รว็จำจำากสมั1ดน%กเร�ยน ขั้��นสร�ป

7. คร.เป>ดโอกาสให(น%กเร�ยนซ%กถูามัขี(อสงส%ยเก��ยว็ก%บเร-�องที่��ย%งไมั/เขี(าใจำ และร/ว็มัก%นสร1ปเน-=อหาบที่เร�ยน

ส'�อแลุ่ะแหลุ่�งการเร�ยนร� (ม�จุ$านวินเที่�าก�บจุ$านวินน�กเร�ยน)

- ใบคว็ามัร. (ที่�� 4 เร-�อง ขี(อคว็รร. (ก/อนเป4นเว็�บมัาสเต์อร�- ชี+=นงานน�าเสนอบที่เร�ยน (PowerPoint)

- เว็�บไซต์�ประกอบการเร�ยนร. ( http://www.puibuble.th.gs

- ต์%ว็อย/างเว็�บไซต์�ที่��ให(ขี(อมั.ลเก��ยว็ก%บขี(อคว็รร. (ก/อนเป4นเว็�บมัาสเต์อร�

กระบวินการวิ�ดัแลุ่ะประเม นผลุ่ (ม�จุ$านวินเที่�าก�บจุ$านวินน�กเร�ยน)

วิ ธี�วิ�ดัผลุ่- ต์รว็จำงานจำากคว็ามัต์%=งใจำขีณ์ะอย./ภายในส%งคมัห(องเร�ยน- การให(คว็ามัร/ว็มัมั-อในการแสดงคว็ามัค+ดเห�น - การที่�าแบบที่ดสอบ และการจำดบ%นที่�ก

เคร'�องม'อวิ�ดั- แบบที่ดสอบก/อนเร�ยน/หล%งเร�ยน

เกณฑ์#การประเม น- คะแนนแบบที่ดสอบก/อนเร�ยนและหล%งเร�ยน 1-3 คะแนน กล1/มัต์��า4-6 คะแนน กล1/มัปานกลาง7-10 คะแนน กล1/มัส.ง

ก จุกรรมเสนอแนะ ………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………

ใบควิามร�ที่�� 4 ขั้�อควิรร�ก�อนเป:นเวิ.บมาสเตอร# บ�ญญ�ต 10 ประการ เคยส%งเกต์บ(างไหมัคร%บว็/า โฮมัเพจำใดที่��ค1ณ์ประที่%บใจำเมั-�อเขี(าไปเย��ยมัชีมั แบบที่��เร�ว็ส1ด ๆ แบบที่��ภาพแสนสว็ย แบบที่��มั�ล.กเล/นเยอะ ๆ จำนต์(องน%�งคอยกว็/า 5

นาที่� แบบไหนที่��ที่�าให(ค1ณ์ต์ร�งใจำ อย./ก%บที่��โดยไมั/คล+กหน�ไปเส�ยก/อน ถู(าค1ณ์ค+ดจำะที่�าเว็�บไซต์�ให(ต์ร�งใจำผ.(ชีมั แน/นอนว็/า ผ.(ชีมัคนอ-�น ๆ ก�มั�คว็ามัร. (ส�กแบบเด�ยว็ ก%บค1ณ์น%�นแหละ อยากชีมัเว็�บไซต์�ที่��สว็ยงามัสะด1ดต์า โหลดได(เร�ว็ส1ด ๆ มั�ล.กเล/นแพรว็พราว็ (เอาแต์/พองามั) มั�เน-=อหาสาระชีว็นต์+ดต์ามั และแน/นอนอยากเก�บไว็(ชีมัในว็%นหล%ง ( Add Bookmark ไว็() เราจำะที่�าได(ไหมัน�� ? การออกแบบเว็�บไซต์�อาจำไมั/ใชี/เร-�องยากส�าหร%บคนที่��มั�ห%ว็ค+ดในที่างสร(างสรรค�ศึ+ลปะ แต์/การที่�าให(ด�น�� ต์(องอาศึ%ยเที่คน+คและการเร�ยนร. ( บ%ญญ%ต์+ 10

ประการ ในการออกแบบเว็�บเพจำ ต์/อไปน�= จำะให(ค�าแนะน�าที่��มั�ประโยชีน�ในการออกแบบเว็�บไซต์�ขีองค1ณ์ เพ-�ออว็ดสายต์าแก/ผ.(เล/น อ+นเที่อร�เน�ต์จำากที่%�ว็ที่1กมั1มัโลก

ต์(องขีอขีอบค1ณ์ผ.(เขี�ยนบที่คว็ามัน�= (ค1ณ์ที่รงศึ%กด+I ล+=มับรรจำงมัณ์� : Internet

Magazine : April 1998) อย/างย+�งคร%บ ที่��ที่�าให(ผมัได(คว็ามัร. ( ที่ดลองที่�าต์ามั พบขี(อจำ�าก%ดต์/างๆ และน�าเอามัาเผยแพร/ขียายขี(อคว็ามัต์/อ ณ์ ที่��น�= 1. ใชี(แบ�กกราว็ด�สะอาด เร�ยบง/าย ฟ5งด.เป4นเร-�องง/าย แต์/ลองที่บที่ว็นคว็ามัจำ�าขีองค1ณ์ด.ว็/า ค1ณ์พบเห�นเว็�บไซต์�มัากมัาย เที่/าไหร/ ที่��ใชี(แบ�กกราว็ด�ที่��ที่�าให(ค1ณ์ต์(องเพ/ง ปร%บคว็ามัสว็/างขีองจำอภาพ ฯลฯ เพ-�อให(เห�นต์%ว็อ%กษร ที่��ซ1กซ/อนอย./ขี(างใน ป5ญหาขีองแบ�กกราว็ด� ค-ออะไร ขีนาดที่��ไมั/เหมัาะสมั มั�ว็+ธ�การมัากมัายในการสร(างแบ�กกราว็ด�แบบไร(รอยต์/อ การใชี(ภาพ มัาเป4นแบ�กกราว็ด�มั%กจำะมั�ป5ญหาเร-�องรอยต์/อขีองภาพที่��ไมั/เหมัาะสมั การใชี(ภาพขีนาดเล�ก เก+นไปมัาเร�ยงก%นค1ณ์ก�จำะได(ฉากหล%งที่��ว็1 /นว็าย ลายต์า อ/านขี(อคว็ามัได(ยาก และย%งใชี(เว็ลา ในการแสดงผลนานขี�=น (เพราะเส�ยเว็ลาในการสร(างภาพเร�ยงต์/อก%น) อ�กป5ญหาหน��งก�ค-อ การแสดงผลขีองผ.(สร(างเว็�บเพจำก%บผ.(ชีมัต์%=งไว็(ไมั/เหมั-อนก%น เชี/น ค1ณ์สร(างงานเพ-�อแสดงผล บนขีนาดจำอ 640 x 480 pixels

ภาพแบ�กกราว็ด�ขีองค1ณ์ด.พอด�ในเคร-�อง แต์/ผ.(ชีมัที่��เซ�ที่ คว็ามัละเอ�ยดที่�� 800 x

600 จำะเห�นภาพขีนาดเล�ก ๆ หลายภาพเร�ยงต์/อก%น แต์/ถู(าค1ณ์สร(าง งานที่��คว็ามัละเอ�ยด 1024 x 768 ผ.(ชีมัที่��ด.ด(ว็ยคว็ามัละเอ�ยดต์��ากว็/าน�= ก�จำะเห�นภาพขีองค1ณ์ เพ�ยงบางส/ว็น หล�กเล��ยงการใชี(ลว็ดลาย ฟ5งด.ง/ายแต์/ค1ณ์คงเห�นจำากเว็�บไซต์�ต์/าง ๆ แล(ว็ว็/าลว็ดลาย เหล/าน%=นที่�าให(ค1ณ์ต์(องเพ/งสายต์าอย/างมัาก เพ-�อจำะอ/านมั%นให(เขี(าใจำ เล-อกส�ที่��เหมัาะสมั ลองค+ดถู�งต์%ว็อ%กษรส�น�=าเง+นบนพ-=นส�น�=าเง+น ฟ5งด.แปลก ๆ แต์/ก�มั�ผ.(ที่�า แบบน�=ก%นมัาก อาจำด(ว็ยคว็ามัพล%=งเผลอก�ได( โดยเฉพาะส�ที่��เปล��ยนไปหล%งการคล+ก Link พยายามัใชี(ส�ที่��ด.ด� สบายต์า พ-=นหล%งและต์%ว็อ%กษรมั�ส�ต์%ดก%นไมั/ร1นแรงน%ก หล�กเล��ยงพ-=นแดง อ%กษรเขี�ยว็ พ-=นส(มัอ%กษรน�=าเง+น การใชี(ส�พ-=นธรรมัดาจำะที่�าให(ผ.(ชีมัด.เว็�บขีองค1ณ์ได(เร�ว็กว็/า ใชี(ภาพเป4นฉากหล%งมัากคร%บ 2. ค+ดก/อนใชี(เอฟเฟกต์�ต์/าง ๆ มั�เที่คน+คพ+เศึษมัากมัายส�าหร%บการสร(างภาพ แต์/อย/าพยายามัใชี(มั%นมัากน%ก เพราะว็/า บางที่�ผ.(ชีมัอาจำค+ดว็/าก�าล%งมัาด.เว็�บไซต์�สยองขีว็%ญได( การให(แสงและเงาแก/ภาพและต์%ว็อ%กษร คว็ร เป4นไปในที่+ศึที่างเด�ยว็ก%น ไมั/ขี%ดแย(งก%น การใชี(เอฟเฟที่ค�อ-�น ๆ ก�เชี/นเด�ยว็ก%น คว็รใชี(แต์/น(อย เพ-�อ เสร+มัให(เก+ดคว็ามัเด/น แต์/ไมั/แย/งคว็ามัส�าค%ญขีองเน-=อหาไป เพราะบางเอฟเฟคที่�มั�ผลต์/อคว็ามัเร�ว็ ในการโหลดเว็�บเพจำขีองค1ณ์เชี/นเด�ยว็ก%น 3. ใชี(ต์%ว็อ%กษรที่��คมัชี%ด ฟอนต์�หร-อต์%ว็อ%กษรที่��มั�ขีอบขีร1ขีระเป4นรอยหย%กขี%=นบ%นได เมั-�อใชี(ในโปรแกรมัสร(างภาพ เชี/น Photoshop สามัารถูแก(ไขีได(

โดยการเล-อกออปชี%น Anti-Aliasing การเล-อกฟอนต์�ที่��แสดงใน เว็�บเพจำ คว็รเล-อกต์%ว็ที่��มั�ร.ปแบบครบที่%=งต์%ว็ปกต์+ ต์%ว็หนา ต์%ว็เอ�ยง ต์%ว็ขี�ดเส(นใต์( จำ�งจำะสามัารถูสร(าง คว็ามักลมักล-นในหน(าเว็�บเพจำได(ด� 4. ออกแบบกราฟ>กให(มั�ขีนาดไฟล�เล�ก ๆ ภาพกราฟ>กที่��จำะน�ามัาใชี(ในเว็�บเพจำที่%=งที่��ได(จำากการสแกน และสร(างขี�=นเองคว็รจำะมั�ขีนาด เล�กที่��ส1ด และต์รงต์ามัจำ1ดประสงค�ที่��ส1ด ให(ค1ณ์จำดจำ�ากฎีสองขี(อน�=ไว็(ในใจำ ขี(อแรก ที่1ก ๆ คร%=งที่��ค1ณ์ออกแบบและสร(างกราฟ>กส�าหร%บใชี(น�าไปย%งเน-=อหาส/ว็นอ-�น ๆ อย/า ล-มัว็/าในบางกรณ์�ผ.(ชีมัหร-อต์%ว็ค1ณ์เองก�คล+กบนภาพโดยไมั/รอจำนภาพแสดงอย/างสมับ.รณ์� ด%งน%=นอย/าใชี(ภาพกราฟ>กที่��ซ%บซ(อนส�าหร%บอ+มัเมัจำแมั�พ จำ�าไว็(เสมัอว็/าที่1ก ๆ คร%=งที่��ค1ณ์สร(าง กราฟ>กส�าหร%บน�าไปย%งส/ว็นอ-�น ๆ หน(าที่��ขีองภาพค-อ " การน�าที่าง" ด%งน%=นภาพคว็รจำะที่�า คว็ามัเขี(าใจำได(ง/าย ขี(อสอง ส�าหร%บน%กออกแบบเว็�บเพจำบางคน ขีนาดขีองไฟล�อาจำไมั/ใชี/ส+�งส�าค%ญมัากน%กเพราะ เที่คโนโลย�มั�การพ%ฒนาขี�=นเสมัอ คว็ามัเร�ว็ในการส/งผ/านขี(อมั.ลที่�าได(เร�ว็ขี�=น แต์/น%�นก�ไมั/ได( หมัายคว็ามัว็/า การส/งผ/านไฟล�ขีนาดใหญ/เป4นเร-�องปกต์+ ค1ณ์คว็รปร%บปร1งขีนาดไฟล�ภาพ ขีองค1ณ์ให(สามัารถูส/งผ/านโมัเด�มัที่��ใชี(งานก%นโดยที่%�ว็ไปได(อย/างราบร-�น ( บางคนย%งใชี(โมัเด�มั 14.4 หร-อ 28.8 อย./) โดยไมั/ที่�าให(ค1ณ์ภาพขีองภาพเส�ยไป และขีนาดขีองไฟล�ที่��เล�กลงก�ที่�า ให(ค1ณ์บร+หารหร-อจำ%ดการก%บไฟล�ต์/าง ๆ ได(ง/าย สะดว็ก และเร�ว็ขี�=นอ�กด(ว็ย 5. คว็บค1มัขีนาดขีองเพจำให(ด� เว็�บเพจำขีองค1ณ์มั�ขีนาดกว็(าง x ยาว็เที่/าไร และค1ณ์เคยที่ดสอบการแสดงผลบนเว็�บ บราว็เซอร�ที่��ต์/างค/ายก%น ต์/างขีนาดจำอหร-อไมั/ ด%งน%=นค1ณ์คว็รจำะ เร�ยนร. (ขี(อจำ�าก%ดขีองผ.(ชีมั อย/าล-มัว็/าผ.(เขี(าชีมัเว็�บไซต์�ขีองค1ณ์น%=นอย./ก%นที่1กมั1มัโลก แต์/ละคน มั�อ+สระในการก�าหนดคว็ามัละเอ�ยดในการแสดงผล เล-อกใชี(เว็�บบราว็เซอร�ที่��เขีาชีอบ และ ประที่%บใจำ ว็างร.ปแบบโครงร/างที่��เหมัาะสมั การว็างโครงร/างขีองเน-=อหาด(ว็ยขีนาดที่��ใหญ/เก+นไป ไมั/ เพ�ยงแต์/ผ.(ชีมัจำะเบ-�อหน/ายต์/อการเล-�อนแถูบเล-�อนไปมัา แต์/อาจำจำะพลาดขี(อมั.ลส�าค%ญที่��ค1ณ์ ต์(องการน�าเสนอไปอย/างน/าเส�ยดาย เพราะอย./ในต์�าแหน/งขีอบที่��ล(นจำอออกไป ออกแบบ "เฟรมัที่��ย-ดหย1/น" ซ��งสอดคล(องก%บการร%บชีมั เมั-�อค1ณ์ใชี(เฟรมัหร-อต์ารางใน เว็�บเพจำขีองค1ณ์ คว็รก�าหนดขีนาดด(ว็ยค/าเปอร�เซนต์�แที่นต์%ว็เลขีค/าคงที่�� เพ-�อให(ย-ดหย1/น เหมัาะสมัก%บการแสดงผลขีองแต์/ละคน 6. ว็างแผนและออกแบบก/อนลงมั-อสร(าง

เมั-�อค1ณ์ค+ดจำะออกแบบสร(างเว็�บเพจำ อย/าว็างแผนสร(างเฉพาะหน(าแรก แต์/ให(ว็างแผน ต์ลอดที่%=งไซต์� เพ-�อให(มั�คว็ามัผสมักลมักล-นก%น นอกจำากน�=การเพ+�มัแผนที่��ขีองไซต์� ( Site Map) ในกรณ์�ที่��เว็�บเพจำขีองค1ณ์มั�คว็ามัซ%บซ(อน ที่%=งจำ�านว็นไฟล� HTML, ภาพ , โปรแกรมั หร-อส+�งอ-�น ๆ เพ-�อ ให(ผ.(ชีมัสามัารถูที่�าคว็ามัเขี(าใจำก%บโครงสร(างเว็�บเพจำขีองค1ณ์ และในที่างกล%บก%นค1ณ์ก�จำะบร+หาร และจำ%ดการก%บไซต์�ขีองค1ณ์ได(ง/ายขี�=นด(ว็ย 7. ชี�=น�าผ.(ชีมัด(ว็ยว็+ธ�การง/าย ๆ ส+�งหน��งที่��มั�คว็ามัส�าค%ญและค1ณ์ไมั/คว็รล-มั น%�นค-ออย/าล-มัจำ1ดประสงค�ในการสร(างเว็�บไซต์� ขีองค1ณ์ และด�าเน+นการต์ามัจำ1ดประสงค�น%=น เชี/น การเล-อกและว็างร.ปแบบเน-=อหา ออกแบบกราฟ>ก ส�าหร%บน�าที่างด(ว็ยว็+ธ�การง/าย ๆ และสอดคล(องก%บจำ1ดประสงค� ส+�งเหล/าน�=จำะสร(างคว็ามัประที่%บใจำ ให(ก%บผ.(ชีมัได(โดยง/าย อย/าที่�าให(เป4นไซต์�แบบรว็มัมั+ต์รเลยคร%บ มั�สารพ%ดส+�งต์%=งแต์/สากกะเบ-อ ย%นเร-อรบ เพราะคนที่��หลงเขี(าไปจำะไมั/มั�ว็%นหว็นกล%บมัาอ�ก 8. อย/าพยายามัที่�าต์%ว็ล�=าหน(าเก+นไป ผมัไมั/ได(ต์% =งห%ว็ขี(อผ+ดนะคร%บ เที่คโนโลย�อาจำเป4นเพ-�อนที่��ด�ขีองค1ณ์ แต์/ในขีณ์ะเด�ยว็ก%น มั%นก�หว็นมัาที่+�มัแที่งค1ณ์ได( การออกแบบเว็�บไซต์�จำ�งจำ�าเป4นต์(องค�าน�งถู�งขี(อจำ�าก%ดขีองผ.(ชีมัด(ว็ย อย/าสร(างเว็�บไซต์�ด(ว็ยเที่คโนโลย�ล�=าย1ค ซ��งผ.(คนส/ว็นใหญ/ไมั/อาจำส%มัผ%สได( การใชี( เที่คโนโลย�ใหมั/ ๆ เป4นเร-�องที่��ด� แต์/น%�นไมั/ใชี/ที่1กส+�งที่1กอย/างที่��ค1ณ์ต์(องที่�า ค1ณ์ต์(องน�กถู�งคน ส/ว็นใหญ/ที่��ย%งมั�เคร-�องร1 /นเก/า เว็�บบราว็เซอร�ที่��ไมั/สามัารถูแสดงเที่คโนโลย�ล�=าย1คได( เพราะ จำ1ดหมัายขีองค1ณ์ค-อผ.(ชีมัจำ�านว็นมัากไมั/ใชี/หร-อ ที่างที่��ด�คว็รเด+นสายกลาง ฝLกปฏิ+บ%ต์+และ เร�ยนร. (ส+�งใหมั/ ๆ เพ-�อจำะได(พร(อมัที่��จำะเสนอเมั-�อที่1กอย/างลงต์%ว็ ( เที่คโนโลย�อ+นเต์อร�เน�ต์ พ%ฒนาเร�ว็มัาก การว็+�งต์ามัส+�งที่��เก+ดขี�=นและย%งไมั/เป4นที่��ยอมัร%บ อาจำที่�าให(ค1ณ์เส�ยเว็ลาโดย เปล/าประโยชีน�) จำากมั%นสมัองและสองมั-อขีองค1ณ์ การกMอบป�= ภาพหร-อเอกสารร.ปแบบ HTML

ขีองคนอ-�น ๆ มัาใชี(ที่%=งด1(นน%=น แมั(คนอ-�นอาจำจำะไมั/ร. ( และเจำ(าขีองเด+มัก�อาจำจำะไมั/ถู-อสา แต์/แที่(ที่��จำร+งแล(ว็ ว็+ธ�การน�=ไมั/ถู.กต์(อง เพราะค1ณ์จำะขีาดคว็ามัเขี(าใจำและไมั/สามัารถูพ%ฒนาต์/อไปได( อย/างไร ก�ต์ามัในอ+นเที่อร�เน�ต์ก�มั�แหล/งขีองฟร�มัากมัาย ไมั/ว็/าจำะเป4นไฟล�ต์%ว็อย/าง HTML ภาพกราฟ>ก แอพเพล�ต์ ฯลฯ ว็+ธ�น�=ง/าย สบายใจำและไมั/ผ+ดอ�กด(ว็ยคร%บ และที่��ส�าค%ญส+�งที่��ค1ณ์เล-อกมัาน%=น มั%กจำะมั�ค�าอธ+บายประกอบและใชี(งานได(อย/างสมับ.รณ์�ด(ว็ย อ�กที่%=งเว็�บไซต์�บางแห/งย%งให(ค�า ปร�กษาแก/ค1ณ์อ�กด(ว็ย ด�าเน+นต์ามัมัาต์รฐานสากล พยายามัใชี(เที่คโนโลย�ที่��เป4นมัาต์รฐานสากลที่��ผ.(คนที่%�ว็ไปใชี( และปฏิ+บ%ต์+ โดยเฉพาะจำ1ดก��งกลางระหว็/างเว็�บบราว็เซอร�ค/ายต์/าง ๆ ที่��ย%งไมั/เป4น

มัาต์รฐาน เด�ยว็ก%น ( อย/าค+ดที่�าหลาย ๆ เว็อร�ชี% �นให(ผ.(ชีมัเล-อกชีมั เพราะค1ณ์จำะประสาที่ก+นต์อนที่��ต์(อง ปร%บปร1งขี(อมั.ล)

9. ง/าย ๆ แต์/จำร+งใจำ เว็�บไซต์�บางคนเร�ยกโฮมัเพจำ ด%งน%=นมั%นจำ�งเหมั-อนก%บเป4นบ(านขีองค1ณ์ การที่��ผ.(ชีมัเขี(ามัา ในเว็�บไซต์�หน(าแรกแล(ว็ประที่%บใจำ ค1ณ์ก�มั�ชี%ยไปกว็/าคร��งแล(ว็ สร(างคว็ามัเชี-�อถู-อ เชี-�อมั%�นให(เก+ดขี�=น ในใจำขีองผ.(ชีมั เหมั-อนก%บค1ณ์ปฏิ+บ%ต์+ต์/อแขีกที่��มัาเย��ยมับ(าน น%�นค-อน�าเสนอขี(อมั.ลที่��ย-ดหย1/น ต์รงไป ต์รงมัา เป4นก%นเอง จำ�าไว็(ว็/า ขีองด� ๆ ไมั/จำ�าเป4นต์(องยากเสมัอไป อย/ากล%ว็ที่��จำะเพ+�มัส+�งใหมั/ ๆ ลง ในไซต์�ขีองค1ณ์เป4นชี/ว็ง ๆ เพ-�อเพ+�มัคว็ามัน/าสนใจำก%บผ.(ชีมั 10. อย/าล-มัปร%บปร1งคว็ามัสดใส การน�าเสนอส+�งที่��น/าสนใจำ จำะเป4นการชี%กชีว็นให(ผ.(ชีมัแว็ะเว็�ยนกล%บมัาคร%=งแล(ว็คร%=งเล/า การแสดงว็%นที่��หร-อจำ�านว็นคร%=งที่��ปร%บปร1งก�มั�ส/ว็นชี/ว็ยให(ผ.(ชีมักล%บมัาเย��ยมัค1ณ์อ�ก ลองด.เที่คน+คใน การปร%บปร1งเปล��ยนแปลงง/าย ๆ ต์/อไปน�=ด.ซ+คร%บ อาจำมั�ประโยชีน�ก%บค1ณ์

จำ%ดสล%บล�าด%บเน-=อหาที่��มั�อย./ เสร+มัเน-=อหาใหมั/ ๆ สล%บก%บเน-=อหาเด+มัที่��มั�อย./ การเพ+�มัเน-=อหา และห%ว็ขี(อใหมั/ ๆ จำะชี/ว็ยเพ+�มัคว็ามัสดใสและน/าสนใจำย+�งขี�=น อย/าละเลยผลต์อบร%บขีองผ.(ชีมั ส+�งที่��ผ.(ชีมัต์+ต์+งขี(อผ+ดพลาดคว็รจำะร�บแก(ไขีในที่%นที่� เพราะ น%�นค-อมั�คนคอยสนใจำและต์รว็จำสอบให(แล(ว็ แน/นอนเขีาย/อมักล%บมัาเย��ยมัชีมัค1ณ์อ�กแน/นอน อย/าล-มัอ�เมัล�ต์อบกล%บที่%นที่�ถู(าที่�าได( ใส/ต์%ว็เลขีน%บจำ�านว็นผ.(ชีมัเขี(าไปด(ว็ย เพ-�อบอกให(ผ.(ชีมัที่ราบว็/า เว็�บไซต์�ขีองค1ณ์ยอดน+ยมั แค/ไหน และค1ณ์ย%งสามัารถูประเมั+นเน-=อหาได(ว็/าเร-�องใดที่��ผ.(ชีมัสนใจำมัากที่��ส1ด โดยส%งเกต์ จำ�านว็นที่��เพ+�มัขี�=นเมั-�อค1ณ์เปล��ยนแปลงเน-=อหาใหมั/ ว็%นเว็ลาเปล��ยนไปเร�ว็มัากคร%บ บที่คว็ามัน�=ก�ผ/านมัาหลายป�แล(ว็ แต์/ก�ย%งได(ร%บคว็ามัสนใจำจำากแฟนๆ อย./ หลายคนได(ขี(อค+ดจำากต์รงน�= หลายคนขีอส�าเนาไปเผยแพร/ต์/อ ก�ต์(องขีอขีอบค1ณ์ส�าหร%บที่1กที่/านที่��น�าไปใชี(ประโยชีน�ชี/ว็ยก%นเผยแพร/เที่คน+คด�ๆ เด�ดๆ ต์/อๆ ไป ชี/ว็ยก%นเถูอะคร%บ คว็ามัร. (ด�ๆ หลากหลายที่��เป4นภาษาไที่ยจำะได(มั�มัากขี�=นเพ-�อให(คนไที่ยหลายๆ คนที่��เป4นไมั(เบ-�อไมั(เมัาก%บภาษาอ%งกฤษจำะได(สนใจำผล+ต์งานด�ๆ ขี�=นมัาอ�ก

ที่��มัา http://area.obec.go.th/phitsanulok1/

แบบที่ดัสอบก�อนเร�ยนหน�วิยที่�� 3

ขั้�อควิรร�แลุ่ะจุรรยาบรรณขั้องเวิ.บมาสเตอร#

ให�น�กเร�ยนใส�เคร'�องหมาย แลุ่ะ หน�าขั้�อควิาม

ในการสร(างเว็�บคว็รมั�การว็างแผนอย/างด�ก/อน การสร(างเว็�บเพจำที่��ด�คว็รมั�ส�ส%นฉ.ดฉาดเต์ะต์าผ.(ชีมั เว็�บไซต์�ที่��ด�คว็รมั�ต์%ว็หน%งส-อขีนาดใหญ/เพ-�อให(มัองเห�นชี%ดเจำน ง/าย ๆ แต์/จำร+งใจำ เป4นห%ว็ใจำอย/างหน��งขีองการที่�าเว็�บไซต์� เว็�บไซต์�ที่��ด�คว็รมั�การปร%บปร1งขี(อมั.ลให(ใหมั/อย./เสมัอ ในการเชี-�อมัต์/ออ+นเต์อร�เน�ต์คว็รใชี(ชี-�อเป4นขีองต์นเอง ขี(อคว็ามัที่��ใชี(ในการส-�อสารบนอ+นเต์อร�เน�ต์คว็รละเอ�ยดมัาก บางคร%=งคว็รใชี(ขี(อคว็ามัพาดพ+งชี-�อคนอ-�นบ(างเพ-�อเป4นการ

อ(างอ+ง คว็รใชี(ภาษาในการต์+ดต์/อส-�อสารอย/างส1ภาพ แมั(คนอ-�นไมั/ว็/างสนที่นาบนอ+นเต์อร�เน�ต์เราก�คว็รต์+ดต์/อซ�=า ๆ

……………………………………………………………………………………………………….......

เฉลุ่ย1 2 3 4 5 6 7 8 9 10

หน�วิยการเร�ยนร�ที่�� 3

แผนการจุ�ดัการเร�ยนร�ที่�� 2จำรรยาบรรณ์ขีองผ.(ที่�าเว็�บ

รายวิ ชา การเขี�ยนเว็�บไซต์� ประจำ�าภาคเร�ยนที่�� 1 ป�การศึ�กษา 2551กลุ่��มสาระการเร�ยนร� การงานอาชี�พและเที่คโนโลย�

ระดั�บช��น มั%ธยมัศึ�กษาป�ที่�� 4………………………………………………………………………………………………………….จุ�ดัประสงค#น$าที่าง

- บอกค1ณ์ค/าและคว็ามัส�าค%ญขีองจำร+ยธรรมัในการใชี(เที่คโนโลย�สารสนเที่ศึในการสร(างงานเน'�อหาสาระ

- มัารยาที่ในการใชี(อ+นเต์อร�เน�ต์- ขี(อห(ามัในการใชี(อ+นเต์อร�เน�ต์- หล%กค1ณ์ธรรมัจำร+ยธรรมัในการสร(างเว็�บไซต์�

การจุ�ดักระบวินการเร�ยนร�ขั้��นเตร�ยมหร'อขั้��นน$าเขั้�าส�บที่เร�ยน

1. คร.แจำ(งจำ1ดประสงค�การเร�ยนร. ( และว็+ธ�การเร�ยนร. ( 2. น%กเร�ยนร/ว็มัแสดงคว็ามัค+ดเห�นในเร-�องขีองมัารยาที่และ

จำรรยาบรรณ์ในการใชี(อ+นเต์อร�เน�ต์ในป5จำจำ1บ%น และร/ว็มัก%นบอกค1ณ์ค/าขีองจำร+ยธรรมัในการเป4นผ.(ใชี(เที่คโนโลย�สารสนเที่ศึที่��ด�ขั้��นสอน

3. คร.อธ+บายเก��ยว็ก%บ จำรรยาบรรณ์ และค1ณ์ค/าคว็ามัส�าค%ญขีองมัารยาที่ในการใชี(เที่คโนโลย�สารสนเที่ศึสร(างงาน และมัารยาที่ในการใชี(ระบบเคร-อขี/ายอ+นเต์อร�เน�ต์ รว็มัถู�งขี(อห(ามัและขี(อพ�งกระที่�าต์/าง ๆ ในการใชี(อ+นเต์อร�เน�ต์ โดยน�าเสนอพร(อมัก%บโปรแกรมั PowerPoint น%กเร�ยนจำดบ%นที่�ก

4. น%กเร�ยนสร1ปคว็ามัร. (จำากการฟ5งการบรรยาย แล(ว็ต์อบค�าถูามัหน(าชี%=น

5. น%กเร�ยนร%บใบงานที่�� 4 ลงมั-อปฏิ+บ%ต์+ และประเมั+นผลการที่�างานล%กษณ์ะกล1/มัขั้��นสร�ป

6. คร.เป>ดโอกาสให(น%กเร�ยนซ%กถูามัขี(อสงส%ยเก��ยว็ก%บเร-�องที่��ย%งไมั/เขี(าใจำ และร/ว็มัก%นสร1ปเน-=อหาบที่เร�ยน

ส'�อแลุ่ะแหลุ่�งการเร�ยนร� (ม�จุ$านวินเที่�าก�บจุ$านวินน�กเร�ยน)

- ชี+=นงานน�าเสนอบที่เร�ยน (PowerPoint)

- ใบงานที่�� 4- แบบประเมั+นการที่�างานเป4นกล1/มั- เว็�บไซต์�ประกอบการเร�ยนร. ( http://www.puibuble.th.gs

- เว็�บไซต์�ที่��ให(คว็ามัร. (เก��ยว็ก%บจำรรยาบรรณ์ขีองผ.(ที่�าเว็�บ

กระบวินการวิ�ดัแลุ่ะประเม นผลุ่ (ม�จุ$านวินเที่�าก�บจุ$านวินน�กเร�ยน)

วิ ธี�วิ�ดัผลุ่- ต์รว็จำผลงานจำากคว็ามัต์%=งใจำขีณ์ะอย./ภายในส%งคมัห(องเร�ยน- การให(คว็ามัร/ว็มัมั-อในการแสดงคว็ามัค+ดเห�น - การที่�าใบงานที่�� 4 และแบบประเมั+นผลการที่�างานแบบกล1/มั

เคร'�องม'อวิ�ดั- แบบประเมั+นการที่�างานแบบกล1/มั- แบบที่ดสอบหล%งเร�ยน

เกณฑ์#การประเม น- คะแนนแบบที่ดสอบหล%งเร�ยน คะแนนการประเมั+นการที่�างานแบบกล1/มั 0 – 50

คะแนน ไมั/ผ/าน51 – 100 คะแนน ผ/าน

ก จุกรรมเสนอแนะ …………………………………………………………………………………………………………

……………………………………………………………………………………………………………………………………………………………………………………………………………………

ใบงานที่�� 4เร-�อง สร(างสรรค�จำรรยาบรรณ์ขีองเว็�บมัาสเต์อร�

กล1/มัที่��............จำ�านว็นสมัาชี+กในกล1/มั...............คน ชี%=น...................ว็%น/เด-อน/ป�............................

1. ชี-�อ ......................................................................... เลขีที่�� .......................

2. ชี-�อ ......................................................................... เลขีที่�� .......................

3. ชี-�อ ......................................................................... เลขีที่�� .......................

4. ชี-�อ ......................................................................... เลขีที่�� .......................

5. ชี-�อ ......................................................................... เลขีที่�� .......................

จุ�ดัประสงค#

1. เพ-�อให(ผ.(เร�ยนเขี(าใจำจำรรยาบรรณ์ และค1ณ์ค/าคว็ามัส�าค%ญขีองมัารยาที่ในการใชี(เที่คโนโลย�สารสนเที่ศึสร(างงาน และมัารยาที่ในการใชี(ระบบเคร-อขี/ายอ+นเต์อร�เน�ต์ รว็มัถู�งขี(อห(ามัและขี(อพ�งกระที่�าต์/าง ๆ ในการใชี(อ+นเต์อร�เน�ต์

2. เก+ดที่%กษะการค+ดอย/างมั�หล%กการ3. เก+ดที่%กษะการที่�างานเป4นกล1/มั

ค$าช��แจุง1. แบ/งน%กเร�ยนเป4นกล1/มั กล1/มัละ 5 คน แล(ว็ให(แต์/ละกล1/มัที่�าการ

ระดมัคว็ามัค+ดเก��ยว็ก%บจำรรยาบรรณ์ และค1ณ์ค/าคว็ามัส�าค%ญขีองมัารยาที่ในการใชี(เที่คโนโลย�สารสนเที่ศึสร(างงาน และมัารยาที่ในการใชี(ระบบเคร-อขี/ายอ+นเต์อร�เน�ต์ รว็มัถู�งขี(อห(ามัและขี(อพ�งกระที่�าต์/าง ๆ ในการใชี(อ+นเต์อร�เน�ต์

2. แลกเปล��ยนคว็ามัค+ดเห�น และค(นหาขี(อมั.ลในร.ปแบบต์/าง ๆ ผ/านอ+นเต์อร�เน�ต์

3. ให(น%กเร�ยนร/ว็มัก%นค+ดสร1ปผลแล(ว็น�าผลที่��ได(ต์อบค�าถูามัในใบงาน4. ส/งผลงาน

ค$าถามใบงานที่�� 4 1. ให(น%กเร�ยนบอกป5ญหาพร(อมัเหต์1ผลที่��เก+ดจำากการใชี(งานอ+นเต์อร�เน�ต์และส-�อเว็�บไซต์�ในป5จำจำ1บ%น................................................................................................................................................................................................................................................................................................................................................................................................................................................

............................................................................................................

............................................................................................................

............................................................................................................

............................................................................................................

............................................................................................................

.....

............................................................................................................

............................................................................................................

............................................................................................................

............................................................................................................

........................................................2 ให(น%กเร�ยนชี/ว็ยก%นสร1ปบอกแนว็ที่างการแก(ไขีป5ญหาด%งกล/าว็ให(ได(มัากที่��ส1ด.........................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................3. ให(น%กเร�ยนระดมัคว็ามัค+ดสร1ปแนว็ที่างด%งกล/าว็ออกมัาเป4นหล%กปฏิ+บ%ต์+หร-อจำรรยาบรรณ์ให(ร%ดก1มัที่��ส1ด................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................

............................................................................................................

.....

............................................................................................................

............................................................................................................

............................................................................................................

............................................................................................................

........................................................

แบบประเม นการที่$างาน

รายการประเม นระดั�บค�ณภาพ

ต์(องปร%บปร1ง

(1 คะแนน)

พอใชี((2

คะแนน)

ด�(3

คะแนน)

ด�มัาก(4

คะแนน)

การประเม นการที่$างาน1. ที่�างานส�าเร�จำต์ามัเป?าหมัาย2. ที่�างานต์ามัว็+ธ�การและขี%=นต์อน3. เน-=อหาสาระที่��ได(จำากการชี/ว็ยก%น4. ต์รงต์ามัว็%ต์ถู1ประสงค�5. การสร1ปคว็ามัหมัายการประเม นน ส�ยการที่$างาน1. คว็ามัร%บผ+ดชีอบและเอาใจำใส/2. การที่�างานร/ว็มัก%บผ.(อ-�น3. ไหว็พร+บ

4. คว็ามัอดที่น5. สต์+ป5ญญา

รวิม

ผ.(ประเมั+น ..............................................................................

ว็%นที่�� ............เด-อน ...................................พ.ศึ. ...............

แบบที่ดัสอบหลุ่�งเร�ยนหน�วิยที่�� 3ขั้�อควิรร�แลุ่ะจุรรยาบรรณขั้องเวิ.บมาสเตอร#

ให�น�กเร�ยนใส�เคร'�องหมาย แลุ่ะ หน�าขั้�อควิาม

การว็างแผน และร. (จำ1ดประสงค� รว็มัถู�งกล1/มัผ.(เขี(าชีมัเป4นส+�งส�าค%ญในการที่�าเว็�บฯ

การสร(างเว็�บเพจำที่��ด�คว็รมั�ส�ส%นฉ.ดฉาดเต์ะต์าผ.(ชีมัอาจำที่�าให(ไมั/น/าด.

เว็�บไซต์�ที่��ด�คว็รไมั/คว็รมั�ขีนาดต์%ว็หน%งส-อใหญ/หร-อเล�กจำนเก+นไป

คว็ามัสดใสที่�าให(เว็�บไซต์�มั�ชี�ว็+ต์ชี�ว็า เว็�บไซต์�ที่��ด�คว็รมั�การปร%บปร1งขี(อมั.ลให(ใหมั/อย./เสมัอ ไมั/คว็รต์%=งรห%สยากเก+นไปในการสมั%ครใชี(เคร-อขี/ายอ+นเต์อร�เน�ต์

ในการเชี-�อมัต์/ออ+นเต์อร�เน�ต์คว็รใชี(ขี(อมั.ลส�ารองไมั/ใชี(ขีองจำร+ง บางคร%=งคว็รใชี(ขี(อคว็ามัพาดพ+งชี-�อคนอ-�นบ(างเพ-�อเป4นการ

อ(างอ+งแหล/งที่��มัา คว็รใชี(ภาษาในการต์+ดต์/อแบบส%=น ๆ ได(สาระ ไมั/คว็รสร(างคว็ามัร�าคาญให(ก%บผ.(ใชี(อ+นเต์อร�เน�ต์ด(ว็ยก%น

……………………………………………………………………………………………………….......

เฉลุ่ย1 2 3 4 5 6 7 8 9 10

หน�วิยการเร�ยนร�ที่�� 4สน1กก%บ HTML

รายวิ ชา การเขี�ยนเว็�บไซต์� ประจำ�าภาคเร�ยนที่�� 1 ป�การศึ�กษา 2551กลุ่��มสาระการเร�ยนร� การงานอาชี�พและเที่คโนโลย�

ระดั�บช��น มั%ธยมัศึ�กษาป�ที่�� 4………………………………………………………………………………………………………….มาตรฐานการเร�ยนร�

มัาต์รฐานที่�� 4.1 ขี(อ 6 เขี(าใจำหล%กการและว็+ธ�แก(ป5ญหาด(ว็ยกระบว็นการที่างเที่คโนโลย�

สารสนเที่ศึอย/างมั�ประส+ที่ธ+ภาพและประส+ที่ธ+ผล

ขี(อ 8 การใชี(ฮาร�ดแว็ร�และซอฟต์�แว็ร�ให(เหมัาะสมัก%บงาน

ผลุ่การเร�ยนร�ที่��คาดัหวิ�ง1. เขี(าใจำโครงสร(างภาษาคอมัพ+ว็เต์อร�ระด%บต์��าส�าหร%บการเขี�ยน

เว็�บ2. สามัารถูสร(างเว็�บเพจำด(ว็ยภาษาคอมัพ+ว็เต์อร�ระด%บต์��าได(

จุ�ดัประสงค#การเร�ยนร�จุ�ดัประสงค#น$าที่าง- บอกโครงสร(างภาษาคอมัพ+ว็เต์อร�ระด%บต์��าส�าหร%บการเขี�ยนเว็�บ- บอกว็+ธ�การเขี�ยนเว็�บเพจำด(ว็ยภาษา HTML

จุ�ดัประสงค#ปลุ่ายที่าง- เขี(าใจำโครงสร(างภาษาคอมัพ+ว็เต์อร�ระด%บต์��าส�าหร%บการเขี�ยนเว็�บ- สามัารถูเขี�ยนเว็�บเพจำด(ว็ยภาษา HTML

จำ�านว็น 1 แผน 4 ชี%�ว็โมัง

หน�วิยการเร�ยนร�ที่�� 4

แผนการจุ�ดัการเร�ยนร�ที่�� 1

สน1กก%บ HTML

รายวิ ชา การเขี�ยนเว็�บไซต์� ประจำ�าภาคเร�ยนที่�� 1 ป�การศึ�กษา 2551กลุ่��มสาระการเร�ยนร� การงานอาชี�พและเที่คโนโลย�

ระดั�บช��น มั%ธยมัศึ�กษาป�ที่�� 4………………………………………………………………………………………………………….จุ�ดัประสงค#น$าที่าง

- บอกโครงสร(างภาษาคอมัพ+ว็เต์อร�ระด%บต์��าส�าหร%บการเขี�ยนเว็�บ- บอกว็+ธ�การเขี�ยนเว็�บเพจำด(ว็ยภาษา HTML

เน'�อหาสาระ- คว็ามัหมัายขีองภาษา HTML

- โครงสร(างขีองภาษา HTML

- หล%กการเขี�ยนเว็�บเพจำด(ว็ยภาษา HTML

- ค�าส%�งส�าค%ญในการเขี�ยนเว็�บเพจำด(ว็ย HTML

การจุ�ดักระบวินการเร�ยนร�ขั้��นเตร�ยมหร'อขั้��นน$าเขั้�าส�บที่เร�ยน

1. คร.แจำ(งจำ1ดประสงค�การเร�ยนร. ( และว็+ธ�การเร�ยนร. ( แล(ว็ที่ดสอบก/อนเร�ยนและแนะน�าเว็�บไซต์�ประกอบการเร�ยนรายว็+ชีาน�=ค-อ http://www.puibuble.th.gs และอ�เมัลผ.(สอนค-อ puibuble@hotmail.com

2. น%กเร�ยนร/ว็มัก%นแสดงคว็ามัร. (ด(านภาษา HTML

ขั้��นสอน3. คร.อธ+บายเก��ยว็ก%บ ภาษา HTML รว็มัถู�งขี(อด� และ

คว็ามัส�าค%ญขีอง HTML อ�กที่%=งบอกถู�งค�าส%�งส�าค%ญ และหล%กการเขี�ยนภาษา HTML น%กเร�ยนจำดบ%นที่�กบที่เร�ยน ในชี%�ว็โมังที่�� 1

พร(อมัอธ+บายบที่เร�ยนในร.ปแบบ PowerPoint

4. คร.แจำกใบคว็ามัร. (ที่�� 5 เร-�อง โครงสร(างภาษา HTML

5. น%กเร�ยนที่�าคว็ามัเขี(าใจำในหล%กการเขี�ยนภาษา HTML

6. น%กเร�ยนที่�าใบงานที่�� 5 โดยมั�คร.เป4นผ.(ให(ค�าแนะน�าคว็บค./ไปด(ว็ย

7. คร.ต์รว็จำผลการสร1ปโดยต์รว็จำจำากสมั1ดน%กเร�ยนและผลงานจำากใบงานที่�� 5

8. ประเมั+นด(ว็ยแบบประเมั+นการที่�างานขั้��นสร�ป

9. คร.เป>ดโอกาสให(น%กเร�ยนซ%กถูามัขี(อสงส%ยเก��ยว็ก%บเร-�องที่��ย%งไมั/เขี(าใจำ และร/ว็มัก%นสร1ป เน-=อหาบที่เร�ยน

ส'�อแลุ่ะแหลุ่�งการเร�ยนร� (ม�จุ$านวินเที่�าก�บจุ$านวินน�กเร�ยน)

- ใบคว็ามัร. (ที่�� 5 เร-�องโครงสร(างภาษา HTML

- ใบงานที่�� 5 การสร(างเว็�บเพจำด(ว็ย HTML

- ต์%ว็อย/างเว็�บไซต์�ที่��มั�ขี(อมั.ลเก��ยว็ก%บการเขี�ยนเว็�บด(ว็ย HTML

- เว็�บไซต์�ประกอบการเร�ยนร. ( http://www.puibuble.th.gs

- ชี+=นงานน�าเสนอบที่เร�ยน (PowerPoint)

กระบวินการวิ�ดัแลุ่ะประเม นผลุ่ (ม�จุ$านวินเที่�าก�บจุ$านวินน�กเร�ยน)

วิ ธี�วิ�ดัผลุ่- ต์รว็จำผลงานจำากคว็ามัต์%=งใจำขีณ์ะอย./ภายในส%งคมัห(องเร�ยน- การให(คว็ามัร/ว็มัมั-อในการแสดงคว็ามัค+ดเห�น - การที่�าใบงาน และการจำดบ%นที่�ก

เคร'�องม'อวิ�ดั- ใบงาน- ใบประเมั+นการที่�างาน

เกณฑ์#การประเม น - คะแนนจำากใบงานและแบบประเมั+นการที่�างาน

0 – 5 คะแนน ไมั/ผ/าน6 – 10 คะแนน ผ/าน

ก จุกรรมเสนอแนะ ……………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………

ใบควิามร�ที่�� 5 โครงสร�างการเขั้�ยน HTML

<html>      <head>          <title>            ขั้�อควิามน��จุะแสดังบนไตเต �ลุ่บาร#          </title>      </head>      <body>          ส/ว็นเน-=อหาขีองเว็�บเพจำ ประกอบด(ว็ย       ขี(อคว็ามั, ร.ปภาพ, ส-�อมั%ลต์+มั�เด�ย ฯลฯ        </body></html>

ค$าส��งต�าง ๆ ในการใช�เขั้�ยน1.การก$าหนดัขั้�อควิามบนไที่เที่ ลุ่บาร# <TITLE>ขี(อคว็ามัที่��ต์(องการให(ปรากฏิ</TITLE>

ค�าอธ+บาย ส/ว็นน�=จำะอย./ระหว็/างค�าส%�ง <head>และ</head>

2.การก$าหนดัส�ให�ก�บพ'�นหลุ่�งเวิ.บเพจุ<BODY BGCOLOR="ส�ที่��ต์(องการ">ส/ว็นเน-=อหา </BODY>

ค�าอธ+บาย ส/ว็นน�=เพ+�มัเต์+มัเขี(าไปขี(างหล%ง body ซ��งมั�อย./แล(ว็3.การก$าหนดัภาพให�เป:นพ'�นหลุ่�งเวิ.บเพจุ<BODY BACKGROUND ="URL">ส/ว็นเน-=อหา </BODY>

ค�าอธ+บาย ส/ว็นน�=เพ+�มัเต์+มัเขี(าไปขี(างหล%ง body ซ��งมั�อย./แล(ว็ 4.การใส�ต�วิหน�งส'อในหน�าเวิ.บเพจุ<BODY >สว็%สด�คร%บ เว็�บเราเอง</BODY>

ค�าอธ+บาย ใส/ขี(อคว็ามัปกต์+อย./ระหว็/างค�าส%�ง <body>และ </body>

5.การขั้;�นบรรที่�ดัใหม�<BODY > สว็%สด�คร%บ<br>เว็�บเราเอง</BODY>

ผลล%พธ�ที่��ได(ค-อ มั�สองบรรที่%ด เพราะหากเราไมั/ใชี(ค�าส%�ง br

ขี(อคว็ามัจำะยาว็เป4นบรรที่%ดเด�ยว็6.การย�อหน�าใหม�<BODY > สว็%สด�คร%บ<p>เว็�บเราเอง</BODY>

ผลล%พธ�ที่��ได(ค-อ มั�สองบรรที่%ด เพราะหากเราไมั/ใชี(ค�าส%�ง br

ขี(อคว็ามัจำะยาว็เป4นบรรที่%ดเด�ยว็7.การจุ�ดัต$าแหน�งขั้�อควิาม

<BODY ><p align = "left">สว็%สด�คร%บชี+ดซ(ายนะ</p">

<p align = "center">สว็%สด�คร%บกลางจำ(า</p">

<p align = "right">สว็%สด�คร%บชี+ดขีว็านะ</p"></BODY> ค�าอธ+บาย ค�าส%�งน�=จำะส%�งให(ขี(อคว็ามัอย./ต์�าแหน/งซ(าย กลาง ขีว็า

ต์ามัที่��ก�าหนดใชี(ว็างระหว็/างขี(อคว็ามัที่��ต์(องการให(ชี+ดต์ามัที่��ต์(องการซ��ง ปกต์+อย./ระหว็/างค�าส%�ง <body>และ </body>

8.การจุ�ดัรปแบบอ�กษร<BODY ><b>ขี(อคว็ามัแบบหนา</b>

<i>ขี(อคว็ามัแบบเอ�ยง</i>

<u>ขี(อคว็ามัแบบขี�ดเส(นใต์(</u> </BODY>ค�าอธ+บาย ค�าส%�งน�=จำะส%�งให(ขี(อคว็ามัมั�ล%กษณ์ะหนา เอ�ยงหร-อขี�ด

เส(นใต์( ต์ามัที่��ก�าหนดใชี(ว็างระหว็/างขี(อคว็ามัที่��ต์(องการให(เป4นต์ามัที่��ต์(องการซ��ง ปกต์+อย./ระหว็/างค�าส%�ง <body>และ </body>

9.การก$าหนดัต�วิอ�กษร<BODY ><font color=“ส�”>การก�าหนดส�ต์%ว็อ%กษร</font>

<font size=“ขีนาด(1-7)”>ก�าหนดขีนาดต์%ว็อ%กษร</font>

<font face=“ชี-�อต์%ว็อ%กษร”>การก�าหนดต์%ว็อ%กษร</font> </BODY>ค�าอธ+บาย ค�าส%�งน�=จำะส%�งให(ขี(อคว็ามัมั�ล%กษณ์ะส� ขีนาด และร.ปแบบ

ต์ามัที่��ก�าหนดใชี(ว็างระหว็/างขี(อคว็ามัที่��ต์(องการให(เป4นต์ามัที่��ต์(องการซ��ง ปกต์+อย./ระหว็/างค�าส%�ง <body>และ </body>

หร-ออาจำใชี(แบบรว็มัที่�เด�ยว็ด%งน�=<font color=“red” size=“5”

face=“angsanaNew”>ใส/ขี(อคว็ามั</font>

9.การที่$าต�วิอ�กษรวิ �ง<BODY ><marquee>ขี(อคว็ามั</marquee> </BODY>ค�าอธ+บาย ค�าส%�งน�=จำะส%�งให(ขี(อคว็ามัว็+�งผ/านไปใชี(ว็างระหว็/าง

ขี(อคว็ามัที่��ต์(องการให(ว็+�ง ปกต์+อย./ระหว็/างค�าส%�ง <body>และ </body>

10.การขั้�ดัเส�นค��นใชี(ค�าส%�ง <hr> ใส/บร+เว็ณ์ที่��อยากให(มั�เส(น ว็างในส/ว็นขีอง ระหว็/าง

ค�าส%�ง <body>และ </body>

11.การแที่รกรปภาพ<img src="ชี-�อ.นามัสก1ลขีองภาพ" width="คว็ามักว็(าง"

height="คว็ามัยาว็" alt="ขี(อคว็ามั">

ค-อการใส/สามัารถูใส/แบบก�าหนดขีนาดได(และเมั-�อเอาเมัาส�ไปจำ�=จำะปรากฎีขี(อคว็ามัอธ+บายต์ามัที่��เราก�าหนด และสามัารถูก�าหนด ให(อย./ต์�าแหน/งซ(ายขีว็าหร-อกลางได(โดยใชี(ค�าส%�งเด�ยว็ก%บค�าส%�งจำ%ดซ(ายขีว็ากลางขีองต์%ว็อ%กษรเชี/น <p align = "left">แล(ว็ก�ใส/ขี(อมั.ลร.ปภาพเราลงไป.. <img

src="ชี-�อ.นามัสก1ลขีองภาพ" width="คว็ามักว็(าง" height="คว็ามัยาว็" alt="ขี(อคว็ามั"> </p> เป4นต์(น12.การเชี-�อมัโยง<a href=“จำ1ดเชี-�อมัโยง”> ขี(อคว็ามัที่��ต์(องการให(กดแล(ว็เชี-�อมัโยง </a>เชี/นการเชี-�อมัโยงไปหน%งส-อพ+มัพ�เดล+น+ว็ส�<a href=“http://www.dailynews.com”> อ/านขี/าว็ก%บเดล+น+ว็ส�</a>

ซ��งถู-อว็/าเป4นการเชี-�อมัโยงนอกเว็�บแต์/หากต์(องการเชี-�อมัไปย%งหน(าที่��เราที่�าเอง<a href=“editor.html”> ประว็%ต์+ผ.(จำ%ดที่�า </a>

แต์/ที่%=งน�=ที่%=งน%=นต์(องมั�หน(าเว็�บที่��เราอ(างอ+งไว็(ด(ว็ยและเก�บไว็(ในโฟล�เดอร�เด�ยว็ก%น13.การสร�างตาราง<TABLE WIDTH=100% HEIGHT=0% CELLSPACING=0 CELLPADDING=0 BORDER=1> <TR> <TD>ใส/ขี(อคว็ามัที่��อยากใส/ในต์าราง</TD> </TR> </TABLE>

หากต์(องการแบ/งคอล%มัน�ก�เพ+�มั <TD>..</TD>เขี(าไปต์ามัจำ�านว็นหากต์(องการเพ+�มับรรที่%ดต์ารางก�เพ+�มั <TR>…..</TR>เขี(าไป******ส+�งส�าค%ญห(ามัล-มั*******

- ใชี(โปรแกรมั NotePad ในการเขี�ยน- การบ%นที่�กให(บ%นที่�ก ชี-�ออะไรก�ได( แต์/ต์(องมั�นามัสก1ล เป4น .html

- การเก�บงานคว็รสร(างโฟล�เดอร�เป4นขีองต์%ว็เองเส�ยก/อน แล(ว็ค/อยที่�างานในโฟล�เดอร�น%=น ๆ

อ/านขี(อมั.ลเพ+�มัเต์+มัได(ที่�� http://www.puibuble.th.gs

ฝLกเขี�ยน html ได(ที่�� http://hospital.moph.go.th/bureerum/html/html1.html

ใบงานที่�� 5เร-�อง สน1กก%บ HTML

ชี-�อ.............................................................................

....................ชี%=น.................เลขีที่��....................ห%ว็ขี(อเว็�บเพจำ ..................................................................................................................................

จุ�ดัประสงค#2. เพ-�อให(ผ.(เร�ยนเขี(าใจำหล%กการเขี�ยนเว็�บเพจำด(ว็ย HTML และหล%ก

การสร(างเว็�บที่��ถู.กต์(อง3. เก+ดที่%กษะการค+ดอย/างมั�หล%กการ4. เก+ดที่%กษะการน�าคว็ามัร. (ไปประย1กต์�ใชี(งานจำร+ง

ค$าช��แจุง1. ให(น%กเร�ยนออกแบบโครงสร(างเว็�บขีองต์นเองต์ามัห%ว็ขี(อที่��สนใจำ

และถู.กต์(องต์ามัหล%กการออกแบบเว็�บเพจำ2. น�าโครงสร(างที่��ออกแบบมัาสร(างหน(าเว็�บด(ว็ยภาษา HTML

3. บ%นที่�กผลงานออกมัาในร.ปแบบไฟล� .html อย/างน(อย 1 ไฟล�4. ส/งผลงาน

แบบประเม นการที่$างาน

ห�วิขั้�อ ดั�( 3

คะแนน)

พอใช�( 2

คะแนน)

ควิรปร�บปร�ง

( 1 คะแนน)

การออกแบบโครงสร(างคว็ามัสว็ยงามัขีองผลงานคว็ามัถู.กต์(องขีองผลงานคว็ามัต์%=งใจำและร%บผ+ดชีอบจำรรยาบรรณ์ในการสร(างเว็�บเที่คน+คการสร(างบ%นที่�กงานถู.กต์(อง ( 2 ,1 , 0

คะแนน )

คะแนนรวิม /2

ลงชี-�อ ..............................................................ผ.(ประเมั+น

ว็%นที่�� ....................................

หน�วิยการเร�ยนร�ที่�� 5สน1กก%บ HTML

รายวิ ชา การเขี�ยนเว็�บไซต์� ประจำ�าภาคเร�ยนที่�� 1 ป�การศึ�กษา 2551กลุ่��มสาระการเร�ยนร� การงานอาชี�พและเที่คโนโลย�

ระดั�บช��น มั%ธยมัศึ�กษาป�ที่�� 4………………………………………………………………………………………………………….มาตรฐานการเร�ยนร�

มัาต์รฐานที่�� 4.1 ขี(อ 6 เขี(าใจำหล%กการและว็+ธ�แก(ป5ญหาด(ว็ยกระบว็นการที่างเที่คโนโลย�

สารสนเที่ศึ อย/างมั�ประส+ที่ธ+ภาพและประส+ที่ธ+ผล

ขี(อ 8 การใชี(ฮาร�ดแว็ร�และซอฟต์�แว็ร�ให(เหมัาะสมัก%บงาน

ขี(อ 9 ค(นหาขี(อมั.ลคว็ามัร. (และต์+ดต์/อส-�อสารผ/านคอมัพ+ว็เต์อร�หร-อเคร-อขี/าย

คอมัพ+ว็เต์อร�ขี(อ 10 การใชี(คอมัพ+ว็เต์อร�ชี/ว็ยประมัว็ลผลขี(อมั.ลให(

เป4นสารสนเที่ศึเพ-�อการ ต์%ดส+นใจำขี(อ 11 ใชี(เที่คโนโลย�สารสนเที่ศึ น�าเสนอผลงานใน

ร.ปแบบที่��เหมัาะสมัต์รง ต์ามัว็%ต์ถู1ประสงค�ขีองงาน

ผลุ่การเร�ยนร�ที่��คาดัหวิ�ง1. ว็างแผนเล-อกใชี(เที่คโนโลย�ได(เหมัาะสมัก%บงาน2. ใชี(เที่คโนโลย�ในการที่�างาน การผล+ต์ การออกแบบ การแก(

ป5ญหา การสร(างงาน การสร(าง อาชี�พส1จำร+ต์อย/างมั�คว็ามัเขี(าใจำมั�การว็างแผนเชี+งกลย1ที่ธ� และมั�คว็ามัค+ดสร(างสรรค�

3. สามัารถูใชี(โปรแกรมัคอมัพ+ว็เต์อร�สร(างงานเว็�บเพจำ และเว็�บไซต์�ได(

จุ�ดัประสงค#การเร�ยนร�จุ�ดัประสงค#น$าที่าง- บอกว็+ธ�ใชี(โปรแกรมัคอมัพ+ว็เต์อร�สร(างงานเว็�บเพจำ และเว็�บไซต์�

ได(- บอกว็+ธ�ใชี(เที่คโนโลย�ในการที่�างาน การผล+ต์ การออกแบบ การ

แก(ป5ญหา การสร(างงาน การสร(างอาชี�พส1จำร+ต์อย/างมั�คว็ามัเขี(าใจำมั�การว็างแผนเชี+งกลย1ที่ธ� และมั�คว็ามัค+ดสร(างสรรค�

- บอกว็+ธ�ปฏิ+บ%ต์+การใชี(โปรแกรมัคอมัพ+ว็เต์อร�สร(างงานเว็�บเพจำ และเว็�บไซต์�ได(

- บอกว็+ธ�การใชี(คอมัพ+ว็เต์อร�ชี/ว็ยสร(างงานจำากจำ+นต์นาการหร-องานที่��ที่�าในชี�ว็+ต์ ประจำ�าว็%นอย/างมั�จำ+ต์ส�าน�กและมั�คว็ามัร%บผ+ดชีอบ

จุ�ดัประสงค#ปลุ่ายที่าง- ว็างแผนเล-อกใชี(เที่คโนโลย�ได(เหมัาะสมัก%บงาน- ใชี(เที่คโนโลย�ในการที่�างาน การผล+ต์ การออกแบบ การแก(

ป5ญหา การสร(างงาน การสร(างอาชี�พส1จำร+ต์อย/างมั�คว็ามัเขี(าใจำมั�การว็างแผนเชี+งกลย1ที่ธ� และมั�คว็ามัค+ดสร(างสรรค�

- สามัารถูใชี(โปรแกรมัคอมัพ+ว็เต์อร�สร(างงานเว็�บเพจำ และเว็�บไซต์�ได(

- ใชี(คอมัพ+ว็เต์อร�ชี/ว็ยสร(างงานจำากจำ+นต์นาการหร-องานที่��ที่�าในชี�ว็+ต์ประจำ�าว็%นอย/างมั� จำ+ต์ส�าน�กและมั�คว็ามัร%บผ+ดชีอบ

จำ�านว็น 1 แผน 20 ชี%�ว็โมัง

หน�วิยการเร�ยนร�ที่�� 5

แผนการจุ�ดัการเร�ยนร�ที่�� 1สร(างเว็�บไซต์�ด(ว็ย Dreamweaver

รายวิ ชา การเขี�ยนเว็�บไซต์� ประจำ�าภาคเร�ยนที่�� 1 ป�การศึ�กษา 2551กลุ่��มสาระการเร�ยนร� การงานอาชี�พและเที่คโนโลย�

ระดั�บช��น มั%ธยมัศึ�กษาป�ที่�� 4………………………………………………………………………………………………………….จุ�ดัประสงค#น$าที่าง

- บอกว็+ธ�ใชี(โปรแกรมัคอมัพ+ว็เต์อร�สร(างงานเว็�บเพจำ และเว็�บไซต์�ได(

- บอกว็+ธ�ใชี(เที่คโนโลย�ในการที่�างาน การผล+ต์ การออกแบบ การแก(ป5ญหา การสร(างงาน การสร(างอาชี�พส1จำร+ต์อย/างมั�คว็ามัเขี(าใจำมั�การว็างแผนเชี+งกลย1ที่ธ� และมั�คว็ามัค+ดสร(างสรรค�

- บอกว็+ธ�ปฏิ+บ%ต์+การใชี(โปรแกรมัคอมัพ+ว็เต์อร�สร(างงานเว็�บเพจำ และเว็�บไซต์�ได(

- บอกว็+ธ�การใชี(คอมัพ+ว็เต์อร�ชี/ว็ยสร(างงานจำากจำ+นต์นาการหร-องานที่��ที่�าในชี�ว็+ต์ ประจำ�าว็%นอย/างมั�จำ+ต์ส�าน�กและมั�คว็ามัร%บผ+ดชีอบเน'�อหาสาระ

- แนะน�าโปรแกรมั Dreamweaver

- การออกแบบ การก�าหนดว็%ต์ถู1ประสงค� และโครงสร(างขีองเว็�บไซต์�ต์ามัแนว็ค+ดเชี+ง

สร(างสรรค�- ขี(อคว็รร. (ในการปฏิ+บ%ต์+การสร(างเว็�บไซต์�- ขี(อก�าหนดก/อนใชี(โปรแกรมั Dreamweaver

- ส/ว็นประกอบต์/าง ๆ ขีองโปรแกรมั Dreamweaver

- ขี%=นต์อนการสร(างเว็�บไซต์� และการออกแบบเว็�บเพจำ ด(ว็ย Dreamweaver

- ค�าส%�งการที่�างานขีองโปรแกรมั Dreamweaver

- การสร(างขี(อคว็ามั- การแที่รกร.ปภาพ- การแที่รกต์าราง- การเชี-�อมัโยงเว็�บเพจำ- การก�าหนดการใชี(งาน เลเยอร�- การจำ%ดการเว็�บฯด(ว็ย เฟรมั- การใส/ค1ณ์สมับ%ต์+พ+เศึษ หร-อล.กเล/นให(ก%บเว็�บเพจำ และเว็�บไซต์�- การก�าหนดค/า มั%ลต์+มั�เด�ย- การใชี(ร.ปแบบอ%ต์โนมั%ต์+ในการสร(างเว็�บไซต์�

การจุ�ดักระบวินการเร�ยนร�ขั้��นเตร�ยมหร'อขั้��นน$าเขั้�าส�บที่เร�ยน

1. คร.แจำ(งจำ1ดประสงค�การเร�ยนร. ( และว็+ธ�การเร�ยนร. ( แนะน�าเว็�บไซต์�ประกอบการเร�ยนรายว็+ชีาน�=ค-อ http://www.puibuble.th.gs และอ�เมัลผ.(สอนค-อ puibuble@hotmail.com

2. น%กเร�ยนร/ว็มัก%นแสดงคว็ามัค+ดเห�นเก��ยว็ก%บโครงสร(างและโปรแกรมัที่��ใชี(สร(างเว็�บไซต์�ในป5จำจำ1บ%น โดยที่1กคนร/ว็มัก%นต์อบค�าถูามัและเสนอแนะแนว็ที่างเป4นไปขีองว็+ว็%ฒนาการการสร(างเว็�บด(ว็ยโปรแกรมัส�าเร�จำร.ปต์/าง ๆ ขั้��นสอน

3. คร.แนะน�าโปรแกรมั Dreamweaver การก�าหนดว็%ต์ถู1ประสงค� และโครงสร(างขีองเว็�บไซต์�ต์ามัแนว็ค+ดเชี+ง

สร(างสรรค� ขี(อคว็รร. (ในการปฏิ+บ%ต์+การสร(างเว็�บไซต์� ขี(อก�าหนดก/อนใชี(โปรแกรมั Dreamweaver ส/ว็นประกอบต์/าง ๆ ขีองโปรแกรมั Dreamweaver ขี%=นต์อนการสร(างเว็�บไซต์� และการออกแบบเว็�บเพจำ ด(ว็ย reamweaver ค�าส%�งการที่�างานขีองโปรแกรมั Dreamweaver ประกอบด(ว็ย

- การสร(างขี(อคว็ามั- การแที่รกร.ปภาพ- การแที่รกต์าราง- การเชี-�อมัโยงเว็�บเพจำ- การก�าหนดการใชี(งาน เลเยอร�- การจำ%ดการเว็�บฯด(ว็ย เฟรมั- การใส/ค1ณ์สมับ%ต์+พ+เศึษ หร-อล.กเล/นให(ก%บเว็�บเพจำ และ

เว็�บไซต์�- การก�าหนดค/า มั%ลต์+มั�เด�ย- การใชี(ร.ปแบบอ%ต์โนมั%ต์+ในการสร(างเว็�บไซต์�น%กเร�ยนจำดบ%นที่�กบที่เร�ยน พร(อมัอธ+บายบที่เร�ยนในร.ปแบบ

PowerPoint และค./มั-อการใชี(งานโปรแกรมั Dreamweaver

4. น%กเร�ยนที่�าคว็ามัเขี(าใจำในองค�ประกอบต์/าง ๆ ขีองการสร(างเว็�บไซต์�ด(ว็ยโปรแกรมั Dreamweaver

6. เมั-�อน%กเร�ยนที่�าคว็ามัเขี(าใจำในแต์/ละชี%�ว็โมังแล(ว็ จำะมั�การที่ดลองปฏิ+บ%ต์+ต์ามัห%ว็ขี(อต์/าง ๆ ต์ามัคว็ามัเหมัาะสมัขีองชี%�ว็โมังการสอน โดยมั�คร.ผ.(สอนคอยให(ค�าแนะน�าและแนะแนว็ที่างการปฏิ+บ%ต์+การเขี�ยนเว็�บเพจำด(ว็ยโปรแกรมั Dreamweaver

7. คร.ต์รว็จำผลงานจำากงานที่��มัอบหมัายภายในชี%�ว็โมัง และจำากสมั1ดบ%นที่�กขีองน%กเร�ยน

8. คร.มัอบหมัายใบงานที่�� 6 เร-�องการสร(างเว็�บไซต์�ด(ว็ย Dreamweaver เป4นโปรเจำคงานซ��งต์(องสร(างเมั-�อเร�ยนร. (ในหน/ว็ยการเร�ยนน�=แล(ว็

9. ประเมั+นด(ว็ยแบบประเมั+นการที่�างาน

ขั้��นสร�ป10. คร.เป>ดโอกาสให(น%กเร�ยนซ%กถูามัขี(อสงส%ยเก��ยว็ก%บเร-�อง

ที่��ย%งไมั/เขี(าใจำ และร/ว็มัก%นสร1ปเน-=อหาบที่เร�ยนต์อนที่(ายชี%�ว็โมัง

ส'�อแลุ่ะแหลุ่�งการเร�ยนร� (ม�จุ$านวินเที่�าก�บจุ$านวินน�กเร�ยน)

- ใบงานที่�� 6 เร-�องการสร(างเว็�บไซต์�ด(ว็ย Dreamweaver

- ค./มั-อการใชี(งานโปรแกรมั Dreamweaver

- ต์%ว็อย/างเว็�บไซต์�ที่��มั�ขี(อมั.ลเก��ยว็ก%บการเขี�ยนเว็�บด(ว็ย Dreamweaver

- เว็�บไซต์�ประกอบการเร�ยนร. ( http://www.puibuble.th.gs

- ชี+=นงานน�าเสนอบที่เร�ยน (PowerPoint)

กระบวินการวิ�ดัแลุ่ะประเม นผลุ่ (ม�จุ$านวินเที่�าก�บจุ$านวินน�กเร�ยน)

วิ ธี�วิ�ดัผลุ่- ต์รว็จำผลงานจำากคว็ามัต์%=งใจำขีณ์ะอย./ภายในส%งคมัห(องเร�ยน- การให(คว็ามัร/ว็มัมั-อในการแสดงคว็ามัค+ดเห�น - การที่�าใบงาน และการจำดบ%นที่�ก

เคร'�องม'อวิ�ดั- ใบงาน- ใบประเมั+นการที่�างาน

เกณฑ์#การประเม น - คะแนนจำากใบงานและแบบประเมั+นการที่�างาน

0 – 5 คะแนน ไมั/ผ/าน6 – 10 คะแนน ผ/าน

ก จุกรรมเสนอแนะ ………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………

……………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………

ใบงานที่�� 6เร-�อง สร(างเว็�บด(ว็ย Dreamweaver

1. ชี-�อ.............................................................................

.................ชี%=น.................เลขีที่��....................2. ชี-�อ.............................................................................

.................ชี%=น.................เลขีที่��....................

ห%ว็ขี(อเว็�บเพจำ ..................................................................................................................................

จุ�ดัประสงค#1. เพ-�อให(ผ.(เร�ยนเขี(าใจำหล%กการเขี�ยนเว็�บเพจำด(ว็ย Dreamweaver

MX 2004 และหล%กการสร(างเว็�บที่��ถู.กต์(อง2. เก+ดที่%กษะการค+ดอย/างมั�หล%กการ3. เก+ดที่%กษะการน�าคว็ามัร. (ไปประย1กต์�ใชี(งานจำร+ง

ค$าช��แจุง1. ให(น%กเร�ยนจำ%บค./สร(างเว็�บไซต์�ด(ว็ยโปรแกรมั Dreamweaber

2. ให(น%กเร�ยนออกแบบโครงสร(างเว็�บขีองต์นเองต์ามัห%ว็ขี(อที่��สนใจำ และถู.กต์(องต์ามัหล%กการออกแบบเว็�บเพจำ

3. น�าโครงสร(างที่��ออกแบบมัาสร(างหน(าเว็�บด(ว็ยโปรแกรมั Dreamweaver

4. บ%นที่�กผลงานออกมัาในร.ปแบบไฟล� .html อย/างน(อย 5 หน(า5. ส/งผลงาน

แบบประเม นการที่$างานห�วิขั้�อ ดั�

( 3 คะแนน)

พอใช�( 2

คะแนน)

ควิรปร�บปร�ง

( 1 คะแนน)

เพ'�อนน�กเร�ยนการออกแบบโครงสร(างคว็ามัสว็ยงามัขีองผลงานคว็ามัถู.กต์(องขีองผลงานคว็ามัต์%=งใจำและร%บผ+ดชีอบจำรรยาบรรณ์ในการสร(างเว็�บเที่คน+คการสร(างบ%นที่�กงานถู.กต์(อง ( 2 ,1 , 0

คะแนน )คะแนนรวิม /2

ครประจุ$าวิ ชาการออกแบบโครงสร(างคว็ามัสว็ยงามัขีองผลงานคว็ามัถู.กต์(องขีองผลงานคว็ามัต์%=งใจำและร%บผ+ดชีอบจำรรยาบรรณ์ในการสร(างเว็�บเที่คน+คการสร(างบ%นที่�กงานถู.กต์(อง ( 2 ,1 , 0

คะแนน )คะแนนรวิม /2

ผ�ปกครองการออกแบบโครงสร(างคว็ามัสว็ยงามัขีองผลงานคว็ามัถู.กต์(องขีองผลงานคว็ามัต์%=งใจำและร%บผ+ดชีอบจำรรยาบรรณ์ในการสร(างเว็�บเที่คน+คการสร(างบ%นที่�กงานถู.กต์(อง ( 2 ,1 , 0

คะแนน )คะแนนรวิม /2

รวิมคะแนนที่��งส �น/3

หน�วิยการเร�ยนร�ที่�� 6เป4นเจำ(าขีองเว็�บไซต์�บนโลกอ+นเต์อร�เน�ต์

รายวิ ชา การเขี�ยนเว็�บไซต์� ประจำ�าภาคเร�ยนที่�� 1 ป�การศึ�กษา 2551

กลุ่��มสาระการเร�ยนร� การงานอาชี�พและเที่คโนโลย�

ระดั�บช��น มั%ธยมัศึ�กษาป�ที่�� 4………………………………………………………………………………………………………….มาตรฐานการเร�ยนร�

มัาต์รฐานที่�� 4.1 ขี(อ 11 ใชี(เที่คโนโลย�สารสนเที่ศึ น�าเสนอผลงานในร.ปแบบที่��เหมัาะสมัต์รง

ต์ามัว็%ต์ถู1ประสงค�ขีองงานผลุ่การเร�ยนร�ที่��คาดัหวิ�ง

1. เขี(าใจำกระบว็นการอ%พโหลดเว็�บ และสามัารถูใชี(โปรแกรมัน�าเสนอเว็�บไซต์�ได(จุ�ดัประสงค#การเร�ยนร�

จุ�ดัประสงค#น$าที่าง- บอกกระบว็นการอ%พโหลดเว็�บ และว็+ธ�ใชี(โปรแกรมัน�าเสนอ

เว็�บไซต์�ได(จุ�ดัประสงค#ปลุ่ายที่าง- เขี(าใจำกระบว็นการอ%พโหลดเว็�บ และสามัารถูใชี(โปรแกรมัน�าเสนอ

เว็�บไซต์�ได(จำ�านว็น 1 แผน 2 ชี%�ว็โมัง

หน�วิยการเร�ยนร�ที่�� 6

แผนการจุ�ดัการเร�ยนร�ที่�� 1เป4นเจำ(าขีองเว็�บไซต์�บนโลกอ+นเต์อร�เน�ต์

รายวิ ชา การเขี�ยนเว็�บไซต์� ประจำ�าภาคเร�ยนที่�� 1 ป�การศึ�กษา 2551กลุ่��มสาระการเร�ยนร� การงานอาชี�พและเที่คโนโลย�

ระดั�บช��น มั%ธยมัศึ�กษาป�ที่�� 4………………………………………………………………………………………………………….จุ�ดัประสงค#น$าที่าง

- บอกกระบว็นการอ%พโหลดเว็�บ และว็+ธ�ใชี(โปรแกรมัน�าเสนอเว็�บไซต์�ได(เน'�อหาสาระ

- คว็ามัหมัายขีองการอ%พโหลด- ขี%=นต์อนการสมั%ครขีอใชี(พ-=นที่��เก�บเว็�บไซต์�ฟร�- ขี%=นต์อนการลงโปรแกรมั IP Switch FTP ชี/ว็ยในการ

อ%พโหลด- การใชี(งานโปรแกรมั IP Switch FTP

- การประชีาส%มัพ%นธ�เว็�บไซต์�การจุ�ดักระบวินการเร�ยนร�

ขั้��นเตร�ยมหร'อขั้��นน$าเขั้�าส�บที่เร�ยน1. คร.แจำ(งจำ1ดประสงค�การเร�ยนร. ( และว็+ธ�การเร�ยนร. ( 2. คร.บอกถู�งกระบว็นการในการเป4นเจำ(าขีองเว็�บไซต์�บนโลก

อ+นเต์อร�เน�ต์ในภาพรว็มัเพ-�อเป4นการจำ1ดประกายคว็ามัค+ดในเร-�องการน�าเสนอผลงานเว็�บไซต์�บนโลกอ+นเต์อร�เน�ต์ขั้��นสอน

3. คร.อธ+บายเก��ยว็ก%บคว็ามัหมัายขีองการอ%พโหลด ขี%=นต์อนการสมั%ครขีอใชี(พ-=นที่��เก�บเว็�บไซต์�ฟร� และขี%=นต์อนการลง

โปรแกรมั IP Switch FTP ชี/ว็ยในการอ%พโหลด การใชี(งานโปรแกรมั IP Switch FTP รว็มัถู�ง การประชีาส%มัพ%นธ�เว็�บไซต์� น%กเร�ยนจำดบ%นที่�กบที่เร�ยน ในชี%�ว็โมังที่�� 1 พร(อมัอธ+บายบที่เร�ยนในร.ปแบบ PowerPoint

4. คร.ปฏิ+บ%ต์+ให(น%กเร�ยนได(ด. และปฏิ+บ%ต์+ต์ามั พร(อมัก%บแจำกค./มั-อการเขี�ยนโปรแกรมัด(ว็ย Dreamweaver

5. น%กเร�ยนฝLกปฏิ+บ%ต์+ แล(ว็ให(น%กเร�ยนบ%นที่�กลงสมั1ดบ%นที่�ก 6. คร.ต์รว็จำผลการที่�างานจำากโดยต์รว็จำจำากสมั1ดน%กเร�ยน7. ที่ดสอบหล%งเร�ยนด(ว็ยการปฏิ+บ%ต์+ใบงาน

ขั้��นสร�ป8. คร.เป>ดโอกาสให(น%กเร�ยนซ%กถูามัขี(อสงส%ยเก��ยว็ก%บเร-�องที่��

ย%งไมั/เขี(าใจำ และร/ว็มัก%นสร1ป เน-=อหาบที่เร�ยนส'�อแลุ่ะแหลุ่�งการเร�ยนร� (ม�จุ$านวินเที่�าก�บจุ$านวินน�กเร�ยน)

- ใบคว็ามัร. (ที่�� 6 เร-�อง ขี%=นต์อนการจำ%ดที่�าเว็�บเพจำและการอ%พโหลดไฟล�ขี�=นส./เซ+ร�ฟเว็อร�

- ใบงานที่�� 6 เป4นเจำ(าขีองเว็�บไซต์�บนโลกอ+นเต์อร�เน�ต์- ต์%ว็อย/างเว็�บไซต์�ที่��มั�ขี(อมั.ลเก��ยว็ก%บการอ%พโหลดไฟล�- เว็�บไซต์�ประกอบการเร�ยนร. ( http://www.puibuble.th.gs

- ชี+=นงานน�าเสนอบที่เร�ยน (PowerPoint)

กระบวินการวิ�ดัแลุ่ะประเม นผลุ่ (ม�จุ$านวินเที่�าก�บจุ$านวินน�กเร�ยน)

วิ ธี�วิ�ดัผลุ่- ต์รว็จำผลงานจำากคว็ามัต์%=งใจำขีณ์ะอย./ภายในส%งคมัห(องเร�ยน- การให(คว็ามัร/ว็มัมั-อในการแสดงคว็ามัค+ดเห�น - การที่�าแบบที่ดสอบ และที่�าใบงาน และการจำดบ%นที่�ก

เคร'�องม'อวิ�ดั- ใบงาน- ใบประเมั+นการที่�างาน

เกณฑ์#การประเม น - คะแนนจำากใบงานและแบบประเมั+นการที่�างาน

0 – 5 คะแนน ไมั/ผ/าน6 – 10 คะแนน ผ/าน

ก จุกรรมเสนอแนะ …………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………

ใบงานที่�� 7เร-�อง สร(างเว็�บด(ว็ย Dreamweaver

1. ชี-�อ.............................................................................

.................ชี%=น.................เลขีที่��....................

2. ชี-�อ.............................................................................

.................ชี%=น.................เลขีที่��....................

ห%ว็ขี(อเว็�บเพจำ ..................................................................................................................................

จุ�ดัประสงค#1. เพ-�อให(ผ.(เร�ยนเขี(าใจำหล%กการการสมั%ครขีอพ-=นที่��และกระบว็นการ

อ%พโหลดไฟล�2. เก+ดที่%กษะการค+ดอย/างมั�หล%กการ3. เก+ดที่%กษะการน�าคว็ามัร. (ไปประย1กต์�ใชี(งานจำร+ง

ค$าช��แจุง1. ให(น%กเร�ยนจำ%บค./สมั%ครเป4นสมัาชี+กขีอใชี(พ-=นที่��เก�บเว็�บไซต์�ฟร�บน

อ+นเต์อร�เน�ต์จำ�านว็น 1 ชี-�อ 2. ให(น%กเร�ยนอ%พโหลดไฟล�เว็�บเพจำที่��สร(างขี�=นในหน/ว็ยการเร�ยนที่��แล(ว็

ขี�=นไปไว็(บนพ-=นที่��ที่��สมั%ครได(3. ต์รว็จำสอบผลงานต์นเองด(ว็ยโปรแกรมั Internet Explorer

4. ส/งผลงานเป4นชี-�อโดเมันเนมั

แบบประเม นการที่$างานห�วิขั้�อ ดั�

( 3 คะแนน)

พอใช�( 2

คะแนน)

ควิรปร�บปร�ง

( 1 คะแนน)

เพ'�อนน�กเร�ยนเป>ดด.ได(จำากชี-�อโดเมันเนมัขี(อมั.ลขี�=นครบถู.กต์(องร.ปภาพขี�=นครบถู.กต์(องการเชี-�อมัโยงภายในเว็�บไซต์�การเชี-�อมัโยงภายนอกเว็�บไซต์�

คะแนนรวิม x20/5

ครประจุ$าวิ ชาเป>ดด.ได(จำากชี-�อโดเมันเนมัขี(อมั.ลขี�=นครบถู.กต์(องร.ปภาพขี�=นครบถู.กต์(องการเชี-�อมัโยงภายในเว็�บไซต์�การเชี-�อมัโยงภายนอกเว็�บไซต์�

คะแนนรวิม x20/5

ผ�ปกครองเป>ดด.ได(จำากชี-�อโดเมันเนมัขี(อมั.ลขี�=นครบถู.กต์(องร.ปภาพขี�=นครบถู.กต์(องการเชี-�อมัโยงภายในเว็�บไซต์�การเชี-�อมัโยงภายนอกเว็�บไซต์�

คะแนนรวิม x20/5

รวิมคะแนนที่��งส �น/3

ใบควิามร�ที่�� 6 ขั้��นตอนการจุ�ดัที่$าเวิ.บเพจุแลุ่ะการอ�พโหลุ่ดัไฟลุ่#ขั้;�นส�

เซ ร#ฟเวิอร#ขั้องส$าน�กงานอ�ตสาหกรรมจุ�งหวิ�ดั

โฮมเพจุ กระที่รวิงอ�ตสาหกรรมส�วินที่��เป:นภาษาไที่ย (www.m- industry.go.th)

รปที่�� 1 : โฮมเพจุ (Home Page) ขั้องกระที่รวิงอ�ตสาหกรรมส�วินที่��เป:นภาษาไที่ย

โฮมเพจุกระที่รวิงอ�ตสาหกรรมส�วินที่��เป:นภาษาอ�งกฤษ

รปที่�� 2 : โฮมเพจุ (Home Page)

ขั้องกระที่รวิงอ�ตสาหกรรมส�วินที่��เป:นภาษาอ�งกฤษ

แผนผ�งเวิ.บไซต# (Sitemap)

แสดงโครงสร(างขีองขี(อมั.ลภายในเว็�บไซต์�กระที่รว็งอ1ต์สาหกรรมัแยกต์ามัห%ว็ขี(อต์/างๆ ด%งร.ปที่�� 3 ซ��งแสดงรายละเอ�ยดขีองขี(อมั.ลที่%=งหมัดในเว็�บไซต์�กระที่รว็งอ1ต์สาหกรรมั

รปที่�� 3 : หน�าจุอแสดังแผนผ�งเวิ.บไซต#กระที่รวิงอ�ตสาหกรรม

การให�บร การต�างๆ ผ�านเวิ.บไซต# กระที่รวิงอ�ตสาหกรรม

ป5จำจำ1บ%นเว็�บไซต์�กระที่รว็งอ1ต์สาหรรมั(www.m-industry.go.th)

ศึ.นย�เที่คโนโลย�สารสนเที่ศึและการส-�อสาร(ศึที่ส.) ส�าน%กงานปล%ดกระที่รว็งอ1ต์สาหกรรมั เป4นผ.(ด.แลและปร%บปร1งขี(อมั.ลต์/างๆ โดยการให(บร+การขี(อมั.ลบนเว็�บไซต์�สามัารถูแบ/งออกได(เป4น

1. การให�บร การขั้�อมลุ่ที่��วิไป เชี/น ประว็%ต์+กระที่รว็งอ1ต์สาหกรรมั โครงสร(างผ.(บร+หาร ภารก+จำขีองกระที่รว็ง หน/ว็ยงานในส%งก%ดต์/างๆ ขี/าว็ประชีาส%มัพ%นธ� ค/าสถู+ต์+ ด%ชีน�อ1ต์สาหกรรมั เป4นต์(น

2. การให�บร การที่��ประชาชนสามารถเขั้�ามาต ดัต�อก�บกระที่รวิงผ�านที่างเวิ.บไซต#

2.1 หน(าจำอปร�กษาร%ฐมันต์ร�ว็/าการกระที่รว็งอ1ต์สาหกรรมั2.2 หน(าจำอร%บเร-�องร(องที่1กขี�2.3 หน(าจำอกระดานถูามัต์อบ2.4 หน(าจำอสมั1ดเย��ยมัชีมั2.5 หน(าจำอต์+ดต์/อเจำ(าหน(าที่�� Contact Center ผ/านที่าง

Web Chat และ e-Mail

การจุ�ดัที่$าเวิ.บเพจุแลุ่ะการอ�พโหลุ่ดัไฟลุ่#ขั้;�นส�เซ ร#ฟเวิอร#ขั้องส$าน�กงานอ�ตสาหกรรมจุ�งหวิ�ดั

รปที่�� 4 : หน�าจุอส$าน�กงานอ�ตสาหกรรมจุ�งหวิ�ดั

รายลุ่ะเอ�ยดัหน(าจำอส�าน%กงานอ1ต์สาหกรรมัจำ%งหว็%ด ด%งร.ปที่�� 4

แสดงห%ว็ขี(อต์/างๆ ที่��ให(ขี(อมั.ลเก��ยว็ก%บส�าน%กงานอ1ต์สาหกรรมัจำ%งหว็%ดที่%�ว็ประเที่ศึโดยประกอบด(ว็ย 1. ขั้�อมลุ่ที่��วิไป เป4นขี(อมั.ลที่%�ว็ไปขีองส�าน%กงานอ1ต์สาหกรรมัจำ%งหว็%ดน%=นๆ เชี/น สถูานที่��ต์% =ง หมัายเลขีโที่รศึ%พที่� เป4นต์(น 2. ขั้�อมลุ่ที่��วิไปขั้องจุ�งหวิ�ดั เป4นขี(อมั.ลที่%�ว็ไปขีองจำ%งหว็%ดน%=นๆ เชี/น ขี(อมั.ลที่างด(านเศึรษฐก+จำ และขี(อมั.ลที่างภ.มั+ศึาสต์ร� เป4นต์(น 3. ฝ่?ายอ�ตสาหกรรมพ'�นฐานแลุ่ะการเหม'องแร� เป4นขี(อมั.ลเก��ยว็ก%บฝDายอ1ต์สาหกรรมัพ-=นฐานและการเหมั-องแร/ขีองส�าน%กงานอ1ต์สาหกรรมัจำ%งหว็%ดน%=นๆ ว็/ามั�หน(าที่��คว็ามัร%บผ+ดชีอบ และผลการด�าเน+นการอย/างไร เป4นต์(น 4. ฝ่?ายโรงงานอ�ตสาหกรรม เป4นขี(อมั.ลเก��ยว็ก%บฝDายโรงงานอ1ต์สาหกรรมัขีองส�าน%กงานอ1ต์สาหกรรมัจำ%งหว็%ดน%=นๆ ว็/ามั�หน(าที่��คว็ามัร%บผ+ดชีอบ และผลการด�าเน+นการอย/างไร เป4นต์(น

5. แผนงานแลุ่ะโครงการ เป4นขี(อมั.ลเก��ยว็ก%บแผนงานและโครงการขีองส�าน%กงานอ1ต์สาหกรรมัจำ%งหว็%ดน%=นๆ 6. ฝ่?ายส�งเสร มอ�ตสาหกรรม เป4นขี(อมั.ลเก��ยว็ก%บฝDายส/งเสร+มัอ1ต์สาหกรรมัขีองส�าน%กงานอ1ต์สาหกรรมัจำ%งหว็%ดน%=นๆ ว็/ามั�หน(าที่��คว็ามัร%บผ+ดชีอบ และผลการด�าเน+นการอย/างไร เป4นต์(น 7. ขั้�อมลุ่โรงงาน เป4นรายละเอ�ยดเก��ยว็ก%บขี(อมั.ลขีองโรงงานต์/างๆ ที่��ต์% =งอย./ภายในจำ%งหว็%ดน%=น เป4นต์(น 8. โครงสร�างการบร หาร เป4นขี(อมั.ลเก��ยว็ก%บโครงสร(างการบร+หารและผ.(ที่��ด�ารงต์�าแหน/งผ.(บร+หารในส�าน%กงาน

อ1ต์สาหกรรมัจำ%งหว็%ดน%=นๆ เป4นต์(น 9. ขั้�าวิประชาส�มพ�นธี# เป4นขี(อมั.ลขี/าว็สารหร-อขี/าว็ประกาศึต์/างๆ ที่��ต์(องการประชีาส%มัพ%นธ�ให(บ1คคลที่%�ว็ไปที่ราบ 10. ย�ที่ธีศัาสตร#จุ�งหวิ�ดั เป4นขี(อมั.ลเก��ยว็ก%บแผนย1ที่ธศึาสต์ร�ขีองจำ%งหว็%ดน%=นๆ

11. ต ดัต�อส$าน�กงาน เป4นล+งค� ไปย%งอ�เมัล�แอดเดรสขีองส�าน%กงานอ1ต์สาหกรรมัจำ%งหว็%ดน%=นๆ

นอกจำากห%ว็ขี(อต์/างๆ ด%งกล/าว็แล(ว็ ในหน(าจำอส�าน%กงานอ1ต์สาหกรรมัจำ%งหว็%ดย%งแสดงส%ญล%กษณ์�และค�าขีว็%ญประจำ�าจำ%งหว็%ดน%=นๆ

เมั-�อผ.(ใชี(บร+การเขี(าส./หน(าจำอน�=ก�ให(เล-อกจำ%งหว็%ดที่��ต์(องการและสามัารถูด.รายละเอ�ยดที่��ห%ว็ขี(อต์/างๆ โดยการคล+กที่��ด.ห%ว็ขี(อน%=นๆ

ป5จำจำ1บ%นศึ.นย�เที่คโนโลย�สารสนเที่ศึและการส-�อสาร(ศึที่ส.)

ส�าน%กงานปล%ดกระที่รว็งอ1ต์สาหกรรมัได(อน1ญาต์ให(ส�าน%กงานอ1ต์สาหกรรมัจำ%งหว็%ดแต์/ละแห/งสามัารถูน�าไฟล�ที่��ใชี(จำ%ดที่�าเว็�บเพจำขีองแต์/ละส�าน%กงานเก�บไว็(ในเซ+ร�ฟเว็อร�ส/ว็นกลาง ซ��งขีณ์ะน�= ศึที่ส. เป4นผ.(ด.แลอย./ โดยให(พ-=นที่��ส�าน%กงานอ1ต์สาหกรรมัจำ%งหว็%ดละ 20 MB

เน'�อหาภายในแลุ่ะช'�อขั้องไฟลุ่#ส$าหร�บการจุ�ดัที่$าเวิ.บเพจุ

ผ�พ�ฒนาเวิ.บเพจุขั้องส$าน�กงานอ�ตสาหกรรมจุ�งหวิ�ดัแต�ลุ่ะแห�ง จุะต�องจุ�ดัเตร�ยมเน'�อหา ช'�อแลุ่ะนามสก�ลุ่ขั้องไฟลุ่#ให�ตรงก�บห�วิขั้�อมาตรฐานต�างที่��ระบ�ไวิ�ใน Template ดั�งต�อไปน��ค'อ

index_con.htm เก�บเน-=อหาภายในห%ว็ขี(อ ขั้�อมลุ่ที่��วิไป

provin_info_con.htm เก�บเน-=อหาภายในห%ว็ขี(อ ขั้�อมลุ่ที่��วิไปขั้องจุ�งหวิ�ดั

sub_con.htm เก�บเน-=อหาภายในห%ว็ขี(อ ฝ่?ายอ�ตสาหกรรมพ'�นฐานแลุ่ะการเหม'องแร�

factory_con.htm เก�บเน-=อหาภายในห%ว็ขี(อ ฝ่?ายโรงงานอ�ตสาหกรรม

budget_con.htm เก�บเน-=อหาภายในห%ว็ขี(อ งบประมาณplan_con.htm เก�บเน-=อหาภายในห%ว็ขี(อ แผนงานแลุ่ะโครงการsupport_con.htm เก�บเน-=อหาภายในห%ว็ขี(อ

ฝ่?ายส�งเสร มอ�ตสาหกรรมfacdata_con.htm เก�บเน-=อหาภายในห%ว็ขี(อ

ขั้�อมลุ่โรงงานstructure_con.htm เก�บเน-=อหาภายในห%ว็ขี(อ

โครงสร�างการบร หารnews_con.htm เก�บเน-=อหาภายในห%ว็ขี(อ ขั้�าวิประชาส�มพ�นธี#strategy_con.htm เก�บเน-=อหาภายในห%ว็ขี(อ ย�ที่ธีศัาสตร#จุ�งหวิ�ดัรายลุ่ะเอ�ยดั

1. เว็�บเพจำขีองส�าน%กงานอ1ต์สาหกรรมัจำ%งหว็%ดที่��จำ%ดที่�าขี�=นสามัารถูใชี(เคร-�องมั-อใดก�ได( ในการพ%ฒนา เชี/น Edit Plus FrontPage Macromedia Dreamweaver MX Microsoft Word Microsoft Excel เป4นต์(น ส/ว็นล%กษณ์ะและร.ปแบบขีองเว็�บเพจำต์/างๆ ต์ลอดจำนร.ปภาพที่��ใชี(ประกอบ ส�าน%กอ1ต์สาหกรรมัจำ%งหว็%ดต์/างๆ สามัารถูจำ%ดที่�าต์ามัที่��เห�นสมัคว็ร เพ�ยงแต์/ส�าน%กงานอ1ต์สาหกรรมัจำ%งหว็%ดแต์/ละแห/งต์(องจำ%ดที่�าเว็�บเพจำที่��มั�เน-=อหาต์รงก%บห%ว็ขี(อที่�� ศึ.นย�เที่คโนโลย�สารสนเที่ศึและการส-�อสาร (ศึที่ส.) ส�าน%กงานปล%ดกระที่รว็งอ1ต์สาหกรรมั(สปอ.) ก�าหนดไว็( และ ให(เก�บบ%นที่�กชี-�อและนามัสก1ลขีองไฟล�ต์ามัที่��ระบ1 โดยชี-�อและนามัสก1ลขีองไฟล�ใชี(เหมั-อนก%นที่%=งในส/ว็นขีองเว็�บไซต์�กระที่รว็งอ1ต์สาหกรรมัที่��เป4นภาษาไที่ยและภาษาอ%งกฤษ

2. ผ.(พ%ฒนาเว็�บเพจำขีองส�าน%กงานอ1ต์สาหกรรมัจำ%งหว็%ดแต์/ละแห/ง คว็รเก�บไฟล�ร.ปภาพต์/างๆ ที่��ใชี(ภายในเว็�บเพจำไว็(ในโฟลเดอร� images เมั-�อถู�งขี%=นต์อนน�าไฟล�ต์/างๆ อ%พโหลดขี�=นไปไว็(บน

เซ+ร�ฟเว็อร� (Server) ก�ให( น�าไฟล�ร.ปภาพที่%=งหมัดไปไว็(ในโฟลเดอร� images ซ��งจำะมั�อย./แล(ว็บนเซ+ร�ฟเว็อร�เชี/นก%น 3. ให(ส�าน%กงานอ1ต์สาหกรรมัจำ%งหว็%ดแต์/ละแห/งชี/ว็ยสร(างล+งค� (link) เพ-�อเชี-�อมัโยงไปย%งส+นค(าต์/างๆ ภายในขีองจำ%งหว็%ดน%=นๆ (หน��งต์�าบล หน��งผล+ต์ภ%ณ์ฑ์� : One Tambon One

Product(OTOP)) ในส/ว็นขีองห%ว็ขี(อขี/าว็ประชีาส%มัพ%นธ� อ%นเป4นชี/ว็ยส/งเสร+มัและประชีาส%มัพ%นธ�ส+นค(าภายในจำ%งหว็%ด

4. หล%งจำากส�าน%กงานอ1ต์สาหกรรมัจำ%งหว็%ดสร(างเว็�บเพจำต์ามัเน-=อหาที่��ได(ระบ1ไว็(ในแต์/ละห%ว็ขี(อแล(ว็ ให(ส/งไฟล�ต์/างๆ มัาย%งเซ+ร�ฟเว็อร�ส/ว็นกลางโดยผ/านที่างระบบ FTP (File Transfer Protocol) ซ��งอาจำจำะใชี(โปรแกรมั WS_FTP หร-อ CuteFTP ก�ได( โดยส�าน%กงานอ1ต์สาหกรรมัจำ%งหว็%ดแต์/ละแห/งจำะได(ร%บ ชี-�อผ.(ใชี(งาน (UserID) จำ�านว็น 2 รายชี-�อ พร(อมัก%บรห%สผ/าน (Password) ส�าหร%บเว็�บไซต์�กระที่รว็งอ1ต์สาหกรรมัที่��เป4นภาษาไที่ยและภาษาอ%งกฤษ จำากศึ.นย�เที่คโนโลย�สารสนเที่ศึและการส-�อสาร (ศึที่ส.)เพ-�อให(ส�าน%กงานอ1ต์สาหกรรมัสามัารถูเขี(าส./ระบบและที่�าการอ%พโหลด (Upload) ไฟล�ขี�=นส./เซ+ร�ฟเว็อร� (Server) เพ-�อแสดงผลบนเว็�บไซต์�ต์/อไป

5. ศึ.นย�เที่คโนโลย�สารสนเที่ศึและการส-�อสาร อน1ญาต์ให(ส�าน%กงานอ1ต์สาหกรรมัจำ%งหว็%ดสามัารถูอ%พโหลดไฟล�ต์/างๆ ที่��ได(จำากการจำ%ดที่�าเว็�บไซต์�ขี�=นส./เซ+ร�ฟเว็อร�ส/ว็นกลาง โดยให(เน-=อที่��จำ%งหว็%ดละ 20 MB

แผนภาพแส ดังการไหลุ่ขั้องขั้�อมลุ่

รปที่�� 5 : แสดังแผนภาพการไหลุ่ขั้องขั้�อมลุ่

ขั้��นตอนการอ�พโหลุ่ดั (Upload) ไฟลุ่#ขั้;�นส�เซ ร#ฟเวิอร# โดัยใช� โปรแกรม WS_FTP Pro 7.04

เน-�องจำากศึ.นย�เที่คโนโลย�สารสนเที่ศึและการส-�อสาร(ศึที่ส.)

ส�าน%กงานปล%ดกระที่รว็งอ1ต์สาหกรรมัได(จำ%ดส/งแผ/นซ�ด�ซ��งมั�โปรแกรมั WS_FTP Pro 7.04 ให(ส�าน%กงานอ1ต์สาหกรรมัจำ%งหว็%ดต์/างๆ เพ-�อใชี(ส�าหร%บการอ%พโหลดไฟล�ขี�=นเซ+ร�ฟเว็อร� โดยขี%=นต์อนการที่�างานมั�ด%งน�=

1. เมั-�อเป>ดโปรแกรมั WS_FTP Pro 7.04 ขี�=นมัาจำะพบก%บหน(าจำอด%งร.ปที่�� 6 โดยโปรแกรมัจำะให(ใส/ Host Name UserID

และ Password ลงไปในชี/องต์/างๆ โดย Host Name ค-อ 203.151.169.1 ซ��งเป4นหมัายเลขี IP ขีองเซ+ร�ฟเว็อร� ส/ว็น UserID และ Password สามัารถูด.จำากเอกสารที่�� ศึที่ส. ได(จำ%ดส/งให(แต์/ละจำ%งหว็%ด หล%งจำากใส/ค/าต์/างๆ เร�ยบร(อยแล(ว็ ให(คล+ก Connect

เพ-�อที่�าการเชี-�อมัต์/อไปย%ง เซ+ร�ฟเว็อร�

รปที่�� 6 : การระบ� Host Name UserID แลุ่ะ Password เม'�อเปAดัเขั้�าส�โปรแกรม WS_FTP Pro 7.04

2. หล%งจำากสามัารถูเขี(าส./โปรแกรมัเร�ยบร(อยแล(ว็ แล(ว็จำะพบก%บหน(าจำอด%งร.ปที่�� 7 โดยด(านซ(ายจำะแสดงหน(าจำอเคร-�องคอมัพ+ว็เต์อร�ขีองผ.(ใชี(งาน ส/ว็นด(านขีว็าจำะเป4นหน(าจำอขีองเซ+ร�ฟเว็อร� จำากหน(าจำอที่%=งสองผ.(ใชี(งานสามัารถูโอนย(ายไฟล�จำากเคร-�องคอมัพ+ว็เต์อร�ขีองต์นมัาย%งเซ+ร�ฟเว็อร�ได(โดยการลากไฟล�จำากด(านซ(ายมัาย%งด(านขีว็า หร-อคล+กที่��ล.กศึร เพ-�อน�าไฟล�จำากด(านซ(ายมั-อมัาย%งด(านขีว็ามั-อ

รปที่�� 7 : ดั�านซ�ายจุะแสดังหน�าจุอเคร'�องคอมพ วิเตอร#ขั้องผ�ใช�งาน ส�วินดั�านขั้วิาจุะเป:นหน�าจุอขั้องเซ ร#ฟเวิอร#

3. เมั-�อผ.(ใชี(งานลากไฟล�จำากด(านซ(ายมัาย%งด(านขีว็า ถู(าหากไฟล�ที่��ลากมัาน%=นมั�อย./แล(ว็บนเซ+ร�ฟเว็อร�โปรแกรมัจำะถูามัว็/าต์(องการให( Copy ไปแที่นขีองเด+มัหร-อไมั/ ถู(าผ.(ใชี(งานกด Overwrite โปรแกรมัก�จำะที่�าการ Copy ไฟล�ไปแที่นที่��ไฟล�เด+มับนเซ+ร�ฟเว็อร�ที่%นที่� ด%งร.ปที่�� 8

รปที่�� 8 : โปรแกรมจุะเต'อนผ�ใช�งานเม'�อพบวิ�าไฟลุ่#ที่��ลุ่ากจุากดั�านซ�ายมาดั�านขั้วิาม�อย�แลุ่�วิบนเซ ร#ฟเวิอร#

4. เมั-�อที่�าการ Copy เสร�จำเร�ยบร(อยแล(ว็โปรแกรมัจำะมั�เส�ยงเต์-อนและแจำ(งว็/า Transfer Complete ด%งร.ปที่�� 9

รปที่�� 9 : โปรแกรมจุะแจุ�งวิ�า Transfer Complete

ขั้�อควิรพ;งระวิ�งในการน$าไฟลุ่#ขั้;�นส�เซ ร#ฟเวิอร#

1. คว็รที่�าการสแกนไว็ร%สที่1กคร%=งก/อนน�าไฟล�ขี�=นส./เซ+ร�ฟเว็อร�

2. คว็รปร%บปร1ง (Update) รายชี-�อไว็ร%สขีองโปรแกรมัสแกนไว็ร%สให(ที่%นสมั%ยอย./เสมัอ

3. ไมั/คว็รน�าไฟล�ที่��ไมั/ได(ใชี(ประโยชีน�ไปไว็(บนเซ+ร�ฟเว็อร�

4. ไฟล�ใดที่��ไมั/ได(ใชี(ประโยชีน�บนเซ+ร�ฟเว็อร�คว็รลบที่+=ง เพ-�อไมั/ให(เป4นการส+=นเปล-องพ-=นที่��ในการจำ%ดเก�บ

5. คว็รส�ารอง (Backup) ไฟล�ที่��มั�อย./เด+มัที่1กคร%=งก/อนที่�าการแก(ไขีหร-อส/งไฟล�ต์%ว็ใหมั/ขี�=นส./ระบบ

6. ผ.(ใชี(งานคว็รเก�บ UserID และ Password ไว็(เป4นคว็ามัล%บเพ-�อป?องก%นผ.(ไมั/มั�ส+ที่ธ+Iสามัารถูเขี(าส./ระบบจำนที่�าให(ขี(อมั.ลเส�ยหายได(

ผลการส�ารว็จำเว็�บไซต์�ภาคร%ฐ

ป5จำจำ1บ%นประเที่ศึไที่ยได(จำ%ดที่�าแผนแมั/บที่เที่คโนโลย�สารสนเที่ศึและการส-�อสาร พ.ศึ. 2545-2551 ขี�=นมัาโดยได(ก�าหนด 5 ย1ที่ธศึาสต์ร�หล%กในการพ%ฒนา ได(แก/ e-Industry e-

Commerce e-Government e-Education และ e-

Society ซ��ง e-Government หร-อร%ฐบาลอ+เล�กที่รอน+กส�น%บเป4นย1ที่ธศึาสต์ร�ที่��ส�าค%ญในการผล%กด%นการพ%ฒนาด(านเที่คโนโลย�สารสนเที่ศึและการส-�อสารขีองประเที่ศึไที่ย หล%กการส�าค%ญขีองการสร(างร%ฐบาลอ+เล�กที่รอน+กส� ค-อการน�าบร+การขีองภาคร%ฐส./ประชีาชีน โดยใชี(อ+เล�กที่รอน+กส�เป4นส-�อในการให(บร+การ ที่�าให(โครงการส�ารว็จำเว็�บไซต์�ภาคร%ฐคร%=งที่�� 1 ระหว็/างว็%นที่�� 14 มักราคมั – 31 มั�นาคมั 2547 จำ�งเก+ดขี�=นเพ-�อส�ารว็จำและต์+ดต์ามัคว็ามัก(าว็หน(าขีองการพ%ฒนาร%ฐบาลอ+เล�กที่รอน+กส�ขีองประเที่ศึไที่ย เป4นโครงการคว็ามัร/ว็มัมั-อระหว็/างกระที่รว็งเที่คโนโลย�สารสนเที่ศึและการส-�อสารและกระที่รว็งว็+ที่ยาศึาสต์ร�และเที่คโนโลย� ด�าเน+นการโดยโครงการพ%ฒนาโครงสร(างพ-=นฐานสารสนเที่ศึภาคร%ฐ ศึ.นย�เที่คโนโลย�อ+เล�กที่รอน+กส�และคอมัพ+ว็เต์อร�แห/งชีาต์+ ส�าน%กงานพ%ฒนาว็+ที่ยาศึาสต์ร�และเที่คโนโลย�แห/งชีาต์+ (NECTEC) โดยการส�ารว็จำได(มั�การเก�บรว็บรว็มัขี(อมั.ลขีอง

ที่1กหน/ว็ยงานภาคร%ฐในระด%บกรมัและเที่�ยบเที่/าจำ�านว็น 267 หน/ว็ยงาน ที่��เก��ยว็ขี(องก%บก+จำกรรมัการให(บร+การที่างเว็�บไซต์�โดยเกณ์ฑ์�ที่��ใชี(ในการจำ%ดประเภที่บร+การเว็�บไซต์�ภาคร%ฐ ค-อ

Information : มั�เว็�บไซต์�ให(บร+การขี(อมั.ลขี/าว็สารส./ประชีาชีน โดยที่��ขี(อมั.ลขี/าว็สารเหล/าน%=นต์(องมั�คว็ามัถู.กต์(อง มั�ค1ณ์ค/าต์/อการใชี(งานและที่%นสมั%ย

Interaction : มั�เว็�บไซต์�สามัารถูสร(างปฏิ+ส%มัพ%นธ�ก%บประชีาชีน

Interchange Transaction : เว็�บไซต์�สามัารถูด�าเน+นธ1รกรรมัที่างอ+เล�กที่รอน+กส�ได(โดยสมับ.รณ์�ในต์%ว็เอง

Integration : มั�การบ.รณ์าการแนว็ราบขีองการบร+การระหว็/างเว็�บไซต์�ขีองหน/ว็ยงาน

Intelligence : เว็�บไซต์�สามัารถูเร�ยนร. (พฤต์+กรรมัขีองประชีาชีนที่��มัาใชี(บร+การ

หล%งจำากการส�ารว็จำด%งกล/าว็ปรากฎีว็/าเมั-�อ NECTEC

ประกาศึรายชี-�อ 5 ล�าด%บคะแนนส.งส1ดในประเภที่ Information

เว็�บไซต์�กระที่รว็งอ1ต์สาหกรรมัถู.กจำ%ดไว็(ในล�าด%บที่�� 4 ด%งร.ปที่�� 10

รปที่�� 10 : เวิ.บไซต#กระที่รวิงอ�ตสาหกรรมถกจุ�ดัลุ่$าดั�บเป:นที่�� 4 ในส�วินขั้อง Information

ขั้�อสอบปลุ่ายภาครายวิ ชา การเขี�ยนเว็�บไซต์� ประจำ�าภาคเร�ยนที่�� 1 ป�การศึ�กษา 2551กลุ่��มสาระการเร�ยนร� การงานอาชี�พและเที่คโนโลย�

ระดั�บช��น มั%ธยมัศึ�กษาป�ที่�� 4………………………………………………………………………………………………………….ตอนที่�� 1 ให(น%กเร�ยนเล-อกค�าต์อบที่��ถู.กต์(องที่��ส1ดเพ�ยงขี(อเด�ยว็1. ระบบเคร-อขี/ายคอมัพ+ว็เต์อร�หมัายถู�งอะไร

ก. ระบบที่��มั�การน�าคอมัพ+ว็เต์อร�มัาใชี(ประโยชีน�ร/ว็มัก%บอ1ปกรณ์�ต์/าง ๆ เชี/นแสกนเนอร� เคร-�องพ+มัพ� เป4นต์(น

ขี. ระบบที่��มั�การน�าคอมัพ+ว็เต์อร�ต์%=งแต์/ 2 เคร-�องขี�=นไปมัาเชี-�อมัต์/อเขี(าด(ว็ยก%น

ค. ระบบศึ.นย�กลางการส-�อสารคอมัพ+ว็เต์อร�ง. ระบบการใชี(งานคอมัพ+ว็เต์อร�ขีนาดเล�ก

2. อ+นเต์อร�เน�ต์เก+ดขี�=นคร%=งแรกในประเที่ศึใด และป� ค.ศึ.ใดก. อ%งกฤษ 1960 ขี. สหร%ฐอเมัร+กา 1960

ค. อ%งกฤษ 1975 ง. สหร%ฐอเมัร+กา 1975

3. หากเปร�ยบเว็�บไซต์�เป4นหน%งส-อ เราจำะเปร�ยบหน(าสารบ%ญได(ก%บอะไรก. Webpage ขี. Homepage

ค. Website ง. Single Page4. เว็�บเพจำชีน+ดที่��สามัารถูเป>ดอ/านได(ภายในหน(าเด�ยว็น%=นเร�ยกว็/าอะไร

ก. Single Page ขี. Scroll Page

ค. One Page ง. HomePage5. โครงสร(างเว็�บแบบใดที่��เหมัาะส�าหร%บการออกแบบเว็�บไซต์�ขีองกระที่รว็งการคล%ง

ก. แบบส%=น ขี. แบบกว็(างค. แบบต์-=น ง. แบบล�ก

6. ขี(อใดกล/าว็ถู.กต์(องที่��ส1ดก. ในการสร(างเว็�บคว็รมั�การว็างแผนคร/าว็ ๆ ก/อนขี. การสร(างเว็�บเพจำที่��ด�คว็รมั�ส�ส%นฉ.ดฉาดเต์ะต์าผ.(ชีมัค. เว็�บไซต์�ที่��ด�คว็รมั�ต์%ว็หน%งส-อขีนาดใหญ/เพ-�อให(มัองเห�นชี%ดเจำนง. ง/าย ๆ แต์/จำร+งใจำ เป4นห%ว็ใจำอย/างหน��งขีองการที่�าเว็�บไซต์�

7. ขี(อใดกล/าว็ถู.กต์(องที่��ส1ดก. ไมั/คว็รต์%=งรห%สยากเก+นไปในการสมั%ครใชี(เคร-อขี/ายอ+นเต์อร�เน�ต์ขี. ในการเชี-�อมัต์/ออ+นเต์อร�เน�ต์คว็รใชี(ขี(อมั.ลส�ารองไมั/ใชี(ขีองจำร+งค. บางคร%=งคว็รใชี(ขี(อคว็ามัพาดพ+งชี-�อคนอ-�นบ(างเพ-�อเป4นการ

อ(างอ+งแหล/งที่��มัาง. คว็รใชี(ภาษาในการต์+ดต์/อแบบส%=น ๆ ได(สาระ

8. HTML ย/อมัาจำากค�าว็/าอะไรก. Hyper trade Makeup Language

ขี. Hypertext Mark Up Language

ค. Hypertrading Maskup Language

ง. Hip Hop Technical Limited

9. ในการขี�=นบรรที่%ดใหมั/โดยย/อหน(าใหมั/ต์(องใชี(ค�าส%�งใดในการเขี�ยน Code HTML

ก. br ขี. hr

ค. p ง. Marquee

10. ในการที่�าต์%ว็หน%งส-อว็+�งต์(องใชี(ค�าส%�งใดในการเขี�ยน Code HTML

ก. br ขี. hr

ค. p ง. Marquee

ตอนที่�� 2 ให(น%กเร�ยนอธ+บายคว็ามัหมัายขีองส%ญล%กษณ์�ต์/อไปน�=11. .............................................................................................................................................. ......................................................................................................................................................................................................................................................................................................................................12.

.............................................................................................................................................. ......................................................................................................................................................................................................................................................................................................................................13. .............................................................................................................................................. ......................................................................................................................................................................................................................................................................................................................................14.

.............................................................................................................................................. ........................................................................................................................................................................................................................

............................................................................................................

..15. .............................................................................................................................................. ......................................................................................................................................................................................................................................................................................................................................16.

.............................................................................................................................................. ......................................................................................................................................................................................................................................................................................................................................

17. .............................................................................................................................................. ......................................................................................................................................................................................................................................................................................................................................18. .............................................................................................................................................. ......................................................................................................................................................................................................................................................................................................................................19.

.............................................................................................................................................. ......................................................................................................................................................................................................................................................................................................................................20.

..............................................................................................................................................

............................................................................................................

............................................................................................................

............................................................................................................

..

เฉลุ่ย

ตอนที่�� 1 ตอนที่�� 2ขั้�อ

เฉลุ่ย

1 ขี2 ขี3 ขี4 ก5 ง6 ง

11. ส%ญล%กษณ์�ขีองโปรแกรมั Macromedia Dreamweaver

12. ส%ญล%กษณ์�ค�าส%�งเป>ดหน(าการที่�างานใหมั/13. ส%ญล%กษณ์�ค�าส%�งการแที่รกร.ปภาพ14. ส%ญล%กษณ์�กล1/มัค�าส%�งมั%ลต์+มั�เด�ย15. ส%ญล%กษณ์�การแที่รกว็%นที่�� เด-อน และป�ที่��

สร(างเว็�บและอ%พเดที่ขี(อมั.ล16. ส%ญล%กษณ์�การเชี-�อมัโยงหน(าเว็�บเพจำ17. ส%ญล%กษณ์�การที่�างานในร.ปแบบขีอง Code

HTML18. ส%ญล%กษณ์�การบ%นที่�กงาน

7 ก8 ขี9 ค10

ง