บทที่ 1 - sattc.net · เว็บใน Dreamweaver...

1

บทท 1

บทน ำ

ชอโครงงำน สรางสอการสอนพยญชนะไทยดวยโปรแกรม Macromedia Dream ชอผจดท ำโครงงำน นางสาวปนดดา ลออเอยม, นางสาวภาภร นมประยงค ชออำจำรยทปรกษำ อาจารยกาญจนา ประสานยทธ 1.1 หลกกำรและเหตผล ปจจบนคอมพวเตอรไดเขามามบทบาทในชวตประจ าวนของมนษยไมวาจะเปนเรองของการเรยนการท างานและอนๆ คอมพวเตอรสามารถชวยอ านวยความสะดวกสบายใหแกผใชไดเปนอยางมาก ทงในดานการเรยนการสอนดานธรกจในองคกรตางๆ จงไดมการน าคอมพวเตอรเขามาใชกนอยางแพรหลาย จงถอไดวาคอมพวเตอรเปนปจจยทส าคญมากปจจยหนงในชวตประจ าวนของมนษย แหลงความรเกยวของกบคอมพวเตอรมหลากหลายรปแบบทจะน าเสนอใหผใชไดเรยนร และคนควาหาความรในเรองตางๆ ไดหลากหลาย เชน หนงสอ รายการโทรทศน อนเทอรเนต หรอการใชสอการเรยนการสอน การสรางสอการเรยนการสอนนนท าไดหลากหลายโปรแกรม เชน Adobe Flash cs3 , Adobe Dreamweaver cs3 , E-BOOK และโปรแกรมหนงทสามารถน ามาใหสรางสอการเรยนการสอนคอการใชโปรแกรม Macromedia Dream ซงเปนโปรแกรมทใชในการสรางเวบเพจบรหารจดการเวบไซต และเอพพลชน สามารถเขยนโปรแกรมส าหรบเวบไดทกรปแบบ เชน ASD , XML , XHTML , PHP , JSP ฯ และสามารถใชในการสรางตวอกษร ภาพกระพรบ และใสเสยงประกอบได Macromedia Dream จงสามารถน ามาใชสรางสอการเรยนการสอน พยญชนะไทย

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

2

1.2 วตถประสงค 1. เพอใหเดกอนบาลไดฝกทกษะในการอานออกเสยงพยญชนะไทย

ใหถกตอง ชดเจนยงขน 2.เพอใหเดกอนบาลสนกกบการเรยนรพยญชนะไทย

1.3 ขอบเขตของโครงงำน 1.3.1 สรางสอการสอนพยญชนะไทยดวยโปรแกรม Macromedia Dream ประกอบดวย พยญชนะไทย 44 ตว พรอมภาพประกอบ 1.3.2 แบบสอบถามความพงพอใจ 1.3.3 แผนซดสอการเรยนการสอนพยญชนะไทยดวย Macromedia Dream

1.4 วธด ำเนนกำร 1.4.1 ศกษาหวขอโครงงาน 1.4.2 ขออนมตโครงงาน 1.4.3 ออกแบบการสรางชนงาน 1.4.4 จดท าสอการเรยนการสอน 1.4.5 จดท าคมอ/เอกสารประกอบโครงงาน

3

ตำรำงกำรด ำเนนงำน

ขนตอนกำรท ำงำน ระยะเวลำด ำเนนกำร (สปดำห)

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 ขนเตรยมกำร

-คนควาขอมล -ศกษาโครงงาน -เสนอโครงงาน

ขนด ำเนนงำน -ออกแบบสอการสอน -จดเตรยมอปกรณ -จดท าสอการสอน -ทดสอบ/ทดลอง/บนทกผล

ขนสรปและประเมนผล -น าเสนอโครงงาน -ประเมนผล

1.5 ประโยชนทคำดวำจะไดรบจำกโครงงำน 1.5.1 อาจารย/นกเรยนนกศกษา สามารถใหเปนสอการเรยนการสอน

1.5.2 ไดความรเรอง การสรางสอการเรยนการสอนใน Dreamweaver CS3 1.6 เครองมอและอปกรณ 1.6.1 หนงสอประกอบการเรยนการสอนพยญชนะไทย 1.6.2 โปรแกรม Macromedia Dreamweaver CS3 1.6.3 แผน CD

4

1.7 งบประมำณ

ล ำดบ รำยกำร จ ำนวน รำคำตอหนวย รำคำรวม

1 แผน CD 1 20 20 2 หนงสอประกอบการเรยนพยญชนะไทย 1 25 25 3 กระดาษ A4 1 150 150 4 หมกสด า 1 500 500 5 หมกส 1 500 500

รวม 1,195

( หนงพนหนงรอยเกำสบหำบำทถวน) 1.8 แผนผงกำรท ำงำน

บทท 2

เรมตน

เสรจสน

คนหาขอมล

ศกษาโครงงาน

น าเสนอโครงงาน

ออกแบบโครงงาน

เตรยมอปกรณ

ท าสอการเรยนการสอน

ผลการทดลอง

ไมผาน

ไมผาน

ผาน

ผาน

5

บทท 2

ทฤษฎทเกยวของ

การจดท าโครงงาน “สรางสอการสอนพยญชนะไทยดวยโปรแกรม Macromedia Dream” คณะผจดท าไดศกษาคนควาเอกสารเกยวการจดท า มรายละเอยด ดงน

1. โปรแกรม Macromedia Dreamweaver CS3

2.1 ท ำควำมรจกโปรแกรม Macromedia Dreamweaver CS3 Dreamweaver ถอไดวาเปนเครองมอส าหรบสรางเวบเพจ และ ดแลเวบไซต ทม

ประสทธภาพสง เปนทนยมใชของ Web Master อยางกวางขวาง ซงเปนโปรแกรมส าหรบเขยนภาษา HTML โดยเฉพาะ พรอมทงสามารถแทรก Java Scripts และ ลกเลนตางๆไดมากมาย โดยทผใชไมจ าเปนตองรหลกภาษา HTML มากนก ซงชวยประหยดเวลา และ ท างานไดสะดวกยงขน

Macromedia Dreamweaver คอโปรแกรมหรอเครองมอ ทใชในการพฒนาเวบไซดระดบมออาชพ มความสามารถในการใชสราง ออกแบบ เขยนโคด เวบเพจ บรหารจดการเวบไซต และเวบแอพพลเคชน ไดอยางมประสทธภาพ ชวยลดงาน ลดเวลาในการพฒนาเวบเพจ โดยสามารถสรางโคดไดหลายภาษา เชน HTML, PHP, ASP, JSP ฯ และสามารถตดตอกบฐานขอมลไดหลายฐานขอมล เชน MySQL, PostgreSQL, MS Access, MS SQL Server ฯ โดยทผออกแบบเวบเพจ ไมจ าเปนตองมความความรดานภาษาและการจดการฐานขอมล หรอมความรเพยงเลกนอยกสามารถสรางเวบเพจไดอยางรวดเรว

2.2 สวนประกอบของ Macromedia Dreamweaver CS3

Welcome window จะปรากฏครงเดยวจากการทเรยกใชงาน Dreamweaver MX ครงแรกหลงจากการตดตง ใหเลอก Design เพราะการสรางเวบเพจ จะใชการหนาจอ Design (ออกแบบ) เปนหลก

Menu การท างานบน Dreamweaver MX สามารถสงผานทางเมน Insert bar ประกอบดวยไอคอน Object ตางๆ แตละ Object จะมคณสมบตเฉพาะ ผพฒนา

ตองรคณสมบตของแตละ Object ซงผพฒนาสามารถแทรก Object ตาง ๆ ลงในเวบเพจ เชน

6

ขอความ รปภาพ ตาราง ฟอรม ฯลฯ ซง Object เหลาน เมอแทรกลงในเวบเพจกคอการแทรกแทก HTML ลงไปนนเอง ผพฒนาสามารถใชเมน Insert แทนการคลกปม Object ตางๆ บน Insert bar ไดเชนเดยวกน

Document toolbar ประกอบดวยไอคอนทเกยวของกบ Document window เชน ไอคอน การออกแบบ (Show Design view) การเขยนโคด (Show Code view)

Document window เปนพนทในการสรางเวบเพจ ประกอบดวย Show Design view ใชในการออกแบบเวบเพจ และ Show Code view ใชในการเขยนโคด หนาจอทงสองนส าคญมาก เพราะการสรางเวบเพจจะสรางจากหนาจอทงสองนเปนหลก

Property inspector ดหรอแกไขคณสมบตของ Object บนเวบเพจ Panel groups คอกลมของแถบ (Panel) ซงเปนกลมทรวบรวมการท างานทเกยวของกนไว

ทเดยวกน ผพฒนาจะใชแถบเหลานในการสรางเวบเพจ File panel คอ กลมแถบไฟลประกอบ Site ทเกบเวบเพจตางๆ ทอยระหวางการพฒนา Tag selector ส าหรบคลกเพอเลอกแทกในต าแหนงทตองการบนเวบเพจ

นอกเหนอจากน Dreamweaver MX ยงมแถบ (Panel) และเครองมออนๆ ทไมไดแสดงใหเหนในหนาจอน เชน Design Panel, Code Panel และ Application Panel เปนตน แตสามารถเรยกใชไดผานเมนของโปรแกรม 2.3 ควำมสำมำรถของโปรแกรม Macromedia Dreamweaver CS3

ในการเขยนเวบเพจ จะมลกษณะคลายกบการพมพงานในโปรแกรม Text Editor ทวไป คอวามนจะเรยงชดซายบนตลอดเวลา ไมสามารถยาย หรอ น าไปวางต าแหนงทตองการไดทนทเหมอนโปรแกรมกราฟก เพราะฉะนนหากเราตองการจดวางรปแบบตามทเราตองการ กใชตาราง Table เขามาชวยจดต าแหนง ซงเมอมการจดวางรปแบบทซบซอนมากขน การเขยนภาษา HTML กซบซอนยงขนเชนกน โปรแกรม Dreamweaver อาจจะไมสามารถเขยนเวบไดตามทเราตองการทงหมด วธการแกไขปญหาทดทสดคอ ควรจะเรยนรหลกการของภาษา HTML ไปดวย ซงถอวาเปนสงทจ าเปนมากส าหรบผทตองการประกอบอาชพ Webmaster แบบจรงจง อาจจะไมตองถงกบทองจ า Tag ตาง ๆ ไดทงหมด แตขอใหร เขาใจหลกการกพอแลว เพราะหลาย ๆ ครงทเราจะเขยนเวบใน Dreamweaver แลวกลบไดผลผดเพยนไป ไมตรงตามทตองการ กตองมาแกไข Code HTML เอง และความสามารถของ Dreamweaver สรปไดดงน 1. สนบสนนการท างานแบบ WYSIWYG (What You See Is What You Get) หมายความวา เวบทเราเขยนหนาจอ Dreamweaver กจะแสดงแบบเดยวกบเวบเพจจรงๆ ชวยใหเราเขยนเวบเพจ

7

งายขน ไมตองเขยน Code HTML เอง 2. มเครองมอในการชวยสรางเวบเพจ ทมความยดหยนสง 3. สนบสนนภาษาสครปตตางๆ ทงฝง Client และ Server เชน Java, ASP, PHP, CGI, VBScript 4. มเครองมอในการ Upload หนาเวบเพจไปทเครอง Server เพอท าการเผยแพรงานทเราสรางในอนเทอรเนต โดยการสงผาน FTP หรอ โดยการใชโปรแกรม FTP ภายนอกชวย เชน WS FTP 5. รองรบมลตมเดย เชน การใสเสยง, การแทรกไฟลวดโอ, การใชงานรวมกบโปรแกรม Flash , Fireworks Training

2.4 กำรสรำงเวบเพจใหม

2.4.1 Basic Page เปนเวบเพจทวๆไปทไมตดตอกบฐานขอมล เวบเพจประกอบดวยภาษา HTML สรางโดยเลอกเมน File>New แทบ General เลอก Basic Page>HTML คลกปม Create

2.4.2 Dynamic Page เปนเวบเพจทตดตอกบฐานขอมล เวบเพจประกอบดวยภาษา HTML และภาษา PHP ผสมกนสรางโดยเลอกเมน File>New แทบ General เลอก Dynamic Page>PHP4 คลกปม Create

2.5 กำรก ำหนด Site ขนตอนนมความส าคญมาก เนองจากการก าหนด Site เปนการก าหนดชอขนมาเปนตวแทน ของพนททเกบไฟลเวบเพจตาง ๆ รวมทงไฟลทเกยวของกบเวบเพจ เชน ไฟลรปภาพ ไฟลก าหนดการตดตอกบฐานขอมล ซงไฟลเหลานจะอยบนเครองของผพฒนา(Local) และอยบนเครอง Web Server (Remote) ทง Local และ Remote พนททเกบเวบเพจ คอ DocumentRoot หรอ DocumentRoot ตามดวยพนทยอยทผพฒนาก าหนด การพฒนาเวบเพจจะอางถงชอ Site กจะเหนรายชอไฟลเวบเพจและไฟลทเกยวของกบเวบเพจ

8

2.6 กำรแทรกขอควำม การพมพขอความในเวบเพจจะคลายกบการพมพเอกสารในโปรแกรม Word ถาผพฒนาเคย

ใช Word ไดกสามารถสรางเวบเพจทเปนขอความไดงาย ขอความสามารถท าเปนจดเชอมโยงได (link)

2.6.1 พมพขอความทตองการ ลงบนหนาจอ Show Design View ถาตองการจดรปแบบ 2.6.2 ขอความ ใหก าหนดทหนาจอ Properties 2.6.3 ตองการด Code ทเปนภาษา HTML คลกไอคอน Show Code View 2.6.4 ตองการดผลลพธทาง Browser กดปม F12 บน Keyboard 2.6.5 ตองการบนทก (File>Save หรอ Ctrl+S)

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

และดงดดความสนใจใหกบผทเขามาชมเวบแลว ยงสามารถท าเปนจดเชอมโยงได (link) ชนดของรปภาพทนยมน ามาใชประกอบในเวบเพจ คอ .gif หรอ .png-8 เปนภาพทโปรงแสง ภาพชนดนจะมขนาดและจ านวนส 256 ส (8 บท) นอยกวา .jpg จะมลกษณะทงรปแบบภาพนง และภาพเคลอนไหว แสดงผลบนเวบเพจไดเรวกวา .jpg .jpg หรอ .jpeg เปนภาพทมจ านวนส 16.7 ลานส จะมลกษณะเปนภาพนง หรอเปนการถายภาพมาโดยตรงจากกลองดจตอล .png-24 มลกษณะเปนภาพนงทมลกษณะโปรงแสง จะมขนาดและคณภาพ มากกวา .jpg นอกเหนอจากน ยงมรปภาพแบบอนๆ อก เชน .bmp, .pcx ฯลฯ รวมทงไฟลจาก Flash หรอ Shockwave (.swf ) มาใชกบเวบเพจไดดวย โดยเฉพาะไฟลนามสกล .swf จะท าใหการโหลดเวบเพจไดเรวขน ขนาดของไฟลรปภาพตองไมใหญจนเกนไปเพราะจะท าใหการแสดงผลบนเวบเพจชา 2.8 วธแทรกรปภำพ

2.8.1 แทบ Common คลกไอคอน Image หรอ คลกเมน Insert > Image จะปรากฏหนาจอ Select Image Source ขนมา หลง Look in เลอกพนททเกบรปภาพ แลวคลกเลอกไฟลรปภาพทตองการ หลงจากนนคลกปม OK

2.8.2 เวบเพจจะปรากฏรปภาพทเราเลอกแสดงใหเหน

9

2.9 กำรสรำงจดเชอมโยง(Link) เปนการเชอมโยงระหวางหนาเวบเพจหรอระหวางเวบไซต ซงมหนาทในการเปดหนาเวบเพจนนๆ ตามทไดก าหนดไว การเชอมโยงเวบเพจเปนการสงใหเวบเบราเซอรไปท างานทอกเวบเพจหนง หรอไปท างานทเวบไซตอนๆ หรอภายในเวบเพจเดยวกน โดยเราสามารถสรางจดเชอมโยงแบบตางๆ ได ดงน

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

2.10 กำรเชอมโยงจำกรปภำพ

การเชอมโยงจากรปภาพ จะมลกษณะคลายกบการเชอมโยงดวยขอความ เมอเราน าเมาสไปวางบนรปภาพ

ลกศรของเมาสจะเปลยนไปเปนรปนวมอช ขนตอนกำรเชอมโยงจำกรปภำพ

2.10.1คลกรปภาพทตองการสรางจดเชอมโยง ทหนาจอ Properties ชองหลง Link พมพชอ URL ตามดวยชอเวบเพจทตองการเชอมโยงไป

2.10.2หรอคลกทปม Browse for File เพอเลอกไฟลทตองการเชอมโยง หากเลอกคลกปม Browse for File จะปรากฏหนาจอ Select File ใหคลกเลอก

2.10.3ไฟลเวบเพจทตองการเชอมโยงไป หลงจากนนคลกปม OK ทดสอบ (กดปม F12) เลอนเมาสไปวางบนรปภาพ ลกศรเมาสจะเปลยนเปนรปนวมอช

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

10

บทท 3

วธด ำเนนโครงงำน

โครงงาน “สรางสอการสอนพยญชนะไทยดวยโปรแกรม Macromedia Dream” ประกอบดวยการท างานในสวนตาง ๆ มวธด าเนนการ ดงน

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

3.1 ประชำกรและกลมตวอยำง

3.1 ประชากร นกเรยนระดบอนบาลชนปท 1 ภาคเรยนท 2 ปการศกษา 2554 ของโรงเรยนบานมาบฟกทอง ต.หวยใหญ อ.บางละมง จ.ชลบร

3.2 กลมตวอยาง นกเรยนระดบอนบาลชนปท 1 หอง 3 ภาคเรยนท 2 ปการศกษา 2554 ของโรงเรยนบานมาบฟกทอง ต.หวยใหญ อ.บางละมง จ.ชลบร จ านวน 20 คน

3.2 เครองมอทใชในกำรศกษำ 3.1 สอการเรยนการสอนวชาภาษาไทยโดยใชโปรแกรม Macromedia Dream

3.2 แบบสอบถามความพงพอใจผทดลองใช จ านวน 5 ขอ แบบ 5 ระดบ

11

3.3 วธด ำเนนกำร 3.3.1 สรำงเวบเพจดวยโปรแกรม Dreamweaver - เปดโปรแกรมเลอกเมน Start>All Program>Adobe Master Collection CS3>Adobe Dreamweaver CS3

รปภาพ 3.1 การเขาสโปรแกรม

- คลกท HTML เพอสรางเอกสารเปลา

รปภาพ 3.2 การสรางเอกสารเปลา

12

- ตกแตงพนหลงใหสวยงาม โดยการคลกป ม Page Properties…

รปภาพ 3.3 การใสภาพพนหลง

- สรางหนาหลกสอการสอนพยญชนะไทย

รปภาพ 3.4 การสรางหนาหลก

13

- สรางไฟลใหม คลกขวาเลอก New File

รปภาพ 3.5 การสรางไฟลใหม

- สรางสอการสอนพยญชนะไทย 44 ตว

รปภาพ 3.6 การสรางพยญชนะไทย 44 ตว

14

- สรางไฟลใหม โดย คลกขวาเลอก New File อกครง เพอสรางหนาของตวอกษร ก ไก แลวบนทก

รปภาพ 3.7 การสรางพยญชนะไทย ก ไก

- สรางไฟลใหม โดย คลกขวาเลอก New File อกครง เพอสรางหนาของตวอกษร ข ไข แลวบนทก

รปภาพ 3.8 การสรางพยญชนะไทย ข ไข

15

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

รปท 3.9 การลงคไฟลหนาหลกไปยงหนาตาง ๆ

- จากนนกด F12 เพอ Save และดตวอยาง

รปท 3.10 แสดงการดไฟลผานเวบเบราเซอร

16

3.3.2 บนทกงำนลงซด -น าแผน CD ใสไปในเครองคอมพวเตอร -จากนนเปดโฟลเดอรโครงงานสรางสอการสอนพยญชนะไทย -คลกขวาทโฟลเดอรโครงงานสรางสอการสอนพยญชนะไทย - เลอก สงไปยง>>ซดไดรฟ เครองคอมพวเตอรจะท าการไดรฟขอมลลงแผนซด

รปท 3.11 การบนทกงานลงซด

3.4. วธกำรใชงำนและเกบรวบรวมขอมล 3.4.1 ผจดท าไดน าผลงานไปให นกเรยนระดบอนบาลชนปท 1 หอง 3 ภาคเรยนท 2 ปการศกษา 2554 ของโรงเรยนบานมาบฟกทอง จ านวน 20 คน ทดลองใชเปนระยะเวลา 1 สปดาห จากนนไดบนทกขอมลผลการใชงาน 3.4.2 ผจดท าไดแจกแบบสอบถามความพงพอใจ ให นกเรยนระดบอนบาลชนปท 1 หอง 3 ภาคเรยนท 2 ปการศกษา 2554 ของโรงเรยนบานมาบฟกทอง จ านวน 20 คน และเกบรวมรวมแบบสอบถาม

17

3.5. สถตทใชในกำรวเครำะหขอมล ในการศกษาคนควาครงนผรายงานไดท าการวเคราะหขอมลและไดใชสถตในการวเคราะห

ขอมลดงน 1.คารอยละ โดยใชสตรดงน

รอยละ = N

X x 100

เมอ X แทน จ านวนผกรอกแบบสอบถาม เมอ N แทน จ านวนผกรอกแบบสอบถามทงหมด

2.คาคะแนนเฉลย โดยใชสตรดงน

คะแนนเฉลย = N

x

เมอ x แทน ผลรวมของคะแนนทกตว N แทน จ านวนผกรอกแบบสอบถามทน ามาวเคราะห

3. สวนเบยงเบนมาตรฐาน ใชสตรดงน

S.D. = )1(

)( 22

NN

XXN

เมอ S.D. แทน สวนเบยงเบนมาตรฐาน x แทน ผลรวมของคะแนนทกตว 2x แทน ผลรวมของคะแนนแตละตวยกก าลงสอง N แทน จ านวนผกรอกแบบสอบถามทน ามาวเคราะห

18

บทท 4

ผลกำรวเครำะหขอมล

การจดท าโครงงาน “สรางสอการสอนพยญชนะไทยดวยโปรแกรม Macromedia Dream” ผจดท าไดทดสอบใชสอการสอน และส ารวจความพงพอใจตอสอการสอน ดงน 4.1 ผลกำรวเครำะหขอมลดำนกำรทดลองใช ผลการทดลองใชสอการเรยนการสอนพยญชนะไทย ผจดท าไดยกตวอยางบทเรยนดงน

รปท 4.1 แสดงตวอยางงานหนาหลก

รปท 4.2 แสดงตวอยางงานหนาท 2

19

4.2 ควำมพงพอใจ แบบสอบถำมควำมพงพอใจ

โครงงำนสรำงสอกำรสอนพยญชนะไทยดวยโปรแกรม Macromedia Dream

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

เพศ : ชาย หญง

เกณฑกำรประเมน 5 ดทสด 4 ดมำก 3 ปำนกลำง 2 นอย 1 นอยทสด

ล ำดบท กจกรรม ระดบควำมพงพอใจ

5 4 3 2 1 1 สสนสวยงาม 2 เขาใจงาย 3 ความเหมาะสมของสอการเรยนการสอน 4 เรยนรไดเรว 5 ความสะดวกส าหรบอาจารยผสอน

ขอเสนอแนะ........................................................................................................................................ ............................................................................................................................................................. ……………………………………………………………………………………………………….

จากการส ารวจความพงพอใจของ นกเรยนระดบอนบาลชนปท 1 หอง 3 ภาคเรยนท 2 ปการศกษา 2554 ของโรงเรยนบานมาบฟกทอง จ านวน 20 คน ทมตอ โครงงาน “สรางสอการสอนพยญชนะไทยดวยโปรแกรม Macromedia Dream ” ตำรำงท 1 รอยละของผประเมนความพงพอใจแยกตามเพศ

เพศ ชำย หญง จ านวนผกรอกแบบสอบถาม 8 12 คดเปนรอยละ 40.00 60.00

20

ตำรำงท 2 ความพงพอใจของ นกเรยนระดบอนบาลชนปท 1 หอง 3 ภาคเรยนท 2 ปการศกษา 2554 ของโรงเรยนบานมาบฟกทอง จ านวน 20 คน ทมตอ โครงงาน “สรางสอการสอนพยญชนะไทยดวยโปรแกรม Macromedia Dream ”

หวขอประเมน

N = 20 การแปลความหมาย

X S.D.

1. สสนสวยงาม 2. เขาใจงาย 3. ความเหมาะสมของสอการเรยนการสอน 4. เรยนรไดเรว 5. ความสะดวกส าหรบอาจารยผสอน

4.40 4.40 4.20 4.45 4.50

0.50 0.50 0.41 0.51 0.61

มาก มาก มาก มาก

มากทสด

เฉลย 4.36 0.51 มาก

จากตารางท 2 เมอพจารณาจากคาเฉลยพบวา ผตอบแบบสอบถามมความพงพอใจตอความสะดวกส าหรบอาจารยผสอนมคาเฉลย ( X ) สงสดเทากบ 4.50 อยในระดบมากทสด และเมอพจารณาจากคาเฉลยรวมพบวา ผเขารวมโครงงานพงพอใจตอความเหมาะสมของสอการเรยนการสอน เรยนรไดเรว เขาใจงาย และสสนสวยงามอยในระดบมาก

21

บทท 5

สรปผล และ ขอเสนอแนะ

การจดท าโครงงานโครงงาน “สรางสอการสอนพยญชนะไทยดวยโปรแกรม Macromedia

Dream ” ผจดท าไดสรปผล อภปรายผล และมขอเสนอแนะ ดงน

5.1 สรปผล การจดท าโครงงาน “สรางสอการสอนพยญชนะไทยดวยโปรแกรม Macromedia Dream”

สรปผลได ดงน วตถประสงค

1.เพอใหนกเรยนอนบาลไดฝกทกษะในการอานออกเสยงพยญชนะไทย ใหถกตอง ชดเจนยงขน

2.เพอใหนกเรยนอนบาลสนกกบการเรยนรพยญชนะไทย ประชำกร

ประชากร นกเรยนระดบอนบาลชนปท 1 ภาคเรยนท 2 ปการศกษา 2554 ของโรงเรยนบานมาบฟกทอง ต.หวยใหญ อ.บางละมง จ.ชลบร กลมตวอยำง

กลมตวอยาง นกเรยนระดบอนบาลชนปท 1 หอง 3 ภาคเรยนท 2 ปการศกษา 2554 ของโรงเรยนบานมาบฟกทอง ต.หวยใหญ อ.บางละมง จ.ชลบร จ านวน 20 คน เครองมอทใชในกำรศกษำ

1. สอการเรยนการสอนพยญชนะไทยดวย Macromedia Dream 2. แบบสอบถามความพงพอใจผเรยน จ านวน 5 ขอ แบบ 5 ระดบ

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

( X ) สงสดเทากบ 4.50 อยในระดบมากทสด และเมอพจารณาจากคาเฉลยรวมพบวา ผเขารวมโครงงานพงพอใจตอความเหมาะสมของสอการเรยนการสอน เรยนรไดเรว เขาใจงาย และสสนสวยงามอยในระดบมาก

22

5.2 ปญหำและอปสรรค จากการลองและการน าไปใชงาน โครงงาน “สรางสอการสอนพยญชนะไทยดวยโปรแกรม Macromedia Dream ” มการท างานอยในเกณฑด แตมขอบกพรองบางสวนคอ 1. ตวหนงไมสวยงาม 2. ภาพพนหลงบางสวน ท าใหตวอกษรมองไมชด แนวทำงกำรแกไขปญหำ 1. เลอกเปลยน Front ทสวยงามและเหมาะสม 2. ปรบภาพพนหลงใหเหมาะสมเพอมองขอความไดชดขน 5.3 ขอเสนอแนะ ขอเสนอแนะในการจดท าโครงงาน ในครงถดไป 1. ควรแทรกภาพเคลอนไหว 1.ควรแทรกวดโอแสดงขนตอนการท างาน 2.ควรมเสยงประกอบ

23

บรรณำนกรม http://www.thaigoodview.com/node/41868

24

ภำคผนวก ก ตวอยำงชนงำน

25

26

ภำคผนวก ข ขนตอนกำรสรำงและทดลองใชชนงำน

27

ขนตอนกำรสรำงชนงำน

ขนตอนกำรทดลองใชชนงำน

28

ภำคผนวก

ค คมอกำรใชชนงำน

29

คมอกำรใชงำน

1.ใสแผน CD สอการสอน

2. เปดสอการสอนโดยคลกท My computer > CD-ROM

3. เลอก Folder สอการสอนพยญชนะไทย

4. ดบเบลคลกเปดไฟล หนาหลก

5. จะปรากฏหนาตางสอการสอนพยญชนะไทย

6. ปดโปรแกรมโดยการคลกปม X ทมมขวาดานซายของโปรแกรม

30

ภำคผนวก ง แบบสอบถำมควำมพงพอใจ

31

ภำคผนวก จ บนทกขอควำมขออนญำตตำง ๆ

32

แบบเสนอโครงงำน ชอโครงงำน สรางสอการสอนพยญชนะไทยดวยโปรแกรม Macromedia Dream ชอผจดท ำโครงงำน นางสาวปนดดา ละออเอยม, นางสาวภาภร นมประยงค ชออำจำรยทปรกษำ อาจารยกาญจนา ประสานยทธ 1.1 หลกกำรและเหตผล ปจจบนคอมพวเตอรไดเขามามบทบาทในชวตประจ าวนของมนษยไมวาจะเปนเรองของการเรยนการท างานและอนๆ คอมพวเตอรสามารถชวยอ านวยความสะดวกสบายใหแกผใชไดเปนอยางมาก ทงในดานการเรยนการสอนดานธรกจในองคกรตางๆ จงไดมการน าคอมพวเตอรเขามาใชกนอยางแพรหลาย จงถอไดวาคอมพวเตอรเปนปจจยทส าคญมากปจจยหนงในชวตประจ าวนของมนษย แหลงความรเกยวของกบคอมพวเตอรมหลากหลายรปแบบทจะน าเสนอใหผใชไดเรยนร และคนควาหาความรในเรองตางๆ ไดหลากหลาย เชน หนงสอ รายการโทรทศน อนเทอรเนต หรอการใชสอการเรยนการสอน การสรางสอการเรยนการสอนนนท าไดหลากหลายโปรแกรม เชน Adobe Flash cs3 , Adobe Dreamweaver cs3 , E-BOOK และโปรแกรมหนงทสามารถน ามาใหสรางสอการเรยนการสอนคอการใชโปรแกรม Macromedia Dream ซงเปนโปรแกรมทใชในการสรางเวบเพจบรหารจดการเวบไซต และเอพพลชน สามารถเขยนโปรแกรมส าหรบเวบไดทกรปแบบ เชน ASD , XML , XHTML , PHP , JSP ฯ และสามารถใชในการสรางตวอกษร ภาพกระพรบ และใสเสยงประกอบได Macromedia Dream จงสามารถน ามาใชสรางสอการเรยนการสอน พยญชนะไทย

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

33

1.2 วตถประสงค 1.เพอใหเดกอนบาลไดฝกทกษะในการอานออกเสยงพยญชนะไทย

ใหถกตอง ชดเจนยงขน 2.เพอใหเดกอนบาลสนกกบการเรยนรพยญชนะไทย

1.3 ขอบเขตของโครงงำน

1.3.1 สรางสอการสอนพยญชนะไทยดวยโปรแกรม Macromedia Dream ประกอบดวย พยญชนะไทย 44 ตว พรอมภาพประกอบ 1.3.2 แบบสอบถามความพงพอใจ 1.3.3 แผนซดสอการเรยนการสอนพยญชนะไทยดวย Macromedia Dream

1.4 วธด ำเนนกำร 1.4.1 ศกษาหวขอโครงงาน 1.4.2 ขออนมตโครงงาน 1.4.3 ออกแบบการสรางชนงาน 1.4.4 จดท าสอการเรยนการสอน 1.4.5 จดท าคมอ/เอกสารประกอบโครงงาน

34

ตำรำงกำรด ำเนนงำน

ขนตอนกำรท ำงำน ระยะเวลำด ำเนนกำร (สปดำห)

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 ขนเตรยมกำร

-คนควาขอมล -ศกษาโครงงาน -เสนอโครงงาน

ขนด ำเนนงำน -ออกแบบสอการสอน -จดเตรยมอปกรณ -จดท าสอการสอน -ทดสอบ/ทดลอง/บนทกผล

ขนสรปและประเมนผล -น าเสนอโครงงาน -ประเมนผล

1.5 ประโยชนทคำดวำจะไดรบจำกโครงงำน

1.5.1 อาจารย/นกเรยนนกศกษา สามารถใหเปนสอการเรยนการสอน 1.5.2 ไดความรเรอง การสรางสอการเรยนการสอนใน Dreamweaver CS3 1.6 เครองมอและอปกรณ 1.6.1 หนงสอประกอบการเรยนการสอนพยญชนะไทย 1.6.2 โปรแกรม Macromedia Dreamweaver CS3 1.6.3 แผน CD

35

1.7 งบประมำณ

ล ำดบ รำยกำร จ ำนวน รำคำตอหนวย รำคำรวม

1 แผน CD 1 20 20

2 หนงสอประกอบการเรยน พยญชนะไทย 1 25 25

3 กระดาษ A4 1 150 150 4 หมกสด า 1 500 500 5 หมกส 1 500 500

รวม 1,195

( หนงพนหนงรอยเกำสบหำบำทถวน) 1.8 ควำมคดเหนของอำจำรยทปรกษำ................................................................................................. ............................................................................................................................................................. ...................................... อาจารยทปรกษาโครงงาน (....................................)

1.9 ควำมคดเหนของคณะกรรมกำร

อนมต ไมอนมต ขอเสนอแนะ.......................................................................................................................... ............................................................................................................................................................ ...................................... กรรมการ ...................................... กรรมการ (....................................) (....................................)

36

แบบประเมนโครงกำร

ชอโครงงำน สรางสอการสอนพยญชนะไทยดวยโปรแกรม Macromedia Dream ชอผจดท ำโครงงำน นางสาวปนดดา ละออเอยม, นางสาวภาภร นมประยงค ชออำจำรยทปรกษำ อาจารยกาญจนา ประสานยทธ ใหวงกลมลอมรอบคะแนนททำนเหนวำเหมำะสมในตำรำง

รำยกำรพจำรณำ ดเยยม ด ปำนกลำง

พอใช ตองแกไข

1.ความรความเขาใจในเรองทท า 10 9 8 7 6 5 4 3 2 1 2.การใชวธการหรอเทคนคในการท า 10 9 8 7 6 5 4 3 2 1 3.การเขยนรายงาน การน าเสนอโครงงาน 10 9 8 7 6 5 4 3 2 1 4.ความคดรเรมสรางสรรค 10 9 8 7 6 5 4 3 2 1 รวม รวมทงหมด คะแนน

กำรแปลควำมหมำยของคะแนนทได 36-40 ดเยยม 28-35 ด 20-27 ปานกลาง 12-19 พอใช 4-11 ตองแกไข

ผลการประเมนได ....................... คะแนน อยในระดบ ................................

...................................... ผประเมนโครงงาน (....................................)

37

ภำคผนวก ฉ ประวตผจดท ำ

38

ประวตผจดท ำ

ชอ – สกล นางสาวปนดดา ละออเอยม ชอเรอง โครงงาน “สรางสอการสอนพยญชนะไทยดวยโปรแกรม Macromedia Dream” สาขาวชา คอมพวเตอรธรกจ ประวตสวนตว ชอ – สกล นางสาวปนดดา ละออเอยม ชอเลน ฮะห วน/เดอน/ป เกด 4 กนยายน 2534 อาย 20 ป ทอยปจจบน 85 / หมท 5 ต.หนองปรอ อ.บางละมง จ.ชลบร 2150 ประวตกำรศกษำ ประถมศกษา ป.6 โรงเรยนบานเนนพลบหวาน มธยมศกษา ม.3 โรงเรยนบานเนนพลบหวาน ประกาศนยบตรวชาชพ ปวช. สาขาวชาคอมพวเตอรธรกจ

วทยาลยเทคโนโลยพณชยการสตหบ ประกาศนยบตรวชาชพชนสง ปวส. ก าลงศกษา สาขาวชาคอมพวเตอรธรกจ

วทยาลยเทคโนโลยพณชยการสตหบ

39

ประวตผจดท ำ

ชอ – สกล นางสาวอาภาภร นมประยงค ชอเรอง โครงงาน “สรางสอการสอนพยญชนะไทยดวยโปรแกรม Macromedia Dream” สาขาวชา คอมพวเตอรธรกจ ประวตสวนตว วน/เดอน/ป เกด 25 พฤศจกายน 2534 อาย 20 ป ทอยปจจบน 9/49หม 1 ต.ส านกทอน อ.บานฉาง จ.ระยอง 21130 ประวตกำรศกษำ ประถมศกษา ป.6 โรงเรยนวดส านกทอน มธยมศกษา ม.3 โรงเรยนบานฉางกาญจนกลวทยา ประกาศนยบตรวชาชพ ปวช. สาขางานคอมพวเตอรธรกจ

วทยาลยเทคโนโลยพณชยการสตหบ ประกาศนยบตรวชาชพชนสง ปวส. ก าลงศกษา สาขาวชาคอมพวเตอรธรกจ

วทยาลยเทคโนโลยพณชยการสตหบ

40

เอกสำรประกอบโครงงำน สรำงสอกำรสอนพยญชนะไทย

ดวยโปรแกรม Macromedia Dream

ผจดท ำ

นำงสำวปนดดำ ละออเอยม นำงสำวอำภำภร นมประยงค

ประกำศนยบตรวชำชพชนสง

ประเภทวชำ บรหำรธรกจ สำขำวชำ คอมพวเตอรธรกจ

อำจำรยทปรกษำโครงงำน

อำจำรยกำญจนำ ประสำนยทธ

โครงงำนนเปนสวนหนงของกำรศกษำตำมหลกสตร ปกำรศกษำ 2554 วทยำลยเทคโนโลยพณชยกำรสตหบ

41

42

เอกสารประกอบโครงงาน สรางสอการสอนพยญชนะไทย

ดวยโปรแกรม Macromedia Dream

ผจดท า

นางสาวปนดดา ลออเอยม นางสาวอาภาภร นมประยงค

ประกาศนยบตรวชาชพชนสง

ประเภทวชา บรหารธรกจ สาขาวชา คอมพวเตอรธรกจ

อาจารยทปรกษาโครงงาน

อาจารยกาญจนา ประสานยทธ

โครงงานนเปนสวนหนงของการศกษาตามหลกสตร ปการศกษา 2554 วทยาลยเทคโนโลยพณชยการสตหบ

43

ใบรบรองโครงงำน

สาขาวชา พณชยการ วทยาลยเทคโนโลยพณชยการสตหบ โครงงานสรางสอการสอนพยญชนะไทยดวยโปรแกรม Macromedia Dream

ผจดท า นางสาวปนดดา ละออเอยม รหส 3565 นางสาวอาภาภร นมประยงค รหส 3583

ไดรบการอนมตใหเปนสวนหนงในการศกษาตามหลกสตร

ประกาศนยบตรวชาชพชนสง ประเภทวชา บรหารธรกจ สาขาวชา คอมพวเตอรธรกจ

.........................................อาจารยทปรกษาโครงการ .............................................. (นางสาวกาญจนา ประสานยทธ) (นางสาวปยานช เสอสนวล)

รองผอ านวยการฝายบรหาร .........................................กรรมการ โรงเรยนเทคนคพณชยการสตหบ (นายสมชาย จกแกว) .........................................กรรมการ (นางสาววงเดอน อยคง)

44

ชอโครงงาน สรางสอการสอนพยญชนะไทยดวยโปรแกรม Macromedia Dream ผจดท า 1.นางสาวปนดดา ละออเอยม 2.นางสาวอาภาภร นมประยงค หลกสตร ประกาศนยบตรวชาชพชนสง ปการศกษา 2554 ทปรกษาโครงงาน อาจารยกาญจนา ประสานยทธ

บทคดยอ การจดท าโครงงานวชาชพครงน มวตถประสงคเพอ 1. เพอใหเดกอนบาลไดฝกทกษะในการอานออกเสยงพยญชนะไทยใหถกตอง ชดเจนยงขน 2. เพอใหเดกอนบาลสนกกบการเรยนรพยญชนะไทย กลมตวอยาง ทใชในการศกษา คอ นกเรยนอนบาล 1 โรงเรยนบานมาบฟกทอง จ านวน 20 คน โดยใชวธ ประเมนความพงพอใจตอ โครงงาน “สรางสอการสอนพยญชนะไทยดวยโปรแกรม Macromedia Dream” ผลการวเคราะหขอมลพบวา ผตอบแบบสอบถามมความพงพอใจตอความสะดวกส าหรบอาจารยผสอนมคาเฉลย ( X ) สงสดเทากบ 4.50 อยในระดบมากทสด และเมอพจารณาจากคาเฉลยรวมพบวา ผเขารวมโครงงานพงพอใจตอความเหมาะสมของสอการเรยนการสอน เรยนรไดเรว เขาใจงาย และสสนสวยงามอยในระดบมาก

( ค )

45

กตตกรรมประกำศ

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

( ง )

46

สำรบญ

หนำ บทคดยอ ค กตตกรรมประกาศ ง บทท 1 บทน า 1.1 หลกการและเหตผล 1 1.2 วตถประสงคของโครงงาน 2 1.3 ขอบเขตของโครงงาน 2 1.4 วธด าเนนงาน 2 1.5 ประโยชนทคาดวาจะไดรบจากโครงงาน 3 1.6 เครองมอและอปกรณ 3 1.7 งบประมาณ 4 1.8 แผนผงการท างาน 4 บทท 2 ทฤษฎทเกยวของ 2.1 ท าความรจกโปรแกรม Macromedia Dreamweaver CS3 5 2.2 สวนประกอบของ Macromedia Dreamweaver CS3 5 2.3 ความสามารถของโปรแกรม Macromedia Dreamweaver CS3 6 2.4 การสรางเวบเพจใหม 7 2.5 การก าหนด Site 7 2.6 การแทรกขอความ 8 2.7 การแทรกรปภาพ 8 2.8 วธแทรกรปภาพ 8 2.9 การสรางจดเชอมโยง(Link) 9 2.10 การเชอมโยงจากรปภาพ 9 บทท 3 วธด าเนนโครงงาน

3.1 ประชากรและกลมตวอยาง 10 3.2 เครองมอทใชในการศกษา 10

(จ)

47

3.3 วธด าเนนการ 11 3.4 วธการใชงานและเกบรวบรวมขอมล 16 3.5 สถตทใชในการวเคราะหขอมล 17

บทท 4 ผลการวเคราะหขอมล 4.1 ผลการวเคราะหขอมลดานการทดลองใช 18 4.2 ความพงพอใจของผใช 19

บทท 5 สรปผลและขอเสนอแนะ 5.1 สรปผลการศกษา 21 5.2 อภปรายผล 22 5.3 ขอเสนอแนะ 22

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

(ฉ)