1

ชดการสอนวชา โครงงานคอมพวเตอร

ดวยโปรแกรม Macromedia

Dreamweaver MX

ง 33104โดย

คร ศศธร ไวทยสวรรณ

2

โรงเรยนมธยมวดมกฏกษตรย

สารบญ

เรอง หนา

1. ชดการเรยนรท 1 ปฐมนเทศการเรยนการสอน3

2. แบบทดสอบกอนเรยนและหลงเรยน 9 3. ชดการเรยนรท 2 การกำาหนดแนวทางชนด/ประเภทของ Webpage

10 4. ชดการเรยนรท 3 การออกแบบรปแบบของ Webpage

11 5. ชดการเรยนรท 4 การจดหา Clipart

15 6 ชดการเรยนรท 5 ความสามารถและการใชโปรแกรม

18 7 ชดการเรยนรท 6 การแทรกรปภาพ/ตาราง

22 8. ชดการเรยนรท 7 การเชองโยง (Link)

28 9. ชดการเรยนรท 8 การสราง Drawlayer

33

310 ชดการเรยนรท 9 การสราง Frame

3711. ชดการเรยนรท 10 การสราง Form

4212. ชดการเรยนรท 11 การสราง Flash button/ Flash Text

4715. ชดการเรยนรท 12 การสมคร Free Homepage

5116 ชดการเรยนรท 13 การนำาขอมล Upload

5517. ภาคผนวก

6818 ภาพตวอยางสอการเรยนการสอน

6919. บรรณานกรม 86

คำาแนะนำาสำาหรบนกเรยนในการใชชดการสอน

1. ใหนกเรยนใชเอกสารการเรยนการสอนน ใชรวมกบการสอนของคร 2. ปฏบตตามคำาแนะนำาของครหรอกลมอยางเครงครด3. ใหนกเรยนจดชนเรยนโดยนงเรยนเปน กลม ๆ ละ 4-5 คน เลอก

ประธานกลมและเลขานการกลม

44. แบงหนาทรบผดชอบภายในกลม เชน รบใบกจกรรม ใบความร แบบ

ทดสอบ แบบประเมนและอปกรณสอตาง ๆ ไปแจกเพอนในกลม ใหพรอมทจะเรยน

5. ถานกเรยนเรยนไมทน หรอไมเขาใจในกจกรรมการเรยนการสอนขนตอนใดใหถามครผสอนเพอขอคำาอธบายเพมเตม หรออาจศกษาจากเอกสารประกอบการเรยนซอมเสรมนอกเวลาเรยนกได

6. นกเรยนศกษาเนอหาสาระ และทำากจกรรมจบแลว ใหทำาแบบฝกหดในใบงาน และขอทดสอบหลงเรยน แลวรอเฉลย ดวยการอภปรายรวมกน

7. เมอนกเรยนตรวจกจกรรมแบบฝกหดและขอทดสอบหลงเรยนไดถกตองไมถงรอยละ 80 ใหศกษาทบทวนใหมพรอมแกไขใหถกตองตามเกณฑทกำาหนดแลวสงครผสอน

8. มความตงใจทำาแบบทดสอบทกครง

5ใบความรท 1

จดประสงคการเรยนร1 นกเรยนสามารถบอกลกษณะเดนความสามารถของตนเองและเพอนใน

กลม และบอกไดวาลกษณะเดน ๆ ของ บคลากรในกลมนนเหมาะสมกบงานในหนาทใด

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

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

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

กนทำางานไปจนสำาเรจลลวงจดประสงคของกลมทตงไว การรจกตนเอง รจกจดเดนและจดดอยของตนเอง และ

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

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

6ใบงานท 1 การแบงกลม

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

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

รายชอ หนาททเหมาะสม ชอกลมทตองการ1. 1.2. 2.3. 3.4. 4.5. 5.หมายเหต : ใหนกเรยนนำาขอมลของนกเรยนไปปรกษาอาจารยดวยสรปความคดเหนของคร-อาจารยผสอน

………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………… ลงชอ วนเดอนป

7

แบบทดสอบกอนเรยนและหลงเรยนโปรแกรม Macromedia Dreamweaver MX

ใหนกเรยนเขยน X ทบตวอกษรหนาคำาตอบทถกตองทสด1. ไฟลคลปอารต นามสกลใด ทเปนไฟลขนาดเลก และนยมใชในการสราง

เวบเพจ มากทสดก. .bmp ข. .gifค. .png ง. .jpg

2. การปรบแตง สพน ในโปรแกรม Macromedia DreamweaverMX ใชคำาสงใดก. Page Properties ข. Tableค. Background ง. Border Color

3. การสรางตาราง ในโปรแกรม Macromedia Dreamweaver ใชคำาสงใดก. Page Properties ข. Tableค. Background ง. Border Color

4. การตกแตงเสนขอบของตาราง ในโปรแกรม Macromedia Dreamweaver MX ใชคำาสงใดก. Page Properties ข. Tableค. Background ง. Border Color

5. การสราง Layer ใชคำาสงใน Menu ใดก. File ข. Editค. Insert ง. Format

6. การสราง Frame ใชคำาสงใน Menu ใดก. File ข. Modifyค. Insert ง. View

7. Behavior เปนคำาสงใชงานเกยวกบอะไรก. การเปลยนสพน ข. การลบเสนขอบตารางราง

8ค. การจดการภาพซอน ค. การสรางลกเลนลงในเวบเพจ

8. ถาเปดโปรแกรม Macromedia Dreamweaver MX ขนมา แตไมม เครองมอ Properties สำาหรบใชงานสามารถเรยกใชงานไดจาก Menu คำาสงใดก. File ข. Editค. Insert ง. Window

9. การดผลลพธการสรางงาน โปรแกรม Macromedia Dreamweaver MX ตองกดปมใดบางก. F6 ข. F8ค. F10 ง. F12

10. การกำาหนดลกษณะการเปดหนาเวบทไดจากการ Link ตองใชคำาสงใดก. Button ข. Styleค. Target ง. Apply

ใบความรท 2การกำาหนดแนวทางรปแบบในการสราง Web page

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

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

9

ใบงานท 2ใหนกเรยนกำาหนดแนวทางคณลกษณะของ Web page ทจะสรางโดยรวบรวมแนวคดโดยสรปจากความคดเหนของกลม

สรปความคดเหนของคร-อาจารยผสอน.............................................................................................................................................................................................................................................................................................................................................................................................

ชอ Web page…………………………………………………………..คณลกษณะ/ชนด/ประเภท……………………………………………………………………………………………………………………………..………………………………………………………………………………………………………………………………………………………………

10 ลงชอ วนเดอนป

ใบความรท 3เรอง ขนตอนการออกแบบเวบไซต

1.สาระการเรยนร การออกแบบสรางเคาโครงรางหนา Web page เปนสงสำาคญ ในการกำาหนดเนอหา รปภาพ เทคนค ทตองการ

เปนเครองมออกอยางหนงทชวยใหมองเหนภาพเคาโครงและสารมรถชวยใหงานประสบความสำาเรจไดอยางรวดเรว 2. ผลการเรยนรทคาดหวง 2.1 นกเรยนสามารถออกแบบเคาโครงหนาเวบทตองการได 2.2 นกเรยนสามารถกำาหนด เนอหา และ สวนประกอบทตองการใชสราง Web page ตามรายการได เชน แฟมเนอหา ภาพ เสยง ฯลฯ

11 2.3 นกเรยนสามารถแบงหนาทสมาชกภายในกลมในการสราง Web page และ ชวยกนสบคนขอมลทเกยวของ

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

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

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

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

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

1.1.3 เกบแฟมตนฉบบ แฟมขอมลตาง ๆ ทรวบรวมไวแลวนนควรเกบไวเปนโฟลเดอร (Folder) ยอยแฟมตนฉบบ (Source file) โดยอยภายในโฟลเดอรใหญของโฟลเดอร

12เวบไซต และตงชอตามแตละชนดของแฟมนน เชน แฟมตนฉบบขอความ, แฟมตนฉบบภาพ เปนตน

2.รวบรวมจดระเบยบภายหลงเมอวางแผนและเกบรวบรวมวสดตาง ๆ ทจำาเปนตองใชในการสรางเวบไซตเรยบรอยแลว

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

2.1 รวบรวมแฟม การรวบรวมแฟมขอมลตาง ๆ ควรทำาการเกบรวมกนไวในโฟลเดอรใหญสำาหรบเวบไซต ขนาดเลกสวนมากอาจมเพยงโฟลเดอรเดยว แตถาคดวาเวบไซตนนมขนาดใหญ ขยายออกไปอกโดยมมากกวา 30-40 แฟม ซงรวมถงแฟมภาพ, เสยง ฯลฯ แลว นกออกแบบควรสรางโฟลเดอรยอยใหมขนมาเพอแยกเกบตามประเภทอกครงหนง

2.2 แบงเวบไซต โดยทวไปแลว ควรแบงเวบไซต ออกเปนสวน ๆ ตงแต 3-7 สวน โดยแตละสวนจะเกยวของกบกจกรรมเฉพาะแตละอยาง ทงนหมายถงวา โครงสรางทงหมดของเวบไซต ควรเปนโครงสรางเขงตรรกะโดยทวไปแลวเวบไซตควรแบงออกเปน 5 สวน อาจจะมากขนอก 2 หรอ นอยลงอก 2 สวน กได

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

132.4 จดลำาดบชนเนอหา ในการใชเวบไซตนนไมควรใหผอานไปไกลเกน

จนกวาจะพบสงทตองการ โดยการอยาใหผอานคลกมากมายหลายหนาจากจดหนงไปยงอกจดหนง กฎในเรองนกคอ“ ผอานไมควรตองคลกเกนไปกวา 5 หนาจงจะถงเนอหาท ตองการ

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

3.1 เครองมอนำาทาง ควรสรางเครองมอนำาทางเพอใหผอานเขาถงสารสนเทศไดอยางรวดเรว เนองจากเวบ เปนสอใหมทเกดขนและใชกนอยางแพรหลายเรวมาก จงทำาใหมการใชคำาหลาย ๆ อยางทแตกตางกน ออกไป สงทเปนเครองมอนำาทางนกเชนกนทจะมการใชคำาตาง ๆ กนปกตแลวมกจะเรยกวา แถบ“ เครองมอ” (Toolbar) แตบางครงจะเรยกวาเปน เมน“ ” (menu) “สวนตอประสาน” (Interface) หรอ “การนำาทาง” (Navigation)3.2 ขอความเชอมโยง ควรยำาสงทอยในการนำาทางดวย

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

3.3 แถบเครองมอนำาทางขนาดเลก ออกแบบแฟมแถบเครองมอขนาดเลก เนองจากแถบเครองมอขนาดเลก

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

14

4.เกณฑมาตรฐานการออกแบบทดควรมเกณฑมาตรฐานของสงตาง ๆ ทอยใน

โครงสรางนนเพอไมสรางความสบสนใหแกผออกแบบและผอานดวย 4.1 ความคงตว ควรสรางกฎของความคงตว (Consistency) ทงเวบไซต เนองจากความคงตวนบเปนสง สำาคญในการออกแบบ และเปนสงสำาคญมากสงสดในการออกแบบเวบไซต รปแบบทตรงกนทงเวบไซต จะเปนตวชแนะทมองเหนไดอยางสำาคญททำาใหผอานทราบวากำาลงอยในเวบไซตเดยวกนนน 4.2 กำาหนดความกวางมาตรฐาน ผออกแบบควรตดสนใจใหไดวาจะใชความกวางจดภาพ (Pixel) เทาใดในเวบไซตนนกอนทจะเรมการออกแบบในแตละหนา เชนตองการแสดงผลหนาจออยท 800x600pixel เปนตน

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

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

เคาโครงราง Web page หนาท…… ..

155.1.2 โปรแกรมและระบบคอมพวเตอรของผอาน เชนเดยวกบ

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

ใบงานท 3ใหนกเรยนออกแบบรปแบบโครงสรางหนา Index ซงเปนหนาแรกของ Web page และหนาอน ๆ อยางนอย 3 หนา โดยวาดรปแบบ ลงในใบงานทกำาหนด

16

ใบความรท 4เรอง การจดหารปภาพ Clipart หรอ Gallery

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

2. ผลการเรยนรทคาดหวง 2.1 นกเรยนสามารถสบหาแหลงสบคนขอมลรปภาพจากเวบไซตตาง ๆ ได 2.2 นกเรยนสามารถเลอกรปภาพทเหมาะสมและสวยงาม เพอนำามาสรางเวบไซตตามทกลมพงพอใจ

นกเรยนสามารถรถงแหลงทมาของขอมลเกยวกบเนอหาทจะนำามาสรางเวบไซทของกลม2.3 นกเรยนสามารถวางแผนการจดเกบขอมล และวตถ ทนำามาสรางเวบไซตของกลม ไดอยางมระบบ

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

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

Rollover เมอเลอนเมาสไปบนภาพจะเปลยนไปเปนแบบอน เราเรยกเทคนคนวา Rollover มหลายโฮมเพจทใชเทคนคน

การแยกสวนภาพ (Slice) การหนภาพใหญออกเปนชนสวนเลก ซงจะไดไฟลหลายไฟล เมอมองดภาพทถกหนแลว จะมองไมเปนรอยตอของภาพเลก ๆ

จะหาภาพมาตกแตงโฮมเพจ ไดจากไหน เครองสแกน (Scanner) โดยการคดลอกภาพเพอนำาภาพเขาไป

เปนไฟลในคอมพวเตอร กลองดจตอล (Digital Camera)

lk,ki5lihk’4krmujwfhgxHo *.bmp, *.jpg *.gif หรออน ๆ เพอนำาไปตกแตงภาพ ตอไปดวยโปรแกรมในเครองพซได

ดาวนโหลดมาจากอนเตอรเนต ปจจบนมเวบไซตอยหลายแหงทมรปภาพ Clipart และภาพเคลอนไหวตาง ๆ ใหดาวนโหลดมาตกแตงโฮมเพจไดฟร ๆ เชน http://www.clipart.com http://www aaaclipart .com

สงทนกออกแบบภาพความร1. ทำาใหภาพเลกไวกอน เพอทผเขาชมไมตองรอดาวโหลดนานเกนไป2. ถาตองใชสมาก ใหใชรป JPEG3. ถาเปนภาพกราฟกทมสนอย ใหใช GIF

184. เมอใช GIF ใหพยายามลดจำานวนสในพาเลท ใหเหลอเฉพาะสทใช

เทานน จะชวยลดขนาดไฟลได5. ทำาใหไฟลขอความมขนาดเลก ไมเกน 10k6. ออกแบบใหงายไดงาย7. ออกแบบใหใชสเพยง 256 ส และใชโหมดความละเอยดของจอภาพ

เดทากบ 640*4808. สามารถใชเวบเพจไดกบบราวเซอรรนเกา ๆ9. ทดสอบโฮมเพจอยางทเขาชมจะเขามาชม

ใบงานท 41.ใหนกเรยนสบคนขอมลแหลงวตถ ทจะนำามาใชสราง Web page

และบอกถงแหลงทมา

192.ใหนกเรยนออกแบบวางแผนการจดเกบแฟมตนฉบบ ตามความคด

เหนของกลม

ใบความรท 5.1เรอง โปรแกรม Macomedia Dreamweaver MX

1.สาระการเรยนร

ชนดและแหลงทมาของวตถ

ชนดของวต แหลงทมา1. 1.

www……………………………

2. 2. www……………………………

การวางแผนการจดเกบขอมลขอมล การจดเกบ

1. 1.2. 2.3. 3.4. 4.5. 5.6. 6.7. 7.8. 8.9. 9.10. 10.

20โปรแกรม Macromedia Dreamweaver MX เปนโปรแกรม

สรางเอกสารเวบททำางานในลกษณะ HTML Generator คอ โปรแกรมจะสรางรหสคำาสง HTML ใหอตโนมต โดยผใชไมตองศกษาภาษา HTML ชวยใหงายตอการใชงาน สะดวกและรวดเรว2. ผลการเรยนรทคาดหวง 2.1 นกเรยนสามารถบอกลกษณะเดนและความสามารถของโปรแกรม Macromedia Dreamweaver MX 2.2 นกเรยนสามารถรจกสวนประกอบของหนาจอ โปรแกรม Macromedia Dreamweaver MX 2.3 นกเรยนสามารถรจกการเปดและใชงาน เครองมอจากชดคำาสง Common และ Properties 2.4 นกเรยนสามารถกำาหนดสพน, กำาหนดรปแบบตวอกษร

Dreamweaver MX เปนโปรแกรมสำาหรบสรางเวบเพจชนนำา ทผพฒนาเวบเพจในปจจบนตางเลอกใชในการออกแบบงาน การทำางานของ Dreamweaver เปนแบบ WYSIWYG (วสสวก) ยอมาจาก What-You-See-Is-What-You-Get ซงมความสะดวกงายและรวดเรวในการสรางงาน ใสความสามารถพเศษใหกบเวบเพจดวยสครปตตางๆ เชน JavaScript VBScript, การบรรจ ActiveX Shockwave applet และ Plug-in ตาง ๆ มเครองมออำานวยความสะดวกแกผดแล WebServer สามารถตรวจสอบ การเชอมโยงเวบเพจทงหมดในเวบไซตจำาลองบนเครองได ซงพอจะสรปความสารถของ Dreamweaver ทนาสนใจดงตอไปน ออกแบบเวบเพจดวยเลเยอรกอน แลวจงเปลยนใหเปนตารางไดอยาง

งายดาย Tracing Image จะชวยในการสรางเวบเพจใหสมพนธกบการกำาหนด

ภาพ Background ไดอยางม ประสทธภาพ สรางปมกดแบบ Flash ไดอยางงาย ๆ สามารถนำาไปใชงานไดอยาง

สะดวก การสรางขอความเลอนดวย Marquee Text

21 สนบสนนการใชงานและการพฒนาโปรแกรมสำาหรบเทคโนโลย WAP

ดวย WML การใชงานมลตมเดยบนเวบเพจ ดหนง ฟงเพลงดวย MP3, MP4, AVI,

และ MOV ได ใสสญลกษณทางคณตศาสตรและสญลกษณแบบพเศษลงในเวบเพจได สนบสนนการใชงานขอมลทเชอมตอกบฐานขอมล และการใชงาน CGI

ดวย ASP, PHP และ JSP การสราง Gallery เกบรวบรวมภาพเพอนำาเสนอบนเวบไซตไดงายขน

สงเหลานตองทดลองใชงานกอนจงจะสามารถนำาไปใชงานไดตามตองการไดอยางสะดวก

ใบความรท 5.2เรอง การใชงานโปรแกรม Macomedia Dreamweaver

MX ไตเตลบาร (Title Bar ) แทบ Insert เมนบาร (Menu Bar) HTML Source

หนาตางเวบเพจ

หนาตาง Properties

22ไตเตลบาร (Title Bar) สวนทอยบนสดของหนาตางโปรแกรมเปนสวนทแสดงชอไฟลและหวเรองของเวบเพจเมนบาร (Menu Bar) แถบเมนคำาสงใชจดการกบเวบเพจโปรแกรม Dreamweaver จดเปนหมวดหมของคำาสงทเกยวของกน เชนFile , Edit, View, Window, และ Help เปนตนหนาตาง Insert มลกษณะเปนปม รวบรวมเปนหมวดหมสำาหรบแทบทใชตกแตงเวบเพจ เชน ลงค, อเมลลงค,ตาราง , รปภาพ, เฟรม ฯลฯหนาตาง (Properties) สำาหรบกำาหนดรปแบบตวอกษร ขนาด การจดวาง สสนขอความ หรอสพน การ Link ขอความหรอรปภาพไปยงเวบไซตอน ๆHTML Sourceเปนหนาตางสำาหรบการดโคดคำาสงของภาษา HTML โดยสามารถดไดจากหนาตางน

การตงคาพนทการทำางาน /การกำาหนดสพน1. คลกเมาสขวาในพนทวาง เลอกคำาสง PageproPerties

2. ตงคาการใชงานทหนาตาง Page Properties

23

กำาหนดรปภาพ เปนพน ใชคำาสง Background Image โดยคลกปม กำาหนดสพนทคำาสง Background

Text ขอความปกตทไมมการกำาหนดจดเชอมโยงLink ความทกำาหนดเปนจดเชอมโยงVisited Link ขอความเชอมโยงทเคยคลกเขาไปใชงานแลวActive Link ขอความเชอมโยงทกำาลงทำางานอย

3. คลกปม เพอยนยนคำาสง

ใบงานท 5เรอง ความรเบองตนเกยวกบ Dreamweaver MX

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

24

Insert มคณสมบตคอ............................................................................................................................ ประกอบดวย

1........................................................... 2...........................................................3............................................................4...........................................................5............................................................6...........................................................7............................................................8.............................................................9..............................................................10...........................................................11...........................................................12............................................................Poperties มคณสมบต

คอ………………………………………………………………………………………………… ประกอบดวย.................................................................................................................................... ..................................................................................................................................................... ..................................................................................................................................................... .....................................................................................................................................................

25

ใบความรท 6การแทรกรปภาพ/ตาราง

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

2. ผลการเรยนรทคาดหวง 2.1 นกเรยนสามารถใชเครองมอในการสรางตาราง 2.2 นกเรยนสามารถจดเซลในตารางได 2.3 นกเรยนสามารถแทรกขอความ/รปภาพลงในตารางได

การแทรกรปภาพ มขนตอนดงน1. คลกเครองมอ Image 2. เลอกรปภาพ จากหนาตาง Select Image Source โดยคลกเลอกในชอง Look in

3. คลกเลอกรปภาพ แลว คลกปม 4. จะไดรปภาพตามตองการ

26

5. จดวางรปภาพตามตองการดวย เครองมอ Properties

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

2. จะไดหนาตาง Insert table ดงรป

ในหนาตางขางตนจะมการใช ระบตาง ๆ คาตาง ๆ ใหกบตาราง สามาถแยกไดดงน Row คอ จำานวนแถวปกตจะเปน 3

27Column คอ จำานวนคอลมน ปกตจะเปน 3Width คอ ความกวางของตารางโดยปกตคา 75 PercentBorder คอ ขนาดของขอบตารางโดยปกตคาจะเปน 1Cell Padding คอ กำาหนดระยะหางขอความในตารางกบขอบตารางCell Spacing คอ กำาหนดความกวางแตละเซลในตารางเราสามารถกำาหนดและตงคาเซลในตาราง โดยการใชเครองมอ Properties

การรวมเซล และแยกเซล ดวยเคองมอ Merges Cells หรอ Splits Cell

การตงคาความกวาง และ ความสง ของตารางดวยเครองมอ Width และ Height

การเลอกสพน ดวยเครองมอ Bg การเลอกสเสนขอบตารางดวยเครองมอ Brdr

การตงคาเสนขอบของตาราง ตงคาท Border ตงแต 1 เปนตนไป หรอซอนเสนขอบของตารางใหตงคา

เปนเลข 0

การจดวางตารางใชคำาสง Align ตามตองการ

28

การแทรกแถวและคอลมน คลกเมน Modify ใชคำาสง Table เลอกคลก Insert Rows เพอแทรกแถว หรอ คลก Insert Columns เพอแทรกคอลมน

29การควบคมฟอนต และการเขารหสภาษไทย (Thai Encoding)

คำาสงนเปนคำาสงทผใชควรจะเรมตนปบตกอนเสมอ โดย เลอกเมนคำาสง Modify, Page Properties…………. ซงจะปรากฏหนาตางการทำางาน ดงน

ปรบคารายการ Document Encoding: เปน Other หรอ TIS-620 หรอ Windows-874

จากนนคลกปม OK เลอกเมนคำาสง Edit, Preference….. จะปรากฏกรอบทำางาน ใหคลกเลอกลมคำาสง (Category) ชอ “Fonts” ซงจะปรากฏ

คำาสงยอย ดงน

เลอก Font เลอก Other เลอก Ms Sans Serif

ปรบคาจากรายการน

30

การใชงานฟอนตภาษาไทย (Thai Font)ฟอนตภาษาไทยมาตรฐาน ในทนหมายถง การกำาหนดฟอนตให

กบขอความ เพอใหขอความภาษานน ๆ แสดงผลไดถกตองบนเบราเซอรทงระบบ MS-Windows และระบบ Macintosh ซงเปนระบบทคนไทยนยมใชกนอยางแพรหลาย โดยผใชไมตองเสยเวลากบการปรบแตงฟอนตทเบราเซอรอก

ฟอนตภาษาไทยมาตรฐานทนยมใชในเวบเพจ ไดแก ฟอนต MS Sans Serif ซงเปนฟอนตภาษาไทยระบบMS-Windows และ ฟอนต Thonburi ซงเปนฟอนตภาษาไทยทนยมใชในระบบ Macintosh

การกำาหนดฟอนตเพอใชงาน กระทำาไดดงน เลอกคำาสง Text, Font, Edit Font List…… ปรากฏกรอบทำางานดงน

เลอกฟอนต “MS Sans Serif’ จากรายการ Available Fonts:

สำาหรบฟอนต Thonburi จะไมมรายการเลอก ใหพมพชอฟอนตทชองวางได

แถบรายการ Available Fonts: จากนนจงคลกปม Add -

พมพในชองน

31

ใบงานท 6เรอง การสรางตาราง

1.ใหนกเรยนออกแบบหนา Homepage โดยใชคณสมบตดงตอไปน

ตาราง การรวมเซล การแยกเซล การใสตวอกษร การใสรปภาพ

32

ใบความรท 7เรอง การเชอมโยง Link

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

2. ผลการเรยนรทคาดหวง 2.1 นกเรยนสามารถเชอมโยงเวบเพจ จากรปภาพ 2.2 นกเรยนสามารถเชอมโยงเวบเพจ จากขอความ 2.3 นกเรยนสามารถเชอมโยงเวบเพจ จาก File การเชอมโยงเวบเพจ (Link)

ไฮเปอรลงค (Hyperlink) มกจะถกเรยกสน ๆ วา ลงค คอการลงคจากเวบเพจหนงไปยงตำาแหนงตาง ๆ ภายในเวบเพจเดยวกนหรอตางเวบเพจกได นอกจากนยงสามารถสรางลงคสำาหรบเรยกโปรแกรมสำาหรบการสง e-mail หรอใชงานโปรแกรมพเศษประเภทสควปต (Script) ไดดวย เชน Java Script VBScript เปนตน

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

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

วธการสราง Hyperlink จากรปภาพหรอขอความ

331. เลอกรปภาพหรอขอความทตองการเชอมโยง โดยการ Drag Mouse และสามารถทำาไดดงน

2. คลกปม Hyperlink ทแทบ Common จะเกดหนาตาง Hyperlink และพมพขอความทตองการ ดงน

Text พมพปอนขอความทใชสรางการเชอมโยงLink กำาหนดไฟลหรอเวบไซดทตองการเชอมโยงไปถง

34Target กำาหนดลกษณะการแสดงผลของขอมลทปรากฏขนมา

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

หนาตางปจจบนเสมอ _self เปดหนาตางเบราเซอรหนาทมการยนยน

ตกลงขนมา _top เปดหนาตางเบราเซอรใหมขนมาแทนทเวบเพจ

เดมทงหมดTab Index พมพปอนจำานวนแทบTitle พมพปอนขอความทตองการใหปรากฏขนมาในขณะทนำาเมาสไปชAccess Key พมพปอนคยบอรดทใชในการเชอมโยง

3. คลกปม เพอยนยนคำาสง

ภาพทได

35

การเชอมโยงตดตอทางอเมลดวย Email Link ปม Email Link จะมหนาทรองรบการทำางาน การสงขอมลผานทาง

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

1. คลกปม Email Link ทแทบ Common จากนนจะปรากฏหนาตาง Email Link ขนมา

362. กำาหนดรายละเอยดทใชสำาหรบสรางการเชอมโยงตดตอทางอเมล

ไดดงตอไปนText พมพปอนขอความทใชการสรางการเชอมโยงตดตอทางอเมลE-mail พมพอเมลแอดเดรสทใชในการเชอมโยง

3. คลกปม เพอยนยนคำาสง

ใบงานท 7เรอง การเชอมโยง (Link)

ใหนกเรยนฝกสรางการเชอมโยง ดวยวธดงตอไปน

1 เชอมโยงเวบเพจ จากรปภาพ กบ File และ เวบไซทอน 2 เชอมโยงเวบเพจ จากขอความ กบ File และ เวบไซทอน

37

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

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

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

การสรางเลเยอรสามารถทำาไดอยางงายดายเพยงคลกทปม Draw Layer จากนนแดรกเมาสสรางเลเยอรใหมขนาดตามตองการเพยงเทานน

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

1. คลกปม Draw Layer ทแทบ Common2. แดรกเมาสสรางเลเยอรใหมขนาดตามตองการขนมาพนทงาน

3. นำาพอยนเตอรไวในเลเยอรและคลกปม Image ทแทบ Common จากนนจะปรากฏหนาตาง

Select Image Source ขนมา

4. ดบเบลคลกไฟลภาพทตองการนำาเขามาใชงาน5. หากภาพทปรากฏมขนาดใหญเกนไป ใหแดรกเมาสยอภาพใหมขนาดเลกพอดกบขนาดของเลเยอร ทสรางขนมา

39

การปรบเปลยนลำาดบของเลเยอร

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

1. คลกเมน Window Other Layers ใหปรากฏเครองหมายถก จากนนจะปรากฏ Layers Panel

ขนมา

2. แดรกเมาสลากจดลำาดบของชนงานทอยในเลเยอรใหม

40

การซอนเลเยอรเมอไมตองการใหชนงานทอยในเลเยอรตาง ๆ ปรากฏขนมาบน

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

1. คลกเมาสทรปดวงตาใหปดลง จะเปนการซอนชนงานทอยภายในเลเยอรนน ๆ ไมใหปรากฏขน

41ใบงานท 8

เรอง การสราง Draw Layers

1.ใหนกเรยนใชเลเยอรในการแทรกขอความและแทรกรปภาพภายในเวบเพจ

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

ใบความรท 9

42 การสราง Frame

1.สาระการเรยนรเฟรมเปนเทคนคทถกนำามาใชงานในการสราง เวบเพจ อกเทคนคและรป

แบบหนงทนาสนใจ จะประกอบไปดวยเฟรมหลกและเฟรมยอย มประโยชนคอ ใชสำาหรบจดแบงพนทบนหนาเวบเพจออกเปนสวน ๆ ใหเปนอสระตอกน โดยสามารถจดแบงเฟรมไดทงแนวตงและแนวนอน เมอนำาไปแสดงผลบนเบราเซอรขอมลทปรากฏขนมากจะถกจดแบงออกเปนสดสวนอยางชดเจน2. ผลการเรยนรทคาดหวง 2.1 นกเรยนสามารถทราบถงคณสมบตการสรางเฟรมได 2.2 นกเรยนสามารถกำาหนดแนวทางทจะนำาคณสมบตของเฟรม มาสราง Web page ได 2.3 นกเรยนสามารถใชเทคนคการสรางเฟรม สราง Web page ของกลมได 2.4 นกเรยนสามารถสรางเฟรม ,แกไข , ลบ เฟรม ได

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

ขนตอนการสรางเฟรม1. คลกปม Top and Nested Left Frame ทแทบ

Frames จากนนจะปรากฏเฟรมขนมาทางดานบนและดานซายของพนงาน ซงสามารถแดรกเมาสทำาการยอขยายขนาดของเฟรมไดตามตองการ

43

ทดสอบการทำางานกบเฟรม ภายหลงจากไดทำาการสรางเฟรมในรปแบบทตองการขนมาเรยบรอย

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

1. คลกเมน File Save All

2. จะปรากฏเสนขอบรอบ ๆ Frame และ จะปรากฏหนาตาง Save As ขน

44

3. ตงชอ File name แลวคลก Save เสนขอบจะเลอนไปในสวนตาง ๆ ของเฟรม ควรตงชอใหเหมาะสมกบ

การใชงาน

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

คลกเมน Window Properties ใหปรากฏเครองหมายถก จะปรากฏ Properties Panel ขนมาจากนนสามารถกำาหนดคาตาง ๆ ไดดงน

45 Frameset แสดงจำานวนเฟรมยอยทงหมดทมอยในแนวตงและแนวนอน Borders กำาหนดลกษณะการแสดงขอบของเฟรมo Yes ใหปรากฏขอบของเฟรมขนมาในขณะทแสดงผลบน

เบราเซอรo No ไมปรากฏขอบของเฟรมขนมาในขณะทแสดงผล

บนเบราเซอรo Default แสดงขอบของเฟรมขนมาตามคาทไดกำาหนดไวBorder Width กำาหนดความกวางเสนขอบของเฟรมBorder Color กำาหนดสเสนขอบของเฟรมValue กำาหนดคาขนาดของเฟรมในแนวตงและแนวนอนUnits ระบหนวยทใชในการกำาหนดคาขนาดของเฟรมo Pixels เลอกใชหนวยทแนนอนตามขนาดคาพกเซลของ

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

หลก 5. การกำาหนดคาคณสมบตของเฟรมยอย

Frame Name กำาหนดพมพปอนชอของเฟรมปจจบนทไดเลอกไวอยSrc กำาหนดตำาแหนงของขอมลหรอเวบไซททตองการใหปรากฏขนมาScroll ระบการทำางานของสกรอลลบารทใชในการเลอนแสดงขอมล

46o Yes ใหปรากฏสกรอลลบารทใชในการเลอนด

ขอมลขนมาo No ไมปรากฏสกรอลลบารทใชในการเลอนด

ขอมลขนมาo Auto เมอมขอมลมากเกนขนาดของเฟรม จงจะ

ปรากฏสกอลลบารขนมาใหo Default แสดงสกรอลลบารขนมาตามคาทได

กำาหนดไวNo Resize เมอคลกเลอก จะไมสามารถเลอนหรอปรบเปลยนขนาดของเฟรมไดBorders กำาหนดลกษณะการแสดงขอบของเฟรมแตละเฟรมo Yes ใหปรากฏขอบของเฟรมขนมาในขณะท

แสดงผลบนเบราเซอรo No ไมปรากฏขอบของเฟรมขนมาในขณะท

แสดงผลบนเบราเซอรo Default แสดงขอบของเฟรมขนมาตามคาทได

กำาหนดไวBorder Color กำาหนดสเสนขอบของเฟรมแตละเฟรมทไดเลอกไวMargin Width กำาหนดชองวางระหวางเฟรมซายและเฟรมขวาMargin Height กำาหนดชองวางระหวางเฟรมบนและเฟรมลาง

47

ใบงานท 9 การสราง Frameใหนกเรยนนำาความรเรองเฟรมมาประยกตใชโดยงานของทกคนตอง

แบงเฟรมออกเปน 3 สวน และหาภาพจาก Internet หรอภาพจากสอการเรยนการสอนของคร นำามาออกแบบใหเหมาะสมสวยงาม

48ใบความรท 10

เรอง การสราง Form1.สาระการเรยนร

Form สามารถอำานวยความสะดวกในการตอบรบขอมล ของผเขามาเยยมชม Web Site การทำางานของ Form

มใหเลกใชงานมากมาย2. ผลการเรยนรทคาดหวง 2.1 นกเรยนสามารถรจกคณลกษณะ และ รปแบบ ตางของคำาสง Form 2.2 นกเรยนสามารถออกแบบเคาโครงหนาเวบ Form ทตองการใชงานไดอยางเหมาะสม

การสรางฟอรม (Form)ประโยชนของฟอรมทสรางขนบนหนาเวบเพจ คอ ใชสำาหรบรบสงขอมล

ตาง ๆ จากผใชงานมาเกบไวทเซรฟเวอร การสรางฟอรมจะปรากฏแทก <form> พรอมทงกรอบเสนประสแดงขนมา โดยภายในฟอรมสามารถสรางออบเจกตทใชในการรบสงคาไดอกมากมาย ดงน

1. คลกแทบ Form จะปรากฏรปแบบฟอรมขนมามากมาย โดยมคณสมบตดงน

Form จะปรากฏฟอรมในลกษณะเปนกรอบสเหลยมเสนประสแดงขนมา โดยภายในฟอรมสามารถ

สรางออบเจกตทใชในการรบสงคาไดอกมากมาย ดงน

Text Field ใชสำาหรบปอนรบขอมลตาง ๆ ทผใชงานพมพคาไว เชน ชอ นามสกล ทอย

49

Hidden Field ใชสำาหรบนำาขอมลทไดมาประมวลผลโดยจะไมมการตดตอกบผใชงาน

Textarea หนาทการทำางานจะเหมอนกบ Text Field เมอคลกทปม Textarea แลวจะปรากฏกลองขอความในลกษณะหลายบรรทดขนมา

Check Box ใชสำาหรบขอมลทมตวเลอกหลายตว

50

Radio Button ใชสำาหรบตองการระบคลกตวเลอก จำานวนหลายตวเลอกไดเพยง ตวเลอกเดยว

Radio Group ใชในการคลกตวเลอกเพยงตวเลอกเดยว

เมอแสดงผลบนเบลาเซอรจะมขอความดงน

51

List/Menu เมอกำาหนดเปน Menu ขอมลจะปรากฏขนมาพรอมกบ Drop Down List เพอใชเลอกขอมลทตองการ

เมอแสดงผลบนเบลาเซอรจะมขอความดงน

Jump Menu มหนาทคลายปม List Menu แตสงทพเศษสำาหรบ Jump Menu คอเมอคลก

ปม Jump Menu สามารถ เชอมโยงเปดไฟล หรอเวบไซตทตองการขนมาได

เมอแสดงผลบนเบลาเซอรจะมขอความดงน

52

ใบงานท 10 การสราง Form

ใหนกเรยนสรางแบบฟอรมประวตสวนตวโดยใช Object ดงทกำาหนด

1.Text Field2.Check Box3.Radio Button4.List or Menuพรอมทงภาพของผจดทำาประกอบเพอเพมความสวยงาม

53ใบความรท 11

เรอง การสราง Flash Button/Flash Text1.สาระการเรยนร

การสราง Flash Button/Flash Text จะชวยใหเวบเพจ มความสวยงามมากขน

2. ผลการเรยนรทคาดหวง 2.1 นกเรยนสามารถรจกคณลกษณะ และ รปแบบ ตางของคำาสง Flash Button/Flash Text

6.1 นกเรยนสามารถออกแบบเคาโครงหนาเวบ โดยใช Flash Button/Flash Text ทตองการใชงาน

ไดอยางเหมาะสม

การสรางปมสำาเรจรปดวย Flash Buttonเมอโปรแกรม Flash มความสามารถในการสรางภาพเคลอนไหวให

ปรากฏเปนผลงานแอนเมชนขนมา ดงนนโปรแกรม Dreamweaver จงไดผนวดความสามารถของโปรแกรม Flash เขามารวมใชงานดวยนนคอ ปม Flash Button ทมคณสมบตหนาทในการสรางปมคลกในรปแบบ 3 มต ไดอยางสวยงามภายในพรบตาเดยว สำาหรบขนตอนการทำางานสามารถทำาดดงน

1. คลกปม Flash Button ทแทบ แตหากยงไมไดบนทกเวบเพจจะปรากฏหนาตางขนมาเพอใหทำาการบนทกไฟลเวบเพจกอน

54

Flash Button2. กำาหนดรายละเอยดในการสรางปม Flash Button ไดดงตอไปน

Style คลกเลอกรปแบบโดยสามารถดดวยตวอยางไดจากชอง SampleButton Text พมพขอความทตองการใหปรากฏขนมาบนปมFont คลกเลอกรปแบบของตวอกษรทตองการLink กำาหนดแหลงทตองการลงคเชอมโยงเมอทำาการคลกทปมTarget กำาหนดลกษณะการแสดงผลของขอมลBg Color กำาหนดสพนหลงของปมSave As พมพชอบนทกปมทสรางขนมา โดยไฟลทไดจะมนามสกลเปน .swf

55

Flash Text

ใบงานท 11

56 เรอง การสราง Flash Button/Flash Text

ใหนกเรยนนำาความรเรอง การสราง Flash Button/Flash Text มาประยกตใชในการออกแบบงานหนาเวบเพจ ของทกคนใหเหมาะสมสวยงาม

ใบความรท 12การสมคร Free Homepage

1.สาระการเรยนร

57 การสมคร Free Homepage เปนเปาหมายสงสดของผสราง Web page ทจะนำาผลงานการสราง Web page ของตนเองตอสายตาของผอนทสามารถเขาเยยมชมไดทวโลก2. ผลการเรยนรทคาดหวง 2.1 นกเรยนสามารถเลอก Free Web Site ทกลมตองการสมครขอพนทเวบไซต 2.2 นกเรยนสามารถรจกวธการสมครขอพนทเวบไซต ฟร ได

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

ตวเอง ทสามารถใหคนทวโลกมาเยยมชมได หากเราตองการชอดอทคอมสกชอ เราคงตองเสยเงนจำานวนหนงในการจดโดเมนเนม (Domain Name) และเสยคาบรการเชา Server สำาหรบเกบเวบเพจของเรา แตในอนเตอรเนตกมบรการฟรโฮมเพจ ใหเราสามารถสรางเวบไซทสวนตวของเราโดยไมตองยงยากและเสยเงนทองเลย มเวบไซทหลายแหงทนะแนะนำาซงเปนเวบไซทตางประเทศเปนสวนใหญของไทยกมบางแตไมมากนกซงพอจะยกตวอยางไดดงน

www.Hypermart.net www.Geocities.comwww.50megs.com

www.Fortunecity.com www.20m.comwww.Webjump.com

www.thai.net เปนตน โดยเฉพาะท www.Geocities.com นนถอวาไดรบความนยม

ทวโลก เพราะมบรการทใชงานงายและม เครองมอในการอบโหลด

การขอพนทเวบไซทฟรGeocities เปนเวบไซตของ yahoo.com ซงคนสวนใหญ

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

1. เมอเชอมตออนเทอรเนตใหเขาสเวบไซต http://www.geocities.com

58

2. คลกท Sign up for a free web site เพอสมครเปนสมาชกขอพนทเวบไซตฟร

3. คลกท Sing up now เพอเขาสขนตอนการลงทะเบยนสมครเปนสมาชก

59

4. กำาหนดรายละเอยดตาง ๆ ทใชในการลงทะเบยนสมครเปนสมาชกไดดงตอไปน

Yahoo ID พมพชอใชในการตดตอเขาสเวบไซตPassword พมพรหสผานRe-type Password พมพยนยนรหสผานอกครงหนงSecurity Quesstion เลอกคำาถามทตองการ ใชสำาหรบกรณทมการลมหสผานYour Answnswer พมพคำาตอบของคำาถามนนBirthday พมพวนเดอนปเกดAltermate Email พมพอเมลทใชในการตตอFirst Name พมพชอทใชในการตดตอLast Name พมพนามสกลทใชในการตดตอ

60

61

ใบความรท 13.1การนำาขอมล Webpage Upload ขน Web Browser

1.สาระการเรยนรการอบโหลดเปนการจดตงเวบไซทขนสระบบอนเทอรเนตเพอใหทก ๆ

คนทอยทกมมโลกสามารถเขามาเยยมชมได โดยทวไปนยมใชผาน Cute FTP หรอ โปรแกรมสำาเรจรป Web Hosting ของเวบไซตตาง ๆ

2. ผลการเรยนรทคาดหวง 2.1 นกเรยนสามารถรจกวธการอบโหลด Web page ทนกเรยนสราง ไปยง Server ได 2.2 นกเรยนสามารถรจกวธการแกไขเพมเตมขอมลทอบโหลด Web page ทนกเรยนสรางบน Server ได

รปแบบของ Cute FTP

Connect to URL Upl

oadDownload

Password

Username

62

การ Upload โดยใชรปแบบสำาเรจรปของ GeoCitees1. เลอกรปเครองมอในการสรางเวบไซต

2. เลอกประเภทเวบไซตทตองการจะสราง

633. เลอกรปแบบเวบไซตทตองการจะสราง

4. เลอกรปแบบทเหมาะสมกบเวบไซตทตองการจะสราง

5. รอการสรางรปแบบและ Upload ดวยระบบอตโนมต

64

การ Upload โดยใช Yahoo Hosting

65

66

ใบความรท 13.2 เรอง วธการทำาโครงงาน

จดประสงคการเรยนร1. นกเรยนสามารถบอกความหมายของโครงงานคอมพวเตอรได

2. นกเรยนสามารถอธบายรปแบบการจดทำาโครงงานคอมพวเตอรได 3. นกเรยนสามารถเขยนขนตอนการจดทำาโครงงานคอมพวเตอรได4. นกเรยนสามารถเขยนรายงานโครงงานคอมพวเตอรได

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

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

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

ประเภทของโครงงานประเภทของโครงงานอาจแบงตามลกษณะของกจกรรมไดเปน 4 ประเภท คอ1. โครงงานประเภทสำารวจ รวบรวมขอมล โครงงานประเภทน ผ

เรยนเพยงตองการสำารวจและรวบรวมขอมลแลวนำาเสนอขอมลเหลานนมาจำาแนกเปนหมวดหมและนำาเสนอในรป

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

2.โครงงานประเภทการทดลอง เปนโครงงานทมการออกแบบการทดลองเพอศกษาผลของตวแปรหนงทม

ตอตวแปรอกตวหนงทตองการศกษาโดยควบคมตวแปรอน ๆ ทอาจมผลตอ ตวแปรทตองการศกษาไว โดยทว ๆ ไป ขนตอนการดำาเนนงานของโครงงาน

ประเภทน จะประกอบดวยการกำาหนดปญหา การดำาเนนการทดลอง การ รวบรวมขอมล การแปรผลและการสรปผลการทดลอง เชน การศกษาเปรยบ

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

3. โครงงานประเภทพฒนาหรอประดษฐ เปนโครงงานเกยวกบการประยกตทฤษฎ หรอหลกการทาง

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

4.โครงงานประเภททฤษฎ หลกการ หรอแนวคด เปนโครงงานทผทำาโครงงานไดนำาเสนอทฤษฎ หลกการ

หรอแนวคดใหม ๆ ซงอาจจะอยในรปแบบของสตรสมการ หรอคำาอธบายกไดโดยผเสนอ ไดตงกตกาหรอขอตกลงขนมาเอง แลวนำาเสนอทฤษฎ หลกการ แนวคด หรอจนตนาการของตนเองตามกตกาหรอขอตกลงนน หรออาจใชกตกาหรอขอตกลงเดมมาอธบายสงของ หรอปรากฏการณในแนวคดใหม โครงงานนมกเปนโครงงานทางคณตศาสตร หรอวทยาศาสตร เชน โครงงานเกษตรทฤษฎใหม ทฤษฎของจำานวน ฯลฯ

วธการทำาโครงงาน การทำาโครงงาน1. กำาหนดปญหา กำาหนดหวขอเรอง2. ตงสมมตฐาน หรอคำาตอบชวคราว3. ออกแบบการศกษาคนควา การทดลอง4. ลงมอปฏบต5. สรปผลโดยการจดทำารายงานโครงงาน

…………..อาจมปญหาใหมเกดขน………..(ปญหาใหมทเกดขนนำาไปสโครงงานเรองตอ ๆ ไป โดยมขนตอนการทำางานโครงงาน เหมอนขอ 1-5)

6. นำาเนอผลงาน ประเมนผล7. จดนทรรศการ สงประกวด หวขอการเขยนรายงานโครงงาน

69โครงงานวชา……………………เรอง……………………….ผจดทำา อาจารยท……………ปรกษา…………….โรงเรยน……………………สงกด………

ระดบชน…………………….บทคดยอ (สรป วตถประสงคของการดำาเนนงาน, วธการดำาเนนงาน, ผลประโยชนทไดรบ)กตตกรรมประกาศ (การไดรบความอนเคราะหในรปแบบตาง ๆ เชน ขอมล ความชวยเหลอ)บทท 1 บทนำา ทมาและความสำาคญของโครงงาน………………..วตถประสงค………….

สมมตฐานของการศกษาคนควา ขอบเขตการ………ศกษาคนควา ตวแปรทเกยวของ …… (ถาม)

บทท 2 บทเอกสารทเกยวของกบการทำาโครงงานเรองนบทท 3 อปกรณ วธดำาเนนการศกษาบทท 4 ผลการศกษา และอภปรายผลบทท 5 สรปผล ประโยชน ขอเสนอแนะเอกสารอางอง

ใบงานท 13.1เรอง เคาโครงรางโครงงานคอมพวเตอร

โครงงาน รายวชา โครงงานคอมพวเตอรชอกลม ชน ม………………………………………………… ………/………… ประธานกลม……………………………………….กจกรรมท 1.

701.1 ชอ

งาน………………………………………………………………………………………………………………..

1.2 งานทไดรบมอบหมาย………………………………………………………………………………………

1.3 การออกแบบงาน (สงรางแบบงานขางทายน)

โครงงานรายวชา โครงงานคอมพวเตอรเรอง………………………………………………ผจดทำา อาจารยท……………ปรกษา…………….โรงเรยน……………………สงกด………

ระดบชน…………………….บทคดยอ (สรป วตถประสงคของการดำาเนนงาน, วธการดำาเนนงาน, ผลประโยชนทไดรบ)

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

กตตกรรมประกาศ (การไดรบความอนเคราะหในรปแบบตาง ๆ เชน ขอมล ความชวยเหลอ)

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

บทท 1 บทนำา ทมาและความสำาคญของโครงงาน………………..วตถประสงค………….

สมมตฐานของการศกษาคนควา………….ขอบเขตการศกษาคนควา…………….ตวแปรทเกยวของ

71(ถาม)…………….……………………………………………………………………………………………………………………

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

บทท 2 บทเอกสารทเกยวของกบการทำาโครงงานเรองน…………………………………………………………

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

บทท 3 อปกรณ วธดำาเนนการศกษา……………………………………………………………………………………………………………………

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

……

บทท 4 ผลการศกษา และอภปรายผล………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………

………

บทท 5 สรปผล ประโยชน ขอเสนอแนะ ………………………………………………………………………………………………………………………… …………………………………………………………………………………………………………………………

เอกสารอางอง ………………………………………………………………………………………………………………………… …………………………………………………………………………………………………………………………

กจกรรมท 2. กจกรรมทนกเรยนเลอกปฏบต เลอกไดมากกวา 1 ขอ ตามตองการ

72 รปภาพ

จาก…………………………………………………………………………………………….……………………………….…

คดลอกขอความเรอง……………………………………………………………………………………………..…………………….

คำาประพนธไดมาจาก…………………………………………………………………………………………..………………………..

การสรางเอกสาร (แผนพบ, การด, รายงาน ฯ)……………………………………………………………………………………

จดประสงคการเรยนร ทนกเรยนไดรบ หลงจบบทเรยนนแลว1………………………………………………………………………………………………………………………………………………………2………………………………………………………………………………………………………………………..………………………….…จดประสงคการนำาไปใช ทนกเรยนไดรบ หลงปฏบตกจกรรมนแลว1………………………………………………………………………………………………………………………………………………………2………………………………………………………………………………………………………………………..………………………….…

แหลงขอมล1.www………………………………………………………………….ความรทได ……………………………………………………….2.www………………………………………………………………….ความรทได ……………………………………………………….3………………………………………………………………….……….ความรทได……………………………………………………….…สงงานวนท เดอน………… ………………………………..พ.ศ.25……………….

ผตรวจประเมนผลงาน……………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………..……………………………………

73

ลงชอ……………………………………………………………..ผสอน

นางศศธร ไวทยสวรรณ

แบบประเมนตนเองของนกเรยน

รายวชา โครงงานคอมพวเตอร

การประเมนตนเองของนกเรยน

นกเรยนตอบคำาถามเหลานขณะทำางาน หรอ เมอทำางานแตละชนเสรจแลว1. โครงงานงานทนกเรยนทำามแนวคด/ความเปนมา อยางไรบาง จงอธบาย…………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………2.นกเรยนไดคณคา/ความร อะไรบางจากการทำางานโครงงานหวขอน…………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………

743.หวขอเนอหาทเนกรยนเลอกสรางโครงงานมสมพนธกบ โปรแกรม

Dreamweaver Mx อยางไรบาง ?…………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………4.เนอหา ทนกเรยนไดเรยนรมาแลว นกเรยนรสกเชอมนเกยวกบอะไร…………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………5.นกเรยนยงไมเขาใจในหวขอเนอหาอะไรบาง…………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………

ใบงานท 13.2

75 เรอง การจดทำาเคาโครงรางโครงงานการสรางเวบไซต ดวยโปรแกรม

Dreamweaver MX ใหนกเรยนจดทำาเคาโครงรางโครงงานการสรางเวบไซต ดวยโปรแกรม

Dreamweaver MX โดยจะตองบรณาการกบกลมสาระวชาใดวชาหนงตามทนกเรยนถนด และ

สนใจ หรอ มเนอเรองเกยวกบแนวปรชญาเศรษฐกจพอเพยง ตามทกลมไดรวมกนตดสนใจเลอกหวขอไว เพอเตรยมความพรอมในการจดทำาโครงงานตอไปอยางนอย 3 Pages โดยวาดรปแบบ ลงในใบงานทกำาหนด

ใบงานท 14

เคาโครงราง โครงงาน หนาท…… ..

76 เรอง การจดทำาโครงงานการสรางเวบไซต ดวยโปรแกรม

Dreamweaver MX

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

สรางงานมลตมเดย ดวยโปรแกรม Dreamweaver MX โดยจะตองบ รณาการกบกลมสาระวชาใดวชาหนงตามทนกเรยนถนด และ สนใจ

77

ภาคผนวก

ตวอยางสอการเรยนการสอน

78 รปภาพ Animation

รปภาพ แผน CD ไทยประณตศลป 300 รปภาพ ของบรษทเจเนซส มเดยคอม จำากด

รปภาพ แผน CD วถชวตไทย 300 รปภาพ ของบรษทเจเนซส มเดยคอม จำากด

79

รปภาพ แผน CD สถาปตยกรรมและปชนยสถาน 300 รปภาพ ของบรษทเจเนซส มเดยคอม จำากด

รปภาพ แผน CD คลปอารต การศกษา 12,600 รปภาพ ของบรษทเจเนซส มเดยคอม จำากด

80

รปภาพ แผน CD คลปอารต การศกษา 12,600 รปภาพของบรษท เจเนซส มเดยคอม จำากด

1. กลมสาระการเรยนร คณตศาสตร ตาราง

81 ปฏทน

นาฬกา

รปทรง

2. กลมสาระการเรยนร วทยาศาสตร ตนไม

มนษย

82

รางกายมนษย

สญลกษณทางวทยาศาสตร

สตวนำา

สตวปก

สตวเลอยคลาน

83

พช

แมลง

สญลกษณทางไฟฟา

สตวดกดำาบรรพ

สตวปา

84

สตวเลยง

3. กลมสาระการเรยนร สงคมฯ การเมองการปกครอง

เทศกาล

85

ประวตศาสตร

แผนทโลก

ราศ

วนหยด

สถานท

86

งานอสเตอร

ธง

แผนท

ยศ

ฤดกาล

87 ศาสนา

สถานทสำาคญ

4. กลมสาระการเรยนร สขศกษา การรกษา

88 การออกกำาลง

ผลไม

ผก

มอ

อาหาร

89

5. กลมสาระการเรยนร การงานอาชพและเทคโนโลย การเกษตร

90

การสอสาร

เครองแตงกาย

เครองมออน ๆ

ยานพาหนะ

อวกาศ

91

อปกรณ

การศกษา

คอมพวเตอร

เครองมอออกแบบ

แตงบาน

92 สงกอสราง

อาวธสงคราม

6. กลมสาระการเรยนร ศลปะ

93 กรอบ

ขอความเตอน

บนเทง

ภาพศลป

สญลกษณ

ขอความตาง ๆ

94 ดาว

ปายจราจร

ลวดลาย

อกษร

95

บรรณานกรม

ภททรา เหลองวลาศ. Dreamweaver MX สรางเวบไซตแบบมออาชพ. กรงเทพฯ: ซเอดยเคชน, 2547

ดวงใจ พงศประเทองสข. จบภาพแบบอยหมด! ดวย Snag It 6.1. กรงเทพมหานคร: บรษทเฟสท แปซฟก (ดอกหญา) จำากด, 2545.ทศนา แขมมณ. 14 วธสอนสำาหรบครมออาชพ. กรงเทพมหานคร: จฬาลงกรณมหาวทยาลย, 2544. วชาการ, กรม. กระทรวงศกษาธการ. หลกสตรการศกษาขนพนฐาน พทธศกราช 2544. พมพครงท 2. กรงเทพมหานคร: โรงพมพองคการรบสงสนคาและพสดภณฑ (ร.ส.พ.), 2545.วชาการ, กรม. กระทรวงศกษาธการ. เอกสารประกอบหลกสตรการศกษาขนพนฐาน พทธศกราข 2544 คมอการจดการเรยนรกลมสาระการเรยนร การงานอาชพและเทคโนโลย. กรงเทพมหานคร: โรงพมพ องคการรบสงสนคาและพสดภณฑ (ร.ส.พ.), 2545.วชาการ, กรม. กระทรวงศกษาธการ. หลกสตรการศกษาขนพนฐาน พทธศกราข 2544 สาระและมาตรฐานการ เรยนร กลมสาระการเรยนร การงานอาชพและเทคโนโลย. กรงเทพมหานคร: โรงพมพองคการรบสงสนคา และพสดภณฑ (ร.ส.พ.), 2545. วชาการ, กรม. กระทรวงศกษาธการ. เอกสารชดเทคนคการจดกระบวนการเรยนร ทผเรยนสำาคญทสด การเรยนร

96 เพอพฒนากระบวนการคด. กรงเทพมหานคร: โรงพมพการศาสนา, 2543.