บทที่ 1
ส่วนประกอบประกอบต่าง ๆ ของดรีมเวเวอร์

        โปรแกรม Dreamweaver เป็นอีกโปรแกรมหนึ่งที่ได้รับความนิยมมากในการสร้างเวบเพจเพราะความสะดวกในการ
ตกแต่งเว็บเพจด้วยวิธีง่าย ๆ นั่นเอง ต่อไปนี้จะได้เรียนรู้วิธีพื้นฐานรวมถึงเทคนิคต่าง ๆ ที่สำคัญในการใช้งานเครื่องมือที่
Dreamweaver เตรียมเอาไว้แล้ว

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

ส่วนประกอบของ Dreamweaver
         เมื่อเรียกใช้โปรแกรม Dreamweaver แล้วจะปรากฏหน้าต่างของโปรแกรมดังรูป ซึ่งจะมีส่วนประกอบต่าง ๆ ดังนี้

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

เมนูบาร์
        แถบเมนูคำสั่งที่ใช้จัดการกับเว็บเพจในหน้าต่างเว็บเพจของหน้าต่างโปรแกรม Dreamweaver ซึ่งคำสั่งเหล่านี้จะถูกจัดกลุ่ม
เป็นหมวดหมู่ของคำสั่งที่เกี่ยวข้องกัน เช่น File Edit View Window Help เป็นต้น

หน้าต่างเว็บเพจ
        เป็นพื้นที่ทำงานสำหรับการตกแต่ง และใส่ออบเจ็กต์ต่าง ๆ ลงไปในเว็บเพจนั่นเอง หน้าตาของเว็บเพจเมื่อดูจากบราวเซอร์
หรือพิมพ์ออกเครื่องพิมพ์จะมีลักษณะเดียวกับการตกแต่งในพื้นที่ทำงานนี้ด้วย จึงเป็นที่มาของคำว่า WYSIWYG (What - You -
See - Is - What - You - Get) เข้าใจกันง่าย ๆ คือ คุณออกแบบอย่างไร หน้าตาเว็บเพจก็จะออกมาอย่างนั้นด้วย สีฉากพื้นหลัง
(Background Color) ของพื้นที่ทำงานปกติจะเป็นสีขาว คุณสามารถเปลี่ยนได้ภายหลังที่หน้าต่าง Properties

หน้าต่างออบเจ็กต์ (Objects palette)
        Dreamweaver ได้เตรียมพร้อมหน้าต่างอบบเจ็กต์ที่มีลักษณะเป็นปุ่ม ซึ่งรวบรวมเอาไว้เป็นหมวดหมู่ที่เกี่ยวข้องกัน สำหรับ
ใส่ออบเจ็กต์ลงในเว็บเพจ เช่น ตาราง รูปภาพ ActiveX เลเยอร์ เป็นต้น เพื่อการตกแต่งและเพิ่มความสามารถให้กับเว็บเพจ
โดยการคลิกที่ปุ่มในหน้าต่างออบเจ็กต์ที่ต้องการ จากนั้นคลิกแล้วลากเมาส์บนเว็บเพจเพื่อนำไปตกแต่งเว็บเพจได้ตามต้องการ การเปิดหน้าต่างออบเจ็กต์โดยการคลิ๊กเมนู Window > Objects ภายในจะมีคำสั่ง 7 หัวข้อให้เลือก
   1. Characters เป็นการจัดเกี่ยวกับด้านสัญลักษณ์ต่างๆที่มีปัญหากับเวอร์ชั่นเก่าทำให้สามารถใช้งานได้ง่ายขึ้น
   2. Common เป็นObject ที่ใช้งานมากที่สุดเป็นคำสั่งนำรูปภาพมาใช้ ตาราง และพวก Plung in ต่างๆ
   3. Forms เป็นการสร้างแบบฟอร์ม เช็คบล๊อค
   4. Frames เป็นคำสั่งการแบ่งหน้าจอออกเป็นส่วนๆสมัยก่อนนิยมใช้กันมาก
   5. Head เป็นคำสั่งใช้ Link
   6. Invisible เป็นการใช้คำสั่งด้านภาษา Script ต่างๆ
   7. Special เป็นคำสั่งพิเศษสำหรับมืออาชีพ สำหรับระดับเบื้องต้นยังไม่จำเป็นต้องใช้

หน้าต่างพร็อพเพอร์ตี้ (properties inspecter)
        สำหรับกำหนดลักษณะรูปแบบอักษร ขนาด การจัดวาง สีสันของข้อความหรือขนาดของออบเจ็กต์ ที่ใส่ลงไปในเว็บเพจ โดยสามารถสร้างจุดเชื่อมโยงเว็บเพจหรอไปยังเว็บไซต์อื่น ๆ ได้ที่ช่อง ศรืา ในหน้าต่างพร็อพเพอร์ตี้ (properties) และกำหนดคุณสมบัติอื่น ๆ ได้อีกด้วย การเปิดหน้าต่างพร็อพเพอร์ตี้โดยคลิ๊กเมนู Window > Properties

หน้าต่าง Launcher (Launcher Window)
     เป็นหน้าต่างที่รวบรวมปุ่มที่เชื่อมโยงการปิดหรือเปิดหน้าต่างใช้งานอื่น ๆ ที่เป็นเครื่องมือสำคัญได้แก่

         Site สำหรับอำนวยความสะดวกในการสร้างเว็บเพจใหม่ การแก้ไขเว็บเพจ จัดการกับเว็บไซต์โดยจะแสดงหน้าต่างดังรูป             ถัดไปซึ่งจะแบ่งหน้าต่างออกเป็น 2 กรอบ กรอบด้านซ้ายมือจะแสดงโครงสร้างของเว็บไซต์ (Remote site) และไฟล์ต่าง ๆ             ที่เชื่อมโยงกันอยู่ด้วย ส่วนกรอบด้านขวาจะแสดงไฟล์ต่าง ๆ ที่อยู่ในเครื่องของคุณนั่นเอง ที่ถูกกำหนดให้ป็น Local Site             การเปิดหน้าต่าง Site โดยคลิ๊กที่ปุ่ม Site หรือคลิ๊กเมนู Window > Site Map หรือกด<Alt+F8>

          HTML Styles หน้าต่างกำหนดรูปแบบของการกำหนดคุณสมบัติของอักษรและการจัดวางออบเจ็กต์ภายในหน้าเว็บเพจ             การเปิดหน้าต่าง HTML Styles คลิ๊กเมนู Window > HTML Styles หรือกด <Ctrl+F11>

          Behaviors หน้าต่างสำหรับเพิ่มลูกเล่นให้กับเว็บเพจด้วยการใส่ JavaScript เพื่อควบคุมการทำงานขอบออบเจ็กต์ต่าง ๆ              ตามเหตุการณ์ที่เกิดขึ้น เช่น เมื่อคลิกเมาส์ให้เกิดการสลับภาพเป็นภาพอื่น ๆ เมื่อเริ่มเปิดหน้าเว็บเพจด้วยบราวเซอร์              ให้ปรากฏ รอบข่าวสารได้ เป็นต้น การเปิดหน้าต่าง Behaviors โดยคลิ๊กที่ปุ่ม Behaviors หรอคลิ๊กเมนู
             Window > Behaviors
        
          History คุณสามารถย้อนกลับการทำงานของขั้นตอนในการสร้างเว็บเพจได้โดยการเลื่อนแถบด้านซ้ายมือไปยังขั้นตอน              ที่ต้องการ อำนวยความสะดวกดีมากครับ

          Code Inspector สำหรับตรวจสอบโค้ดภาษา HTML ที่ควบคุมการแสดงข้อมูลของเว็บเพจในเบื้องหลังนั่นเอง การเปิด              หน้าต่าง Code Inspector โดยคลิกที่ปุ่ม Code Inspector หรือคลิ๊กที่เมนู Window > Code Inspector หรือกด <F10>

แถบสถานะ
        เป็นหน้าต่างแสดงรายละเอียดเกี่ยวกับหน้าต่างเว็บเพจ
          ซ้ายมือสุดจะแสดง Tag ที่ใช้กับออบเจ็กต์ที่เลือก
          ถัดมาเป็นการกำหนดขนาดของหน้าต่างเว็บเพจ ขนาดปกติจะเป็น 796 x 540 pixel คลิกที่ลูกศรเพื่อเลือกกำหนด             ขนาดใหม่ได้
          ขนาดของไฟล์เว็บเพจและเวลาที่ใช้ในการเปิดเว็บเพจนี้
          Mini-Launcher เป็นหน้าต่าง Launcher ขนาดย่อที่ใช้เรียกหน้าต่างอำนวยความสะดวกนั่นเอง