การใช้งานโปรแกรม Adobe Dreamweaver CS5

การใช้งานโปรแกรม Adobe Dreamweaver CS5 

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

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

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

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

วิธีที่ 3 เรียกผ่านช่องค้นหา search program and file พิมพ์คำว่า ” Dreamweaveer CS5 “ ลงในช่อง แล้วกดปุ้ม Enter

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

http://nanacomputer.com/เริ่มต้นกับการใช้งาน-adobe-dreamweaveer/ อ้างอิง