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) ส่วนประกอบหนึ่งบนเว็บเพจ
- สามารถปรับแต่งคุณสมบัติของเฟรมเซตบนเว็บ
เพจ
หน่วยที่ 13 เรื่อง การใส่ Interactive - สามารถใส่ Interactive Page Elements บน 4
Page Elements เว็บเพจ
- สามารถสร้าง Rollover image บนเว็บเพจ
หน่วยที่ 14 เรื่อง อัพโหลดและ ดูแล - สามารถอัพโหลดและ ดูแลรักษาเว็บไซต์ 2
รักษาเว็บไซต์

6. ฉ
โครงสร้างเวลาเรียนและผลการเรียนรู้ที่คาดหวัง
กลุ่มสาระการเรียนรู้ การงานอาชีพและเทคโนโลยี
รายวิชา การออกแบบเว็บไซต์ รหัสวิชา ง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 ได้
- สร้างและแก้ไขตารางเพื่อใช้ในการสร้างสรรค์
เว็บเพจได้
หน่วยที่ 6 เรื่อง การแทรกข้อความ - แทรกข้อความลงในเว็บเพจได้ 2
- แก้ไขข้อความเพื่อใช้ในการสร้างสรรค์เว็บเพจ
ได้

7. ช
เวลา
หน่วยการเรียนรู้ ผลการเรียนรู้ที่คาดหวัง
(ชั่วโมง)
หน่วยที่ 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) ส่วนประกอบหนึ่งบนเว็บเพจ
- สามารถปรับแต่งคุณสมบัติของเฟรมเซตบนเว็บ
เพจ
หน่วยที่ 13 เรื่อง การใส่ Interactive - สามารถใส่ Interactive Page Elements บน 4
Page Elements เว็บเพจ
- สามารถสร้าง Rollover image บนเว็บเพจ
หน่วยที่ 14 เรื่อง อัพโหลดและ ดูแล - สามารถอัพโหลดและ ดูแลรักษาเว็บไซต์ 2
รักษาเว็บไซต์

8. ซ
สารบัญ
เรื่อง หน้า
คานา
คาอธิบายรายวิชา
มาตรฐานการเรียนรู้และตัวชี้วัด
หน่วยการเรียนรู้
โครงสร้างเวลาเรียนและผลการเรียนรู้ที่คาดหวัง
สารบัญ
แผนการจัดการเรียนรู้ที่ 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
แผนการจัดการเรียนรู้ที่ 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