ส่วนประกอบของ Dreamweaver 8

ส่วนประกอบของ Dreamweaver 8
        ก่อนที่เราจะใช้งาน Dreamweaver 8 เราควรรู้ส่วนประกอบต่าง ๆ ของ Dreamweaver 8 ในเบื้องต้นเพื่อเป็นพื้นฐานในการใช้งานได้สะดวก

1. เมื่อคลิกเมาส์เข้าสู่โปรแกรม Dreamweaver 8 และคลิกเลือก HTML จะเกิดหน้าจอ ดังภาพ
   
   ส่วนประกอบที่สำคัญของหน้าจอนี้ มีดังนี้
   
   • ส่วนที่ 1 แถบเมนู (Menu bar) เป็นแถบที่เก็บคำสั่งทั้งหมดของโปรแกรม
   • ส่วนที่ 2 แถบกลุ่มเครื่องมือ (Insert bar) เป็นแถบที่รวมเครื่องมือต่าง ๆ ในการสร้างเว็บ
   • ส่วนที่ 3 แถบเครื่องมือ (Toolbar) รวมปุ่มเครื่องมือต่าง ๆ ที่ใช้งานบ่อย
   • ส่วนที่ 4 แถบสถานะ (Status bar) แสดงข้อมูลเพิ่มเติมเกี่ยวกับงานที่กำลังทำอยู่
   • ส่วนที่ 5 Property Inspector เป็นส่วนกำหนดคุณสมบัติขององค์ประกอบต่าง ๆ บนหน้าเว็บและ สามารถปรับแต่งค่าขององค์ประกอบต่าง ๆ ได้
2. แถบแสดงสถานะที่ควรรู้จัก ดังภาพ
   
   
   • ส่วนที่ 1 ส่วนไว้เลือกแท็ก HTML: จะแสดงโค้ด HTML ของเว็บเพจ
   • ส่วนที่ 2 เป็นเครื่องมือปรับการแสดงผลเว็บเพจขณะทำงาน: Zoom Tool สำหรับซูมเข้าออกเพื่อขยายหน้าจอการแสดงผล หรือใช้ Hand Tool เลื่อนดูหน้าเว็บในส่วนที่มองไม่เห็น
   • ส่วนที่ 3 แสดงขนาดหน้าต่างของเว็บเพจ Window Size: ที่เรากำหนด สามารถเลือกกำหนดเป็นขนาดและเปอร์เซ็นต์
   • ส่วนที่ 4 แสดงขนาดเอกสารและเวลาในการโหลด: แสดงเวลาโดยประมาณ ที่ใช้ในการโหลดหน้าเว็บเพจที่เราสร้าง
   
   กลุ่มเครื่องมือ
   การเข้าถึงกลุ่มเครื่องมือ ให้คลิกเมาส์ที่ปุ่มตัวเลือก ดังภาพ
   
   
   และคลิกเลือกกลุ่มเครื่องมือที่ต้องการได้ ดังภาพ
   
   
   กลุ่มเครื่องมือที่ใช้สำหรับสร้างงานเว็บเพจ มีอยู่ 8 กลุ่มที่ควรรู้จัก ดังนี้
   • กลุ่มเครื่องมือ Common: เป็นส่วนที่รวบรวมเครื่องมื่อต่าง ๆ ที่เราใช้งานบ่อย เช่น การแทรกภาพ แทรกตาราง เป็นต้น
     
     
   • กลุ่มเครื่องมือ Layout :เป็นส่วนที่รวบรวมเครื่องมื่อต่าง ๆ ที่ใช้จัดองค์ประกอบบนหน้าเว็บ เช่น การจัดวางข้อความให้อยู่ในตำแหน่งต่าง ๆ เป็นต้น
     
     
   • กลุ่มเครื่องมือ Forms :เป็นส่วนที่รวบรวมเครื่องมื่อในการสร้างแบบฟอร์ม ปุ่ม ตัวเลือก ลักษณะต่าง ๆ เช่น check box, radio button เป็นต้น
     
     
   • กลุ่มเครื่องมือ Text :เป็นส่วนที่รวบรวมเครื่องมื่อสำหรับการจัดวางตำแหน่ง และปรับแต่งตัวอักษรบนหน้าเว็บ
     
     
   • กลุ่มเครื่องมือ HTML :เป็นส่วนที่รวบรวมเครื่องมื่อสำหรับจัดการภาษา HTML บนหน้าเว็บ
     
     
   • กลุ่มเครื่องมือ Application :เป็นส่วนที่รวบรวมเครื่องมื่อสำหรับการสร้าง Application ติดต่อกับฐานข้อมูล
     
     
   • กลุ่มเครื่องมือ Flash elements: เป็นเครื่องมือสำหรับนำองค์ประกอบที่สร้างจากโปรแกรม Flash มาวางบนหน้าเว็บ
     
     
   • กลุ่มเครื่องมือ Favorites: เราสามารถเลือกเครื่องมือที่ใช้บ่อยจากแต่ละกลุ่มเครื่องมือมาใส่ในเมนูนี้ได้ตามความต้องการ
     
     
   การเปลี่ยนรูปแบบการเรียกใช้งานกลุ่มเครื่องมือ
   ในกลุ่มเครื่องมือ คำสั่งสุดท้าย คือ Show as Tabs ดังภาพ
   
   
   
   Show as Tabs คือคำสั่งที่ให้แสดงกลุ่มเครื่องมือแยกเป็นแท็บ ๆ เราสามารถคลิกเลือกแท็บของเครื่องมือที่ต้องการใช้งานได้ตามความต้องการ ดังภาพ
   
   
   
   การกำหนดคุณสมบัติขององค์ประกอบต่าง ๆ บนหน้าเว็บ (Property Inspector)
        การกำหนดคุณสมบัติขององค์ประกอบต่าง ๆ บนหน้าเว็บ สามารถกระทำได้เมื่อเราคลิกเลือกภาพ ตาราง ตัวหนังสือหรือองค์ประกอบอื่น ๆ ก็จะปรากฏ Property Inspector ขององค์ประกอบนั้น ๆ ให้เราสามารถปรับแต่งได้ตามต้องการ
   ตัวอย่าง
   จากภาพข้างล่าง ถ้าเราคลิกเลือกที่ภาพ จะเกิด Property Inspector ที่แสดงคุณสมบัติต่างๆ ของภาพ ซึ่งเราสามารถปรับแต่งได้
   
   
   
   ขั้นตอนการนำภาพเข้าและตกแต่งภาพ
   1. คลิกที่รูป เพื่อนำรูปภาพเข้ามาวางบนหน้าเว็บเพจ
   2. คลิกเมาส์ที่รูปภาพ
   3. Property Inspector ของรูปภาพจะเกิดขึ้น ทำให้เราสามารถจัดการกับรูปภาพได้ตามต้องการ เช่น การเชื่อมโยงไปยังไฟล์อื่น เมื่อคลิกภาพนี้ การกำหนดตำแหน่งให้คลิกได้ในภาพ ตลอดจนการกำหนดขนาดของภาพ เป็นต้น
      
   กลุ่มหน้าต่างพาเนล (Panal Group)
        นอกจากนี้ โปรแกรม Dreamweaver 8 ยังมีหน้าต่างพาเนลต่าง ๆ ที่เพิ่มความสามารถในการจัดการและออกแบบหน้าเว็บเพจ ซึ่งแต่ละพาเนลจะมีความสามารถในการจัดการหน้าเว็บเพจได้ไม่เหมือนกัน เราเรียกเปิดพาเนลได้จากเมนู Window > และเลือกพาเนลที่ต้องการ ดังภาพ
   
   
   
   มุมมองการทำงานใน Dreamweaver
        ในการสร้างงานเว็บเพจ เราสามารถเลือกมุมมองในการทำงานได้ 3 รูปแบบ โดยคลิกที่รูปไอคอน ที่อยู่ใน Toolbar แถบเครื่องมือมาตรฐาน ดังนี้
   
   
   1. Show Code View คลิกที่ จะปรากฏมุมมองแสดงโค้ด HTML ของหน้าเว็บเพจที่เรากำลังทำงานอยู่ ถ้าเรามีความรู้เรื่องภาษา HTML ก็สามารถแก้ไขโค้ดได้ตามต้องการ ดังภาพ
      
      
      
   2. Show Code and Design View คลิกที่ จะปรากฏมุมมองที่แสดงทั้งโค้ดและหน้าเว็บเพจที่เรากำลังทำงานอยู่ สำหรับผู้ที่ต้องการดูโค้ดไปพร้อมกับการออกแบบหน้าจอ ดังภาพ
      
      
      
   3. Show Design View คลิกที่ จะแสดงหน้าจอที่เราออกแบบเว็บเพจซึ่งประกอบด้วยภาพ ข้อความ ตาราง หรื่ออื่น ๆ โดยไม่มีการแสดงโค้ดต่าง ๆ มาเกี่ยวข้อง ดังภาพ
      
      
      
   การออกจากโปรแกรม Dreamweaver
        การออกจากโปรแกรม Dreamweaver ทำได้หลายวิธีด้วยกัน ดังนี้
   • วิธีที่ 1 ไปที่ File แล้วเลือกคำสั่ง File>Exit เป็นการสุดสิ้นการใช้งานโปรแกรม
   • วิธีที่ 2 คลิกเมาส์ที่ บริเวณมุมบนขวาของหน้าจอ
   • วิธีที่ 3 คลิกเมาส์ที่ บริเวณมุมบนซ้ายของหน้าจอและเลือกคลิกที่ Close
   • วิธีที่ 4 กดที่คีย์บอร์ด <Ctrl+Q>