การติดตั้งและใช้งานโปรแกรม ADOBE DREAMWEAVER

แผนการสอน/แผนการเรียนรู้ภาคทฤษฎี หน่วยท่ี 3 สอนสัปดาห์ท่ี 4 แผนการสอน/การเรียนรู้ภาคทฤษฎี คาบรวม 4 ชื่อวชิ าการสร้างเวบ็ ไซต์ ช่ือหน่วยการติดต้งั และใชง้ านโปรแกรม ADOBE จาํ นวนคาบ 4 DREAMWEAVER CS5ชื่อเรื่องการติดต้งั และใชง้ านโปรแกรม ADOBE DREAMWEAVER CS5หวั ข้อเรื่อง ด้านความรู้ 1. คุณสมบตั ิของโปรแกรม Adobe Dreamweaver CS5 ด้านทกั ษะ 2. การติดต้งั โปรแกรม Adobe Dreamweaver CS5 3. การเขา้ สู่โปรแกรม Adobe Dreamweaver CS5 4. ส่วนประกอบของหนา้ ต่างโปรแกรมAdobe Dreamweaver CS5 5. การออกจากโปรแกรม Adobe Dreamweaver CS5ด้านคุณธรรม จริยธรรม 1. ความรับผดิ ชอบ 2. ความสนใจใฝ่ รู้สาระสําคญั หลงั จากที่ไดอ้ อกแบบระบบเวบ็ ไซต์แลว้ ข้นั ตอนต่อไปจะตอ้ งติดต้งั โปรแกรมซ่ึงโปรแกรมที่ใช้ในการพฒั นาระบบเวบ็ ไซต์คือโปรแกรม ADOBE DREAMWEAVER CS5 มีคุณสมบตั ิในการพฒั นาที่หลากหลายภาษาดงั น้นั จึงเหมาะกบั การสร้างชิ้นงานท่ีไม่ตอ้ งจดจาํ ชุดคาํ สั่งมากมายในการพฒั นาโดยสามารถเลือกใช้เคร่ืองมือต่าง ๆ เพ่ือสร้างเวบ็ เพจได้ การติดต้งั การเขา้ สู่โปรแกรมและการออกจากโปรแกรมน้ันมีข้นั ตอนที่ไม่ซบั ซอ้ น นอกจากน้นั โปรแกรม ADOBE DREAMWEAVER CS5 ยงั สามารถพฒั นาระบบไดต้ ามความตอ้ งการโดยสามารถเลือกหนา้ ต่างการแสดงผลในรูปแบบชุดคาํ ส่งั การออกแบบ หรือสามารถเลือกพฒั นาไดจ้ ากท้งั สองแบบควบคู่กนั ซ่ึงโปรแกรม ADOBE DREAMWEAVER CS5 เป็ นโปรแกรมที่มีความเหมาะสมสาํ หรับผเู้ ร่ิมตน้ สร้างเวบ็ ไซตแ์ ละเป็นเคร่ืองมือท่ีสามารถสร้างเวบ็ ไซตไ์ ดอ้ ยา่ งง่ายดาย

สมรรถนะอาชีพประจาํ หน่วย แสดงความรู้เกี่ยวกบั การติดต้งั โปรแกรม ADOBE DREAMWEAVER CS5 การเขา้ ใชง้ านโปรแกรมและการ ออกจากโปรแกรมไดอ้ ยา่ งถูกตอ้ ง คาํ ศัพท์สําคญั - Adobe Dreamweaver เป็ นโปรแกรมสําหรับพฒั นาระบบเว็บไซต์ เป็ นโปรแกรมประเภท“WYSIWYG” What You See Is What You Get คือเม่ือมีการจดั วางขอ้ ความ หรือ รูปภาพลงไปโปรแกรมจะทาํการเขียนโคด้ HTML ใหโ้ ดยอตั โนมตั ิ จุดประสงค์การสอน/การเรียนรู้ • จุดประสงค์ทวั่ ไป / บูรณาการเศรษฐกจิ พอเพยี ง 1. แสดงความรู้เกี่ยวกบั การติดต้งั โปรแกรม ADOBE DREAMWEAVER CS5 (ด้านความรู้) 2. เพอ่ื ใหม้ ีทกั ษะในการเขา้ ใชง้ านโปรแกรมและการออกจากโปรแกรมไดอ้ ยา่ งถูกตอ้ ง (ด้านทักษะ) 3. เพือ่ ใหม้ ีเจตคติที่ดีตอ่ การเตรียมความพร้อมดา้ น วสั ดุ อุปกรณ์ และการปฏิบตั ิงานอยา่ งถูกตอ้ ง สาํ เร็จ ภายในเวลาท่ีกาํ หนด มีเหตุและผลตามหลกั ปรัชญาของเศรษฐกิจพอเพยี ง(ด้านคุณธรรม จริยธรรม) • จุดประสงค์เชิงพฤติกรรม / บูรณาการเศรษฐกจิ พอเพยี ง 1. บอกคุณสมบตั ิของโปรแกรม Adobe Dreamweaver CS5 (ด้านความรู้) 2. สามารถติดต้งั โปรแกรม Adobe Dreamweaver CS5 (ด้านทักษะ) 3. บอกข้นั ตอนการเขา้ สู่โปรแกรม Adobe Dreamweaver CS5(ด้านทักษะ) 4. อธิบายส่วนประกอบของหนา้ ตา่ งโปรแกรมAdobe Dreamweaver CS5(ด้านทักษะ) 5. บอกข้นั ตอนการออกจากโปรแกรม Adobe Dreamweaver CS5(ด้านทักษะ) 6. การเตรียมความพร้อมดา้ นการเตรียม วสั ดุ อุปกรณ์นกั ศึกษาจะตอ้ งทาํ ความสะอาดห้องเรียนและตรง ตามความสามารถของสมาชิกทุกคน มีการจดั เตรียมสถานท่ี ส่ือ วสั ดุ อุปกรณ์ไวอ้ ยา่ งพร้อมเพรียง (ด้านคุณธรรม จริยธรรม/บรู ณาการเศรษฐกิจพอเพยี ง) 7. ความมีเหตุมีผลในการปฏิบตั ิงาน ตามหลกั ปรัชญาของเศรษฐกิจพอเพียงนกั ศึกษาจะตอ้ งมี ทกั ษะในการ เรียนรู้ เลือกใชส้ ื่อเทคโนโลยสี ารสนเทศอยา่ งคุม้ ค่าและประหยดั (ด้านคุณธรรม จริยธรรม/บูรณาการเศรษฐกิจ พอเพยี ง)

เนื้อหาสาระการสอน/การเรียนรู้• ด้านความรู้(ทฤษฎ)ี คุณสมบัติของโปรแกรม Adobe Dreamweaver CS5 (จุดประสงค์เชิงพฤติกรรมข้อที่ 1) Adobe Dreamweaver เป็นโปรแกรมสาํ หรับพฒั นาระบบเวบ็ ไซต์ เป็นโปรแกรมประเภท “WYSIWYG”What You See Is What You Get คือเม่ือมีการจดั วางขอ้ ความ หรือ รูปภาพลงไปโปรแกรมจะทาํ การเขียนโคด้HTML ใหโ้ ดยอตั โนมตั ิ ตามการจดั วางน้นั โดยท่ีผพู้ ฒั นาไมต่ อ้ งเขียนโคด้ คาํ ส่งั HTML เลย ทาํ ใหผ้ พู้ ฒั นามีเวลาในการจดั ตกแตง่ องคป์ ระกอบของเวบ็ ไซตใ์ หส้ วยงามยง่ิ ข้ึนได้ ซ่ึงโปรแกรมน้ี มีคุณสมบตั ิสนบั สนุนให้ผพู้ ฒั นาสามารถออกแบบดว้ ยเคร่ืองมือตา่ ง ๆ ท่ีชุดโปรแกรมไดจ้ ดั เตรียมมาใหแ้ ละสามารถเขียนชุดคาํ สง่ั ควบคู่กบั การพฒั นาตลอดจนสามารถพฒั นาเป็ นเวบ็ แอพลิเคชน่ั โปรแกรมน้ีไดร้ ับความนิยมอยา่ งมากเน่ืองจากมีคุณสมบตั ิเด่นคือใชง้ านง่าย มีเคร่ืองมือที่สนบั สนุนในการพฒั นามากมาย ท้งั สามารถจดั การขอ้ ความ รูปภาพกราฟิ ก ตาราง แบบฟอร์มขอ้ มูล มลั ติมีเดีย รวมท้งั สามารถพฒั นาองคป์ ระกอบต่าง ๆ เพือ่ ใชส้ าํ หรับโตต้ อบกบั ผเู้ ยย่ี มชมเวบ็ ไซตไ์ ดง้ ่าย โดยผใู้ ชไ้ มจ่ าํ เป็ นตอ้ งเขียนชุดคาํ ส่งั ภาษา HTML, PHP, JavaScript, และภาษาอื่น ๆเพอื่ สร้างเป็ นเวบ็ เพจ ดงั น้นั โปรแกรมน้ีจึงเหมาะกบั ผเู้ ร่ิมตน้ และผใู้ ชท้ วั่ ๆ ไป นอกจากน้นั ยงั มีคุณสมบตั ิข้นั สูงอีกมากมายที่เหมาะสาํ หรับผูท้ ่ีจะพฒั นาระบบเวบ็ ไซตอ์ ยา่ งมืออาชีพดว้ ยเช่นกนั คุณสมบตั ิเด่นของโปรแกรมAdobe Dreamweaver CS5 ที่น่าสนใจมีดงั น้ี 1. การติดต้งั เวบ็ ไซตอ์ ยา่ งเรียบง่าย ทาํ ใหผ้ พู้ ฒั นาเวบ็ ไซตส์ ามารถจดั การกบั เน้ือหาเวบ็ ไซตไ์ ดอ้ ยา่ งง่ายดายและรวดเร็วข้ึนโดยท่ีไม่ตอ้ งเขียนชุดคาํ ส่งั หรือกรอกขอ้ มูลมากมายเหมือนรุ่นที่ผา่ น ๆ มา 2. มี CSS Layouts เริ่มตน้ ช่วยในการเขียน CSS Style ไดต้ ามมาตรฐานที่กาํ หนดในการพฒั นาระบบเวบ็ ไซต์ 3. Live View โดยสามารถท่ีจะใชห้ นา้ ต่าง Live View ในการทดสอบชุดคาํ ส่ัง PHP ซ่ึงถือวา่ เป็ น Side ServerScript ได้ หรือสามารถทดสอบการแสดงผลของ Flash ,VDOรวมท้งั ชุดคาํ ส่ัง Script ต่าง ๆ ไดอ้ ยา่ งง่ายดายเหมือนการทดสอบการแสดงผลของภาษา HTML 4. Code Hinting สามารถบอกคาํ ใบใ้ นการพฒั นาเวบ็ ไซตท์ ่ีใชช้ ุดคาํ สั่งต่าง ๆ ในการพฒั นาเช่น PHP, Script,HTML เป็นตน้ ถือวา่ เป็นเคร่ืองมือท่ีช่วยผพู้ ฒั นาเวบ็ ไซตใ์ ชช้ ุดคาํ ส่งั ต่าง ๆ ไดอ้ ยา่ งง่ายดายข้ึน 5. รองรับ CSS Adobe Dreamweaver CS5 สามารถจดั การแสดงผลหรือไม่แสดงผลโดยใชโ้ ปรแกรมAdobeDreamweaver CS5 โดยไม่ตอ้ งอาศยั การแสดงผลโดยใช้ โปรแกรม Web Browser ไดเ้ ลย 6. สามารถทาํ งานร่วมกบั Adobe Browser Lab โดยผูพ้ ฒั นาสามารถพฒั นาเวบ็ ไซตข์ ้ึนในสิ่งแวดลอ้ มของWeb Browser ต่าง ๆ ในแต่ละรุ่น เช่น Firefox, Internet Explorer, Google Chrome หรืออ่ืน ๆ ดว้ ย CS Live ที่สามารถทดสอบตวั ไดนามิกส์ท้งั ท่ีเป็นเวบ็ ไซตท์ ี่แสดงผลในอินเตอร์เน็ตหรือเวบ็ ไซตท์ ี่กาํ ลงั พฒั นาอยใู่ นเครื่องท่ียงั ไมอ่ พั ข้ึนสู่เคร่ือง Web server ก็สามารถใช้ Adobe Brower Lab ได้

• ด้านทกั ษะ(ปฏบิ ัต)ิการติดต้งั โปรแกรม Adobe Dreamweaver CS5 (จดุ ประสงค์เชิงพฤติกรรมข้อท่ี 2) การติดต้งั โปรแกรม Adobe Dreamweaver Cs5 มีข้นั ตอนการติดต้งั ดงั น้ี 1. ใส่แผน่ โปรแกรมติดต้งั โปรแกรม Adobe Dreamweaver Cs5 ไวใ้ นไดร์ฟซีดีรอม 2. ดบั เบิลคลิกไฟลต์ ิดต้งั โปรแกรม Adobe Dreamweaver CS5 3. โปรแกรมจะเริ่มทาํ การติดต้งั 4. เขา้ สู่ข้นั ตอนการติดต้งั จะหนา้ จอ License Agreement หรือสัญญาอนุญาตใหใ้ ชซ้ อฟตแ์ วร์ของเจา้ ของ ผลิตภณั ฑใ์ หอ้ ่านรายละเอียดใหค้ รบถว้ นสมบูรณ์ และกด ยอมรับ )Accept( 5. จะปรากฏหนา้ จอเพ่อื ใหใ้ ส่ Serial Number เม่ือใส่ Serial Number เรียบร้อยแลว้ จะปรากฏป่ ุมใหเ้ ลือก ภาษา ใหเ้ ลือก English International แลว้ คลิกป่ ุมถดั ไป )Next) 6. จะปรากฏหนา้ จอโดยผใู้ ชส้ ามารถเลือกไดใ้ หต้ ิดต้งั โปรแกรมอะไรไดบ้ า้ ง หรือสามารถเลือกติดต้งั โปรแกรมท้งั ชุดของ Adobe และเลือกไดร์ฟที่จะเก็บโปรแกรมในกรณีน้ีเลือกเป็นไดร์ฟC:\Program Files\Adobe แลว้ คลิกติดต้งั )Install) 7. จะแสดงหนา้ จอสถานะของการติดต้งั โปรแกรม รอจนกระทง่ั ติดต้งั โปรแกรมสาํ เร็จ 8. เมื่อติดต้งั โปรแกรมเสร็จจะปรากฏ ดงั รูป คลิกป่ ุม Next จะแสดงขอ้ ความเพ่ือบอกคุณสมบตั ิของโปรแกรมที่ใชค้ ลิกที่ป่ ุม Done เพอื่ สิ้นสุดการติดต้งั โปรแกรมการเข้าสู่โปรแกรม Adobe Dreamweaver CS5 (จดุ ประสงค์เชิงพฤติกรรมข้อท่ี 3) การเรียกใชง้ านโปรแกรม Adobe Dreamweaver CS5 มีข้นั ตอนดงั น้ี 1. คลิกที่ป่ ุม Start >All Programs >Adobe Master Collection CS5 >Adobe Dreamweaver CS5 2. จะแสดงหนา้ จอ Welcome Screen ของโปรแกรม Adobe Dreamweaver CS5ส่วนประกอบของหน้าต่างโปรแกรม Adobe Dreamweaver CS5 (จดุ ประสงค์เชิงพฤติกรรมข้อท่ี 4) โปรแกรม Adobe Dreamweaver CS5 มีส่วนประกอบท่ีสาํ คญั คือ หนา้ จอของการออกแบบ DesignView และหนา้ จอการแสดงผล สาํ หรับหนา้ จอการออกแบบมีส่วนประกอบดงั น้ี • แถบคาํ ส่งั )Menu Bar) เป็นแถบท่ีใชเ้ กบ็ คาํ สง่ั ท้งั หมดของโปรแกรมโดยจะแบ่งคาํ ส่ังท้งั หมดออกเป็ นหมวดหมู่ เพื่อใหส้ ะดวกตอ่ การใชง้ านซ่ึงภายในแตล่ ะหมวดหมูข่ องคาํ ส่งั จะประกอบไปดว้ ยคาํ ส่งั ยอ่ ยๆ ท่ีเก่ียวขอ้ งกนั • แถบเครื่องมือ )Tool Bar) คือแถบเครื่องมือที่รวบรวมป่ ุมคาํ ส่งั ที่จาํ เป็นตอ้ งใชง้ านบอ่ ย ๆ เอาไว้เพื่อใหผ้ ใู้ ชง้ านเลือกใชไ้ ดอ้ ยา่ งสะดวก • แถบวตั ถุ )Object Palette) เป็นกลุ่มเคร่ืองมือต่างๆ ที่ใชใ้ นการควบคุมวตั ถุบนชิ้นงาน เน้ือหาเวบ็เช่น เส้นกราฟิ ก )Horizontal Rule), ตาราง, รูปภาพ,วดี ีโอ,เลเยอร์ )Layer)เป็นตน้

• แถบแสดงสถานะ )Status Bar) จะแสดงสถานะของการทาํ งานต่างๆของเวบ็ เพจ • แถบควบคุมการทาํ งาน )Properties Palette) เป็นรายการท่ีปรับเปลี่ยนได้ ตามลกั ษณะการเลือกขอ้ มูล เช่น หากเลือกท่ีจะพมิ พ์ หรือแกไ้ ขเน้ือหา รายการก็จะเป็น ส่วนทาํ งานท่ีเก่ียวกบั อกั ษร, การจดั ยอ่หนา้ ขอ้ ความ ถา้ เลือกท่ีรูปภาพ รายการในแถบน้ี กจ็ ะเป็ นคาํ สง่ั ต่างๆ ที่เกี่ยวขอ้ งกบั การควบคุมเร่ืองรูปภาพ • ส่วนของ Panel Group เป็นกลุ่มของแถบเครื่องมือสาํ หรับผพู้ ฒั นาเวบ็ เพจท่ีสามารถเรียกใชง้ านได้อยา่ งรวดเร็ว เพอื่ ใหเ้ กิดความสะดวกในการสร้าง Application บนอินเทอร์เน็ต เช่น การแทรก Code ของJavaScript และ VBScript ลงในเวบ็ เพจไดอ้ ยา่ งง่ายๆ โดยสามารถเรียกใชง้ านไดจ้ าก Panel Group หนา้ ตา่ งการแสดงผล )Windows Document) คือส่วนที่ใชส้ าํ หรับแสดงเน้ือหา และจดั องคป์ ระกอบของเวบ็ เพจการออกจากโปรแกรม Adobe Dreamweaver CS5 (จดุ ประสงค์เชิงพฤติกรรมข้อท่ี 4) การออกจากโปรแกรม Adobe Dreamweaver CS5 ผใู้ ชส้ ามารถออกจากโปรแกรมได้ 3 วธิ ีดงั น้ี 1 การออกจากโปรแกรมโดยใช้เมนู คลิกที่เมนู File > Exit โปรแกรมจะถูกปิ ดลง 2 การออกจากโปรแกรมโดยใช้ป่ ุม Closeด้านการปฏบิ ัต/ิ ทกั ษะ 1. แบบฝึกหดั ทา้ ยบทที่ 3 2. กิจกรรมการเรียนรู้• ด้านคุณธรรม/จริยธรรม/จรรยาบรรณ/บูรณาการเศรษฐกจิ พอเพยี ง (จุดประสงค์เชิงพฤติกรรมข้อท6ี่ -7) 6. การเตรียมความพร้อมดา้ นการเตรียม วสั ดุ อุปกรณ์นกั ศึกษาจะตอ้ งทาํ ความสะอาดห้องเรียนและตรงตามความสามารถของสมาชิกทุกคน มีการจดั เตรียมสถานท่ี สื่อ วสั ดุ อุปกรณ์ไวอ้ ยา่ งพร้อมเพรียง(ด้านคุณธรรม จริยธรรม/บรู ณาการเศรษฐกิจพอเพยี ง) 7. ความมีเหตุมีผลในการปฏิบตั ิงาน ตามหลกั ปรัชญาของเศรษฐกิจพอเพียงนกั ศึกษาจะตอ้ งมี ทกั ษะในการเรียนรู้ เลือกใชส้ ่ือเทคโนโลยสี ารสนเทศอยา่ งคุม้ ค่าและประหยดั (ด้านคุณธรรม จริยธรรม/บูรณาการเศรษฐกิจพอเพียง)

กจิ กรรมการเรียนการสอนหรือการเรียนรู้ข้นั ตอนการสอนหรือกจิ กรรมของครู ข้นั ตอนการเรียนรู้หรือกจิ กรรมของนักเรียน1. ข้ันนําเข้าสู่บทเรียน (15 นาท)ี 1. ข้ันนําเข้าสู่บทเรียน(15 นาท)ี1. ผสู้ อนจดั เตรียมเอกสาร พร้อมกบั แนะนาํ 1. ผเู้ รียนเตรียมอุปกรณ์และ ฟังครูผสู้ อนแนะนาํรายวชิ า วธิ ีการใหค้ ะแนนและวิธีการเรียน เรื่อง การ รายวิชา วิธีการให้คะแนนและวิธีการเรียนเร่ือง การติดต้งั และใช้งานโปรแกรม Abode Dreamweaver ติดต้งั และใชง้ านโปรแกรม Abode Dreamweaver CS5CS5 2. ผูเ้ รียนทาํ ความเขา้ ใจเก่ียวกบั จุดประสงคก์ าร2. ผูส้ อนแจง้ จุดประสงคก์ ารเรียนของหน่วย เรียนของหน่วยเรียนท่ี 3 และการให้ความร่วมมือในเรียนที่ 3และขอให้ผู้เรียนร่วมกันทาํ กิจกรรมการ การทาํ กิจกรรม 3. ผเู้ รียนแสดงความรู้ว่า การติดต้งั โปรแกรมเรียนการสอน3. ผูส้ อนให้ผูเ้ รียนแสดงความรู้ โดยต้งั Adobe Dreamweaver CS5 ทาํ อยา่ งไร พร้อมให้เหตุผลคาํ ถามวา่ การติดต้งั โปรแกรม Adobe Dreamweaver ประกอบCS5 ทาํ อยา่ งไร พร้อมใหเ้ หตุผลประกอบ2. ข้ันให้ความรู้ (155 นาท)ี 2. ข้นั ให้ความรู้(155 นาท)ี1. ผูส้ อนทดสอบความรู้ความเข้าใจเก่ียวกับ 1. ผูเ้ รียนตอบคาํ ถามจากผูส้ อน เพื่อแสดงความรู้ และความเขา้ ใจก่อนการเรียน ชนิดขอ้ มูลชนิดขอ้ มูล โดยการถาม – ตอบ 2. ผูส้ อนอธิบายเน้ือหาเกี่ยวกับบทเรียนวิชา 2. ผูเ้ รียนศึกษาบทเรียนวิชาการสร้างเว็บไซต์การสร้างเวบ็ ไซต์ หน่วยที่ 3 เรื่อง การติดต้งั และใช้ หน่วยท่ี 3 เร่ือง การติดต้งั และใช้งานโปรแกรมงานโปรแกรม Abode Dreamweaver CS5 และให้ Abode Dreamweaver CS5และศึกษาเอกสารผเู้ รียนศึกษาเอกสารประกอบการสอน หน่วยที่ 3 ประกอบการสอน หน่วยที่ 3 3. ผู้สอนและผู้เรี ยนร่ วมกันอธิบายพร้อม 3. ผเู้ รียนอธิบายและยกตวั อยา่ งถึง การติดต้งั และยกตวั อยา่ งถึงการติดต้งั และใชง้ านโปรแกรม Abode ใชง้ านโปรแกรม Abode Dreamweaver CS5 ตามท่ีได้Dreamweaver CS5ตามที่ได้ศึกษาจากบทเรียน ศึกษาจากบทเรียนคอมพวิ เตอร์ช่วยสอนคอมพิวเตอร์ช่วยสอน3. ข้ันประยกุ ต์ใช้ (155 นาท)ี 3. ข้นั ประยกุ ต์ใช้ (155 นาท)ี1. ผสู้ อนใหผ้ เู้ รียนทาํ แบบฝึกหดั ทา้ ยบทท่ี 3 1. ผเู้ รียนทาํ แบบฝึกหดั ทา้ ยบทที่ 3

กจิ กรรมการเรียนการสอนหรือการเรียนรู้ข้นั ตอนการสอนหรือกจิ กรรมของครู ข้นั ตอนการเรียนรู้หรือกจิ กรรมของนักเรียน1. ผู้สอนให้ผู้เรี ยนแบ่งกลุ่ม ๆ ละเท่า ๆ กัน 2. ผเู้ รียนแบง่ กลุ่ม ๆ ละเทา่ ๆ กนั ทาํ การศึกษาทําการศึกษาเร่ื องการติดต้ังและใช้งานโปรแกรม เร่ืองการติดต้งั และใชง้ านโปรแกรม AbodeAbode Dreamweaver CS5 แลว้ ปฏิบตั ิตาม Dreamweaver CS5 แลว้ ปฏิบตั ิตาม4. ข้ันสรุปและประเมนิ ผล(155 นาท)ี 4. ข้นั สรุปและประเมินผล (155 นาท)ี 1. ผสู้ อนและผเู้ รียนร่วมกนั สรุปเน้ือหาที่ไดเ้ รียน1. ผูส้ อนและผูเ้ รียนร่วมกนั สรุปเน้ือหาที่ได้ เพือ่ ใหม้ ีความเขา้ ใจในทิศทางเดียวกนัเรียนใหม้ ีความเขา้ ใจในทิศทางเดียวกนั 2. ผูเ้ รียนศึกษาเพิ่มเติมนอกห้องเรียน ด้วย2. ผูส้ อนให้ผเู้ รียนศึกษาเพิ่มเติมนอกหอ้ งเรียน บทเรียนคอมพวิ เตอร์ช่วยสอนท่ีจดั ทาํ ข้ึนดว้ ยบทเรียนคอมพวิ เตอร์ช่วยสอนที่จดั ทาํ ข้ึน(บรรลุจุดประสงค์เชิงพฤติกรรมข้อที่ 1-8) (บรรลจุ ุดประสงค์เชิงพฤติกรรมข้อที่ 1-8) (รวม 480 นาที หรือ 8คาบเรียน)

งานทมี่ อบหมายหรือกจิ กรรมการวดั ผลและประเมนิ ผล ก่อนเรียน 1. จดั เตรียมเอกสาร สื่อการเรียนการสอนหน่วยท่ี 3 2. ทาํ ความเขา้ ใจเก่ียวกบั จุดประสงคก์ ารเรียนของหน่วยที่ 3และใหค้ วามร่วมมือในการทาํ กิจกรรมใน หน่วยที่ 3 3. ตอบคาํ ถามก่อนเรียน โดยการถาม – ตอบ หน่วยท่ี 3 ขณะเรียน 1. ปฏิบตั ิตามใบความรู้ท่ี 3เรื่อง การติดต้งั และใชง้ านโปรแกรม Abode Dreamweaver CS5 2. ร่วมกนั สรุปข้นั ตอน “การติดต้งั และใชง้ านโปรแกรม Abode Dreamweaver CS5” 3. ร่วมกนั ทาํ กิจกรรมการเรียนรู้ หลงั เรียน 1. ทาํ แบบฝึกหดั ทา้ ยบทท่ี 3 2. ทาํ แบบประเมินการเรียนรู้ คาํ ถาม1.โปรแกรม Adobe Dreamweaver CS5 คือโปรแกรมประเภทใด สามารถทาํ อะไรไดบ้ า้ ง2. จงบอกคุณสมบตั ิเด่นท่ีน่าสนใจของโปรแกรม Adobe Dreamweaver CS53. จงบอกข้นั ตอนการติดต้งั โปรแกรม Adobe Dreamweaver CS54. จงบอกข้นั ตอนการเขา้ สู่โปรแกรม Adobe Dreamweaver CS55. หนา้ จอการแสดงผล Welcome Screen ของโปรแกรม Adobe Dreamweaver CS5 ประกอบดว้ ยอะไรบา้ ง6. ส่วนประกอบของหนา้ ตา่ งโปรแกรม Adobe Dreamweaver CS5 ประกอบดว้ ยอะไรบา้ ง7. หนา้ จอการแสดงผลมีมุมมองการทาํ งานก่ีแบบ อะไรบา้ ง8. การออกจากโปรแกรมมีก่ีวธิ ี อะไรบา้ งผลงาน/ชิ้นงาน/ความสําเร็จของผ้เู รียน 1. กิจกรรม “การติดต้งั โปรแกรม Abode Dreamweaver CS5”

สมรรถนะทพ่ี งึ ประสงค์ ผเู้ รียนสร้างความเขา้ ใจเกี่ยวกบั ชนิดขอ้ มูล 1. วเิ คราะห์และตีความหมาย 2. ต้งั คาํ ถาม 3. อภิปรายแสดงความคิดเห็นระดมสมอง 4. การประยกุ ตค์ วามรู้สู่งานอาชีพสมรรถนะการสร้างค่านิยม การปลูกฝังใหม้ ีความรับผดิ ชอบ มีความคิดริเร่ิมสร้างสรรค์ และมีความซ่ือสัตยใ์ นอาชีพของตนสมรรถนะการปฏิบัตงิ านอาชีพ 1. นาํ ความรู้เก่ียวกบั ชนิดขอ้ มูล ไปประยกุ ตใ์ ชใ้ นการดาํ เนินชีวติ ประจาํ วนัสมรรถนะการขยายผล ความสอดคล้อง ชนิดขอ้ มูล ทาํ ให้ผูเ้ รียนมีความรู้เพ่ิมข้ึน เมื่อผูเ้ รียนได้เรียนรู้ทาํ ให้มีความรู้ในเร่ืองพ้ืนฐานการเขียนโปรแกรมคอมพิวเตอร์มากข้ึน

สื่อการเรียนการสอน/การเรียนรู้สื่อส่ิงพมิ พ์ 1. เอกสารประกอบการสอนวิชา การสร้างเวบ็ ไซต์ (ใช้ประกอบการเรียนการสอนจุดประสงค์เชิงพฤติกรรมขอ้ ท่ี 1-8)2. ใบความรู้และใบงานสื่อโสตทศั น์ (ถ้าม)ี 1. บทเรียนคอมพวิ เตอร์ช่วยสอน เร่ืองการติดต้งั โปรแกรม Abode Dreamweaver CS5สื่อของจริง การติดต้งั โปรแกรม Adobe Dreamweaver CS5

แหล่งการเรียนรู้ในสถานศึกษา 1. หอ้ งสมุดวทิ ยาลยั 2. หอ้ งปฏิบตั ิการคอมพวิ เตอร์ ศึกษาหาขอ้ มูลทางอินเทอร์เน็ต นอกสถานศึกษาผปู้ ระกอบการ สถานประกอบการ ในทอ้ งถ่ิน เวบ็ ไซต์การบูรณาการ/ความสัมพนั ธ์กบั วชิ าอื่น1. บูรณาการกบั วชิ าชีวติ และวฒั นธรรมไทย ดา้ นการพูด การอ่าน การเขียนและการฝึ กปฏิบตั ิตนทางสังคมดา้ นการเตรียมความพร้อม ความรับผดิ ชอบ และความสนใจใฝ่ รู้2. บูรณาการกบั วชิ า ภาษาองั กฤษ การใชค้ าํ ศพั ท์ และความหมาย3. บูรณาการกบั วชิ าภาษาไทย การใชภ้ าษา การเขียนสรุปใจความสาํ คญั

การประเมนิ ผลการเรียนรู้ • หลกั การประเมินผลการเรียนรู้ ก่อนเรียน 1. ตรวจแบบทดสอบก่อนเรียน ขณะเรียน 1. สังเกตการทาํ งานกลุ่ม หลงั เรียน 1. ตรวจแบบฝึกหดั ทา้ ยบท 2. สรุปผลการรายงานหนา้ ช้นั เรียนผลงาน/ชิ้นงาน/ผลสําเร็จของผ้เู รียน ตรวจผลงาน กิจกรรม “การติดต้งั โปรแกรม Abode Dreamweaver CS5”รายละเอยี ดการประเมนิ ผลการเรียนรู้• จุดประสงคเ์ ชิงพฤติกรรม ขอ้ ที่ 1 บอกคุณสมบตั ิของโปรแกรม Adobe Dreamweaver CS5ได้1. วธิ ีการประเมิน : ทดสอบ2. เคร่ืองมือ : แบบทดสอบ3. เกณฑก์ ารใหค้ ะแนน:บอกคุณสมบตั ิของโปรแกรม Adobe Dreamweaver CS5ได้ จะได้ 1• จุดประสงคเ์ ชิงพฤติกรรม ขอ้ ท่ี 2 สามารถติดต้งั โปรแกรม Adobe Dreamweaver CS5ได้1. วธิ ีการประเมิน : ทดสอบ2. เครื่องมือ : แบบทดสอบ : สามารถติดต้งั โปรแกรม Adobe Dreamweaver CS51 คะแนน3. เกณฑก์ ารใหค้ ะแนน• จุดประสงคเ์ ชิงพฤติกรรม ขอ้ ที่ 3 บอกข้นั ตอนการเขา้ สู่โปรแกรม Adobe Dreamweaver CS5 ได้ 1. วธิ ีการประเมิน : ทดสอบ 2. เครื่องมือ: แบบทดสอบเกณฑก์ ารใหค้ ะแนน: บอกข้นั ตอนการเขา้ สู่โปรแกรม Adobe Dreamweaver CS5 จะได้ 1 คะแนน

• จุดประสงคเ์ ชิงพฤติกรรม ขอ้ ที่4 อธิบายส่วนประกอบของหนา้ ตา่ งโปรแกรมAdobe DreamweaverCS5ได้1. วธิ ีการประเมิน : ทดสอบ2. เครื่องมือ: แบบทดสอบ3. เกณฑก์ ารใหค้ ะแนน: อธิบายส่วนประกอบของหนา้ ตา่ งโปรแกรมAdobe Dreamweaver CS5ได้จะได้ 1 คะแนน• จุดประสงคเ์ ชิงพฤติกรรม ขอ้ ที่5 บอกข้นั ตอนการออกจากโปรแกรม Adobe Dreamweaver CS5ได้ 1. วธิ ีการประเมิน : ทดสอบ 2. เครื่องมือ: แบบทดสอบ 3. เกณฑก์ ารใหค้ ะแนน: บอกข้นั ตอนการออกจากโปรแกรม Adobe Dreamweaver CS5ได้ จะได้ 1• จุดประสงคเ์ ชิงพฤติกรรม ขอ้ ที่ 6 การเตรียมความพร้อมดา้ นการเตรียม วสั ดุ อุปกรณ์นกั ศึกษาจะตอ้ ง กระจายงานไดท้ ว่ั ถึง และตรงตามความสามารถของสมาชิกทุกคน มีการจดั เตรียมสถานที่ ส่ือ วสั ดุ อุปกรณ์ไวอ้ ยา่ งพร้อมเพรียง1. วธิ ีการประเมิน : ตรวจผลงาน2. เคร่ืองมือ : แบบประเมินกระบวนการทาํ งานกลุ่ม3. เกณฑ์การให้คะแนน : การเตรียมความพร้อมด้านการเตรียม วสั ดุ อุปกรณ์นักศึกษา จะตอ้ งกระจายงานไดท้ ว่ั ถึง และตรงตามความสามารถของ สมาชิกทุกคน มีการจดั เตรียมสถานที่ ส่ือ วสั ดุ อุปกรณ์ไว้ อยา่ งพร้อมเพรียงจะได้ 2 คะแนนจุดประสงคเ์ ชิงพฤติกรรม ขอ้ ท่ี 7 การเตรียมความพร้อมดา้ นการเตรียม วสั ดุ อุปกรณ์นกั ศึกษาจะตอ้ งทาํ ความสะอาดห้องเรียนและตรงตามความสามารถของสมาชิกทุกคน มีการจดั เตรียมสถานท่ี สื่อ วสั ดุ อุปกรณ์ไว้อยา่ งพร้อมเพรียง1. วธิ ีการประเมิน : ตรวจผลงาน : แบบประเมินกระบวนการทาํ งานกลุ่ม2. เคร่ืองมือเกณฑก์ ารใหค้ ะแนน : ความมีเหตุมีผลในการปฏิบตั ิงาน ตามหลกั ปรัชญาของเศรษฐกิจพอเพียงนกั ศึกษาจะตอ้ งมี ทกั ษะในการเรียนรู้ เลือกใช้สื่อเทคโนโลยีสารสนเทศอยา่ งคุม้ ค่าและประหยดัจะได้ 2 คะแนน

แบบฝึ กหดั ท้ายบทท่ี 3 1.โปรแกรม Adobe Dreamweaver CS5 คือโปรแกรมประเภทใด สามารถทาํ อะไรไดบ้ า้ ง ……………………………………………………………………………………………………… ……………………………………………………………………………………………………… 2. จงบอกคุณสมบตั ิเด่นที่น่าสนใจของโปรแกรม Adobe Dreamweaver CS5 ……………………………………………………………………………………………………… ……………………………………………………………………………………………………… 3. จงบอกข้นั ตอนการติดต้งั โปรแกรม Adobe Dreamweaver CS5 ……………………………………………………………………………………………………… ……………………………………………………………………………………………………… 4. จงบอกข้นั ตอนการเขา้ สู่โปรแกรม Adobe Dreamweaver CS5 ……………………………………………………………………………………………………… ……………………………………………………………………………………………………… ………………………………………………………………………………………………………5. หนา้ จอการแสดงผล Welcome Screen ของโปรแกรม Adobe Dreamweaver CS5 ประกอบดว้ ยอะไรบา้ ง ……………………………………………………………………………………………………… ……………………………………………………………………………………………………… 6. ส่วนประกอบของหนา้ ตา่ งโปรแกรม Adobe Dreamweaver CS5 ประกอบดว้ ยอะไรบา้ ง ……………………………………………………………………………………………………… ……………………………………………………………………………………………………… ……………………………………………………………………………………………………… 7. หนา้ จอการแสดงผลมีมุมมองการทาํ งานกี่แบบ อะไรบา้ ง ……………………………………………………………………………………………………… ……………………………………………………………………………………………………… ……………………………………………………………………………………………………… 8. การออกจากโปรแกรมมีกี่วธิ ี อะไรบา้ ง ……………………………………………………………………………………………………… ………………………………………………………………………………………………………

แบบประเมินผลการนําเสนอผลงานชื่อกลุ่ม……………………………………………ช้นั ………………………หอ้ ง...........................รายช่ือสมาชิก 1……………………………………เลขท่ี……. 2……………………………………เลขท่ี……. 3……………………………………เลขท่ี……. 4……………………………………เลขท่ี…….ท่ี รายการประเมิน คะแนน ขอ้ คิดเห็น 32 11 เน้ือหาสาระ ความรู้เก่ียวกบั เน้ือหา ความถูกตอ้ ง ปฏิภาณในการตอบ และการแกไ้ ขปัญหาเฉพาะหนา้2 รูปแบบการนาํ เสนอ3 การมีส่วนร่วมของสมาชิกในกลุ่ม4 บุคลิกลกั ษณะ กิริยา ท่าทางในการพูด น้าํ เสียง ซ่ึงทาํ ให้ผูฟ้ ังมีความ สนใจรวม ผปู้ ระเมิน…………………………………………………เกณฑ์ การให้ คะแนน1. เน้ือหาสาระครอบคลุมชดั เจนถูกตอ้ ง 3 คะแนน = มสี าระสาํ คญั ครบถว้ นถูกตอ้ ง ตรงตามจุดประสงค์ 2 คะแนน = สาระสาํ คญั ไมค่ รบถว้ น แต่ตรงตามจุดประสงค์ 1 คะแนน= สาระสาํ คญั ไม่ถูกตอ้ ง ไม่ตรงตามจุดประสงค์2. รูปแบบการนาํ เสนอ 3 คะแนน = มีรูปแบบการนาํ เสนอที่เหมาะสม มีการใชเ้ ทคนิคที่แปลกใหม่ ใชส้ ื่อและเทคโนโลยี ประกอบการ นาํ เสนอที่น่าสนใจ นาํ วสั ดุในทอ้ งถ่ินมาประยกุ ตใ์ ชอ้ ยา่ งคุม้ ค่าและประหยดั คะแนน = มีเทคนิคการนาํ เสนอที่แปลกใหม่ ใชส้ ื่อและเทคโนโลยปี ระกอบการนาํ เสนอท่ีน่าสน ใจ แต่ขาด การประยกุ ตใ์ ช้ วสั ดุในทอ้ งถ่ิน1 คะแนน= เทคนิคการนาํ เสนอไม่เหมาะสม และไมน่ ่าสนใจ3. การมีส่วนร่วมของสมาชิกในกลุ่ม 3 คะแนน= สมาชิกทุกคนมีบทบาทและมีส่วนร่วมกิจกรรมกลุ่ม 2 คะแนน = สมาชิกส่วนใหญม่ บี ทบาทและมีส่วนร่วมกิจกรรมกลุ่ม 1 คะแนน = สมาชิกส่วนนอ้ ยมบี ทบาทและมสี ่วนร่วมกิจกรรมกลุ่ม4. ความสนใจของผฟู้ ัง 3 คะแนน = ผฟู้ ังมากกวา่ ร้อยละ 90 สนใจ และใหค้ วามร่วมมือ 2 คะแนน= ผฟู้ ังร้อยละ 70-90 สนใจ และใหค้ วามร่วมมือ 1 คะแนน= ผฟู้ ังนอ้ ยกวา่ ร้อยละ 70 สนใจ และใหค้ วามร่วมมือ

บันทกึ หลงั การสอน หน่วยที่ 3 การตดิ ต้ังและใช้งานโปรแกรม ADOBE DREAMWEAVER CS5ผลการใช้แผนการเรียนรู้ 1. เน้ือหาสอดคลอ้ งกบั จุดประสงคเ์ ชิงพฤติกรรม 2. สามารถนาํ ไปใชป้ ฏิบตั ิการสอนไดค้ รบตามกระบวนการเรียนการสอน 3. ระยะเวลาท่ีจดั ไวใ้ นแผนการเรียนรู้มีความเหมาะสมผลการเรียนของนักเรียน 1. นกั ศึกษาส่วนใหญ่มีความสนใจใฝ่ รู้ เขา้ ใจในบทเรียน อภิปรายตอบคาํ ถามในกลุ่ม และร่วมกนั ปฏิบตั ิใบงานท่ีไดร้ ับมอบหมาย 2. นกั ศึกษากระตือรือร้นและรับผดิ ชอบในการทาํ งานกลุ่มเพื่อใหง้ านสาํ เร็จทนั เวลาท่ีกาํ หนด 3. นกั ศึกษาเลือกสามารถนาํ ความรู้ไปใชไ้ ดจ้ ริงในชีวติ ประจาํ วนัผลการสอนของครู 1. สอนเน้ือหาไดค้ รบตามหลกั สูตร 2. แผนการสอนและวธิ ีการสอนครอบคลุมเน้ือหาการสอนทาํ ใหผ้ สู้ อนสอนไดอ้ ยา่ งมน่ั ใจ 3. สอนไดท้ นั ตามเวลาท่ีกาํ หนดลงชื่อ............................................... ลงช่ือ....................................................... (....................................) (...............................) รองผอู้ าํ นวยการฝ่ ายวชิ าการ ครูผสู้ อน