การพัฒนาเว็บไซต์เบื้องต้น: หน่วยการเรียนรู้ที่ 2

การใช้ Dreamweaver

รู้จักกับ Adobe Dreamweaver CS6

Adobe Dreamweaver CS6 เป็นโปรแกรมสำเร็จรูปที่ใช้สำหรับการพัฒนาเว็บไซต์ โดยมีคุณสมบัติในการออกแบบและสร้างเว็บเพจ จนถึงการพัฒนาแอพลิเคชั่นเบิ้องต้น ซึ่งในโปรแกรมตัวนี้มีเครื่องมือสำหรับการวางข้อความ ภาพกราฟิก ตาราง แบบฟอร์ม พร้อมทั้งมัลติมีเดียต่างๆ เพื่อแสดงให้ผู้พัฒนาเว็บไซต์ใช้งานได้ง่าย โดยไม่ต้องรู้จักภาษา HTML, JavaScript, CSS หรือภาษาสคริปต์อื่นๆ ซึ่งเมื่อออกแบบและพัฒนาเว็บไซต์ในโปรแกรม แล้วนำมาแสดงผลทางบราวเซอร์ก็จะเห็นเป็นลักษณะที่ได้จัดวางไว้ หรือจะเรียกอีกอย่างว่า What You See Is What You Get (WYSIWYG) จึงเหมาะสมกับผู้ที่เริ่มต้นและผู้ใช้งานทั่วไปจะนำมาพัฒนาเว็บไซต์

เวอร์ชั่นต่างๆ ของโปรแกรม Dreamweaver

ในปัจจุบันนี้โปรแกรม Dreamweaver ถูกพัฒนาโดย Adobe ซึ่งเป็นการซื้อกิจการต่อมาจาก Macromedia เมื่อปี 2005 ที่ผ่านมา ดังนั้น ในปัจจุบันนี้เราจะเรียกโปรแกรมนี้ว่า Adobe Dreamweaver แทน Macromedia Dreamweaver โปรแกรมได้รับการพัฒนามาแล้วทั้งหมด 16 เวอร์ชั่น (นับตั้งแต่เวอร์ชั่น 1.0 ที่ออกมาเมื่อปี 1997) ดังนี้

การเรียกใช้งานโปรแกรม

การเรียกใช้งานโปรแกรม Adobe Dreamweaver CS6 ขึ้นมาใช้งานทำได้ดังนี้

วิธีที่ 1 เรียกผ่าน Start Windows 10 โดยการคลิกที่ปุ่ม Start >>All apps >>Adobe Master Collection CS6 >> Adobe Dreamweaver CS6

วิธีที่ 2 เรียกผ่านไอคอนบนเดสก์ทอปโดยการดับเบิ้ลคลิกที่ไอคอนโปรแกรม Adobe Dreamweaver CS6

เมื่อคลิกเลือกเปิดโปรแกรมขึ้นมาแล้วจะปรากฏ Welcome Screen ดังรูป

Welcome Screen เป็นหน้าต่างสำหรับเลือกขั้นตอนการเริ่มใช้งานโปรแกรม ซึ่งจะมีตัวเลือกออกเป็นกลุ่มๆ คือ

A : Open a Recent Item เป็นการเปิดไฟล์งานที่เคยใช้งานแล้ว โดยจะมีรายชื่อไฟล์งานแสดงอยู่เรียงลำดับจากที่เปิดใช้งานล่าสุดเป็นต้นไป หรือจะเลือกไฟล์อื่นที่ Open ก็ได้

B : Create New เป็นการสร้างไฟล์งานใหม่ โดยปกติแล้วในส่วนนี้จะเลือกที่ HTML ซึ่งเป็นการสร้างเว็บเพจพื้นฐาน แต่ถ้าเลือกหัวข้ออื่น หน้าเว็บเพจนั้นก็จะเป็นไฟล์ตามชนิดที่เลือกใช้งาน เช่น ไฟล์งาน PHP, ASP และ JavaScript เป็นต้น

C : Top Features (videos) เป็นส่วนที่ใช้สำหรับเข้าไปดูรายละเอียดและเทคนิคต่างๆ ของการใช้งานโปรแกรมผ่านทางเว็บไซต์ของ Adobe

D : เป็นส่วนของการเปิดดูคำแนะนำในการใช้งานโปรแกรม

E : เป็นส่วนสำหรับดาวน์โหลดโปรแกรมหรือดูข้อมูลบนเว็บไซต์ของ Adobe

ส่วนประกอบของโปรแกรม Dreamweaver CS6

A : เมนูบาร์ (Menu bar) เป็นส่วนที่ใช้ในการสร้างและทำงานกับโปรแกรม ซึ่งมีการแบ่งเป็นกลุ่มคำสั่งต่างๆ เป็นหมวดหมู่และเก็บไว้เป็นเมนู โดยในแต่ละเมนูก็จะมีเมนูย่อยๆ ไว้เรียกใช้งานตามต้องการ

B : แถบเครื่องมือ (Insert bar) เป็นส่วนของการรวบรวมเครื่องมือที่ใช้ในการสร้างวัตถุหรือองค์ประกอบต่างๆ ของหน้าเว็บเพจ ซึ่งแบ่งเป็นกลุ่มๆ มีทั้งหมด 8 กลุ่ม คือ

- Common เป็นกลุ่มเครื่องมือที่ใช้งานบ่อยๆ ในการสร้างเว็บเพจ เช่น การแทรกตาราง การแทรกรูปภาพ เป็นต้น

- Layout ใช้สำหรับวางวัตถุที่ใช้จัดโครงสร้างของเว็บเพจ เช่น ตาราง เฟรม และ AP Element

- Forms ใช้สำหรับวางวัตถุที่ใช้สร้างแบบฟอร์มเพื่อรับข้อมูลจากผู้ใช้งานเว็บไซต์ เช่น การสมัครสมาชิก เป็นต้น

- Data ใช้สำหรับวางคำสั่งที่ใช้จัดการกับฐานข้อมูลและนำฐานข้อมูลออกมาแสดงบนหน้าเว็บเพจ

- Spray ใช้สำหรับวางวัตถุที่ใช้เทคโนโลยีของ Spary ในรูปแบบต่างๆ

- InContext Editing ใช้สำหรับสร้างพื้นที่เทมเพลตเพื่ออำนวยความสะดวกต่อผู้ใช้ในการแก้ไขเนื้อหา

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

- Favorites ใช้สำหรับเพิ่มเครื่องมือที่เรียกใช้งานบ่อยๆ โดยเพิ่มจากกลุ่มเครื่องมืออื่นๆ ได้โดยคลิกเม้าส์ขวาบน Insert bar แล้วเลือก Customize Favorites (ตัวอย่างด้านล่างเป็นการดึงเครื่องที่ใช้งานบ่อยๆ คือ ตาราง รูปภาพ และ Rollover Image)

C : หน้าต่างการทำงาน (Document Window) เป็นบริเวณที่ใช้ในการออกแบบและสร้างเว็บเพจตามต้องการ ซึ่งสามารถแทรกข้อความ รูปภาพ และวัตถุต่างๆ ลงไปได้เลย

D: แถบสถานะ (Status bar) เป็นส่วนที่แสดงข้อมูลเพิ่มเติมเกี่ยวกับงานที่กำลังทำอยู่ เช่น การปรับขนาดการแสดงผลและเวลาที่ใช้ในการโหลดเว็บเพจนั้นๆ

E : Properties Inspector ใช้ในการกำหนดค่าคุณสมบัติของหน้าเว็บเพจและในส่วนของวัตถุต่างๆ ซึ่งจะมีรายละเอียดแสดงขึ้นมา เมื่อมีการคลิกเลือกวัตถุนั้นๆ

F : พาเนล (Panel) เป็นหน้าต่างหรือชุดคำสั่งพิเศษที่ใช้งานเฉพาะด้าน เช่น ฐานข้อมูล ไฟล์งานต่างๆ สร้างการเชื่อมโยง รวมถึงเรื่องการอัพโหลดไฟล์งานขึ้นเซิร์ฟเวอร์

ในการสร้างเว็บไซต์นั้นถ้าจะให้เป็นระบบจะต้องมีการกำหนดเว็บไซต์ใหม่ ซึ่งในโปรแกรม Adobe Dreamweaver CS6 นั้น เรียกว่าเป็นการ

มุมมองการทำงาน

เมื่อเปิดเรียกใช้งานโปรแกรมขึ้นมาแล้วจะพบหน้าต่างการใช้งานดังรูป (ในที่จะเลือกเป็นแบบ Create new แล้วเลือกเป็นไฟล์ HTML) จะได้หน้าต่างเอกสาร(Document)

หน้าต่างเอกสาร(Document window) คือ ส่วนที่ใช้สำหรับใส่เนื้อหาพร้อมทั้งการจัดองค์ประกอบหน้าเว็บเพจ โดยการใช้งานนั้นจะมีการทำงานเช่นเดียวกับโปรแกรมเวิร์ดโปรเซสเซอร์ทั่วไป คือ พิมพ์ข้อความ แทรกรูปภาพ สร้างตาราง เมื่อออกแบบและตกแต่งแล้วผลลัพธ์ที่แสดงออกมาบนบราวเซอร์ก็จะปรากฏเช่นนั้นด้วย

มุมมองการทำงานของหน้าต่างเอกสารมีอยู่ 6 มุมมอง ดังรูป ซึ่งสามารถคลิกสลับการทำงานได้ตามต้องการ

- มุมมองโค้ด (Code view) เป็นการแสดงมุมมองของเว็บเพจในรูปแบบของชุดคำสั่งภาษา HTML ทั้งเอกสาร ซึ่งถูกสร้างจากโปรแกรม Dreamweaver อัตโนมัติ เหมาะสำหรับเขียนโค้ดคำสั่งเพิ่มเติม อาจจะเป็นคำสั่ง JavaScript หรือ CSS ก็ได้

- มุมมองโค้ดและออกแบบ (Code and Design หรือ Split) เป็นการแสดงมุมมองของเว็บเพจทั้งโค้ด HTML และงานออกแบบบนหน้าเอกสาร โดยมีการแบ่งออกเป็น 2 ส่วนในหน้าเดียวกัน

- มุมมองออกแบบ (Design view) เป็นการแสดงมุมมองของเว็บเพจในลักษณะของการออกแบบซึ่งจะปรากฏผลลัพธ์ทางบราวเซอร์ในลักษณะเดียวกัน

- มุมมองแสดงผลโค้นหน้าเว็บ (Live Code) มุมมองนี้จะแสดงผลร่วมกับมุมมอง Live View โดยจะแสดงมุมมอง Live Code ได้ก็ต่อเมื่ออยู่ในมุมมอง Live View เท่านั้น ซึ่งจะใช้ตรวจสอบดูโค้ดในตำแหน่งต่างๆ ไม่สามารถที่จะแก้ไขโค้ดในมุมมองนี้ได้

- มุมมองแสดงหน้าเว็บเหมือนดูจากบราวเซอร์ (Live View) มุมมองนี้จะแสดงเว็บเพจเหมือนกับหน้าที่แสดงผลในบราวเซอร์ สามารถแสดงผลจากคำสั่ง JavaScript และ Plug-in ต่างๆ ที่นำมาใช้งาน

- มุมมองแสดงผลหน้าเว็บที่จัดรูปแบบด้วย CSS (Inspect) มุมมองนี้จะแสดงผลร่วมกับ Live View ซึ่งเป็นมุมมองที่ใช้ในการตรวจสอบการจัดรูปแบบด้วยคำสั่ง CSS ในตำแหน่งที่เม้าส์เลื่อนผ่านโดยสามารถดูได้จากพาเนล CSS Style

เริ่มต้นการสร้างไซต์งานใหม่ (New Site)

ก่อนที่เราจะใช้งานโปรแกรม Dreamweaver เพื่อการสร้างเว็บไซต์ได้นั้น เราต้องทำการตั้งไซต์ (New Site/Site Setup) ของเว็บขึ้นมาเสียก่อน มิฉะนั้นแล้ว...โปรแกรมจะไม่ทราบถึงตำแหน่งของ Folder ที่ใช้ในการเก็บไฟล์ต่าง ๆ ของเว็บไซต์เรา ซึ่งจะทำให้เกิดปัญหาต่าง ๆ ตามมาในการทำเว็บของเรากับโปรแกรมครับ โดยโปรแกรม Dreamweaver จะยอมให้เราบันทึกไฟล์งานได้ในเฉพาะโฟร์เดอร์ที่เราทำการกำหนดหรือตั้งไซค์งานไว้แล้วเท่านั้นครับ

วิธีการตั้งไซต์งาน (Site Setup/Site Definition)

ในการตั้งไซต์งานของโปรแกรม Dreamweaver นั้น จะมีอยู่ด้วยกัน 2 รูปแบบ คือ

1. การตั้งไซต์งานเพื่อสร้างเว็บในแบบ Static ซึ่งเป็นการตั้งไซต์งานเพื่อสร้างเว็บในรูปแบบของ HTML โดยปรกติ

2. การตั้งไซต์งานเพื่อสร้างเว็บในแบบ Dynamic ซึ่งเป็นการตั้งไซต์งานเพื่อพัฒนาเว็บในรูปแบบที่มีการใช้งานภาษาทาง Web Programming อย่างเช่น PHP, JSP เข้าร่วมในการพัฒนาเว็บ

**สำหรับในบทความนี้ จะขอแนะนำการตั้งไซต์งานในรูปแบบที่ 1 ***