2204 2009 Dreamweaver cs6

คู่มือแผนการสอน
หลักสู ตรประกาศนียบัตรวิชาชีพ(ปวช.) พุทธศักราช 2556
รหัสวิชา 2204-2009 วิชา การสร้ างเว็บไซต์ (ด้ วย Dreamweaver)
คำเตือน
สงวนลิขสิ ทธิ์ ตามกฏหมาย หากผูส้ อนมีความจำเป็ นในการจัดทำแผนการจัดการเรี ยนรู ้ เพื่อพัฒนาศักยภาพการ
เรี ยนรู ้แก่เยาวชน ให้มีคุณภาพของประเทศชาติ กรุ ณาปรับเนื้ อหาให้เหมาะสมกับหลักสู ตร มาตรฐานการเรี ยนรู ้
และแผนจัดการเรี ยนรู ้ ตามความเหมาะสมของสถานศึกษา
แผนจัดการเรียนรู้ แบบบูรณาการ
ชื่อรายวิชา การสร้ างเว็บไซต์ (ด้ วย Dreamweaver) รหัสวิชา 2204-2009
ประกาศนียบัตรวิชาชีพ (ปวช.)
จำนวน 3 หน่ วยกิต จำนวนชั่วโมง รวม 68 ชั่วโมง
---------------------------------------------------------------------------------------------------------------------
จุดประสงค์ รายวิชาเพือ่ ให้
1. มีความรู้ความเข้าใจเกี่ยวกับกระบวนการและโครงสร้างการทำงานของเว็บไซต์
2. เข้าใจโครงสร้างและไวยากรณ์ของโปรแกรมภาษาหรื อกระบวนการใช้เครื่ องมือการสร้าง
เว็บไซต์
3. ออกแบบและกำหนดส่ วนประกอบที่จ ำเป็ นของเว็บเพจ
4. ใช้โปรแกรมภาษาหรื อโปรแกรมสำเร็ จรู ปสำหรับสร้างเว็บไซต์
5. ติดตั้งและอัพโหลด (Upload) เว็บไซต์
6. มีคุณธรรม จริ ยธรรม และค่านิยมที่ดีในการใช้คอมพิวเตอร์
สมรรถนะรายวิชา
1. แสดงความรู้เกี่ยวกับกระบวนการโครงสร้างการทำงานและไวยากรณ์ของโปรแกรมภาษา
ในการสร้างเว็บไซต์
2. ประยุกต์ใช้โปรแกรมภาษาหรื อโปรแกรมสำเร็ จรู ปสำหรับสร้างเว็บไซต์และการติดตั้งและ
อัพโหลด (Upload) เว็บไซต์
คำอธิบายรายวิชา
ศึกษาและปฏิบตั ิเกี่ยวกับกระบวนการและโครงสร้างการทำงานของเว็บไซต์ การออกแบบ
เว็บไซต์ การสร้างเว็บไซต์ดว้ ยโปรแกรมภาษาหรื อโปรแกรมสำเร็ จรู ปหรื อโปรแกรมระบบ CMS
(Content Management System) การทดสอบการทำงานของเว็บไซต์ และการ Upload เว็บไซต์
สารบัญ
เรื่ อง หน้า
ตารางวิเคราะห์ค ำอธิบายรายวิชา
ตารางวิเคราะห์การประเมินผลตามสภาพจริ ง
แผนจัดการเรี ยนรู้
กิจกรรมการเรี ยนรู้
แผนจัดการเรี ยนรู้ เรื่ อง หลักการสร้างเว็บไซต์และรู ้จกั กับ Dreamweaver
เฉลยแบบฝึ กหัด หน่วยที่ 1
แผนจัดการเรี ยนรู้ เรื่ อง การสร้างเว็บไซต์
เฉลยแบบฝึ กหัด หน่วยที่2
แผนจัดการเรี ยนรู้ เรื่ อง การสร้างข้อความ
เฉลยแบบฝึ กหัด บทที่ 3
แผนจัดการเรี ยนรู้ เรื่ อง การตกแต่งด้วยภาพ
แผนจัดการเรี ยนรู้ เรื่ อง การใส่ ตาราง
แผนจัดการเรี ยนรู้ เรื่ อง การเชื่อมโยง
แผนจัดการเรี ยนรู้ เรื่ อง การออกแบบเลย์เอาท์
แผนจัดการเรี ยนรู้ เรื่ อง การสร้างเฟรมเซต
แผนจัดการเรี ยนรู้ เรื่ อง การสร้างฟอร์ม
แผนจัดการเรี ยนรู้ เรื่ อง การอัพโหลดไฟล์สู่เว็บไซต์
เรื่ อง หน้า
แผนจัดการเรี ยนรู้ เรื่ อง การใช้ Cascading Style Sheet

แผนจัดการเรี ยนรู้ เรื่ อง การใช้มลั ติมีเดีย
แผนจัดการเรี ยนรู้ เรื่ อง การสร้างลูกเล่นด้วย Behaviors
แบบประเมินคุณธรรมจริ ยธรรม (ผูเ้ รี ยนประเมินตนเอง)
แบบประเมินสาระการเรี ยนรู้ (ผูเ้ รี ยนประเมินตนเอง)
แบบประเมินคุณธรรมจริ ยธรรม(ผูส้ อนประเมินผูเ้ รี ยน)
แบบประเมินสาระการเรี ยนรู้(ผูส้ อนประเมินผูเ้ รี ยน)
แบบสอบถามความพึงพอใจ/ความคิดเห็นต่อสื่ อการสอน
ตารางวิเคราะห์ คำอธิบายรายวิชา
ชื่อวิชา การสร้ างเว็บไซต์ (ด้วย Dreamweaver) รหัสวิชา 2204-2009 จำนวน 3 หน่ วยกิต
ระยะเวลาเรียน 17 สัปดาห์ จำนวน 4 ชั่วโมง / สั ปดาห์ รวมจำนวน 72 ชั่วโมง
ลำดับ พฤติกรรมทีค่ าดหวังต่ อการเรียนการสอน 1 ครั้ง
ชื่อหน่ วยการเรียนรู้
ที่ ความรู้ ทักษะ จิตพิสัย รวม(ชม.)
1 หล กั การสร้า งเว บ็ ไซต แ์ ละรู้จ กั ก บั 1 2 1
Dreamweaver
2 การสร้างเว็บไซต์ 2 4 2
3 การสร้างข้อความ 2 4 2
4 การตกแต่งด้วยภาพ 1 2 1
5 การใส่ ตาราง 2 4 2
6 การเชื่อมโยง 1 4 1
7 การออกแบบเลย์เอาท์ 1 4 1
8 การสร้างเฟรมเซต 2 4 2
9 การสร้างฟอร์ม 2 4 2
10 การอัพโหลดไฟล์สู่เว็บไซต์ 2 4 1
11 การใช้ Cascading Style Sheet 2 4 1
12 การใช้มลั ติมีเดีย 2 4 1
13 การสร้างลูกเล่นด้วย Behaviors 2 4 1
14 การประเมินผลการเรี ยน
รวม
ตารางวิเคราะห์การประเมินผลตามสภาพจริง
หน่ วยที่ จุดประสงค์การเรียนรู้ เครื่องมือวัดผล คะแนน หมายเหตุ

1. แบบประเมิน 2 จุดประสงค์การ
เรี ยนรู ้ที่ไม่ผา่ น
2. แบบประเมิน 2 ครู ผสู ้ อนมอบ
3. แบบประเมิน 2 หมายงานเพิม่
4. แบบประเมิน 2 เติมเพื่อ
เป็ นการพัฒนา
5. แบบประเมิน 3
ความรู ้และ
6. แบบประเมิน 4 ทบทวนบท
7. แบบประเมิน 2 เรี ยนของผู ้
8. แบบประเมิน 2 เรี ยน หากพบ
ว่ายังไม่ผา่ นจุด
9. แบบประเมิน
ประสงค์การ
10. แบบประเมิน เรี ยนรู ้อีก จัด
สอนซ่อมเสริ ม
11. แบบประเมิน ให้
12. แบบประเมิน
คู่มือครู และ Course Syllabus
1. รหัสวิชา 2204-2009 ชื่อวิชา การสร้างเว็บไซต์ (ด้วย Dreamweaver) ระดับชั้น ปวช.

2. ผู้สอน …………………………………………………………………………………………
3. จุดประสงค์รายวิชาเพือ่ ให้
1. มีความรู้ความเข้าใจเกี่ยวกับกระบวนการและโครงสร้างการทำงานของเว็บไซต์
2. เข้าใจโครงสร้างและไวยากรณ์ของโปรแกรมภาษาหรื อกระบวนการใช้เครื่ องมือการสร้าง
3. ออกแบบและกำหนดส่ วนประกอบที่จ ำเป็ นของเว็บเพจ
4. ใช้โปรแกรมภาษาหรื อโปรแกรมสำเร็ จรู ปสำหรับสร้างเว็บไซต์
5. ติดตั้งและอัพโหลด (Upload) เว็บไซต์
6. มีคุณธรรม จริ ยธรรม และค่านิยมที่ดีในการใช้คอมพิวเตอร์
4. สมรรถนะรายวิชา
1. แสดงความรู้เกี่ยวกับกระบวนการโครงสร้างการทำงานและไวยากรณ์ของโปรแกรมภาษา
ในการสร้างเว็บไซต์
2. ประยุกต์ใช้โปรแกรมภาษาหรื อโปรแกรมสำเร็ จรู ปสำหรับสร้างเว็บไซต์และการติดตั้งและ
อัพโหลด (Upload) เว็บไซต์
5. คำอธิบายรายวิชา
ศึกษาและปฏิบตั ิเกี่ยวกับกระบวนการและโครงสร้างการทำงานของเว็บไซต์ การออกแบบ
เว็บไซต์ การสร้างเว็บไซต์ดว้ ยโปรแกรมภาษาหรื อโปรแกรมสำเร็ จรู ปหรื อโปรแกรมระบบ CMS
(Content Management System) การทดสอบการทำงานของเว็บไซต์ และการ Upload เว็บไซต์
6. แผนจัดการเรียนรู้
สัปดาห์ที่ หน่วยการเรี ยนรู้/เนื้อหา กิจกรรม
1 บทที่ 1 หลักการสร้ างเว็บไซต์ และรู้ จักกับ - ทดสอบความรู ้พ้ืนฐานของ
Dreamweaver นักศึกษาโดยการตั้งคำถาม
1. พื้นฐานอินเทอร์เน็ต ก่อนเรี ยน
2. รู ้จกั กับ Dreamweaver CS6 - บรรยาย อธิ บาย ยก
3. ส่ วนประกอบของ Dreamweaver ตัวอย่าง แสดงวิธีการ
4. มุมมองการทำงานใน Dreamweaver ปฏิบตั ิในแต่ ละหัวข้อ
การเรี ยนและให้นกั ศึกษา
ปฏิบตั ิไปพร้อมกัน
- สรุ ปบทเรี ยน
- แบบฝึ กหัด/ทดสอบ
2 บทที่ 2 การสร้ างเว็บไซต์ - ทดสอบความรู ้พ้ืนฐาน
1. การจัดการโครงสร้างโฟลเดอร์ - บรรยาย
2. เข้าใจหลักการเพิ่มและแก้ไของค์ประกอบบน - อธิ บาย ยกตัวอย่าง
หน้าเว็บ - แสดงวิธีการปฏิบตั ิในแต่
3. บันทึกไฟล์เว็บเพจที่สร้าง ละหัวข้อการเรี ยนและให้
4. เปิ ดดูหน้าเว็บที่สร้างบนบราวเซอร์ นักศึกษาปฏิบตั ิไปพร้อม
กัน
- แบบฝักหัด / ทดสอบ
3 บทที่ 3 การสร้ างข้ อความ - ให้นกั ศึกษาค้นคว้าหน่วย
1. การสร้างข้อความ การเรี ยน
2. การเลือกข้อความ - บรรยาย
3. การตกแต่งและจัดรู ปแบบข้อความ - อธิ บาย ยกตัวอย่าง
4. การนำเอกสาร Word หรื อ Excel มาสร้างเป็ น - แสดงวิธีการปฏิบตั ิในแต่
เว็บเพจ ละหัวข้อการเรี ยนและให้
นักศึกษาปฏิบตั ิไปพร้อม
กัน
- แบบฝึ กหัด / ทดสอบ
4-5 บทที่ การตกแต่ งด้ วยภาพ - ให้นกั ศึกษาค้นคว้าหน่วย
1. เตรี ยมภาพเพื่อใช้ในเว็บเพจ การเรี ยน
2. ปรับแต่งรายละเอียดของภาพ - บรรยาย
3. การแสดงภาพเป็ นพื้นหลังเว็บเพจ - อธิ บาย ยกตัวอย่าง
4. เทคนิคการตกแต่งภาพพื้นหลังเว็บเพจ - แสดงวิธีการปฏิบตั ิในแต่
ละหัวข้อการเรี ยนและให้
นักศึกษาปฏิบตั ิไปพร้อม
กัน
6 บทที่ 5 การใส่ ตาราง - ให้นกั ศึกษาค้นคว้าหน่วย
1. การสร้างตาราง การเรี ยน
2. การเลือกตาราง แถว คอลัมน์ และเซลล์ - บรรยาย
3. การปรับแต่งรายละเอียดของตาราง - อธิ บาย ยกตัวอย่าง
4. การจัดเรี ยงข้อความในตาราง - แสดงวิธีการปฎิบตั ิในแต่
5. การแทรก/ลบแถวและคอลัมน์ ละหัวข้อการเรื ยนและให้
6. การรวมและการแบ่งเซลล์ นักศึกษาปฎิบตั ิไปพร้อม
7. การขยายและลดขนาดเซลล์ กัน
8. ปรับความกว้างของตารางใน Property Inspector - สรุ ปบทเรี ยน
9. การซ้อนตาราง (Nested Table) - แบบฝึ กหัด / ทดสอบ
10.การกำหนดสี กบั ตาราง
11.นำข้อมูลเข้าหรื อนำข้อมูลออก
7-8 บทที่ 6 การเชื่อมโยง - ให้นกั ศึกษาค้นคว้าหน่วย
1. การเชื่อมโยงแบบต่างๆ การเรี ยน
2. กำหนดลักษณะการเปิ ดหน้าเว็บใหม่ที่เชื่อมโยง - บรรยาย
ไป - อธิ บาย ยกตัวอย่าง
3. เทคนิคการสร้างภาพลิงค์แบบ Rollover Image - แสดงวิธีการปฎิบตั ิในแต่
4. กำหนดคุณสมบัติของข้อความที่เป็ นลิงค์ ละหัวข้อการเรื ยนและให้
นักศึกษาปฎิบตั ิไปพร้อม
กัน
9-10 บทที่ 7 การออกแบบเลย์ เอาท์ - ให้นกั ศึกษาค้นคว้าหน่วย

5. การวางเลย์เอาท์ การเรี ยน
6. เครื่ องมือที่ใช้วางเลย์เอาท์ - บรรยาย
7. การใช้ Spry เพื่อเพิ่มพื้นที่หน้าเว็บ - อธิ บาย ยกตัวอย่าง
- แสดงวิธีการปฎิบตั ิในแต่
ละหัวข้อการเรื ยนและให้
กัน
11 บทที่ 8 การสร้ างเฟรมเซต - ให้นกั ศึกษาค้นคว้าหน่วย
1. ลักษณะเฟรมเซต การเรี ยน
2. การสร้างเฟรมเซต - บรรยาย
3. การปรับแต่งเฟรม - อธิ บาย ยกตัวอย่าง
4. แก้ไขรายละเอียดของเฟรมเซต - แสดงวิธีการปฎิบตั ิในแต่
5. การนำหน้าเว็บมาประกอบในเฟรม ละหัวข้อการเรื ยนและให้
6. การบันทึกหน้าเว็บ และหน้าเฟรมเซต นักศึกษาปฎิบตั ิไปพร้อม
7. เชื่อมโยงหน้าเว็บในเฟรมเซต กัน
12 บทที่ 9 การสร้ างฟอร์ ม - ให้นกั ศึกษาค้นคว้าหน่วย
1. เข้าใจการทำงานของฟอร์มและโปรแกรม การเรี ยน
สคริ ปต์ - บรรยาย
2. การจัดกลุ่มให้ฟอร์ม - อธิ บาย ยกตัวอย่าง
3. ปรับแต่ง และตรวจสอบรู ปแบบฟอร์ม - แสดงวิธีการปฎิบตั ิในแต่
4. การใช้ Spry สร้างฟิ ลด์ต่างๆ ในฟอร์ม ละหัวข้อการเรื ยนและให้
กัน
13-14 บทที่ 10 การใช้ Cascading Style Sheet - ให้นกั ศึกษาค้นคว้าหน่วย

1. รู ้จกั สไตล์ การเรี ยน
2. พาเนล CSS Styles - บรรยาย
3. การแก้ไขค่า CSS - อธิ บาย ยกตัวอย่าง
4. การใช้สไตล์ตน้ แบบ - แสดงวิธีการปฎิบตั ิในแต่
5. Visual Aids ตัวช่วยในการออกแบบเว็บ ละหัวข้อการเรื ยนและให้
กัน
15 บทที่ 11 การใช้มลั ติมีเดีย - บรรยาย

1. ขั้นตอนแทรกองค์ประกอบมัลติมีเดีย - ให้นกั ศึกษาค้นคว้าหน่วย
2. รู ้จกั กับ Flash และ Shockwave การเรี ยน
3. การแทรกไฟล์ Flash และไฟล์ Shockwave - บรรยาย
4. การแสดงวิดีโอคลิปด้วย FLV - อธิ บาย ยกตัวอย่าง
- แสดงวิธีการปฎิบตั ิในแต่
กัน
16 บทที่ 12 การสร้างลูกเล่นด้วย Behaviors 3. บรรยาย
1. การใช้ Behaviors 4. ให้นกั ศึกษาค้นคว้าหน่วย
2. เทคนิคการเพิม่ ลูกเล่นบนเว็บ การเรี ยน
5. บรรยาย
6. อธิ บาย ยกตัวอย่าง
7. แสดงวิธีการปฎิบตั ิในแต่
กัน
8. สรุ ปบทเรี ยน
แบบฝึ กหัด / ทดสอบ
17 บทที่ 13 การอัพโหลดไฟล์สู่เว็บไซต์ - ให้นกั ศึกษาค้นคว้าหน่วย
1. ขั้นตอนที่ 1 การจัดโครงร่ างไฟล์ภายในเว็บไซต์ การเรี ยน
2. ขั้นตอนที่ 2 การตรวจสอบการทำงานของหน้า - บรรยาย
เว็บ - อธิ บาย ยกตัวอย่าง
3. ขั้นตอนที่ 3 การขอพื้นที่เว็บไซต์บนเว็บ - แสดงวิธีการปฎิบตั ิในแต่
เซิร์ฟเวอร์ ละหัวข้อการเรื ยนและให้
4. ขั้นตอนที่ 4 การจดโดเมนเนม เพื่อจัดตั้งชื่อ นักศึกษาปฎิบตั ิไปพร้อม
เว็บไซต์ กัน
5 . ขั้นตอนที่ 5 การอัพโหลดไฟล์ไปยังเว็บเซิ ร์ฟเวอร์ - สรุ ปบทเรี ยน
18 ประเมินผลผูเ้ รี ยน
แผนจัดการเรียนรู้ วิชา การสร้ างเว็บไซต์ (ด้ วย Dreamweaver) รหัสวิชา 2204-2009 ชั้น ปวช.
หน่วยที่ 1 เรื่อง รู้จกั การทำงานของเว็บเพจเบือ้ งต้น สัปดาห์ท่ี 1 เวลา 4 ชั่วโมง
1. ส า ร ะ ส ำ ค ญ
ั
Dreamweaver เป็ นเครื่ องมือในการสร้างเว็บไซต์ที่มีประสิ ทธิ ภาพสู ง ในบทนี้ เราจะกล่าวถึงพื้นฐานที่
สำคัญเกี่ยวกับอินเทอร์เน็ต รวมทั้งหลักการออกแบบเว็บไซต์ ก่อนจะเข้าสู่ การติดตั้งและเริ่ มต้นใช้งาน
โปรแกรม Dreamweaver CS6 เพื่อสร้างเว็บไซต์ต่อไป
2. ผลการเรียนรู้ ทคี่ าดหวัง

1. อธิบายกระบวนการและโครงสร้างการทำงานของเว็บเพจและการใช้บริ การ WWW ได้
2. รู ้จกั โปรแกรม Dreamweaver รวมทั้งสามารถใช้งานโปรแกรมเบื้องต้นได้
3. เข้าใจส่ วนประกอบ และโครงสร้างของโปรแกรมเพื่อใช้ในการสร้างเว็บไซต์
4. ใช้แถบเครื่ องมือต่างๆ ของโปรแกรมได้อย่างถูกต้องและเหมาะสมกับงานนั้นๆ
3. กิจกรรมการเรียนรู้
กิจกรรมครู กิจกรรมนักเรียน
ข ้นั น ำ เ ข ้ า ส ่ ู บ ท เ ร ีย น ( 30 น า ท ี)
1. ตรวจสอบรายชื่อนักศึกษาที่เข้าเรี ยน 1. ให้ความร่ วมมือกับครู ในการตรวจสอบ
2. ทดสอบก่อนเรี ยน โดยการถามผูเ้ รี ยนในห้อง 2. ผูเ้ รี ยนช่วยกันหาคำตอบจากสิ่ งที่ครู ก ำหนด
3. ร่ วมสนทนาเกี่ยวกับเรื่ องทำงานของเว็บเพจ 3. ร่ วมสนทนาและแสดงความคิดเห็น
เบื้องต้น
ข ้นั ด ำ เ น ิน ก า ร ส อ น ( 180 น า ท ี)
1. บอกจุดประสงค์การเรี ยน 1. ฟัง ทำความเข้าใจและซักถาม
2. บรรยาย อธิบาย ยกตัวอย่าง แสดงวิธีการ 2. ฟัง ทำความเข้าใจและปฎิบตั ิตาม
ปฎิบตั ิในแต่ ละหัวข้อการเรื ยนและให้นกั ศึกษา 3. ผูเ้ รี ยนซักถามข้อสงสัยและจดบันทึก
ปฎิบตั ิไปพร้อมกัน 4. รับการประเมิน
3. ครู บอกวิธีการและแนวคิดในการปฏิบตั ิที่ถูก
ต้องให้แก่ผเู้ รี ยน
4. ประเมินพฤติกรรมรายบุคคลโดยครู จะซัก
ถามในแต่ละคน
ข ้นั ส ร ุ ป ( 30 น า ท ี)
1. ครู และนักเรี ยนร่ วมกันสรุ ปสาระสำคัญ 1. ครู และนักเรี ยนร่ วมกันสรุ ปสาระสำคัญ
2. เปิ ดโอกาสให้นกั เรี ยนซักถามข้อสงสัย 2. นักเรี ยนสอบถามข้อสงสัย
3. มอบหมายให้ไปหัดทำและศึกษาเพิ่มเติม 3. ฟังและจดบันทึก
4. ทำแบบทดสอบ 4. ทำแบบทดสอบท้ายบท
4.กิจกรรมการเรียนรู้
ก ่อ น เ ร ีย น
1. ครู ช้ ีแจงให้ผเู้ รี ยน เห็นความสำคัญ เพื่อเป็ นประโยชน์ในการเรี ยนรู ้ และนำไปประยุกต์ใช้ท้ งั ใน
ชีวิตประจำวัน
2. ครู ช้ ีแจงวัตถุประสงค์รายวิชา
3. ครู ช้ ีแจงระเบียบว่าด้วยเวลาเรี ยน
4. ครู ตกลงกับผูเ้ รี ยน เรื่ องการแบ่งคะแนนเก็บระหว่างภาคดังนี้
5. ครู ตกลงกับผูเ้ รี ยนเรื่ องการปฏิบตั ิตนในห้องเรี ยนตามแบบประเมิน
6. ครู บอกแนวทางในการเรี ยน และวิธีการปฏิบตั ิตามภาระงานที่มอบหมาย
ข ณ ะ เ ร ีย น
1. ทำแบบฝึ กหัดก่อนเรี ยน โดยการถาม – ตอบ และให้แสดงความคิดเห็น
2. จดบันทึก สาระการเรี ยนรู้
3. ร่ วมกันสรุ ปบทเรี ยน พร้อมบันทึกผลการสรุ ป แล้วลุกขึ้นนำเสนอกับครู ผสู ้ อน
4. ผูเ้ รี ยนและครู ผสู้ อนร่ วมกันประเมินข้อสรุ ปของผูเ้ รี ยนที่ออกแสดงความคิดเห็นเพื่อให้ได้ขอ้ สรุ ปที่
ถูกต้อง และครู ผสู้ อนแสดงความชื่นชมกับผูเ้ รี ยนทุกคนที่ออกแสดงความคิดเห็นและมีส่วนร่ วมในกิจกรรมที่
มอบหมาย
5. ทำใบงาน ตรวจสอบใบงาน แก้ไขใบงาน
6. ทบทวนเนื้อหา
7. ทำแบบฝึ กหัดหลังเรี ยน
8. ร่ วมกันเฉลยแบบฝึ กหัด
5.สื่ อการเรียนการสอนประจำหน่ วย
1. หนังสื อเรี ยนวิชา การสร้างเว็บไซต์ (ด้วย Dreamweaver)
2. ใบความรู้ประจำหน่วย
3. ใบงานและแบบฝึ กหัด
4. เครื่ องไมโครคอมพิวเตอร์
5. แผ่นใสและเครื่ องฉายภาพข้ามศีรษะ
6. ซีดีสื่อการสอน
6. วัดผลประเมินผลประจำหน่ วย
1. สังเกตผูเ้ รี ยนมีความสนใจ เกิดความเข้าใจในสาระการเรี ยนรู ้ ตลอดจนแสดงความกระตือรื อร้นใน
การแสดงความคิดเห็นและสรุ ปสาระการเรี ยนรู ้ประจำหน่วย
2. ทำใบงานได้อย่างถูกต้อง ทันเวลาที่ก ำหนด ใบงานสะอาดและเป็ นระเบียบ
3. ผูเ้ รี ยนทำแบบฝึ กหัดหลังเรี ยนได้ถูกต้อง โดยได้คะแนน 50% เป็ นอย่างต่ำ
7. กิจกรรมเสนอแนะประจำหน่ วย
1. ผูเ้ รี ยนต้องให้ความสนใจในการศึกษา เพื่อหาเทคนิค วิธีการ หรื อหลักการง่ายเพื่อให้หาคำตอบได้
อย่างถูกต้อง และรวดเร็ว โดยการ ตั้งใจฟังหลักการ เทคนิควิธีการที่ครู ผสู ้ อนสรุ ปในขณะที่ท ำการสอน และนำ
ข อ้ ส ง ส ยั ซ กั ถ า ม ค ร ู ใ น ก า ร เ ร ี ย น ท ุก ค ร ้ ั ง ท ี่เ ก ิด ค ว า ม ส บั ส น แ ล ะ ไ ม ่เ ข า้ ใ จ
2. ผ มู้ ีก า ร ท บ ท ว น บ ท เ ร ี ย น ต ล อ ด เ พ ื่อ เ ส ร ิ ม ส ร ้า ง ค ว า ม เ ข า้ ใ จ อ ย า่ ง แ ท จ้ ร ิ ง
3. ผ เู้ ร ี ย น ห ม นั่ ท ำ ใ บ ง า น แ บ บ ฝึ ก ห ดั แ ล ะ แ ก ไ้ ข ข อ้ ท ี่ผ ดิ ใ ห ถ้ ูก ต อ้ ง เ ส ม อ
4. ผูเ้ รี ยนต้องสร้างมโนภาพให้เกิดความคิดรวบยอดในสาระการเรี ยนรู ้และเทคนิควิธีการพร้อมกับ
ความจำเป็ นในการนำไปประยุกต์ใช้ให้เกิดขึ้นโดยตนเองให้ได้เพื่อเกิด่ความรู ้ความเข้าใจอย่างแท้จริ งไม่ใช่เกิด
จ า ก ก า ร ท ่อ ง จ ำ
เฉลยแบบฝึ กหัด หน่ วยที่ 1
ตอนที่ 1 จงทำเครื่ องหมายวงกลม ในหัวข้อที่ถูกต้องที่สุดเพียงข้อเดียว
1. การติตด่อสื่ อสารบนเครื อข่ายอินเทอร์เน็ต เราเรี ยกเครื่ องรับบริ การว่าอะไร

ก. เซ็คเตอร์ ข. เซิ ร์ฟเวอร์
ค. ไคลเอ็นต์ ง. โดเมน
2. อะไรเป็ นตัวกลางสำคัญในการแปลง URL ให้เป็ น IP Adress
ก. Protocal ข. Browser
ค. DNS Server ง. Web Server
3. ข้อใดถูกต้อง
ก. โฮมเพจคือหน้าแรกของเว็บเพจ ที่เป็ นหน้าแรกสุ ดที่ผใู ้ ช้ตอ้ งพบ
ข. เว็บไซต์ประกอบด้วยหลายๆ โฮมเพจ แต่จะมีเว็บเพจเพียงเว็บเพจเดียว
ค. เว็บเซิร์ฟเวอร์จะเก็บเฉพาะโฮมเพจเท่านั้น
ง. เว็บไซต์ โดยทัว่ ไปนิยมสร้ างโฮมเพจไว้ เป็ นเว็บเพจแรกเสมอ
4. ข้อใดไม่ใช่คุณสมบัติของภาษา HTML
ก. เป็ นภาษาหลักที่ใช้ในการแสดงผลบนเว็บบราวเซอร์ในอินเทอร์เน็ต
ข. เป็ นภาษาที่สามารถเขียนได้ดว้ ยโปรแกรม Text Editor
ค. เป็ นภาษาที่ถูกจำกัดความสามารถด้ านการแสดงผลในด้ านมัลติมีเดีย เช่ น เสี ยง ภาพยนตร์
ง. เป็ นภาษาที่รองรับการทำงานกับภาษาอื่นๆ ด้วย เช่น PHP, ASP
5. ในขณะที่ท ำงานอยูใ่ นมุมมองการออกแบบ หากต้องการให้ดูหน้าเว็บแบบเหมือนจริ งๆ เหมือนดูผา่ น

บราวเซอร์ ควรทำอย่างไร
ก. คลิกปุ่ ม Web ข. คลิกปุ่ ม Virtual
ค. คลิกปุ่ ม Live ง. คลิกปุ่ ม to Browser
ตอนที่ 2 จงตอบคำถามต่ อไปนี้ ลงในช่ องว่างที่กำหนดให้

1. จงอธิ บายความหมายของ เว็บไซต์ เว็บเพจ เว็บบราวเซอร์ และเว็บเซิ ร์ฟเวอร์ มาพอสังเขป
เว็บเพจ : เอกสารแต่ ละหน้ าที่เราเปิ ดดูใน World Wide Web
เว็บไซต์ : เว็บเพจที่หลายๆ หน้ า ที่เชื่ อมโยงกัน
เว็บบราวเซอร์ : โปรแกรมสำหรั บเข้ าสู่ world Wide Web
เว็บเซิ ร์ฟเวอร์ : คอมพิวเตอร์ ที่ใช้ เก็บเว็บเพจ
2. ยกตัวอย่างเอกสารแบบต่างๆ ที่สร้างสามารถด้วย Dreamweaver มา 5 ตัวอย่าง

PHP, ASP, XML, CSS, Javascript
3. อธิ บายส่ วนประกอบของแถบสถานะ ดังรู ป
1 -----2---------------- ------3------- ---4------ ------5-----------
1. ส่ วนไว้ เลือกแท็ก
2. เครื่ องมือปรั บการแสดงผลหน้ าเว็บขณะออกแบบ
3. ขนาดของหน้ าต่ างออกแบบเว็บเพจ
4. ขนาดหน้ าเว็บและเวลาที่ใช้ ในการโหลด
5. รองรั บการทำงานระบบหลายภาษา
แผนจัดการเรียนรู้ วิชา การสร้ างเว็บไซต์ (ด้วย Dreamweaver) รหัสวิชา 2204-2009 ชั้น ปวช.
หน่ วยที่ 2 เรื่อง การสร้ างเว็บไซต์ สัปดาห์ท่ี 2 เวลา 4 ชั่วโมง
1. สาระสำคัญ
การสร้างเว็บไซต์เป็ นการตั้งโฟลเดอร์ที่ใช้เก็บทุกส่ วนประกอบบนหน้าเว็บเอาไว้ และใช้ต ำแหน่ง
อ้างอิงเพื่อเชื่อมโยงหน้าและหน้าเข้าไว้ดว้ ยกัน ดังนั้นการสร้างหน้าเว็บแต่ไม่สร้างเว็บไซต์ หรื อสร้างหน้าเว็บ
นอกเว็บไซต์ จะทำให้การอ้างอิงตำแหน่งเชื่อมโยงเป็ นไปอย่างไม่ถูกต้อง มีผลทำให้หาหน้าเว็บที่เชื่อม
โยงไม่พบ หรื อเรี ยกอาการนี้วา่ ลิงค์หลุด (Broken link) ทำให้เราต้องแก้ไขตำแหน่งเชื่อมโยงใหม่ท้ งั หมดในภาย
ห ล งั ซ ่ ึ ง เ ป ็ น เ ร ื่ อ ง ย ุง่ ย า ก ม า ก
2. ผ ล ก า ร เ ร ีย น ร ้ ู ท ี่ค า ด ห ว งั
1. สร้างหน้าเว็บเพจขึ้นมาใหม่ได้
2. เพิ่ม หรื อลบหน้าเว็บเพจ หรื อโฟลเดอร์ที่ตอ้ งการได้
3. นำรู ปภาพมาประกอบบนหน้าเว็บเพจได้
4. พิมพ์และแทรกข้อความบนหน้าเว็บเพจได้
5. ปรับแต่งข้อความและรู ปแบบตัวอักษร เช่น ใส่ สี ปรับขนาด เป็ นต้น
6 แก้ไขข้อผิดพลาด และบันทึกหน้าเว็บเพจที่ท ำเสร็ จเรี ยบร้อยแล้ว
ขั้น นำเข้ า สู่ บ ทเรีย น (สัป ดาห์ ล ะ 30 นาที)
2. ให้นกั ศึกษาค้นคว้า การสร้างเว็บไซต์ การใช้ 2. ค้นคว้าการสร้างเว็บไซต์ การใช้ภาษาในการ
ภาษาในการเขียนเว็บเพจ ขั้นตอนในการเขียน เขียนเว็บเพจ ขั้นตอนในการเขียนเว็บเพจ
เว็บเพจ 3. ร่ วมสนทนาและแสดงความคิดเห็น
3. ร่ วมสนทนาเกี่ยวกับเรื่ องสร้างเว็บเพจเบื้อง
ต้น
ขั้น ดำเนิน การสอน (สัป ดาห์ ล ะ 180 นาที)
ข ้นั ส ร ุ ป (ส ัป ด า ห ์ ล ะ 30 น า ท ี)
3. มอบหมายให้ไปหัดทำและศึกษาเพิม่ เติม 3. ฟังและจดบันทึก
1. ค้นคว้าการสร้างเว็บไซต์ การใช้ภาษาในการเขียนเว็บเพจ ขั้นตอนในการเขียนเว็บเพจ
1. ผูเ้ รี ยนร่ วมกันศึกษาเนื้อหาแล้วตอบคำถามและแสดงความคิดเห็น
2. ทำใบงานและแบบฝึ กหัดหลังเรี ยน
3. ร่ วมกันเฉลยใบงานและแบบฝึ กหัดหลังเรี ยน
4. จดบันทึก เทคนิค แนวการที่เป็ นประโยชน์ต่อผูเ้ รี ยน จากข้อแนะนำของครู ผสู ้ อน
5. ผูเ้ รี ยนสรุ ปความรู้ที่ได้จากการเรี ยนตามความเป็ นจริ ง จากภูมิความรู ้ของผูเ้ รี ยนแต่ละคน
6. ผูเ้ รี ยนซักถามในหัวข้อที่สงสัยในเนื้ อหาการเรี ยนรู ้
5. สื่ อการเรียนการสอน
6. วัดผลประเมินผล
1. ผูเ้ รี ยนปฏิบตั ิภาระงานที่มอบหมายเสร็ จทันเวลาที่ก ำหนด
2. ตอบคำถามและสรุ ปผลงานได้อย่างถูกต้อง
3. ทำแบบฝึ กหัดหลังเรี ยนเสร็ จทันเวลาที่ก ำหนดและถูกต้อง
4. สนใจกระตือรื อร้นในการเรี ยนรู้ ตอบคำถาม สรุ ปสาระการเรี ยนรู ้ และกล้าแสดงความคิดเห็น
7. กิจกรรมเสนอแนะ
ถ้าผูเ้ รี ยนมีการเตรี ยมตัวในการเรี ยนที่ดี เช่น อ่าน และทำการศึกษาหนังสื อเกี่ยวกับหน่วยการเรี ยนมาก
ก่อน ถึงชัว่ โมงเรี ยน ผูเ้ รี ยน จะสามารถเรี ยน และทำกิจกรรมต่าง ๆ ที่ครู ผสู ้ อนมอบหมาย ได้อย่างมีความสุ ข
แ ล ะ เ ก ิด ค ว า ม ช อ บ แ ล ะ ส น ุก ก บั ก า ร เ ร ี ย น ใ น ช ้ นั เ ร ี ย น

ตอนที่ 1 จงทำเครื่องหมายวงกลม ในหัวข้ อที่ถูกต้ องที่สุดเพียงข้ อเดียว
1. หน้าโฮมเพจหลัก ควรตั้งชื่อไฟล์ตามข้อใดต่อไปนี้
ก. first.htm ข. index.htm
ค. start.htm ง. this.htm
2. ปั จจุบนั การกำหนดภาษาไทยบนเว็บ มีอยู่ 2 รู ปแบบ คือข้อใด

ก. Thai (Windows) และ PostScript ข. Thai (Windows) และ Unicode (UTF-8)
ค. PostScript และ ThaiText ค. Unicode (UTF-8) และ PostScript
3. หากต้องการรองรับการทำงานข้ามระบบ รวมไปถึงการแสดงผลตัวอักษรบนอุปกรณ์พกพา ควรเลือกรู ป

แบบใด
ก. Thai (Windows) ข. Unicode (UTF-8)
ค. PostScript ง. ThaiText
4. องค์ประกอบบนหน้าเว็บ เช่น ตาราง รู ปภาพ แบบฟอร์ม เรี ยกว่าอะไร

ก. วัตถุ ข. แอ็คชัน่
ค. ออบเจ็กต์ ง. บล็อก
5. Alternate text คือ การกำหนดค่าใด

ก. กำหนดข้อความแบบลอย ข. กำหนดข้ อความแทนภาพ
ค. กำหนดข้อความเสี ยง ง. กำหนดข้อความบรรยายภาพ
6. หากต้องการขึ้นบรรทัดใหม่ในย่อหน้าเดิม ให้กดปุ่ มใดต่อไปนี้

ก. <Enter> ข. <Shift>+<Enter>
ค. <Ctrl>+<Enter> ง. <Alt>+<Enter>
7. คำสัง่ File>Save to Remote Server เป็ นคำสัง่ ไว้สำหรับทำงานใด

ก. บันทึกไฟล์ไปเก็บทีเ่ ซิร์ฟเวอร์ ข. บันทึกไฟล์สำรองเก็บไว้ที่เซิ ร์ฟเวอร์
ค. อัพโหลดไฟล์ไปเก็บที่เซิร์ฟเวอร์ ง. ถูกทั้ง ก และ ค
8. ปุ่ มใดใช้สำหรับดูหน้าเว็บที่สร้างบนบราวเซอร์
ก. <F9> ข. <F10>
ค. <F11> ง. <F12>
9. ปุ่ มใด ใช้ยอ้ นการทำงานไป 1 ขั้นตอน

ก. <Ctrl>+D ข. <Ctrl>+H
ค. <Ctrl>+I ง. <Ctrl>+Z
10. ปุ่ มใดใช้เรี ยกพาเนล History

ก. <Shift>+<F9> ข. <Shift>+<F10>
ค. <Shift>+<F11> ง. <Shift>+<F12>
หน่ วยที่ 3 เรื่อง การสร้ างข้อความ สัปดาห์ท่ี 3 เวลา 4 ชั่วโมง
หลังจากที่ได้ลองใส่ ขอ้ ความบนหน้าเว็บในบทที่ผ า่ นมา เราจะเรี ยนรู ้การปรับแต่งข้อความ เช่น ตัว
อ กั ษร สี การจ ดั ย่อ หน้า และต ำแหน่ง ของข อ้ ความ เพื่อ ให้เ นื้ อ หาดูล งต วั บนหน้า เว บ็ มากยิง่ ขึ้น
2. ผ ล ก า ร เ ร ีย น ร ู้ท ี่ค า ด ห ว งั
1. เลือกข้อความที่ตอ้ งการได้
2. ตกแต่งและจัดรู ปแบบข้อความได้
3. ใส่ Bullet และตัวเลขกำกับในแต่ละบรรทัดได้
4. แทรกสัญลักษณ์พิเศษได้
5. แทรกเส้นคัน่ ระหว่างบรรทัดได้
6. นำเอกสาร Word หรื อ Excel มาสร้างเป็ นเว็บเพจได้
2. ให้น กั ศึก ษาค้น คว้า การสร้า งข้อ ความ การ 2. ค้นคว้าการสร้างข้อความ การปรับแต่ง
ปรับแต่งข้อความ และตำแหน่งของข้อความ ข้อความ และตำแหน่งของข้อความ
3. ร่ วมสนทนาเกี่ยวกับเรื่ องการสร้างข้อความ 3. ร่ วมสนทนาและแสดงความคิดเห็น
1.ค้นคว้าการการปรับแต่งข้อความ และตำแหน่งของข้อความ
1.ผูเ้ รี ยนร่ วมกันศึกษาเนื้อหาแล้วตอบคำถามและแสดงความคิดเห็น
2.ทำใบงานและแบบฝึ กหัดหลังเรี ยน
3.ร่ วมกันเฉลยใบงานและแบบฝึ กหัดหลังเรี ยน
4.จดบันทึก เทคนิค แนวการที่เป็ นประโยชน์ต่อผูเ้ รี ยน จากข้อแนะนำของครู ผสู ้ อน
5.ผูเ้ รี ยนสรุ ปความรู้ที่ได้จากการเรี ยนตามความเป็ นจริ ง จากภูมิความรู ้ของผูเ้ รี ยนแต่ละคน
6.ผูเ้ รี ยนซักถามในหัวข้อที่สงสัยในเนื้ อหาการเรี ยนรู ้
1.หนังสื อเรี ยนวิชา การสร้างเว็บไซต์ (ด้วย Dreamweaver)
2.ใบความรู้ประจำหน่วย
3.ใบงานและแบบฝึ กหัด
4.เครื่ องไมโครคอมพิวเตอร์
5.แผ่นใสและเครื่ องฉายภาพข้ามศีรษะ
6.ซี ดีสื่อการสอน

1. แท็ก <p> เป็ นการเลือกข้อความในลักษณะใด

ก. ย่ อหน้ า ข. ทั้งหมดในหน้าเว็บ
ค. ข้อความที่ก ำลังทำงานอยู่ ง. พารากราฟแรกของหน้าเว็บ
2. แท็ก <body> เป็ นการเลือกข้อความในลักษณะใด

ก. ย่อหน้า ข. ทั้งหมดในหน้ าเว็บ
ค. ข้อความที่ก ำลังทำงานอยู่ ง. พารากราฟแรกของหน้าเว็บ
3. ขนาดมาตรฐานตัวอักษรใน Properties Inpsector ของการจัดรู ปแบบแบบ CSS มีขนาดเท่าไหร่
ก. 10 ข. 12
ค. 14 ง. 16
4. ปุ่ ม ใช้สำหรับการทำงานใด
ก. เว้นวรรคข้อความ ข. ขึน้ บรรทัดใหม่
ค. ขึ้นพารากราฟใหม่ ง. ไปยังข้อความสุ ดท้าย
5. คียใ์ ดใช้ในการขึ้นบรรทัดใหม่
ก. <Enter> ข. <Shift>+<Enter>
ค. <Ctrl>+<Enter> ง. <Alt>+<Enter>
6. ปุ่ ม ใช้สำหรับการทำงานใด
ก. เว้นวรรคข้ อความ ข. ขึ้นบรรทัดใหม่
ค. ขึ้นพารากราฟใหม่ ง. ไปยังข้อความสุ ดท้าย
7. คียใ์ ดใช้ในการเว้นวรรคหลายๆ ครั้ ง

ก. <Ctrl>+<Shift>+<Enter> ข. <Shift>+<Enter>
ค. <Ctrl>+<Space> ง. <Ctrl>+<Shift>+<Space>
หน่ วยที่ 4 เรื่อง การตกแต่งด้วยภาพ สัปดาห์ท่ี 4-5 เวลา 8 ชั่วโมง
ในบทนี้จะกล่าวถึงการนำภาพมาใช้ในเว็บเพจ เพื่อสร้างความสวยงาม และใช้ภาพในการอธิ บายความ
หมายสิ่ งที่ตอ้ งการสื่ อในเว็บไซต์ให้ชดั เจนขึ้น ต่อจากนั้นเราจะได้เรี ยนรู ้เรื่ องการปรับวางภาพให้เหมาะสมกับ
เนื้อหาในเว็บไซต์
1. อธิบายถึงพื้นฐานและองค์ประกอบที่ตอ้ งคำนึงถึงในการแสดงภาพบนเว็บเพจได้
2. บอกถึงคุณสมบัติ และข้อแตกต่างของแต่ละฟอร์ แมตของไฟล์ภาพได้
3. ใช้ไฟล์ภาพในแต่ละฟอร์แมตได้อย่างเหมาะสมกับงาน
4. สามารถนำภาพลงบนเว็บเพจได้
5. กำหนดรายละเอียดของภาพ เช่น ความกว้าง ความยาว ใส่ กรอบภาพใส่ ขอ้ ความกำกับภาพได้
6. ปรับแต่งภาพที่น ำลงบนเว็บเพจให้มีขนาด และตำแหน่งได้อย่างเหมาะสมได้
7. นำไฟล์ภาพมาเป็ นพื้นหลังของเว็บเพจนั้นๆ ได้
8. สามารถใช้เทคนิคปรับแต่งพื้นหลังของเว็บเพจได้
9. ทำการแก้ไขรู ปจากโปรแกรม Dreamweaver ได้
2. ให้น กั ศึก ษาค้น คว า้ เกี่ย วกับ การแต่ง เติม 2.ค้นคว้าเกี่ยวกับการแต่งเติมเว็บเพจด้วยกราฟิ ก
เว็บ เพจด้ว ยกราฟิ ก ขั้น ตอนในการฟอร์แ มต ขั้น ตอนในการฟอร์แ มตไฟล์ การปรับ แต่ง
ไฟล์การปรับแต่งรู ปภาพลงในเว็บ รู ปภาพลงในเว็บ
3. ร่ วมสนทนาเกี่ยวกับเรื่ อง แต่งเติมเว็บเพจด้วย 3. ร่ วมสนทนาและแสดงความคิดเห็น
กราฟิ ก
1. ค้นคว้าเกี่ยวกับการแต่งเติมเว็บเพจด้วยกราฟิ ก ขั้นตอนในการฟอร์แมตไฟล์ การปรับแต่งรู ปภาพ
ลงในเว็บ
1. ผูเ้ รี ยนร่ วมกันศึกษาเนื้อหาแล้วตอบคำถามและแสดงความคิดเห็น

1. ข้อใดไม่ใช่ขอ้ ควรคำนึงในการเขียนเว็บเพจ
ก. การใช้ชนิดของบราวเซอร์ที่แตกต่างกัน
ข. ความละเอียดของภาพ
ค. หน่วยวัดมาตรฐานของภาพบนเว็บ
ง. ความเร็วของเครื่องพีซี
2. ข้อใดไม่ใช่วิธีการแก้ไขปัญหาไฟล์ภาพขนาดใหญ่บนเว็บเพจ
ก. แบ่งภาพเป็ นไฟล์เล็กๆ นำมาเรี ยงต่อเป็ นภาพใหญ่
ข. ลดขนาดภาพโดยลดจำนวนสี ที่ใช้ หรื อลดความละเอียดของภาพ
ค. พยายามใช้ภาพเดิมในหน้าเว็บไซต์อื่นๆ
ง. กำหนดโครงสร้ างของเว็บให้ แสดงผลในส่ วนที่เป็ นภาพก่ อน
3. Dither หมายถึงอะไร
ก. เป็ นกระบวนการลดทอนสีที่ใช้ ในภาพ โดยการแทนที่สีด้วยสี ใกล้ เคียง
ข. กระบวนการเกลี่ยสี เพื่อหลอกตาให้เห็นว่ามีสีน้ นั ๆ อยูใ่ นภาพอย่างกลมกลืน
ค. ไม่ถูกทั้ง 2 ข้อ
ง. ถูกทั้ง 2 ข้อ
4. ไฟล์ฟอร์แมตแบบใดที่ไม่สนับสนุนการทำงานภาพแบบโปร่ งแสง
ก. JPEG ข. PNG
ค. GIF ง. ไม่มีขอ้ ผิด
5. ข้อจำกัดของไฟล์ฟอร์แมตแบบ GIF คืออะไร

ก. ไม่สนับสนุนการบีบอัดข้อมูลที่มีภาพโปร่ งแสง
ข. ใช้ งานอยู่ที่ 256 สี
ค. ลักษณะการบีบอัดโดยการลบข้อมูลส่ วนที่ซ้ำซ้อนกันมากที่สุดออก
ทำให้คุณภาพของภาพ จะสูญเสี ยมากกว่าไฟล์ฟอร์แมตอื่น
ง. หลังการบีบอัดพิกเซลที่โปร่ งแสงจะถูกแทนที่ดว้ ยสี ของ Background
6. ข้อใดเป็ นคียล์ ดั ในการเพิม่ ภาพเข้าไปในเว็บเพจ

ก. <Ctrl+Alt+u> ข. <Ctrl+Alt+i>
ค. <Ctrl+Alt+o> ง. <Ctrl+Alt+p>
7. ข้อใดที่ไม่สามารถทำได้ในการปรับแต่งรายละเอียดของภาพบนเว็บเพจ
ก. กำหนดความหนาเส้นขอบภาพ ข. ใส่ ชื่อของรู ปภาพ
ค. ปรับความละเอียดของภาพ ง. แสดงที่เก็บไฟล์รูปภาพ
8. รู ปแบบการวางตำแหน่งของข้อความแบบใดที่ท ำให้ขอบล่างของภาพอยูต่ รงกับแนวล่างสุ ด ข อ ง

ข้อความ
ก. Default ข. Absolute Bottom
ค. Bottom ง. Baseline
9. คำสัง่ ใดเป็ นคำสัง่ เริ่ มต้นให้ไฟล์ภาพแสดงเป็ นพื้นหลังเว็บเพจ

ก. Modify>Picture Properties.. ข. Modify>Template Properties..
ค. Modify>File Properties.. ง. Modify>Page Properties..
10. เครื องมือ ใน Properties Inspector ใช้ปรับแต่งสิ่ งใด

ก. ปรับแต่งความละเอียดของภาพ ข. ลดทอนสี ภาพ
ค. เปิ ดไฟล์ภาพด้วยโปรแกรมที่เลือก ง. ปรับขนาดของภาพต้นฉบับ
ตอนที่ 2 จงตอบคำถามต่อไปนี้ ลงในช่องว่างที่ก ำหนดให้
1. จงบอกความรู้พ้ืนฐานเกี่ยวกับการแสดงภาพบนเว็บมา 3 ข้อ พร้อมทั้งอธิ บายอย่างคร่ าวๆ

1. ความแตกต่ างระหว่ างระบบเครื่อง ระบบปฏิบัติการ และเว็บบราวเซอร์
เมื่อเผยแพร่ เว็บไซต์ ที่เราสร้ างบนอินเทอร์ เน็ต หน้ าเว็บที่ เราสร้ างจะถูกเปิ ดโดยเครื่ องคอมพิวเตอร์ ต่างรุ่ น
ต่ างแบบกัน ใช้ ขนาดจอภาพและระบบการแสดงผลที่ ต่างกัน ดังนั้นเราควรทำความคุ้นเคยกับมาตรฐานต่ างๆ ไว้
ด้ วย
2. การใช้ ชนิดของบราวเซอร์ ที่แตกต่ างกัน
บราวเซอร์ ที่ต่ า งรุ่น กัน อาจทำให้ ก ารแสดงผลของภาพบนเว็บ แตกต่ า งกัน ดัง นั้น เราต้ อ งทราบว่ า
บราวเซอร์ หลักที่ผ้ ชู มใช้ คือรุ่นใด และออกแบบหน้ าเว็บให้ เหมาะสมกับบราวเซอร์ นั้น
3. หน่ วยวัดมาตรฐานของภาพบนเว็บ
เมื่อสร้ างภาพบนเว็บให้ ก ำหนดหน่ วยวัดเป็ นพิกเซล เพราะพิกเซลเป็ นหน่ วยวัดมาตรฐานสำหรั บการ
แสดงผลบนจอภาพ ต่ างกับการสร้ างสื่ อสิ่ งพิมพ์ ซึ่งจะกำหนดหน่ วยวัดเป็ นนิว้
4. ความละเอียดของภาพ
ภาพบนเว็บไม่ จ ำเป็ นต้ องใช้ ความละเอียดเท่ ากับภาพบนสื่ อสิ่ งพิมพ์ เพราะจอภาพนั้นความละเอียดไม่
เท่ า โดยความละเอียดพืน้ ฐานที่รับได้ คือ 72 จุดต่ อนิว้ ในขณะที่ สิ่งพิมพ์ อาจต้ องใช้ ภาพที่ มีความละเอียดสู งถึง
300 จุดต่ อนิว้
การออกแบบหน้ าเว็บควรคำนึงถึงความละเอียดในการแสดงผลที่ ผ้ ใู ช้ ใช้ ในการเปิ ดชม เช่ น ถ้ า เรา
ต้ องการให้ ผ้ ใู ช้ จอภาพ 14 นิว้ ที่ใช้ ความละเอียดที่ 640x480 พิกเซลเปิ ดดูหน้ าเว็บเราได้ อย่ างลงตัว ขนาด ของ
ภาพหรื อหน้ าเว็บไม่ ควรเกิน 625x320 พิกเซล
5. ขนาดของไฟล์
ขนาดของไฟล์ ภาพจะส่ งผลอย่ างมากต่ อความเร็ วของเว็บ ถ้ าขนาดไฟล์ ภาพใหญ่ มาก การแสดงผลก็ใช้
เวลามากเป็ นเงาตามตัว ทั้งนีเ้ ราควรคำนึงเสมอว่ า เราไม่ ควรให้ ผ้ ชู มรอโหลดหน้ าเว็บและภาพที่ ใช้ นานเกินไป
โดยขอแนะนำหลักการง่ ายๆ ดังนี ้
1) แบ่ งภาพเป็ นไฟล์ เล็กๆ นำมาเรี ยงต่ อเป็ นภาพใหญ่ ดีกว่ าการดาวน์ โหลดภาพใหญ่ เพียงภาพเดียว
2) ลดขนาดภาพโดยลดจำนวนสี ที่ใช้ หรื อลดความละเอียดของภาพ ซึ่ งหากทำอย่ างดี ก็จะได้
3) พยายามใช้ ภาพซ้ำๆ กันในหน้ าเว็บของเรา เพราะบราวเซอร์ จะเก็บภาพที่ โหลดมาไว้ ทำให้ ไม่ ต้อง
โหลดซ้ำอีก ซึ่ งจะช่ วยลดเวลาโหลดไปได้ พอสมควร
4) เราควรกำหนดให้ หน้ าเว็บที่สร้ างแสดงข้ อความก่ อน เพราะส่ วนนีจ้ ะถูกโหลดมาก่ อน ผู้ชมจะได้ อ่าน
ไปก่ อนในขณะที่รอโหลดภาพ และส่ วนอื่นๆ
6. การลดขนาดไฟล์ ภาพโดยการ Dither
เป็ นกระบวนการลดทอนสี ที่ใช้ ในภาพ โดยการแทนที่ สีด้วยสี ใกล้ เคียง เช่ น จากภาพที่ ใช้ 16.7 ล้ านสี ปรั บให้
เป็ นภาพที่ใช้ เพียง 256 สี ซึ่ งจะได้ ภาพที่ ดูใกล้ เคียงกับภาพต้ นฉบับ หรื อมีโทนสี ใกล้ เคียง แต่ มีขนาดไฟล์
เล็กลงกว่ าเดิมมาก เพราะใช้ จ ำนวนสี น้อยลง
2. จงอธิ บายถึงความแตกต่างในการบีบอัดข้อมูลภาพของไฟล์ภาพแบบ GIF, JPEG และ PNG

ฟอร์ แมต GIF
 ถูกพัฒนาโดย CompuServe ในปี 1980 เพื่อบีบอัดข้ อมูลภาพลายเส้ น
 มีข้อจำกัดการใช้ งานอยู่ที่ 256 สี เท่ านั้น (8 บิต)
 ใช้ การบีบอัดแบบสร้ าง Palette สี ขึน้ ใหม่ ทำให้ ไม่ สูญเสี ยคุณภาพของภาพ เพราะไม่ มี
การตัดสี ภาพออก แต่ เป็ นลักษณะการแทนสี ภาพในแต่ ละพิกเซลด้ วยสี ที่ก ำหนดขึน้ ใหม่
ฉะนั้นคุณภาพไฟล์ จะไม่ เสี ย
 ความสามารถในการแสดงภาพโปร่ งแสง และภาพเคลื่อนไหว
ฟอร์ แมต JPEG
 ถูก พัฒ นาขึน้ โดย Joint Photographic Experts Group เพื่อ จุด ประสงค์ ใ นการบีบ อัด
ข้ อมูลของไฟล์ รูปภาพ มีจุดเด่ นคือหลังการบีบอัด ยังสามารถใช้ สีได้ ถึง 16.7 ล้ านสี ใน
ขณะที่ .GIF ใช้ ได้ เพียง 256 สี เท่ านั้น
 ไม่ จำเป็ นต้ องกำหนดพาเลตสี เพื่อการใช้ งาน เพราะรองรั บข้ อมูลสี ได้ มากถึง 16.7 ล้ านสี
อยู่แล้ ว
 ลักษณะการบีบอัด เป็ นการลบข้ อมูลส่ วนที่ซ ้ำซ้ อนกันมากที่สุดออกจากภาพ ยิ่งมีกา
รบับอัดข้ อมูลมากขึน้ เท่ าไหร่ คุณภาพก็จะสู ญเสี ยมากขึน้ เท่ านั้น
 ผลของการบีบอัดข้ อมูลจะได้ ไฟล์ ภาพที่มีขนาดเล็กยิ่งกว่ าฟอร์ แมต GIF ซึ่ งจะทำให้ ใช้
เวลาการดาวน์ โหลดน้ อย แต่ ใช้ เวลาในการแสดงผลนาน เพราะต้ องขยายข้ อมูลการบีบ
อัดก่ อนการแสดงผล
 ไม่ ส นับ สนุน การบีบ อัด ข้ อ มูล ที่ม ีภ าพโปร่ ง แสง เพราะหลัง การบีบ อัด พิก เซลที่
โปร่ งแสงจะถูกแทนที่ ด้วยสี ของ Background
ฟอร์ แมต PNG

 บีบอัดข้ อมูลได้ ดีกว่ า GIF 20-30 เปอร์ เซ็นต์ ไม่ เสี ยข้ อมูลเหมือนกับแบบ JPEG
 สามารถเลือกการจัดเก็บข้ อมูลได้ ทั้งแบบ 8 บิต 24 บิต และ 32 บิต ต่ างกับ GIF
 ถูกพัฒนาโดย Thomas Boutell และ Tom Lane วัตถุประสงค์ เพื่อการทำงานข้า มระบบ
เพราะมีการจัดเก็บข้ อมูลเกี่ยวกับลักษณะเครื่ อง ทำให้ สามารถแสดงผลได้ อย่ างถูกต้ องกับ
เครื่ องทุกระบบ
 แสดงผลได้ เร็ วกว่ าแบบ GIF เพราะภาพใน GIF จะเริ่ มแสดงผลเมื่อดาวน์ โหลดข้ อมูล
มาได้ 1 ใน 18 ส่ วน ขณะที่ PNG เริ่ มแสดงผลเมื่อข้ อมูลถูกโหลดเข้ ามา 1 ใน 64 ส่ วน
 สนับสนุนการทำงานกับภาพโปร่ งใส
3. หากต้องการให้ภาพบนเว็บเพจมีขอ้ ความกำกับภาพ ควรทำอย่างไร (ให้บอกมาเป็ นขั้นตอน)

1. คลิกเมาส์ ที่ภาพ
2. ที่ Property Inspector ใส่ ข้อความกำกับภาพในช่ อง Alt
4. หากต้องการให้ภาพบนเว็บเพจอยูข่ อบล่างของภาพตรงกับแนวล่างสุ ดของข้อความ ควรทำอย่างไร

เลือกค่ า Align เป็ น Bottom จากหน้ าต่ าง Property Inspector
หน่วยที่ 5 เรื่อง การใส่ ตาราง สัปดาห์ท่ี 6 เวลา 4 ชั่วโมง
ั
ในการทำงานบนเว็บเพจต้องมีข้ นั ตอนการทำงานที่หลากหลาย สิ่ งที่ควรรู ้เกี่ยวกับเว็บอีกอย่างหนึ่งคือ
การใส่ ตารางบนเว็บเพจ เพื่อสะดวกในการทำงานในรู ปแบบต่างๆ ซึ่ งเป็ นงานที่ทนั สมัย สวยงามเป็ นระเบียบ
1. รู ้จกั ส่ วนประกอบของตารางบนเว็บเพจ
2. สร้างตารางลงบนเว็บเพจ และสามารถกำหนดตารางตามความต้องการได้
3. ปรับแต่งตารางที่สร้างไว้ให้มีขนาดที่เหมาะสมกับข้อมูลที่กรอกไว้ได้
4. ใช้ค ำสัง่ ปรับแต่งตารางอย่างละเอียดได้
5. กำหนดรายละเอียดของตาราง โดยใช้เครื่ องมือจากโปรแกรม Dreamweaver ได้
6. มีทกั ษะในการจัดการเกี่ยวกับตารางได้
7. สามารถแก้ไขตารางที่สร้างไว้จากเดิม เช่น แทรกตาราง การลบตารางการรวมตารางได้
8. กำหนดสี ของตาราง และกรอบของตารางได้
9. กำหนดสี ของพื้นตารางทั้งหมดได้
10. แทรกภาพ ข้อมูล และจัดข้อมูลให้สวยงามได้
2. ให้นกั ศึกษาค้นคว้า การใส่ ตารางบนเว็บเพจ 2. ค้นคว้าการใส่ ตารางบนเว็บเพจ การสร้าง
การสร้างตาราง ขั้นตอนการสร้างตาราง ตาราง ขั้นตอนการสร้างตาราง
3. ร่ วมสนทนาเกี่ยวกับเรื่ องการใส่ ตารางบน 3. ร่ วมสนทนาและแสดงความคิดเห็น
เว็บเพจ
ปฎิบตั ิในแต่ ละหัวข้อการเรื ยนและให้นกั 3. ผูเ้ รี ยนซักถามข้อสงสัยและจดบันทึก
ศึกษาปฎิบตั ิไปพร้อมกัน 4. รับการประเมิน
3. ครู บอกวิธีการและแนวคิดในการปฏิบตั ิที่
ถูกต้องให้แก่ผเู้ รี ยน
4. 4. ประเมินพฤติกรรมรายบุคคลโดยครู จะ
ซักถามในแต่ละคน
ก่ อนเรียน
1. ค้นคว้าการใส่ ตารางบนเว็บเพจ การสร้างตาราง ขั้นตอนการสร้างตาราง
1. จดบันทึกการเรี ยน
2. สนใจการปฏิบตั ิตามครู และกล้าในการแสดงความคิดเห็นและตอบคำถาม
3. ทำแบบฝึ กหัด
4. ผูเ้ รี ยนสรุ ปความรู้ที่ได้จากการเรี ยนการการสอน
5. ผูเ้ รี ยนหาแนวทางและเทคนิคการหาคำตอบ ด้วยความรู ้ความเข้าใจของตนเองพร้อมจดบันทึกเป็ น
ลำดับขั้นตอนที่จะทำให้ตนเองไม่ลืมสาระการเรี ยนรู ้
6. ผูเ้ รี ยนซักถามเมื่อไม่เข้าใจหรื อสงสัยเนื้ อหาการเรี ยนรู ้
1. ผ เู้ ร ี ย น ป ฏ ิบ ตั ิภ า ร ะ ง า น ท ี่ม อ บ ห ม า ย เ ส ร ็ จ ท นั เ ว ล า ท ี่ก ำ ห น ด
2. ต อ บ ค ำ ถ า ม แ ล ะ ท ำ ใ บ ง า น แ ล ะ แ บ บ ฝ ึ ก ห ดั ไ ด ถ้ ูก ต อ้ ง
3. ค ว า ม ส ะ อ า ด เ ร ี ย บ ร ้อ ย ข อ ง ใ บ ง า น แ ล ะ แ บ บ ฝ ึ ก ห ดั
4. สนใจกระตือรื อร้นในการเรี ยนรู ้ ตอบคำถาม สรุ ปสาระการเรี ยนรู ้ และกล้าแสดงความคิดเห็น
1. ผ เู้ รี ย น ต อ้ ง ท บ ท ว น บ ท เ รี ย น ท ้ งั ก ่อ น เ รี ย น แ ล ะ ห ล งั เ รี ย น อ ย ูอ่ ย า่ ง ส ม ่ำ เ ส ม อ
2. ผูเ้ รี ย นหม นั่ เข า้ ช ้ นั เรี ย นเพื่อ รับ ฟัง เทคนิค วิธ ี และแนวทางที่ด ีก บั ครู ส อนอย า่ งต ้ งั ใจ
3. ผูเ้ รี ยนสนใจทำใบงาน แบบฝึ กหัด และขยันปรับปรุ งแก้ไขใบงานและแบบฝึ กหัดให้ถูกต้องทุกครั้งที่
ท ำ ผ ดิ

1. การสร้างตารางลงบนเว็บเพจด้วยโปรแกรม Dreamweaver ทำได้กี่วิธี

ก. 2 วิธี ข. 3 วิธี
ค. 4 วิธี ง. 5 วิธี
2. การเลือกเซลล์เพื่อแก้ไขตาราง โดยเลือกเซลล์ที่อยูต่ ิดกัน ต้องกดคียใ์ ดค้างไว้ขณะเลือก
ก. <Shift> ข. <Ctrl>
ค. <Alt> ง. <Insert>
3. การเลือกเซลล์เพื่อแก้ไขตาราง โดยเลือกเซลล์ที่ไม่อยูต่ ิดกัน ต้องกดคียใ์ ดค้างไว้ขณะเลือก

ก. <Shift> ข. <Ctrl>
ค. <Alt> ง. <Insert>
4. หากต้องการระบุสีเส้นขอบของตาราง ต้องกำหนดที่ช่องใดใน Property Inspector

ก. Light Brdr ข. Dark Brdr
ค. ไม่ ถูกทั้ง 2 ข้ อ ง. ถูกทั้ง 2 ข้อ
5. การจัดเรี ยงข้อความในตารางแบบ Default เป็ นอย่างไร

ก. จัดเรี ยงข้อมูลให้อยูช่ ิดขอบบนของช่องตาราง
ข. จัดเรี ยงข้อมูลให้อยูช่ ิดขอบล่างของช่องตาราง
ค. จัดเรียงข้ อมูลให้ อยู่ชิดซ้ ายของช่ องตาราง
ง. จัดเรี ยงข้อมูลให้อยูช่ ิดขวาของช่องตาราง
6. ัั
คียล์ ดในการแทรกแถวทำได้
โดยกดคียใ์ ด
ก. <Ctrl+J> ข. <Ctrl+Y>
ค. <Ctrl+M> ง. <Ctrl+F>
7. ัั
คียล์ ดในการลบแถวทำได้
โดยกดคียใ์ ด
ก. <Ctrl+Shift+J> ข. <Ctrl+Shift+Y>
ค. <Ctrl+Shift+M> ง. <Ctrl+Shift+F>
8. คำสัง่ Insert>Table Objects>Import Tabular Data สำหรับทำอะไร

ก. นำข้ อมูลเข้ ามา ข. นำตารางข้อมูลเข้ามา
ค. นำข้อมูลภาพเข้ามา ง. ผิดทุกข้อ
9. ในการเรี ยงลำดับข้อมูลในตาราง คำสัง่ Sort header rows จะมีผลของการเรี ยงลำดับ ข้อมูลแบบใด

ก. ทำการจัดเรี ยงเฉพาะแถวที่อยูภ่ ายในแท็ก <thead> .... </thead>
ข. ทำการจัดเรี ยงเฉพาะแถวที่อยูภ่ ายในแท็ก <tfoot> .... </tfoot>
ค. เพิม่ การจัดเรียงแถวที่อยู่ภายในแท็ก <thead> .... </thead>
ง. เพิ่มการจัดเรี ยงแถวที่อยูภ่ ายในแท็ก <tfoot> .... </tfoot>
10. ในการเรี ยงลำดับข้อมูลในตาราง คำสัง่ Sort footer rows จะมีผลของการเรี ยงลำดับ ข้อมูลแบบใด
ก. ทำการจัดเรี ยงเฉพาะแถวที่อยูภ่ ายในแท็ก <thead> .... </thead>
ข. ทำการจัดเรี ยงเฉพาะแถวที่อยูภ่ ายในแท็ก <tfoot> .... </tfoot>
ค. เพิ่มการจัดเรี ยงแถวที่อยูภ่ ายในแท็ก <thead> .... </thead>
ง . เพิม่ การจัดเรียงแถวที่อยู่ภายในแท็ก <tfoot> .... </tfoot>
หน่ วยที่ 6 เรื่อง การเชื่อมโยง สัปดาห์ท่ี 7-8 เวลา 8 ชั่วโมง
ั
จุดเด่นหนึ่งของเว็บคือ ความสามารถในการเชื่อมโยงจากเว็บหน้าหนึ่งไปยังหน้าอื่นๆ ได้ ในบทนี้ เราจะกล่าว
ถึงการกำหนดให้ขอ้ ความเป็ นลิงค์ (Link) เพื่อเชื่อมโยงในรู ปแบบต่างๆ
2. ผ ล ก า ร เ ร ีย น ร ้ ูท ี่ค า ด ห ว งั
1. ทราบถึงการเชื่อมโยงบนหน้าเว็บเพจในรู ปแบบต่าง ๆ ได้
2. สามารถสร้างการเชื่อมโยงในหน้าเว็บเพจเดียวกันได้
3. สามารถสร้างการเชื่อมโยงไปยังหน้าเว็บไซต์อื่นได้
4. สามารถสร้างการเชื่อมโยงในเว็บไซต์หน้าเดียวกันได้
5. สามารถสร้างการเชื่อมโยงในการติดต่อผ่านทางอีเมล์ได้
6. สามารถสร้างการเชื่อมโยงในการดาวน์โหลดไฟล์โปรแกรมต่างๆ ได้
7. สามารถสร้างการเชื่อมโยงด้วยเทคนิคต่าง ๆ ได้ เช่น Map Link และ Rollover Image ได้
2. ให้น กั ศึก ษาค้น คว า้ การเชื่อ มโยงภายใน 2. ค น้ คว า้ การ เชื่อ มโย งภาย ในเว บ็ เ พจ
เว็บเพจเดียวกันการเชื่อมโยงภายในเว็บไซต์ เดีย วก นั การเชื่อ มโยงภายในเว บ็ ไซต์
เดียวกัน การเชื่อมโยงไปยังเว็บไซต์อื่น เดียวกันกาเชื่อมโยงไปยังเว็บไซต์อื่น
3. ร่ วมสนทนาเกี่ยวกับเรื่ องการเชื่อมโยง 3. ร่ วมสนทนาและแสดงความคิดเห็น
1. ค้นคว้าการเชื่อมโยงภายในเว็บเพจเดียวกันการเชื่อมโยงภายในเว็บไซต์เดียวกัน การเชื่อมโยงไปยัง
เว็บไซต์อื่น
1. ผูเ้ รี ยนร่ วมกันศึกษาเนื้อหาตามใบงานแล้วตอบคำถามและแสดงความคิดเห็น
6. ซี ดีสื่อการสอน

1. ข้อใดเป็ นวัตถุประสงค์ของการเชื่อมโยงเว็บเพจที่มีการใช้งานบนเว็บไซต์
ก. การเชื่อมโยงภายในเว็บเพจเดียวกัน
ข. การเชื่อมโยงไปยังเว็บไซต์อื่น
ค. การเชื่อมโยงไปยังไฟล์ดาวน์โหลด
ง. ถูกหมดทุกข้ อ
2. การเชื่อมโยงภายในเว็บเพจเดียวกันนั้น ต้องทำอย่างไรบ้าง
ก. สร้ างจุด Anchor (จุดที่ Link จะกระโดดไป) ในหน้ าเว็บเพจนั้น
ข. กำหนดพื้นที่ยอ่ ยเป็ น Link เชื่อมโยงข้อมูล โดยใช้ไอคอน
ค. พิมพ์ชื่อหน้าเว็บเพจที่ตอ้ งการ Link ที่ช่อง Link โดยมีค ำว่า mailto: นำหน้า
ง. พิมพ์ชื่อหน้าเว็บเพจที่ตอ้ งการ Link ที่ช่อง Link โดยมีสญั ลักษณ์ @ นำหน้า
3. เราสามารถสร้างการเชื่อมโยงแบบ Map Link ได้โดยวิธีใด

ก. ใช้ไอคอน ในการกำหนดพื้นที่ในการ Link เป็ นรู ปสี่ เหลี่ยม
ข. ใช้ไอคอน ในการกำหนดพื้นที่ในการ Link เป็ นรู ปวงกลม
ค. ใช้ไอคอน ในการกำหนดพื้นที่ในการ Link เป็ นแบบอิสระ
4. การเชื่อมโยงด้วย Anchor ต้องพิมพ์เครื่ องหมายใด ไว้หน้าชื่อที่ต้ งั ไว้ในช่อง Link ทุกครั้ง

ก. @ ข. #
ค. ฿ ง. %
5. การเชื่อมโยงไปยังเว็บไซต์อื่น เราต้องกำหนดชื่อเว็บไซต์ที่ตอ้ งการ Link ไปแบบใด
ก. www.sanook.com ข. sanook.com
ค. http://www.sanook.com ง. www.sanook.co.th
6. ลักษณะการเชื่อมโยง เพื่อเปิ ดหน้าต่างบราวเซอร์ใหม่ข้ ึนมาอีกหน้าต่างหนึ่ง ให้เรากำหนดคำสัง่ Target
ในรู ปแบบใด
ก. _parent ข. _blank
ค. _self ง. _top
7. สิ่ งสำคัญที่ใช้ในการสร้างการเชื่อมโยงไปยังอีเมล์ของเรา เพื่อใช้ในการติดต่อสื่ อสารทางเมล์ได้คือข้อใด

ก. กำหนดการเชื่อมโยงไปยังอีเมล์ของเราโดยใส่ คำว่ า mailto นำหน้ าชื่ออีเมล์ ของเรา
ข. กำหนดการเชื่อมโยงไปยังอีเมล์ของเรา โดยใส่ ชื่ออีเมล์ที่ใช้ในการติดต่อในช่อง Link
ค. กำหนดการเชื่อมโยงโดยพิมพ์สญ ั ลักษณ์ # นำหน้าชื่ออีเมล์ของเราในช่อง Link
ง. กำหนดการเชื่อมโยงอีเมล์ของเรา โดยใส่ ชื่ออีเมล์ช่อง Target
8. เมื่อเรานำเมาส์ไปวางที่ภาพที่จะทำการเชื่อมโยง แล้วภาพนั้นเปลี่ยนเป็ นภาพใหม่ และเมื่อนำเมาส์ออก

จากภาพ แล้วภาพนั้นจะกลับมาเหมือนเดิม เป็ นการสร้างการเชื่อมโยงแบบใด
ก. Image Map ข. Mail To
ค. Rollover Image ง. Go to URL
9. ปุ่ มคำสัง่ เป็ นคำสัง่ ที่ใช้กบั การเชื่อมโยงข้อมูลในแบบใด

ก. การเชื่อมโยงแบบดาวน์โหลดไฟล์
ข. การเชื่อมโยงแบบการสร้ าง Rollover Image
ค. การเชื่อมโยงแบบกำหนดพื้นที่ Map Link
ง. การเชื่อมโยงภายในเว็บไซต์เดียวกัน
10. การเชื่อมโยงเพื่อส่ งอีเมล โปรแกรมใดจะถูกเปิ ดขึ้นมา

ก. Microsoft Outlook
ข. google.com
ค. yahoo.com
ง. outlook.com
หน่วยที่ 7 เรื่อง การออกแบบเลย์เอาท์ สัปดาห์ท่ี 9-10 เวลา 8 ชั่วโมง
1.สาระสำคัญ
ในการสร้างหน้าเว็บ ก่อนสร้างเรามักจะออกแบบเค้าโครงหน้าเว็บ หรื อที่เรี ยกว่าเลย์เอาท์ (Layout)
ขึ้น มาก่อ น แล้ว จึงค่อยนำส่ ว นของเนื้ อหามาจัดวางตาม องค์ป ระกอบของเลย์เ อาท์ที่เ ราได้ก ำหนดไว้
นอกจากนี้ในการเลือกใช้เลย์เอาท์ เรามักจะเลือกใช้เลย์เอาท์เดียวกันหมดกับทุกๆ หน้าเว็บ ดังนั้นการเลือก
เลย์เอาท์จึงเป็ นเรื่ องสำคัญ ที่เราจะมาเรี ยนรู ้กนั ในบทนี้
1. รู ้จกั การจัดวางองค์ประกอบต่างๆ บนหน้าเว็บได้อย่างเหมาะสม
2. สามารถออกแบบเลย์เอาท์ในรู ปแบบต่างๆ บนหน้าเว็บได้
3. สามารถปรับขนาดเลย์เอาท์ที่เรากำหนดได้
4. สามารถใส่ ขอ้ ความ และรู ปภาพบนเลย์เอาท์ที่ได้จดั แบ่งไว้
5. สามารถเพิ่ม และลดขนาดของเลย์เอาท์ให้พอดีกบั ข้อมูลได้
6. สามารถจัดแบ่งหัวข้อต่างๆ ให้อยูใ่ นหน้าเว็บได้
7. สามารถลบพื้นที่บนเลย์เอาท์ที่ไม่ตอ้ งการออกได้
2. ใ ห น้ กั ศ ึก ษ า ค น้ ค ว า้ ค ว า ม ห ม า ย ข อ ง 2. ค น้ คว า้ ความหมายของเลย เ์ อาท ์ ก าร
เลย์เอาท์การออกแบบเลย์เอาท์ ขั้นตอนใน ออกแบบเลย์เอาท์ ขั้นตอนในการออกแบบ
การออกแบบเลย์เอาท์ เลย์เอาท์
3. ร่ วมสนทนาเกี่ยวกับเรื่ องการออกแบบ 3. ร่ วมสนทนาและแสดงความคิดเห็น
เลย์เอาท์
1. ค้นคว้าความหมายของเลย์เอาท์การออกแบบเลย์เอาท์ ขั้นตอนในการออกแบบเลย์เอาท์
5. ผูเ้ รี ยนหาแนวทางและเทคนิคการหาคำตอบ ด้วยความรู ้ความเข้าใจของตนเองพร้อมจด บันทึกเป็ น
4.เครื่ องไมโครคอมพิวเตอร์
5.แผ่นใสและเครื่ องฉายภาพข้ามศีรษะ
4. กระตือ รื อ ร้น ในการเรี ย นรู ้ ตอบค ำถาม สรุ ป บทเรี ย น และกล า้ แสดงความคิด เห็น
3. ผ เู้ ร ี ย น ส น ใ จ ท ำ ใ บ ง า น แ บ บ ฝึ ก ห ดั แ ล ะ แ ก ไ้ ข ใ ห ถ้ ูก ต อ้ ง ท ุก ค ร ้ ัง ท ี่ท ำ ผ ดิ
4. ก ล า้ ท ี่จ ะ ถ า ม ท ุก ค ร ้ ัง ท ี่เ ก ิด ค ว า ม ส ง ส ยั แ ล ะ ไ ม ่เ ข า้ ใ จ ห รื อ ต า ม บ ท เ รี ย น ไ ม ่ท นั
1. ถ้าเราจะทำการจัดวางองค์ประกอบบนหน้าเว็บเพจ โดยแบ่งเป็ นส่ วนหัวของเว็บ, เนื้อหาและหัวข้อต่างๆ

เพิ่มเติม ให้เข้าไปกำหนดในกลุ่มเครื่ องมือใด
ก. Tables ข. Forms
ค. Layout ง. Frames
2. ในการวางเลย์เอาท์โดยใช้ CSS ถ้าต้องการเลือกรู ปแบบเลย์เอาท์ที่จะเปลี่ยนขนาดความกว้างตามขนาด

หน้าต่างบราวเซอร์ ควรเลือกรู ปแบบใด
ก. Fixed ข. Elastic
ค. Liquid ง. Hybrid
3. เครื่ องมือใด ต่อไปนี้ ที่ช่วยในการวางเลย์เอาท์

ก. ไม้บรรทัด ข. เส้นไกด์และเส้นกริ ด
ค. ภาพต้นแบบ ง. ถูกทุกข้ อ
4. ไฟล์ภาพแบบใด ไม่สามารถนำมาใช้ในการเป็ นภาพต้นแบบได้

ก. JPEG ข. GIF
ค. TIFF ง. PNG
5. Spacer Image ช่วยในการวางเลย์เอาท์อย่างไร

ก. ช่วยเพิ่มช่องไฟให้กบั แต่ละตาราง
ข. ช่ วยคํา้ ความกว้างของคอลัมน์ ไว้
ค. เป็ นจุดจำลองไว้สำหรับวางภาพในภายหลัง
ง. ช่วยเพื่มพื้นที่หน้าเว็บ
6. Specer Image มีขนาดเท่าไหร่

ก. 0.5 x 0.5 พิกเซล ข. 1 x 1 พิกเซล
ค. 5 x 5 พิกเซล ง. แล้วแต่ผสู ้ ร้างกำหนด
7. Spry ช่วยในการวางเลย์เอาท์อย่างไร
ก. ช่วยเพิม่ ช่องไฟให้กบั แต่ละตาราง
ข. ช่วยคํ้าความกว้างของคอลัมน์ไว้
ค. เป็ นจุดจำลองไว้สำหรับวางภาพในภายหลัง
ง. ช่ วยเพืม่ พืน้ ที่หน้ าเว็บ
8. Spry ประกอบด้วยโค้ดชนิดใด
ก. DHTML และ JavaScript ข. JavaScript และ CSS
ค. CSS และ XHTML ง. XHMTL และ ActionScript
หน่วยที่ 8 เรื่อง การสร้ างเฟรมเซตในเว็บเพจ สัปดาห์ท่ี 11 เวลา 8 ชั่วโมง
การทำงานบนเว็บเพจ จำเป็ นต้องมีการสร้างเฟรมให้ก บั ข้อความ จึงควรศึกษาเกี่ยวกับการสร้างเฟรม
การออกแบบเฟรมแบบประยุกต์ การสร้างเว็บไซต์ลงในเฟรม การแทรกเว็บเพจลงในเฟรม ซึ่ งการท ำงานจะมี
รู ปแบบที่สวยงาม ทันสมัย และดูเป็ นระเบียบเรี ยบร้อย และเราสามารถใช้งานได้อย่างมีประสิ ทธิ ภาพเพิ่มมาก
ข ้ ึน ส ะ ด ว ก ใ น ก า ร ท ำ ง า น ใ น ร ู ป แ บ บ ต ่า ง ๆ
1. รู ้จกั เฟรมเซตในเว็บเพจ
2. สร้างเฟรมในเว็บเพจ เพื่อให้เว็บเพจมีความเป็ นระเบียบมากขึ้ นและง่ายต่อการแก้ไข
3. ออกแบบโครงสร้างของเว็บเพจได้โดยกำหนดเฟรมเป็ นหลัก
4. แทรกเว็บเพจย่อยลงในเฟรมได้
5. สร้างเว็บเพจเพิ่มลงในเฟรมได้
6. ปรับแต่งกรอบเฟรมให้สวยงามได้
7. สามารถเชื่อมโยงเว็บเพจแต่ละเว็บเพจในเฟรมได้อย่างถูกต้อง
8. สามารถสร้างเว็บเพจแบบประยุกต์ที่มีเฟรมเป็ นส่ วนประกอบได้
2. ให้น กั ศึก ษาค้น คว้า การสร้า งเฟรมให้ก บั 2. ศึกษาค้นคว้าการสร้างเฟรมให้กบั ข้อความ
ข อ้ ค ว า ม ก า ร อ อ ก แ บ บ เ ฟ ร ม แ บ บ การออกแบบเฟรมแบบประยุกต์การสร้าง
ประยุกต์การสร้างเว็บไซต์ลงในเฟรม เว็บไซต์ลงในเฟรม
3. ร่ วมสนทนาเกี่ยวกับเรื่ องการเลือกพื้นที่ภาพ 3. ร่ วมสนทนาและแสดงความคิดเห็น
ในโปรแกรมกราฟิ ก
1. ศึกษาค้นคว้าการสร้างเฟรมให้กบั ข้อความการออกแบบเฟรมแบบประยุกต์การสร้างเว็บไซต์ลงใน
เฟรม
5. ผูเ้ รี ยนหาแนวทางและเทคนิคการหาคำตอบ ด้วยความรู ้ความเข้าใจของตนเองพร้อมจด บันทึกเป็ น
4. กระตือ รื อ ร้น ในการเรี ย นรู ้ ตอบค ำถาม สรุ ป บทเรี ย น และกล า้ แสดงความคิด เห็น
3. ผ เู้ ร ี ย น ส น ใ จ ท ำ ใ บ ง า น แ บ บ ฝึ ก ห ดั แ ล ะ แ ก ไ้ ข ใ ห ถ้ ูก ต อ้ ง ท ุก ค ร ้ ัง ท ี่ท ำ ผ ดิ
4. ก ล า้ ท ี่จ ะ ถ า ม ท ุก ค ร ้ ัง ท ี่เ ก ิด ค ว า ม ส ง ส ยั แ ล ะ ไ ม ่เ ข า้ ใ จ ห รื อ ต า ม บ ท เ รี ย น ไ ม ่ท นั

1. คำสัง่ View>Visual Aids>Frame Borders เป็ นคำสัง่ อะไร

ก. ให้ เว็บเพจแสดงขอบเฟรม
ข. ให้เว็บเพจสร้างขอบเฟรม
ค. ให้เว็บเพจจำลองขอบเฟรม
ง. ให้เว็บเพจขยายขอบเฟรม
2. เฟรมสำเร็ จรู ปที่เตรี ยมไว้ จะอยูใ่ นเมนูใด

ก. Modify ข. Frame
ค. Insert ง. Format
3. ในกรณี ที่เราต้องการเรี ยกพาเนล Frames เราจะใช้คียล์ ดั ใด

ก. <Ctrl+F2> ข. <Shift+F2>
ค. <Ctrl+Shift+F2> ง. <Shift+Alt+F2>
4. ในการปรับแต่งรายละเอียดของเฟรมหลักจาก Property Inspector หน่วย Relative ใน ส ่ ว น ข อ ง

Column (or Row) and Units เป็ นหน่วยลักษณะใด
ก. ให้ขนาดของเฟรมที่เรากำหนดสัมพันธ์เป็ นเปอร์เซ็นต์กบั ขนาดเฟรมหลัก
ข. ให้ ขนาดของเฟรมที่เรากำหนดสัมพันธ์ เป็ นเปอร์ เซ็นต์ กบั ขนาดหน้ าต่ างบราวเซอร์
ค. ให้ขนาดของเฟรมที่เรากำหนดสัมพันธ์เป็ นเปอร์เซ็นต์กบั ขนาดหน้าจอ
ง. ให้ขนาดของเฟรมที่เรากำหนดสัมพันธ์เป็ นเปอร์เซ็นต์กบั ขนาดเฟรมย่อย
5. การปรับแต่งรายละเอียดของเฟรมย่อยจาก Property Inspector ในส่ วนของ src ทำเพื่ออะไร

ก. ตั้งชื่อที่ใช้เรี ยกเฟรมย่อยนี้
ข. กำหนดให้แสดง (Yes)/ไม่แสดง (No) ขอบล้อมเฟรมย่อย
ค. แสดงขอบเฟรมย่อย
ง. กำหนดชื่อและตำแหน่ งเก็บไฟล์เว็บเพจที่จะถูกนำมาใช้ ในเฟรมนี้
6. การบันทึกไฟล์ท้ งั หมดทั้งหน้าเฟรมเซต และหน้าเว็บย่อย เราใช้คียใ์ ด

ก. <Ctrl+S> ข. <Shift+S>
ค. <Ctrl+Shift+S> ง. ไม่ มีข้อถูก
7. การเชื่อมโยงเว็บเพจ โดยกำหนดให้เปิ ดหน้าต่างใหม่ข้ นึ มา จะต้องใช้ค ำสัง่ ใดจากช่อง Target

ก. _blank ข. _parent
8. การเชื่อมโยงเว็บเพจ โดยสัง่ ให้แสดงเพจใหม่ในเฟรมเดิม จะต้องใช้ค ำสัง่ ใดจากช่อง Target

9. การเชื่อมโยงเว็บเพจ โดยสัง่ ให้แสดงเพจใหม่ในหน้าต่างเดิมแบบขยายเต็มหน้าต่าง จะต้องใช้ค ำสัง่ ใด

จากช่อง Target
ค. _self ง. ไม่มีขอ้ ถูก
10. ข้อใดไม่ใช่รูปแบบที่เพิม่ มาจากการเชื่อมโยงปกติ

ก. _mainFrame ข. _subFrame
ค. _top ง. _leftFrame
หน่วยที่ 9 เรื่อง การสร้ างฟอร์ ม สัปดาห์ท่ี 12 เวลา 4 ชั่วโมง
การสร้างเว็บไซต์ จำเป็ นต้องเรี ยนรู ้เทคนิคหลายประเภทในการทำงาน เพื่อให้งานเกิดความถูกต้อง
ส ว ย ง า ม สิ่ ง ท ี่ค ว ร เ รี ย น รู้อ ีก อ ย า่ ง ค ือ ก า ร ส ร ้า ง ฟ อ ร ์ม แ ล ะ เ ค รื่ อ ง ม ือ ใ น ก า ร ส ร ้า ง ฟ อ ร ์ม
2. ผ ล ก า ร เ ร ีย น ร ู้ท ี่ค า ด ห ว งั
1. รู ้จกั กับการสร้างแบบฟอร์มในรู ปแบบต่างๆ บนหน้าเว็บได้
2. รู ้ลกั ษณะความแตกต่างของแบบฟอร์มแต่ละประเภทได้
3. จัดการกับแบบฟอร์มแต่ละประเภทได้
4. สามารถนำข้อมูลที่ได้จากแบบฟอร์มที่สร้างขึ้นไปเก็บได้
5. สามารถสร้างแบบฟอร์มในรู ปแบบของเราเองได้
6. รู ้วิธีการสร้างฟอร์มแบบต่างๆ ได้
7. สามารถปรับแต่งขนาด และสี ของแบบฟอร์มให้ดูเรี ยบร้อยสวยงามได้
8. สามารถนำแบบฟอร์มที่ได้มาประยุกต์ใช้งานตามต้องการได้
9. สามารถแก้ไขแบบฟอร์มจากคำสัง่ ต่าง ๆ ที่มีมาให้ได้
2. ให้นกั ศึกษาค้นคว้าความหมายของการสร้าง 2. ค้นคว้าความหมายของการสร้างฟอร์ม ขั้น
ฟอร์มขั้นตอนในการสร้างฟอร์มส่ วน ตอนในการสร้างฟอร์ม ส่ วนประกอบต่าง ๆ
ประกอบต่าง ๆ ของฟอร์ม ของฟอร์ม
3. ร่ วมสนทนาเกี่ยวกับเรื่ องการสร้างฟอร์ม 3. ร่ วมสนทนาและแสดงความคิดเห็น
1. ค้นคว้าความหมายของการสร้างฟอร์ม ขั้นตอนในการสร้างฟอร์ม ส่ วนประกอบต่าง ๆ ของฟอร์ม
5. ผูเ้ รี ยนหาแนวทางและเทคนิคการหาคำตอบ ด้วยความรู ้ความเข้าใจของตนเองพร้อมจด
บันทึก
6. ผูเ้ รี ยนซักถามเพื่อข้อสงสัยในหัวข้อ หรื อเนื้ อหาการเรี ยนรู ้ที่ยงั ไม่เข้าใจกับผูส้ อน
4. สนใจกระตือรื อร้นในการเรี ยนรู ้ ตอบคำถาม สรุ ปสาระการเรี ยนรู ้ และกล้าแสดงความคิดเห็น
1. ผ เู้ รี ย น ต อ้ ง ท บ ท ว น บ ท เ รี ย น ท ้ งั ก ่อ น เ รี ย น แ ล ะ ห ล งั เ รี ย น อ ย อู่ ย า่ ง ส ม ่ำ เ ส ม อ
2. ผูเ้ รี ย นหม นั่ เข า้ ชั้น เรี ย นเพื่อ รับ ฟัง เทคนิค วิธ ี และแนวทางที่ด ีก บั ครู ส อนอย า่ งต ้ งั ใจ
3. ผูเ้ รี ยนสนใจทำใบงาน แบบฝึ กหัด และขยันปรับปรุ งแก้ไขใบงานและแบบฝึ กหัดให้ถูกต้องทุกครั้ง
ท ี่ท ำ ผ ดิ

1. ข้อใดเป็ นวัตถุประสงค์ในการนำแบบฟอร์ม Radio Button
ก. ใช้ กบั คำถามที่ต้องการเพียงคำตอบเดียวเท่ านั้น
ข. ใช้กบั คำถามที่ตอ้ งการให้เลือกได้หลายคำตอบ
ค. ให้กรอกข้อมูลที่ผใู้ ช้ตอ้ งการลงไป
ง. สามารถนำข้อมูลที่ไฟล์อื่นเพิ่มเติมเข้ามาได้
2. โปรแกรมใดที่ไม่ได้ใช้ในการนำข้อมูลที่ได้จากแบบสอบถามมาประมวลผล และแสดงออกเป็ นผลลัพธ์

ก. PHP ข. CGI
ค. FTP ง. ASP
3. ข้อใดเป็ นขั้นตอนในการจัดการทำแบบฟอร์ม เพื่อจัดเก็บข้อมูล

ก. CGI Script รับข้อมูลทำการประมวลผล และแสดงผลลัพธ์ออกมา
ข. ส่ งข้อมูลที่ได้ไปยังเครื่ องเซิร์ฟเวอร์ เพื่อรับข้อมูล
ค. กรอกข้อมูลที่ตอ้ งการลงในแบบสอบถาม
4. เราสามารถทำการถ่ายข้อมูลไปยังโปรแกรมสคริ ปต์ได้ดว้ ยวิธีใด

ก. ส่ งข้อมูลไปเก็บยังเครื่ องเซิร์ฟเวอร์โดยตรง
ข. ส่ งข้อมูลภายในฟอร์มไปทีละบรรทัดๆ
ค. ส่ งข้อมูลจากฟอร์มทั้งหมด
ง. ถูกทั้งข้ อ ข และ ค
5. ในกรณี ที่มีตวั เลือกอยูห่ ลายตัว และไม่มีพ้ืนที่เพียงพอจะแสดง เราควรเลือกใช้แบบฟอร์มแบบใด

ก. Text Field ข. Jump Menu
ค. การจัดกลุ่มให้ฟอร์ม ง. การสร้ างรายการแบบลิสต์
6. ถ้าต้องการชื่อ ที่อยู่ ผูท้ ่องเว็บ เราต้องกำหนดให้มีการใช้แบบฟอร์มใด

ก. การใช้ Hidden Field ข. การใช้ Jump Menu
ค. การใช้ Text Field ง. การใช้ Field Set
7. ปุ่ มคำสัง่ นี้เป็ นลักษณะการสร้างฟอร์มแบบใด

ก. การสร้างลิสต์รายการ ข. การใส่ ฟิลด์กรอกข้อความ
ค. การสร้างเช็คบ็อกซ์ ง. การใส่ ฟิลด์ ซ่อน
8. ปุ่ มคำสัง่ นี้เป็ นลักษณะการสร้างฟอร์มแบบใด

ก. การสร้าง Radio Button ข. การสร้างลิสต์รายการ
ค. การสร้ างเช็คบ็อกซ์ ง. การจัดกลุ่มให้ฟอร์ม
9. การสร้างฟอร์มแบบกรอกข้อความ เราสามารถกำหนดค่าเริ่ มต้นให้กบั ฟอร์มกรอกข้อความได้ จากช่อง

ในข้อใด
ก. Label ข. Type
ค. Init Val ง. Multi line
10. การสร้างปุ่ มกด ถ้าเราเลือกรู ปแบบเป็ น None เราสามารถเปลี่ยนชื่อปุ่ มได้ โดยพิมพ์ชื่อที่ตอ้ งการในช่อง
ใด
ก. Action ข. ButtonName
ค. Label ง. Value
หน่วยที่ 10 เรื่อง การใช้ Cascading Style Sheet สัปดาห์ท่ี 13-14 เวลา 8 ชั่วโมง
ในการสร้างเว็บไซต์ ปัญหาหนึ่งที่เรามักพบคือการกำหนดรู ปแบบการแสดงผลของหน้าเว็บ อาทิ เช่น
ฟอนต์ตวั อักษร หรื อระยะห่างระหว่างตัวอักษร ที่เราจะต้องใช้ค ำสัง่ กำหนดให้กบั ทุกหน้าที่สร้างซํ้าๆ กัน เพื่อ
ให้เว็บเพจทุกหน้าในเว็บไซต์น้ี มีรูปแบบเดียวกัน และเมื่อมีการแก้ไขหน้าตาของเว็บไซต์ เราอาจจะต้องเข้าไป
แก้ไขทีละคำสัง่ ในเว็บเพจแต่ละหน้า ซึ่ งทำให้เสี ยเวลาหากเว็บไซต์มีขนาดใหญ่ ดังนั้นเราสามารถใช้สไตล์ใน
พาเนล CSS Style Sheet กำหนดรู ปแบบการแสดงผลของหน้าเว็บเพียง
ค ร ้ ัง เ ด ีย ว ก ส็ า ม า ร ถ น ำ ม า ใ ช ก้ บั เ ว บ็ เ พ จ แ ต ่ล ะ ห น า้ ใ น เ ว บ็ ไ ซ ต ไ์ ด ้
1. สามารถกำหนดรู ปแบบของสไตล์ชีทที่ตอ้ งการได้
2. สามารถใช้งานสไตล์ชีทที่ก ำหนดได้
3. สามารถทำการบันทึกสไตล์ชีทเก็บไว้ใช้งานได้
4. สามารถแก้ไขสไตล์ชีทที่ได้ท ำการบันทึกเก็บไว้แล้วได้
5. สามารถเรี ยกสไตล์ชีทขึ้นมาใช้งาน หรื อลบสไตล์ชีทที่ไม่ตอ้ งการได้
3. ร่ วมสนทนาเกี่ยวกับเรื่ อง การใช้ Cascading 3. ร่ วมสนทนาและแสดงความคิดเห็น
Style Sheet
1. ผูเ้ รี ยนทำแบบฝึ กหัดก่อนเรี ยนเพื่อทดสอบความรู ้พ้ืนฐาน โดยการตอบคำถามเกี่ยวกับหน่วยการเรี ยน
ตามภูมิความรู้ความสามารถของผูเ้ รี ยน
2. ครู ให้ผเู้ รี ยนอ่านใบความรู้เพื่อเตรี ยมความพร้อมในการเรี ยนและตอบคำถามครู ผสู ้ อน
2. ตั้งใจฟังการอธิบาย และแนะนำจากครู
6. ผูเ้ รี ยนสรุ ปความรู้ที่ได้จากการเรี ยนการสอน
1. หนังสือเรี ยนวิชา การสร้างเว็บไซต์ (ด้วย Dreamweaver)
2. ใบความรูป้ ระจำหน่วย
4. เครื่องไมโครคอมพิวเตอร์
5. แผ่นใสและเครื่องฉายภาพข้ามศีรษะ
6. ซีดสี ่อื การสอน
5. มีความพยายามปรับปรุ งแก้ไขใบงานและแบบฝึ กหัดให้ถูกต้องแล้วนำส่ งครู ผสู ้ อน
1. ถ้าผูเ้ รี ยนมีการเตรี ยมตัวในการเรี ยนที่ดี เช่น อ่าน และทำการศึกษาหนังสื อเกี่ยวกับหน่วยการเรี ยน
มากก่อน ถึงชัว่ โมงเรี ยน ผูเ้ รี ยน จะสามารถเรี ยน และทำกิจกรรมต่าง ๆ ที่ครู ผสู ้ อนมอบหมาย ได้อย่างมีความ
ส ุ ข แ ล ะ เ ก ิด ค ว า ม ช อ บ แ ล ะ ส น ุก ก บั ก า ร เ ร ี ย น ใ น ช ้ นั เ ร ี ย น
2. ผ เู้ รี ย น ต อ้ ง ม ีค ว า ม ข ย นั ห ม นั่ ฝึ ก ฝ น บ ท เ รี ย น อ ย เู่ ส ม อ ท ้ งั ก ่อ น แ ล ะ ห ล งั เ รี ย น
3. ผูเ้ รี ย นต อ้ งมีค วามกล า้ ที่จ ะถามเมื่อ สงสัย ท ้ งั ในห้อ งและนอกห้อ งเรี ย นก บั ครู ผ สู ้ อน

1. ทำไมเราต้องเลือกใช้งาน Cascading Style Sheet

ก. กำหนดการแสดงผลของเว็บเพจเพียงครั้งเดียว และสามารถนำไปใช้ ในเว็บเพจอืน่ ๆ ได้
ข. กำหนดให้มีการแสดงผลเว็บเพจที่แตกต่างกันได้ในแต่ละหน้า
ค. สามารถตกแต่งหน้าเว็บเพจได้จากการเข้าไปแก้ไขทีละคำสัง่ ได้
ง. เป็ นการกำหนดรู ปแบบของเว็บเพจแต่ละหน้าได้
2. ในหน้าสร้างสไตล์ใหม่ (New CSS Rule) ตัวเลือกใดใน Selector Type ที่เป็ นการระบุวา่ จะเปลี่ยนรู ปแบบ
การแสดงผลของคำสัง่ HTML
ก. Class ข. Advanced
ค. Tag ง. HTML
3. ข้อใดเป็ นการสร้างสไตล์ชีทแบบกำหนดชื่อใหม่
ก. Class ข. Advanced
ค. Tag ง. HTML
4. ข้อใดเป็ นการทำงานของปุ่ ม
ก. กำหนดสไตล์ชีทใหม่ ข. เรียกไฟล์ สไตล์ ชีทที่สร้ างไว้ มาใช้ งาน
ค. ลบสไตล์ชีท ง. กำหนดสไตล์ชีทใหม่โดยใช้แบบจากสไตล์ชีทเดิม
5. ข้อใดคือวิธีการเรี ยกสไตล์ข้ ึนมาแก้ไข

ก. เลือกสไตล์ในพาเนล CSS Style และแก้ไขในส่ วนของ CSS Properties
ข. ดับเบิ้ลคลิกที่สไตล์ในพาเนล CSS Style
ค. ดับเบิ้ลคลิกที่ชื่อไฟล์นามสกุล .css ในพาเนล Files
6. การลบสไตล์ชีท เราสามารถทำการลบได้ดว้ ยวิธีใด

ก. เลือกสไตล์ชีทที่จะลบ แล้วคลิกเมาส์ ปมขวาเลื
ุ่ อกคำสั่ ง Delete
ข. คลิกเมาส์ที่สไตล์ชีท แล้วลากมาทิ้งไว้ที่ไอคอน
ค. คลิกเมาส์ที่สไตล์ชีท และกดปุ่ ม <Delete> ที่คียบ์ อร์ด
ง. ถูกทั้งข้อ ก และ ข
7. เราสามารถเปิ ดหน้าต่าง Cascading Style Sheet ได้จากข้อใด

ก. Text>CSS Styles ข. Commands>CSS Styles
ค. Windows>CSS Styles ง. View>CSS Styles
8. ปุ่ มคำสัง่ ในข้อใด เป็ นรู ปแบบการกำหนดสไตล์ชีทใหม่ โดยใช้แบบจากสไตล์ชีทเดิม

ก. ข.
ค. ง.
9. ข้อใดคือรู ปแบบการใช้งานสไตล์ชีทแบบ Linked

ก. สร้ างสไตล์ชีทที่กำหนดรู ปแบบการแสดงผลเป็ นไฟล์ แยกไฟล์ เดียว และนำ Link
เข้ ากับเว็บเพจแต่ ละหน้ าในเว็บไซต์
ข. การเขียนสไตล์ลงไปในเอกสาร HTML โดยตรง
ค. กำหนดสไตล์ที่ต ำแหน่งใดๆ ในเอกสารได้
ง. เป็ นการเชื่อมโยงรู ปแบบที่สร้างขึ้นไปยังเว็บไซต์อื่น
10. ข้อใดไม่ใช่คุณสมบัติที่เราสามารถกำหนดให้กบั สไตล์ชีทได้

ก. ข้อความ และการจัดวาง ข. ตัวอักษร และขนาด
ค. สี และพื้นฉากหลัง ง. การทำซ้ำคำสั่ งที่ได้ กำหนดไว้ ก่อนหน้ านีแ้ ล้ ว
ตอนที่ 3 จงตอบคำถามต่ อไปนี้
1. จงบอกคุณสมบัติของสไตล์ชีทที่เราสามารถกำหนดได้
สไตล์ ชีทมีคณ
ุ สมบัติที่เราสามารถกำหนดได้ แบ่ งเป็ น 5 ประเภทคือ
 คุณสมบัติเกี่ยวกับฟอนต์ ขนาด ลักษณะต่ างๆ
 คุณสมบัติเกี่ยวกับข้ อความ การจัดวาง ระยะห่ าง
 คุณสมบัติเกี่ยวกับสี พืน้ ฉากหลัง
 คุณสมบัติเกี่ยวกับกรอบ
 คุณสมบัติเกี่ยวกับหน่ วยวัด
2. การใช้งานสไตล์ชีททั้งหมดมีอยูก่ ี่รูปแบบ อะไรบ้าง
การใช้ งานสไตล์ ชีทมีทั้งหมด 3 รูปแบบ คือ
 Embedded การเขียนสไตล์ ลงไปในเอกสาร HTML โดยตรง โดยจะรวมเป็ นชุดและจะวางไว้ ก่อนคำสั่ง
<BODY> ซึ่ งจะมีผลกับเฉพาะเอกสาร HTML นั้น
 Inline กำหนดสไตล์ ที่ต ำแหน่ งใดๆ ในเอกสารได้ แต่ วิธีนีไ้ ม่ ต่างจากการกำหนดรู ปแบบ ต ัว
อักษรให้ กับข้ อความทีละส่ วนเหมือนกับที่ เราเคยทำอยู่มากนัก นอกจากเราจะใช้ เพื่อลบล้ างสไตล์ เดิมที่
เคยกำหนดไว้ ใน Dreamweaver ไม่ มีค ำสั่ งโดยตรงสำหรั บการกำหนดสไตล์ ชี ทแบบนี ้ นอกจากเราจะ
แก้ ไขโค้ ด HTML เอง
 Linked สร้ างสไตล์ ชีทที่ก ำหนดรู ปแบบการแสดงผลของหน้ าเว็บเพจเป็ นไฟล์ แยกไฟล์ เดียว (มีนามสกุล
เป็ น .css) และนำมา Link เข้ ากับเว็บเพจแต่ ละหน้ าในเว็บไซต์ โดยเมื่อใดที่ ต้องมีการเปลี่ยนแปลงสไตล์
ของหน้ าเว็บเพจ ก็ท ำได้ โดยการเปลี่ยนค่ าที่ ก ำหนดไว้ ในสไตล์ ชีท หน้ าเว็บเพจทั้งหมดที่ ใช้ สไตล์ ชีท
นั้นก็จะเปลี่ยนตาม
หน่วยที่ 11 เรื่อง การใช้ มัลติมีเดีย สัปดาห์ท่ี 15 เวลา 4 ชั่วโมง
ปั จจุบนั มีการใช้โปรแกรมมัลติมีเดียเข้ามาช่วยในการทำงาน เมื่อนำเข้ามาประกอบในเว็บเพจ จึงสร้าง
ความตื่นตาตื่นใจ ให้กบั ผูท้ ี่ได้เข้ามาเยีย่ มชมในเว็บของเรา ซึ่ งบางส่ วนก็เป็ นโปรแกรมสำเร็ จรู ป บางส่ วนก็ตอ้ ง
เรี ยนรู ้การเขียนโค้ดโปรแกรมเพิ่มเติมแต่กช็ ่วยให้พฒั นาให้เราสามารถสร้างความน่าสนใจตามที่เราตั้งใจเอาไว้
ไ ด
1. รู ้จกั กับโปรแกรมต่างๆ ที่ใช้สำหรับการสร้างงานมัลติมีเดียบนเว็บ
2. รู ้จกั ความสามารถของโปรแกรมต่างๆ ที่ใช้ในการสร้างสรรค์งานบนเว็บ
3. รู ้จกั การนำไฟล์ภาพเคลื่อนไหว และมัลติมีเดียลงเว็บ
4. รู ้รายละเอียดการทำงานของภาษา และปลัก๊ อินต่างๆ ที่ใช้งานบนหน้าเว็บได้
5. สามารถปรับแต่งภาพกราฟิ กให้มีขนาดที่ตอ้ งการได้
6. เข้าใจความสามารถของโปรแกรมมัลติมีเดียต่างๆ เพื่อนำไปใช้งานได้
7. สามารถใช้งานคำสัง่ ต่างๆ เพื่อจัดการกับภาพมัลติมีเดียบนเว็บได้
8. จะรู้จกั กับเทคนิคการสร้างปุ่ มของข้อความที่สวยงามไม่เหมือนใครได้
3. ร่ วมสนทนาเกี่ยวกับเรื่ อง การใช้ มัลติมีเดีย 3. ร่ วมสนทนาและแสดงความคิดเห็น
7. วัดผลประเมินผล 6
8. กิจกรรมเสนอแนะ 7

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

ก. Authorware, Photoshop ข. Flash , Photoshop
ค. Director, Flash ง. Photoshop, ActiveX
3. การแทรกองค์ประกอบของไฟล์มลั ติมีเดียรู ปแบบต่างๆ บนเว็บเพจ สามารถเรี ยกใช้งานได้จากแท็บใด

ก. Script
ข. Application
ค. Common
ง. Layout
4. โปรแกรม Authorware นิยมนำไปใช้ในการสร้างงานมัลติมีเดียในรู ปแบบใด

ก. การสร้างเกมส์ออนไลน์
ข. การสร้างภาพเคลื่อนไหวมัลติมีเดีย
ค. การสร้ าง CAI หรือโปรแกรมคอมพิวเตอร์ ช่วยสอน
ง. การตกแต่งภาพกราฟฟิ ก
10. ข้อใดเป็ นลักษณะของภาพแบบ Vector-based

ก. องค์ประกอบของรู ปภาพมีลกั ษณะเป็ นลายเส้ น
ข. องค์ประกอบของรู ปภาพเป็ นแบบจุดสี
ค. มีขนาดของไฟล์ภาพที่ใหญ่
ง. เมื่อทำการขยายภาพให้มีขนาดใหญ่ข้ ึนทำให้ภาพไม่ชดั เจน
ตอนที่ 2 จงตอบคำถามต่อไปนี้ให้สมบูรณ์
1. แนะนำ และอธิบายโปรแกรมที่ใช้ในงานสร้างภาพกราฟิ ก และมัลติมีเดียบนเว็บ
1. เลือก ที่เมนู Common หรื อกดคีย์ <Ctrl+Alt+F> หรื อเลือกเมนู Insert>Media> Flash เพื่อแทรก
ไฟล์ .swf ที่สร้ างโดย Flash
2. ดับเบิล้ คลิกเลือกไฟล์ Flash ที่ต้องการ
3. จะปรากฏ ขึน้ ที่หน้ าเว็บแสดงถึงไฟล์ Flash ที่ แทรกเข้ ามาในหน้ าเว็บ
4. 4.เราสามารถทดสอบการใช้ งานไฟล์ Flash ที่ แทรกเข้ ามาในหน้ าเว็บในโปรแกรม Dreamweaver ได้
เลย โดยไม่ ต้องไปเปิ ดผ่ านทางบราวเซอร์ โดยให้ เราคลิกเมาส์ ปุ่ม จาก
Property Inspector
2. จงบอกวิธีีการดึงไฟล์ภาพเคลื่อนไหวจากโปรแกรม Flash มาแสดงบนเว็บ

1. เลือก ที่เมนู Common หรื อกดคีย์ <Ctrl+Alt+F> หรื อเลือกเมนู Insert>Media> Flash เพื่อ
แทรกไฟล์
.swf ที่สร้ างโดย Flash
2. ดับเบิล้ คลิกเลือกไฟล์ Flash ที่ ต้องการ
3. จะปรากฏ ขึน้ ที่หน้ าเว็บแสดงถึงไฟล์ Flash ที่ แทรกเข้ ามาในหน้ าเว็บ
4. เราสามารถทดสอบการใช้ งานไฟล์ Flash ที่ แทรกเข้ ามาในหน้ าเว็บในโปรแกรม Dreamweaver
ได้ เลย โดยไม่
ต้ องไปเปิ ดผ่ านทางบราวเซอร์ โดยให้ เราคลิกเมาส์ ปุ่ม จาก Property Inspector
3. จงบอกความแตกต่างระหว่าง Javascript และ Java applet

JavaScript เป็ น คำสั่ง Java ที่เ ราสามารถนำมาใช้ ใ นเว็บ เพจให้ มีล กู เล่ น มากขึน้ เช่ น สร้ า งปุ่ มที่
เคลื่อนไหวได้ หรื อสร้ างแบบฟอร์ มที่ สามารถตอบโต้ กับผู้ใช้ ได้ เมื่อมีการกรอกข้ อมูลผิด เราอาจกล่ าวได้
JavaScript เป็ นอีกทางเลือกหนึ่งนอกจากภาษา HTML สำหรั บการนำมาใช้ สร้ างเว็บเพจ JavaScript ต่ าง
จาก Java applet ตรงที่ JavaScript เกี่ยวข้ องกับการสร้ างเว็บไซต์ ไม่ ใช่ โปรแกรมที่ มีหน้ าที่ เฉพาะเจาะจง
หน่วยที่ 12 เรื่อง การสร้ างลูกเล่นด้ วย Behavior สัปดาห์ท่ี 16 เวลา 4 ชั่วโมง
สำหรับคนที่เข้าเว็บไซต์ต่างๆ บ่อยๆ คงจะเคยเห็นว่า เมื่อเลื่อนเมาส์ไปบริ เวณหนึ่งของเว็บไซต์ จะ
ปรากฏว่า จะมีการเปลี่ยนสี หรื อเปลี่ยนภาพ หรื อเมื่อเปิ ดเว็บใดเว็บหนึ่ง จะมีหน้าต่างๆ เล็กปรากฏตรงกลางจอ
แสดงข้อ ความยิน ดีต อ้ นรับ หรื อ อื่น ๆ เหล่า นี้เ ป็ น เพีย งบางส่ ว นจากความสามารถที่เ รี ย กว่า Behaviors
1. เลือก Behaviors ให้ตรงกับบราวเซอร์ที่ผชู ้ มใช้เปิ ดดูหน้าเว็บเรา
2. เพิ่มลูกเล่นบนเว็บด้วย Behaviors ได้
3. ร่ วมสนทนาเกี่ยวกับเรื่ อง การใช้ Behavioes 3. ร่ วมสนทนาและแสดงความคิดเห็น

1. ข้อใดกล่าวไม่ถูกต้อง
ก. Behaviors เป็ นการแทรกโค้ด JavaScript ในหน้าเว็บเพื่อโต้ตอบกับผูใ้ ช้
ข. Behaviors เป็ นความสามารถที่ต้องโหลดเข้ ามาไว้ เพิม่ เติม
ค. Behaviors เป็ นสคริ ปต์ที่รันบนบราวเซอร์
ง. Event คิือ เหตุการณ์ที่เกิดจากการกระทำบางอย่างของผูใ้ ช้
2. Behaviors ประกอบด้วย 2 ส่ วนในการกำหนดพฤติกรรมของออบเจ็กต์ในหน้าเว็บ คือ

ก. Event กับ Code ข. Code กับ Script
ค. Script กับ Event ง. Event กับ Action
3. ออบเจ็กต์ใดที่ไม่สามารถกำหนด Behaviors ได้

ก. รู ปภาพ ข. ลิงค์
ค. ข้ อความทั่วไป ง. ออบเจ็กต์ของฟอร์ม
4. Behaviors เรี ยกให้แสดงได้ โดยเลือกปุ่ มใด

ก. <Shift>+<F1> ข. <Shift>+<F2>
ค. <Shift>+<F3> ง. <Shift>+<F4>
5. ข้อใดไม่ใช่ Event
ก. OnKey ข. OnAfterPrint
ค. OnMove ง. OnReset.
6. เมื่อต้องการให้ท ำงานชิ้นหนึ่ง หลังจากโหลดหน้าเว็บเสร็ จสิ้ น เลือกใช้อีเวนต์ใด

ก. OnSuccess ข. OnLoad
ค. OnFinish ง. OnSubmit,
7. ถ้าต้องการให้ท ำงานชิ่้นหนึ่ง หลังจากส่ งค่าในฟอร์มไปประมวลผลแล้ว เลือกใช้อีเวนต์ใด

ก. OnSuccess ข. OnLoad
ค. OnFinish ง. OnSubmit
8. OnDeactivate คืออีเวนต์ที่ท ำงานในลักษณะใด

ก. เกิดเมื่อออบเจ็กต์น้ นั กำลังทำงานอยู่
ข. เกิดเมื่อผูใ้ ช้หยุดโหลดข้อมูลของบราวเซอร์กลางคัน
ค. เกิดเมื่อผูใ้ ช้ปิดหน้าเว็บ
ง. เกิดเมื่อออบเจ็กต์ เสียการทำงานให้ กบั ออบเจ็กต์ อนื่
9. OnActivate คืออีเวนต์ที่ท ำงานในลักษณะใด
ก. เกิดเมื่อออบเจ็กต์ น้นั กำลังทำงานอยู่
ข. เกิดเมื่อผูใ้ ช้หยุดโหลดข้อมูลของบราวเซอร์กลางคัน
ค. เกิดเมื่อผูใ้ ช้ปิดหน้าเว็บ
ง. เกิดเมื่อออบเจ็กต์เสี ยการทำงานให้กบั ออบเจ็กต์อื่น
10. อีเวนต์และแอ็คชัน่ ใด ใช้เปิ ดหน้าต่างบราวเซอร์ข้ ึนใหม่โดยอัตโนมัติ

ก. OnLoad และ Popup Window
ข. OnOpen และ Open Browser Window
ค. OnLoad และ Open Browser Window
ง. OnOpen และ Popup Window
แผนจัดการเรียนรู้วชิ า การสร้ างเว็บไซต์ (ด้วย Dreamweaver) รหัสวิชา 2204-2009 ชั้น ปวช.

หน่วยที่ 13 เรื่อง การอัพโหลดไฟล์ส่ ู เว็บไซต์ สัปดาห์ท่ี 17 เวลา 4 ชั่วโมง
เข้าใจเกี่ยวกับการจัดโครงร่ างไฟล์ การจัดและเปลี่ยนแปลงโครงสร้างโฟลเดอร์ในเว็บไซต์ การตรวจ
สอบแก้ไ ข Link และการท ำงานด้า นอื่น ๆ ที่ท ำให้ง านมีร ายละเอีย ดในหน้า ต่า งเว็บ ไซต์ท ี่ส วยงาม
1. เข้าใจเรื่ องการจัดโครงสร้างไฟล์ และเปลี่ยนแปลงโครงสร้างไฟล์ในเว็บไซต์ได้
2. สามารถตรวจสอบ Link ในเว็บไซต์ก่อนที่จะอัพโหลดเว็บเพจลงระบบเครื อข่ายอินเทอร์เน็ต
3. สามารถแก้ปัญหา Broken Link ได้
4. ทดสอบการแสดงผลเว็บเพจบนบราวเซอร์แต่ละรุ่ นได้
5. มีความเข้าใจเกี่ยวกับการติดต่อ หรื อติดตั้งเซิ ร์ฟเวอร์เพื่อขอใช้พ้ืนที่เว็บไซต์ได้
6. ขอพื้นที่เว็บไซต์ฟรี โดยการลงทะเบียนเพื่อให้มีพื้นที่ส่วนตัวบนระบบเครื อข่ายอินเทอร์เน็ตได้
7. กำหนดรายละเอียดเกี่ยวกับเครื่ องเว็บเซิ ร์ฟเวอร์ในหน้าต่าง Site ได้
8. เข้าใจรายละเอียดเพิ่มเติมของหน้าต่าง Site Definition และสามารถจัดการได้อย่างถูกต้อง
9. สามารถนำเว็บเพจที่สร้างไว้อพั โหลดไปยังเว็บเซิ ร์ฟเวอร์ได้ส ำเร็ จ
10. เข้าใจและทำการดาวน์โหลดไฟล์ผา่ น FTP ได้
11. สามารถลบไฟล์บนเซิร์ฟเวอร์ได้
2.ให้นกั ศึกษาค้นคว้าความหมายของการ 2. ค้นคว้าความหมายของการอัพโหลดไฟล์สู่
อัพโหลดไฟล์สู่เว็บไซต์ การจัดโครงร่ างไฟล์ข้ นั เว็บไซต์ การจัดโครงร่ างไฟล์ข้ นั ตอนต่าง ๆ
ตอนต่าง ๆ ในการอัพโหลดไฟล์ ในการอัพโหลดไฟล์
3. ร่ วมสนทนาเกี่ยวกับเรื่ องการอัพโหลดไฟล์สู่ 3. ร่ วมสนทนาและแสดงความคิดเห็น
1. ค้นคว้าความหมายของการอัพโหลดไฟล์สู่เว็บไซต์ การจัดโครงร่ างไฟล์ข้ นั ตอนต่าง ๆ ในการ
อัพโหลดไฟล์
1. ผูเ้ รี ยนร่ วมกันศึกษาเนื้อหาตามครู แล้วตอบคำถามและแสดงความคิดเห็น
3. ผูเ้ รี ย นควรฝึ ก ห ดั ในการเขีย นสัญ ล กั ษณ์ข องวงจรพร้อ มนิย ามของวงจรแต ่ล ะชนิด
4. ผ เู้ ร ี ย น ต อ้ ง ม ีค ว า ม พ ย า ย า ม แ ล ะ ม ีท ศั น ค ต ิท ี่ด ีใ น เ น ื้ อ ห า บ ท เ ร ี ย น

1. Broken Link ในเว็บไซต์เกิดจากสาเหตุใด

ก. เกิดจากมีการกำหนดลิงค์ให้เชื่อมโยงกับไฟล์ที่เราคิดว่าจะสร้าง แต่สุดท้ายก็ไม่ได้สร้าง
ข. เกิดจากการไม่ได้อพั เดตลิงค์เมื่อมีการเปลี่ยนแปลงโครงสร้างของเว็บไซต์
ค. เกิดจากการนำเข้าไฟล์เว็บเพจที่เคยสร้างที่อื่นเข้ามารวมในเว็บไซต์
ซึ่ งมีลิงค์เดิมอยูท่ ี่ใช้งานไม่ได้
ง. ถูกทุกข้ อ
2. คำสัง่ ใดในโปรแกรม Dreamweaver ที่ใช้ในการตรวจสอบลิงค์

ก. File>Check Links
ข. File>Check Pages
ค. File>Check Page>Check Links
ง. ข้ อ ก และ ค
3. ปัญหาที่เกิดจากความแตกต่างกันของบราวเซอร์ในการแสดงผลคืออะไร
ก. หน้าเว็บจะเรี ยกบราวเซอร์ท้ งั สองให้แสดงขึ้นมาพร้อมกัน
ข. หน้าเว็บจะเปิ ดขึ้นช้ามากหากไม่ได้ถูกออกแบบมาเพื่อบราวเซอร์น้ นั
ค. หน้าเว็บนั้นเกิดข้อผิดพลาด และทำให้เครื่ องต้องรี บู๊ตใหม่หากไม่ได้ถูกออกแบบมา
เพื่อบราวเซอร์น้ นั
ง. หน้ าเว็บที่ออกแบบเพือ่ เปิ ดบนบราวเซอร์ หนึ่งจะไม่ สามารถเปิ ดบนอีกบราวเซอร์ หนึ่งได้
อย่ างสมบูรณ์
4. วิธีขอพื้นที่เว็บไซต์วิธีใดใช้งบประมาณมากที่สุด
ก. ติดตั้งอินเทอร์เน็ตความเร็ วสูง
ข. ติดตั้งเว็บเซิร์ฟเวอร์ ด้วยตัวเอง
ค. ขอเช่าพื้นที่ในเว็บเซิร์ฟเวอร์ของผูอ้ ื่น
ง. ขอพื้นที่ฟรี ในเว็บเซิร์ฟเวอร์
5. การเชื่อมต่ออินเทอร์เน็ตรู ปแบบใดที่ไม่เหมาะสำหรับการทำงานเป็ นบริ ษทั หรื อองค์กร
ก. เชื่อมต่อโดยใช้ Leased line ข. เชื่อมต่ อโดยใช้ Modem
ค. เชื่อมต่อแบบ ADSL ง. เชื่อมต่อโดยมีเครื่ องเซิ ร์ฟเวอร์เป็ นของตัวเอง
6. ข้อใดคือปัจจัยสำคัญที่เราควรพิจารณาในการขอเช่าพื้นที่ในเว็บเซิ ร์ฟเวอร์
ก. ขนาดพื้นที่สำหรับเก็บข้อมูล ข. ความเร็ วในการรับส่ งข้อมูล
ค. การจำกัดปริ มาณข้อมูลที่รับส่ ง ง. ถูกทุกข้ อ
7. หลังจากที่เราได้ขอพื้นที่เว็บไซต์แล้ว จงเรี ยงลำดับขั้นตอนต่อไปในการอัพโหลดเว็บเพจ

a. เชื่อมต่อกับเครื่ องเว็บเซิร์ฟเวอร์
b. กำหนดรายละเอียดเกี่ยวกับเครื่ องเว็บเซิ ร์ฟเวอร์
c. อัพโหลดไฟล์ไปยังเครื่ องเว็บเซิร์ฟเวอร์
ก. abc ข. bca
ค. bac ง. acb
8. คำสัง่ ใดในโปรแกรม Dreamweaver ที่ใช้ในการทดสอบการแสดงผลบนบราวเซอร์

ก. File->Check Browser ข. File->Check Pages->Browser Compatibility
ค. File->Check Page->Check Browser ง. File->Check->Browser Compatibility
9. การใช้ค ำสัง่ Check Out เพื่อดาวน์โหลดไฟล์จากเครื่ องเว็บเซิ ร์ฟเวอร์ มีประโยชน์อย่างไร

ก. เพื่อใช้ควบคุมการเข้าถึงไฟล์จากผูบ้ ุกรุ ก
ข. เพื่อใช้ควบคุมการเข้าถึงไฟล์ในการโอนถ่ายข้อมูล
ค. เพื่อใช้ควบคุมการแก้ไขไฟล์ก่อนอัพโหลดข้อมูลลงเครื่ องเว็บเซิ ร์ฟเวอร์
ง. เพือ่ ใช้ ควบคุมการแก้ไขไฟล์โดยแต่ ละคนในทีมงานไม่ ให้ ซ้ำซ้ อนกัน
10. ข้อใดถูกต้องเกี่ยวกับการอัพโหลดข้อมูล
ก. จะทำก็ต่อเมื่อต่ อกับเครื่องเซิร์ฟเวอร์ แล้ ว
ข. สามารถอัพโหลดไปฝากไว้กบั เครื่ องเซิ ร์ฟเวอร์ใดก็ได้โดยไม่ตอ้ งขออนุญาต
ค. เป็ นการนำข้อมูลเข้ามาสู่ เครื่ อง Client
ง. หากผูใ้ ดต้องการใช้ไฟล์ที่อพั โหลดแล้วนั้น ต้องติดต่อมายังเครื่ องของเราก่อนทุกครั้ง
ตอนที่ 2 จงตอบคำถามต่ อไปนี้ ลงในช่ องว่างที่กำหนดให้
1. จงสรุ ปวิธีการขอพื้นที่ฟรี ในเว็บเซิร์ฟเวอร์

1. เข้ าสู้เว็บบริ การพืน้ ที่ฟรี
2.ลงทะเบียนเป็ นสมาชิ กฟรี ตามขัน้ ตอนของเว็บไซต์ นั้นๆ
3.ได้ พืน้ ที่ฟรี สามารถเข้าไปเยี่ยมชมเว็บไซต์ ของตนเองได้
2. จงเปรี ยบเทียบข้อดีขอ้ เสี ยระหว่างการขอพื้นที่เว็บไซต์ 3 แบบจากเนื้อหาข้างต้น

1. ติดตั้งเว็บเซิ ร์ฟเวอร์ เอง มีต้นทุนสู ง ยุ่งยากในการดูแลเซิ ร์ฟเวอร์ ความเร็ วในการให้ บริ การสู ง
2. ขอเช่ าพืน้ ที่เว็บเซิ ร์ฟเวอร์ ของผู้อื่น เสี ยเฉพาะค่ า เช่ า ราคาไม่ แพงไม่ ต้อ งวุ่น วายในการดูแล
เซิ ร์ฟเวอร์ ได้ ความเร็วจำกัดเพราะต้ องแบ่ งกับผู้เช่ ารายอื่น
3. ขอพืน้ ที่ฟรี ไม่ เสี ยค่ าใช้ จ่าย ไม่ ว่ นุ วายเรื่ องเซิ ร์ฟเวอร์ เพราะเป็ นบริ การสาธารณะ ความเร็ วที่ ได้
ต่ำที่สุด เนื่องจากมีผ้ แู บ่ งใช้ จ ำนวนมาก

2204 2009 Dreamweaver cs6

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

2204 2009 Dreamweaver cs6

Uploaded by

Copyright:

Available Formats

คู่มือแผนการสอน

หลักสู ตรประกาศนียบัตรวิชาชีพ(ปวช.) พุทธศักราช 2556

รหัสวิชา 2204-2009 วิชา การสร้ างเว็บไซต์ (ด้ วย Dreamweaver)

แผนจัดการเรี ยนรู้ เรื่ อง การใช้ Cascading Style Sheet

หน่ วยที่ จุดประสงค์การเรียนรู้ เครื่องมือวัดผล คะแนน หมายเหตุ

1. รหัสวิชา 2204-2009 ชื่อวิชา การสร้างเว็บไซต์ (ด้วย Dreamweaver) ระดับชั้น ปวช.

9-10 บทที่ 7 การออกแบบเลย์ เอาท์ - ให้นกั ศึกษาค้นคว้าหน่วย

13-14 บทที่ 10 การใช้ Cascading Style Sheet - ให้นกั ศึกษาค้นคว้าหน่วย

15 บทที่ 11 การใช้มลั ติมีเดีย - บรรยาย

2. ผลการเรียนรู้ ทคี่ าดหวัง

1. การติตด่อสื่ อสารบนเครื อข่ายอินเทอร์เน็ต เราเรี ยกเครื่ องรับบริ การว่าอะไร

5. ในขณะที่ท ำงานอยูใ่ นมุมมองการออกแบบ หากต้องการให้ดูหน้าเว็บแบบเหมือนจริ งๆ เหมือนดูผา่ น

ตอนที่ 2 จงตอบคำถามต่ อไปนี้ ลงในช่ องว่างที่กำหนดให้

2. ยกตัวอย่างเอกสารแบบต่างๆ ที่สร้างสามารถด้วย Dreamweaver มา 5 ตัวอย่าง

3. อธิ บายส่ วนประกอบของแถบสถานะ ดังรู ป

1 -----2---------------- ------3------- ---4------ ------5-----------

เฉลยแบบฝึ กหัด หน่ วยที่ 2

2. ปั จจุบนั การกำหนดภาษาไทยบนเว็บ มีอยู่ 2 รู ปแบบ คือข้อใด

3. หากต้องการรองรับการทำงานข้ามระบบ รวมไปถึงการแสดงผลตัวอักษรบนอุปกรณ์พกพา ควรเลือกรู ป

4. องค์ประกอบบนหน้าเว็บ เช่น ตาราง รู ปภาพ แบบฟอร์ม เรี ยกว่าอะไร

5. Alternate text คือ การกำหนดค่าใด

6. หากต้องการขึ้นบรรทัดใหม่ในย่อหน้าเดิม ให้กดปุ่ มใดต่อไปนี้

7. คำสัง่ File>Save to Remote Server เป็ นคำสัง่ ไว้สำหรับทำงานใด

9. ปุ่ มใด ใช้ยอ้ นการทำงานไป 1 ขั้นตอน

10. ปุ่ มใดใช้เรี ยกพาเนล History

เฉลยแบบฝึ กหัด หน่ วยที่ 3

1. แท็ก <p> เป็ นการเลือกข้อความในลักษณะใด

2. แท็ก <body> เป็ นการเลือกข้อความในลักษณะใด

7. คียใ์ ดใช้ในการเว้นวรรคหลายๆ ครั้ ง

เฉลยแบบฝึ กหัด หน่ วยที่ 4

5. ข้อจำกัดของไฟล์ฟอร์แมตแบบ GIF คืออะไร

6. ข้อใดเป็ นคียล์ ดั ในการเพิม่ ภาพเข้าไปในเว็บเพจ

8. รู ปแบบการวางตำแหน่งของข้อความแบบใดที่ท ำให้ขอบล่างของภาพอยูต่ รงกับแนวล่างสุ ด ข อ ง

9. คำสัง่ ใดเป็ นคำสัง่ เริ่ มต้นให้ไฟล์ภาพแสดงเป็ นพื้นหลังเว็บเพจ

10. เครื องมือ ใน Properties Inspector ใช้ปรับแต่งสิ่ งใด

ตอนที่ 2 จงตอบคำถามต่อไปนี้ ลงในช่องว่างที่ก ำหนดให้

1. จงบอกความรู้พ้ืนฐานเกี่ยวกับการแสดงภาพบนเว็บมา 3 ข้อ พร้อมทั้งอธิ บายอย่างคร่ าวๆ

2. จงอธิ บายถึงความแตกต่างในการบีบอัดข้อมูลภาพของไฟล์ภาพแบบ GIF, JPEG และ PNG

ฟอร์ แมต PNG

3. หากต้องการให้ภาพบนเว็บเพจมีขอ้ ความกำกับภาพ ควรทำอย่างไร (ให้บอกมาเป็ นขั้นตอน)

4. หากต้องการให้ภาพบนเว็บเพจอยูข่ อบล่างของภาพตรงกับแนวล่างสุ ดของข้อความ ควรทำอย่างไร

เฉลยแบบฝึ กหัด หน่ วยที่ 5

1. การสร้างตารางลงบนเว็บเพจด้วยโปรแกรม Dreamweaver ทำได้กี่วิธี

3. การเลือกเซลล์เพื่อแก้ไขตาราง โดยเลือกเซลล์ที่ไม่อยูต่ ิดกัน ต้องกดคียใ์ ดค้างไว้ขณะเลือก

4. หากต้องการระบุสีเส้นขอบของตาราง ต้องกำหนดที่ช่องใดใน Property Inspector

5. การจัดเรี ยงข้อความในตารางแบบ Default เป็ นอย่างไร

8. คำสัง่ Insert>Table Objects>Import Tabular Data สำหรับทำอะไร

9. ในการเรี ยงลำดับข้อมูลในตาราง คำสัง่ Sort header rows จะมีผลของการเรี ยงลำดับ ข้อมูลแบบใด

เฉลยแบบฝึ กหัด หน่ วยที่ 6

3. เราสามารถสร้างการเชื่อมโยงแบบ Map Link ได้โดยวิธีใด

4. การเชื่อมโยงด้วย Anchor ต้องพิมพ์เครื่ องหมายใด ไว้หน้าชื่อที่ต้ งั ไว้ในช่อง Link ทุกครั้ง

8. เมื่อเรานำเมาส์ไปวางที่ภาพที่จะทำการเชื่อมโยง แล้วภาพนั้นเปลี่ยนเป็ นภาพใหม่ และเมื่อนำเมาส์ออก

9. ปุ่ มคำสัง่ เป็ นคำสัง่ ที่ใช้กบั การเชื่อมโยงข้อมูลในแบบใด

10. การเชื่อมโยงเพื่อส่ งอีเมล โปรแกรมใดจะถูกเปิ ดขึ้นมา

1. ถ้าเราจะทำการจัดวางองค์ประกอบบนหน้าเว็บเพจ โดยแบ่งเป็ นส่ วนหัวของเว็บ, เนื้อหาและหัวข้อต่างๆ

2. ในการวางเลย์เอาท์โดยใช้ CSS ถ้าต้องการเลือกรู ปแบบเลย์เอาท์ที่จะเปลี่ยนขนาดความกว้างตามขนาด

3. เครื่ องมือใด ต่อไปนี้ ที่ช่วยในการวางเลย์เอาท์

4. ไฟล์ภาพแบบใด ไม่สามารถนำมาใช้ในการเป็ นภาพต้นแบบได้

5. Spacer Image ช่วยในการวางเลย์เอาท์อย่างไร

6. Specer Image มีขนาดเท่าไหร่

เฉลยแบบฝึ กหัด หน่ วยที่ 8

1. คำสัง่ View>Visual Aids>Frame Borders เป็ นคำสัง่ อะไร

2. เฟรมสำเร็ จรู ปที่เตรี ยมไว้ จะอยูใ่ นเมนูใด