30201 1 4 40 1 - thaigoodview.com · 2011-07-01 · ค าอธิบายรายวิชา...

ค าอธบายรายวชา กลมสาระการเรยนรการงานอาชพและเทคโนโลย

รหสวชา ง30201 วชา การสรางเวบไซต ภาคเรยนท 1

ชนมธยมศกษาปท 4 เวลา 40 ชวโมง จ านวน 1.0 หนวยกต

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

ฝกการจดท าเวบเพจดวย HTML และออกแบบเวบไซตขนพนฐาน ซงเปนเครองมอส าคญในการเผยแพรความร ขอมล ตางๆ ออกสสาธารณชน โดยการจดท าเวบไซตของตนเอง ขนสเครอขายอนเทอรเนต จดท าแหลงเรยนรเผยแพรงานในรปแบบทเหมาะสม ตรงตาม วตถประสงคสามารถเขยนโปรแกรมคอมพวเตอรตามหลกการเขยนโปรแกรมเบองตน โดยใชความร ความคด จนตนาการ ทกษะ เหตผล และกระบวนการตางๆ ทางเทคโนโลยสารสนเทศ ตลอดจนประสบการณดานคอมพวเตอร โดยมการบรณาการความรจากกลมสาระการเรยนรตาง ๆ หรอความรดานอน ๆ ทเกยวของเขามารวมในการพฒนาระบบงานทใชในการแกไขปญหา และใชคอมพวเตอรชวยสรางชนงาน หรอ เวบไซตอยางสรางสรรค โดยใชกระบวนการเรยนรจากการปฏบตจรง ทกษะกระบวนการท างาน โดยแสวงหาความรจากแหลงเรยนรทางอนเทอรเนต และใชทกษะการจดการ กระบวนการแกปญหาในการท างาน

เพอใหเกดความร ความเขาใจ และมทกษะการท างาน การจดการ การแกปญหา ทมประสทธภาพ มความ รบผดชอบ ขยน อดทน ใฝเรยนร มความมงมนในการท างาน ทเปนประโยชนตอชมชน อยางมคณธรรมและจรยธรรม มจตส านกความเปนไทยและมจตสาธารณะ มาตรฐาน/ตวชวด ง3.1 ม.4-6/1 , ง3.1 ม.4-6/3 , ง3.1 ม.4-6/5 , ง3.1 ม.4-6/6 , ง3.1 ม.4-6/11 รวมทงหมด 5 ตวชวด

โครงสรางรายวชา รหสวชา ง30201 ชอวชา การสรางเวบไซต ชน มธยมศกษาปท 4 เวลารวม 40 ชวโมง

หนวยท ชอหนวยการเรยนร มาตรฐานการเรยนร/ตวชวด

สาระส าคญ/ความคดรวบยอด ภาระงาน/ชนงานรวบยอด

เวลา น าหนกคะแนน

1 ระบบสอสารขอมลอนเทอรเนต

ง 3.1 ม.4-6/1 ง 3.1 ม.4-6/3

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

การศกษา webpage 5 เพจ

6 10

2 การเขยนเวบเพจดวย HTML ง 3.1 ม.4-6/6

1.การใชเทคโนโลยสารสนเทศในการน าเสนอในรปของเวบไซต 2.โครงสราง ภาษา HTML 3. การจดรปแบบตวอกษร 4. การก าหนดเลขก ากบหนา 5. การเชอมโยง 5. การน ารปภาพลงในเวบเพจ 6. การสรางตารางเลอกก าหนดขอความรปภาพ 7.การสรางแบบฟอรมในการกรอกขอมล

สราง Website ประกอบดวย - เวบประวตสวนตว - เวบรปภาพ สวนตว - เวบดวยตารางพรอมการเชอมโยง - แบบฟอรมรบสมครงาน

16 50

โครงสรางรายวชา รหสวชา ง30201 ชอวชา การสรางเวบไซต ชน มธยมศกษาปท 4 เวลารวม 40 ชวโมง

หนวยท ชอหนวยการเรยนร มาตรฐานการเรยนร/ตวชวด

สาระส าคญ/ความคดรวบยอด ภาระงาน/ชนงานรวบยอด

เวลา น าหนกคะแนน

3 การเขยนเวบเพจดวยโปรแกรมส าเรจรป

ง 3.1 ม.4-6/6

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

สรางเวบไซตของตนเองบนเครอขาย

อนเทอรเนต

10 20

4 การน าเสนองานดวย Web site ง 3.1 ม.4-6/11 บรณาการกบสงคม 1. ศกษา คนหา ขอมลของทองถน 2. น าเสนอ Website ของทองถน

Website ทองถน 1 เวบ

8 20

รวม 40 100

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

มาตรฐาน ง 3.1 เขาใจ เหนคณคา และใชกระบวนการเทคโนโลยสารสนเทศในการสบคนขอมลการเรยนร การสอสาร การแกปญหา การท างาน และอาชพอยางมประสทธภาพ ประสทธผล และมคณธรรม สาระส าคญ ระบบเครอขายคอมพวเตอร (Computer Network) คอ ระบบทมการเชอมตอคอมพวเตอรตงแต 2 เครองขนไปผานชองทางการสอสารอยางใดอยางหนงและระบบเครอขายใดๆ สามารถมระบบเครอขายยอยมากกวา 1 เครอขายอยภายใน จดประสงคการเรยนร 1. สามารถบอกถงความหมายของระบบสอสารขอมล ความส าคญของระบบเครอขายและสวนประกอบของเครอขายได 2. อธบายความหมายและประเภทของเครอขายได 3. สามารถบอกและปฏบต การสงถายขอมล ไฟล ในเครอขายภายในได 4. เพอใหใชอนเตอรเนตไดอยางมประสทธภาพ 5. เพอใหใชอนเตอรเนตอยางมคณธรรมและจรยธรรม กจกรรมการเรยนร ขนน าเขาสบทเรยน 1. ครกลาวทกทายนกเรยน 2. ครเปดเวบไซตตาง ๆ ใหนกเรยนดแลวถามนกเรยนวาเวบเพจตาง ๆ เหลานมสวนประกอบอะไรบาง 3. นกเรยนรวมกนวเคราะหรปแบบเวบเพจตาง ๆ ขนสอน 1. ครอธบายเรองการตดตอสอสารและการคนหาขอมลผานอนเตอรเนตโดยใชสอน าเสนอเชน Power point หรอ เวบไซตในการคนหาขอมล เปดโอกาสใหนกเรยนซกถามขอสงสยตาง ๆ

ขนสรป 1. ครสรปเรองการตดตอสอสารและการคนหาขอมลผานอนเตอรเนต โดยสอดแทรกคณธรรมจรยธรรมในการใชงานอนเตอรเนต ตลอดจนพระราชบญญตการกระท าความผดทางคอมพวเตอร พ.ศ. 2550 และบทลงโทษผกระท าผด สอและแหลงเรยนร สอการจดการเรยนร 1. เอกสารความร 2. E-Learning (http://tc.mengrai.ac.th/paisan/ ) แหลงเรยนร 1. หองสมดโรงเรยนเมงรายมหาราชวทยาคม 2. www.mengrai.ac.th/ebook 3. http://tc.mengrai.ac.th/paisan/ การวดและประเมนผล ดานความร ( K) - ตรวจผลงานจากการท ากจกรรมใบงาน - การปรกษาหารอกนภายในกลม ดานคณธรรม จรยธรรม ( A) - สงเกตการท างานขณะปฏบตงาน - สงเกตการความเขาใจหลงการสอน - ประเมนผลจากใบงาน ดานทกษะ/กระบวนการ ( P) - สงเกตพฤตกรรมการท างาน ตามแบบประเมนคณลกษณะ

เกณฑการวดและประเมนผล

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

4 3 2 1

ระบบสอสารขอมลและอนเตอรเนต

มความรความเขาใจ ระบบสอสารและอนเตอรเนตสามารถอธบายความหมาย ไดเปนอยางด

มความรความเขาใจ ระบบสอสารและอนเตอรเนตสามารถอธบายความหมาย และตอบค าถามได

มความรความเขาใจระบบสอสารและอนเตอรเนตสามารถอธบายความหมาย

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

การสบคนขอมล ใชเวลาในการสบคนไดรวดเรวและหาขอมลไดครบถวน และสรปเนอหา

หาขอมลไดครบถวนและสรปเนอหา

หาขอมลเพอน ามาแสดงได

ขอมลไมครบขอมลไมสมบรณ

ผลงาน เสรจกอนเวลาทก าหนด มความเรยบรอยเปนไปตามผลทคาดหวง

เสรจตามเวลาทก าหนด มความเรยบรอยเปนไปตามผลทผลทคาดหวง

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

งานไมสมบรณ

บนทกผลการจดการเรยนร 1. ผลการสอน . . . . . . . 2. ปญหา / อปสรรค . . . . . . . 3. ขอเสนอแนะ / แนวทางแกไข . . . . . . . ลงชอ ผสอน (นางสาวพชชยานาฏ รรกษ)

ใบความรท 1 เรองระบบสอสารขอมลและอนเตอรเนต

เครอขายคอมพวเตอร (Computer Network) คอกลมของคอมพวเตอรและอปกรณคอมพวเตอร

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

การทเครอขายคอมพวเตอรมบทบาท และความส าคญเพมขนเพราะไมโครคอมพวเตอรไดรบการใชงานอยางแพรหลาย จงเกดความตองการทจะเชอมตอคอมพวเตอรเหลานนเขาดวยกน เพอเพมขดความสามารถของระบบใหสงขนเพมการใชงานดานตาง ๆ และลดตนทนระบบโดยรวมลง เครอขายมตงแตขนาดเลกทเชอมตอกนดวยคอมพวเตอร เพยงสองสามเครองเพอใชงานในบาน หรอในบรษทเลกๆ ไปจนถงเครอขายระดบโลกทครอบคลมไปเกอบทกประเทศ เครอขายสามารถเชอมตอคอมพวเตอรเปนจ านวนมากทวโลกเขาดวยกนเราเรยกวา เครอขายอนเทอรเนต โครงสรางของเครอขายคอมพวเตอร 1. เครอขายเฉพาะท (Local Area Network : LAN) 2. เครอขายเมอง (Metropolitan Area Network : MAN) 3. เครอขายบรเวณกวาง ( Wide Area Network : WAN การตอเชอมเครอขายคอมพวเตอรระยะใกล หากตองการทจะน าเอาเครองคอมพวเตอรสวนบคคลมาตอเปนระบบ โดยใชขดความสามารถเดม ทมอย สามารถท าไดดวยวธการงาย ๆ ดงน 1. การเชอมตอผานชองทาง Com1, Com2 และ LPT เปนวธทน าคอมพวเตอรทมอยตอผานชอง ทาง COM1 หรอ COM2 เพอการเคลอนยายขอมลระหวางกน 2. การเชอมตอเขากบบฟเฟอรเครองพมพ เปนการแบงกนใชเครองพมพเพอใหการใชทรพยากร เครองพมพ (Printer) เกดประโยชนมากขน 3. การเชอมตอโดยใชระบบสลบสายขอมล เปนวธการตอขยายระบบแบบงาย ๆ ทใชมอชวยระบบ สลบสายขอมลท าหนาทเหมอนชมสายโทรศพท 4. การเชอมตอผานระบบผใชหลายคนหลายชองทาง ระบบผใชหลายคนขนาดเลก ทอยบนไมโคร คอมพวเตอรมหลายระบบ เชน ระบบยนกซ ระบบลนกซ ระบบดงกลาวสามารถเชอมขยายเขากบสถานยอย ไดมาก เปนระบบทใชงานรวมกนไดในราคาประหยด

http://www.skn.ac.th/a_cd/content/lan.html

http://www.skn.ac.th/a_cd/content/man.html

http://www.skn.ac.th/a_cd/content/wan.html

โครงสรางระบบเครอขายคอมพวเตอร (Network Topology) เครอขายแบบบส (Bus Network) เปนเครอขายทเชอมตอคอมพวเตอรและอปกรณตาง ๆ ดวยสายเคเบลยาวตอเนองไปเรอย ๆ โดยจะมคอนเนกเตอรเปนตวเชอมตอคอมพวเตอร และอปกรณเขากบสายเคเบล ในการสงขอมลจะมคอมพวเตอรเพยงตวเดยวเทานนทสามารถสงขอมลไดในชวงเวลาหนงๆ เครอขายแบบดาว (Star Network) เปนเครอขายทเชอมตอคอมพวเตอร เขากบอปกรณทเปน จดศนยกลางของเครอขายโดยการน าสถานตาง ๆ มาตอรวมกนกบหนวยสลบสายกลาง การตดตอสอสารระหวางสถานจะกระท าไดดวยการตดตอผานทางวงจรของหนวยสลบสายกลาง การท างานของหนวยสลบสายกลาง จงเปนศนยกลางของการตดตอ วงจรเชอมโยงระหวางสถาน ตาง ๆ ทตองการตดตอกน เครอขายแบบวงแหวน (Ring Network) เปนเครอขายทเชอมตอ คอมพวเตอรดวยสายคเบล ยาวเสนเดยวในลกษณะวงแหวน การรบสงขอมลในเครอขายวงแหวน จะใชทศทางเดยวเทานน เมอคอมพวเตอรเครองหนงสงขอมลมนกจะสงไปยงคอมพวเตอรเครองถดไป ถาขอมลทรบมาไมตรงตามทคอมพวเตอรเครองตนทางระบ กจะสงผานไปยงคอมพวเตอรเครองถดไปซงจะเปนขนตอน อยางนไปเรอย ๆ จนกวาจะถงคอมพวเตอรปลายทางทถกระบตามทอยจากเครองตนทาง เครอขายแบบตนไม (Tree Network) เปนเครอขายทมผสมผสานโครงสรางเครอขายแบบตางๆ เขาดวยกนเปนเครอขายขนาดใหญ การจดสงขอมลสามารถสงไปถงไดทกสถาน การสอสารขอมลจะผานตวกลางไปยงสถานอน ๆ ไดทงหมด เพราะทกสถานจะอยบนทางเชอม รบสงขอมลเดยวกน องคประกอบของเครอขาย ประกอบดวย ฮารดแวร (Hardware) คอมพวเตอร (Client Computer) เซอรเวอร (Server) ฮบ (Hub) บรดจ (Bridge) เราทเตอร (Router) เกตเวย (Gateway) โมเดม (Modem) เนตเวอรคการด (Network Card) ซอฟตแวร (Software) ระบบปฏบตการของระบบเครอขาย (Network Operating Sytems) แอบพลเคชนของเครอขาย (Network Application Sytems) ตวน าขอมล (Media Transmission) สายสงขอมล หรอ Cable เปนอปกรณอยางหนงในระบบ Network ทใชเปนทางเดนของขอมล ระหวาง Workstation กบ Server มลกษณะคลายสายไฟหรอสายโทรศพทแลวแตชนด ของ Cable แตการ

เลอกใช Cable นนควรค านงถงความปลอดภย (Safety) และคลนรบกวน (Interference) เปนส าคญ สายสงขอมลทดไมควรเปน ตวน าไฟ เมอเกดอคคภยขน และสามารถ ปองกนคลนรบกวนจากอ านาจแมเหลก และคลนวทยได ลกษณะของสายสงขอมล แบงไดดงน สาย Coaxial Cable หรอ สาย Coax นอกจากใชในระบบ Network แลวยงสามารถ น าไปใชกบระบบ TV และ Mainframe ไดดวย สาย Coax นนเปนสายทประกอบไปดวยแกนของ ทองแดงหมดวยฉนวน และสายดน (ลกษณะเปนฝอย) หมดวยฉนวนบางอกชนหนง ในปจจบนไดเปลยนจากลวดทองแดงมาเปนลวดเงนทพนกนหลาย ๆ เสนแทน ทงนเพอปองกนการรบกวน ทเรยกวา "Cross Talk" ซงเปนการรบกวนทเกดจากสายสญญาณขางเคยง สาย Twisted Pair Cable เปนสายสงสญญาณทประกอบไปดวยสายทองแดง 2 เสน ขนไปบดกนเปนเกลยว (Twist) แลวหมดวยฉนวน โดยแบงเปน 2 แบบคอ แบบม Shield และ แบบไมม Shield จะมฉนวนในการปองกนสญญาณรบกวน หรอระบบปองกนสญญาณรบกวน โดยเรยกสาย Cable ทงสองนวา "Shielded Twisted Pair (STP)" และ "Unshielded Twisted Pair (UTP)" สาย Shielded Twisted Pair (STP) หรอทเรยกวา "สายคบดเกลยวชนดหมฉนวน" เปนสายค บดเกลยวทหมดวยฉนวนชนนอกทหนาอกชนหนง เพอปองกนการรบกวนของคลน แมเหลกไฟฟา สาย Unshielded Twisted Pair (UTP) หรอทเรยกวา "สายคบดเกลยว ชนดไมหมฉนวน" เปนสายคบดเกลยวทหมดวยฉนวนชนนอกทบางอกชน ท าใหสะดวก ในการโคงงอ สาย UTP เปนสายทมราคาถกและ หางาย แตปองกนสญญาณรบกวน ไดไมดเทากบสาย STP สาย Fiber Optic Cable เปนสายใยแกวน าแสงชนดใหม ประกอบดวยทอใยแกว ทมขนาดเลกและบางมาก เรยกวา "CORE" ลอมรอบดวยชนของใยแกวทเรยกวา "CLADDING" อตราการสงถายขอมลสงถง 565 เมกะบตตอวนาท หรอมากกวา ปองกนสญญาณรบกวนไดดมาก ขนาดของสายเลกมากและเบามากแตมราคาแพง นอกจากการสอสารขอมลตามสายรปแบบตาง ๆ แลว ยงมการสงขอมลแบบไรสาย (Wireless Transmission) ซงเปนการสงขอมลผานบรรยากาศโดยไมตองอาศยสายสง สญญาณใด ๆ เชน ระบบไมโครเวฟ ดาวเทยมสอสาร โทรศพทเคลอนท เปนตน ซงเปน สญญาณแมเหลกไฟฟาทมความถแตกตางกน ท าใหการสอสาร ท าไดรวดเรวและครอบคลมทกมมโลก

แบบประเมนการวางการท างาน........................................................................ วชา ง30201 การสรางเวบไซต ชนม.4 หนวยการเรยนท....... เรอง........................................................................... นางสาว/นาย.................................................................ชน................... ผประเมน นกเรยน คร

รายการประเมน ระดบคณภาพ คะแนนทได

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

รวมคะแนนทได

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

วนท................................ หมายเหต ระดบ 4 คะแนนทได 4 คะแนน ระดบ 3 คะแนนทได 3 คะแนน ระดบ 2 คะแนนทได 2 คะแนน ระดบ 1 คะแนนทได 1 คะแนน

แผนการจดการเรยนรท 2 ชอเรอง โครงสรางของภาษา HTML จ านวน 2 คาบ กลมสาระการเรยนรการงานอาชพและเทคโนโลย ชนมธยมศกษาปท 4 ภาคเรยนท 1 หนวยการเรยนรท 2 ปการศกษา 2553 มาตรฐานการเรยนร

มาตรฐาน ง 3.1 เขาใจ เหนคณคา และใชกระบวนการเทคโนโลยสารสนเทศในการสบคนขอมลการเรยนร การสอสาร การแกปญหา การท างาน และอาชพอยางมประสทธภาพ ประสทธผล และมคณธรรม สาระส าคญ โครงสรางของภาษา HTML ประกอบดวย 3 สวนคอ สวนท 1 Tag HTML บอกถงภาษาทใช สวนท 2 Tag HEAD เปน Tag แสดง Title สวนท 3 Tag Body เปนสวนของการแสดงเนอหาและเปนสวนทส าคญทสดของโครงสรางภาษา HTML จดประสงคการเรยนร 1. นกเรยนอธบายลกษณะโครงสรางของ HTML ไดถกตอง 2. นกเรยนอธบายลกษณะของค าสง HTML ไดถกตอง 3. นกเรยนเขยนค าสงตาง ๆ ของHTML ไดถกตอง 4. นกเรยนเขยนโครงสรางภาษา HTML ไดถกตอง กจกรรมการเรยนร ขนน าเขาสบทเรยน 1. ครกลาวทกทายนกเรยน 2. ครใหนกเรยนเขาเวบไซต http://tc.mengrai.ac.th/paisan/ ซงเปนเวบไซตการเรยนรวชาการสรางเวบไซตโดยใชภาษา HTML ของครไพศาล ชนะกล

3. ครใหนกเรยนสมครเปนสมาชกของเวบไซตของครไพศาล ซงครอธบายวาการสมครสมาชกใหม เพอก าหนด Username และ Password ในการเขาเรยนในเวบไซต จะตองเขาสระบบทกครงดวย Username และ Password ทไดจากการลงทะเบยนในครงแรก ขนสอน 1. ครใหนกเรยน Login เขาไปยงบทเรยนตาง ๆ โดยบทเรยน HTML มทงหมด 9เรอง โดยเรมเรยนเรองท 1 จนถงเรองท 9 2. ครอธบายวากอนทนกเรยนจะศกษาเนอหาตองท าแบบทดสอบกอนเรยนกอนถงจะเขาไปศกษาเนอหาในแตละหนวยได 3. หลงจากนนครใหนกเรยนเขาศกษาเนอหาในบทท 1 ความรเบองตน HTML 4. ครซกถามนกเรยนวา Home Page , Web Page , Website มขอแตกตางกนอยางไร

http://tc.mengrai.ac.th/paisan/

ครคาดค าตอบวา “ Home page เปนหนาแรกของเวบไซต , Web page เปนเอกสารตาง ๆ ทอยในเวบไซต , Web site แหลงเกบเวบเพจหลาย ๆ หนา” 5. ครชนชมกบค าตอบของนกเรยนและใหดาวในบทท 1 คนละ 1 ดวง 6. ครใหนกเรยนท าแบบทดสอบหลงเรยนในบทท 1 และศกษาในบทท 2 โครงสราง HTML 7. ครใหนกเรยนศกษาเนอหาในบทท 2 และท าแบบฝกทกษะ โดยใหเขยนโครงสรางภาษา HTML ลงในแบบฝกทกษะ 8. ครอธบายตออกวา ถานกเรยนพมพ Tag ตางๆ ตามทไดศกษาลงในชองแตละบรรทด แลวคลก Preview จะแสดงในรปของเวบเพจ คลก Clear เพอลบ Tag ตางๆ ในชองทงหมดคลก Check Tag เปนการตรวจสอบความถกตองในการพมพ Tag เพอน ามาแกไข และบนทกคะแนนการฝกทกษะ ขนสรป 1.ในบทท 1 เรองความรเบองตน HTML ครสรปใหนกเรยนฟงวา

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

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

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

2. ในบทท 2 เรองโครงสราง HTML ครสรปใหนกเรยนฟงวา ค าสง <HTML> เปนค าสงเรมตนในการเขยนโปรแกรม และ </HTML>เปนค าสงจดสนสด

โปรแกรม ค าสง <HEAD> ใชก าหนดขอความ ในสวนทเปน ชอเรอง ภายในค าสงน จะมค าสงยอย อกหนง

ค าสง คอ <TITLE> ค าสง <TITLE> เปนสวนแสดงไตเตลบาร (Title bar) ทเปนชอของวนโดวขางบนไมควรใหยาวเกนไปเพยงใหรวาเวบเพจทก าลงใชงานอยเกยวของกบอะไร ค าสง <BODY> เปนค าสงทใชแสดงขอบเขตของเนอหาของเวบเพจ เปนสวนส าคญทใชแสดงผลเมอมการเรยกดขอมลจากเวบบราวเซอร ซงจะแสดงขอมลทงทเปนขอความตวอกษร ตาราง รปภาพ และแบบฟอรมตางๆ

สอและแหลงเรยนร สอการจดการเรยนร 1. เอกสารความร 2. E-Learning (http://tc.mengrai.ac.th/paisan/ ) แหลงเรยนร 1. หองสมดโรงเรยนเมงรายมหาราชวทยาคม 2. www.mengrai.ac.th/ebook 3. http://tc.mengrai.ac.th/paisan/ การวดและประเมนผล ดานความร ( K) - ตรวจผลงานจากการท ากจกรรมใบงาน - การปรกษาหารอกนภายในกลม

- ประเมนผลจากคะแนนทบนทกไวจากเวบเรยนรจากครไพศาล ดานคณธรรม จรยธรรม ( A) - สงเกตการท างานขณะปฏบตงาน - สงเกตการความเขาใจหลงการสอน - ประเมนผลจากใบงาน ดานทกษะ/กระบวนการ ( P) - สงเกตพฤตกรรมการท างาน ตามแบบประเมนคณลกษณะ - ประเมนผลจากคะแนนทบนทกไวจากเวบเรยนรจากครไพศาล



4 3 2 1

การเขยนโครงสรางภาษา HTML

ความถกตองของ code ในตวเวบไซต อยางครบถวนและแสดงผลไดอยางถกตอง

สามารถแสดงผลไดอยางถกตอง

สามารถแสดงผลไดแตไมครบถวนตามทก าหนดไว

ไมสามารถแสดงผลตามทก าหนดไว

ความเขาใจของ Code HTML

สามารถอธบายความหมายของค าสงแตละอยางได แลวน ามาใชไดอยางถกตองและถกท

สามารถน าค าสง ตาง ๆ เขามาใชในชนงานไดอยางถกตองและถกท

วาง Code ค าสงไวไมถกทและไมเขาใจความหมาย

ไมสามารถวาง code ค าสงไดและไมเขาใจความหมาย

แบบฝกทกษะ

เสรจกอนเวลาทก าหนด มความเรยบรอยเปนไปตามผลทคาดหวง

เสรจตามเวลาทก าหนด มความเรยบรอยเปนไปตามผลทคาดหวง

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

งานไมสมบรณ

ใบความรท 2 เรอง โครงสรางภาษา HTML

โครงสรางภาษา HTML ค าสงเรมตน รปแบบ <HTML>.....</HTML> ค าสง <HTML> เปนค าสงเรมตนในการเขยนโปรแกรม และ </HTML>เปนค าสงจดสนสดโปรแกรมเหมอนค าสง Begin และ End ใน Pascal สวนหว รปแบบ <HEAD>.....</HEAD> ใชก าหนดขอความ ในสวนทเปน ชอเรอง ภายในค าสงน จะมค าสงยอย อกหนงค าสง คอ <TITLE> ก าหนดขอความในไตเตลบาร รปแบบ <TITLE>.....</TITLE> ตวอยาง <TITLE> บทเรยน HTML </TITLE> เปนสวนแสดงชอของเอกสารจะปรากฎขณะทไฟล HTML ท างานอยขอความทก าหนดในสวนน จะไมถกน าไปแสดงผลของเวบเบราเซอรแตจะปรากฎในสวนของไตเตลบาร (Title bar) ทเปนชอของวนโดวขางบนไมควรใหยาวเกนไปเพยงใหรวาเวบเพจทก าลงใชงานอยเกยวของกบอะไร โครงสรางภาษา HTML <HTML> <HEAD> <TITLE>ชอ…HTML…</TITLE> </HEAD> <BODY> ..ค าสงตาง ๆ.. </BODY> </HTML> ค าสง <BODY> เปนค าสงทใชแสดงขอบเขตของเนอหาของเวบเพจ เปนสวนส าคญทใชแสดงผลเมอมการเรยกดขอมลจากเวบบราวเซอร ซงจะแสดงขอมลทงทเปนขอความตวอกษร ตาราง รปภาพ และแบบฟอรมตางๆ ค าสง <BODY> ประกอบดวย Attribute ตาง ๆ ดงน BGCOLOR คอค าสงเสรมทใชส าหรบก าหนดสพนหลงของเวบเพจ โดยคาของสจะเปนเลขฐานสบหกหรอชอของส

BACKGROUND คอค าสงเสรมทใชส าหรบก าหนดรปภาพทจะน ามาเปนพนหลงบนเวบเพจ TEXT คอค าสงเสรมทใชส าหรบก าหนดสของขอความภายในเวบเพจ TOPMARGIN คอค าสงเสรมทใชส าหรบก าหนดระยะหางของเวบเพจจากทาง ดานบนของจอภาพโดยคาทระบจะมหนวยเปนพกเซล (pixel) BOTTOMMARGIN คอค าสงเสรมทใชส าหรบก าหนดระยะหางของเวบเพจจากทาง ดานลางของจอภาพโดยคาทระบจะมหนวยเปนพกเซล (pixel) RIGHTMARGIN คอค าสงเสรมทใชส าหรบก าหนดระยะหางของเวบเพจจากทาง ดานขวาของจอภาพโดยคาทระบจะมหนวยเปนพกเซล (pixel) LEFTMARGIN คอค าสงเสรมทใชส าหรบก าหนดระยะหางของเวบเพจจากทาง ดานซายของจอภาพ โดยคาทระบจะมหนวยเปนพกเซล (pixel) LINK คอค าสงเสรมทใชส าหรบก าหนดสของขอความทใชเปนตว เชอมโยง (hyperlink) ภายในเวบเพจ ALINK คอค าสงเสรมทใชส าหรบก าหนดสของขอความทใชเปนตว เชอมโยง (hyperlink) VLINK คอค าสงเสรมทใชส าหรบก าหนดสของขอความทใชเปนตว เชอมโยง (hyperlink) หลงจากทเคยคลกท hyperlink นน ๆ ไปแลวกอนหนาน

แบบทดสอบกอนเรยน – หลงเรยน เนอหาโครงสราง HTML

ใบงานท 2 แบบฝกทกษะ โครงสราง HTML





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


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

มาตรฐาน ง 3.1 เขาใจ เหนคณคา และใชกระบวนการเทคโนโลยสารสนเทศในการสบคนขอมลการเรยนร การสอสาร การแกปญหา การท างาน และอาชพอยางมประสทธภาพ ประสทธผล และมคณธรรม สาระส าคญ การจดรปแบบเอกสาร HTML เปนการจดหนาเวบเพจใหเหมาะสมกบเนอหาและนาสนใจ โดยม Tag Hx เปนการก าหนดหวเรอง Tag Font เปนการก าหนดขนาด สและแบบตวอกษร Tag B ท าใหตวอกษรหนา Tag I ตวอกษรเอยง Tag U ขดเสนใต ตวอกษร Tag Center จดกงกลาง Tag Br ขนบรรทดใหม Tag Hr เสนคน และตวอกษรแบบพเศษ ใชรหสแบบตวเลข จดประสงคการเรยนร 1. นกเรยนก าหนดหวเรองโดยใชค าสง Hx ไดถกตอง 2. นกเรยนเลอก ขนาด สและแบบตวอกษร ไดถกตองและเหมาะสมกบเนอหา 3. นกเรยนสามารถเลอกใชตวอกษรพเศษไดถกตอง 4. นกเรยนสามารถจดต าแหนงขอความ ไดถกตองและเหมาะสม กจกรรมการเรยนร ขนน าเขาสบทเรยน 1. ครกลาวทกทายนกเรยน 2. ครใหนกเรยนเขาเวบไซต http://tc.mengrai.ac.th/paisan/ ซงครอธบายวากอนทจะไปยงบทท 3 การก าหนดรปแบบขอความนนนกเรยนตองท าแบบทดสอบหลงเรยนของบทท 2 กอน

ขนสอน

1. ครใหนกเรยนท าแบบทดสอบกอนเรยนในบทท 3 การก าหนดรปแบบขอความ

2. หลงจากนนครใหนกเรยนศกษาเนอหาในบทท 3 และท าแบบฝกทกษะ โดยพมพประวตสวนตวไมนอยกวา 5 บรรทด พรอมตกแตงมตวหนงสอและสพนหลงใหสวยงามตามโครงสราง HTML ลงในแบบฝกทกษะ 3. ครอธบายตออกวา ถานกเรยนพมพ Tag ตางๆ ตามทไดศกษาลงในชองแตละบรรทด แลวคลก Preview จะแสดงในรปของเวบเพจ คลก Clear เพอลบ Tag ตางๆ ในชองทงหมดคลก Check Tag เปนการตรวจสอบความถกตองในการพมพ Tag เพอน ามาแกไข และบนทกคะแนนการฝกทกษะ


4. ครสาธตใหนกเรยนดถงการใชค าสงตาง ๆ ในบทท 3 พรอมทงตกแตงสตวอกษรและสพนหลง และใหนกเรยนปฏบตตาม ขนสรป 1. ครสรปใหนกเรยนฟงวาในการก าหนดรปแบบขอความนนม Attribute ทส าคญกคอการใชค าสง <FONT color=โคดส size=ขนาดตวอกษร></FONT> ซงเวบไซตทกเวบจะประกอบดวยเนอหาตาง ๆ ซงเนอหาตาง ๆ เหลานนจะตองมการก าหนดขนาด ก าหนดสใหตวอกษรมความนาสนใจมากขน รวมทงสามารถก าหนดตวอกษรใหมความหนา เอยง และขดเสนใตใหเดนชด สอและแหลงเรยนร สอการจดการเรยนร 1. เอกสารความร 2. E-Learning (http://tc.mengrai.ac.th/paisan/ ) แหลงเรยนร 1. หองสมดโรงเรยนเมงรายมหาราชวทยาคม 2. www.mengrai.ac.th/ebook 3. http://tc.mengrai.ac.th/paisan/ การวดและประเมนผล ดานความร ( K) - ตรวจผลงานจากการท ากจกรรมใบงาน - การปรกษาหารอกนภายในกลม ดานคณธรรม จรยธรรม ( A) - สงเกตการท างานขณะปฏบตงาน - สงเกตการความเขาใจหลงการสอน - ประเมนผลจากใบงาน ดานทกษะ/กระบวนการ ( P) - สงเกตพฤตกรรมการท างาน ตามแบบประเมนคณลกษณะ

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

การก าหนดหวเรอง (Heading) <Hx>..</Hx>

ในการสรางเวปเพจ เรามกก าหนดหวเรอง (Heading) ไวดานบนสด เนองจากจะเปนทสงเกต มองเหนไดงาย ทสด โดยภาษา HTML แยกขนาดของหวเรอง (Heading) ได 6 ระดบ ซง H1 จะใหญทสด จนถง H6 จะมขนาดเลกทสด

ค าสงทใชในการก าหนดหวเรอง (Heading) เขยนไดดงน <Hx>.....<Hx> โดย x เทากบ ตวเลข 1- 6 ซงเปนขนาดของตวอกษร การก าหนดขนาดตวอกษร <Font Size=n>..</Font>

ใหก าหนดขนาดหวขอดวยค าสง <Hx> เราจะพบวาสวนของขอความทเขยนตอกนนนจะอยคนละบรรทดกน ไมสามารถทจะท าใหตวอกษรมขนาดทตางๆกนใหอยในบรรทดเดยวกนได ดวยเหตนเรามาลองใชค าสง <Font size=value> โดย value คอจ านวนตวเลข 1- 7 (ขนาดของตวอกษรม 7 ขนาด) โดยตวเลขทมาก หมายถงขนาดทมากกวา ซงตรงกนขามกบ <Hx> <font>จะม แอตทรบวต(attribute) เปนสวนขยายใน tag ใชส าหรบ format คาเพมเตม เชนขนาด ส ระยะหาง เปนตนคาของ attribute (attribute value)

รปแบบค าสง <FONT Attribute=value> ขอความ </FONT> ม Attribute ดงน SIZE เปนการก าหนดขนาดของตวอกษร 1-7

COLOR เปนการก าหนดสตวอกษรสามารถก าหนดเปนเลขฐาน 16 จานวน 6 ตว หรอ ชอของสตาง ๆ FACE เปนแบบตวอกษร เชน tahoma, Ms Sans Serif และใชค าสง <Font face="ตวอกษรทตองการใหแสดง"> แทรกเขาไป และ color เชน <FONT Face="Ms Sans Serif" color="#FF0000" SIZE="5"></font>

การจดวางต าแหนงขอความ <p>......</p> <p> คอค าสงทใชส าหรบยอหนาใหมในการจดวางต าแหนงตวอกษรใหชดซาย ชดขวา หรอใหอยตรงกลางนน เราใชแอตตรบวท align=" Left | Center | Right" ลงไปภายในtag <p>

การจดขอความใหอยตรงกลาง <center>...</center> ในการใชแอตทรบวต Align=center นน จะจดขอความไดเฉพาะชดอกษรทระบค าสงนไปเทานน แตถาเราตองการจดใหขอความนอยตรงกลาง โดยไมตองเขยนค าสงนหลายหน ควรใชค าสง <Center> ... </Center>

การขนบรรทดใหม <BR> ในการขนบรรทดใหมนน เราใชค าสง <BR> ในบรเวณต าแหนงทตองการเลอนบรรทด การใสเสนคน <HR> ใชคาสง <HR>

ค าสงนนยมใช ในการแบงขอความออกเปนตอน เรอง หรอสวน เพราะจะท าใหเกดความสวยงาม และเปนระเบยบ ALIGN เปนการจดต าแหนงของเสนตรง เชน ชดซาย หรอชดขวา หรอจดกงกลาง WIDTH เปนการก าหนดความยาวของเสน มหนวยเปนพกเซล หรอเปนเปอรเซนตกได โดยพมพ % หลงความยาว เชน width=20% SIZE เปนการก าหนดขนาดของเสนมหนวย เปน Pixel COLOR เปนการก าหนดสของเสน สามารถก าหนดเปนเลขฐาน 16 จานวน 6 ตว หรอ ชอของสตาง ๆ พมพ <HR> แสดงไดดงน การก าหนดความยาวของเสนคน <HR WIDTH=number | percent>

ในการก าหนดความยาวของเสนคน เราสามารถก าหนดได 2 รปแบบ โดยการเพมแอตทรบวต WIDTH เขาไปในค าสง <HR> การก าหนดความยาวของเสนคนใหมขนาดทแนนอนนน จะเปนการก าหนดความยาวตามจ านวนจดของพกเซลลบนจอภาพ

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

ใบงานท 3 แบบฝกทกษะ การก าหนดรปแบบขอความ

ค าชแจง ท าแบบฝกทกษะโดยใชโครงสราง HTML เขยนค าสงของการก าหนดรปแบบขอความ ตวอยาง code ในการท าแบบทดสอบ

ตวอยางการแสดงผลของ code

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

รายการประเมน ความสามารถของผเรยน ระดบคณภาพ 5 4 3 2 1

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

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

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

สรปการประเมน ดมาก ด พอใช ปรบปรง แย ลงชอ.................................................... (.....................................................) ผสอนประเมน ระดบคณภาพ ดมาก ด พอใช ปรบปรง แย เกณฑการใหคะแนน

5 4 3 2 1

แผนการจดการเรยนรท 4 ชอเรอง การแสดงผลแบบรายการ จ านวน 2 คาบ กลมสาระการเรยนรการงานอาชพและเทคโนโลย ชนมธยมศกษาปท 4 ภาคเรยนท 1 หนวยการเรยนรท 4 ปการศกษา 2553 มาตรฐานการเรยนร

มาตรฐาน ง 3.1 เขาใจ เหนคณคา และใชกระบวนการเทคโนโลยสารสนเทศในการสบคนขอมลการเรยนร การสอสาร การแกปญหา การท างาน และอาชพอยางมประสทธภาพ ประสทธผล และมคณธรรม สาระส าคญ การแสดงผลแบบรายการเปนการแสดงเลขล าดบหวขอเปนตวเลขอนด อารบค เลขโรมนหรอตวอกษร a-z หรอ การแสดงในรปของสญลกษณ วงกลมทบ วงกลมโปรง สเหลยม การใชงานสวนใหญ เปนการแสดงหวขอเรองหรอหวขอยอย จดประสงคการเรยนร 1. นกเรยนอธบายการสรางเลขล าดบรายการ ไดถกตอง 2. นกเรยนอธบายการสรางสญลกษณแบบไมเรยงล าดบรายการ ไดถกตอง 3. นกเรยนเขยนค าสงของ UL,OL,MENU,DIR,DL ไดถกตอง กจกรรมการเรยนร ขนน าเขาสบทเรยน 1. ครกลาวทกทายนกเรยน 2. ครใหนกเรยนเขาเวบไซต http://tc.mengrai.ac.th/paisan/ ซงครอธบายวากอนทจะไปยงบทท 4 การแสดงผลแบบรายการนนนกเรยนตองท าแบบทดสอบหลงเรยนของบทท 3 กอน

ขนสอน

1. ครใหนกเรยนท าแบบทดสอบกอนเรยนในบทท 4 การแสดงผลแบบรายการ

2. หลงจากนนครใหนกเรยนศกษาเนอหาในบทท 4 การแสดงผลแบบรายการและใหท าแบบฝกทกษะโดยใหสรางขอสอบวชาภาษาไทย 2 ขอและวชาภาษาองกฤษ 2 ขอ โดยแตงขอสอบเอง 3. ครอธบายตออกวา ถานกเรยนพมพ Tag ตางๆ ตามทไดศกษาลงในชองแตละบรรทด แลวคลก Preview จะแสดงในรปของเวบเพจ คลก Clear เพอลบ Tag ตางๆ ในชองทงหมดคลก Check Tag เปนการตรวจสอบความถกตองในการพมพ Tag เพอน ามาแกไข และบนทกคะแนนการฝกทกษะ 4. ครสาธตใหนกเรยนดถงการใชค าสงตาง ๆ ในบทท 4 ทจะใชในการสรางขอสอบแบบรายการ ซงครอธบายตอวาบางค าสงเชน <DIR></DIR> และ <MENU></MENU> จะแสดงผลเหมอนกบค าสง <UL></UL>


ขนสรป 1. ครสรปใหนกเรยนฟงวาในการแสดงผลแบบรายการนนมหลายรปแบบทงการใชตวเลขก ากบและใชแบบสญลกษณก ากบ ฯลฯ ซงท าใหหวขอตางๆ ดเปนระเบยบมากยงขน สอและแหลงเรยนร สอการจดการเรยนร 1. เอกสารความร 2. E-Learning (http://tc.mengrai.ac.th/paisan/ ) แหลงเรยนร 1. หองสมดโรงเรยนเมงรายมหาราชวทยาคม 2. www.mengrai.ac.th/ebook 3. http://tc.mengrai.ac.th/paisan/ การวดและประเมนผล ดานความร ( K) - ตรวจผลงานจากการท ากจกรรมใบงาน - การปรกษาหารอกนภายในกลม ดานคณธรรม จรยธรรม ( A) - สงเกตการท างานขณะปฏบตงาน - สงเกตการความเขาใจหลงการสอน - ประเมนผลจากใบงาน ดานทกษะ/กระบวนการ ( P) - สงเกตพฤตกรรมการท างาน ตามแบบประเมนคณลกษณะ

ใบความรท 4 เรองการแสดงผลแบบรายการ

รายการแบบใชสญลกษณกากบ <UL>..</UL>

รายการแบบใชสญลกษณก ากบ (Unnumber Lists หรอ Unorder Lists) <UL>..</UL> เปนค าสงใหแสดงผลขอมล แบบรายการโดยไมใช ตวเลขเปนตวแสดงล าดบของรายการเพราะในการแสดงผลจะใชเครองหมายแทนตวเลข โปรแกรมเวบเบราเซอรแตละตวจะก าหนดรปภาพทแสดงออกเปนหวขอในแตละรายการแตกตางกนไป บางโปรแกรมเปนจดกลม สเหลยม รปหวใจ หรอรปอนๆ ตามทเลอก ภายใน <UL>...</UL> จะมค าสง <LI> เปนสวน ประกอบส าคญของการแสดงรายการของขอมล สมาชกของรายกาย(List) <LI>

เปนสวนทขอความทถกน ามาแสดงเปนรายยอย มกเปนขอความทไมยาวมากนก สวนใหญจะเปนหวขอ List Item (LI) จะมจ านวนเทาใดกได และค าสงนไมมตวปด รปแบบค าสง <UL Attribute=value> ..<li>..<li>..</UL> การก าหนดสญลกษณ (TYPE=n)

ปกตรปแบบของสญลกษณทปรากฏอยในเบราเซอร มกจะเปนแบบจดกลม แตส าหรบ Netscape เราสามารถเปลยนแปลงสญลกษณนไดโดยการก าหนดรปแบบ ของสญลกษณลงไปในสวนของ <UL> หรอ <LI> ดวยการเพมแอตทรบวต TYPE=n ซง n มคาเปน Disc, Circle, Square รายการแบบใชตวเลขและตวอกษรก ากบ <OL>..</OL> รายการแบบใชตวเลขก ากบ (Numbered Lists หรอ Order Lists) เชนเดยวกบ <UL>..</UL> ภายใน <OL>..</OL> กจะประกอบดวย แอตทรบวต <LI> เหมอนกน

รปแบบค าสง <OL Attribute=value> ..<li>..<li>..</OL> TYPE เปนการก าหนดเลขหรอตวอกษร ในการก ากบหวขอ STARTเปนการเรมตนของเลขหรอตวอกษร ในการก ากบหวขอ

รายการแบบเมน <MENU>..</MENU> เปนรปแบบการแสดงรายการทพบเหนไดทวไป ซงการแสดงผลเหมอนกบ ค าสง <UL> ... </UL>

รายการแบบไดเรกทอร <DIR>..</DIR> เปนรปแบบการแสดงรายการอกรปแบบหนง มลกษณะเหมอนกบ <UL> ... </UL> แต สามารถใช

ตวอกษรไดสงสด 24 ตวอกษร

รายการแบบคาจดกดความ <DL>..</DL> เปนค าสงทอยในรปแบบของค าจดกดความ ค าศพท หวขอ ส าหรบการน าเอามาใชงานนน ไม

สามารถน ามาใชรวมกบค าสง <LI> ได แตจะใชกบค าสง <DT> และ <DT> แทน <DT> หรอ ค าจดกดความ

เปนชอของค าจดกดความ ค าศพท หรอหวขอทตองการใหมค าอธบาย <DT> หรอ ค าอธบาย

เปนสวนประกอบยอยของ <DT> อกทหนง ใชเปนขอความบรรยายแสดงรายละเอยดของค าจดกดความ ค าศพทหรอหวขอทก าหนดนน รายการแบบค าจดกดความแบบกระชบ <DL COMPACT> ในกรณทตองการแสดงผลขอมลให <DT> และ <DT> ใหอยในบรรทดเดยวกนใหเพมแอตทรบวต Compact ในค าสง <dl> เปน <DL COMPACT> หากขอความทอยใน <DT> ไมยาวมากนก เวบบราวเซอรจะน าเอา ค าอธบายทอยใน <DD>มารวมอยในบรรทดเดยวกน

ใบงานท 4 แบบฝกทกษะ การแสดงผลแบบรายการ

ค าชแจง ท าแบบฝกทกษะโดยใชโครงสราง HTML เขยนค าสงของการแสดงผลแบบรายการ ตวอยาง code ในการท าแบบฝกทกษะ


แบบทดสอบกอนเรยน หลงเรยน การแสดงผลแบบรายการ

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


1. ทกษะในการท างานการประมวลผลขอมล

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

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

3. ทกษะกระบวนการท างานกลม

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


5 4 3 2 1







5 4 3 2 1

แผนการจดการเรยนรท 5 ชอเรอง การจดการรปภาพ จ านวน 2 คาบ กลมสาระการเรยนรการงานอาชพและเทคโนโลย ชนมธยมศกษาปท 4 ภาคเรยนท 1 หนวยการเรยนรท 5 ปการศกษา 2553 มาตรฐานการเรยนร

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

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

กจกรรมการเรยนร ขนน าเขาสบทเรยน 1. ครกลาวทกทายนกเรยน 2. ครใหนกเรยนเขาเวบไซต http://tc.mengrai.ac.th/paisan/ ซงครอธบายวากอนทจะไปยงบทท 5 การจดการรปภาพนนนกเรยนตองท าแบบทดสอบหลงเรยนของบทท 4 กอน

ขนสอน

1. ครใหนกเรยนท าแบบทดสอบกอนเรยนในบทท 5 การจดการรปภาพ

2. หลงจากนนครใหนกเรยนศกษาเนอหาในบทท 5 การจดการรปภาพและใหท าแบบฝกทกษะโดยใหเวบมาสเตอรประกอบดวยรปภาพ 1 รป และขอความอยดานขางของรป แสดงประวตตนเองไมนอยกวา 5 บรรทด 3. ครอธบายตออกวา ถานกเรยนพมพ Tag ตางๆ ตามทไดศกษาลงในชองแตละบรรทด แลวคลก Preview จะแสดงในรปของเวบเพจ คลก Clear เพอลบ Tag ตางๆ ในชองทงหมดคลก Check Tag เปนการตรวจสอบความถกตองในการพมพ Tag เพอน ามาแกไข และบนทกคะแนนการฝกทกษะ 4. ครสาธตใหนกเรยนดถงการใชค าสงตาง ๆ ในบทท 5 ทจะใชในการแทรกรปภาพในหนาเวบไซตพรอมทงแสดงขอความอยดานขางของรป


ขนสรป 1. ครสรปใหนกเรยนฟงวาในเวบไซตแตละเวบไซตจะมรปภาพไวเพอตกแตงเวบไซตใหสวยงามและเปนองคประกอบหนงทท าใหเวบไซตเปนทนาสนใจของผเขามาชม ซงค าสงในการจดการรปภาพนนกคอ <img src=ชอ/url> สอและแหลงเรยนร สอการจดการเรยนร 1. เอกสารความร 2. E-Learning (http://tc.mengrai.ac.th/paisan/ ) แหลงเรยนร 1. หองสมดโรงเรยนเมงรายมหาราชวทยาคม 2. www.mengrai.ac.th/ebook 3. http://tc.mengrai.ac.th/paisan/ การวดและประเมนผล ดานความร ( K) - ตรวจผลงานจากการท ากจกรรมใบงาน - การปรกษาหารอกนภายในกลม ดานคณธรรม จรยธรรม ( A) - สงเกตการท างานขณะปฏบตงาน - สงเกตการความเขาใจหลงการสอน - ประเมนผลจากใบงาน ดานทกษะ/กระบวนการ ( P) - สงเกตพฤตกรรมการท างาน ตามแบบประเมนคณลกษณะ

ใบความรท 5 เรองการจดการรปภาพ

การจดการรปภาพ <IMG SRC=ชอรปภาพ> ในการใสรปภาพเพอแสดงผลนน เราใชค าสง <IMG SRC=รปภาพ> เปนตวก าหนดรปภาพท

ตองการไฟลทใชควรเปนชนด JPEG หรอ GIF เพราะโปรแกรม Web Browser สวนใหญจะสนบสนนไฟล 2 ชนดน

SRC เปนการจดการรปภาพโดยการก าหนดทอยและชอไฟล ALT เปนการแสดงขอความเมอน าเมาสไปชทรปภาพ เชน alt="รปกลวยไมในงานดอกไมบาน" WIDTH เปนการก าหนดความกวางของรปภาพ มหนวยเปนพกเซล หรอเปนเปอรเซนตกได โดย

พมพ % หลงความยาว เชน width=20% HEIGHT เปนการก าหนดความสงของรปภาพ มหนวยเปนพกเซล หรอเปนเปอรเซนตกได โดย

พมพ % หลงความยาว เชน width=40% ALIGN เปนการจดต าแหนงของรปภาพ และขอความประกอบรปภาพเชน ชดซาย หรอชดขวา

หรอจดกงกลาง การใสขอความ <IMG SRC=ชอรปภาพ ALT=ขอความ ท าหนาทเพออธบายความหมายของรปภาพ

และใชส าหรบผใช Internet แบบเทกซ (ซงจะเหนแตตวอกษรอยางเดยว) สามารถรไดวา รปนคออะไร มความหมายอยางไร ท าไดโดยการเพมแอตทรบวต ALT=ขอความ ตอจาก SRC=ชอไฟลรปภาพ แอตทรบวตนจะเปนตวก าหนดค าอธบายของรปภาพทน ามาแสดงผล นอกจากน หากเอา Mouseไปทบบนรปไวบราวเซอรจะแสดงค าอธบายขนมา

การวางต าแหนงรปภาพ ALIGN=ต าแหนง โดยปกตแลวเมอเราก าหนดขอความเพอใช แสดงความหมายหรอก ากบภาพ ถารปภาพไมใหญเกนไป ขอความนนจะปรากฏอยทสวนลางของภาพทาง ขวามอเสมอ เราสามารถก าหนดต าแหนงของรปภาพทแสดง บนจอภาพไดดวยการใชแอตทรบวต ALIGN ซงจะเปนตวก าหนดต าแหนงการแสดงผลวารปภาพนน จะถกวางต าแหนงไวทใด สาหรบการก าหนดต าแหนงใหรปภาพนน เราสามารถ แบงการแสดงผลได 2 แบบ ดงน 1. แบบแนวนอน ประกอบไปดวยต าแหนง ซาย และ ขวา 2. แบบแนวตง ประกอบไปดวยต าแหนงตางๆ 3 ระดบ ดงน เสมอบน ม 2 ค าสงคอ - top และ texttop - กงกลาง ม 2 ค าสงคอ middle และ absmiddle - เสมอลาง ม 3 ค าสงคอ baseline,bottom,absbottom

การก าหนดขนาดความกวางและความสงของรป (Width และ Height) ในการน ารปภาพมาแสดงผลนน บางครงรปบางรป อาจจะมขนาดใหญเกนไป ท าใหการแสดงผล

ออกมาไมสวยงาม ไมตรงขนาดทเราตองการจะใหแสดงผล การก าหนดขนาดความสงและความกวางของรปเราใชแอตทรบวต Width และ Height ซงมหนวยเปน Pixel การใสกรอบใหรปภาพ (Border=n)

โดยปกตรปภาพทแสดงบนจอภาพจะไมมเสนกรอบ หากตองการให ภาพทแสดงมเสนกรอบ ใหใสแอตทรบวต Border เราสามารถก าหนดขนาดของกรอบ รปภาพไดดวยการก าหนดใหแอตทรบวต Border=n หากคา n ยงมาก กรอบกยงหนาขน โดยปกตแลว n จะมคาเปน 0

ใบงานท 5 แบบฝกทกษะ การจดการรปภาพ

ค าชแจง ท าแบบฝกทกษะโดยใชโครงสราง HTML เขยนค าสงการจดการรปภาพ ตวอยาง code ในการท าแบบทดสอบ

ตวอยาง การแสดงผลของ code

แบบทดสอบกอนเรยน หลงเรยน การจดการรปภาพ









5 4 3 2 1

แผนการจดการเรยนรท 6 ชอเรอง การเชอมโยง web จ านวน 2 คาบ กลมสาระการเรยนรการงานอาชพและเทคโนโลย ชนมธยมศกษาปท 4 ภาคเรยนท 1 หนวยการเรยนรท 6 ปการศกษา 2553 มาตรฐานการเรยนร

มาตรฐาน ง 3.1 เขาใจ เหนคณคา และใชกระบวนการเทคโนโลยสารสนเทศในการสบคนขอมลการเรยนร การสอสาร การแกปญหา การท างาน และอาชพอยางมประสทธภาพ ประสทธผล และมคณธรรม สาระส าคญ ในการใชค าสงเพอเชอมโยงขอมลนน เราสามารถระบถงจดหมายไดโดยใชค าสง anchor (<a>….</a>) รวมกบแอตทรบวต HREF (ยอมาจากค าวา Hypertext Referance) ซงท าหนาทระบเปาหมาย (Target) โดยทเปาหมายคอ ต าแหนงปลายทางของการเชอมโยงขอมลเชน target=”_top” , target=”_blank” , target=”_parent” , tarent=”_self” จดประสงคการเรยนร

1. นกเรยนอธบายการเชอมโยงภายในและภายนอกเอกสารไดถกตอง 2. นกเรยนสามารถใชค าสงในการเชอมโยงเอกสารไดถกตอง 3. นกเรยนสามารถเชอมโยงเอกสารโดยระบเปาหมายไดถกตอง 4. นกเรยนสามารถก าหนดสอกษรทใชเชอมโยงขอมลไดถกตอง

กจกรรมการเรยนร ขนน าเขาสบทเรยน 1. ครกลาวทกทายนกเรยน 2. ครใหนกเรยนเขาเวบไซต http://tc.mengrai.ac.th/paisan/ ซงครอธบายวากอนทจะไปยงบทท 6 การเชอมโยงเวบนนนกเรยนตองท าแบบทดสอบหลงเรยนของบทท 5 กอน

ขนสอน

1. ครใหนกเรยนท าแบบทดสอบกอนเรยนในบทท 6 การเชอมโยงเวบ 2. หลงจากนนครใหนกเรยนศกษาเนอหาในบทท 6 การเชอมโยงเวบและใหท าแบบฝกทกษะโดยใหพมพชอเพอน 5 คนและคร 3 ทาน โดยเชอมโยงไปยงเพอน 5 เวบ และเวบคร 3 เวบ 3. ครอธบายตออกวา ถานกเรยนพมพ Tag ตางๆ ตามทไดศกษาลงในชองแตละบรรทด แลวคลก Preview จะแสดงในรปของเวบเพจ คลก Clear เพอลบ Tag ตางๆ ในชองทงหมดคลก Check Tag เปนการตรวจสอบความถกตองในการพมพ Tag เพอน ามาแกไข และบนทกคะแนนการฝกทกษะ


4. ครสาธตใหนกเรยนดถงการใชค าสงตาง ๆ ในบทท 6 เรองการเชอมโยงเวบไซต ในการเชอมโยงเวบค าสงทใชกนเปนประจ ากคอค าสง <a href=url>.....</a> และใหนกเรยนท าตามแบบฝกทกษะในบทท 6 ขนสรป 1. ครสรปใหนกเรยนฟงวาในเวบไซตแตละเวบไซตจะมหนาเพจมากกวาหนงหนา อยางเชนจากหนาโฮมเพจกสามารถคลกเพอเขาไปดขอมลในหนาอน ๆ ได ซงเราเรยกวาการเชอมโยงเวบเพจ หรอการลงค ซงกอนทเราจะท าการลงคหนาเวบเพจ เราจะตองมเวบเพจอยางนอย 2 หนาขนไป ถงจะท าการลงคได สอและแหลงเรยนร สอการจดการเรยนร 1. เอกสารความร 2. E-Learning (http://tc.mengrai.ac.th/paisan/ ) แหลงเรยนร 1. หองสมดโรงเรยนเมงรายมหาราชวทยาคม 2. www.mengrai.ac.th/ebook 3. http://tc.mengrai.ac.th/paisan/ การวดและประเมนผล ดานความร ( K) - ตรวจผลงานจากการท ากจกรรมใบงาน - การปรกษาหารอกนภายในกลม ดานคณธรรม จรยธรรม ( A) - สงเกตการท างานขณะปฏบตงาน - สงเกตการความเขาใจหลงการสอน - ประเมนผลจากใบงาน ดานทกษะ/กระบวนการ ( P) - สงเกตพฤตกรรมการท างาน ตามแบบประเมนคณลกษณะ

ใบงานท 6 เรองการเชอมโยง Web

ค าสงทใชในการเชอมโยง <a href >...</a> ในการใชค าสงเพอเชอมโยงขอมลนน เราสามารถระบถงจดหมายไดโดยใชค าสง anchor ( <a> ...

</a>) รวมกบแอตทรบวต HREF (ยอมาจากค าวา Hypertext REFerance) ซงท าหนาทระบเปาหมาย (Target) โดยทเปาหมายคอ ต าแหนงปลายทางของการเชอมโยงขอมลเชน target=_top ,target=_blank , target=_parent ,target=_self รปแบบค าสง <A Attribute=value> ขอความ .</A> HREF เปนการเชอมโยงไปยงต าแหนงในเอกสารหรอแฟมขอมล เชน href=http://www.sanook.com NAME เปนการก าหนดชอของต าแหนงทตองการเชอมโยง TARGET เปนลกษณะการเปดแฟมของการเชอมโยง เชน target=_blank เปนการเปดwindowใหม TITLE เปนการแสดงขอความเมอน าเมาสไปชทขอความ เชน alt="รปกลวยไมในงานดอกไมบาน" ALT เปนการแสดงขอความเมอน าเมาสไปชทรปภาพ เชน alt="รปกลวยไมในงานดอกไมบาน"

การเชอมโยงภายในแฟมเอกสาร เหมาะสาหรบใชกบเอกสารทมความยาวมากๆ ใชสาหรบเชอมโยงขอมล จากจดหนงไปยงอกจดหนงภายในแฟมเอกสารเดยวกน ส าหรบการใชการเชอมโยงภายในแฟมเอกสารท าไดดงน <a href=#เปาหมาย>Link </a> .. ขอความ เนอหาตางๆ .. <a name=ชอเปาหมาย></a>

ต าแหนงตรงน ตงชอ text การพมพ code ดงน <a name="text">ต าแหนงตรงน </a>และใชค าสง <a href="#top">ลองคลกทน</a>(link ใตลางน) และ ไดตงชอ top ท banner ต าแหนงดานบน การพมพ code ดงน <a name="top">ค าสงทใชในการเชอมโยง</a>โดยLink มายงต าแหนงตรงน

การใชภาพเปนจดเชอมโยง (<a href=link.htm> <img src=./images/picture.jpg></a>) นอกจากเราจะแสดงการเชอมโยงขอมลดวยตวอกษรแลว เรายงสามารถแสดงรปภาพแทนตวอกษรดวยค าสง <img src=รปภาพ> อยในระหวางค าใชทใชในการเชอมโยงขอมล เชน <a href=link.htm> <img src=../images/picture.jpg></a>

ใบงานท 6 แบบฝกทกษะการเชอมโยง Web

ค าชแจง ท าแบบฝกทกษะโดยใชโครงสราง HTML ในการเขยนค าสงการเชอมโยงระหวาง web หรอภายใน website เดยวกน ตวอยาง code ในการท าแบบฝกทกษะ


แบบทดสอบกอนเรยน หลงเรยน การเชอมโยง Web









5 4 3 2 1

แผนการจดการเรยนรท 7 ชอเรอง การสรางตาราง จ านวน 2 คาบ กลมสาระการเรยนรการงานอาชพและเทคโนโลย ชนมธยมศกษาปท 4 ภาคเรยนท 1 หนวยการเรยนรท 7 ปการศกษา 2553 มาตรฐานการเรยนร

มาตรฐาน ง 3.1 เขาใจ เหนคณคา และใชกระบวนการเทคโนโลยสารสนเทศในการสบคนขอมลการเรยนร การสอสาร การแกปญหา การท างาน และอาชพอยางมประสทธภาพ ประสทธผล และมคณธรรม สาระส าคญ ในการใชค าสงเกยวกบตารางจะตองมความเขาใจในเรองโครงสรางของตารางเปนส าคญ เพราะการเขยนเวบเพจทวไป จะใชตารางทซอนกนหลาย ๆ ตารางเปนการจดวางขอความและรปภาพในต าแหนงทตองการ จดประสงคการเรยนร 1. นกเรยนอธบายโครงสรางของตารางไดถกตอง 2. นกเรยนสามารถใชค าสงในการสรางตารางไดถกตอง 3. นกเรยนสามารถก าหนดสใหตารางและเซลลไดถกตอง 4. นกเรยนสามารถก าหนดขนาดของตาราง ระยะหาง เสนขอบไดถกตอง 5. นกเรยนสามารถรวมแถวและคอลมนในตารางไดถกตอง 6. นกเรยนท างานดวยความเพยรพยายาม ขยน อดทน ละเอยดรอบคอบในการท างานมความรบผดชอบ มน าใจและพฒนาผลงานของตนเอง กจกรรมการเรยนร ขนน าเขาสบทเรยน 1. ครกลาวทกทายนกเรยน 2. ครใหนกเรยนเขาเวบไซต http://tc.mengrai.ac.th/paisan/ ซงครอธบายวากอนทจะไปยงบทท 7 การสรางตารางนนนกเรยนตองท าแบบทดสอบหลงเรยนของบทท 6 กอน

ขนสอน

1. ครใหนกเรยนท าแบบทดสอบกอนเรยนในบทท 7 การสรางตาราง 2. หลงจากนนครใหนกเรยนศกษาเนอหาในบทท 7 การสรางตารางและใหท าแบบฝกทกษะโดยใหใหสรางปฎทนประจ าเดอนน โดยใชตารางพรอมตกแตงสใหสวยงาม


3. ครอธบายตออกวา ถานกเรยนพมพ Tag ตางๆ ตามทไดศกษาลงในชองแตละบรรทด แลวคลก Preview จะแสดงในรปของเวบเพจ คลก Clear เพอลบ Tag ตางๆ ในชองทงหมดคลก Check Tag เปนการตรวจสอบความถกตองในการพมพ Tag เพอน ามาแกไข และบนทกคะแนนการฝกทกษะ 4. ครสาธตใหนกเรยนดถงการใชค าสงตาง ๆ ในบทท 7 เรองการสรางตาราง ซงในค าสงในการสรางตารางนนคอ ค าสง <table></table> ในค าสง table กจะมค าสง <tr></tr> ซงจะเปนการสรางแถวใหกบตาราง สวนค าสง <td></td>กจะเปนค าสงทใชในการสรางคอลมนใหกบตารางในแตละแถว 5. ครสาธตการสรางปฏทนโดยการใชตารางใหนกเรยนด โดยใหนกเรยนสงเกตปฏทนประจ าเดอน วามกแถว กคอลมน โดยนกเรยนสามารถตอบไดวา มคอลมนอย 7 แถวกคอ 1 สปดาหจะม 7 วน และมแถวอย 6-7 แถว จากนนครสาธตการสรางปฏทนใหนกเรยนดและใหนกเรยนปฏบตตาม ขนสรป 1. ครสรปใหนกเรยนฟงวาในการสรางเวบไซตแตละเวบไซต ใหมความสวยงามและเปนระเบยบเรยบรอยกตองอาศยการสรางตารางเขามาชวย โดยเราสามารถก าหนดไดวาเราจะวางรปแบบในการสรางเวบไซตอยางไรใหผเขาชมเหนแลวสะดดตา สอและแหลงเรยนร สอการจดการเรยนร 1. เอกสารความร 2. E-Learning (http://tc.mengrai.ac.th/paisan/ ) แหลงเรยนร 1. หองสมดโรงเรยนเมงรายมหาราชวทยาคม 2. www.mengrai.ac.th/ebook 3. http://tc.mengrai.ac.th/paisan/ การวดและประเมนผล ดานความร ( K) - ตรวจผลงานจากการท ากจกรรมใบงาน - การปรกษาหารอกนภายในกลม ดานคณธรรม จรยธรรม ( A) - สงเกตการท างานขณะปฏบตงาน - สงเกตการความเขาใจหลงการสอน - ประเมนผลจากใบงาน ดานทกษะ/กระบวนการ ( P) - สงเกตพฤตกรรมการท างาน ตามแบบประเมนคณลกษณะ

ใบความรท 7 เรองการสรางตาราง

โครงสรางของตาราง ในการสรางตารางนนใชค าสง <TABLE> เปน Tag เปด และ ปดดวยความสง

</TABLE> ภายในตาราง จะประกอบดวยค าสงยอย <TR>...</TR> ส าหรบก าหนดแถวในตารางและในแตละแถวจะประกอบดวยค าสงยอย <TD>...</TD> เพอส าหรบไวใสขอมลแตละเซลล จ านวนของ <TD>...</TD> จะเปนตวบอกจ านวนคอลมนทเกดขนในแตละแถว และจ านวนของค าสง <TR>...</TR> จะเปนตวบอกจ านวนแถวทเกดในตารางเซลลเดยว (single cell) ตารางทงายทสด คอตารางทมเพยง 1 เซลล เราสามารถสรางโดยใชค าสงดงขางลางน ในกรณนเราไมจ าเปนตองมค าสง <TR>...</TR> กได <TABLE> <TR> <TD> .....ขอมล....</TD> <TD> .....ขอมล....</TD> </TR> </TABLE> คาแอตรบวสตาง ๆ ตอไปน สามารถเพมเขาไปใน Tag <TABLE>

รปแบบค าสง <TABLE Attribute=value> ..<TR>..<TD>..</TD>..<TR>..</TABLE> ม Attribute (ค าสงเสรม)ดงน

BORDER = เปนการระบวา ใหตารางมเสนกรอบ ความหนาของเสนกรอบ สามารถระบดวย Border = n ถา n เปน 0 จะไมแสดงเสนกรอบ CELLPADDING = เปนการระบระยะหางระหวางเสนตารางกบเนอหาภายในเซลล เชน CELLPADDING = n CELLSPACING = เปนการระบระยะหางระหวางเสนตารางแถวลางกบแถวบน BGCOLOR= เปนการก าหนดสพนของตาราง VLIGN= ใชในการจดต าแหนงขอมล ในแนวตงได ซงมสามระดบคอTOP หรอ MIDDLE หรอ BOTTOM ALIGN=เปนการจดต าแหนงของตาราง ชดซาย หรอชดขวา หรอจดกงกลาง คาแอตรบวสตาง ๆ ตอไปน สามารถเพมเขาไปใน Tag <TD>

รปแบบค าสง <TR Attribute=value> ..<TD>..</TD>....</TR> ม Attribute (ค าสงเสรม)ดงน BGCOLOR เปนการใชก าหนดสพนของแถว สามารถก าหนดเปนเลขฐาน 16 จานวน 6 ตว หรอ

ชอของสตาง ๆ ALIGN เปนการจดขอความในแถว วาจะใหชดซายหรอขวาหรอกงกลาง LEFT หรอ RIGHT หรอ CENTER WIDTH เปนการก าหนดความยาวของแถว มหนวยเปนพกเซล หรอเปนเปอรเซนตกได โดยพมพ % หลงความยาว เชน width=200 หรอ width=30% HEIGHT เปนการก าหนดความสงของ

แถว มหนวยเปนพกเซล หรอเปนเปอรเซนตกได โดยพมพ % หลงความยาว เชน width=200 หรอ width=30%

รปแบบค าสง <TD Attribute=value> .ขอความ..</TD>ม Attribute (ค าสงเสรม)ดงน BGCOLOR เปนการใชก าหนดสพนของเซล สามารถก าหนดเปนเลขฐาน 16 จานวน 6 ตว หรอ

ชอของสตาง ๆ ALIGN เปนการจดขอความในแถว วาจะใหชดซายหรอขวาหรอกงกลาง LEFT หรอ RIGHT หรอ CENTER WIDTH เปนการก าหนดความยาวของเซล มหนวยเปนพกเซล หรอเปนเปอรเซนตกได โดยพมพ % หลงความยาว เชน width=200 หรอ width=30% HEIGHT เปนการก าหนดความสงของเซล มหนวยเปนพกเซล หรอเปนเปอรเซนตกได โดยพมพ % หลงความยาว เชน width=200 หรอ width=30% การปรบขนาดความกวางของคอลมน (COLSPAN)

ColSpan เปนค าสงทใชในการปรบขนาดความกวางของ คอลมนเชนเดยวกบแอตทรบวต Width แตตางกนตรงท ColSpan จะปรบขนาดความกวางของคอลมนในตาราง ใหมขนาดเปนจ านวนเทาของขนาดความกวางปกต ซงลกษณะการใชงานคลายๆกบแอตทรบวต RowSpan

ใบงานท 7 แบบฝกทกษะ การสรางตาราง

ค าชแจง ท าแบบฝกทกษะโดยใชโครงสราง HTML เขยนค าสงในการสรางตาราง ตวอยาง code ในการท าแบบทดสอบ


แบบทดสอบกอนเรยน หลงเรยน การสรางตาราง









5 4 3 2 1

แผนการจดการเรยนรท 8 ชอเรอง การสรางฟอรม จ านวน 2 คาบ กลมสาระการเรยนรการงานอาชพและเทคโนโลย ชนมธยมศกษาปท 4 ภาคเรยนท 1 หนวยการเรยนรท 8 ปการศกษา 2553 มาตรฐานการเรยนร

มาตรฐาน ง 3.1 เขาใจ เหนคณคา และใชกระบวนการเทคโนโลยสารสนเทศในการสบคนขอมลการเรยนร การสอสาร การแกปญหา การท างาน และอาชพอยางมประสทธภาพ ประสทธผล และมคณธรรม สาระส าคญ เวบไซตหลายเวบมกจะมสวนโตตอบกบผใช อยางนอยกในลกษณะของฟอรมตาง ๆ ซงในการท างานสวนน อาศยความสามารถดานโปรแกรมมาก ากบ แตในขนตนนผทสนใจกสามารถสรางสวนโตตอบกบผใชไดโดยอาศยเทคนค การผสม Form กบค าสง Mailto: ไดเชนกน รปแบบการสรางฟอรมมหลายรปแบบ เราสามารถน าแตละรปแบบผสมผสานกนได เชน การผสมระหวางรปแบบกรอบปอนขอมลกบกรอบแบบสอบถาม เปนตน การน าฟอรมมาใชในเวบเพจจะตองมการน าโปรแกรมชวยในการสงขอมล ซงจะศกษาในระดบชน ม.5 ตอไป จดประสงคการเรยนร 1. นกเรยนอธบายการเขยนฟอรมไดถกตอง 2. นกเรยนสามารถใชค าสงในการเขยนฟอรมไดถกตอง 3. นกเรยนสามารถสรางฟอรมตามทก าหนดไดถกตอง 4. นกเรยนสามารถออกแบบฟอรม ในการสงซอของไดถกตอง 5. นกเรยนท างานดวยความเพยรพยายาม ขยน อดทน ละเอยดรอบคอบในการท างาน กจกรรมการเรยนร ขนน าเขาสบทเรยน 1. ครกลาวทกทายนกเรยน 2. ครใหนกเรยนเขาเวบไซต http://tc.mengrai.ac.th/paisan/ ซงครอธบายวากอนทจะไปยงบทท 8 การสรางฟอรมนนนกเรยนตองท าแบบทดสอบหลงเรยนของบทท 7 กอน

ขนสอน

1. ครใหนกเรยนท าแบบทดสอบกอนเรยนในบทท 8 การสรางฟอรม 2. หลงจากนนครใหนกเรยนศกษาเนอหาในบทท 8 การสรางฟอรมและใหท าแบบฝกทกษะโดยใหออกแบบฟอรมโดยใชตารางประกอบ 1 รายการ โดยสรางฟอรมส าหรบกรอกขอมลสมครสมาชก


3. ครอธบายตออกวา ถานกเรยนพมพ Tag ตางๆ ตามทไดศกษาลงในชองแตละบรรทด แลวคลก Preview จะแสดงในรปของเวบเพจ คลก Clear เพอลบ Tag ตางๆ ในชองทงหมดคลก Check Tag เปนการตรวจสอบความถกตองในการพมพ Tag เพอน ามาแกไข และบนทกคะแนนการฝกทกษะ 4. ครสาธตใหนกเรยนดถงการใชค าสงตาง ๆ ในบทท 8 เรองการสรางฟอรม ซงค าสงในการสรางฟอรมนนมอยหลายค าสง เชน <input></input> ซงค าสง <input> กจะม Attribute ทส าคญดงตอไปน TYPE เปนชนดของ box ในรปตางๆ ดงน

type=text แสดงในรปของกลองรบขอมล มลกษณะการแสดงผลแบบบรรทดเดยว เพอใหปอนขอมลทเปนเลข หรอตวอกษร

type=password แสดงในรปของกลองรบขอมล การแสดงผลแบบ PASSWORD จะเปนดอกจน (*) type=radio แสดงชองท าเครองหมายเปนรปวงกลม type=checkbox แสดงในรปสเหลยมหนาตวเลอก เพอใหคลกตวเลอก type=submit แสดงผลเปนลกษณะปมเพอ action ตามทฟอรมก าหนด type=reset แสดงผลเปนลกษณะปมเพอลบขอมลในกลองรบขอมล

NAME เปนการเกบชอของตวแปร VALUE เปนคาของตวแปรหรอขอความบนปม ID เปนการเกบชอของตวแปร SIZE ความกวางของกลองขอความโดยนบจ านวนตวอกษร ใชกบ type=text และ type=password MAXLENGTH ความกวางของการรบขอความโดยนบจ านวนตวอกษร ใชกบ type=text และ type=password การสรางกรอบปอนขอความแบบหลายบรรทด<TEXTAREA> ค าสงนจะเปนการก าหนดการสรางกรอบปอนขอมลแบบหลายบรรทด รปแบบค าสง <TEXTAREA Attribute=value>....</TEXTAREA > การสรางตวเลอก รปแบบค าสง <SELECT Attribute=value>..<option>...<option>...</SELECT > ขนสรป 1. ครสรปใหนกเรยนฟงวาในเวบไซตแตละเวบไซตจะมฟอรมส าหรบการลงทะเบยนเปนสมาชกในเวบไซตกจะมรปแบบการสรางเหมอนกบโคดทเราก าลงสรางน สอและแหลงเรยนร สอการจดการเรยนร 1. เอกสารความร 2. E-Learning (http://tc.mengrai.ac.th/paisan/ )

แหลงเรยนร 1. หองสมดโรงเรยนเมงรายมหาราชวทยาคม 2. www.mengrai.ac.th/ebook 3. http://tc.mengrai.ac.th/paisan/ การวดและประเมนผล ดานความร ( K) - ตรวจผลงานจากการท ากจกรรมใบงาน - การปรกษาหารอกนภายในกลม ดานคณธรรม จรยธรรม ( A) - สงเกตการท างานขณะปฏบตงาน - สงเกตการความเขาใจหลงการสอน - ประเมนผลจากใบงาน ดานทกษะ/กระบวนการ ( P) - สงเกตพฤตกรรมการท างาน ตามแบบประเมนคณลกษณะ

ใบความรท 8 เรองการสรางฟอรม

เรามกจะพบแบบฟอรมสอบถามแบบตางๆ ไมวาจะเปนแบบฟอรมสงซอของ แบบฟอรมการ

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

รปแบบค าสง <FORM Attribute=value> .ขอความ..</FORM>ม Attribute (ค าสงเสรม)ดงน ตวอยาง <FORM method=post action=error.htm enctype=multipart/form-data> METHOD เปน

รปแบบของวธในการสงขอมลประกอบไปดวย GET เปนตวรบ - สง ขอมลขนาดจากดจาก Server ไมเกน 256 ตวอกษร โดยแสดงขอมลในการสงท address bar และ post เปนตวรบ - สง ขอมลไมจากดจาก Server ไมแสดงผลการสงขอมลท address bar ACTION คอต าแหนงหรอ URL ของ CGI Script ทวางไวท Server ทก าหนดใน Domain ตางๆ หรอใชคา mailto: กได ENCTYPE เปนฟอรมทมการอพโหลดรปหรอไฟลดวย โดยใชรวมกบ<input type=file > ตวอยาง <INPUT type=text name=text size=10 maxlength=7> TYPE เปนชนดของ box ในรปตางๆ ดงน type=text แสดงในรปของกลองรบขอมล มลกษณะการแสดงผลแบบบรรทดเดยว เพอใหปอนขอมลทเปนเลข หรอตวอกษร type=password แสดงในรปของกลองรบขอมล การแสดงผลแบบ PASSWORD จะเปนดอกจน (*) type=radio แสดงชองทาเครองหมายเปนรปวงกลม type=checkbox แสดงในรปสเหลยมหนาตวเลอก เพอใหคลกตวเลอก type=submit แสดงผลเปนลกษณะปมเพอ actionตามทฟอรมก าหนด type=reset แสดงผลเปนลกษณะปมเพอลบขอมลในกลองรบขอมล NAME เปนการเกบชอของตวแปร VALUE เปนคาของตวแปรหรอขอความบนปม ID เปนการเกบชอของตวแปร SIZE ความกวางของกลองขอความโดยนบจานวนตวอกษร ใชกบ type=text และ type=password MAXLENGTH ความกวางของการรบขอความโดยนบจ านวนตวอกษร ใชกบ type=text และ type=password

การสรางกรอบปอนขอความแบบหลายบรรทด<TEXTAREA> ค าสงนจะเปนการก าหนดการสรางกรอบปอนขอมลแบบหลายบรรทด โดยในทนจะมคณสมบตในการก าหนดความกวาง และความสงของกรอบปอนขอความ รปแบบค าสง <TEXTAREA Attribute=value>....</TEXTAREA > ม Attribute (ค าสงเสรม)ดงน ตวอยาง <TEXTAREA rows=30 cols=50 name=txta1> ROWS เปนการก าหนดจ านวนแถวทใชในการปอนขอมลตาง ๆ ลงในกรอบปอนขอความ COLS เปนการก าหนดจ านวนคอลมนสงสดในการปอนขอมลในแตละแถว ซงจ านวนคอลมนทเหมาะสมทสดจะมคาตวเลขเทากบ 80 Characters NAME เปนการเกบชอของตวแปร ID เปนการเกบชอของตวแปร

ตวอยาง <SELECT name=select1 size=1> NAME= เปนการเกบชอของตวแปร SIZE=คาตวเลข เปนการก าหนดการแสดงผลตวเลอกตามคาตวเลขทไดระบไป รปแบบค าสง <OPTION Attribute=value>.. ม Attribute (ค าสงเสรม)ดงน ตวอยาง <option value=s1 selected> ประเทศไทย <option value=s2 selected> ประเทศลา; VALUE= เปนการเกบชอของตวแปร SELECTED เปนเลอกส าหรบแสดงในขณะทเปดครงแรก

ใบงานท 8 แบบฝกทกษะ การสรางฟอรม

ค าชแจง ท าแบบฝกทกษะโดยใชโครงสราง HTML เขยนค าสงในการสรางฟอรม ตวอยาง code ในการท าแบบฝกทกษะ


แบบทดสอบกอนเรยน หลงเรยน การสรางฟอรม









5 4 3 2 1

แผนการจดการเรยนรท 9 ชอเรอง การสรางเฟรม จ านวน 2 คาบ กลมสาระการเรยนรการงานอาชพและเทคโนโลย ชนมธยมศกษาปท 4 ภาคเรยนท 1 หนวยการเรยนรท 9 ปการศกษา 2553 มาตรฐานการเรยนร

มาตรฐาน ง 3.1 เขาใจ เหนคณคา และใชกระบวนการเทคโนโลยสารสนเทศในการสบคนขอมลการเรยนร การสอสาร การแกปญหา การท างาน และอาชพอยางมประสทธภาพ ประสทธผล และมคณธรรม สาระส าคญ การสรางเฟรมจะชวยใหเราสามารถแบงพนทในการแสดงผลของ browser ออกเปนหลาย ๆ สวนตามทเราตองการ ซงจะชวยใหเรา สามารถแสดงเนอหาขอมลตางๆ ไดมากขน หลากหลายมากขน รปแบบการสรางเฟรมจะมค าสงทเกยวของอยเพยงเลกนอยเทานน จดประสงคการเรยนร 1. นกเรยนอธบายการเขยนเฟรมไดถกตอง 2. นกเรยนสามารถใชค าสงในการเขยนเฟรมไดถกตอง 3. นกเรยนสามารถสรางเฟรมตามทก าหนดไดถกตอง 4. นกเรยนสามารถออกแบบเวบเพจ โดยใชเฟรมไดถกตอง กจกรรมการเรยนร ขนน าเขาสบทเรยน 1. ครกลาวทกทายนกเรยน 2. ครใหนกเรยนเขาเวบไซต http://tc.mengrai.ac.th/paisan/ ซงครอธบายวากอนทจะไปยงบทท 9 การสรางเฟรมนนนกเรยนตองท าแบบทดสอบหลงเรยนของบทท 8 กอน

ขนสอน

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

3. ครอธบายตออกวา ถานกเรยนพมพ Tag ตางๆ ตามทไดศกษาลงในชองแตละบรรทด แลวคลก Preview จะแสดงในรปของเวบเพจ คลก Clear เพอลบ Tag ตางๆ ในชองทงหมดคลก Check Tag เปนการตรวจสอบความถกตองในการพมพ Tag เพอน ามาแกไข และบนทกคะแนนการฝกทกษะ


4. ครสาธตใหนกเรยนดถงการสรางเฟรม ในบทท 9 ใหนกเรยนดและปฏบตตาม โดยแบงเฟรมออกเปน 3 สวน ดานบนสด พมพชอตนเอง ดานลางแบงเปน 2 สวน ดานซาย เปนเมนรายชอเพอนและคร ในแบบฝกทกษะ หนวยท 4 สวนดานขวาแสดงฟอรมในแบบฝกทกษะ หนวยท 8 และตกแตงหนาเวบไซตใหสวยงาม

ขนสรป 1. ครสรปใหนกเรยนฟงวา การแบงสวนตางๆของจอภาพ เราเรยกวาแตละสวนนนวา "Frame" ซงการใชFrame นนจะมลกษณะการ เรยกไฟล HTML มาทละหลายๆไฟล ท าใหสะดวกตอการเยยมชม ท าใหเราสามารถใชพนทของหนาจอไดอยางคมคา ประหยดเวลาในการเรยกใชงาน สอและแหลงเรยนร สอการจดการเรยนร 1. เอกสารความร 2. E-Learning (http://tc.mengrai.ac.th/paisan/ ) แหลงเรยนร 1. หองสมดโรงเรยนเมงรายมหาราชวทยาคม 2. www.mengrai.ac.th/ebook 3. http://tc.mengrai.ac.th/paisan/ การวดและประเมนผล ดานความร ( K) - ตรวจผลงานจากการท ากจกรรมใบงาน - การปรกษาหารอกนภายในกลม ดานคณธรรม จรยธรรม ( A) - สงเกตการท างานขณะปฏบตงาน - สงเกตการความเขาใจหลงการสอน - ประเมนผลจากใบงาน ดานทกษะ/กระบวนการ ( P) - สงเกตพฤตกรรมการท างาน ตามแบบประเมนคณลกษณะ

ใบความรท 9 เรองการสรางเฟรม

การแบงสวนตางๆของจอภาพ เราเรยกวาแตละสวนนนวา "Frame" ซงการใช Frame นนจะม

ลกษณะการ เรยกไฟล HTML มาทละหลายๆไฟล ท าใหสะดวกตอการเยยมชม ทาใหเราสามารถใชพนทของหนาจอไดอยางคมคา ประหยดเวลาในการเรยกใชงาน คณสมบตน มใน Internet Explorer 3.0 และ Netscpae 2.0 ขนไป โครงสรางของ Frameset ในการทจะสรางเฟรมมาซกเฟรม มค าสงทเกยวของทตองรคอค าสง <Frameset>...</Frameset> และ ค าสง <Frame>..</Frame>

รปแบบค าสง <FRAMESET Attribute=value> .<frame>..</frame>..</FRAMESET> ม Attribute (ค าสงเสรม)ดงน ตวอยาง <frameset rows="*" cols="248,*" framespacing="1" frameborder="YES" border="1" bordercolor="#000099"> Rows เปนการแบงเฟรมตามแนวนอนออกเปน บนลาง เชน rows=20%,80% หมายถงแบงหนาจอออกเปน 2 สวนคอบน 20% สวนลาง 80% cols เปนการแบงเฟรมตามแนวตงออกเปน ซาย ขวาเชน cols=20%,80% หมายถงแบงหนาจอออกเปน 2 สวนคอซาย 20% สวนขวา 80% framespacing เปนระยะหางของเฟรม มหนวยเปน Pixel frameborder เปนเสนขอบรอบเฟรม การแบงพนทในแนวนอน (Rows=n,n%) ใชแอตทรบวต Rows=n,n% โดยท n คอคาของความสงของเฟรม เราสามารถก าหนดความสงนไดทงพกเซล และเปนเปอรเซนตได เชน <Frameset Rows="30%,80%"> หมายถงการแบงพนทใหสวนบนมพนท 30% ของจอภาพ และใหสวนลางมพนท 80% ของจอภาพ ทงนผลรวมของเปอรเซนตทงหมดตองไมเกน 100% หากไมระบเปอรเซนตลงไปจะเปนการก าหนดขนาดของพนทมหนวยเปนพกเซล เราสามารถแบงพนทในแนวนอนไดมากกวา 2 เฟรม ดงตวอยางน <Frameset Rows="30,60%,*"> หมายถงการแบงพนทใหสวนบนมพนท 30 พกเซล พนทในสวนกลางมขนาด 60 เปอรเซนต และสวนสดทายจะเปนพนททเหลอทงหมด

การแบงพนทในแนวตง (Cols-n,n%) ใชแอตทรบวต Cols=n,n% โดยท n คอคาของความกวางของเฟรม เราสามารถก าหนดความกวางนไดทงพกเซล และเปนเปอรเซนตได สeหรบการใชงานนน มรปแบบคลายๆกบ แอตทรบวต Rows

รปแบบคาสง <FRAME Attribute=value> . ม Attribute (คาสงเสรม)ดงน ตวอยาง <frame name="banner" scrolling="no" noresize target="contents"> SRC เปนการเชอมโยงไปยงframe หรอแฟมขอมล

NAME เปนการก าหนด ชอ frame เพอใชการเชอมโยงในframe ปลายทาง SCROLLING เปนการก าหนด scrollbar yes หรอ no หรอ auto( คา Default คอ yes) สาหรบคา auto นน หากเอกสาร HTML มขนาดเกน 1 หนาจอ Scrolling จะถกก าหนดเปน yes TARGET เปนก าหนดเปาหมายในการเชอมโยงไปยงปลายทาง NORESIZE เปนการก าหนดกรอบของ frame ไมเปลยนขนาดเมอแสดงผล MarginHeight การปรบขนาดความสงของระยะขอบ ซงเปนคาตวเลข MargintWidth การปรบขนาดความกวางของระยะขอบ ซงเปนคาตวเลข

ใบงานท 9 แบบฝกทกษะ การสรางเฟรม

ค าชแจง ท าแบบฝกทกษะโดยใชโครงสราง HTML เขยนค าสงในการสรางเฟรม ตวอยาง code ในการท าแบบฝกทกษะ


แบบทดสอบกอนเรยน หลงเรยน การสรางเฟรม









5 4 3 2 1

แผนการจดการเรยนรท 10 ชอเรอง การน าเสนองานดวย Website จ านวน 2 คาบ กลมสาระการเรยนรการงานอาชพและเทคโนโลย ชนมธยมศกษาปท 4 ภาคเรยนท 1 หนวยการเรยนรท 10 ปการศกษา 2553 มาตรฐานการเรยนร

มาตรฐาน ง 3.1 เขาใจ เหนคณคา และใชกระบวนการเทคโนโลยสารสนเทศในการสบคนขอมลการเรยนร การสอสาร การแกปญหา การท างาน และอาชพอยางมประสทธภาพ ประสทธผล และมคณธรรม สาระส าคญ เครองมอการใชงานของโปรแกรมส าเรจรป Dreamweaver การเรยกใชอปกรณตางๆ เพอใหเราสามารถออกแบบเวบไซตได ตามรปแบบทตองการซงมความงายกวาการใช code html อยางเดยวแตตองมความรความเขาใจและรความหมายใน code html เพอเขาไปแกไขได จดประสงคการเรยนร 1. นกเรยนสามารถสรางเวบไซตโดยใชโปรแกรมส าเรจรป Dreamweaver 2. นกเรยนสามารถสรางรปภาพเพอประกอบเวบไซตได 3. หาเนอหาทเหมาะสมและสมบรณในการสรางเวบไซต 4. นกเรยนสามารถเชอมโยงเวบไซตไดอยางไมผดพลาด กจกรรมการเรยนร

ขนน าเขาสบทเรยน 1. ครกลาวทกทายนกเรยน 2. ครถามนกเรยนวารจกโปรแกรม Dreamweaver ไหมซงเปนโปรแกรมส าเรจรปในการสราง

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

เวอรชนใหมลาสดในปจจบนกคอ Adobe Dreamweaver CS5 ซงรปรางหนาตาของโปรแกรมจะไมเหมอนกน แตวธการใชงานจะยงคงเหมอนเดม

2. ครแนะน าเครองมอตาง ๆ ทอยในโปรแกรม Dreamweaver mx วาแตละเครองมอมหนาทการใชงานอยางไร

3. ครสาธตการใชเครองมอตาง ๆ ใหนกเรยนดและใหนกเรยนปฏบตตาม โดยใหสรางหนาเวบไซตของตวเอง ตกแตงใหสวยงาม

ขนสรป 1. ครสรปการใชโปรแกรม Dreamweaver คอเมอกอนนนถาเราตองการสรางเวบเพจ เราจะตอง

เขยนภาษา HTML ขนมาเพอใหแสดงผลผาน browser เปนรปภาพหรอขอความออกมา ซงท าใหเราท างานไดชาลง เพราะเราจะตองเขยน HTML ไปและดการแสดงผลผาน browser ไปวาใหผลถกตองตามทเราตองการหรอไม แตส าหรบใน Dreamweaver โปรแกรมจะแสดงหนาจอทแสดงผลใหเราสามารถปรบแตงหนาตาของเวบเพจของเราไดเลย โดย Dreamweaver จะท าการเขยน HTML ใหเราเอง สอและแหลงเรยนร สอการจดการเรยนร 1. เอกสารความร 2. E-Learning (http://tc.mengrai.ac.th/paisan/ ) แหลงเรยนร 1. หองสมดโรงเรยนเมงรายมหาราชวทยาคม 2. www.mengrai.ac.th/ebook 3. http://tc.mengrai.ac.th/paisan/ การวดและประเมนผล ดานความร ( K) - ตรวจผลงานจากการท ากจกรรมใบงาน - การปรกษาหารอกนภายในกลม ดานคณธรรม จรยธรรม ( A) - สงเกตการท างานขณะปฏบตงาน - สงเกตการความเขาใจหลงการสอน - ประเมนผลจากใบงาน ดานทกษะ/กระบวนการ ( P) - สงเกตพฤตกรรมการท างาน ตามแบบประเมนคณลกษณะ



4 3 2 1

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

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

เวบไซตใชงานงายสบายตาสามารถเชอมโยงไปหนาเพจตางๆ ไดอยางถกตอง

เวบไซตใชงานยาก วาง link ไมเปนระเบยบยากตอการเชอมโยงไปหนาอน

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

ความสวยงามของเวบไซต

เวบไซตสวยมากมการน ารปทสรางขนมาเองและสวยงามใชสสนสวยงามมเอกลกษณเปนของตวเอง

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

เวบไซตสวยใชสสนสวยงาม

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

รายละเอยดเนอหาทน าเสนอ

เนอหาสามารถอานแลวเขาใจไดงายมความครบถวนของขอมลการใชค าไดอยางถกตอง

เนอหาสามารถอานแลวเขาใจงายมความครบถวนของขอมล

ความครบถวนของขอมล

มเนอหาขอมล





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


30201 1 4 40 1 - thaigoodview.com · 2011-07-01 · ค าอธิบายรายวิชา...

Documents