วิชาการออกแบบและพัฒนาเว็ปไซด์: หน่วยที่ 2 ใช้งานโปรแกรม Dreamweaver CS5

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

วิธีที่ 1 เรียกผ่าน Start โดยการคลิกที่ปุ่ม Start >>All Program >> Adobe Dreamweaver CS5

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

เมื่อคลิกเลือกเปิดโปรแกรมขึ้นมาแล้วจะปรากฏ 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

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

เมื่อเปิดเรียกใช้งานโปรแกรมขึ้นมาแล้วจะพบหน้าต่างการใช้งานดังรูป (ในที่จะเลือกเป็นแบบ 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 ได้ก็ต่อเมื่ออยู่ในมุมมอง Livwe View เท่านั้น ซึ่งจะใช้ตรวจสอบดูโค้ดในตำแหน่งต่างๆ ไม่สามารถที่จะแก้ไขโค้ดในมุมมองนี้ได้

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

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

การออกจากโปรแกรม

เมื่อเปิดใช้งานโปรแกรมเสร็จแล้ว ต้องการที่จะปิดหรือออกจากโปรแกรม สามารถทำได้หลายๆ วิธี ดังนี้
1. คลิกที่ปุ่ม Close บน Control Box ดังรูป

2.คลิกเลือกที่ปุ่ม

บนไตเติ้ลบาร์ แล้วทำการเลือกคำสั่ง Close ดังรูป

3. คลิกเลือกที่เมนู File >> Exit ดังรูป หรือใช้แป้นคีย์ลัด Ctrl + Q

การสร้างเว็บไซต์ใหม่ด้วยโปรแกรม Adobe Deamweaver CS5

การกำหนดไซต์มีความสำคัญมากในการทำเว็บด้วย Dreamweaver ไม่ว่าจะสร้างเว็บไซต์ใหม่ หรือ แก้ไขเว็บไซต์เก่าที่เคยทำมาแล้ว การกำหนดไซต์เป็นขั้นแรกของการทำเว็บด้วย Dreamweaver เป็นการกำหนดให้โปรแกรมทราบที่อยู่ของไฟล์ต่างของเว็บไซต์ที่เราทำไว้ ทำให้โปรแกรมสามารถดึงมาแก้ไขได้

เครื่องมือต่างๆของ Dreamweaver นั้นจะทำงานโดยอ้างอิง site ที่เรากำหนดทั้งหมด ถ้าไม่ได้กำหนด site ก็ทำให้เครื่องมือเหล่านั้นแทบจะหมดความหมายไปเลยทีเดียว

สิ่งแรกที่เราจะต้องเข้าใจในการทำเว็บไซต์คือ ไฟล์ทั้งหมด ทั้งรูปภาพ ไฟล์เอกสารต่างๆ เช่น HTML หรือไฟล์ VDO ที่อยู่ในเว็บไซต์ จะถูกรวมอยู่ใน Folder เดียวเราจะเรียก Folder นั้นว่า local root folder

สร้าง Site ใหม่นั่นเอง ซึ่งสามารถโดยวิธีการดังนี้