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

กลุ่มสาระ : การงานอาชีพและเทคโนโลยี ชื่อวิชา : การสร้างเว็บไซต์ รหัสวิชา ง 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)

กลุ่มสาระ : การงานอาชีพและเทคโนโลยี ชื่อวิชา : การสร้างเว็บไซต์ รหัสวิชา ง 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 5 1

2

7 9

4 6 8 10

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

กลุ่มสาระ : การงานอาชีพและเทคโนโลยี ชื่อวิชา : การสร้างเว็บไซต์ รหัสวิชา ง 23203 หัวข้อ : หน่วยที่ 3 องค์ประกอบของโปรแกรม Adobe Dreamweaver

ใบเนื้อหา หน้าท่ี

แผ่นที่ : 3.2.2 จะปรากฏหน้าต่างส าหรับก าหนดรายละเอียดการสรา้งเว็บเพจ ดังภาพ คลิกเลือก Blank Page >Page Type เลือก HTML แล้วคลิกปุ่ม Create

จะปรากฏหนา้เอกสารใหม่ ดังภาพ

กลุ่มสาระ : การงานอาชีพและเทคโนโลยี ชื่อวิชา : การสร้างเว็บไซต์ รหัสวิชา ง 23203 หัวข้อ : หน่วยที่ 3 องค์ประกอบของโปรแกรม Adobe Dreamweaver

ใบเนื้อหา หน้าท่ี

แผ่นที่ : การบันทึกเวบ็เพจซึ่งสามารถซึ่งมีวิธีการปฏิบัติดังนี ้ 3.3.1 คลิกท่ีเมนูค าสั่ง File > Save as

3.3.2 จะปรากฏหน้าต่าง Save As เลือกโฟลเดอร์ที่จัดเก็บไฟล ์

3.3 การบันทึกเว็บเพจ

กลุ่มสาระ : การงานอาชีพและเทคโนโลยี ชื่อวิชา : การสร้างเว็บไซต์ รหัสวิชา ง 23203 หัวข้อ : หน่วยที่ 3 องค์ประกอบของโปรแกรม Adobe Dreamweaver

ใบเนื้อหา หน้าท่ี

แผ่นที่ : 3.3.3 จากนั้นท าการตั้งช่ือไฟล์ ที่ช่อง File name

3.3.4 จากนัน้คลิกที่ปุ่ม Save ช่ือไฟล์ที่ท าการตั้งไว้จะปรากฏขึ้นตรงแถบช่ือ ดังภาพ

ในการบันทึกเอกสาร มีค าสั่งการบันทึก คือ Save all หมายถึง การบันทึกไฟล์ทั้งหมดที่เปิดใช้งานอยู่ในขณะนั้น Save to Remote Server หมายถึง บันทึกเว็บเพจและอัพโหลดไปยังเซริ์ฟเวอร ์ Save as Template หมายถึง บันทึกเป็นแม่แบบ

พิมพ์ชื่อเว็บเพจใหม ่

กลุ่มสาระ : การงานอาชีพและเทคโนโลยี ชื่อวิชา : การสร้างเว็บไซต์ รหัสวิชา ง 23203 หัวข้อ : หน่วยที่ 3 องค์ประกอบของโปรแกรม Adobe Dreamweaver

ใบเนื้อหา หน้าท่ี

แผ่นที่ :

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

จะได้หนา้เว็บเพจตามที่สร้างไว้ ดังภาพ

3.4 การทดสอบเว็บเพจกับเว็บเบราว์เซอร์