บทที่ 1 ทำความรู้จักกับ Macromedia Dreamweaver 8

โปรแกรม Macromedia Dreamweaver โปรแกรมสำหรับการสร้างเว็บเพจ บริหารจัดการเว็บไซต์ รวมไปถึงการพัฒนาเว็บแอปพลิเคชัน เนื่องจากตัว Dreamweaver มีความสามารถที่โดดเด่น ดังนี้ สามารถเขียนโปรแกรมสำหรับเว็บได้ทุกรูปแบบ เช่น ASP, ASP.Net, ColdFusion,JSP, PHP, XML, XHTML เมนูคำสั่งและเครื่องมือต่างๆ เรียกใช้งานได้ง่ายและสะดวกมีการปรับปรุงกลไกภายในให้มีประสิทธิภาพสูงขึ้น สามารถสร้างแอปพลิเคชันง่ายๆ โดยไม่จำเป็นต้องเขียนโปรแกรม สร้างเว็บเพจภาษาไทยได้ทันทีโดยไม่ต้องติดต้องโปรแกรมเสริมเพราะ Dreamweaver รองรับตัวอักษรแบบ Unicode

การเข้าสู่โปรแกรม Macromedia Dreamweaver 8

มีขั้นตอน คือ คลิกเลือก Start -> Program -> Macromedia -> Macromedia Dreamweaver 8 ในการเข้าสู่ระบบในครั้งแรกโปรแกรมจะถามรูปแบบการใช้งาน 2 รูปแบบ คือ

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

(ข้อแนะนำ ในที่นี้ขอแนะนำให้เลือก Designer เพื่อง่ายต่อการทำความเข้าใจ)

ส่วนประกอบของหน้าต่างโปรแกรม Macromedia Dreamweaver 8

         โปรแกรม Macromedia Dreamweaver 8 มีองค์ประกอบของหน้าต่างโปรแกรม ดังต่อไปนี้

หน้าจอ Start Page
ทุกครั้งเมื่อเปิดโปรแกรม Macromedia Dreamweaver 8 จะปรากฏหน้าจอเริ่มต้น (Start Page) สำหรับเปิดเอกสารเว็บเพจเดิมหรือสร้างเอกสารเว็บเพจใหม่ โดยทั่วไปแบ่งออกเป็น 3 กลุ่ม ดังต่อไปนี้

แต่ละส่วน มีรายละเอียด ดังต่อไปนี้
1. ใช้สำหรับเปิดไฟล์เอกสารเว็บเพจที่เคยใช้งานมาแล้ว (Open a Recent Item) เป็นส่วนแรกของหน้าจอเริ่มต้นใช้สำหรับเปิดงานที่เราทำค้างไว้ ซึ่งเลือกจากรายการชื่อที่แสดงอยู่ โดยโปรแกรมจะแสดงงานที่เปิดใช้บ่อยอยู่ด้านบน
2. การสร้างงานใหม่ (Create New) ในส่วนนี้เป็นการเลือกประเภทงานที่ต้องการสร้างใหม่ โดยเลือกประเภทไฟล์ต่างๆ ได้ เช่น HTML,PHP, ASP JavaScript, ASP VBScript, ASP.NET C#, ASP.NET VB, JSS, CSS หรือเลือกแบบฟอร์มอื่นๆ เป็นต้น
3. การสร้างงานตามแบบฟอร์ม (Create from Sample) เป็นสร้างเว็บเพจตามแบบฟอร์มที่โปรแกรมได้จัดไว้ให้แล้ว ซึ่งมีรูปแบบให้เลือกหลายประเภท

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

         เมื่อเราเลือกประเภทการทำงานแล้ว (ในกรณีนี้ผู้สอนคลิกเลือก HTML จากส่วนของ Create New) จะปรากฏหน้าต่างการทำงานของโปรแกรม โดยมีรายละเอียดดังต่อไปนี้

1. แถบชื่อเรื่อง (Titlebar) เป็นส่วนที่ใช้แสดงชื่อโปรแกรม Dreamweaver 8 และชื่อไฟล์เอกสารเว็บเพจที่กำลังทำงานอยู่

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

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

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

Layout สำหรับเลือกมุมมองในการสร้างเว็บเพจ เช่น มุมมองปกติ มุมมองแบบขยาย เพื่อให้เห็นออปเจ็กต์ต่างๆ ได้อย่างชัดเจน

Forms ใช้สำหรับแทรกออปเจ็กต์ที่ใช้สร้างแบบฟอร์มรับข้อมูลจากผู้ชม เช่น ช่องรับข้อความ และฟิลด์ (Field) ชนิดต่างๆ

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

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

Flash element สำหรับนำไฟล์ Flash เข้ามาใช้งาน

 Favorite สำหรับจัดเก็บออบเจ็กต์ที่ชอบเพื่อความสะดวกในการใช้งาน

Show as Tabs เปลี่ยนแถบเครื่องมือให้แสดงผลในลักษณะแท็บคำสั่งเรียงต่อกันไป ลักษณะการแสดงผลจะเหมือนกับเวอร์ชั่นก่อนหน้านี้ เช่น Macromedia Dreamweaver MX, 2004 เป็นต้น

4. Toolbar เป็นแถบเครื่องมือที่เก็บปุ่มคำสั่งที่ต้องใช้งานบ่อยๆ ซึ่งประกอบด้วย 

• Show Code View สำหรับแสดงการทำงานในรูปแบบ HTML นอกจากนี้ยังสามารถเขียนคำสั่ง HTML หรือคำสั่งภาษาสคริปต์ (Script) อื่นๆ ได้ด้วย
• Show Code and Design สำหรับแสดงการทำงานแบบ HTML กับการแสดงพื้นที่ออกแบบ โดยจะแสดงส่วนของคำสั่งไว้ด้านบนและแสดงเว็บเพจปกติไว้ด้านล่าง
• Show Design View สำหรับแสดงเว็บเพจคล้ายกับที่เราเห็นใจเบราเซอร์ เช่น ข้อความ กราฟิก หรือออปเจ็กต์อื่นๆ และสามารถแก้ไขเนื้อหาลงเว็บเพจได้

5. Document Area เป็นส่วนที่ใช้สำหรับสร้างหน้าเว็บเพจ โดยการใส่เนื้อหาและจัดองค์ประกอบต่างๆ นำมาวางใน Document Area และสามารถเลือกพื้นที่การทำงานได้หลายมุมมอง เช่น Show Code View,Show Code and Design View ดังที่ได้กล่าวไว้แล้วข้างต้น

6. Status Bar คือ แถบแสดงสถานะที่อยู่บริเวณด้านล่างของพื้นที่สร้างงาน (Document Area) ซึ่งประกอบด้วย 2 ส่วน คือ ทางด้านซ้ายเรียกว่า Tag Selector ใช้สำหรับแสดงคำสั่ง HTML ของส่วนประกอบในเว็บเพจที่เลือกอยู่ และทางด้านขวาเป็นส่วนที่บอกขนาดและเวลาที่ใช้ในการดาวน์โหลดเว็บเพจ

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

Properties Inspector ของภาพกราฟิก

Properties Inspector ของข้อความ

Properties Inspector ของตาราง

8. Panels เป็นกรอบเล็กๆ บริเวณด้านขวา ประกอบด้วยเครื่องมือสำหรับใช้ทำงานต่างๆ ซึ่งแต่ละส่วนของ Panels จะมีหน้าที่แตกต่างกันไป เช่น การจัดเก็บ Code, CSS, Behavior อีกทั้งไฟล์และโฟลเดอร์ภายในเว็บไซต์ (โดยรายละเอียดต่างๆ จะอธิบายใน Chapter ต่อๆ ไป) และเรียกขึ้นมาใช้งานโดยใช้คำสั่ง Windows จากนั้นเลือกชื่อ Panels ที่ต้องการเปิด/ปิด หรือใช้คีย์ลัดด้านหลังชื่อ Panels ก็ได้ เช่นกัน