1. ก
คานา
พระราชบัญญัติการศึกษาแห่งชาติ พ.ศ.2542 กาหนดให้จัดกิจกรรมการเรียนรู้โดยยึดผู้เรียนเป็น
ศูนย์ ซึ่งมีการสนับสนุนให้ผู้เรียนได้ฝึกทักษะโดยผ่านกระบวนการเรียนที่หลากหลายส่งเสริมและพัฒนาให้
ผู้เรียนสามารถใช้ทักษะทางภาษาในการสื่อสารในสถานการณ์ต่างๆใน ชีวิตประจาวันได้อย่างมีศักยภาพ
หลักสูตรการศึกษาขั้นพื้นฐาน พุทธศักราช 2544 เป็นหลักสูตรการศึกษาเพื่อให้การจัดการศึกษา
ยึดหลักความมีเอกภาพด้านนโยบายและมีความหลากหลายในการปฏิบัติ กล่าวคือเป็นหลักสูตรแกนกลางที่มี
โครงสร้างหลักสูตรยืดหยุ่น กาหนดจุดหมาย ซึ่งถือเป็นมาตรฐานการเรียนรู้ในภาพรวม ๑๒ ปี สาระการ
เรียนรู้ มาตรฐานการเรียนรู้แต่ละกลุ่ม มาตรฐานการเรียนรู้ช่วงชั้น เป็นช่วงชั้นละ ๓ ปี จัดเฉพาะส่วนที่จา
เป็นสา หรับการพัฒนาคุณภาพชีวิต ความเป็นไทย ความเป็นพลเมืองดีของชาติ การดา รงชีวิตและการ
ประกอบอาชีพ ตลอดจนเพื่อการศึกษาต่อ ให้สถานศึกษาจัดทา สาระในรายละเอียดเป็นรายปีหรือรายภาคให้
สอดคล้องกับสภาพปัญหาในชุมชน สังคม ภูมิปัญญาท้องถิ่น คุณสมบัติอันพึงประสงค์ เพื่อเป็นสมาชิกที่ดี
ของครอบครัว ชุมชน สังคม และประเทศชาติ รวมถึงจัดให้สอดคล้องกับความสามารถ ความถนัด และความ
สนใจของผู้เรียนแต่ละกลุ่มเป้าหมาย และสอดคล้องพระราชบัญญัติการศึกษาแห่งชาติ พ.ศ. 2542 และแก้ไข
เพิ่มเติม (ฉบับที่ 2) พ.ศ. 2545
แผนการจัดการเรียนรู้เล่มนี้ ได้มีการจัดกิจกรรมการเรียนรู้ที่ผู้เรียนมีโอกาสฝึกทักษะแสดงความ
คิดเห็น ปฏิบัติกิจกรรมอย่างอิสระและสร้างสรรค์ มีความสุขในการเรียน สามารถบูรณาการกับกลุ่มสาระ
การเรียนรู้อื่น นาเสนอกิจกรรมนวัตกรรมของท้องถิ่น และพร้อมที่จะก้าวเข้าสู่สังคมโลกอย่างมีคุณภาพ โดย
มีจุดประสงค์การเรียนรู้ที่ระบุสาระและมาตรฐานการเรียนรูช่วงชั้นไว้อย่างชัดเจน
้
สาระที่ 1 การดารงชีวิตและครอบครัว (มาตรฐาน ง 1.1- ง 1.2)
สาระที่ 2 การอาชีพ (มาตรฐาน ง 2.1)
สาระที่ 3 การออกแบบและเทคโนโลยี (มาตรฐาน ง 3.1)
สาระที่ 4 เทคโนโลยีสารสนเทศ (มาตรฐาน ง 4.1)
สาระที่ 5 เทคโนโลยีเพื่อการทางานและอาชีพ (มาตรฐาน ง 5.1)
แผนการจัดการเรียนรู้ของสื่อร่วม 14 หน่วยการเรียนรู้ ซึ่งมีแผนการเรียนรู้จานวน 20 แผน โดยมี
แบบทดสอบประเมินผลก่อนเรียน (Placement Test) ประเมินผลหลังการเรียน (Review Unit และ Review
Test) สาหรับแต่ละช่วง 4 หน่วยการเรียนรู้ ซึ่งผู้สอนสามารถนาไปใช้เพื่อประเมินความก้าวหน้าในการ
เรียนรู้ของนักเรียนได้ นอกจากนั้นยังมีแบบประเมินตนเองที่ช่วยให้นักเรียนประเมินผลการเรียนรู้ของตัว
นักเรียนเอง
ผู้เขียนหวังเป็นอย่างยิ่งว่า แผนการจัดการเรียนรู้เล่มนี้ จะเป็นประโยชน์ต่อการจัดการเรียนการ
สอนเพื่อให้เกิดผลประโยชน์สูงสุดแก่ผู้เรียน และทาให้การเรียนการสอนเป็นไปอย่างมีประสิทธิภาพ

2. ข
(นายไชยวัฒน์ วิเชียรไชย)
ผู้เขียน
คาอธิบายรายวิชา
กลุ่มสาระการเรียนรู้ การงานอาชีพและเทคโนโลยี
รายวิชา การออกแบบเว็บไซต์ดวยโปรแกรม Macromedia Dreamweaver Mx
้ รหัสวิชา ง 30203
ชั้นมัธยมศึกษาปีที่ 3 เวลา 40 ชั่วโมง
รายวิชา การออกแบบเว็บไซต์ ชั้นมัธยมศึกษาปีที่ 3 ศึกษาเกี่ยวกับหลักการสร้างเว็บเพจด้วย
โปรแกรมสาเร็จรูป Macromedia Dreamweaver MX การประยุกต์การสร้างเว็บไซต์ การจัดและการ
ตกแต่งข้อความ การแทรกรูปภาพลงในเว็บเพจ การสร้างตาราง การสร้างจึดเชื่อมโยงในแต่ละหน้า
เว็บเพจ เว็บไซต์ การแบ่งหน้าเว็บเพจเป็นส่วนๆ การสร้างฟอร์มเพื่อรองรับข้อมูลจากผู้ใช้ การ
ประยุกต์สร้างเลเยอร์ในการตกแต่งเอกสารเว็บเพจ การแทรกมัลติมีเดียสื่อต่างๆ ลงในเว็บเพจ การ
จัดการเว็บไซต์ เช่น การขอพื้นที่เพื่อรองรับเว็บไซต์ของเรา การขอขอใช้บริการเสริมต่างๆ การนา
เว็บไซต์ขึ้นสู่อินเตอร์เน็ต เพื่อการตกแต่งเว็บเพจให้สวยงาม

3. ค
มาตรการเรียนรู้และตัวชี้วัด
สาระที่ ๔ : เทคโนโลยีสารสนเทศ
มาตรฐาน ง 4.1 เข้าใจ เห็นคุณค่า และใช้กระบวนการเทคโนโลยีสารสนเทศในการสืบค้นข้อมูล
การเรียนรู้ การสื่อสาร การแก้ปัญหา การทางานและอาชีพอย่างมีประสิทธิภาพ ประสิทธิผล
และมีคุณธรรม
ตัวชี้วัด ง 4.1. ม.3

4. ง
หน่วยการเรียนรู้
กลุ่มสาระการเรียนรู้ การงานอาชีพและเทคโนโลยี
รายวิชา การออกแบบเว็บไต์ดวยโปรแกรม Macromedia Dreamweaver Mx
้ รหัสวิชา ง30203
ชั้นมัธยมศึกษาปีที่ 3 เวลา 40 ชั่วโมง
เวลา
หน่วยการเรียนรู้ ผลการเรียนรู้ที่คาดหวัง
(ชั่วโมง)
หน่วยที่ 1 อินเตอร์เน็ตและ เวิร์ล ไวด์ - อินเตอร์เน็ตและ เวิร์ล ไวด์ เว็บ 2
เว็บ - อธิบายความรู้เบื้องต้นเกี่ยวอินเตอร์เน็ตและ
เวิร์ล ไวด์ เว็บ
หน่วยที่ 2 การติดตั้งโปรแกรม - อธิบายความรู้เบื้องต้นเกี่ยวกับโปรแกรม 2
DreamweaverMX Dreamweaver MX ได้
- ปฏิบัติการติดตั้งโปรแกรม Dreamweaver MX
หน่วยที่ 3 เรื่อง รู้จักกับโปรแกรม - อธิบายความรู้เบื้องต้นเกี่ยวส่วนการทางาน 2
Dreamweaver MX เบื้องต้นในโปรแกรม Dreamweaver
- ปฏิบัติการออกแบบหน้าตาเว็บไซต์
หน่วยที่ 4 เรื่อง การดู Preferences - สามารถปรับตั้งค่า Preferences 2
หน่วยที่ 5 เรื่อง การสร้างตาราง - อธิบายขั้นตอนการสร้างตารางได้โดยใช้ 2
โปรแกรม Dreamweaver MX ได้
- สร้างและแก้ไขตารางเพื่อใช้ในการสร้างสรรค์
เว็บเพจได้
หน่วยที่ 6 เรื่อง การแทรกข้อความ - แทรกข้อความลงในเว็บเพจได้ 2
- แก้ไขข้อความเพื่อใช้ในการสร้างสรรค์เว็บเพจ

5. จ
ได้
เวลา
หน่วยการเรียนรู้ ผลการเรียนรู้ที่คาดหวัง
(ชั่วโมง)
หน่วยที่ 7 เรื่อง การแทรกรูปภาพ - อธิบายรูปแบบต่างๆของไฟล์รูปภาพที่ 2
เหมาะสมสาหรับเว็บเพจได้
- ปฏิบัติการแทรกรูปภาพลงในเว็บเพจได้
หน่วยที่ 8 เรื่อง การเชื่อมโยง - อธิบายรูปแบบการเชื่อมโยงแบบต่างๆได้ 2
- สร้างจุดเชื่อมโยงในรูปแบบต่างๆได้
หน่วยที่ 9 เรื่อง การแทรกไฟล์ 2
- แทรกไฟล์มัลติมีเดียลงในเว็บเพจได้
มัลติมีเดีย
หน่วยที่ 10 เรื่อง การใช้งาน - สามารถการกาหนดพื้นที่แก้ไขได้ใน Template 2
Templates และ Libraries และการสร้าง Template
หน่วยที่ 11 เรื่อง การสร้างแบบฟอร์ม - สามารถการกาหนดพื้นที่แบบฟอร์ม เป็น 10
(Form) ส่วนประกอบหนึ่งบนเว็บเพจ
- สามารถการสร้างปุ่ม Radio เป็น
ส่วนประกอบหนึ่งบนเว็บเพจ
- สามารถสร้าง Scrolling List เป็นส่วนประกอบ
หนึ่งบนเว็บเพจ
- สามารถสร้างป๊อปอัพเมนู (Popup menu) เป็น
ส่วนประกอบหนึ่งบนเว็บเพจ
- สามารถการสร้างปุ่ม (Button)เป็น
ส่วนประกอบหนึ่งบนเว็บเพจ
หน่วยที่ 12 เรื่อง การสร้างเฟรม - สามารถสร้างเฟรม (Frames) เป็น 4
(Frames) ส่วนประกอบหนึ่งบนเว็บเพจ

6. ฉ
- สามารถปรับแต่งคุณสมบัติของเฟรมเซตบน
เว็บเพจ
หน่วยที่ 13 เรื่อง การใส่ Interactive - สามารถใส่ Interactive Page Elements บนเว็บ 4
Page Elements เพจ
- สามารถสร้าง Rollover image บนเว็บเพจ
หน่วยที่ 14 เรื่อง อัพโหลดและ ดูแล - สามารถอัพโหลดและ ดูแลรักษาเว็บไซต์ 2
รักษาเว็บไซต์
โครงสร้างเวลาเรียนและผลการเรียนรู้ที่คาดหวัง
กลุ่มสาระการเรียนรู้ การงานอาชีพและเทคโนโลยี
รายวิชา การออกแบบเว็บไซต์ รหัสวิชา ง30203
ชั้นมัธยมศึกษาปีที่ 3 เวลา 2 ชั่วโมง / สัปดาห์
เวลา
หน่วยการเรียนรู้ ผลการเรียนรู้ที่คาดหวัง
(ชั่วโมง)
หน่วยที่ 1 อินเตอร์เน็ตและ เวิร์ล ไวด์ - อินเตอร์เน็ตและ เวิร์ล ไวด์ เว็บ 2
เว็บ - อธิบายความรู้เบื้องต้นเกี่ยวอินเตอร์เน็ตและ
เวิร์ล ไวด์ เว็บ
หน่วยที่ 2 การติดตั้งโปรแกรม - อธิบายความรู้เบื้องต้นเกี่ยวกับโปรแกรม 2
DreamweaverMX Dreamweaver MX ได้
- ปฏิบัติการติดตั้งโปรแกรม Dreamweaver MX
หน่วยที่ 3 เรื่อง รู้จักกับโปรแกรม - อธิบายความรู้เบื้องต้นเกี่ยวส่วนการทางาน 2
Dreamweaver MX เบื้องต้นในโปรแกรม Dreamweaver
- ปฏิบัติการออกแบบหน้าตาเว็บไซต์
หน่วยที่ 4 เรื่อง การดู Preferences - สามารถปรับตั้งค่า Preferences 2
หน่วยที่ 5 เรื่อง การสร้างตาราง - อธิบายขั้นตอนการสร้างตารางได้โดยใช้ 2
โปรแกรม Dreamweaver MX ได้
- สร้างและแก้ไขตารางเพื่อใช้ในการสร้างสรรค์

7. ช
เว็บเพจได้
หน่วยที่ 6 เรื่อง การแทรกข้อความ - แทรกข้อความลงในเว็บเพจได้ 2
- แก้ไขข้อความเพื่อใช้ในการสร้างสรรค์เว็บเพจ
ได้
เวลา
หน่วยการเรียนรู้ ผลการเรียนรู้ที่คาดหวัง
(ชั่วโมง)
หน่วยที่ 7 เรื่อง การแทรกรูปภาพ - อธิบายรูปแบบต่างๆของไฟล์รูปภาพที่ 2
เหมาะสมสาหรับเว็บเพจได้
- ปฏิบัติการแทรกรูปภาพลงในเว็บเพจได้
หน่วยที่ 8 เรื่อง การเชื่อมโยง - อธิบายรูปแบบการเชื่อมโยงแบบต่างๆได้ 2
- สร้างจุดเชื่อมโยงในรูปแบบต่างๆได้
หน่วยที่ 9 เรื่อง การแทรกไฟล์ 2
- แทรกไฟล์มัลติมีเดียลงในเว็บเพจได้
มัลติมีเดีย
หน่วยที่ 10 เรื่อง การใช้งาน - สามารถการกาหนดพื้นที่แก้ไขได้ใน Template 2
Templates และ Libraries และการสร้าง Template
หน่วยที่ 11 เรื่อง การสร้างแบบฟอร์ม - สามารถการกาหนดพื้นที่แบบฟอร์ม เป็น 10
(Form) ส่วนประกอบหนึ่งบนเว็บเพจ
- สามารถการสร้างปุ่ม Radio เป็น
ส่วนประกอบหนึ่งบนเว็บเพจ
- สามารถสร้าง Scrolling List เป็นส่วนประกอบ
หนึ่งบนเว็บเพจ
- สามารถสร้างป๊อปอัพเมนู (Popup menu) เป็น
ส่วนประกอบหนึ่งบนเว็บเพจ
- สามารถการสร้างปุ่ม (Button)เป็น
ส่วนประกอบหนึ่งบนเว็บเพจ

8. ซ
หน่วยที่ 12 เรื่อง การสร้างเฟรม - สามารถสร้างเฟรม (Frames) เป็น 4
(Frames) ส่วนประกอบหนึ่งบนเว็บเพจ
- สามารถปรับแต่งคุณสมบัติของเฟรมเซตบน
เว็บเพจ
หน่วยที่ 13 เรื่อง การใส่ Interactive - สามารถใส่ Interactive Page Elements บนเว็บ 4
Page Elements เพจ
- สามารถสร้าง Rollover image บนเว็บเพจ
หน่วยที่ 14 เรื่อง อัพโหลดและ ดูแล - สามารถอัพโหลดและ ดูแลรักษาเว็บไซต์ 2
รักษาเว็บไซต์
สารบัญ
เรื่อง หน้า
คานา
คาอธิบายรายวิชา
มาตรฐานการเรียนรู้และตัวชี้วัด
หน่วยการเรียนรู้
โครงสร้างเวลาเรียนและผลการเรียนรู้ที่คาดหวัง
สารบัญ
แผนการจัดการเรียนรู้ที่ 1 เรื่อง อินเตอร์เน็ตและ เวิร์ล ไวด์ เว็บ 1-12
แผนการจัดการเรียนรู้ที่ 2 เรื่อง การติดตั้งโปรแกรม DreamweaverMX 13-25
แผนการจัดการเรียนรู้ที่ 3 เรื่อง รู้จักกับโปรแกรม Dreamweaver MX 26-39
แผนการจัดการเรียนรู้ที่ 4 เรื่อง การดู Preferences 40-50
แผนการจัดการเรียนรู้ที่ 5 เรื่อง การสร้างตาราง 51-60
แผนการจัดการเรียนรู้ที่ 6 เรื่อง การแทรกข้อความ 61-70
แผนการจัดการเรียนรู้ที่ 7 เรื่อง การแทรกรูปภาพ 71-82
แผนการจัดการเรียนรู้ที่ 8 เรื่อง การเชื่อมโยง 83-94
แผนการจัดการเรียนรู้ที่ 9 เรื่อง การแทรกไฟล์มัลติมีเดีย 95-106
แผนการจัดการเรียนรู้ที่ 10 เรื่อง การใช้งาน Templates และ Libraries 107-122
แผนการจัดการเรียนรู้ที่ 11 เรื่อง การสร้างแบบฟอร์ม (Form) 123-138

9. ฌ
แผนการจัดการเรียนรู้ที่ 12 เรื่อง การสร้างปุ่ม Radio 139-149
แผนการจัดการเรียนรู้ที่ 13 เรื่อง การสร้าง Scrolling List 150-160
แผนการจัดการเรียนรู้ที่ 14 เรื่อง การสร้างป๊อปอัพเมนู (Popup menu) 161-170
แผนการจัดการเรียนรู้ที่ 15 เรื่อง การสร้างปุ่ม (Button) 171-181
แผนการจัดการเรียนรู้ที่ 16 เรื่อง การสร้างเฟรม (Frames) 182-198
แผนการจัดการเรียนรู้ที่ 17 เรื่อง การปรับแต่งคุณสมบัติของเฟรมเซต
199-208
แผนการจัดการเรียนรู้ที่ 18 เรื่อง การใส่ Interactive Page Elements 209-220
แผนการจัดการเรียนรู้ที่ 19 เรื่อง การสร้าง Rollover image 221-237
แผนการจัดการเรียนรู้ที่ 20 เรื่อง อัพโหลดและ ดูแลรักษาเว็บไซต์ 238-254