องค์ประกอบของโปรแกรม Dreamweaver

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

โดยสามารถนำรูปภาพหรือข้อความมาประกอบเป็นเว็บเพจ อีกยังเพิ่มลูกเล่นต่าง ๆ เช่น เสียง ภาพเคลื่อนไหว วีดิโอ

ซึ่งไม่จำเป็นต้องรู้หลักการเขียนโปรแกรมด้วยภาษา HTML ก็สามารถสร้างเว็บไซต์ได้

ส่วนประกอบของหน้าจอโปรแกรม

1. Application bar เป็นแถบประยุกต์ ประกอบด้วยแถบเครื่องมือ Application bar ประกอบด้วย

· เครื่องมือสำหรับเลือกรูปแบบการแสดงพื้นที่สำหรับสร้างหน้าเว็บเพจ เช่น Code Split หรือ Design เป็นต้น

· เครื่องมือสำหรับค้นหา และติดตั้งโปรแกรมเสริม

· เครื่องมือสำหรับบริหารจัดการไซต์ เช่นสร้างไซต์ใหม่

2. Menu bar เป็นที่รวมคำสั่งทั้งหมดของโปรแกรม Dreamweaver ที่ใช้ในการจัดการกับไฟล์เว็บเพจ

Menu bar ประกอบด้วยเมนูย่อย ดังนี้

2.1 File เป็นเมนูคำสั่งสาหรับจัดการกับไฟล์เว็บเพจ เช่น สร้างเว็บเพจใหม่ บันทึกเว็บเพจ เปิดเว็บเพจ แสดงเว็บเพจผ่านบราวเซอร์ หรือออกจากโปรแกรม เป็นต้น

2.2 Edit เป็นเมนูคำสั่งสำหรับการแก้ไข เช่น คัดลอง ตัด วาง ค้นหา รวมถึงการตั้งค่าการทำงาน (Preference) ต่าง ๆ เป็นต้น

2.3 View เป็นเมนูคำสั่งสาหรับปรับเปลี่ยนมุมมองของเว็บเพจขณะทำงาน เป็นต้น

2.4 Insert เป็นเมนูคำสั่งสาหรับแทรกวัตถุต่าง ๆ เช่น รูปภาพ เสียงตาราง ฟอร์มต่าง ๆ ลงบนเว็บเพจ เป็นต้น

2.5 Modify เป็นเมนูคำสั่งสาหรับแก้ไขวัตถุต่างๆ บนเว็บเพจ เช่น การแก้ไขรูปแบบตัวอักษร การแก้ไขรูปภาพ การจัดการตาราง หรือการกำหนดคุณสมบัติของเว็บเพจ เป็นต้น

2.6 Format เป็นเมนูคำสั่งสาหรับเปลี่ยนรูปแบบโดยรวมของข้อความบนเว็บเพจ เช่น การจัดรูปแบบข้อความ การสร้างหัวข้อรายการ เป็นต้น

2.7 Command เป็นเมนูคำสั่งสำหรับจัดการกับชุดคำสั่งต่างๆ บนเว็บเพจที่ทำงานอยู่

2.8 Site เป็นเมนูคำสั่งสำหรับจัดการกับ Site เช่น สร้าง Site หรือแก้ไข Site ที่ทำงาน รวมถึงการตรวจสอบลิงค์ต่างๆ ใน Site เป็นต้น

2.9 Window เป็นเมนูที่ใช้ในการเปิดหรือปิดพาเนลที่ทำงานอยู่

2.10 Help เป็นเมนูที่ใช้ในการขอความช่วยเหลือผ่านเว็บไซต์ Adobe

3. Workspace เป็นปุ่มสำหรับเปลี่ยนมุมมองพื้นที่ทำงาน (Workspace) โดยสามารถเลือกได้ว่าต้องการใช้งานรูปแบบในลักษณะใด ซึ่งใน Adobe Dreamweaver CS6 มีให้เลือกใช้ 11 แบบ

4. Toolbar เป็นแถบเครื่องมือที่ใช้รวมปุ่มคำสั่งที่จำเป็นต้องใช้งานเป็นประจำ สามารถ เปิด/ปิดการใช้งานได้ Tool bars ประกอบด้วยแถบเครื่องมือดังนี้

4.1 Document Toolbar เป็นทูลบาร์ที่ประกอบไปด้วยปุ่มคำสั่งในการกำหนดมุมมองการแสดงเว็บเพจ การแสดงความละเอียดของหน้าเว็บเพจ การโอนย้ายไฟล์ หรือการกำหนดคำอธิบายเว็บเพจ

4.2 Standard Toolbar เป็นทูลบาร์ที่ประกอบไปด้วยปุ่มคำสั่งพื้นฐานที่ใช้ในการจัดการไฟล์ เช่น การสร้างไฟล์ บันทึกไฟล์ เปิดไฟล์ คัดลอก ย้าย หรือวางเนื้อหา ตลอดจนการยกเลิกหรือทำซ้ำคำสั่งด้วย

4.3 Style Rendering Toolbar เป็นทูลบาร์ที่ออกแบบมาเพื่อให้แสดงการทำงานของหน้าเว็บเพจที่ใช้ Style Sheet บนมีเดียประเภทต่างๆ เช่น บนหน้าจอคอมพิวเตอร์ บนเครื่องพิมพ์ บนโปรเจ็คเตอร์ บนทีวี การเพิ่ม/ลดขนาดตัวอักษร ตลอดจนการแสดงสีของสถานการณ์เชื่อมโยง

5. Insert panel เป็นพาเนลที่รวบรวมกลุ่มคำสั่งที่ใช้สำหรับสร้างและแทรกออบเจ็คต่างๆ โดยจะแบ่งออกเป็นกลุ่ม เพื่อให้ใช้งานได้สะดวก ตัวอย่างกลุ่มคำสั่งที่ใช้งาน

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

Layout เป็นกลุ่มคำสั่งสำหรับวางออบเจ็คที่ใช้จัดหน้าเว็บเพจ เช่น AP Element หรือตาราง เป็นต้น

Forms เป็นกลุ่มคำสั่งสำหรับวางออบเจ็คที่เป็นฟอร์มรับข้อมูล

Text เป็นกลุ่มคำสั่งสำหรับจัดรูปแบบข้อความ เช่นทาตัวหนา เอียง หรือใส่ list รายการ รวมทั้งแทรกสัญลักษณ์พิเศษต่าง ๆ

Data เป็นกลุ่มคำสั่งสาหรับจัดการฐานข้อมูล และดึงข้อมูลจากฐานข้อมูลมาแสดงบนเว็บเพจ

6. Panel Group เป็นพาเนลหน้าต่างขนาดเล็ก ที่รวบรวมเครื่องมือไว้เป็นกลุ่มตามหน้าที่ สำหรับใช้งานเฉพาะเรื่องไว้ โดยสามารถเปิดหรือปิดพาเนลการทำงานได้โดยคลิกเมนูคำสั่ง Window แล้วคลิกเลือก พาเนลที่ต้องการ

CSS Styles Panel เป็นพาเนลที่ใช้สำหรับจัดการกับสไตล์

CSS เช่น การสร้าง การแก้ไข การลบ หรือการกำหนดคุณสมบัติต่างๆของ CSS

File Panel

เป็นพาเนลที่ใช้สำหรับจัดการกับไฟล์ เว็บเพจ ทั้งไฟล์รูปภาพ ไฟล์ HTML ไฟล์มัลติมีเดีย

และโฟลเดอร์ภายในเว็บไซต์ หรือสามารถทดสอบการทางานของเว็บเพจผ่านเซิร์ฟเวอร์ได้

Database Panel เป็นพาเนลที่ใช้สาหรับสร้างและจัดการให้เว็บเพจสามารถ เชื่อมต่อกับฐานข้อมูล

7. Document Area เป็นพื้นที่สาหรับสร้างหน้าเว็บเพจ ใส่ข้อมูลเนื้อหา และองค์ประกอบของเว็บเพจ เช่น ภาพกราฟิก ระบบมัลติมีเดีย และโค้ดต่าง ๆ ซึ่งสามารถให้แสดงพื้นที่ในมุมมองได้ 3 มุมมอง คือ มุมมองโค้ด (Code View) มุมมองสปลิท (Split View) และมุมมองออกแบบ (Design View)

7.1 มุมมองโค้ด (Code View)

7.2 มุมมองสปลิท (Split View)

7.3 มุมมองออกแบบ (Design View)

8. Status bar เป็นแถบที่อยู่ด้านล่างของหน้าต่างการทางาน ใช้แสดงข้อมูลเพิ่มเติมเกี่ยวกับสถานะ การทางานของเว็บเพจที่กาลังทาอยู่ เช่น แสดงและเลือกแท็ก HTML การปรับขนาดการแสดงผล การกำหนดขนาดหน้าต่าง ขนาดของไฟล์และเวลาที่ใช้ในการโหลด และการแสดงรหัสภาษาของเว็บเพจ ที่กำลังใช้งาน

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

พาเนลคุณสมบัติเมื่อเลือกการทำงานกับข้อความบนเว็บเพจ

พาเนลคุณสมบัติเมื่อเลือกการทำงานกับภาพประกอบบนเว็บเพจ

พาเนลคุณสมบัติเมื่อเลือกการทำงานกับตารางบนเว็บเพจ

การสร้างแฟ้มงาน

ก่อนที่เราจะสร้างเว็บด้วยโปรแกรม Adobe Dreamweaver CS6 จำเป็นต้องสร้างแฟ้มข้อมูลเพื่อเก็บข้อมูลทุกประเภท

ไม่ว่าจะเป็นรูปภาพต่างๆ ที่ใช้ทำเว็บ รวมถึงเก็บเว็บไซต์ที่เราสร้างขึ้นมา

วิธีการสร้างแฟ้มทำได้ดังต่อไปนี้

1. เลือกไดร์ฟ เช่น Drive D:
2. คลิกขวาเลือก New
3. จากนั้นเลือก Folder
4. จากนั้นให้ทำการเปลี่ยนชื่อที่เราต้องการ

เริ่มต้นสร้างงานใหม่

1. เปิดโปรแกรม Adobe Dreamweaver CS6
2. เลือกภาษาที่จะใช้ในการเขียน เลือก HTML

วิธีการบันทึกงาน

ทุกครั้งที่ทำงานเสร็จจะต้องบันทึกงานไว้เพื่อที่จะได้นำมาทำงานต่อหรือเก็บงานไว้โดยวิธีการบันทึกงานสามารถทำได้ดังนี้

1. เลือกที่ File
2. เลือก Save Ass
3. เลือกที่อยู่ที่จะบันทึกงานไว้
4. ตั้งชื่อที่ File Name
5. กด Save