แผนการเรียนรู้ · - การท าแบบทดสอบ และท าใบงาน และการจดบันทึก เครื่องมือวัด

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

ขอ 6 เขาใจหลกการและวธแกปญหาดวยกระบวนการทางเทคโนโลยสารสนเทศ อยางมประสทธภาพและประสทธผล ขอ 8 การใชฮารดแวรและซอฟตแวรใหเหมาะสมกบงาน

ขอ 9 คนหาขอมลความรและตดตอสอสารผานคอมพวเตอรหรอเครอขาย คอมพวเตอร

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

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

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

6. มจรยธรรมในการใชเทคโนโลยสารสนเทศในการสรางงาน 7. เขาใจโครงสรางภาษาคอมพวเตอรระดบต าส าหรบการเขยนเวบ 8. บอกวธการเขยนเวบเพจดวยภาษา HTML 9. วางแผนเลอกใชเทคโนโลยไดเหมาะสมกบงาน 10. ใชเทคโนโลยในการท างาน การผลต การออกแบบ การแกปญหา การสรางงาน การสราง อาชพสจรตอยางมความเขาใจมการวางแผนเชงกลยทธ และมความคดสรางสรรค

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

13. เขาใจกระบวนการอพโหลดเวบ และสามารถใชโปรแกรมน าเสนอเวบไซตได สาระการเรยนร หนวยท 1 ความหมาย บทบาทและแนวโนมของเทคโนโลยอนเตอรเนต หนวยท 2 เวบเพจ เวบไซต และโครงสรางเวบฯ หนวยท 3 ขอควรรกอนเปนเวบมาสเตอรและจรรยาบรรณของผท าเวบ หนวยท 4 สนกกบ HTML หนวยท 5 สรางเวบไซตดวย Dreamweaver หนวยท 6 เปนเจาของเวบไซตบนโลกอนเตอรเนต จดประสงคการเรยนร

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

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

วเคราะหแนวโนมของเทคโนโลยสารสนเทศสมยใหมได

สามารถวเคราะหแนวโนมของเทคโนโลยสารสนเทศสมยใหมได

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

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

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

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

หนวยท 3 บอกหลกการ ขอก าหนดเกยวกบการออกแบบและจดท าเวบไซต

เขาใจหลกการ ขอก าหนดเกยวกบการออกแบบและจดท าเวบไซต

บอกคณคาและความส าคญของจรยธรรมในการใชเทคโนโลยสารสนเทศในการสรางงาน

มจรยธรรมในการใชเทคโนโลยสารสนเทศในการสรางงาน

หนวยท 4 บอกโครงสรางภาษาคอมพวเตอรระดบต าส าหรบการเขยนเวบ

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

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

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

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

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

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

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

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

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

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

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

จ านวนชวโมงทสอน

หนวยการเรยนร ชอหนวย จ านวนแผน ชวโมง หนวยท 1 ความหมาย บทบาทและแนวโนมของเทคโนโลยอนเตอรเนต 1 2 หนวยท 2 เวบเพจ เวบไซต และโครงสรางเวบฯ 2 4 หนวยท 3 ขอควรรกอนเปนเวบมาสเตอรและจรรยาบรรณของผท าเวบ 2 4 หนวยท 4 สนกกบ HTML 1 4 หนวยท 5 สรางเวบไซตดวย Dreamweaver 1 20 หนวยท 6 เปนเจาของเวบไซตบนโลกอนเตอรเนต 1 2

รวม 8 36

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

รายวชา การเขยนเวบไซต ประจ าภาคเรยนท 1ปการศกษา 2551 กลมสาระการเรยนร การงานอาชพและเทคโนโลย ระดบชน มธยมศกษาปท 4 …………………………………………………………………………………………………………. มาตรฐานการเรยนร

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

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

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

หนวยการเรยนรท 1 แผนการจดการเรยนรท 1

ความหมาย บทบาทและแนวโนมของเทคโนโลยอนเตอรเนต

รายวชา การเขยนเวบไซต ประจ าภาคเรยนท 1ปการศกษา 2551 กลมสาระการเรยนร การงานอาชพและเทคโนโลย ระดบชน มธยมศกษาปท 4 …………………………………………………………………………………………………………. จดประสงคน าทาง

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

เนอหาสาระ - ความหมายของค าวา “อนเตอรเนต” - บทบาทของเทคโนโลยอนเตอรเนตในปจจบน - เทคโนโลยสมยใหมตาง ๆ ทเกดขนในปจจบน ในรปแบบสออนเตอรเนต - บอกผลกระทบของเทคโนโลยอนเตอรเนตทมผลตอชวตประจ าวน - ปญหาทเกดจากอนเตอรเนต - แนวทางการแกปญหาทเกดขนจากการใชเทคโนโลยอนเตอรเนต การจดกระบวนการเรยนร ขนเตรยมหรอขนน าเขาสบทเรยน

1. ครแจงจดประสงคการเรยนร และวธการเรยนร แลวทดสอบกอนเรยนและแนะน าเวบไซตประกอบการเรยนรายวชานคอ http://www.puibuble.th.gs และอเมลผสอนคอ [email protected]

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

3. ครอธบายเกยวกบ อนเตอรเนต และแนวโนมเทคโนโลยในอนาคต นกเรยนจดบนทกบทเรยน ในชวโมงท 1 พรอมอธบายบทเรยนในรปแบบ PowerPoint

4. ครใชวธสอนแบบ KWL ในการจดการเรยนรชวโมงท 2 “วเคราะหแนวโนมของเทคโนโลยสารสนเทศสมยใหมในโลกอนเตอรเนต” 3 ขนตอน ดงน

ขนท 1 นกเรยนชวยกนระดมสมองเพอจ าแนกแยกแยะเทคโนโลยสมยใหมในโลกอนเตอรเนตทนาสนใจโดยการยกตวอยางจากทเคยรจกมากอนแลว (Know)

ขนท 2 นกเรยนชวยกนระดมสมองเพอจ าแนกแยกแยะเทคโนโลยสมยใหมในโลกอนเตอรเนตทนาสนใจโดยการยกตวอยางจากทตองการเรยนร (What you want know more)

ขนท 3 ครและนกเรยนชวยกนคนหาวธการเรยนรถงความกาวหนาของเทคโนโลยทางอนเตอรเนตทงในปจจบนและอนาคต (How to learn) โดยครจะท าการแจกใบความรท 1 เรอง อนเตอรเนตกบแนวโนมเทคโนโลยในอนาคต และตวอยางบนเวบไซตใหนกเรยนชม คอ http://pioneer.chula.ac.th/~ssukunya/nursinginfor/document/internet/sld029.htm

5. นกเรยนสรปความรจากการอานใบความรท 1 แลวใหนกเรยนเขยนลงสมดบนทก 6. ครตรวจผลการสรปโดยตรวจจากสมดนกเรยน 7. ทดสอบหลงเรยน

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

สรป เนอหาบทเรยน สอและแหลงการเรยนร (มจ านวนเทากบจ านวนนกเรยน)

- ใบความรท 1 เรอง อนเตอรเนตกบแนวโนมเทคโนโลยในอนาคต - ใบงานท 1 การวเคราะหแนวโนมเทคโนโลยทางอนเตอรเนตในอนาคต แบบ KWL - ตวอยางเวบไซตทมขอมลเกยวกบเทคโนโลยทางอนเตอรเนต - เวบไซตประกอบการเรยนร http://www.puibuble.th.gs - ชนงานน าเสนอบทเรยน (PowerPoint) และ แบบทดสอบกอนเรยนและหลงเรยน

กระบวนการวดและประเมนผล (มจ านวนเทากบจ านวนนกเรยน) วธวดผล

- ตรวจผลงานจากความตงใจขณะอยภายในสงคมหองเรยน - การใหความรวมมอในการแสดงความคดเหน - การท าแบบทดสอบ และท าใบงาน และการจดบนทก

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

เกณฑการประเมน - คะแนนแบบทดสอบกอนเรยนและหลงเรยน

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

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

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

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

ชอของระบบดงกลาวคอ "ดาตากรด" (DATAGRID) ไดรบการกอตงขนโดย Cern ซงเปนสถาบนวจย และหองแลป ดานฟสกสทใหญทสดในโลก ตงอยทกรงเจนวา ประเทศสวสเซอรแลนด จากแนวความคดหลกของ CERN นน CERN จะเปนเครองมอในการวเคราะหการเดนทางภายในเครอขาย และคอยตรวจจบหรอรายงานเหตการณ ทผดปกตบนเครอขาย สวนจดมงหมายของโครงการนคอการสรางระบบคอมพวเตอรใหมความสามารถจดการ ขอมลปรมาณมาก ๆ ได เพราะเชอวาในอนาคตการใชอนเตอรเนตทเพมมากขน ไมวาจะเปนสบคนขอมล การท าธรกรรม การใชอเมล ฯลฯ ผานทางระบบอนเตอรเนตจะท าใหเกดการขนสงขอมลในปรมาณมหาศาล วงไปมาอยบนระบบเครอขาย และหากไมมระบบประมวลผลระดบสงมารองรบจะท าใหเกดการตดขด หรอเกด ความเสยหายตอขอมลตาง ๆ เหลานนได อนเตอรเนตในอนาคต

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

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

ซงระบบเครอขาย "DATAGRID" ของ Cern นนสามารถรองรบปรมาณขอมลไดในระดบเพตตะไบต (Petabytes) เลยทเดยว ทงนทงนนมนเกดมาเพอรองรบและปองกนสงทผเชยวชาญเรยกวา "Large Hadron Collider" หรอ LHC หรอการชนกนของขอมลขนาดใหญ หรอทรจกกนดกบชอทฤษฎบกแบงค (Big Bang) ทเกดจากการชนกนของ โปรตอนอยางรนแรงจนท าใหเกดพลงงานมหาศาลนนเอง

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

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

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

ในชวงแรกจะด าเนนการทดสอบกบสถาบนวจยใน 12 ประเทศกอน ซงทง 12 ประเทศนนไดแก องกฤษ สหรฐอเมรกา สวสเซอรแลนด สาธารธรฐเชค ฝรงเศส เยอรมน ฮงการ อตาล ญป น รสเซย สเปน และไตหวน สงเกตวาเปนชาตในทวปยโรปเสยเปนสวนใหญ นนเปนเพราะโครงการนรเรมโดยกลมสหภาพยโรปนนเอง และเมดเงนทสนบสนนกมาจากชาตในยโรปเปนผสนบสนนหลก

เปาหมายสงสดของ DATAGRID กคอการสรางระบบเครอขายททรงประสทธภาพสงสดเขาไวในทเดยว ในระยะยาวมผท านายไววาเทคโนโลย DATAGRID จะกอใหเกดการเปลยนแปลงอยางใหญหลวงตอโลก คอมพวเตอร เพราะวาเปาหมายสดทายของ DATAGRID คอการเปนศนยกลางของคอมพวเตอรทวโลก ขอมลเพมเตม โครงการ DATAGRID ไดเซนสญญาครงแรกในวนท 29 ธนวาคม 2000 และไดรบเงนสนบสนนจาก สหภาพยโรปจ านวน 9.8 ลานเหรยญยโร เปนระยะเวลา 3 ป โดยม CERN เปนหวเรยวหวแรงในการพฒนา

โดย ผจดการออนไลน

ใบงานท 1 1. ใหนกเรยนยกตวอยางเทคโนโลยสมยใหมในโลกอนเตอรเนตทนาสนใจจากทเคยรจกมากอนโดยแยกเปนประเภทตามเหมาะสม .................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................. ......................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................... 2. นกเรยนบอกถงเทคโนโลยสมยใหมในโลกอนเตอรเนตทนาสนใจจากทตองการเรยนร โดยแยกเปนประเภทตามเหมาะสม .................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................. 3 ใหนกเรยนคนหาวธการเรยนรถงความกาวหนาของเทคโนโลยทางอนเตอรเนตทงในปจจบนและอนาคต ตามหวขอไดก าหนดในขอ 1 และ ขอ 2 โดยพจารณารวมกบใบความรท 1 เรอง อนเตอรเนตกบแนวโนมเทคโนโลยในอนาคต และตวอยางบนเวบไซตใหนกเรยนชม คอ http://pioneer.chula.ac.th/~ssukunya/nursinginfor/document/internet/sld029.htm ..................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................

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

ใหนกเรยนเลอกตอบค ำตอบทคดวำถกตองทสด 1. หนวยงานใดในประเทศไทยทเปนผพฒนาอนเตอรเนตเปนหนวยงานแรก ก. Nectec ข. Thaigoodview ค. จฬาลงกรณ ง. รฐบาลไทย 2. อนเตอรเนต เปนการพฒนามาจากหนวยงานใด

ก.โรงพยาบาล ข. รฐบาลไทย ค. กระทรวงกลาโหมของสหรฐอเมรกา ง. กระทรวงศกษาธการ

3. อนเตอรเนต พฒนามาตงแตปพ.ศ.ใด ก. 2500 ข. 2501 ค. 2502 ง. 2503 4. อนเตอรเนต ยอมาจากภาษาองกฤษชอเตมวาอยางไร ก. Internet Network ข. Internation Network ค. InternetWork Connection ง. Interconnection Network 5. อนเตอรเนตเกดขนครงแรกในประเทศไทย เมอป พ.ศ.ใด ก. 2530 ข. 2525 ค. 2527 ง. 2529 6. เครอขายคอมพวเตอรเครอขายแรก มชอวาอยางไร ก. อารพาเนต ข. อาคาเนต ค. อาสาเนต ง. ปาปาเนต 7. ปจจบนอนเตอรเนตน ามาใชในชวตประจ าวนในดานใดบาง ก. การตดตอสอสาร ข. ความบนเทง ค. การท าธรกรรม ง. ถกทกขอ 8. บรการใดทจดวาเปนการบรการเกยวกบดานเวบไซต ก. Telnet ข. Use Net ค. WWW. ง. FTP 9. บรการใดทจดวาเปนการบรการโอนถายขอมล ก. Telnet ข. Use Net ค. WWW. ง. FTP 10. บรการใดทจดวาเปนการท างานขามเครอง ก. Telnet ข. Use Net ค. WWW. ง. FTP เฉลย 1. ค 2. ค 3. ง 4. ง. 5. ก. 6. ก. 7. ง. 8. ค. 9. ง. 10. ก.

แบบทดสอบหลงเรยนหนวยท 1

ความหมาย บทบาทและแนวโนมของเทคโนโลยอนเตอรเนต 1. ระบบเครอขายคอมพวเตอรหมายถงอะไร ก. ระบบทมการน าคอมพวเตอรมาใชประโยชนรวมกบอปกรณตาง ๆ เชนแสกนเนอร เครองพมพ เปนตน ข. ระบบทมการน าคอมพวเตอรตงแต 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. ปจจบนอนเตอรเนตเขามามบทบาทในชวตของคนไทยอยางไร นกเรยนคดวามขอด และขอเสยอยางไร(ใหนกเรยนอธบายอยางละเอยด) หมายเหต

- พมพใสกระดาษเอ4 (เขยนชอนามสกล หองมมขวา) - พมพใสWord เซฟมาสง - สงอเมลแบบแนบไฟลมาท [email protected]

ใหนกเรยนเลอกวธใดวธหนงในการสงงานเทานน

เฉลย 1. ข. 2. ข. 3. ข. 4.ง. 5. ก.

ตอน 2 1. Internet คอระบบเครอขายคอมพวเตอรทเชอมโยงกนทวโลก 2. FTP คอบรการโอนถายขอมลบนเครอขายอนเตอรเนต 3. Telnet คอบรการใชงานขามเครอง 4. Usenet คอบรการกลมขาวทนาสนใจเชน กระดานสนทนา 5. WWW. คอบรการเครอขายใยแมงมมบนอนเตอรเนตทใหบรการในรปแบบเวบไซต 6. Chat คอบรการสนทนาบนเครอขายอนเตอรเนต เชน MSN Chat 7. E-Learning คอการเรยนรตาง ๆ ผานเครอขายอนเตอรเนตโดยมระบบแบบแผน

หนวยการเรยนรท 2 เวบเพจ เวบไซต และโครงสรางเวบฯ

รายวชา การเขยนเวบไซต ประจ าภาคเรยนท 1ปการศกษา 2551 กลมสาระการเรยนร การงานอาชพและเทคโนโลย ระดบชน มธยมศกษาปท 4 …………………………………………………………………………………………………………. มาตรฐานการเรยนร มาตรฐานท 4.1 ขอ 4 เขาใจขอก าหนดของคอมพวเตอรและอปกรณทเกยวของ ขอ 5 จดเกบและบ ารงรกษาสารสนเทศใหถกตองและเปนปจจบนอยเสมอ

ผลการเรยนรทคาดหวง

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

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

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


ความหมายของเวบเพจ และเวบไซต


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

1. ครแจงจดประสงคการเรยนร และวธการเรยนร แลวทดสอบกอนเรยน 2. นกเรยนรวมแสดงความรเดมเพอพจารณาความหมายของค าวา “เวบเพจ” และ

“เวบไซต” และรวมกนแสดงความคดเหนถงขอแตกตางของค าวา “เวบเพจ” และ “เวบไซต” ขนสอน

3. ครอธบายเกยวกบ ความหมายของค าวา “เวบเพจ” และ “เวบไซต” และขอแตกตางของค าวา “เวบเพจ” และ “เวบไซต” พรอมนกเรยนจดบนทกบทเรยน พรอมอธบายบทเรยนในรปแบบ PowerPoint

4. ครแจกใบความรท 2 เรอง เวบเพจ และเวบไซต 5. นกเรยนสรปความรจากการอานใบความรท 2 แลวใหนกเรยนเขยนลงสมดบนทก 6. นกเรยนรบใบงานท 2 แลวลงมอท า 7. ครตรวจผลการสรปโดยตรวจจากสมดนกเรยน และใบงานท 2


สรปเนอหาบทเรยน

สอและแหลงการเรยนร (มจ านวนเทากบจ านวนนกเรยน)

- ใบความรท 2 เรอง เวบเพจ และเวบไซต - ชนงานน าเสนอบทเรยน (PowerPoint) - เวบไซตประกอบการเรยนร http://www.puibuble.th.gs - ใบงานท 2

กระบวนการวดและประเมนผล (มจ านวนเทากบจ านวนนกเรยน)

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

เครองมอวด - ใบงานท 2

เกณฑการประเมน - คะแนนแบบทดสอบกอนเรยนและหลงเรยน 1-3 คะแนน กลมต า 4-6 คะแนน กลมปานกลาง 7-10 คะแนน กลมสง

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

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

โฮมเพจ คอค าทใชเรยกหนาแรกของเวปไซต ซงประกอบไปดวยเมนตางๆและเรองราวตางๆมากมายคลายกบหนาปกนตรสารบานเรา ดงนนหากเราออกแบบหนาโฮมเพจใหสวยงามและนาสนใจ โอกาสทผชทจะแวะเขามาเยยมเยยนโฮมเพจของเรากจะยงมากตามไปดวย เวบเพจ (Web Page) เวบเพจ คอ ค าทใชเรยกหนาเอกสารตางๆ ทอยในรปแบบไฟล HTML (Hyper Text Markup Language) เปรยบเสมอนหนากระดาษแตละหนาทมเรองราวตางๆมากมายบรรจอยในนตรสาร แตแตกตางกนตรงทมการเชอมโยง (Link) ซงเราสามารถคลกไปทหนาใดของโฮมเพจกได เวบไซต (Web Site) เวบไซต คอ ค าทใชเรยกกลมของเวบเพจ (ดงนนภายในเวบไซตจะประกอบไปดวยโฮมเพจและเวบเพจ) โดยเรามกใชเรยกเวบทมขนาดใหญและมการจดทะเบยนชอเวบไซตนนๆไวแลว (Domain Name) เชน http://www.geocities.com , http://www.sanook.com , http://www.yahoo.com เปนตน เราสามารถสรางโฮมเพจดวยวธการอยางไรบาง ในการสรางโฮมเพจนนมอยหลายวธดวยกน โดยแตละวธการกมความยากงายแตกตางกนไป สามารถแบงวธการสรางโฮมเพจออกเปน 3 วธใหญๆ ดงน 1.สรางโฮมเพจดวยโปรแกรมของ Web Hosting Web Hosting คอเวบไซตทท าหนาทใหบรการจดเกบขอมล โดยบางเวบไซตนนมการใหบรการ สรางโฮมเพจส าเรจรปใหแกผทตองการสรางโฮมเพจแบบงายๆ โดยการคลกเลอกรปแบบของโฮมเพจจากรปแบบททางเวบไซตก าหนดให จากนนกกรอกรายละเอยดตางๆตามแบบฟอรม เพยงเทานเรากจะสามารถสรางโฮมเพจในรปแบบงายๆไดตามตองการ แตการสรางโฮมเพจดวยโปรแกรมของ Web Hosting น กมขอเสย คอ มรปแบบใหเลอกนอยและไมสามารถออกแบบลกษณะของโฮมเพจไดตามตองการ 2. ใชโปรแกรมส าหรบสรางเวบไซต ปจจบนไดมการพฒนาโปรแกรมทใชในการสรางเวบไซตกนอยางมากมาย เชน FrontPage , GoLive และ HomeSite เปนตน แตโปรแกรมสรางเวบไซตทนยมใชกนมากทสด กคงจะหนไมพนโปรแกรม Dreamweaver Dreamweaver เปนโปรแกรมทใชงานงายและไมจ าเปนตองมความรในเรองของภาษา HTML ถงแมวธการสรางโฮมเพจนนอาจจะไมงายดายเทาการสรางโฮมเพจดวยเวบ Hosting แตเรากจะสามารถออกแบบความสวยงามของโฮมเจไดตามตองการ 3. การใชภาษา HTML และ JavaScript

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

ใบงานท 2 เวบเพจ เวบไซตและโครงสรางเวบฯ

1. เวบเพจคอ......................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................... ...................................................................................................................................................................................................................................................................................................................................... 2. เวบไซตคอ ......................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................... ...................................................................................................................................................................................................................................................................................................................................... 3. ความแตกตางระหวางเวบเพจและเวบไซต ......................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................... ...................................................................................................................................................................................................................................................................................................................................... ......................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................... ………………………………………………………………………………………………………… ………………………………………………………………………………………………………… …………………………………………………………………………………………………………


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


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

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

แลวรวมกนวเคราะหถงองคประกอบของโครงสรางเวบ ขนสอน

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




- ใบความรท 3 เรอง โครงสรางเวบฯ - ชนงานน าเสนอบทเรยน (PowerPoint) - ใบงานท 3 - แบบประเมนการท างานเปนกลม

- เวบไซตประกอบการเรยนร http://www.puibuble.th.gs - ตวอยางเวบไซตทใชเรยนรเกยวกบดานโครงสรางเวบฯ


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

เครองมอวด - แบบประเมนการท างานแบบกลม

เกณฑการประเมน - คะแนนแบบทดสอบหลงเรยน คะแนนการประเมนการท างานแบบกลม 0 – 50 คะแนน ไมผาน 51 – 100 คะแนน ผาน

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

ใบงานท 3 เรอง การออกแบบโครงสรางเวบ

กลมท............จ านวนสมาชกในกลม...............คน ชน...................วน/เดอน/ป............................

1. ชอ ......................................................................... เลขท ....................... 2. ชอ ......................................................................... เลขท .......................

จดประสงค

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

ค าชแจง

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

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

ในอดมคตของตนเองใหถกตองและสวยงานทสด 4. บนทกขอมลลงในสอบนทก

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

รายการประเมน

ระดบคณภาพ ตองปรบปรง (1 คะแนน)

พอใช (2 คะแนน)

ด (3 คะแนน)

ดมาก (4 คะแนน)

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

5. ความสวยงามและสดสวน 4. การสรปความหมาย การประเมนนสยการท างาน 1. ความรบผดชอบและเอาใจใส 2. การท างานรวมกบผอน 3. ความซอสตย 4. ความอดทน 5. ความประหยด ผประเมน .............................................................................. วนท ............เดอน ...................................พ.ศ. ...............

ใบความรท 3 โครงสรางเวบไซต สวนประกอบส าคญ ๆ ในหนาโฮมเพจ ในหนาโฮมเพจ (หนาเเรกของเวบไซต) นนควรมสวนประกอบส าคญ ๆ อยางครบถวน เพอใหผชมสามารถเขามาใชงานไดสะดวก ซงหนาโฮมเพจสวนใหญมกมสวนประกอบทส าคญ ดงน 1.โลโก ( Logo) สงส าคญทจะชวยใหผเขาเวบจดจ าเวบไซตขอฃเราไดกคอ “โลโก” นอกจากนเเลวโลโกยงชวยใหเวบไซตขอฃเราดมเอกลกษณอกดวย โดยรานยมวางต าเเหนงโลโกไวทมมบนซายเพราะเปนจดทสามารถสงเกตไดงาย ซงจากการวจยพบวาวางต าเเหนงโลโกทมมบนซายนนชวยใหผชมสามารถจดจ าเวบไซตของเราไดถง 84% เลยทเดยว คณคาของการวางต าแหนงโลโก บนซาย (Upper Left) = 84% บนขวา (Upper Right) = 6% บนกลาง (Upper Center) = 6% ทอน ๆ (Other Position) = 4% จะสงเกตไดวาการออกแบบโลโกของเเตละเวบไซตนจะไมซบซอนมากนน แตจะเนนไปในทางดานการออกแบบใหเรยบงายและสามารถอานชอเวบไซตไดชดเจนมากกวา เนอฃจากใชภาพโลโกทซบซอนอาจสงผลใหผเขาชมไมสามารถจดจ าชอเวบไซตของเราไดนนเอง 2.เมนหลก (Link Menu) เมนหลกเปนจดเชอมโยงสงส าคญ ๆ ทรวบรวมไวในรปแบบของเมนปมหรอขอความ โดยผเขาชมจะสามารถรบรไดวาภายในเวบไซตนมเรองราวทนาสนใจอยางไรบาง เชน News (ขาวใหม ๆ) ,Shoooing และLink (เชอมโยงเวบทเกยวของ) เปนตน รปแบบของเมนหลกทนยมใชกนมกเปนเมนแบบแนวตงและเมนแบบแนวนอนตามล าดบ 3.โฆษณา (Banner) โฆษณานนเปนสวนทส าคญอกเชนเดยวกน เพราะเวบไซตทมโฆษณาจะชวยสงเสรมภาพลกษณ ความนาเชอถอ และชวยกระตนความสนใจเพราะมกมการใชภาพเคลอนไหว (Gif animation) ประกอบซงจะท าใหเวบไซตของเราดตนตาตนใจมากยงขน จากการวจยพบวาภาพเคลอนไหวยงชวยใหเวบไซตของเราดนาสนใจมากยงขน 30% เลยทเดยว นอกจากนแลวยงสามารถเเสดงถงความนยมของผเขาชมไดอกดวย แตกไมควรใหมโฆษณามากเกนไปและควรจดวางต าเเหนงใหเหมาะสมดวย 4.ภาพประกอบเเละเนอหา (Content) เนอหาสาระทนารเปนสวนส าคญอยางยงทจะท าใหผเขาชมอยากจะเขาเยยมชมเวบไซตของเรามากขนเเละใชบรการอยางสม าเสมอ เราจงควรอพเดจเนอหาใหใหมสด มรปเเบบการจดวางทอานงาย เนอหาไมยาวหรอสนจนเกนไป นอกจากนหากเราใชภาพประกอบทสวยงามกจะชวยใหเนอหาดดงดดใจมากยงขน ซงการใชภาพประกอบทสวยงามและฟอนตทอานงายจะชวยใหเนอหาของเรานาสนใจเพมมากยงขนถง 40-45% การเเบงพนทการใชงานในหนาโฮมเพจ หลงจากทเราไดรจกกบสวนประกอบส าคญ ๆ ในหนาโฮมเพจเเลว ผอานหลายทานจะเรมสงสยวาในเมอมสวนประกอบมากมายขนาดนเราควรจะจดวางต าแหนงอยางไรด ตวอยางขางลางนเปนตวอยางหนงทนยมใชกนมากในการจดวางหนาโฮมเพจ

เรามกพบเหนการเเบงพนทในรปเเบบ 3 สวน และ 2 สวน การใชงานกบเวบไซตขององกรและเวบไซตทมขนาดใหญ เนองจากเปนรปแบบทใชงานงาย และมการแบงสดสวนอยางชดเจน เชน www.siemens.com, www.msn.com, www.sanook.com

ส าหรบรปเเบบการเเบงพนท 1 สวนหรอเเบบอสระนน เรามกพบเหนกบเวบไซตทเนนการออกแบบใหสวยงานมากกวาเนนการใชงาน และมกมการออกแบบทสลบซบซอน เชน www.qooclup.com, www.rustboy.com, www.hardldbelker.com ท าอยางไรใหโฮมเพจดด ในความเปนจรงแลวการออกเเบบเวบไซตไมไดมรปเเบบทตายตวและเเนนนอนเเตกมองคประกอบหลายอยางทจะชวยใหเวบไซตเราดดเเละนาใช ผเขยนจงมขอเเนะน าและวธการงาย ๆ ทจะชวยใหโฮมเพจของคณดดขน 1. เลอกใชสใหเหมาะสม การเลอกใชสนนมผลอยางมากในภาพรวมของเวบไซต เนองจากสเเตละสนนมผลตออารมณเเละความรสกกบผทเขามาใชบรการ ดงนนเราจงควรเลอกใชสใหเหมาะสมกบเวบไซต โดยเเตละประเภทของสนนจะใหความหมายและความรสกทตาง ๆ กนน สฟา เปนสของทองฟาจงชวยใหเรารสกปลอดโปรงโลงสบาย สฟานนเปนสทดแลวสบายตาและนอกจากนยงรสกนมนวลและสขสบายอกดวย สน าเงน ใหความรสกถงความจรงจง มงคงและจรงจง สงบและปลอดภย นอกจากนแลวยงให ความรสกหรหรา มระดบ มราคาและความเปนชายอกดวย สเขยว สเขยวเปนสของตนไมใบหญาท าใหเรารสกสดชนเยนสบายเเละชวนใหนกถงความเปนธรรมชาต สเขยวนนเปนสทสบายตามากทสดสหนง สเเดง ใหความรสกรอนเเรง ความรนแรงความมพลงและความตนเตนสนกสนานนอกจากนเเลวเปนสมงคลของคนจนอกดวย สเหลองและสสม สเหลองนนใหอารมณสดใสเเละดงดดสายตาเเตบางครงอาจท าใหรสกเหนอย สวนสสมนนท าใหความรสกอบอนกระตอรอรนและนอกจากนแลวยงดทนสมยอกดวย สเทา ใหความรสกสภาพสขม สงบ เเละมนคง และยงใหความรสกหมอนหมอง และโศกเศราอกดวย สขาว ใหความรสกเรยบงาย สะอาดสะอาน โลงสบายและบรสทธ 2.มความเปนเอกลกษณ เราสามารถออกเเบบเวบไซตใหมความเปนเอกลกษณยางงาย ๆ ดวยการเลอกใชสฟอนตและภาพประกอบทมความคลายคลงกนทก ๆ หนาของเวบไซ๖ เนองจากเวบไซตทมเอกลกษณมกท าใหผใชจดจ าไดงาย นอกจากนยงมจดสนใจอน ๆ เปนสวนประกอบอก เชน โลโก ส เเละ ความคลายคลงกน 3.ตองสามารถใชงานไดอยางเหมาะสม หากเวบไซตของคณนนมการใชงานทสลบซบซอนจนเกนไปอาจมผลท าใหผทมาใชบรการหงดหงดร าคาญใจไดและท าใหไมอยากกลบมาใชบรการทเวบไซตของเราอกโดยเฉพาะหากเวบไซตของคณเปนเวบไซตเพอการบรการซอขายแลวละกจะยงเปนผลเสยอยางมากในการสงซอสนคาและใชบรการ

4.สามารถแสดงผลไดอยางรวดเรว ในการออกแบบหนาโฮมเพจนนนอกจากจะเนนหนาตาทนาสนใจแลว การแสดงผลทรวดเรวกจะท าใหเวบไซตไมนาเบอ ดงนนการใชภาพหรอกราฟกประกอบจงควรค านงถงเรองระยะเวลาในการแสดงผลเวบไซตดวย เนองจากยงมภาพประกอบมากเวลาในการแสดงผลกจะยงมากดวยไปดวย นอกจากหวขอตาง ๆ ทกลาวมาแลวลกษณะของตวอกษรทใชประกอบกเปนสวนส าคญอกอยางหนงทจะชวยใหโฮมเพจของเราดทนสมย นาเชอถอหรอสนกสนานมากยงขน เนองจากตวหนงสอแตละลกษณะนนจะใหความรสกแตกตางกนไป ตวหนงสอแบบ Serif (มเชง) ใหความรสกของความคลาสสค ดเกาแก และคอนขางเปนทางการ ตวหนงสอแบบ San Serif (ไมมเชง) ใหความรสกเรยบงาย มความทนสมยและนอกจากนแลวยงชวยใหอานงายอกดวย Script (ตวอกษรแบบลายมอ) ใหความรสกสนกสนานเปนกนเองและดไมเปนทางการ มกใชกบค าโฆษณาสน ๆ ตวอกษรแบบมหว มกใชกบบทความยาว ๆ เพราะชวยใหอานงาย เชน หนงสอเรยน แตในขณะเดยวกนกดโบราณ ตวอกษรแบบไมมหว ตวหนงสอแบบนคอนขางทจะอานยาก มกใชกบขอความสน ๆ แตกใหความรสกททนสมย ทงหมดนเปนเพยงพนฐานเลก ๆ นอย ๆ ทจะชวยใหคณสามารถเขาใจวธการงาย ๆ ในการออกแบบเพอทจะน าไปใชกบโฮมเพจของคณ โดยการศกษาหาความรในสงทตนเองสนใจเปนพเศษ การ ดตวอยางโฮมเพจอน ๆ และการฝกฝนการใชความคดสรางสรรค จากนนจงน ามาประยกตใช สงเหลานจะชวยใหคณสามารถออกแบบโฮมเพจไดอยางสรางสรรคและสวยงามมากขนนนเอง ขนตอนส าคญในการสรางโฮมเพจ ในการสรางโฮมเพจนนมขนตอนทสลบซบซอนพอสมควรแตกไมยากจนเกนไป ผเขยนจงขอเสนอแนวทางงาย ๆ ทจะท าใหเราสามารถสรางโฮมเพจไดอยางเปนขนตอนและมความเขาใจในการสรางโฮมเพจมากขนดงวธการตอไปน 1.ขอพนทโฮมเพจจาก Web Hosting ในการขอพนทโฮมเพจเราจะตองเลอก Web Hosting เสยกอน โดยการเปรยบเทยบขอดขอเสยตาง ๆ รวมถงขนาดของพนทใหบรการดวย จากนนจงลงทะเบยนขอพนทโฮมเพจ (ผอานควรคดลกษณะและชอโฮมเพจทตองการสรางไวในใจเสยกอนเพอใหลกษณะของโฮมเพจและชอทตงสมพนธกน) 2.ก าหนดลกษณะของโฮมเพจ เมอเราขอพนทโฮมเพจแลว ขนตอนตอไปคอ การก าหนดลกษณะโฮมเพจของเรา โดยในตอนนเราตองคดและตดสนใจวาเราาจะสรางโฮมเพจเกยวกบอะไรด มลกษณะโทนสอะไร และใครจะเขามาเยยมชมในโฮมเพจของเราบาง เมอตดสนใจไดแลวกจะเขาสขนตอนตอไป 3.ออกแบบหนาโฮมเพจดวย Photoshop ในขนตอนนเราจะตองมภาพของหนาโฮมเพจลาง ๆ ไวในใจแลววาจะมลกษณะอยางไร มสวนประกอบอะไรบาง จากนนเราจงมาเรมตนออกแบบและสรางสวนประกอบตาง ๆ ในหนาโฮมเพจ ซงผเขยนจะไดอธบายรายละเอยดเพมเตมในตอนตอไป

4.สรางโฮมเพจใหสมบรณดวย Dreamweaver MX เมอเราไดออกแบบสวนประกอบตาง ๆ ของหนาโฮมเพจดวยโปรแกรม Photoshop เสรจเรยบรอยแลว ตอไปเราจะเขาสการสรางโฮมเพจดวยโปรแกรม Dreamweaver MX เพอใหไดโฮมเพจทสมบรณซงเรากจะไดเรยนรในตอนตอไปเชนกน 5.อพโหลดโฮมเพจขนอนเตอรเนต เมอเราสรางโฮมเพจเรยบรอยแลวกจะเขาสกระบวนการอพโหลดโฮมเพจเขาส Web Hosting ทเราไดขอพนทโฮมเพจไวเรยบรอยแลวดวยโปรแกรม Cute_FTP หรอโปรแกรมททาง เวบไซตมใหบรการขนโหลดขอมล เพยงเทานเรากจะสามารถสรางโฮมเพจไดอยางสมบรณแบบแลว

การสรางและออกแบบเวบ

กระบวนการในการสรางและออกแบบเวบจะมกระบวนการพนฐานอยดวยกน 5 ขนตอนคอ 1. การวางแผน (Planning) เปนขนตอนทผสรางเวบจะตองรวบรวมขอมลทตองการจะน า

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

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

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

3. การพฒนา (Development) เปนขนตอนทตอเนองจากการออกแบบและการสราง โดย เนนไปทการตกแตงและเสรมเครองมอตาง ๆ ส าหรบเวบ เชน การก าหนดส ภาพ การใช Flash ชวยใหเวบเราความสนใจ และเพมเตมเทคนคตาง ๆ ของโปรแกรมสนบสนนการสรางเวบ

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

5. การบ ารงรกษา (Maintenance) เปนขนตอนประเมนผลและตดตามผลการตดตงเวบไซต วามขอขดของหรอตองปรบปรงเปลยนแปลงเวบเพมเตมใหทนสมยอยเสมอ อาจจะเรยกไดวาขนตอนการอบเดท (Up date)

การก าหนดรปแบบเวบไซต (Web-site)

เวบไซต (Web-site) หมายถง เวบทประกอบดวยเวบเพจหลาย ๆ เวบเพจมารวมกน อยภายในพนทเดยวกนและเชอมโยงระหวางกนภายใตโดเมนเนมเดยวกน โดยมโฮมเพจเปนหนาแรกของเวบไซตท าหนาทเชอมโยงไปยงเวบเพจตาง ๆ

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

เวบเพจ (Web page) หมายถง เอกสารทสรางขนโดยในรปแบบของ HTML หรอโปรแกรมการสรางเวบโดยเฉพาะ จะแสดงผลไดเฉพาะโปรแกรมบราวเซอร และตองตดตงในเวบเซอรเวอรเพอเขาไปอานขอมลไดโดยผานระบบอนเทอรเนต เวบเพจจะม 2 ลกษณะใหญคอ

- เวบเพจแบบหนาเดยว (Single page) หรอแบบสน (Short page) หมายถง เวบเพจทแสดงผลขอมลหรอเนอหาเพยงหนาเดยวมขนาดเทากบหนาจอคอมพวเตอรพอด หรอมแถบเลอนลงมาดานลางสน ๆ หรอมรปแบบเปนกรอบพอดหนาจอภาพ

- เวบเพจแบบแถบเลอน (Scroll page) หรอแบบยาว (Long page) หมายถง เวบเพจทแสดงผลขอมลหรอเนอหาเปนแนวยาวจากดานบนลงมายงดานลางของหนาจอภาพ โดยมแถบเลอนอยดานขางส าหรบเลอนหนาจอภาพ เพอดขอมลทแสดงผลหนาจอภาพ

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

สงทตองพจารณาในการสรางเวบเพอการศกษาคอ โครงสรางหลกของเวบ เนองจากการจดการขอมลเพอการเรยนการสอนมความแตกตางกน กลมผเรยนทแตกตางและเนอหาของเวบแตกตางกน โครงสรางของเวบกจะมผลตอการเรยนการสอนเชนกน (McCormack and Jones, 1998) โครงสรางของเวบโดยพนฐานจะม 2 ลกษณะคอ

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

รปแสดง ลกษณะโครงสรางเวบแบบตน

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

โฮมเพจเวบไซต

เนอหาเวบไซต





โฮมเพจเวบไซต

หวเรองเวบไซต

หวเรองเวบไซต













องคประกอบทควรมในเวบเพจ

องคประกอบทวไป 1. ชอของเวบเพจ (Title) 2. ประวตและรปภาพผจดท า (Profile/Picture) 3. การเชอมโยงภายในและภายนอกเวบ (Links) 4. การแสดงทอยของเวบ : URL 5. วน/เวลาทสรางเวบ (Date/Time) 6. การปรบปรงครงลาสด (Update) 7. ผจดท าเวบ : (created by) 8. การสงวนลขสทธ (Copy right) 9. การตดตอผจดท าเวบ (contract /e-mail) 10. สถานทตดตอของเวบ (Address) 11. บราวเซอรทเหมาะสมส าหรบการชม (Browser )12. ขนาดหนาจอทเหมาะสมในการชม 13. ค าถามทถกถามบอย FAQ (Frequency Asked Question) 14. ความชวยเหลอ (Help)

องคประกอบพเศษ

1. สมดเยยม (Guest book) 2. ฝากขอความ (Web board) 3. กระดานขาว (Bulletin Board) 4. กระท 5. แบบส ารวจ (Web poll) 6. จ านวนผเขาชม (Counter) 7. หองสนทนา (Chat Room) 8. สถตทกประเภท (Web state) 9. เทคนคพเศษดวยโปรแกรมสครปต (Java script, VBscript , cgi,asp,php) 10. โปรแกรมพเศษสนบสนน (Download) 11. สไลดสรปบรรยาย (Presentation) องคประกอบเฉพาะส าหรบ E-learning 1. ค าอธบายรายวชา 2. วตถประสงครายวชา 3. คณสมบตของกลมผเรยน 4. การลงทะเบยน 5. ตารางเรยน 6. ผบรหารหลกสตร 7. กจกรรม 8. ขาวสาร/ประกาศ 9. ตารางสอน/ตารางเรยน 10. ปฏทนการศกษา 11. แผนภมแสดงโครงสรางรายวชา 12. สารบญเนอหา 13. เนอหารายละเอยด 14. แบบทดสอบกอนเรยน 15. แบบฝกหดระหวางเรยน 16. สรปสาระส าคญ 17. ขอสอบทายการเรยน 18. โครงสรางหลกสตร 19. บรรณานกรม/รายการอางอง 20. เวบไซตทเกยวของ

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


มาตรฐานท 4.1 ขอ 6 เขาใจหลกการและวธแกปญหาดวยกระบวนการทางเทคโนโลย สารสนเทศอยางมประสทธภาพและประสทธผล

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

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

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

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


ขอควรรกอนเปนเวบมาสเตอร


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

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

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

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

4. ครแจกใบความรท 4 เรอง ขอควรรกอนเปนเวบมาสเตอร 5. นกเรยนสรปความรจากการอานใบความรท 4 แลวใหนกเรยนเขยนลงสมดบนทก 6. ครตรวจผลการสรปโดยตรวจจากสมดนกเรยน




- ใบความรท 4 เรอง ขอควรรกอนเปนเวบมาสเตอร - ชนงานน าเสนอบทเรยน (PowerPoint) - เวบไซตประกอบการเรยนร http://www.puibuble.th.gs - ตวอยางเวบไซตทใหขอมลเกยวกบขอควรรกอนเปนเวบมาสเตอร


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

เครองมอวด - แบบทดสอบกอนเรยน/หลงเรยน

เกณฑการประเมน - คะแนนแบบทดสอบกอนเรยนและหลงเรยน 1-3 คะแนน กลมต า 4-6 คะแนน กลมปานกลาง 7-10 คะแนน กลมสง

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

ใบความรท 4 ขอควรรกอนเปนเวบมาสเตอร บญญต 10 ประการ เคยสงเกตบางไหมครบวา โฮมเพจใดทคณประทบใจเมอเขาไปเยยมชม แบบทเรวสด ๆ แบบทภาพแสนสวย แบบทมลกเลนเยอะ ๆ จนตองนงคอยกวา 5 นาท แบบไหนทท าใหคณตรงใจ อยกบทโดยไมคลกหนไปเสยกอน ถาคณคดจะท าเวบไซตใหตรงใจผชม แนนอนวา ผชมคนอน ๆ กมความรสกแบบเดยว กบคณนนแหละ อยากชมเวบไซตทสวยงามสะดดตา โหลดไดเรวสด ๆ มลกเลนแพรวพราว (เอาแตพองาม) มเนอหาสาระชวนตดตาม และแนนอนอยากเกบไวชมในวนหลง ( Add Bookmark ไว) เราจะท าไดไหมน ? การออกแบบเวบไซตอาจไมใชเรองยากส าหรบคนทมหวคดในทางสรางสรรคศลปะ แตการท าใหดน ตองอาศยเทคนคและการเรยนร บญญต 10 ประการ ในการออกแบบเวบเพจ ตอไปน จะใหค าแนะน าทมประโยชนในการออกแบบเวบไซตของคณ เพออวดสายตาแกผเลน อนเทอรเนตจากทวทกมมโลก ตองขอขอบคณผเขยนบทความน (คณทรงศกด ลมบรรจงมณ : Internet Magazine : April 1998) อยางยงครบ ทท าใหผมไดความร ทดลองท าตาม พบขอจ ากดตางๆ และน าเอามาเผยแพรขยายขอความตอ ณ ทน 1. ใชแบกกราวดสะอาด เรยบงาย ฟงดเปนเรองงาย แตลองทบทวนความจ าของคณดวา คณพบเหนเวบไซตมากมาย เทาไหร ทใชแบกกราวดทท าใหคณตองเพง ปรบความสวางของจอภาพ ฯลฯ เพอใหเหนตวอกษร ทซกซอนอยขางใน ปญหาของแบกกราวด คออะไร ขนาดทไมเหมาะสม มวธการมากมายในการสรางแบกกราวดแบบไรรอยตอ การใชภาพ มาเปนแบกกราวดมกจะมปญหาเรองรอยตอของภาพทไมเหมาะสม การใชภาพขนาดเลก เกนไปมาเรยงกนคณกจะไดฉากหลงทวนวาย ลายตา อานขอความไดยาก และยงใชเวลา ในการแสดงผลนานขน (เพราะเสยเวลาในการสรางภาพเรยงตอกน) อกปญหาหนงกคอ การแสดงผลของผสรางเวบเพจกบผชมตงไวไมเหมอนกน เชน คณสรางงานเพอแสดงผล บนขนาดจอ 640 x 480 pixels ภาพแบกกราวดของคณดพอดในเครอง แตผชมทเซท ความละเอยดท 800 x 600 จะเหนภาพขนาดเลก ๆ หลายภาพเรยงตอกน แตถาคณสราง งานทความละเอยด 1024 x 768 ผชมทดดวยความละเอยดต ากวาน กจะเหนภาพของคณ เพยงบางสวน หลกเลยงการใชลวดลาย ฟงดงายแตคณคงเหนจากเวบไซตตาง ๆ แลววาลวดลาย เหลานนท าใหคณตองเพงสายตาอยางมาก เพอจะอานมนใหเขาใจ เลอกสทเหมาะสม ลองคดถงตวอกษรสน าเงนบนพนสน าเงน ฟงดแปลก ๆ แตกมผท า แบบนกนมาก อาจดวยความพลงเผลอกได โดยเฉพาะสทเปลยนไปหลงการคลก Link พยายามใชสทดด สบายตา พนหลงและตวอกษรมสตดกนไมรนแรงนก หลกเลยงพนแดง อกษรเขยว พนสมอกษรน าเงน การใชสพนธรรมดาจะท าใหผชมดเวบของคณไดเรวกวา ใชภาพเปนฉากหลงมากครบ 2. คดกอนใชเอฟเฟกตตาง ๆ มเทคนคพเศษมากมายส าหรบการสรางภาพ แตอยาพยายามใชมนมากนก เพราะวา บางทผชมอาจคดวาก าลงมาดเวบไซตสยองขวญได การใหแสงและเงาแกภาพและตวอกษร ควร เปนไปในทศทางเดยวกน ไมขดแยงกน การใชเอฟเฟทคอน ๆ กเชนเดยวกน ควรใชแตนอย เพอ เสรมใหเกดความเดน แตไมแยงความส าคญของเนอหาไป เพราะบางเอฟเฟคทมผลตอความเรว ในการโหลดเวบเพจของคณเชนเดยวกน 3. ใชตวอกษรทคมชด ฟอนตหรอตวอกษรทมขอบขรขระเปนรอยหยกขนบนได เมอใชในโปรแกรมสรางภาพ เชน Photoshop สามารถแกไขไดโดยการเลอกออปชน Anti-Aliasing การเลอกฟอนตทแสดงใน เวบเพจ ควร

เลอกตวทมรปแบบครบทงตวปกต ตวหนา ตวเอยง ตวขดเสนใต จงจะสามารถสราง ความกลมกลนในหนาเวบเพจไดด 4. ออกแบบกราฟกใหมขนาดไฟลเลก ๆ ภาพกราฟกทจะน ามาใชในเวบเพจทงทไดจากการสแกน และสรางขนเองควรจะมขนาด เลกทสด และตรงตามจดประสงคทสด ใหคณจดจ ากฎสองขอนไวในใจ ขอแรก ทก ๆ ครงทคณออกแบบและสรางกราฟกส าหรบใชน าไปยงเนอหาสวนอน ๆ อยา ลมวาในบางกรณผชมหรอตวคณเองกคลกบนภาพโดยไมรอจนภาพแสดงอยางสมบรณ ดงนนอยาใชภาพกราฟกทซบซอนส าหรบอมเมจแมพ จ าไวเสมอวาทก ๆ ครงทคณสราง กราฟกส าหรบน าไปยงสวนอน ๆ หนาทของภาพคอ " การน าทาง" ดงนนภาพควรจะท า ความเขาใจไดงาย ขอสอง ส าหรบนกออกแบบเวบเพจบางคน ขนาดของไฟลอาจไมใชสงส าคญมากนกเพราะ เทคโนโลยมการพฒนาขนเสมอ ความเรวในการสงผานขอมลท าไดเรวขน แตนนกไมได หมายความวา การสงผานไฟลขนาดใหญเปนเรองปกต คณควรปรบปรงขนาดไฟลภาพ ของคณใหสามารถสงผานโมเดมทใชงานกนโดยทวไปไดอยางราบรน ( บางคนยงใชโมเดม 14.4 หรอ 28.8 อย) โดยไมท าใหคณภาพของภาพเสยไป และขนาดของไฟลทเลกลงกท า ใหคณบรหารหรอจดการกบไฟลตาง ๆ ไดงาย สะดวก และเรวขนอกดวย 5. ควบคมขนาดของเพจใหด เวบเพจของคณมขนาดกวาง x ยาวเทาไร และคณเคยทดสอบการแสดงผลบนเวบ บราวเซอรทตางคายกน ตางขนาดจอหรอไม ดงนนคณควรจะ เรยนรขอจ ากดของผชม อยาลมวาผเขาชมเวบไซตของคณนนอยกนทกมมโลก แตละคน มอสระในการก าหนดความละเอยดในการแสดงผล เลอกใชเวบบราวเซอรทเขาชอบ และ ประทบใจ วางรปแบบโครงรางทเหมาะสม การวางโครงรางของเนอหาดวยขนาดทใหญเกนไป ไม เพยงแตผชมจะเบอหนายตอการเลอนแถบเลอนไปมา แตอาจจะพลาดขอมลส าคญทคณ ตองการน าเสนอไปอยางนาเสยดาย เพราะอยในต าแหนงขอบทลนจอออกไป ออกแบบ "เฟรมทยดหยน" ซงสอดคลองกบการรบชม เมอคณใชเฟรมหรอตารางใน เวบเพจของคณ ควรก าหนดขนาดดวยคาเปอรเซนตแทนตวเลขคาคงท เพอใหยดหยน เหมาะสมกบการแสดงผลของแตละคน 6. วางแผนและออกแบบกอนลงมอสราง เมอคณคดจะออกแบบสรางเวบเพจ อยาวางแผนสรางเฉพาะหนาแรก แตใหวางแผน ตลอดทงไซต เพอใหมความผสมกลมกลนกน นอกจากนการเพมแผนทของไซต ( Site Map) ในกรณทเวบเพจของคณมความซบซอน ทงจ านวนไฟล HTML, ภาพ , โปรแกรม หรอสงอน ๆ เพอ ใหผชมสามารถท าความเขาใจกบโครงสรางเวบเพจของคณ และในทางกลบกนคณกจะบรหาร และจดการกบไซตของคณไดงายขนดวย 7. ชน าผชมดวยวธการงาย ๆ สงหนงทมความส าคญและคณไมควรลม นนคออยาลมจดประสงคในการสรางเวบไซต ของคณ และด าเนนการตามจดประสงคนน เชน การเลอกและวางรปแบบเนอหา ออกแบบกราฟก ส าหรบน าทางดวยวธการงาย ๆ และสอดคลองกบจดประสงค สงเหลานจะสรางความประทบใจ ใหกบผชมไดโดยงาย อยาท าใหเปนไซตแบบรวมมตรเลยครบ มสารพดสงตงแตสากกะเบอ ยนเรอรบ เพราะคนทหลงเขาไปจะไมมวนหวนกลบมาอก 8. อยาพยายามท าตวล าหนาเกนไป ผมไมไดตงหวขอผดนะครบ เทคโนโลยอาจเปนเพอนทดของคณ แตในขณะเดยวกน มนกหวนมาทมแทงคณได การออกแบบเวบไซตจงจ าเปนตองค านงถงขอจ ากดของผชมดวย

อยาสรางเวบไซตดวยเทคโนโลยล ายค ซงผคนสวนใหญไมอาจสมผสได การใช เทคโนโลยใหม ๆ เปนเรองทด แตนนไมใชทกสงทกอยางทคณตองท า คณตองนกถงคน สวนใหญทยงมเครองรนเกา เวบบราวเซอรทไมสามารถแสดงเทคโนโลยล ายคได เพราะ จดหมายของคณคอผชมจ านวนมากไมใชหรอ ทางทดควรเดนสายกลาง ฝกปฏบตและ เรยนรสงใหม ๆ เพอจะไดพรอมทจะเสนอเมอทกอยางลงตว ( เทคโนโลยอนเตอรเนต พฒนาเรวมาก การวงตามสงทเกดขนและยงไมเปนทยอมรบ อาจท าใหคณเสยเวลาโดย เปลาประโยชน) จากมนสมองและสองมอของคณ การกอบปภาพหรอเอกสารรปแบบ HTML ของคนอน ๆ มาใชทงดนนน แมคนอนอาจจะไมร และเจาของเดมกอาจจะไมถอสา แตแททจรงแลว วธการนไมถกตอง เพราะคณจะขาดความเขาใจและไมสามารถพฒนาตอไปได อยางไร กตามในอนเทอรเนตกมแหลงของฟรมากมาย ไมวาจะเปนไฟลตวอยาง HTML ภาพกราฟก แอพเพลต ฯลฯ วธนงาย สบายใจและไมผดอกดวยครบ และทส าคญสงทคณเลอกมานน มกจะมค าอธบายประกอบและใชงานไดอยางสมบรณดวย อกทงเวบไซตบางแหงยงใหค า ปรกษาแกคณอกดวย ด าเนนตามมาตรฐานสากล พยายามใชเทคโนโลยทเปนมาตรฐานสากลทผคนทวไปใช และปฏบต โดยเฉพาะจดกงกลางระหวางเวบบราวเซอรคายตาง ๆ ทยงไมเปนมาตรฐาน เดยวกน ( อยาคดท าหลาย ๆ เวอรชนใหผชมเลอกชม เพราะคณจะประสาทกนตอนทตอง ปรบปรงขอมล) 9. งาย ๆ แตจรงใจ เวบไซตบางคนเรยกโฮมเพจ ดงนนมนจงเหมอนกบเปนบานของคณ การทผชมเขามา ในเวบไซตหนาแรกแลวประทบใจ คณกมชยไปกวาครงแลว สรางความเชอถอ เชอมนใหเกดขน ในใจของผชม เหมอนกบคณปฏบตตอแขกทมาเยยมบาน นนคอน าเสนอขอมลทยดหยน ตรงไป ตรงมา เปนกนเอง จ าไววา ของด ๆ ไมจ าเปนตองยากเสมอไป อยากลวทจะเพมสงใหม ๆ ลง ในไซตของคณเปนชวง ๆ เพอเพมความนาสนใจกบผชม 10. อยาลมปรบปรงความสดใส การน าเสนอสงทนาสนใจ จะเปนการชกชวนใหผชมแวะเวยนกลบมาครงแลวครงเลา การแสดงวนทหรอจ านวนครงทปรบปรงกมสวนชวยใหผชมกลบมาเยยมคณอก ลองดเทคนคใน การปรบปรงเปลยนแปลงงาย ๆ ตอไปนดซครบ อาจมประโยชนกบคณ จดสลบล าดบเนอหาทมอย เสรมเนอหาใหม ๆ สลบกบเนอหาเดมทมอย การเพมเนอหา และหวขอใหม ๆ จะชวยเพมความสดใสและนาสนใจยงขน อยาละเลยผลตอบรบของผชม สงทผชมตตงขอผดพลาดควรจะรบแกไขในทนท เพราะ นนคอมคนคอยสนใจและตรวจสอบใหแลว แนนอนเขายอมกลบมาเยยมชมคณอกแนนอน อยาลมอเมลตอบกลบทนทถาท าได ใสตวเลขนบจ านวนผชมเขาไปดวย เพอบอกใหผชมทราบวา เวบไซตของคณยอดนยม แคไหน และคณยงสามารถประเมนเนอหาไดวาเรองใดทผชมสนใจมากทสด โดยสงเกต จ านวนทเพมขนเมอคณเปลยนแปลงเนอหาใหม วนเวลาเปลยนไปเรวมากครบ บทความนกผานมาหลายปแลว แตกยงไดรบความสนใจจากแฟนๆ อย หลายคนไดขอคดจากตรงน หลายคนขอส าเนาไปเผยแพรตอ กตองขอขอบคณส าหรบทกทานทน าไปใชประโยชนชวยกนเผยแพรเทคนคดๆ เดดๆ ตอๆ ไป ชวยกนเถอะครบ ความรดๆ หลากหลายทเปนภาษาไทยจะไดมมากขนเพอใหคนไทยหลายๆ คนทเปนไมเบอไมเมากบภาษาองกฤษจะไดสนใจผลตงานดๆ ขนมาอก

ทมา http://area.obec.go.th/phitsanulok1/

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

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

………………………………………………………………………………………………………....... เฉลย

1 2 3 4 5 6 7 8 9 10

หนวยการเรยนรท 3 แผนการจดการเรยนรท 2 จรรยาบรรณของผท าเวบ


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

1. ครแจงจดประสงคการเรยนร และวธการเรยนร 2. นกเรยนรวมแสดงความคดเหนในเรองของมารยาทและจรรยาบรรณในการใช

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

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

4. นกเรยนสรปความรจากการฟงการบรรยาย แลวตอบค าถามหนาชน 5. นกเรยนรบใบงานท 4 ลงมอปฏบต และประเมนผลการท างานลกษณะกลม


สรปเนอหาบทเรยน สอและแหลงการเรยนร (มจ านวนเทากบจ านวนนกเรยน)

- ชนงานน าเสนอบทเรยน (PowerPoint) - ใบงานท 4 - แบบประเมนการท างานเปนกลม

- เวบไซตประกอบการเรยนร http://www.puibuble.th.gs - เวบไซตทใหความรเกยวกบจรรยาบรรณของผท าเวบ


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

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

เกณฑการประเมน - คะแนนแบบทดสอบหลงเรยน คะแนนการประเมนการท างานแบบกลม 0 – 50 คะแนน ไมผาน 51 – 100 คะแนน ผาน

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

ใบงานท 4 เรอง สรางสรรคจรรยาบรรณของเวบมาสเตอร

กลมท............จ านวนสมาชกในกลม...............คน ชน...................วน/เดอน/ป............................

1. ชอ ......................................................................... เลขท ....................... 2. ชอ ......................................................................... เลขท ....................... 3. ชอ ......................................................................... เลขท ....................... 4. ชอ ......................................................................... เลขท ....................... 5. ชอ ......................................................................... เลขท .......................

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

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

2. เกดทกษะการคดอยางมหลกการ 3. เกดทกษะการท างานเปนกลม

ค าชแจง

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

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

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

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

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

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

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

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

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

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

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

.................................................................................................................................................................. 2 ใหนกเรยนชวยกนสรปบอกแนวทางการแกไขปญหาดงกลาวใหไดมากทสด ................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................. ........................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................ 3. ใหนกเรยนระดมความคดสรปแนวทางดงกลาวออกมาเปนหลกปฏบตหรอจรรยาบรรณใหรดกมทสด ................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................. ........................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................


รายการประเมน

ระดบคณภาพ ตองปรบปรง (1 คะแนน)

พอใช (2 คะแนน)

ด (3 คะแนน)

ดมาก (4 คะแนน)

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

รวม

ผประเมน .............................................................................. วนท ............เดอน ...................................พ.ศ. ...............

แบบทดสอบหลงเรยนหนวยท 3 ขอควรรและจรรยาบรรณของเวบมาสเตอร

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

………………………………………………………………………………………………………....... เฉลย

1 2 3 4 5 6 7 8 9 10

หนวยการเรยนรท 4 สนกกบ HTML


มาตรฐานท 4.1 ขอ 6 เขาใจหลกการและวธแกปญหาดวยกระบวนการทางเทคโนโลย สารสนเทศอยางมประสทธภาพและประสทธผล ขอ 8 การใชฮารดแวรและซอฟตแวรใหเหมาะสมกบงาน

ผลการเรยนรทคาดหวง 1. เขาใจโครงสรางภาษาคอมพวเตอรระดบต าส าหรบการเขยนเวบ 2. สามารถสรางเวบเพจดวยภาษาคอมพวเตอรระดบต าได

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

จ านวน 1 แผน 4 ชวโมง


สนกกบ HTML


- บอกโครงสรางภาษาคอมพวเตอรระดบต าส าหรบการเขยนเวบ - บอกวธการเขยนเวบเพจดวยภาษา HTML

เนอหาสาระ - ความหมายของภาษา HTML - โครงสรางของภาษา HTML - หลกการเขยนเวบเพจดวยภาษา HTML - ค าสงส าคญในการเขยนเวบเพจดวย HTML การจดกระบวนการเรยนร ขนเตรยมหรอขนน าเขาสบทเรยน

1. ครแจงจดประสงคการเรยนร และวธการเรยนร แลวทดสอบกอนเรยนและแนะน าเวบไซตประกอบการเรยนรายวชานคอ http://www.puibuble.th.gs และอเมลผสอนคอ [email protected]

2. นกเรยนรวมกนแสดงความรดานภาษา HTML ขนสอน

3. ครอธบายเกยวกบ ภาษา HTML รวมถงขอด และความส าคญของ HTML อกทงบอกถงค าสงส าคญ และหลกการเขยนภาษา HTML นกเรยนจดบนทกบทเรยน ในชวโมงท 1 พรอมอธบายบทเรยนในรปแบบ PowerPoint

4. ครแจกใบความรท 5 เรอง โครงสรางภาษา HTML 5. นกเรยนท าความเขาใจในหลกการเขยนภาษา HTML 6. นกเรยนท าใบงานท 5 โดยมครเปนผใหค าแนะน าควบคไปดวย 7. ครตรวจผลการสรปโดยตรวจจากสมดนกเรยนและผลงานจากใบงานท 5 8. ประเมนดวยแบบประเมนการท างาน


สรป เนอหาบทเรยน


- ใบความรท 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 > สวสดครบ เวบเราเอง</BODY>

ผลลพธทไดคอ มสองบรรทด เพราะหากเราไมใชค าสง br ขอความจะยาวเปนบรรทดเดยว 6.การยอหนาใหม <BODY > สวสดครบเวบเราเอง</BODY>

ผลลพธทไดคอ มสองบรรทด เพราะหากเราไมใชค าสง br ขอความจะยาวเปนบรรทดเดยว 7.การจดต าแหนงขอความ <BODY > สวสดครบชดซายนะ</p"> สวสดครบกลางจา</p"> สวสดครบชดขวานะ</p"> </BODY>

ค าอธบาย ค าสงนจะสงใหขอความอยต าแหนงซาย กลาง ขวา ตามทก าหนดใชวางระหวางขอความทตองการใหชดตามทตองการซง ปกตอยระหวางค าสง <body>และ </body> 8.การจดรปแบบอกษร <BODY > ขอความแบบหนา ขอความแบบเอยง ขอความแบบขดเสนใต </BODY>

ค าอธบาย ค าสงนจะสงใหขอความมลกษณะหนา เอยงหรอขดเสนใต ตามทก าหนดใชวางระหวางขอความทตองการใหเปนตามทตองการซง ปกตอยระหวางค าสง <body>และ </body> 9.การก าหนดตวอกษร <BODY > การก าหนดสตวอกษร ก าหนดขนาดตวอกษร การก าหนดตวอกษร </BODY>

ค าอธบาย ค าสงนจะสงใหขอความมลกษณะส ขนาด และรปแบบตามทก าหนดใชวางระหวางขอความทตองการใหเปนตามทตองการซง ปกตอยระหวางค าสง <body>และ </body> หรออาจใชแบบรวมทเดยวดงน ใสขอความ 9.การท าตวอกษรวง <BODY > <marquee>ขอความ</marquee> </BODY>

ค าอธบาย ค าสงนจะสงใหขอความวงผานไปใชวางระหวางขอความทตองการใหวง ปกตอยระหวางค าสง <body>และ </body>

10.การขดเสนคน ใชค าสง <hr> ใสบรเวณทอยากใหมเสน วางในสวนของ ระหวางค าสง <body>และ </body> 11.การแทรกรปภาพ <img src="ชอ.นามสกลของภาพ" width="ความกวาง" height="ความยาว" alt="ขอความ"> คอการใสสามารถใสแบบก าหนดขนาดไดและเมอเอาเมาสไปจจะปรากฎขอความอธบายตามทเราก าหนด และสามารถก าหนด ใหอยต าแหนงซายขวาหรอกลางไดโดยใชค าสงเดยวกบค าสงจดซายขวากลางของตวอกษรเชน แลวกใสขอมลรปภาพเราลงไป.. <img src="ชอ.นามสกลของภาพ" width="ความกวาง" height="ความยาว" alt="ขอความ"> เปนตน 12.การเชอมโยง <a href=“จดเชอมโยง”> ขอความทตองการใหกดแลวเชอมโยง </a> เชนการเชอมโยงไปหนงสอพมพเดลนวส <a href=“http://www.dailynews.com”> อานขาวกบเดลนวส</a> ซงถอวาเปนการเชอมโยงนอกเวบ แตหากตองการเชอมไปยงหนาทเราท าเอง <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 ในการเขยน - การบนทกใหบนทก ชออะไรกได แตตองมนามสกล เปน .html - การเกบงานควรสรางโฟลเดอรเปนของตวเองเสยกอน แลวคอยท างานในโฟลเดอรนน ๆ

อานขอมลเพมเตมไดท http://www.puibuble.th.gs ฝกเขยน html ไดท http://hospital.moph.go.th/bureerum/html/html1.html

ใบงานท 5 เรอง สนกกบ HTML

ชอ.................................................................................................ชน.................เลขท.................... หวขอเวบเพจ ..................................................................................................................................

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

ค าชแจง

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

2. น าโครงสรางทออกแบบมาสรางหนาเวบดวยภาษา HTML 3. บนทกผลงานออกมาในรปแบบไฟล .html อยางนอย 1 ไฟล 4. สงผลงาน


หวขอ ด ( 3 คะแนน)

พอใช ( 2 คะแนน)

ควรปรบปรง ( 1 คะแนน)

การออกแบบโครงสราง ความสวยงามของผลงาน ความถกตองของผลงาน ความตงใจและรบผดชอบ จรรยาบรรณในการสรางเวบ เทคนคการสราง บนทกงานถกตอง ( 2 ,1 , 0 คะแนน )

คะแนนรวม /2

ลงชอ ..............................................................ผประเมน วนท ....................................

หนวยการเรยนรท 5 สนกกบ HTML


มาตรฐานท 4.1 ขอ 6 เขาใจหลกการและวธแกปญหาดวยกระบวนการทางเทคโนโลย สารสนเทศ อยางมประสทธภาพและประสทธผล ขอ 8 การใชฮารดแวรและซอฟตแวรใหเหมาะสมกบงาน

ขอ 9 คนหาขอมลความรและตดตอสอสารผานคอมพวเตอรหรอเครอขาย คอมพวเตอร

ขอ 10 การใชคอมพวเตอรชวยประมวลผลขอมลใหเปนสารสนเทศเพอการ ตดสนใจ

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

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

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

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

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

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

มจตส านกและมความรบผดชอบ

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

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

และมความรบผดชอบ จ านวน 1 แผน 20 ชวโมง


สรางเวบไซตดวย Dreamweaver


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

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

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

สรางสรรค - ขอควรรในการปฏบตการสรางเวบไซต

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

- ค าสงการท างานของโปรแกรม Dreamweaver - การสรางขอความ - การแทรกรปภาพ - การแทรกตาราง - การเชอมโยงเวบเพจ - การก าหนดการใชงาน เลเยอร - การจดการเวบฯดวย เฟรม - การใสคณสมบตพเศษ หรอลกเลนใหกบเวบเพจ และเวบไซต - การก าหนดคา มลตมเดย - การใชรปแบบอตโนมตในการสรางเวบไซต

การจดกระบวนการเรยนร ขนเตรยมหรอขนน าเขาสบทเรยน

1. ครแจงจดประสงคการเรยนร และวธการเรยนร แนะน าเวบไซตประกอบการเรยนรายวชานคอ http://www.puibuble.th.gs และอเมลผสอนคอ [email protected]

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

3. ครแนะน าโปรแกรม Dreamweaver การก าหนดวตถประสงค และโครงสรางของเวบไซตตามแนวคดเชงสรางสรรค ขอควรรในการปฏบตการสรางเวบไซต ขอก าหนดกอนใชโปรแกรม Dreamweaver สวนประกอบตาง ๆ ของโปรแกรม Dreamweaver ขนตอนการสรางเวบไซต และการออกแบบเวบเพจ ดวย reamweaver ค าสงการท างานของโปรแกรม Dreamweaver ประกอบดวย - การสรางขอความ - การแทรกรปภาพ - การแทรกตาราง - การเชอมโยงเวบเพจ - การก าหนดการใชงาน เลเยอร - การจดการเวบฯดวย เฟรม - การใสคณสมบตพเศษ หรอลกเลนใหกบเวบเพจ และเวบไซต - การก าหนดคา มลตมเดย - การใชรปแบบอตโนมตในการสรางเวบไซต

นกเรยนจดบนทกบทเรยน พรอมอธบายบทเรยนในรปแบบ PowerPoint และคมอการใชงานโปรแกรม Dreamweaver

4. นกเรยนท าความเขาใจในองคประกอบตาง ๆ ของการสรางเวบไซตดวยโปรแกรม Dreamweaver

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

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

งานซงตองสรางเมอเรยนรในหนวยการเรยนนแลว 9. ประเมนดวยแบบประเมนการท างาน


สรปเนอหาบทเรยนตอนทายชวโมง


- ใบงานท 6 เรองการสรางเวบไซตดวย Dreamweaver - คมอการใชงานโปรแกรม Dreamweaver - ตวอยางเวบไซตทมขอมลเกยวกบการเขยนเวบดวย Dreamweaver - เวบไซตประกอบการเรยนร http://www.puibuble.th.gs - ชนงานน าเสนอบทเรยน (PowerPoint)


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




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

ใบงานท 6 เรอง สรางเวบดวย Dreamweaver

1. ชอ..............................................................................................ชน.................เลขท.................... 2. ชอ..............................................................................................ชน.................เลขท....................

หวขอเวบเพจ ..................................................................................................................................

จดประสงค 1. เพอใหผเรยนเขาใจหลกการเขยนเวบเพจดวย Dreamweaver MX 2004และหลกการสรางเวบท

ถกตอง 2. เกดทกษะการคดอยางมหลกการ 3. เกดทกษะการน าความรไปประยกตใชงานจรง

ค าชแจง

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 ขอ 11 ใชเทคโนโลยสารสนเทศ น าเสนอผลงานในรปแบบทเหมาะสมตรง ตามวตถประสงคของงาน

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

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

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


เปนเจาของเวบไซตบนโลกอนเตอรเนต


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

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

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

3. ครอธบายเกยวกบความหมายของการอพโหลด ขนตอนการสมครขอใชพนทเกบเวบไซตฟร และขนตอนการลงโปรแกรม IP Switch FTP ชวยในการอพโหลด การใชงานโปรแกรม IP Switch FTP รวมถง การประชาสมพนธเวบไซต นกเรยนจดบนทกบทเรยน ในชวโมงท 1 พรอมอธบายบทเรยนในรปแบบ PowerPoint

4. ครปฏบตใหนกเรยนไดด และปฏบตตาม พรอมกบแจกคมอการเขยนโปรแกรมดวย Dreamweaver

5. นกเรยนฝกปฏบต แลวใหนกเรยนบนทกลงสมดบนทก 6. ครตรวจผลการท างานจากโดยตรวจจากสมดนกเรยน 7. ทดสอบหลงเรยนดวยการปฏบตใบงาน


สรป เนอหาบทเรยน

สอและแหลงการเรยนร (มจ านวนเทากบจ านวนนกเรยน) - ใบความรท 6 เรอง ขนตอนการจดท าเวบเพจและการอพโหลดไฟลขนสเซรฟเวอร - ใบงานท 6 เปนเจาของเวบไซตบนโลกอนเตอรเนต - ตวอยางเวบไซตทมขอมลเกยวกบการอพโหลดไฟล - เวบไซตประกอบการเรยนร http://www.puibuble.th.gs - ชนงานน าเสนอบทเรยน (PowerPoint)

กระบวนการวดและประเมนผล (มจ านวนเทากบจ านวนนกเรยน) วธวดผล

- ตรวจผลงานจากความตงใจขณะอยภายในสงคมหองเรยน - การใหความรวมมอในการแสดงความคดเหน - การท าแบบทดสอบ และท าใบงาน และการจดบนทก




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

ใบงานท 7 เรอง สรางเวบดวย Dreamweaver

1. ชอ..............................................................................................ชน.................เลขท.................... 2. ชอ..............................................................................................ชน.................เลขท....................

หวขอเวบเพจ ..................................................................................................................................

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

ค าชแจง

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

ได 3. ตรวจสอบผลงานตนเองดวยโปรแกรม Internet Explorer 4. สงผลงานเปนชอโดเมนเนม

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

( 3 คะแนน) พอใช

( 2 คะแนน) ควรปรบปรง ( 1 คะแนน)

เพอนนกเรยน เปดดไดจากชอโดเมนเนม ขอมลขนครบถกตอง รปภาพขนครบถกตอง การเชอมโยงภายในเวบไซต การเชอมโยงภายนอกเวบไซต

คะแนนรวม x20/5 ครประจ าวชา เปดดไดจากชอโดเมนเนม ขอมลขนครบถกตอง รปภาพขนครบถกตอง การเชอมโยงภายในเวบไซต การเชอมโยงภายนอกเวบไซต

คะแนนรวม x20/5 ผปกครอง เปดดไดจากชอโดเมนเนม ขอมลขนครบถกตอง รปภาพขนครบถกตอง การเชอมโยงภายในเวบไซต การเชอมโยงภายนอกเวบไซต

คะแนนรวม x20/5 รวมคะแนนทงสน/3

ใบความรท 6

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

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

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

โฮมเพจกระทรวงอตสาหกรรมสวนทเปนภาษาองกฤษ

รปท 2 : โฮมเพจ (Home Page) ของกระทรวงอตสาหกรรมสวนทเปนภาษาองกฤษ

แผนผงเวบไซต (Sitemap) แสดงโครงสรางของขอมลภายในเวบไซตกระทรวงอตสาหกรรมแยกตามหวขอตางๆ

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

รปท 3 : หนาจอแสดงแผนผงเวบไซตกระทรวงอตสาหกรรม

การใหบรการตางๆ ผานเวบไซตกระทรวงอตสาหกรรม

ปจจบนเวบไซตกระทรวงอตสาหรรม(www.m-industry.go.th) ศนยเทคโนโลยสารสนเทศและการสอสาร(ศทส.) ส านกงานปลดกระทรวงอตสาหกรรม เปนผดแลและปรบปรงขอมลตางๆ โดยการใหบรการขอมลบนเวบไซตสามารถแบงออกไดเปน

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

2. การใหบรการทประชาชนสามารถเขามาตดตอกบกระทรวงผานทางเวบไซต

2.1 หนาจอปรกษารฐมนตรวาการกระทรวงอตสาหกรรม 2.2 หนาจอรบเรองรองทกข

2.3 หนาจอกระดานถามตอบ 2.4 หนาจอสมดเยยมชม 2.5 หนาจอตดตอเจาหนาท Contact Center ผานทาง Web Chat และ e-Mail

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

รปท 4 : หนาจอส านกงานอตสาหกรรมจงหวด

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

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

5. แผนงานและโครงการ เปนขอมลเกยวกบแผนงานและโครงการของส านกงานอตสาหกรรมจงหวดนนๆ 6. ฝายสงเสรมอตสาหกรรม เปนขอมลเกยวกบฝายสงเสรมอตสาหกรรมของส านกงานอตสาหกรรมจงหวดนนๆ วามหนาทความรบผดชอบ และผลการด าเนนการอยางไร เปนตน 7. ขอมลโรงงาน เปนรายละเอยดเกยวกบขอมลของโรงงานตางๆ ทตงอยภายในจงหวดนน เปนตน 8. โครงสรางการบรหาร เปนขอมลเกยวกบโครงสรางการบรหารและผทด ารงต าแหนงผบรหารในส านกงานอตสาหกรรมจงหวดนนๆ เปนตน 9. ขาวประชาสมพนธ เปนขอมลขาวสารหรอขาวประกาศตางๆ ทตองการประชาสมพนธใหบคคลทวไปทราบ 10. ยทธศาสตรจงหวด เปนขอมลเกยวกบแผนยทธศาสตรของจงหวดนนๆ

11. ตดตอส านกงาน เปนลงค ไปยงอเมลแอดเดรสของส านกงานอตสาหกรรมจงหวดนนๆ

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

เมอผใชบรการเขาสหนาจอนกใหเลอกจงหวดทตองการและสามารถดรายละเอยดทหวขอตางๆ โดยการคลกทดหวขอนนๆ ปจจบนศนยเทคโนโลยสารสนเทศและการสอสาร(ศทส.) ส านกงานปลดกระทรวงอตสาหกรรมไดอนญาตใหส านกงานอตสาหกรรมจงหวดแตละแหงสามารถน าไฟลทใชจดท าเวบเพจของแตละส านกงานเกบไวในเซรฟเวอรสวนกลาง ซงขณะน ศทส. เปนผดแลอย โดยใหพนทส านกงานอตสาหกรรมจงหวดละ 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. เวบเพจของส านกงานอตสาหกรรมจงหวดทจดท าขนสามารถใชเครองมอใดกได ในการพฒนา เชน Edit Plus FrontPage Macromedia Dreamweaver MX Microsoft Word Microsoft Excel เปนตน สวนลกษณะและรปแบบของเวบเพจตางๆ ตลอดจนรปภาพทใชประกอบ ส านกอตสาหกรรมจงหวดตางๆ สามารถจดท าตามทเหนสมควร เพยงแตส านกงานอตสาหกรรมจงหวดแตละแหงตองจดท าเวบเพจทมเนอหาตรงกบหวขอท ศนยเทคโนโลยสารสนเทศและการสอสาร (ศทส.) ส านกงานปลดกระทรวงอตสาหกรรม(สปอ.) ก าหนดไว และ ใหเกบบนทกชอและนามสกลของไฟลตามทระบ โดยชอและนามสกลของไฟลใชเหมอนกนทงในสวนของเวบไซตกระทรวงอตสาหกรรมทเปนภาษาไทยและภาษาองกฤษ

2. ผพฒนาเวบเพจของส านกงานอตสาหกรรมจงหวดแตละแหง ควรเกบไฟลรปภาพตางๆ ทใชภายในเวบเพจไวในโฟลเดอร images เมอถงขนตอนน าไฟลตางๆ อพโหลดขนไปไวบนเซรฟเวอร (Server) กให น าไฟลรปภาพทงหมดไปไวในโฟลเดอร images ซงจะมอยแลวบนเซรฟเวอรเชนกน 3. ใหส านกงานอตสาหกรรมจงหวดแตละแหงชวยสรางลงค (link) เพอเชอมโยงไปยงสนคาตางๆ ภายในของจงหวดนนๆ (หนงต าบล หนงผลตภณฑ : One Tambon One

Product(OTOP)) ในสวนของหวขอขาวประชาสมพนธ อนเปนชวยสงเสรมและประชาสมพนธสนคาภายในจงหวด

4. หลงจากส านกงานอตสาหกรรมจงหวดสรางเวบเพจตามเนอหาทไดระบไวในแตละหวขอแลว ใหสงไฟลตางๆ มายงเซรฟเวอรสวนกลางโดยผานทางระบบ FTP (File Transfer Protocol) ซงอาจจะใชโปรแกรม WS_FTP หรอ CuteFTP กได โดยส านกงานอตสาหกรรมจงหวดแตละแหงจะไดรบ ชอผใชงาน (UserID) จ านวน 2 รายชอ พรอมกบรหสผาน (Password) ส าหรบเวบไซตกระทรวงอตสาหกรรมทเปนภาษาไทยและภาษาองกฤษ จากศนยเทคโนโลยสารสนเทศและการสอสาร (ศทส.)เพอใหส านกงานอตสาหกรรมสามารถเขาสระบบและท าการอพโหลด (Upload) ไฟลขนสเซรฟเวอร (Server) เพอแสดงผลบนเวบไซตตอไป

5. ศนยเทคโนโลยสารสนเทศและการสอสาร อนญาตใหส านกงานอตสาหกรรมจงหวดสามารถอพโหลดไฟลตางๆ ทไดจากการจดท าเวบไซตขนสเซรฟเวอรสวนกลาง โดยใหเนอทจงหวดละ 20 MB

แผนภาพแสดงการไหลของขอมล

รปท 5 : แสดงแผนภาพการไหลของขอมล

ขนตอนการอพโหลด (Upload) ไฟลขนสเซรฟเวอร โดยใชโปรแกรม WS_FTP Pro 7.04 เนองจากศนยเทคโนโลยสารสนเทศและการสอสาร(ศทส.) ส านกงานปลดกระทรวงอตสาหกรรมไดจดสงแผนซดซงมโปรแกรม WS_FTP Pro 7.04 ใหส านกงานอตสาหกรรมจงหวดตางๆ เพอใชส าหรบการอพโหลดไฟลขนเซรฟเวอร โดยขนตอนการท างานมดงน

1. เมอเปดโปรแกรม WS_FTP Pro 7.04 ขนมาจะพบกบหนาจอดงรปท 6 โดยโปรแกรมจะใหใส Host Name UserID และ Password ลงไปในชองตางๆ โดย Host Name คอ 203.151.169.1 ซงเปนหมายเลข IP ของเซรฟเวอร สวน UserID และ Password สามารถดจากเอกสารท ศทส. ไดจดสงใหแตละจงหวด หลงจากใสคาตางๆ เรยบรอยแลว ใหคลก Connect เพอท าการเชอมตอไปยง เซรฟเวอร

รปท 6 : การระบ Host Name UserID และ Password เมอเปดเขาสโปรแกรม WS_FTP Pro 7.04

2. หลงจากสามารถเขาสโปรแกรมเรยบรอยแลว แลวจะพบกบหนาจอดงรปท 7

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

รปท 7 : ดานซายจะแสดงหนาจอเครองคอมพวเตอรของผใชงาน สวนดานขวาจะเปนหนาจอของ

เซรฟเวอร

3. เมอผใชงานลากไฟลจากดานซายมายงดานขวา ถาหากไฟลทลากมานนมอยแลวบนเซรฟเวอรโปรแกรมจะถามวาตองการให Copy ไปแทนของเดมหรอไม ถาผใชงานกด Overwriteโปรแกรมกจะท าการ Copy ไฟลไปแทนทไฟลเดมบนเซรฟเวอรทนท ดงรปท 8

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

4. เมอท าการ Copy เสรจเรยบรอยแลวโปรแกรมจะมเสยงเตอนและแจงวา Transfer

Complete ดงรปท 9

รปท 9 : โปรแกรมจะแจงวา Transfer Complete

ขอควรพงระวงในการน าไฟลขนสเซรฟเวอร

1. ควรท าการสแกนไวรสทกครงกอนน าไฟลขนสเซรฟเวอร 2. ควรปรบปรง (Update) รายชอไวรสของโปรแกรมสแกนไวรสใหทนสมยอยเสมอ 3. ไมควรน าไฟลทไมไดใชประโยชนไปไวบนเซรฟเวอร 4. ไฟลใดทไมไดใชประโยชนบนเซรฟเวอรควรลบทง เพอไมใหเปนการสนเปลอง

พนทในการจดเกบ 5. ควรส ารอง (Backup) ไฟลทมอยเดมทกครงกอนท าการแกไขหรอสงไฟลตวใหม

ขนสระบบ 6. ผใชงานควรเกบ UserID และ Password ไวเปนความลบเพอปองกนผไมมสทธ

สามารถเขาสระบบจนท าใหขอมลเสยหายได

ผลกำรส ำรวจเวบไซตภำครฐ

ปจจบนประเทศไทยไดจดท าแผนแมบทเทคโนโลยสารสนเทศและการสอสาร พ.ศ. 2545-2551 ขนมาโดยไดก าหนด 5 ยทธศาสตรหลกในการพฒนา ไดแก e-Industry e-Commerce e-Government e-Education และ e-Society ซง e-Government หรอรฐบาลอเลกทรอนกสนบเปนยทธศาสตรทส าคญในการผลกดนการพฒนาดานเทคโนโลยสารสนเทศและการสอสารของประเทศไทย หลกการส าคญของการสรางรฐบาลอเลกทรอนกส คอการน าบรการของภาครฐสประชาชน โดยใชอเลกทรอนกสเปนสอในการใหบรการ ท าใหโครงการส ารวจเวบไซตภาครฐครงท 1 ระหวางวนท 14 มกราคม – 31 มนาคม 2547 จงเกดขนเพอส ารวจและตดตามความกาวหนาของการพฒนารฐบาลอเลกทรอนกสของประเทศไทย เปนโครงการความรวมมอระหวางกระทรวงเทคโนโลยสารสนเทศและการสอสารและกระทรวงวทยาศาสตรและเทคโนโลย ด าเนนการโดยโครงการพฒนาโครงสรางพนฐานสารสนเทศภาครฐ ศนยเทคโนโลยอเลกทรอนกสและคอมพวเตอรแหงชาต ส านกงานพฒนาวทยาศาสตรและเทคโนโลยแหงชาต (NECTEC) โดยการส ารวจไดมการเกบรวบรวมขอมลของทกหนวยงานภาครฐในระดบกรมและเทยบเทาจ านวน 267 หนวยงาน ทเกยวของกบกจกรรมการใหบรการทางเวบไซตโดยเกณฑทใชในการจดประเภทบรการเวบไซตภาครฐ คอ Information : มเวบไซตใหบรการขอมลขาวสารสประชาชน โดยทขอมลขาวสาร

เหลานนตองมความถกตอง มคณคาตอการใชงานและทนสมย Interaction : มเวบไซตสามารถสรางปฏสมพนธกบประชาชน Interchange Transaction : เวบไซตสามารถด าเนนธรกรรมทางอเลกทรอนกสไดโดย

สมบรณในตวเอง Integration : มการบรณาการแนวราบของการบรการระหวางเวบไซตของหนวยงาน Intelligence : เวบไซตสามารถเรยนรพฤตกรรมของประชาชนทมาใชบรการ

หลงจากการส ารวจดงกลาวปรากฎวาเมอ NECTEC ประกาศรายชอ 5 ล าดบ

คะแนนสงสดในประเภท Information เวบไซตกระทรวงอตสาหกรรมถกจดไวในล าดบท 4 ดงรปท 10

รปท 10 : เวบไซตกระทรวงอตสาหกรรมถกจดล าดบเปนท 4 ในสวนของ Information

ขอสอบปลายภาค รายวชา การเขยนเวบไซต ประจ าภาคเรยนท 1ปการศกษา 2551 กลมสาระการเรยนร การงานอาชพและเทคโนโลย ระดบชน มธยมศกษาปท 4 …………………………………………………………………………………………………………. ตอนท 1 ใหนกเรยนเลอกค าตอบทถกตองทสดเพยงขอเดยว 1. ระบบเครอขายคอมพวเตอรหมายถงอะไร ก. ระบบทมการน าคอมพวเตอรมาใชประโยชนรวมกบอปกรณตาง ๆ เชนแสกนเนอร เครองพมพ เปนตน ข. ระบบทมการน าคอมพวเตอรตงแต 2 เครองขนไปมาเชอมตอเขาดวยกน ค. ระบบศนยกลางการสอสารคอมพวเตอร ง. ระบบการใชงานคอมพวเตอรขนาดเลก 2. อนเตอรเนตเกดขนครงแรกในประเทศใด และป ค .ศ.ใด ก. องกฤษ 1960 ข. สหรฐอเมรกา 1960 ค. องกฤษ 1975 ง. สหรฐอเมรกา 1975 3. หากเปรยบเวบไซตเปนหนงสอ เราจะเปรยบหนาสารบญไดกบอะไร ก. Webpage ข. Homepage ค. Website ง. Single Page 4. เวบเพจชนดทสามารถเปดอานไดภายในหนาเดยวนนเรยกวาอะไร ก. Single Page ข. Scroll Page ค. One Page ง. HomePage 5. โครงสรางเวบแบบใดทเหมาะส าหรบการออกแบบเวบไซตของกระทรวงการคลง ก. แบบสน ข. แบบกวาง ค. แบบตน ง. แบบลก 6. ขอใดกลาวถกตองทสด

ก. ในการสรางเวบควรมการวางแผนคราว ๆ กอน ข. การสรางเวบเพจทดควรมสสนฉดฉาดเตะตาผชม

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

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 ง 7 ก 8 ข 9 ค

10 ง

11. สญลกษณของโปรแกรม Macromedia Dreamweaver 12. สญลกษณค าสงเปดหนาการท างานใหม 13. สญลกษณค าสงการแทรกรปภาพ 14. สญลกษณกลมค าสงมลตมเดย 15. สญลกษณการแทรกวนท เดอน และปทสรางเวบและอพเดทขอมล 16. สญลกษณการเชอมโยงหนาเวบเพจ 17. สญลกษณการท างานในรปแบบของCode HTML 18. สญลกษณการบนทกงาน 19. สญลกษณเปดดผลงานดวยโปรแกรมดเวบเพจ 20. สญลกษณการเปดชนงาน

Documents

แผนการเรียนรู้ · - การท าแบบทดสอบ และท าใบงาน และการจดบันทึก เครื่องมือวัด