กิจกรรมที่ 4(1)

บทเรียนโมดลู
หนว่ ยท่ี 6
เรือ่ ง การสร้างเว็บไซต์ดว้ ยโปรแกรม
Dreamweaver CS6
รายวชิ าการออกแบบและพฒั นาเว็บไซต์
ระดับประกาศนยี บตั รวิชาชีพชั้นสงู

ผู้จดั ทา
นางสาวเกศินี วงั วัด

วทิ ยาลยั การอาชีพแกลง
สานกั งานคณะกรรมการการอาชีวศึกษา

คำนำ

บทเรยี นโมดลู ชุดที่ 6 เรือ่ งการสร้างเว็บไซต์ดว้ ยโปรแกรม Dreamweaver CS6 ฉบับน้ี ขา้ พเจ้าเรียงข้นึ
เพื่อใช้ประกอบการเรียนตามรายวิชาการออกแบบและพัฒนาเว็บ รหัสวิชา 3901-2005 ระดับประกาศนียบัตร
วชิ าชีพชั้นสงู โดยพยายามเขียนเพ่ือให้นักเรียน นักศึกษาสามารถศึกษาได้ด้วยตัวเอง เพื่อให้มีความรู้ความเข้าใจ
ก่อนท่ีศึกษาเน้ือหาน้ัน และยังเพ่ิมเติมเน้ือหาบางส่วนเพื่อช่วยเสริมความรู้ความเข้าใจแก่นักเรียน นักศึกษา
นอกจากน้ยี ังไดเ้ พิ่มใบความร้แู ละกจิ กรรมเสรมิ เพอ่ื ใหน้ ักเรียน นกั ศกึ ษามปี ระสบการณก์ ว้างขวางย่ิงขน้ึ

บทเรียนโมดูลชุดนี้มีจุดประสงค์เพื่อให้นักเรียน นักศึกษามีการศึกษาข้อมูลพ้ืนฐานเพ่ือให้สามารถ
ออกแบบและพฒั นาเว็บไซต์ในงานธุรกิจได้อย่างเหมาะสมในหน่วยน้ีจะประกอบไปด้วยเนื้อหาที่จาเป็นต้องเรียนรู้
ได้แก่ รู้จักกับโปรแกรม Dreamweaver CS6 ส่วนประกอบของโปรแกรม Dreamweaver CS6 การสร้างไซต์
การ จัดการโครงร่างเว็บไซต์ด้วยตาราง การสร้างแม่แบบเอกสารเว็บด้วยโปรแกรม Adobe Dreamweaver CS6
การ เรยี กใชง้ านแม่แบบเอกสารเวบ็

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

สำรบญั หนำ้
ก
คำนำ ข
สำรบัญ 1
คาชี้แจงในการใชม้ อดูลสาหรับนกั เรยี น 2
แบบทดสอบกอ่ นเรียน 4
เฉลยแบบทดสอบก่อนเรียน 5
ใบความรู้ 7
กจิ กรรมที่ 1 8
กิจกรรมท่ี 2 10
แบทดสอบหลังเรียน 12
เฉลยแบบทดสอบหลงั เรยี น

คาช้ีแจงในการใช้มอดลู สาหรบั นกั เรียน

เอกสารเล่มนเี้ ปน็ เอกสารทใ่ี ช้ประกอบการเรยี น นักเรียนสามารถศึกษาไดด้ ้วยตนเอง โดยให้ นักเรียน
ศกึ ษาและปฏิบัตติ ามขัน้ ตอนดงั ตอ่ ไปน้ี

1. ศึกษาจดุ ประสงค์การเรียนรู้ เพื่อให้ทราบว่าเมื่อจบบทเรียนแล้วนกั เรียนจะต้อง มีความรู้ และมี
ความสามารถอะไรบ้าง

2. ทาแบบทดสอบก่อนเรียนแลว้ ตรวจคาตอบเพื่อใหร้ ู้ว่านักเรยี นมคี วามรูพ้ ้ืนฐาน เกีย่ วกับเรื่องท่จี ะศึกษา
มากน้อยเพยี งใด

3. ศึกษาใบความรู้ ทาใบงานและทาแบบฝึกปฏิบตั ติ ามกิจกรรมทีก่ าหนดไว้ เพ่ือเปน็ การ ทบทวนใหม้ ี
ความรูค้ วามเข้าใจในเน้ือหามากยง่ิ ข้ึน

4. ทาแบบทดสอบหลงั เรียน เพื่อวดั ความร้คู วามเขา้ ใจอีกครัง้ หนง่ึ แล้วตรวจคาตอบ

5. นักเรยี นต้องมีความซื่อสัตย์ ตอ่ ตนเอง ไมเ่ ปิดดูเฉลยแบบทดสอบก่อนเรียน หลงั เรียน และเฉลยแบบ
ฝึกกิจกรรมทุกกจิ กรรม

6. ถา้ นักเรียนและผู้สนใจต้องการศกึ ษาเนื้อหาเพิ่มเตมิ สามารถค้นควา้ ได้จาก บรรณานุกรมทา้ ยเลม่

แบบทดสอบกอ่ นเรียน

จงเลือกคำตอบท่ถี ูกที่สดุ เพียงคำตอบเดยี ว

1. ถ้าเวบ็ ไซตเ์ ปรียบเสมอื นกับสมุด แลว้ โฮมเพจจะเปรยี บเสมือนอะไร

ก. หนา้ ปก

ข. คานา

ค. สารบัญ

ง. เนือ้ หา

2. สว่ นประกอบใดจะอย่ตู รงกลางของหนา้ เวบ็ เพจ

ก. Page Header ข. Page Body

ค. Page Footer ง. Page Bar

3. ข้อใดกล่าวไมถ่ ูกต้องเกย่ี วกับการสรา้ งเว็บเพจ

ก. การบันทกึ เว็บเพจเดมิ ใชค้ ีย์ลัด Ctrl + s

ข. หนา้ แรกของเว็บไซต์ ต้องตั้งชื่อวา่ index.html

ค. เคร่อื งหมาย * ท่ีอย่หู ลงั ชอื่ ไฟล์ แสดงวา่ เว็บเพจมชี ่ือซ้า

ง. กลุ่มหน้าตา่ งพาเนล ช่วยเพ่มิ ความสามารถในการสรา้ งเว็บเพจ

4. ขอ้ ใดกล่าวไม่ถูกต้องเกี่ยวกบั Site

ก. การสรา้ งโฟลเดอร์สาหรับจัดเกบ็ ไฟล์

ข. แกไ้ ขขอ้ มลู ไดง้ ่าย ค. สามารถจัดการเวบ็ เพจอยา่ งเป็นระเบยี บ ง. เป็นขอ้ กาหนดในการสรา้ งเวบ็ ไซต์

5. ข้อใดกลา่ วไม่ถูกต้อง

ก. การพิมพ์ข้อความในหนา้ เว็บเพจ เหมอื นกบั การพมิ พ์ข้อความใน Microsoft Word

ข .ตกแตง่ และจัดรปู แบบขอ้ ความ ให้ใช้หนา้ ต่าง Status bar

ค. การนาเอกสารอ่ืนมาใชร้ ่วมกบั Adobe Dreamweaver ให้เลอื กทเี่ มนู File แล้วเลือก Import

ง. การจดั รปู แบบดว้ ย CSS สามารถนามาใชซ้ ้าได้

6. ชนดิ ของรูปภาพใด ไม่เหมาะส าหรบั การสรา้ งเวบ็ เพจ

ก. JPG ข. GIF

ค. BMP ง. PNG

7. เว็บไซตส์ ว่ นใหญม่ ีการเชื่อมโยงไปยงั อีเมลเพราะเหตุใด

ก. เพ่ือต้องการความทันสมัย ข. เพอื่ อานวยความสะดวกในการตดิ ต่อ ส่อื สาร

ค. เพือ่ ต้องการใหผ้ ชู้ มเวบ็ ไซต์รู้จัก ง. เปน็ ข้อบงั คับในการสร้างเว็บไซต์

8. ข้อใดไมใ่ ช่คุณสมบัตขิ องไฟล์ Flash

ก. เปน็ ไฟลภ์ าพเคลอ่ื นไหวสร้างจากโปรแกรม Adobe Flash

ข. เป็นไฟล์ภาพเคลื่อนไหวท่ีมีขนาดไฟล์ค่อนข้างเล็ก

ค. เป็นภาพแบบ Vector-Based ใช้ลายเสน้ สร้างภาพ

ง. ชนดิ ของไฟล์ คอื .gif

9. เว็บไซต์ของโรงเรยี น ควรจดโดแมนเนม ประเภทใด

ก. .ac.th ข. .go.th

ค. .co.th ง. .in.th

10. การขอพื้นทจ่ี ัดเกบ็ เว็บไซต์ วธิ ีใดใช้งบประมาณมากท่สี ุด

ก. ขอพืน้ ทฟ่ี รีในเว็บเซริ ์ฟเวอร์

ข. ขอเช่าพ้นื ทีใ่ นเวบ็ เซิร์ฟเวอร์ของผู้อ่นื

ค. ตดิ ต้งั เวบ็ เซิร์ฟเวอรด์ ว้ ยตนเอง

ง. ขอเชา่ พนื้ ที่เวบ็ เซริ ์ฟเวอร์ของผใู้ ห้บรกิ ารอินเทอรเ์ นต็ โดยตรง

เฉลยแบบทดสอบกอ่ นเรยี น

1. ก
2. ข
3. ค
4. ง
5. ข
6. ค
7. ง
8. ง
9. ก
10. ค

ใบควำมรู้

เน้อื หาสาระการเรยี นรู้



กจิ กรรมท่ี 1
เรอ่ื งกำรสรำ้ งไซต์

คำช้แี จง

1. ให้นักเรยี น นักศึกษาแบ่งกลุ่ม กล่มุ ละ 2-3 คน สรา้ งไซตเ์ ก็บไฟลไ์ วใ้ นไดร์ฟ D: ต้ังช่อื ตามกลมุ่
จัดทาโครงรา่ งเวบ็ ไซต์ดว้ ยตาราและสร้างแม่แบบเอกสารเว็บไซต์ ด้วยโปรแกรม Dreamweaver CS6 กาหนด
ตาแหนง่ ในสว่ นเนอ้ื หาให้สามารถแก้ไขข้อมูลได้ บันทึกไฟล์แมแ่ บบเอกสารเว็บไซต์ช่ือ Index.dwt ถ่ายภาพ
หน้าจอแม่แบบเอกสารเว็บไซตล์ งในไฟล์ Microsoft word ต้งั ชอ่ื ตามกลุ่ม ส่งไฟล์ภาพถ่ายแมแ่ บบเวบ็ ไซต์ .docx
ท่ี Google drive แชรข์ อ้ มลู ใหค้ รผู สู้ อน (ครตู รวผลจากผลงานบันทกึ คะแนนตามความเหมาะสม

กจิ กรรมที่ 2

กำรสรำ้ งเวบ็ ไซต์ด้วยโปรแกรม Dreamweaver CS6

คำส่ัง จงตอบคาถามตอ่ ไปนี้ใหไ้ ดใ้ จความสมบูรณ์

1. จงบอกลักษณะของโปรแกรม Dreamweaver CS6
……………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………

2. จงบอกสว่ นประกอบของโปรแกรม Dreamweaver cs6
……………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………

3. การสร้างไซต์ในโปรแกรม Dreamweaver CS6 คืออะไร
……………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………

4. จงบอกขัน้ ตอนการสรา้ งไซต์
……………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………

5. จงบอกวิธีการจดั การโครงร่างเว็บไซตด์ ว้ ยตาราง

……………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………
6. จงบอกวธิ กี ารผสานเซลลต์ าราง
……………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………
7. จงบอกขน้ั ตอนการกาหนดสีการลิงก์เช่ือมโยงข้อมูล
……………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………
8. เหตุใดจะต้องมีการสร้างโครงร่างเว็บไซต์ดว้ ยตาราง
……………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………
9. จงเขยี นชุดคาสัง่ เพอ่ื กาหนดรปู ภาพ menu.jpg ใหเ้ ปน็ พ้นื หลงั สว่ นเมนู
……………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………
10. จงบอกวธิ กี ารเรียกใชง้ านแม่แบบเอกสารเว็บ
……………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………

……………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………

แบบทดสอบหลงั เรียน

จงเลอื กคำตอบทถี่ กู ท่สี ดุ เพียงคำตอบเดียว

3. ถา้ เว็บไซต์เปรียบเสมือนกับสมดุ แลว้ โฮมเพจจะเปรียบเสมือนอะไร

จ. หน้าปก

ฉ. คานา

ช. สารบัญ

ซ. เนอ้ื หา

4. สว่ นประกอบใดจะอยู่ตรงกลางของหน้าเวบ็ เพจ

ก. Page Header ข. Page Body

ค. Page Footer ง. Page Bar

3. ข้อใดกลา่ วไมถ่ ูกต้องเกี่ยวกับการสรา้ งเวบ็ เพจ

ก. การบนั ทกึ เวบ็ เพจเดิมใช้คีย์ลดั Ctrl + s

ข. หน้าแรกของเวบ็ ไซต์ ต้องต้ังชือ่ ว่า index.html

ค. เครอ่ื งหมาย * ท่ีอยูห่ ลงั ช่ือไฟล์ แสดงว่าเว็บเพจมีชือ่ ซ้า

ง. กลมุ่ หนา้ ตา่ งพาเนล ช่วยเพม่ิ ความสามารถในการสร้างเว็บเพจ

4. ข้อใดกลา่ วไมถ่ ูกต้องเกยี่ วกับ Site

ก. การสร้างโฟลเดอรส์ าหรบั จัดเก็บไฟล์

ข. แกไ้ ขข้อมูลได้ง่าย ค. สามารถจัดการเว็บเพจอยา่ งเป็นระเบียบ ง. เป็นข้อกาหนดในการสร้างเว็บไซต์

5. ขอ้ ใดกลา่ วไม่ถูกต้อง

ก. การพิมพข์ ้อความในหน้าเว็บเพจ เหมือนกับการพิมพ์ข้อความใน Microsoft Word

ข .ตกแตง่ และจัดรปู แบบข้อความ ใหใ้ ชห้ น้าตา่ ง Status bar

ค. การนาเอกสารอืน่ มาใช้รว่ มกับ Adobe Dreamweaver ให้เลือกท่เี มนู File แลว้ เลอื ก Import

ง. การจดั รูปแบบด้วย CSS สามารถนามาใชซ้ ้าได้

6. ชนิดของรูปภาพใด ไมเ่ หมาะส าหรับการสร้างเวบ็ เพจ

ก. JPG ข. GIF

ค. BMP ง. PNG

7. เวบ็ ไซต์สว่ นใหญ่มีการเชื่อมโยงไปยังอเี มลเพราะเหตุใด

ก. เพือ่ ต้องการความทันสมัย ข. เพอื่ อานวยความสะดวกในการตดิ ต่อ ส่อื สาร

ค. เพือ่ ต้องการใหผ้ ู้ชมเว็บไซต์รู้จกั ง. เปน็ ข้อบังคบั ในการสรา้ งเว็บไซต์

8. ขอ้ ใดไมใ่ ช่คุณสมบัตขิ องไฟล์ Flash

ก. เปน็ ไฟล์ภาพเคลอ่ื นไหวสร้างจากโปรแกรม Adobe Flash

ข. เป็นไฟลภ์ าพเคลอ่ื นไหวท่ีมขี นาดไฟล์ค่อนข้างเล็ก

ค. เป็นภาพแบบ Vector-Based ใชล้ ายเส้นสรา้ งภาพ

ง. ชนดิ ของไฟล์ คอื .gif

9. เว็บไซต์ของโรงเรยี น ควรจดโดแมนเนม ประเภทใด

ก. .ac.th ข. .go.th

ค. .co.th ง. .in.th

10. การขอพน้ื ท่จี ัดเกบ็ เว็บไซต์ วิธใี ดใช้งบประมาณมากทส่ี ุด

ก. ขอพืน้ ทฟ่ี รีในเว็บเซิร์ฟเวอร์

ข. ขอเช่าพ้นื ทใ่ี นเวบ็ เซริ ์ฟเวอร์ของผู้อนื่

ค. ตดิ ตงั้ เวบ็ เซิรฟ์ เวอร์ดว้ ยตนเอง

ง. ขอเช่าพน้ื ทเี่ วบ็ เซิรฟ์ เวอร์ของผูใ้ ห้บริการอินเทอรเ์ นต็ โดยตรง

เฉลยหลังเรยี น

1. ก
2. ข
3. ค
4. ง
5. ข
6. ค
7. ง
8. ง
9. ก
10. ค