ชุมนุมคอมพิวเตอร์ (โปรแกรม ... · web viewน...

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

ขอ 3 เขาใจระบบคอมพวเตอร ระบบสอสารขอมลและระบบเครอขายคอมพวเตอร

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

ขอ 5 จดเกบและบำารงรกษาสารสนเทศใหถกตองและเปนปจจบนอยเสมอ

ขอ 6 เขาใจหลกการและวธแกปญหาดวยกระบวนการทางเทคโนโลยสารสนเทศ

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

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

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

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

ความรบผดชอบ

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

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

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

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

เวบไซต6. มจรยธรรมในการใชเทคโนโลยสารสนเทศในการสรางงาน 7. เขาใจโครงสรางภาษาคอมพวเตอรระดบตำาสำาหรบการเขยน

เวบ8. บอกวธการเขยนเวบเพจดวยภาษา HTML9. วางแผนเลอกใชเทคโนโลยไดเหมาะสมกบงาน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 Network5. อนเตอรเนตเกดขนครงแรกในประเทศไทย เมอป พ.ศ.ใด

ก. 2530 ข. 2525 ค. 2527ง. 2529

6. เครอขายคอมพวเตอรเครอขายแรก มชอวาอยางไรก. อารพาเนต ข. อาคาเนต ค. อาสาเนตง. ปาปาเนต

7. ปจจบนอนเตอรเนตนำามาใชในชวตประจำาวนในดานใดบางก. การตดตอสอสาร ข. ความบนเทงค. การทำาธรกรรม ง. ถกทกขอ

8. บรการใดทจดวาเปนการบรการเกยวกบดานเวบไซตก. Telnetข. Use Net ค. WWW. ง.

FTP9. บรการใดทจดวาเปนการบรการโอนถายขอมล

ก. Telnetข. Use Net ค. WWW. ง. FTP10. บรการใดทจดวาเปนการทำางานขามเครอง

ก. 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เวบเพจ เวบไซต และโครงสรางเวบฯ


มาตรฐานท 4.1 ขอ 4 เขาใจขอกำาหนดของคอมพวเตอรและอปกรณทเกยวของ

ขอ 5 จดเกบและบำารงรกษาสารสนเทศใหถกตองและเปนปจจบนอยเสมอ

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

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

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



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


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

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

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

1. ครแจงจดประสงคการเรยนร และวธการเรยนร แลวทดสอบกอนเรยน

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

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

เรยนในรปแบบ PowerPoint4. ครแจกใบความรท 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 ลงมอปฏบต และประเมนผลการ

ทำางานลกษณะกลมขนสรป

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

สอและแหลงการเรยนร (มจำานวนเทากบจำานวนนกเรยน)- ใบความรท 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. การแสดงทอยของเวบ : URL5. วน/เวลาทสรางเวบ (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. มจรยธรรมในการใชเทคโนโลยสารสนเทศในการสรางงาน จดประสงคการเรยนร

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

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

สารสนเทศในการสรางงานจดประสงคปลายทาง- เขาใจหลกการ ขอกำาหนดเกยวกบการออกแบบและจดทำา

เวบไซต- มจรยธรรมในการใชเทคโนโลยสารสนเทศในการสรางงาน


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

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


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

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


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



สารสนเทศอยางมประสทธภาพและประสทธผล

ขอ 8 การใชฮารดแวรและซอฟตแวรใหเหมาะสมกบงาน

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

เวบ2. สามารถสรางเวบเพจดวยภาษาคอมพวเตอรระดบตำาได

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



สนกกบ 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. ประเมนดวยแบบประเมนการทำางานขนสรป

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

สอและแหลงการเรยนร (มจำานวนเทากบจำานวนนกเรยน)- ใบความรท 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



สารสนเทศ อยางมประสทธภาพและประสทธผล

ขอ 8 การใชฮารดแวรและซอฟตแวรใหเหมาะสมกบงาน

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

คอมพวเตอรขอ 10 การใชคอมพวเตอรชวยประมวลผลขอมลให

เปนสารสนเทศเพอการ ตดสนใจขอ 11 ใชเทคโนโลยสารสนเทศ นำาเสนอผลงานใน

รปแบบทเหมาะสมตรง ตามวตถประสงคของงาน

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

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

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

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

ได- บอกวธใชเทคโนโลยในการทำางาน การผลต การออกแบบ การ

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

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

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

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

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

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

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



สรางเวบไซตดวย 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. ประเมนดวยแบบประเมนการทำางาน

ขนสรป10. ครเปดโอกาสใหนกเรยนซกถามขอสงสยเกยวกบเรอง

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

สอและแหลงการเรยนร (มจำานวนเทากบจำานวนนกเรยน)- ใบงานท 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. สงผลงาน

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


พอใช( 2

คะแนน)



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

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

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

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

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

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

รายวชา การเขยนเวบไซต ประจำาภาคเรยนท 1 ปการศกษา 2551

กลมสาระการเรยนร การงานอาชพและเทคโนโลย ระดบชน มธยมศกษาปท 4………………………………………………………………………………………………………….มาตรฐานการเรยนร

มาตรฐานท 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. สงผลงานเปนชอโดเมนเนม

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


พอใช( 2

คะแนน)



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

คะแนนรวม 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

HTML18. สญลกษณการบนทกงาน19. สญลกษณเปดดผลงานดวยโปรแกรมด

เวบเพจ

ชุมนุมคอมพิวเตอร์ (โปรแกรม ... · web viewน...

Documents