ชุดการสอน · 2020-02-21 · ใบงานที่ 4.1 การประกอบวงจรแหล่งจ่ายไฟฟ้ากระแสตรง
ชุดการสอน Dream
-
Upload
sv-sasithorn -
Category
Documents
-
view
232 -
download
4
description
Transcript of ชุดการสอน Dream
![Page 1: ชุดการสอน Dream](https://reader033.fdocuments.net/reader033/viewer/2022052604/568c3adc1a28ab0235a7e9e3/html5/thumbnails/1.jpg)
1
ชดการสอนวชา โครงงานคอมพวเตอร
ดวยโปรแกรม Macromedia
Dreamweaver MX
ง 33104โดย
คร ศศธร ไวทยสวรรณ
![Page 2: ชุดการสอน Dream](https://reader033.fdocuments.net/reader033/viewer/2022052604/568c3adc1a28ab0235a7e9e3/html5/thumbnails/2.jpg)
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
![Page 3: ชุดการสอน Dream](https://reader033.fdocuments.net/reader033/viewer/2022052604/568c3adc1a28ab0235a7e9e3/html5/thumbnails/3.jpg)
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 คน เลอก
ประธานกลมและเลขานการกลม
![Page 4: ชุดการสอน Dream](https://reader033.fdocuments.net/reader033/viewer/2022052604/568c3adc1a28ab0235a7e9e3/html5/thumbnails/4.jpg)
44. แบงหนาทรบผดชอบภายในกลม เชน รบใบกจกรรม ใบความร แบบ
ทดสอบ แบบประเมนและอปกรณสอตาง ๆ ไปแจกเพอนในกลม ใหพรอมทจะเรยน
5. ถานกเรยนเรยนไมทน หรอไมเขาใจในกจกรรมการเรยนการสอนขนตอนใดใหถามครผสอนเพอขอคำาอธบายเพมเตม หรออาจศกษาจากเอกสารประกอบการเรยนซอมเสรมนอกเวลาเรยนกได
6. นกเรยนศกษาเนอหาสาระ และทำากจกรรมจบแลว ใหทำาแบบฝกหดในใบงาน และขอทดสอบหลงเรยน แลวรอเฉลย ดวยการอภปรายรวมกน
7. เมอนกเรยนตรวจกจกรรมแบบฝกหดและขอทดสอบหลงเรยนไดถกตองไมถงรอยละ 80 ใหศกษาทบทวนใหมพรอมแกไขใหถกตองตามเกณฑทกำาหนดแลวสงครผสอน
8. มความตงใจทำาแบบทดสอบทกครง
![Page 5: ชุดการสอน Dream](https://reader033.fdocuments.net/reader033/viewer/2022052604/568c3adc1a28ab0235a7e9e3/html5/thumbnails/5.jpg)
5ใบความรท 1
จดประสงคการเรยนร1 นกเรยนสามารถบอกลกษณะเดนความสามารถของตนเองและเพอนใน
กลม และบอกไดวาลกษณะเดน ๆ ของ บคลากรในกลมนนเหมาะสมกบงานในหนาทใด
2. นกเรยนสามารถสรปความคดเหนในการตงชอกลม ใหเหมาะสมกบโครงงานทจะรวมกนสรางตอไป
ประโยชนของการแบงกลมการแบงกลมกนทำางาน เปนเครองมอชวยใหผทมความตองการทจะ
สรรคสรางงานทตนชอบ หรอจนตนาการไวซงมความคดเปนเปนไปในแนวทางเดยวกน มความเตมใจทจะรวมมอ
กนทำางานไปจนสำาเรจลลวงจดประสงคของกลมทตงไว การรจกตนเอง รจกจดเดนและจดดอยของตนเอง และ
การรจกเพอนรวมงาน เปนสงทมประโยชน เพอทจะพฒนางานของกลมของตนเองใหดยงขน และปรบปรงแกไข
จดดอยตอไป เพอทจะเลอก หรอ แบงงานทพงพอใจตามความสามารถ และเหมาะสมกบทกคนในกลม
![Page 6: ชุดการสอน Dream](https://reader033.fdocuments.net/reader033/viewer/2022052604/568c3adc1a28ab0235a7e9e3/html5/thumbnails/6.jpg)
6ใบงานท 1 การแบงกลม
ใบงานท 1. 1.ใหนกเรยนทำาแบบสำารวจจดเดนของตนเองและเพอนในกลมโดย
พจารณาวาแตละคนควรทำาหนาทใด รวมทงออกความคดเหนในการตงชอกลมของแตละคน
รายชอ หนาททเหมาะสม ชอกลมทตองการ1. 1.2. 2.3. 3.4. 4.5. 5.หมายเหต : ใหนกเรยนนำาขอมลของนกเรยนไปปรกษาอาจารยดวยสรปความคดเหนของคร-อาจารยผสอน
………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………… ลงชอ วนเดอนป
![Page 7: ชุดการสอน Dream](https://reader033.fdocuments.net/reader033/viewer/2022052604/568c3adc1a28ab0235a7e9e3/html5/thumbnails/7.jpg)
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 เปนคำาสงใชงานเกยวกบอะไรก. การเปลยนสพน ข. การลบเสนขอบตารางราง
![Page 8: ชุดการสอน Dream](https://reader033.fdocuments.net/reader033/viewer/2022052604/568c3adc1a28ab0235a7e9e3/html5/thumbnails/8.jpg)
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. นกเรยนสามารถจดเกบแฟมตนฉบบ แยกจดเกบอยางเปนระบบคนหางาย
![Page 9: ชุดการสอน Dream](https://reader033.fdocuments.net/reader033/viewer/2022052604/568c3adc1a28ab0235a7e9e3/html5/thumbnails/9.jpg)
9
ใบงานท 2ใหนกเรยนกำาหนดแนวทางคณลกษณะของ Web page ทจะสรางโดยรวบรวมแนวคดโดยสรปจากความคดเหนของกลม
สรปความคดเหนของคร-อาจารยผสอน.............................................................................................................................................................................................................................................................................................................................................................................................
ชอ Web page…………………………………………………………..คณลกษณะ/ชนด/ประเภท……………………………………………………………………………………………………………………………..………………………………………………………………………………………………………………………………………………………………
![Page 10: ชุดการสอน Dream](https://reader033.fdocuments.net/reader033/viewer/2022052604/568c3adc1a28ab0235a7e9e3/html5/thumbnails/10.jpg)
10 ลงชอ วนเดอนป
ใบความรท 3เรอง ขนตอนการออกแบบเวบไซต
1.สาระการเรยนร การออกแบบสรางเคาโครงรางหนา Web page เปนสงสำาคญ ในการกำาหนดเนอหา รปภาพ เทคนค ทตองการ
เปนเครองมออกอยางหนงทชวยใหมองเหนภาพเคาโครงและสารมรถชวยใหงานประสบความสำาเรจไดอยางรวดเรว 2. ผลการเรยนรทคาดหวง 2.1 นกเรยนสามารถออกแบบเคาโครงหนาเวบทตองการได 2.2 นกเรยนสามารถกำาหนด เนอหา และ สวนประกอบทตองการใชสราง Web page ตามรายการได เชน แฟมเนอหา ภาพ เสยง ฯลฯ
![Page 11: ชุดการสอน Dream](https://reader033.fdocuments.net/reader033/viewer/2022052604/568c3adc1a28ab0235a7e9e3/html5/thumbnails/11.jpg)
11 2.3 นกเรยนสามารถแบงหนาทสมาชกภายในกลมในการสราง Web page และ ชวยกนสบคนขอมลทเกยวของ
เวบไซทเปนแหลงรวบรวมหนาเวบจำานวนมากมายหลายหนาในเรองเดยวกนมาอยรวมดวยกน แตการทำางานบนเวบจะไมมวนสนสด เนองจาก นกออกแบบสามารถปรบปรงทกอยางบนหนาเวบไดตลอดเวลา ดงนน การออกแบบเวบไซตจงตองมการเรมตนทดโดยคำาตงถงหลกตาง ๆ ซงเปนหวขอใหญ ไดดงน
1.การวางแผนลวงหนาการทำางานใด กตามยอมตองมการวางแผนไวเพอจดขนตอนในการทำางานและเปนแนวทางใหสามารถดำาเนนงา
ไปดวยความสะดวกรวดเรว ดงนน กอนทจะทำาการสรางเวบไซตใด เวบไซตหนง นกออกแบบจงตองมการวางแผนลวงหนาเพอใหสามารถออกแบบเวบไซทนน และเพอหลกเลยงอปสรรคทอาจเกดขนได ถาไมมการวางแผนไวกอน
1.1.1 สรางเคาโครง การเขยนเคาโครงของเวบไซตสามารถรบวตถประสงคมากมายหลายประการ เคาโครงนจะชวยใหนกออกแบบเหนสวนตาง ๆ ของโครงการไดอยางรวดเรว โดยยงไมตองสรางหนาเวบจรง และชวยใหสามารถรวบรวมจดระเบยบโครงสรางตาง ๆ ของเวบไซตไดอยางรวดเรว
1.1.2 เกบรวบรวมวสด ตามปกตแลวนกออกแบบจำาเปนทจะตองเกบรวบรวมเนอหาใหเรยบนอยกอนเรมทำางานจรง ทงนยอมขนอยกบเคาโครงทรางไววาตองการสงใดบางในการทำางานน แลวสรางรายการของสงตาง ๆ ทตองการใชในเวบไซต หลงจากนนจงทำาการรวบรวมวสดตามรายการ เชนแฟมเนอหา ภาพ เสยง เปนตน
1.1.3 เกบแฟมตนฉบบ แฟมขอมลตาง ๆ ทรวบรวมไวแลวนนควรเกบไวเปนโฟลเดอร (Folder) ยอยแฟมตนฉบบ (Source file) โดยอยภายในโฟลเดอรใหญของโฟลเดอร
![Page 12: ชุดการสอน Dream](https://reader033.fdocuments.net/reader033/viewer/2022052604/568c3adc1a28ab0235a7e9e3/html5/thumbnails/12.jpg)
12เวบไซต และตงชอตามแตละชนดของแฟมนน เชน แฟมตนฉบบขอความ, แฟมตนฉบบภาพ เปนตน
2.รวบรวมจดระเบยบภายหลงเมอวางแผนและเกบรวบรวมวสดตาง ๆ ทจำาเปนตองใชในการสรางเวบไซตเรยบรอยแลว
สงแรกกอนทจะมการสรางเวบไซตไดนน นกออกแบบจำาเปนตองทำาการจดระเบยบเพอความสะดวกในการทำางาน ดงน
2.1 รวบรวมแฟม การรวบรวมแฟมขอมลตาง ๆ ควรทำาการเกบรวมกนไวในโฟลเดอรใหญสำาหรบเวบไซต ขนาดเลกสวนมากอาจมเพยงโฟลเดอรเดยว แตถาคดวาเวบไซตนนมขนาดใหญ ขยายออกไปอกโดยมมากกวา 30-40 แฟม ซงรวมถงแฟมภาพ, เสยง ฯลฯ แลว นกออกแบบควรสรางโฟลเดอรยอยใหมขนมาเพอแยกเกบตามประเภทอกครงหนง
2.2 แบงเวบไซต โดยทวไปแลว ควรแบงเวบไซต ออกเปนสวน ๆ ตงแต 3-7 สวน โดยแตละสวนจะเกยวของกบกจกรรมเฉพาะแตละอยาง ทงนหมายถงวา โครงสรางทงหมดของเวบไซต ควรเปนโครงสรางเขงตรรกะโดยทวไปแลวเวบไซตควรแบงออกเปน 5 สวน อาจจะมากขนอก 2 หรอ นอยลงอก 2 สวน กได
2.3 ตวเลอก ไมควรใหผอานมตวเลอกมากเกนไปในแตละครง โดยอยางใสสวนเชอมโยงของทงเวบไซตลงไปในหนาเดยว เพราะจะทำาใหเกดความสบสนจนอาจอานหนานนไปและออกจากเวบไซตไปเลยกได ทางทดจงควรสรางลำาดบชนของเรองราวและเสนอแตเพยงลำาดบแรกลงในหนาโฮมเพจ
![Page 13: ชุดการสอน Dream](https://reader033.fdocuments.net/reader033/viewer/2022052604/568c3adc1a28ab0235a7e9e3/html5/thumbnails/13.jpg)
132.4 จดลำาดบชนเนอหา ในการใชเวบไซตนนไมควรใหผอานไปไกลเกน
จนกวาจะพบสงทตองการ โดยการอยาใหผอานคลกมากมายหลายหนาจากจดหนงไปยงอกจดหนง กฎในเรองนกคอ“ ผอานไมควรตองคลกเกนไปกวา 5 หนาจงจะถงเนอหาท ตองการ
3.การนำาทางการออกแบบเครองมอนำาทางเพอใหการสำารวจเวบเปนไปไดดวยความสะดวกรวดเรวและไมเกดการหลงทาง นบวาเปนสงจำาเปนอยางยง ทงนเพราะจะเปนประโยชนแกผอานในการเขาถงขอมลตาง ๆ ไดโดยงาย และเปนสงทดงดดใจเพอไมใหผอานเกดความเบอหนายจนกระทงคลกผานเวบไซตหนานนไป
3.1 เครองมอนำาทาง ควรสรางเครองมอนำาทางเพอใหผอานเขาถงสารสนเทศไดอยางรวดเรว เนองจากเวบ เปนสอใหมทเกดขนและใชกนอยางแพรหลายเรวมาก จงทำาใหมการใชคำาหลาย ๆ อยางทแตกตางกน ออกไป สงทเปนเครองมอนำาทางนกเชนกนทจะมการใชคำาตาง ๆ กนปกตแลวมกจะเรยกวา แถบ“ เครองมอ” (Toolbar) แตบางครงจะเรยกวาเปน เมน“ ” (menu) “สวนตอประสาน” (Interface) หรอ “การนำาทาง” (Navigation)3.2 ขอความเชอมโยง ควรยำาสงทอยในการนำาทางดวย
ขอความเชอมโยง การใชเครองมอนำาทางแบบนจะชวยใหผอานทงหมดสามารถเขาถงไดงายกวา
3.3 แถบเครองมอนำาทางขนาดเลก ออกแบบแฟมแถบเครองมอขนาดเลก เนองจากแถบเครองมอขนาดเลก
นน อาจจะตองใชปรากฏอยในเกอบทกหนาบนเวบไซตนนแถบเครองมอนำาทางจงควรทจะแลด สวยงาม ใชงานไดดและมความสมบรณในตว
![Page 14: ชุดการสอน Dream](https://reader033.fdocuments.net/reader033/viewer/2022052604/568c3adc1a28ab0235a7e9e3/html5/thumbnails/14.jpg)
14
4.เกณฑมาตรฐานการออกแบบทดควรมเกณฑมาตรฐานของสงตาง ๆ ทอยใน
โครงสรางนนเพอไมสรางความสบสนใหแกผออกแบบและผอานดวย 4.1 ความคงตว ควรสรางกฎของความคงตว (Consistency) ทงเวบไซต เนองจากความคงตวนบเปนสง สำาคญในการออกแบบ และเปนสงสำาคญมากสงสดในการออกแบบเวบไซต รปแบบทตรงกนทงเวบไซต จะเปนตวชแนะทมองเหนไดอยางสำาคญททำาใหผอานทราบวากำาลงอยในเวบไซตเดยวกนนน 4.2 กำาหนดความกวางมาตรฐาน ผออกแบบควรตดสนใจใหไดวาจะใชความกวางจดภาพ (Pixel) เทาใดในเวบไซตนนกอนทจะเรมการออกแบบในแตละหนา เชนตองการแสดงผลหนาจออยท 800x600pixel เปนตน
5.ผอานเนองจากเวลดไดเวบ เปนสงททกคนในสวนตาง ๆ ของโลกสามารถเขาถงไดโดยไมมขดจำากด ดงนนผอานทเขามาในเวบไซตจงมความแตกตางกนในทก ๆ ดาน จงอาจเปนความลำาบากของนกออกแบบในการทจะตอบสนองความตองการของผอานในทกระดบได แตถาออกแบบคำานงถงแนวทางบางประการทเกยวกบผอานแลว ยอมสามารถออกแบบเวบไซตใหเปนประโยชนกบผอานมากได5.1.1 ลกษณะผอาน ถาเวบไซตนนสรางขนมาเพอสนก
เพลดเพลนสวนตวแลว ยอมเปดโอกาสใหผอานทวไปเขามาสำารวจไดโดยไมมสวนจำากด แตถาเปนเวบไซตทางดานธรกจสำาหรบจดมงหมายเฉพาะตวแลวยอมตองมงตอบสนองกลมผอานไดมากเทาใด เวบไซตนนจะสามารถเสนอสารสนเทศไดอยางมประสทธภาพ และตองตรงตามประสทธผลทตองการไดมากขน
![Page 15: ชุดการสอน Dream](https://reader033.fdocuments.net/reader033/viewer/2022052604/568c3adc1a28ab0235a7e9e3/html5/thumbnails/15.jpg)
เคาโครงราง Web page หนาท…… ..
155.1.2 โปรแกรมและระบบคอมพวเตอรของผอาน เชนเดยวกบ
ออกแบบสงใด ๆ กตามจะเปนการดกวามากถาจะทราบวาจะออกแบบใหผอานในกลมใด และจะใชโปรแกรมคนผานและระบบคอมพวเตอรใด เรองนเปนสงสำาคญมากสำาหรบเวบ ทงนเพราะความแตกตางกนอยางมากของอปกรณในการเขาอนเตอรเนต จะมสวนในเรองความคลองตวของการใชเปนอยางยง
ใบงานท 3ใหนกเรยนออกแบบรปแบบโครงสรางหนา Index ซงเปนหนาแรกของ Web page และหนาอน ๆ อยางนอย 3 หนา โดยวาดรปแบบ ลงในใบงานทกำาหนด
![Page 16: ชุดการสอน Dream](https://reader033.fdocuments.net/reader033/viewer/2022052604/568c3adc1a28ab0235a7e9e3/html5/thumbnails/16.jpg)
16
ใบความรท 4เรอง การจดหารปภาพ Clipart หรอ Gallery
1.สาระการเรยนร รปภาพเปนสวนประกอบทสำาคญในการสรางเอกสารเหนาเวบ ชวยใหหนาเวบมสงทนาสนในโดยเฉพาะรปภาพทสามารถเคลอนไหวได มสสน สะดดตา และเหมาะสมกบเนอหาภายในหนาเวบ
2. ผลการเรยนรทคาดหวง 2.1 นกเรยนสามารถสบหาแหลงสบคนขอมลรปภาพจากเวบไซตตาง ๆ ได 2.2 นกเรยนสามารถเลอกรปภาพทเหมาะสมและสวยงาม เพอนำามาสรางเวบไซตตามทกลมพงพอใจ
นกเรยนสามารถรถงแหลงทมาของขอมลเกยวกบเนอหาทจะนำามาสรางเวบไซทของกลม2.3 นกเรยนสามารถวางแผนการจดเกบขอมล และวตถ ทนำามาสรางเวบไซตของกลม ไดอยางมระบบ
การตกแตงเตมสสนใหกบโฮมเพจ เปนสงทจำาเปนทงนคงจะดราบเรยบเกนไป หากโฮมเพจของเรามแตตวหนงสอ เปรยบเทยบกบการดทวขาวดำา
![Page 17: ชุดการสอน Dream](https://reader033.fdocuments.net/reader033/viewer/2022052604/568c3adc1a28ab0235a7e9e3/html5/thumbnails/17.jpg)
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
![Page 18: ชุดการสอน Dream](https://reader033.fdocuments.net/reader033/viewer/2022052604/568c3adc1a28ab0235a7e9e3/html5/thumbnails/18.jpg)
184. เมอใช GIF ใหพยายามลดจำานวนสในพาเลท ใหเหลอเฉพาะสทใช
เทานน จะชวยลดขนาดไฟลได5. ทำาใหไฟลขอความมขนาดเลก ไมเกน 10k6. ออกแบบใหงายไดงาย7. ออกแบบใหใชสเพยง 256 ส และใชโหมดความละเอยดของจอภาพ
เดทากบ 640*4808. สามารถใชเวบเพจไดกบบราวเซอรรนเกา ๆ9. ทดสอบโฮมเพจอยางทเขาชมจะเขามาชม
ใบงานท 41.ใหนกเรยนสบคนขอมลแหลงวตถ ทจะนำามาใชสราง Web page
และบอกถงแหลงทมา
![Page 19: ชุดการสอน Dream](https://reader033.fdocuments.net/reader033/viewer/2022052604/568c3adc1a28ab0235a7e9e3/html5/thumbnails/19.jpg)
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.
![Page 20: ชุดการสอน Dream](https://reader033.fdocuments.net/reader033/viewer/2022052604/568c3adc1a28ab0235a7e9e3/html5/thumbnails/20.jpg)
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
![Page 21: ชุดการสอน Dream](https://reader033.fdocuments.net/reader033/viewer/2022052604/568c3adc1a28ab0235a7e9e3/html5/thumbnails/21.jpg)
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
![Page 22: ชุดการสอน Dream](https://reader033.fdocuments.net/reader033/viewer/2022052604/568c3adc1a28ab0235a7e9e3/html5/thumbnails/22.jpg)
22ไตเตลบาร (Title Bar) สวนทอยบนสดของหนาตางโปรแกรมเปนสวนทแสดงชอไฟลและหวเรองของเวบเพจเมนบาร (Menu Bar) แถบเมนคำาสงใชจดการกบเวบเพจโปรแกรม Dreamweaver จดเปนหมวดหมของคำาสงทเกยวของกน เชนFile , Edit, View, Window, และ Help เปนตนหนาตาง Insert มลกษณะเปนปม รวบรวมเปนหมวดหมสำาหรบแทบทใชตกแตงเวบเพจ เชน ลงค, อเมลลงค,ตาราง , รปภาพ, เฟรม ฯลฯหนาตาง (Properties) สำาหรบกำาหนดรปแบบตวอกษร ขนาด การจดวาง สสนขอความ หรอสพน การ Link ขอความหรอรปภาพไปยงเวบไซตอน ๆHTML Sourceเปนหนาตางสำาหรบการดโคดคำาสงของภาษา HTML โดยสามารถดไดจากหนาตางน
การตงคาพนทการทำางาน /การกำาหนดสพน1. คลกเมาสขวาในพนทวาง เลอกคำาสง PageproPerties
2. ตงคาการใชงานทหนาตาง Page Properties
![Page 23: ชุดการสอน Dream](https://reader033.fdocuments.net/reader033/viewer/2022052604/568c3adc1a28ab0235a7e9e3/html5/thumbnails/23.jpg)
23
กำาหนดรปภาพ เปนพน ใชคำาสง Background Image โดยคลกปม กำาหนดสพนทคำาสง Background
Text ขอความปกตทไมมการกำาหนดจดเชอมโยงLink ความทกำาหนดเปนจดเชอมโยงVisited Link ขอความเชอมโยงทเคยคลกเขาไปใชงานแลวActive Link ขอความเชอมโยงทกำาลงทำางานอย
3. คลกปม เพอยนยนคำาสง
ใบงานท 5เรอง ความรเบองตนเกยวกบ Dreamweaver MX
ใหนกเรยนเตมชอสวนประกอบของหนาจอและตอบคำาถามใหถกตอง
![Page 24: ชุดการสอน Dream](https://reader033.fdocuments.net/reader033/viewer/2022052604/568c3adc1a28ab0235a7e9e3/html5/thumbnails/24.jpg)
24
Insert มคณสมบตคอ............................................................................................................................ ประกอบดวย
1........................................................... 2...........................................................3............................................................4...........................................................5............................................................6...........................................................7............................................................8.............................................................9..............................................................10...........................................................11...........................................................12............................................................Poperties มคณสมบต
คอ………………………………………………………………………………………………… ประกอบดวย.................................................................................................................................... ..................................................................................................................................................... ..................................................................................................................................................... .....................................................................................................................................................
![Page 25: ชุดการสอน Dream](https://reader033.fdocuments.net/reader033/viewer/2022052604/568c3adc1a28ab0235a7e9e3/html5/thumbnails/25.jpg)
25
ใบความรท 6การแทรกรปภาพ/ตาราง
1.สาระการเรยนร ตารางและการแทรกรปภาพเปนเครองมออกประเภทหนงทจะชวยใหเวบเพจ มการจดรปแบบอยางเปนระบบไดอยางเหมาะสมและสวยงาม สะดวกและงายในการเปดดเวบเพจ
2. ผลการเรยนรทคาดหวง 2.1 นกเรยนสามารถใชเครองมอในการสรางตาราง 2.2 นกเรยนสามารถจดเซลในตารางได 2.3 นกเรยนสามารถแทรกขอความ/รปภาพลงในตารางได
การแทรกรปภาพ มขนตอนดงน1. คลกเครองมอ Image 2. เลอกรปภาพ จากหนาตาง Select Image Source โดยคลกเลอกในชอง Look in
3. คลกเลอกรปภาพ แลว คลกปม 4. จะไดรปภาพตามตองการ
![Page 26: ชุดการสอน Dream](https://reader033.fdocuments.net/reader033/viewer/2022052604/568c3adc1a28ab0235a7e9e3/html5/thumbnails/26.jpg)
26
5. จดวางรปภาพตามตองการดวย เครองมอ Properties
การแทรกตาราง เปนการแบงสวนหนาเวบเพจออกเปนชองสำาหรบใสขอมลทงทเปนทงแนวตงหรอแนวนอนตารางเปนรปแบบการนำาเสนอขอมลทางเวบเพจ การใชตารางจะชวยใหการนำาเสนอขอมลดสวยงาม เปนหมวดหมงายตอการเขาใจ การสรางตารางสามารถทำาโดยมขนตอนดงน1. คลกท Insert Table จากแทบ Common หรอ ใชเมน Insert แลวเลอก คำาสง Table
2. จะไดหนาตาง Insert table ดงรป
ในหนาตางขางตนจะมการใช ระบตาง ๆ คาตาง ๆ ใหกบตาราง สามาถแยกไดดงน Row คอ จำานวนแถวปกตจะเปน 3
![Page 27: ชุดการสอน Dream](https://reader033.fdocuments.net/reader033/viewer/2022052604/568c3adc1a28ab0235a7e9e3/html5/thumbnails/27.jpg)
27Column คอ จำานวนคอลมน ปกตจะเปน 3Width คอ ความกวางของตารางโดยปกตคา 75 PercentBorder คอ ขนาดของขอบตารางโดยปกตคาจะเปน 1Cell Padding คอ กำาหนดระยะหางขอความในตารางกบขอบตารางCell Spacing คอ กำาหนดความกวางแตละเซลในตารางเราสามารถกำาหนดและตงคาเซลในตาราง โดยการใชเครองมอ Properties
การรวมเซล และแยกเซล ดวยเคองมอ Merges Cells หรอ Splits Cell
การตงคาความกวาง และ ความสง ของตารางดวยเครองมอ Width และ Height
การเลอกสพน ดวยเครองมอ Bg การเลอกสเสนขอบตารางดวยเครองมอ Brdr
การตงคาเสนขอบของตาราง ตงคาท Border ตงแต 1 เปนตนไป หรอซอนเสนขอบของตารางใหตงคา
เปนเลข 0
การจดวางตารางใชคำาสง Align ตามตองการ
![Page 28: ชุดการสอน Dream](https://reader033.fdocuments.net/reader033/viewer/2022052604/568c3adc1a28ab0235a7e9e3/html5/thumbnails/28.jpg)
28
การแทรกแถวและคอลมน คลกเมน Modify ใชคำาสง Table เลอกคลก Insert Rows เพอแทรกแถว หรอ คลก Insert Columns เพอแทรกคอลมน
![Page 29: ชุดการสอน Dream](https://reader033.fdocuments.net/reader033/viewer/2022052604/568c3adc1a28ab0235a7e9e3/html5/thumbnails/29.jpg)
29การควบคมฟอนต และการเขารหสภาษไทย (Thai Encoding)
คำาสงนเปนคำาสงทผใชควรจะเรมตนปบตกอนเสมอ โดย เลอกเมนคำาสง Modify, Page Properties…………. ซงจะปรากฏหนาตางการทำางาน ดงน
ปรบคารายการ Document Encoding: เปน Other หรอ TIS-620 หรอ Windows-874
จากนนคลกปม OK เลอกเมนคำาสง Edit, Preference….. จะปรากฏกรอบทำางาน ใหคลกเลอกลมคำาสง (Category) ชอ “Fonts” ซงจะปรากฏ
คำาสงยอย ดงน
เลอก Font เลอก Other เลอก Ms Sans Serif
ปรบคาจากรายการน
![Page 30: ชุดการสอน Dream](https://reader033.fdocuments.net/reader033/viewer/2022052604/568c3adc1a28ab0235a7e9e3/html5/thumbnails/30.jpg)
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 -
พมพในชองน
![Page 31: ชุดการสอน Dream](https://reader033.fdocuments.net/reader033/viewer/2022052604/568c3adc1a28ab0235a7e9e3/html5/thumbnails/31.jpg)
31
ใบงานท 6เรอง การสรางตาราง
1.ใหนกเรยนออกแบบหนา Homepage โดยใชคณสมบตดงตอไปน
ตาราง การรวมเซล การแยกเซล การใสตวอกษร การใสรปภาพ
![Page 32: ชุดการสอน Dream](https://reader033.fdocuments.net/reader033/viewer/2022052604/568c3adc1a28ab0235a7e9e3/html5/thumbnails/32.jpg)
32
ใบความรท 7เรอง การเชอมโยง Link
1.สาระการเรยนร การเชอมโยงเอกสารเวบเพจไปยงหนาเวบอน ๆ สามารถทำาไดหลายรปแบบตามวตถประสงคของผออกแบบหนาเวบตองการ แตตองคำานงถงความสะดวกของผเปดเขาเยยมชมเวบเพจ ดวย
2. ผลการเรยนรทคาดหวง 2.1 นกเรยนสามารถเชอมโยงเวบเพจ จากรปภาพ 2.2 นกเรยนสามารถเชอมโยงเวบเพจ จากขอความ 2.3 นกเรยนสามารถเชอมโยงเวบเพจ จาก File การเชอมโยงเวบเพจ (Link)
ไฮเปอรลงค (Hyperlink) มกจะถกเรยกสน ๆ วา ลงค คอการลงคจากเวบเพจหนงไปยงตำาแหนงตาง ๆ ภายในเวบเพจเดยวกนหรอตางเวบเพจกได นอกจากนยงสามารถสรางลงคสำาหรบเรยกโปรแกรมสำาหรบการสง e-mail หรอใชงานโปรแกรมพเศษประเภทสควปต (Script) ไดดวย เชน Java Script VBScript เปนตน
1. การลงคจากรปภาพ โดยกำาหนดใหการคลกเมาสทรปภาพสามารถเชอมโยงไปยงเวบเพจ หรอรปภาพอน ๆ ได
2. การลงคจากขอความ จะสงเกตไดจากขอความทเปนลงคมกจะขดเสนใตและเมอวางเมาสไวบนขอความดงกลาวเมาสจะเปลยนเปนรปมอชทนท และการคลกเมาสทขอความดงกลาวนจะสามารถเชอมโยงไปยงเวบเพจหรอรปภาพอน ๆ ได
วธการสราง Hyperlink จากรปภาพหรอขอความ
![Page 33: ชุดการสอน Dream](https://reader033.fdocuments.net/reader033/viewer/2022052604/568c3adc1a28ab0235a7e9e3/html5/thumbnails/33.jpg)
331. เลอกรปภาพหรอขอความทตองการเชอมโยง โดยการ Drag Mouse และสามารถทำาไดดงน
2. คลกปม Hyperlink ทแทบ Common จะเกดหนาตาง Hyperlink และพมพขอความทตองการ ดงน
Text พมพปอนขอความทใชสรางการเชอมโยงLink กำาหนดไฟลหรอเวบไซดทตองการเชอมโยงไปถง
![Page 34: ชุดการสอน Dream](https://reader033.fdocuments.net/reader033/viewer/2022052604/568c3adc1a28ab0235a7e9e3/html5/thumbnails/34.jpg)
34Target กำาหนดลกษณะการแสดงผลของขอมลทปรากฏขนมา
_blank เปดหนาตางเบราเซอรวางเปลาขนมาใหม _parent เปดหนาตางเบราเซอรและกลบไปยง
หนาตางปจจบนเสมอ _self เปดหนาตางเบราเซอรหนาทมการยนยน
ตกลงขนมา _top เปดหนาตางเบราเซอรใหมขนมาแทนทเวบเพจ
เดมทงหมดTab Index พมพปอนจำานวนแทบTitle พมพปอนขอความทตองการใหปรากฏขนมาในขณะทนำาเมาสไปชAccess Key พมพปอนคยบอรดทใชในการเชอมโยง
3. คลกปม เพอยนยนคำาสง
ภาพทได
![Page 35: ชุดการสอน Dream](https://reader033.fdocuments.net/reader033/viewer/2022052604/568c3adc1a28ab0235a7e9e3/html5/thumbnails/35.jpg)
35
การเชอมโยงตดตอทางอเมลดวย Email Link ปม Email Link จะมหนาทรองรบการทำางาน การสงขอมลผานทาง
อนเตอรเนตโดยใชอเมลเปนตวกลางในการตดตอ และเมอไดจดตงเวบไซทขนมาสกหนงเวบ เมอไดสรางการเชอมโยงผานทางอเมลขนมาแลว ทชอง Link จะปรากฏคำาวา mailto: และตามดวยอเมลแอดเดรสทใชในการตดตอ ขนตอนการทำางานสามารถทำาไดดงน :-
1. คลกปม Email Link ทแทบ Common จากนนจะปรากฏหนาตาง Email Link ขนมา
![Page 36: ชุดการสอน Dream](https://reader033.fdocuments.net/reader033/viewer/2022052604/568c3adc1a28ab0235a7e9e3/html5/thumbnails/36.jpg)
362. กำาหนดรายละเอยดทใชสำาหรบสรางการเชอมโยงตดตอทางอเมล
ไดดงตอไปนText พมพปอนขอความทใชการสรางการเชอมโยงตดตอทางอเมลE-mail พมพอเมลแอดเดรสทใชในการเชอมโยง
3. คลกปม เพอยนยนคำาสง
ใบงานท 7เรอง การเชอมโยง (Link)
ใหนกเรยนฝกสรางการเชอมโยง ดวยวธดงตอไปน
1 เชอมโยงเวบเพจ จากรปภาพ กบ File และ เวบไซทอน 2 เชอมโยงเวบเพจ จากขอความ กบ File และ เวบไซทอน
![Page 37: ชุดการสอน Dream](https://reader033.fdocuments.net/reader033/viewer/2022052604/568c3adc1a28ab0235a7e9e3/html5/thumbnails/37.jpg)
37
ใบความรท 8เรอง การสราง Draw Layer
1. สาระการเรยนรDraw Layer เปนเครองมอชวยในการเคลอนยาย หรอจดวาง รปภาพ หรอ วตถ สามารถปรบเปลยนขนาดไดตามตองการ
2. ผลการเรยนรทคาดหวง 2.1 นกเรยนสามารถรจกวธการใชงานเครองมอ Draw Layer ในการสรางภาพ 2.2 นกเรยนเขาใจถงประโยชน และคณสมบตของ Draw Layer
การสรางเลเยอรสามารถทำาไดอยางงายดายเพยงคลกทปม Draw Layer จากนนแดรกเมาสสรางเลเยอรใหมขนาดตามตองการเพยงเทานน
![Page 38: ชุดการสอน Dream](https://reader033.fdocuments.net/reader033/viewer/2022052604/568c3adc1a28ab0235a7e9e3/html5/thumbnails/38.jpg)
38คณกสามารถทจะนำาภาพหรอพมพขอความทตองการลงในเลเยอรทสรางขนมาไดทนทโดยเลเยอรแตละเลเยอรยงสามารถวางซอนทบกนไดอกดวย สำาหรบขนตอนการทำางานมดงตอไปน
1. คลกปม Draw Layer ทแทบ Common2. แดรกเมาสสรางเลเยอรใหมขนาดตามตองการขนมาพนทงาน
3. นำาพอยนเตอรไวในเลเยอรและคลกปม Image ทแทบ Common จากนนจะปรากฏหนาตาง
Select Image Source ขนมา
4. ดบเบลคลกไฟลภาพทตองการนำาเขามาใชงาน5. หากภาพทปรากฏมขนาดใหญเกนไป ใหแดรกเมาสยอภาพใหมขนาดเลกพอดกบขนาดของเลเยอร ทสรางขนมา
![Page 39: ชุดการสอน Dream](https://reader033.fdocuments.net/reader033/viewer/2022052604/568c3adc1a28ab0235a7e9e3/html5/thumbnails/39.jpg)
39
การปรบเปลยนลำาดบของเลเยอร
การจดวางของชนงานทอยในเลเยอรจะปรากฏตามลำาดบในการสราง โดยเลเยอรทไดถกสรางขนมาลำาดบแรกจะถกแสดงไวดานลาง เรยงลำาดบบดบงซอนทบดวยเลเยอรทถกสรางไวครงลาสด ซงหากตองการปรบเปลยนลำาดบการวางของชนงานทอยในเลเยอรใหม สามารถทำาไดดงน
1. คลกเมน Window Other Layers ใหปรากฏเครองหมายถก จากนนจะปรากฏ Layers Panel
ขนมา
2. แดรกเมาสลากจดลำาดบของชนงานทอยในเลเยอรใหม
![Page 40: ชุดการสอน Dream](https://reader033.fdocuments.net/reader033/viewer/2022052604/568c3adc1a28ab0235a7e9e3/html5/thumbnails/40.jpg)
40
การซอนเลเยอรเมอไมตองการใหชนงานทอยในเลเยอรตาง ๆ ปรากฏขนมาบน
พนงานหรอในขณะทแสดงผลบนเบราเซอร การซอนเลเยอรจะเปนวธหนงทชวยปดบงชนงานทอยในเลเยอรนน ๆ ไมใหแสดงขนมาเปนการชวคราวซงหากตองการเรยกใชงานอกครงกสามารถทำาไดดวยวธการเดม
1. คลกเมาสทรปดวงตาใหปดลง จะเปนการซอนชนงานทอยภายในเลเยอรนน ๆ ไมใหปรากฏขน
![Page 41: ชุดการสอน Dream](https://reader033.fdocuments.net/reader033/viewer/2022052604/568c3adc1a28ab0235a7e9e3/html5/thumbnails/41.jpg)
41ใบงานท 8
เรอง การสราง Draw Layers
1.ใหนกเรยนใชเลเยอรในการแทรกขอความและแทรกรปภาพภายในเวบเพจ
2.ใหนกเรยนใชความรในเรองเลเยอร และสรางเลเยอรซอนกน 3 เลเยอร และเรยจดลำาดบใหมตามความสวยงาม
ใบความรท 9
![Page 42: ชุดการสอน Dream](https://reader033.fdocuments.net/reader033/viewer/2022052604/568c3adc1a28ab0235a7e9e3/html5/thumbnails/42.jpg)
42 การสราง Frame
1.สาระการเรยนรเฟรมเปนเทคนคทถกนำามาใชงานในการสราง เวบเพจ อกเทคนคและรป
แบบหนงทนาสนใจ จะประกอบไปดวยเฟรมหลกและเฟรมยอย มประโยชนคอ ใชสำาหรบจดแบงพนทบนหนาเวบเพจออกเปนสวน ๆ ใหเปนอสระตอกน โดยสามารถจดแบงเฟรมไดทงแนวตงและแนวนอน เมอนำาไปแสดงผลบนเบราเซอรขอมลทปรากฏขนมากจะถกจดแบงออกเปนสดสวนอยางชดเจน2. ผลการเรยนรทคาดหวง 2.1 นกเรยนสามารถทราบถงคณสมบตการสรางเฟรมได 2.2 นกเรยนสามารถกำาหนดแนวทางทจะนำาคณสมบตของเฟรม มาสราง Web page ได 2.3 นกเรยนสามารถใชเทคนคการสรางเฟรม สราง Web page ของกลมได 2.4 นกเรยนสามารถสรางเฟรม ,แกไข , ลบ เฟรม ได
เฟรม (Frame) จะประกอบไปดวยเฟรมหลกและเฟรมยอย มประโยชนคอ ใชสำาหรบจดแบงพนทบนหนาเวบเพจออกเปนสวน ๆ ใหเปนอสระตอกน โดยสามารถจดแบงเฟรมไดทงในแนวตงและแนวนอน เมอนำาไปแสดงผลบนเบราเซอรขอมลทปรากฏขนมากจะถกจดแบงออกเปนสดสวนอยางชดเจน
ขนตอนการสรางเฟรม1. คลกปม Top and Nested Left Frame ทแทบ
Frames จากนนจะปรากฏเฟรมขนมาทางดานบนและดานซายของพนงาน ซงสามารถแดรกเมาสทำาการยอขยายขนาดของเฟรมไดตามตองการ
![Page 43: ชุดการสอน Dream](https://reader033.fdocuments.net/reader033/viewer/2022052604/568c3adc1a28ab0235a7e9e3/html5/thumbnails/43.jpg)
43
ทดสอบการทำางานกบเฟรม ภายหลงจากไดทำาการสรางเฟรมในรปแบบทตองการขนมาเรยบรอย
แลว ตอจากนกสามารถพมพขอมล โดยใชความรทไดจากบทท 1 รวมถงสามารถนำาภาพเขามาประกอบเขาลงในเฟรมตาง ๆ ไดตามตองการ หลงจากทไดสราง เวบเพจเสรจเรยบรอยแลว โปรแกรมจะกำาหนดใหบนทกเฟรมหลกกอนแลวบนทกเฟรมยอยทมอยทงหมด จากนนจงสามารถทดสอบการแสดงผลบนเบราเซอรได สำาหรบขนตอนการทำางานสามารถทำาไดดงน
1. คลกเมน File Save All
2. จะปรากฏเสนขอบรอบ ๆ Frame และ จะปรากฏหนาตาง Save As ขน
![Page 44: ชุดการสอน Dream](https://reader033.fdocuments.net/reader033/viewer/2022052604/568c3adc1a28ab0235a7e9e3/html5/thumbnails/44.jpg)
44
3. ตงชอ File name แลวคลก Save เสนขอบจะเลอนไปในสวนตาง ๆ ของเฟรม ควรตงชอใหเหมาะสมกบ
การใชงาน
4. การกำาหนดคาคณสมบตของเฟรมหลกทงหนา ไมวาจะเปนการกำาหนดวาตองการใหแสดงเสนขอบของเฟรมหรอไม การกำาหนดขนาดความกวางและสเสนขอบของเฟรมการกำาหนดคาขนาดของเฟรมในแนวตงและแนวนอน รวมถงการระบเลอกหนวยทใชในการกำาหนดคาขนาดของเฟรม สำาหรบการกำาหนดคาคณสมบตสามารถทำาไดดงน
คลกเมน Window Properties ใหปรากฏเครองหมายถก จะปรากฏ Properties Panel ขนมาจากนนสามารถกำาหนดคาตาง ๆ ไดดงน
![Page 45: ชุดการสอน Dream](https://reader033.fdocuments.net/reader033/viewer/2022052604/568c3adc1a28ab0235a7e9e3/html5/thumbnails/45.jpg)
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 ระบการทำางานของสกรอลลบารทใชในการเลอนแสดงขอมล
![Page 46: ชุดการสอน Dream](https://reader033.fdocuments.net/reader033/viewer/2022052604/568c3adc1a28ab0235a7e9e3/html5/thumbnails/46.jpg)
46o Yes ใหปรากฏสกรอลลบารทใชในการเลอนด
ขอมลขนมาo No ไมปรากฏสกรอลลบารทใชในการเลอนด
ขอมลขนมาo Auto เมอมขอมลมากเกนขนาดของเฟรม จงจะ
ปรากฏสกอลลบารขนมาใหo Default แสดงสกรอลลบารขนมาตามคาทได
กำาหนดไวNo Resize เมอคลกเลอก จะไมสามารถเลอนหรอปรบเปลยนขนาดของเฟรมไดBorders กำาหนดลกษณะการแสดงขอบของเฟรมแตละเฟรมo Yes ใหปรากฏขอบของเฟรมขนมาในขณะท
แสดงผลบนเบราเซอรo No ไมปรากฏขอบของเฟรมขนมาในขณะท
แสดงผลบนเบราเซอรo Default แสดงขอบของเฟรมขนมาตามคาทได
กำาหนดไวBorder Color กำาหนดสเสนขอบของเฟรมแตละเฟรมทไดเลอกไวMargin Width กำาหนดชองวางระหวางเฟรมซายและเฟรมขวาMargin Height กำาหนดชองวางระหวางเฟรมบนและเฟรมลาง
![Page 47: ชุดการสอน Dream](https://reader033.fdocuments.net/reader033/viewer/2022052604/568c3adc1a28ab0235a7e9e3/html5/thumbnails/47.jpg)
47
ใบงานท 9 การสราง Frameใหนกเรยนนำาความรเรองเฟรมมาประยกตใชโดยงานของทกคนตอง
แบงเฟรมออกเปน 3 สวน และหาภาพจาก Internet หรอภาพจากสอการเรยนการสอนของคร นำามาออกแบบใหเหมาะสมสวยงาม
![Page 48: ชุดการสอน Dream](https://reader033.fdocuments.net/reader033/viewer/2022052604/568c3adc1a28ab0235a7e9e3/html5/thumbnails/48.jpg)
48ใบความรท 10
เรอง การสราง Form1.สาระการเรยนร
Form สามารถอำานวยความสะดวกในการตอบรบขอมล ของผเขามาเยยมชม Web Site การทำางานของ Form
มใหเลกใชงานมากมาย2. ผลการเรยนรทคาดหวง 2.1 นกเรยนสามารถรจกคณลกษณะ และ รปแบบ ตางของคำาสง Form 2.2 นกเรยนสามารถออกแบบเคาโครงหนาเวบ Form ทตองการใชงานไดอยางเหมาะสม
การสรางฟอรม (Form)ประโยชนของฟอรมทสรางขนบนหนาเวบเพจ คอ ใชสำาหรบรบสงขอมล
ตาง ๆ จากผใชงานมาเกบไวทเซรฟเวอร การสรางฟอรมจะปรากฏแทก <form> พรอมทงกรอบเสนประสแดงขนมา โดยภายในฟอรมสามารถสรางออบเจกตทใชในการรบสงคาไดอกมากมาย ดงน
1. คลกแทบ Form จะปรากฏรปแบบฟอรมขนมามากมาย โดยมคณสมบตดงน
Form จะปรากฏฟอรมในลกษณะเปนกรอบสเหลยมเสนประสแดงขนมา โดยภายในฟอรมสามารถ
สรางออบเจกตทใชในการรบสงคาไดอกมากมาย ดงน
Text Field ใชสำาหรบปอนรบขอมลตาง ๆ ทผใชงานพมพคาไว เชน ชอ นามสกล ทอย
![Page 49: ชุดการสอน Dream](https://reader033.fdocuments.net/reader033/viewer/2022052604/568c3adc1a28ab0235a7e9e3/html5/thumbnails/49.jpg)
49
Hidden Field ใชสำาหรบนำาขอมลทไดมาประมวลผลโดยจะไมมการตดตอกบผใชงาน
Textarea หนาทการทำางานจะเหมอนกบ Text Field เมอคลกทปม Textarea แลวจะปรากฏกลองขอความในลกษณะหลายบรรทดขนมา
Check Box ใชสำาหรบขอมลทมตวเลอกหลายตว
![Page 50: ชุดการสอน Dream](https://reader033.fdocuments.net/reader033/viewer/2022052604/568c3adc1a28ab0235a7e9e3/html5/thumbnails/50.jpg)
50
Radio Button ใชสำาหรบตองการระบคลกตวเลอก จำานวนหลายตวเลอกไดเพยง ตวเลอกเดยว
Radio Group ใชในการคลกตวเลอกเพยงตวเลอกเดยว
เมอแสดงผลบนเบลาเซอรจะมขอความดงน
![Page 51: ชุดการสอน Dream](https://reader033.fdocuments.net/reader033/viewer/2022052604/568c3adc1a28ab0235a7e9e3/html5/thumbnails/51.jpg)
51
List/Menu เมอกำาหนดเปน Menu ขอมลจะปรากฏขนมาพรอมกบ Drop Down List เพอใชเลอกขอมลทตองการ
เมอแสดงผลบนเบลาเซอรจะมขอความดงน
Jump Menu มหนาทคลายปม List Menu แตสงทพเศษสำาหรบ Jump Menu คอเมอคลก
ปม Jump Menu สามารถ เชอมโยงเปดไฟล หรอเวบไซตทตองการขนมาได
เมอแสดงผลบนเบลาเซอรจะมขอความดงน
![Page 52: ชุดการสอน Dream](https://reader033.fdocuments.net/reader033/viewer/2022052604/568c3adc1a28ab0235a7e9e3/html5/thumbnails/52.jpg)
52
ใบงานท 10 การสราง Form
ใหนกเรยนสรางแบบฟอรมประวตสวนตวโดยใช Object ดงทกำาหนด
1.Text Field2.Check Box3.Radio Button4.List or Menuพรอมทงภาพของผจดทำาประกอบเพอเพมความสวยงาม
![Page 53: ชุดการสอน Dream](https://reader033.fdocuments.net/reader033/viewer/2022052604/568c3adc1a28ab0235a7e9e3/html5/thumbnails/53.jpg)
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 ทแทบ แตหากยงไมไดบนทกเวบเพจจะปรากฏหนาตางขนมาเพอใหทำาการบนทกไฟลเวบเพจกอน
![Page 54: ชุดการสอน Dream](https://reader033.fdocuments.net/reader033/viewer/2022052604/568c3adc1a28ab0235a7e9e3/html5/thumbnails/54.jpg)
54
Flash Button2. กำาหนดรายละเอยดในการสรางปม Flash Button ไดดงตอไปน
Style คลกเลอกรปแบบโดยสามารถดดวยตวอยางไดจากชอง SampleButton Text พมพขอความทตองการใหปรากฏขนมาบนปมFont คลกเลอกรปแบบของตวอกษรทตองการLink กำาหนดแหลงทตองการลงคเชอมโยงเมอทำาการคลกทปมTarget กำาหนดลกษณะการแสดงผลของขอมลBg Color กำาหนดสพนหลงของปมSave As พมพชอบนทกปมทสรางขนมา โดยไฟลทไดจะมนามสกลเปน .swf
![Page 55: ชุดการสอน Dream](https://reader033.fdocuments.net/reader033/viewer/2022052604/568c3adc1a28ab0235a7e9e3/html5/thumbnails/55.jpg)
55
Flash Text
ใบงานท 11
![Page 56: ชุดการสอน Dream](https://reader033.fdocuments.net/reader033/viewer/2022052604/568c3adc1a28ab0235a7e9e3/html5/thumbnails/56.jpg)
56 เรอง การสราง Flash Button/Flash Text
ใหนกเรยนนำาความรเรอง การสราง Flash Button/Flash Text มาประยกตใชในการออกแบบงานหนาเวบเพจ ของทกคนใหเหมาะสมสวยงาม
ใบความรท 12การสมคร Free Homepage
1.สาระการเรยนร
![Page 57: ชุดการสอน Dream](https://reader033.fdocuments.net/reader033/viewer/2022052604/568c3adc1a28ab0235a7e9e3/html5/thumbnails/57.jpg)
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
![Page 58: ชุดการสอน Dream](https://reader033.fdocuments.net/reader033/viewer/2022052604/568c3adc1a28ab0235a7e9e3/html5/thumbnails/58.jpg)
58
2. คลกท Sign up for a free web site เพอสมครเปนสมาชกขอพนทเวบไซตฟร
3. คลกท Sing up now เพอเขาสขนตอนการลงทะเบยนสมครเปนสมาชก
![Page 59: ชุดการสอน Dream](https://reader033.fdocuments.net/reader033/viewer/2022052604/568c3adc1a28ab0235a7e9e3/html5/thumbnails/59.jpg)
59
4. กำาหนดรายละเอยดตาง ๆ ทใชในการลงทะเบยนสมครเปนสมาชกไดดงตอไปน
Yahoo ID พมพชอใชในการตดตอเขาสเวบไซตPassword พมพรหสผานRe-type Password พมพยนยนรหสผานอกครงหนงSecurity Quesstion เลอกคำาถามทตองการ ใชสำาหรบกรณทมการลมหสผานYour Answnswer พมพคำาตอบของคำาถามนนBirthday พมพวนเดอนปเกดAltermate Email พมพอเมลทใชในการตตอFirst Name พมพชอทใชในการตดตอLast Name พมพนามสกลทใชในการตดตอ
![Page 60: ชุดการสอน Dream](https://reader033.fdocuments.net/reader033/viewer/2022052604/568c3adc1a28ab0235a7e9e3/html5/thumbnails/60.jpg)
60
![Page 61: ชุดการสอน Dream](https://reader033.fdocuments.net/reader033/viewer/2022052604/568c3adc1a28ab0235a7e9e3/html5/thumbnails/61.jpg)
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
![Page 62: ชุดการสอน Dream](https://reader033.fdocuments.net/reader033/viewer/2022052604/568c3adc1a28ab0235a7e9e3/html5/thumbnails/62.jpg)
62
การ Upload โดยใชรปแบบสำาเรจรปของ GeoCitees1. เลอกรปเครองมอในการสรางเวบไซต
2. เลอกประเภทเวบไซตทตองการจะสราง
![Page 63: ชุดการสอน Dream](https://reader033.fdocuments.net/reader033/viewer/2022052604/568c3adc1a28ab0235a7e9e3/html5/thumbnails/63.jpg)
633. เลอกรปแบบเวบไซตทตองการจะสราง
4. เลอกรปแบบทเหมาะสมกบเวบไซตทตองการจะสราง
5. รอการสรางรปแบบและ Upload ดวยระบบอตโนมต
![Page 64: ชุดการสอน Dream](https://reader033.fdocuments.net/reader033/viewer/2022052604/568c3adc1a28ab0235a7e9e3/html5/thumbnails/64.jpg)
64
การ Upload โดยใช Yahoo Hosting
![Page 65: ชุดการสอน Dream](https://reader033.fdocuments.net/reader033/viewer/2022052604/568c3adc1a28ab0235a7e9e3/html5/thumbnails/65.jpg)
65
![Page 66: ชุดการสอน Dream](https://reader033.fdocuments.net/reader033/viewer/2022052604/568c3adc1a28ab0235a7e9e3/html5/thumbnails/66.jpg)
66
ใบความรท 13.2 เรอง วธการทำาโครงงาน
จดประสงคการเรยนร1. นกเรยนสามารถบอกความหมายของโครงงานคอมพวเตอรได
2. นกเรยนสามารถอธบายรปแบบการจดทำาโครงงานคอมพวเตอรได 3. นกเรยนสามารถเขยนขนตอนการจดทำาโครงงานคอมพวเตอรได4. นกเรยนสามารถเขยนรายงานโครงงานคอมพวเตอรได
![Page 67: ชุดการสอน Dream](https://reader033.fdocuments.net/reader033/viewer/2022052604/568c3adc1a28ab0235a7e9e3/html5/thumbnails/67.jpg)
675. นกเรยนสามารถหลอมรวมความคดสรางสรรครวบยอดของกลมในการเลอกหวขอทจะจดทำาโครงงาน คอมพวเตอรได ความหมายของโครงงาน
โครงงาน หมายถง กจกรรมทเปดโอกาสใหผเรยนไดศกษาคนควาและลงมอปฏบตดวยตนเองตามความ
สามารถ ความถนด และความสนใจ โดยอาศยกระบวนการทางวทยาศาสตร หรอกระบวนการอนใดไปใชในการศกษาหาคำาตอบในเรองนน ๆ โดยมครผสอนคอยกระตน แนะนำา และใหคำาปรกษาแกผเรยนอยางใกลชด ตงแตการเลอกหวขอทจะศกษา คนควา ดำาเนนการวางแผน กำาหนดขนตอนการดำาเนนงานและการนำาเสนอผลงาน โดยทวไป การทำาโครงงานสามารถทำาไดทกระดบการศกษาซงอาจทำาเปนรายบคคลหรอเปนกลมกได ทงนขนอยกบลกษณะของโครงงาน อาจเปนโครงงานเลก ๆ ทไมยงยากซบซอน หรอเปนโครงงานใหญทมความยากและซบซอนขนกได
ประเภทของโครงงานประเภทของโครงงานอาจแบงตามลกษณะของกจกรรมไดเปน 4 ประเภท คอ1. โครงงานประเภทสำารวจ รวบรวมขอมล โครงงานประเภทน ผ
เรยนเพยงตองการสำารวจและรวบรวมขอมลแลวนำาเสนอขอมลเหลานนมาจำาแนกเปนหมวดหมและนำาเสนอในรป
แบบตาง ๆ เพอใหเหนลกษณะหรอความสมพนธ ในเรองทตองการศกษาได ชดเจนยงขน เชน การสำารวจประชาชนและชนดของสงตาง ๆ เชน สตว พช
2.โครงงานประเภทการทดลอง เปนโครงงานทมการออกแบบการทดลองเพอศกษาผลของตวแปรหนงทม
ตอตวแปรอกตวหนงทตองการศกษาโดยควบคมตวแปรอน ๆ ทอาจมผลตอ ตวแปรทตองการศกษาไว โดยทว ๆ ไป ขนตอนการดำาเนนงานของโครงงาน
ประเภทน จะประกอบดวยการกำาหนดปญหา การดำาเนนการทดลอง การ รวบรวมขอมล การแปรผลและการสรปผลการทดลอง เชน การศกษาเปรยบ
เทยบผลของสารเคมทมตอพฒนาการทางกายและการเจรญเตบโตของหนขาว
3. โครงงานประเภทพฒนาหรอประดษฐ เปนโครงงานเกยวกบการประยกตทฤษฎ หรอหลกการทาง
![Page 68: ชุดการสอน Dream](https://reader033.fdocuments.net/reader033/viewer/2022052604/568c3adc1a28ab0235a7e9e3/html5/thumbnails/68.jpg)
68วทยาศาสตรหรอดานอน ๆ มาประดษฐของเลน เครองมอ เครองใชหรออปกรณเพอประโยชนใชสอยตาง ๆ ซงอาจเปนการประดษฐสงใหม หรอการปรบปรงเปลยนแปลงของเดมทมอยแลวใหมประสทธภาพสงขนกได อาจรวมถงการสรางแบบจำาลองเพออธบายแนวคดตาง ๆดวย เชน โครงงานผลตสอการเรยนการสอนคณตศาสตร
4.โครงงานประเภททฤษฎ หลกการ หรอแนวคด เปนโครงงานทผทำาโครงงานไดนำาเสนอทฤษฎ หลกการ
หรอแนวคดใหม ๆ ซงอาจจะอยในรปแบบของสตรสมการ หรอคำาอธบายกไดโดยผเสนอ ไดตงกตกาหรอขอตกลงขนมาเอง แลวนำาเสนอทฤษฎ หลกการ แนวคด หรอจนตนาการของตนเองตามกตกาหรอขอตกลงนน หรออาจใชกตกาหรอขอตกลงเดมมาอธบายสงของ หรอปรากฏการณในแนวคดใหม โครงงานนมกเปนโครงงานทางคณตศาสตร หรอวทยาศาสตร เชน โครงงานเกษตรทฤษฎใหม ทฤษฎของจำานวน ฯลฯ
วธการทำาโครงงาน การทำาโครงงาน1. กำาหนดปญหา กำาหนดหวขอเรอง2. ตงสมมตฐาน หรอคำาตอบชวคราว3. ออกแบบการศกษาคนควา การทดลอง4. ลงมอปฏบต5. สรปผลโดยการจดทำารายงานโครงงาน
…………..อาจมปญหาใหมเกดขน………..(ปญหาใหมทเกดขนนำาไปสโครงงานเรองตอ ๆ ไป โดยมขนตอนการทำางานโครงงาน เหมอนขอ 1-5)
6. นำาเนอผลงาน ประเมนผล7. จดนทรรศการ สงประกวด หวขอการเขยนรายงานโครงงาน
![Page 69: ชุดการสอน Dream](https://reader033.fdocuments.net/reader033/viewer/2022052604/568c3adc1a28ab0235a7e9e3/html5/thumbnails/69.jpg)
69โครงงานวชา……………………เรอง……………………….ผจดทำา อาจารยท……………ปรกษา…………….โรงเรยน……………………สงกด………
ระดบชน…………………….บทคดยอ (สรป วตถประสงคของการดำาเนนงาน, วธการดำาเนนงาน, ผลประโยชนทไดรบ)กตตกรรมประกาศ (การไดรบความอนเคราะหในรปแบบตาง ๆ เชน ขอมล ความชวยเหลอ)บทท 1 บทนำา ทมาและความสำาคญของโครงงาน………………..วตถประสงค………….
สมมตฐานของการศกษาคนควา ขอบเขตการ………ศกษาคนควา ตวแปรทเกยวของ …… (ถาม)
บทท 2 บทเอกสารทเกยวของกบการทำาโครงงานเรองนบทท 3 อปกรณ วธดำาเนนการศกษาบทท 4 ผลการศกษา และอภปรายผลบทท 5 สรปผล ประโยชน ขอเสนอแนะเอกสารอางอง
ใบงานท 13.1เรอง เคาโครงรางโครงงานคอมพวเตอร
โครงงาน รายวชา โครงงานคอมพวเตอรชอกลม ชน ม………………………………………………… ………/………… ประธานกลม……………………………………….กจกรรมท 1.
![Page 70: ชุดการสอน Dream](https://reader033.fdocuments.net/reader033/viewer/2022052604/568c3adc1a28ab0235a7e9e3/html5/thumbnails/70.jpg)
701.1 ชอ
งาน………………………………………………………………………………………………………………..
1.2 งานทไดรบมอบหมาย………………………………………………………………………………………
1.3 การออกแบบงาน (สงรางแบบงานขางทายน)
โครงงานรายวชา โครงงานคอมพวเตอรเรอง………………………………………………ผจดทำา อาจารยท……………ปรกษา…………….โรงเรยน……………………สงกด………
ระดบชน…………………….บทคดยอ (สรป วตถประสงคของการดำาเนนงาน, วธการดำาเนนงาน, ผลประโยชนทไดรบ)
……………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………
กตตกรรมประกาศ (การไดรบความอนเคราะหในรปแบบตาง ๆ เชน ขอมล ความชวยเหลอ)
…………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………
บทท 1 บทนำา ทมาและความสำาคญของโครงงาน………………..วตถประสงค………….
สมมตฐานของการศกษาคนควา………….ขอบเขตการศกษาคนควา…………….ตวแปรทเกยวของ
![Page 71: ชุดการสอน Dream](https://reader033.fdocuments.net/reader033/viewer/2022052604/568c3adc1a28ab0235a7e9e3/html5/thumbnails/71.jpg)
71(ถาม)…………….……………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………
บทท 2 บทเอกสารทเกยวของกบการทำาโครงงานเรองน…………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………………………………………………………
บทท 3 อปกรณ วธดำาเนนการศกษา……………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………………
……
บทท 4 ผลการศกษา และอภปรายผล………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………
………
บทท 5 สรปผล ประโยชน ขอเสนอแนะ ………………………………………………………………………………………………………………………… …………………………………………………………………………………………………………………………
เอกสารอางอง ………………………………………………………………………………………………………………………… …………………………………………………………………………………………………………………………
กจกรรมท 2. กจกรรมทนกเรยนเลอกปฏบต เลอกไดมากกวา 1 ขอ ตามตองการ
![Page 72: ชุดการสอน Dream](https://reader033.fdocuments.net/reader033/viewer/2022052604/568c3adc1a28ab0235a7e9e3/html5/thumbnails/72.jpg)
72 รปภาพ
จาก…………………………………………………………………………………………….……………………………….…
คดลอกขอความเรอง……………………………………………………………………………………………..…………………….
คำาประพนธไดมาจาก…………………………………………………………………………………………..………………………..
การสรางเอกสาร (แผนพบ, การด, รายงาน ฯ)……………………………………………………………………………………
จดประสงคการเรยนร ทนกเรยนไดรบ หลงจบบทเรยนนแลว1………………………………………………………………………………………………………………………………………………………2………………………………………………………………………………………………………………………..………………………….…จดประสงคการนำาไปใช ทนกเรยนไดรบ หลงปฏบตกจกรรมนแลว1………………………………………………………………………………………………………………………………………………………2………………………………………………………………………………………………………………………..………………………….…
แหลงขอมล1.www………………………………………………………………….ความรทได ……………………………………………………….2.www………………………………………………………………….ความรทได ……………………………………………………….3………………………………………………………………….……….ความรทได……………………………………………………….…สงงานวนท เดอน………… ………………………………..พ.ศ.25……………….
ผตรวจประเมนผลงาน……………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………..……………………………………
![Page 73: ชุดการสอน Dream](https://reader033.fdocuments.net/reader033/viewer/2022052604/568c3adc1a28ab0235a7e9e3/html5/thumbnails/73.jpg)
73
ลงชอ……………………………………………………………..ผสอน
นางศศธร ไวทยสวรรณ
แบบประเมนตนเองของนกเรยน
รายวชา โครงงานคอมพวเตอร
การประเมนตนเองของนกเรยน
นกเรยนตอบคำาถามเหลานขณะทำางาน หรอ เมอทำางานแตละชนเสรจแลว1. โครงงานงานทนกเรยนทำามแนวคด/ความเปนมา อยางไรบาง จงอธบาย…………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………2.นกเรยนไดคณคา/ความร อะไรบางจากการทำางานโครงงานหวขอน…………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………
![Page 74: ชุดการสอน Dream](https://reader033.fdocuments.net/reader033/viewer/2022052604/568c3adc1a28ab0235a7e9e3/html5/thumbnails/74.jpg)
743.หวขอเนอหาทเนกรยนเลอกสรางโครงงานมสมพนธกบ โปรแกรม
Dreamweaver Mx อยางไรบาง ?…………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………4.เนอหา ทนกเรยนไดเรยนรมาแลว นกเรยนรสกเชอมนเกยวกบอะไร…………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………5.นกเรยนยงไมเขาใจในหวขอเนอหาอะไรบาง…………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………
ใบงานท 13.2
![Page 75: ชุดการสอน Dream](https://reader033.fdocuments.net/reader033/viewer/2022052604/568c3adc1a28ab0235a7e9e3/html5/thumbnails/75.jpg)
75 เรอง การจดทำาเคาโครงรางโครงงานการสรางเวบไซต ดวยโปรแกรม
Dreamweaver MX ใหนกเรยนจดทำาเคาโครงรางโครงงานการสรางเวบไซต ดวยโปรแกรม
Dreamweaver MX โดยจะตองบรณาการกบกลมสาระวชาใดวชาหนงตามทนกเรยนถนด และ
สนใจ หรอ มเนอเรองเกยวกบแนวปรชญาเศรษฐกจพอเพยง ตามทกลมไดรวมกนตดสนใจเลอกหวขอไว เพอเตรยมความพรอมในการจดทำาโครงงานตอไปอยางนอย 3 Pages โดยวาดรปแบบ ลงในใบงานทกำาหนด
ใบงานท 14
เคาโครงราง โครงงาน หนาท…… ..
![Page 76: ชุดการสอน Dream](https://reader033.fdocuments.net/reader033/viewer/2022052604/568c3adc1a28ab0235a7e9e3/html5/thumbnails/76.jpg)
76 เรอง การจดทำาโครงงานการสรางเวบไซต ดวยโปรแกรม
Dreamweaver MX
ใหนกเรยนจดทำาโครงงานของกลมตามทไดเลอกหวขอและเขยน เคาโครงรางโครงงานไวตงแตแผนการจดการเรยนรท 2 โดยใชเทคนคการ
สรางงานมลตมเดย ดวยโปรแกรม Dreamweaver MX โดยจะตองบ รณาการกบกลมสาระวชาใดวชาหนงตามทนกเรยนถนด และ สนใจ
![Page 77: ชุดการสอน Dream](https://reader033.fdocuments.net/reader033/viewer/2022052604/568c3adc1a28ab0235a7e9e3/html5/thumbnails/77.jpg)
77
ภาคผนวก
ตวอยางสอการเรยนการสอน
![Page 78: ชุดการสอน Dream](https://reader033.fdocuments.net/reader033/viewer/2022052604/568c3adc1a28ab0235a7e9e3/html5/thumbnails/78.jpg)
78 รปภาพ Animation
รปภาพ แผน CD ไทยประณตศลป 300 รปภาพ ของบรษทเจเนซส มเดยคอม จำากด
รปภาพ แผน CD วถชวตไทย 300 รปภาพ ของบรษทเจเนซส มเดยคอม จำากด
![Page 79: ชุดการสอน Dream](https://reader033.fdocuments.net/reader033/viewer/2022052604/568c3adc1a28ab0235a7e9e3/html5/thumbnails/79.jpg)
79
รปภาพ แผน CD สถาปตยกรรมและปชนยสถาน 300 รปภาพ ของบรษทเจเนซส มเดยคอม จำากด
รปภาพ แผน CD คลปอารต การศกษา 12,600 รปภาพ ของบรษทเจเนซส มเดยคอม จำากด
![Page 80: ชุดการสอน Dream](https://reader033.fdocuments.net/reader033/viewer/2022052604/568c3adc1a28ab0235a7e9e3/html5/thumbnails/80.jpg)
80
รปภาพ แผน CD คลปอารต การศกษา 12,600 รปภาพของบรษท เจเนซส มเดยคอม จำากด
1. กลมสาระการเรยนร คณตศาสตร ตาราง
![Page 81: ชุดการสอน Dream](https://reader033.fdocuments.net/reader033/viewer/2022052604/568c3adc1a28ab0235a7e9e3/html5/thumbnails/81.jpg)
81 ปฏทน
นาฬกา
รปทรง
2. กลมสาระการเรยนร วทยาศาสตร ตนไม
มนษย
![Page 82: ชุดการสอน Dream](https://reader033.fdocuments.net/reader033/viewer/2022052604/568c3adc1a28ab0235a7e9e3/html5/thumbnails/82.jpg)
82
รางกายมนษย
สญลกษณทางวทยาศาสตร
สตวนำา
สตวปก
สตวเลอยคลาน
![Page 83: ชุดการสอน Dream](https://reader033.fdocuments.net/reader033/viewer/2022052604/568c3adc1a28ab0235a7e9e3/html5/thumbnails/83.jpg)
83
พช
แมลง
สญลกษณทางไฟฟา
สตวดกดำาบรรพ
สตวปา
![Page 84: ชุดการสอน Dream](https://reader033.fdocuments.net/reader033/viewer/2022052604/568c3adc1a28ab0235a7e9e3/html5/thumbnails/84.jpg)
84
สตวเลยง
3. กลมสาระการเรยนร สงคมฯ การเมองการปกครอง
เทศกาล
![Page 85: ชุดการสอน Dream](https://reader033.fdocuments.net/reader033/viewer/2022052604/568c3adc1a28ab0235a7e9e3/html5/thumbnails/85.jpg)
85
ประวตศาสตร
แผนทโลก
ราศ
วนหยด
สถานท
![Page 86: ชุดการสอน Dream](https://reader033.fdocuments.net/reader033/viewer/2022052604/568c3adc1a28ab0235a7e9e3/html5/thumbnails/86.jpg)
86
งานอสเตอร
ธง
แผนท
ยศ
ฤดกาล
![Page 87: ชุดการสอน Dream](https://reader033.fdocuments.net/reader033/viewer/2022052604/568c3adc1a28ab0235a7e9e3/html5/thumbnails/87.jpg)
87 ศาสนา
สถานทสำาคญ
4. กลมสาระการเรยนร สขศกษา การรกษา
![Page 88: ชุดการสอน Dream](https://reader033.fdocuments.net/reader033/viewer/2022052604/568c3adc1a28ab0235a7e9e3/html5/thumbnails/88.jpg)
88 การออกกำาลง
ผลไม
ผก
มอ
อาหาร
![Page 89: ชุดการสอน Dream](https://reader033.fdocuments.net/reader033/viewer/2022052604/568c3adc1a28ab0235a7e9e3/html5/thumbnails/89.jpg)
89
5. กลมสาระการเรยนร การงานอาชพและเทคโนโลย การเกษตร
![Page 90: ชุดการสอน Dream](https://reader033.fdocuments.net/reader033/viewer/2022052604/568c3adc1a28ab0235a7e9e3/html5/thumbnails/90.jpg)
90
การสอสาร
เครองแตงกาย
เครองมออน ๆ
ยานพาหนะ
อวกาศ
![Page 91: ชุดการสอน Dream](https://reader033.fdocuments.net/reader033/viewer/2022052604/568c3adc1a28ab0235a7e9e3/html5/thumbnails/91.jpg)
91
อปกรณ
การศกษา
คอมพวเตอร
เครองมอออกแบบ
แตงบาน
![Page 92: ชุดการสอน Dream](https://reader033.fdocuments.net/reader033/viewer/2022052604/568c3adc1a28ab0235a7e9e3/html5/thumbnails/92.jpg)
92 สงกอสราง
อาวธสงคราม
6. กลมสาระการเรยนร ศลปะ
![Page 93: ชุดการสอน Dream](https://reader033.fdocuments.net/reader033/viewer/2022052604/568c3adc1a28ab0235a7e9e3/html5/thumbnails/93.jpg)
93 กรอบ
ขอความเตอน
บนเทง
ภาพศลป
สญลกษณ
ขอความตาง ๆ
![Page 94: ชุดการสอน Dream](https://reader033.fdocuments.net/reader033/viewer/2022052604/568c3adc1a28ab0235a7e9e3/html5/thumbnails/94.jpg)
94 ดาว
ปายจราจร
ลวดลาย
อกษร
![Page 95: ชุดการสอน Dream](https://reader033.fdocuments.net/reader033/viewer/2022052604/568c3adc1a28ab0235a7e9e3/html5/thumbnails/95.jpg)
95
บรรณานกรม
ภททรา เหลองวลาศ. Dreamweaver MX สรางเวบไซตแบบมออาชพ. กรงเทพฯ: ซเอดยเคชน, 2547
ดวงใจ พงศประเทองสข. จบภาพแบบอยหมด! ดวย Snag It 6.1. กรงเทพมหานคร: บรษทเฟสท แปซฟก (ดอกหญา) จำากด, 2545.ทศนา แขมมณ. 14 วธสอนสำาหรบครมออาชพ. กรงเทพมหานคร: จฬาลงกรณมหาวทยาลย, 2544. วชาการ, กรม. กระทรวงศกษาธการ. หลกสตรการศกษาขนพนฐาน พทธศกราช 2544. พมพครงท 2. กรงเทพมหานคร: โรงพมพองคการรบสงสนคาและพสดภณฑ (ร.ส.พ.), 2545.วชาการ, กรม. กระทรวงศกษาธการ. เอกสารประกอบหลกสตรการศกษาขนพนฐาน พทธศกราข 2544 คมอการจดการเรยนรกลมสาระการเรยนร การงานอาชพและเทคโนโลย. กรงเทพมหานคร: โรงพมพ องคการรบสงสนคาและพสดภณฑ (ร.ส.พ.), 2545.วชาการ, กรม. กระทรวงศกษาธการ. หลกสตรการศกษาขนพนฐาน พทธศกราข 2544 สาระและมาตรฐานการ เรยนร กลมสาระการเรยนร การงานอาชพและเทคโนโลย. กรงเทพมหานคร: โรงพมพองคการรบสงสนคา และพสดภณฑ (ร.ส.พ.), 2545. วชาการ, กรม. กระทรวงศกษาธการ. เอกสารชดเทคนคการจดกระบวนการเรยนร ทผเรยนสำาคญทสด การเรยนร
![Page 96: ชุดการสอน Dream](https://reader033.fdocuments.net/reader033/viewer/2022052604/568c3adc1a28ab0235a7e9e3/html5/thumbnails/96.jpg)
96 เพอพฒนากระบวนการคด. กรงเทพมหานคร: โรงพมพการศาสนา, 2543.