1. กลุ่มสาระ : การงานอาชีพและเทคโนโลยี
ชื่อวิชา : การสร้างเว็บไซต์ รหัสวิชา ง 23203
หัวข้อ : หน่วยที่ 3 องค์ประกอบของโปรแกรม Adobe Dreamweaver
ใบเนื้อหา หน้าที่
แผ่นที่ :
หน่วยที่ 3
องค์ประกอบของโปรแกรม Adobe Dreamweaver
สาระการเรียนรู้
3.1 ส่วนประกอบของหน้าจอโปรแกรม
3.2 การเริ่มต้นการสร้างหน้าเว็บเพจ
3.3 การบันทึกเว็บเพจ
3.4 การทดสอบเว็บเพจกับเว็บบราวเซอร์
วัตถุประสงค์เชิงพฤติกรรม
3.1 บอกส่วนประกอบของหน้าจอโปรแกรมAdobe Dreamweaver ได้
3.2 บอกวิธีการเริ่มต้นสร้างหน้าเว็บเพจได้
3.3 อธิบายการบันทึกเว็บเพจได้
3.4 อธิบายการทดสอบเว็บเพจกับเว็บบราวเซอร์ได้

2. กลุ่มสาระ : การงานอาชีพและเทคโนโลยี
ชื่อวิชา : การสร้างเว็บไซต์ รหัสวิชา ง 23203
หัวข้อ : หน่วยที่ 3 องค์ประกอบของโปรแกรม Adobe Dreamweaver
ใบเนื้อหา หน้าที่
แผ่นที่ :
เมื่อเปิดโปรแกรมแล้วจะเข้าสู่หน้าต่างหรือหน้าต่างแรกของโปรแกรมซึ่งเรียกว่า หน้าต้อนรับ(Welcome Screen) เพื่อให้
ผู้ใช้งานเรียกของโปรแกรมได้อย่างรวดเร็ว ซึ่งมีส่วนประกอบ 3 ส่วน ดังนี้
1. เปิดไฟล์งานที่สร้างไว้(Open a Recent Item) เป็นส่วนที่แสดงรายชื่อหน้าเว็บเพจที่เคยสร้างไว้โดยจะแสดงชื่อลาดับล่าสุดที่
เคยทางานและมีโฟลเดอร์ Open สาหรับให้เปิดค้นหาไฟล์งาน
2. สร้างไฟล์งานใหม่ (Create New) ใช้สร้างเอกสารเปล่าขึ้นมาใหม่
3. ดูวีดีโอสาธิตการใช้งานแบบออนไลน์(Top Features) เข้าสู่หน้าเว็บ Adobe TV เพื่อชมการสาธิตการใช้งานในหัวข้อต่างๆ
ตามความสนใจ
เมื่อคลิกที่ตัวเลือก HTML แล้วจะได้หน้าต่างแรกของโปรแกรม Dreamweaver CS4 ซึ่งมีส่วนประกอบต่างๆ ดังรูป
3.1 ส่วนประกอบของหน้าจอโปรแกรม Adobe Dreamweaver
1. แถบคาสั่ง (Menu bar)
3. หน้าต่างเอกสาร
(Document windows)
4. แถบแสดงสถานะ
(Starts bar)
5. แถบควบคุมการทางาน
(Properties Palette)
6. กลุ่มพาเนล
(Panel Group)
7. กล่องควบคุม
(Insert bar)
2. แถบแทรก
(Insert bar)

3. กลุ่มสาระ : การงานอาชีพและเทคโนโลยี
ชื่อวิชา : การสร้างเว็บไซต์ รหัสวิชา ง 23203
หัวข้อ : หน่วยที่ 3 องค์ประกอบของโปรแกรม Adobe Dreamweaver
ใบเนื้อหา หน้าที่
แผ่นที่ :
1. แถบคาสั่ง(Menu Bar)
แถบคาสั่ง(Menu Bar) เป็นแถบที่ใช้เก็บคาสั่งหลักของโปรแกรม ประกอบด้วย
1. เมนู File รวมรวมคาสั่งที่ใช้จัดการกับไฟล์หรือข้อมูล
2. เมนู Edit รวมรวมคาสั่งที่ใช้แก้ไขเอกสาร
3. เมนู View รวมรวมคาสั่งที่ใช้แสดงมุมมองเอกสารเว็บ
4. เมนู Insert รวมรวมคาสั่งที่ใช้แทรกส่วนประกอบต่างๆ บนเว็บ เช่น ภาพ เลเยอร์
5. เมนู Modify ใช้สาหรับปรับแต่งเว็บเพจ เช่นตาราง เฟรม
6. เมนู Format ใช้สาหรับจัดการกับอักษร หรือข้อความ
7. เมนู Commands ใช้สาหรับจัดรูปแบบคาสั่ง
8. เมนู Site ใช้สาหรับจัดการกับเว็บไซต์
9. เมนู Window จัดการกับหน้าต่างที่ใช้ในการทางาน
10. เมนู Help ขอความช่วยเหลือจากโปรแกรม
2. แถบแทรก(Insert bar)
แถบแทรก(Insert bar) เป็นแถบที่เครื่องมือที่ใช้สาหรับสร้างเว็บเป็นกลุ่มเครื่องมือต่างๆ ที่ใช้ในการควบคุมวัตถุ
บนชิ้นงาน เอกสารเว็บ ประกอบด้วย
2.1 Common เป็นกลุ่มเครื่องมือที่เรียกใช้งานในการ แทรกตาราง แทรกภาพ สร้างไฮเปอร์ลิงก์ เป็นต้น
2.2 Layout เป็นกลุ่มเครื่องมือที่ใช้สาหรับจัดองค์ประกอบบนหน้าเว็บเพจ
2.3 Forms เป็นกลุ่มเครื่องมือที่ใช้สาหรับจัดการกับฟอร์มที่สร้างขึ้นเพื่อเป็นแบบสอบถาม
2.4 Data เป็นกลุ่มเครื่องมือที่ใช้สาหรับสร้างหน้าเว็บติดต่อกับฐานข้อมูล
2.5 Spry เป็นกลุ่มคาสั่งที่ใช้สาหรับสร้างฟอร์มขึ้นมาใช้งาน
3 51
2
7 9
4 6 8 10

4. กลุ่มสาระ : การงานอาชีพและเทคโนโลยี
ชื่อวิชา : การสร้างเว็บไซต์ รหัสวิชา ง 23203
หัวข้อ : หน่วยที่ 3 องค์ประกอบของโปรแกรม Adobe Dreamweaver
ใบเนื้อหา หน้าที่
แผ่นที่ :
2.6 inContext Editing เป็นกลุ่มคาสั่งที่ใช้สาหรับสร้างและจัดการส่วนประกอบทั่วไป
2.7 Text เป็นกลุ่มคาสั่งที่ใช้สาหรับปรับแต่งตัวอักษรและจัดตาแหน่งบนเว็บเพจ
2.8 Favorites เป็นกลุ่มคาสั่งที่ให้ผู้ใช้งานเลือกเครื่องมือที่ใช้งานบ่อยมาวางในกลุ่มนี้เพื่อความสะดวกต่อการเรียกใช้งาน
3. หน้าต่างเอกสาร(Document Window) พื้นที่สาหรับสร้างงานเว็บเพจ
4. แถบแสดงสถานะ (Status Bar) คอยแสดงสถานการณ์ทางานที่กาลังทาอยู่ในขณะนั้น
5. แถบควบคุมการทางาน (Properties) เป็นรายการที่ใช้สาหรับปรับแต่งองค์ประกอบต่างๆของเว็บเพจ
การปรับแต่งตัวอักษร การปรับสี การปรับรูปภาพ เป็นต้น
6. กลุ่มพาเนล(Panel Group) เป็นกลุ่มของแถบเครื่องมือที่เพิ่มความสามารถในการจัดการและออกแบบหน้าเว็บ
เพื่อให้ง่ายต่อการสร้างเว็บเพจ
7. กล่องควบคุม(Control Box) สาหรับย่อขยาย และปิดหน้าต่างโปรแกรม
การสร้างเว็บเพจใหม่ซึ่งสามารถซึ่งสามารถปฏิบัติได้ดังนี้
3.2.1 เมื่อเปิดโปรแกรมขึ้นมาแล้ว คลิกที่เมนูคาสั่ง file > New
3.2 การเริ่มต้นการสร้างหน้าเว็บเพจ

5. กลุ่มสาระ : การงานอาชีพและเทคโนโลยี
ชื่อวิชา : การสร้างเว็บไซต์ รหัสวิชา ง 23203
หัวข้อ : หน่วยที่ 3 องค์ประกอบของโปรแกรม Adobe Dreamweaver
ใบเนื้อหา หน้าที่
แผ่นที่ :
3.2.2 จะปรากฏหน้าต่างสาหรับกาหนดรายละเอียดการสร้างเว็บเพจ ดังภาพ
คลิกเลือก Blank Page >Page Type เลือก HTML แล้วคลิกปุ่ม Create
จะปรากฏหน้าเอกสารใหม่ ดังภาพ

6. กลุ่มสาระ : การงานอาชีพและเทคโนโลยี
ชื่อวิชา : การสร้างเว็บไซต์ รหัสวิชา ง 23203
หัวข้อ : หน่วยที่ 3 องค์ประกอบของโปรแกรม Adobe Dreamweaver
ใบเนื้อหา หน้าที่
แผ่นที่ :
การบันทึกเว็บเพจซึ่งสามารถซึ่งมีวิธีการปฏิบัติดังนี้
3.3.1 คลิกที่เมนูคาสั่ง File > Save as
3.3.2 จะปรากฏหน้าต่าง Save As เลือกโฟลเดอร์ที่จัดเก็บไฟล์
3.3 การบันทึกเว็บเพจ

7. กลุ่มสาระ : การงานอาชีพและเทคโนโลยี
ชื่อวิชา : การสร้างเว็บไซต์ รหัสวิชา ง 23203
หัวข้อ : หน่วยที่ 3 องค์ประกอบของโปรแกรม Adobe Dreamweaver
ใบเนื้อหา หน้าที่
แผ่นที่ :
3.3.3 จากนั้นทาการตั้งชื่อไฟล์ ที่ช่อง File name
3.3.4 จากนั้นคลิกที่ปุ่ม Save ชื่อไฟล์ที่ทาการตั้งไว้จะปรากฏขึ้นตรงแถบชื่อ ดังภาพ
ในการบันทึกเอกสาร มีคาสั่งการบันทึก คือ
Save all หมายถึง การบันทึกไฟล์ทั้งหมดที่เปิดใช้งานอยู่ในขณะนั้น
Save to Remote Server หมายถึง บันทึกเว็บเพจและอัพโหลดไปยังเซิร์ฟเวอร์
Save as Template หมายถึง บันทึกเป็นแม่แบบ
พิมพ์ชื่อเว็บเพจใหม่

8. กลุ่มสาระ : การงานอาชีพและเทคโนโลยี
ชื่อวิชา : การสร้างเว็บไซต์ รหัสวิชา ง 23203
หัวข้อ : หน่วยที่ 3 องค์ประกอบของโปรแกรม Adobe Dreamweaver
ใบเนื้อหา หน้าที่
แผ่นที่ :
เว็บเพจที่สร้างขึ้นสามารถทดสอบการแสดงผลผ่านเว็บเบราว์เซอร์โดยที่ยังไม่ได้เชื่อมต่อกับอินเทอร์เน็ตเป็นการทางานใน
รูปแบบออฟไลน์(offline) เพื่อดูตัวอย่างเว็บเพจก่อนที่จะนาไปใช้จริง การทดสอบกับเว็บบราวเซอร์ มีวิธีการดังนี้
3.4.1 คลิกที่เมนูคาสั่ง file > Preview in Browser > IExplore (หรือบราวเซอร์อื่นที่ติดตั้งไว้)
จะได้หน้าเว็บเพจตามที่สร้างไว้ ดังภาพ
3.4 การทดสอบเว็บเพจกับเว็บเบราว์เซอร์