ใบความรู้ที่ 3.1
เรื่องความรู้เบื้องต้นเกี่ยวกับโปรแกรม Dreamweaver 8

1.     การติดตั้งโปรแกรม
         การติดตั้งโปรแกรม Dreamweaver 8  มีขั้นตอนดังนี้
         1. ใส่แผ่นซีดีรอม โปรแกรม Dreamweaver 8 เข้าไปในไดร์ฟซีดีรอม
         2. โปรแกรมจะเริ่มทำงานโดยอัตโนมัติ  หรือถ้าเปิดเข้าไปที่ไดร์ฟซีดีรอม(CD-ROM Drive)  ดับเบิลคลิกที่ไอคอน Setup โปรแกรม

        ภาพที่ 3.1 Setup โปรแกรม

         3.  จะได้หน้าต่างข้อตกลงสิทธิ์การใช้งาน (License Agreement) คลิกเลือก I accept แล้วคลิกปุ่ม Next

        ภาพที่ 3.2 คลิกปุ่ม  Next

         4. เลือกไดเรกทอรี่ที่ต้องการ เช่น C:\Program File … ถ้าต้องการเปลี่ยนให้คลิกปุ่ม Change เลือกไดรฟ์และโฟลเดอร์ที่ต้องการแล้วคลิกปุ่มNext
 

        ภาพที่ 3.3 คลิกปุ่ม Change เลือกไดรฟ์และโฟลเดอร์
         5. เลือกชนิดของโปรแกรมที่จะใช้ร่วมกับ Dreamweaver (Default Editor) ถ้าเลือก       ทั้งหมดแล้วคลิกปุ่ม  Select All  แล้วคลิกปุ่ม  Next
 

        ภาพที่ 3.4 คลิกปุ่ม  Select All  แล้วคลิกปุ่ม  Next

         6. คลิกปุ่ม  Install  เพื่อติดตั้งโปรแกรม
 

   
         ภาพที่ 3.5 คลิกปุ่ม  Install 

        7. เริ่มติดตั้งโปรแกรมลงในเครื่องจนเสร็จสมบูรณ์
 

        ภาพที่ 3.6 เริ่มติดตั้งโปรแกรม

        8. คลิกปุ่ม  Finish
 

        ภาพที่ 3.7 คลิกปุ่ม  Finish
การเปิดใช้งานโปรแกรม
         หลังจากติดตั้งโปรแกรมบนเครื่องคอมพิวเตอร์แล้ว สามารถเรียกใช้งานโปรแกรม โดยเรียกผ่านปุ่ม  Start  มีวิธีทำ คือ
         1. คลิกที่ปุ่ม Start บนทาสก์บาร์
         2. เลือกคำสั่งย่อย  Programs >> Macromedia >> Macromedia Dreamweaver 8 เรียกผ่านไอคอน บนเดสก์ทอป
 

        ภาพที่ 3.8 คลิกที่ปุ่ม Start 
        กรณีที่ได้สร้างไอคอน  Dreamweaver 8  ไว้บนเดสก์ทอป สามารถดับเบิลคลิกที่ไอคอนได้ เมื่อเปิดโปรแกรมแล้วจะเข้าสู่หน้าต่างที่เรียกว่า  หน้าเริ่มต้น (Start Page) เพื่อให้ผู้ใช้เรียกใช้งานได้อย่างรวดเร็ว ซึ่งประกอบด้วยส่วนต่าง ๆ  ดังรูป
 

      
ภาพที่ 3.9 หน้าเริ่มต้น (Start Page) 

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

  1. เมื่อคลิกเมาส์เข้าสู่โปรแกรม Dreamweaver 8 และคลิกเลือก HTML จะเกิดหน้าจอ                 

        ภาพที่ 3.10 เข้าสู่โปรแกรม Dreamweaver 8 และคลิกเลือก HTML
        ส่วนประกอบที่สำคัญของหน้าจอนี้ มีดังนี้ 
ส่วนที่ 1 แถบเมนู (Menu bar) เป็นแถบที่เก็บคำสั่งทั้งหมดของโปรแกรม
ส่วนที่ 2 แถบกลุ่มเครื่องมือ (Insert bar) เป็นแถบที่รวมเครื่องมือต่าง ๆ ในการสร้างเว็บ
ส่วนที่ 3 แถบเครื่องมือ (Toolbar) รวมปุ่มเครื่องมือต่าง ๆ ที่ใช้งานบ่อย
ส่วนที่ 4 แถบสถานะ (Status bar) แสดงข้อมูลเพิ่มเติมเกี่ยวกับงานที่กำลังทำอยู่
ส่วนที่ 5 Property Inspector เป็นส่วนกำหนดคุณสมบัติขององค์ประกอบต่าง ๆ บนหน้าเว็บและ สามารถปรับแต่งค่าขององค์ประกอบต่าง ๆ ได้
2.   แถบแสดงสถานะที่ควรรู้จัก

        ภาพที่ 3.11 แถบแสดงสถานะที่ควรรู้จัก

        ส่วนที่ 1 ส่วนไว้เลือกแท็ก HTML: จะแสดงโค้ด HTML ของเว็บเพจ
ส่วนที่ 2 เป็นเครื่องมือปรับการแสดงผลเว็บเพจขณะทำงาน:      Zoom Tool สำหรับ        ซูมเข้าออกเพื่อขยายหน้าจอการแสดงผล หรือใช้      Hand Tool เลื่อนดูหน้าเว็บในส่วนที่        มองไม่เห็น
ส่วนที่ 3 แสดงขนาดหน้าต่างของเว็บเพจ Window Size: ที่เรากำหนด สามารถเลือกกำหนดเป็นขนาดและเปอร์เซ็นต์
ส่วนที่ 4 แสดงขนาดเอกสารและเวลาในการโหลด: แสดงเวลาโดยประมาณ ที่ใช้ในการโหลดหน้าเว็บเพจที่เราสร้าง

        กลุ่มเครื่องมือ
การเข้าถึงกลุ่มเครื่องมือ ให้คลิกเมาส์ที่ปุ่มตัวเลือก
 

        ภาพที่ 3.12 การเข้าถึงกลุ่มเครื่องมือ
และคลิกเลือกกลุ่มเครื่องมือที่ต้องการได้

        ภาพที่ 3.13 คลิกเลือกกลุ่มเครื่องมือ
    3.   กลุ่มเครื่องมือที่ใช้สำหรับสร้างงานเว็บเพจ มีอยู่ 8 กลุ่มที่ควรรู้จัก ดังนี้
        กลุ่มเครื่องมือ Common เป็นส่วนที่รวบรวมเครื่องมือต่าง ๆ ที่เราใช้งานบ่อย เช่น การแทรกภาพแทรกตาราง เป็นต้น 
 

        ภาพที่ 3.14 กลุ่มเครื่องมือ Common
        กลุ่มเครื่องมือ Layout เป็นส่วนที่รวบรวมเครื่องมือต่าง ๆ ที่ใช้จัดองค์ประกอบบนหน้าเว็บ เช่น การจัดวางข้อความให้อยู่ในตำแหน่งต่าง ๆ เป็นต้น
 
        ภาพที่ 3.15 กลุ่มเครื่องมือ Layout 
        กลุ่มเครื่องมือ Forms เป็นส่วนที่รวบรวมเครื่องมือในการสร้างแบบฟอร์ม ปุ่ม ตัวเลือก ลักษณะต่าง ๆ เช่น check box, radio button เป็นต้น 
 

        ภาพที่ 3.16 กลุ่มเครื่องมือ Forms 
        กลุ่มเครื่องมือ Text เป็นส่วนที่รวบรวมเครื่องมือสำหรับการจัดวางตำแหน่ง และปรับแต่งตัวอักษรบนหน้าเว็บ
 
        ภาพที่ 3.17 กลุ่มเครื่องมือ Text 
      กลุ่มเครื่องมือ HTML เป็นส่วนที่รวบรวมเครื่องมือสำหรับจัดการภาษา HTMLบนหน้าเว็บ

        ภาพที่ 3.18 กลุ่มเครื่องมือ HTML 
        กลุ่มเครื่องมือ Application เป็นส่วนที่รวบรวมเครื่องมือสำหรับการสร้าง Application ติดต่อกับฐานข้อมูล
        กลุ่มเครื่องมือ Flash elements เป็นเครื่องมือสำหรับนำองค์ประกอบที่สร้างจากโปรแกรม Flash มาวางบนหน้าเว็บ

        ภาพที่ 3.19 กลุ่มเครื่องมือ Flash elements

        กลุ่มเครื่องมือ Favorites เราสามารถเลือกเครื่องมือที่ใช้บ่อยจากแต่ละกลุ่มเครื่องมือมาใส่ในเมนูนี้ได้ตามความต้องการ

        ภาพที่ 3.20 กลุ่มเครื่องมือ Favorites
        การเปลี่ยนรูปแบบการเรียกใช้งานกลุ่มเครื่องมือ ในกลุ่มเครื่องมือ คำสั่งสุดท้าย คือ Show as Tabs


ภาพที่ 3.21 Show as Tabs
Show as Tabs คือคำสั่งที่ให้แสดงกลุ่มเครื่องมือแยกเป็นแท็บ ๆ เราสามารถคลิกเลือกแท็บของเครื่องมือที่ต้องการใช้งานได้ตามความต้องการการกำหนดคุณสมบัติขององค์ประกอบต่าง ๆ บนหน้าเว็บ (Property Inspector)
        การกำหนดคุณสมบัติขององค์ประกอบต่าง ๆ บนหน้าเว็บ สามารถกระทำได้เมื่อเราคลิกเลือกภาพ ตาราง ตัวหนังสือหรือองค์ประกอบอื่น ๆ ก็จะปรากฏ Property Inspector ขององค์ประกอบนั้น ๆ ให้เราสามารถปรับแต่งได้ตามต้องการ ถ้าเราคลิกเลือกที่ภาพ จะเกิด Property Inspector   ที่แสดงคุณสมบัติต่างๆ ของภาพ ซึ่งเราสามารถปรับแต่งได้
ขั้นตอนการนำภาพเข้าและตกแต่งภาพ
1.   คลิกที่รูป         เพื่อนำรูปภาพเข้ามาวางบนหน้าเว็บเพจ
2.   คลิกเมาส์ที่รูปภาพ
3.   Property Inspector ของรูปภาพจะเกิดขึ้น ทำให้เราสามารถจัดการกับรูปภาพได้    ตามต้องการ เช่น การเชื่อมโยงไปยังไฟล์อื่น เมื่อคลิกภาพนี้ การกำหนดตำแหน่งให้คลิกได้ในภาพ ตลอดจนการกำหนดขนาดของภาพ เป็นต้น
กลุ่มหน้าต่างพาเนล (Panal Group)
        นอกจากนี้ โปรแกรม Dreamweaver 8 ยังมีหน้าต่างพาเนลต่าง ๆ ที่เพิ่มความสามารถในการจัดการและออกแบบหน้าเว็บเพจ ซึ่งแต่ละพาเนลจะมีความสามารถในการจัดการหน้าเว็บเพจได้    ไม่เหมือนกัน เราเรียกเปิดพาเนลได้จากเมนู Window > และเลือกพาเนลที่ต้องการ

        ภาพที่ 3.22 กลุ่มหน้าต่างพาเนล (Panal Group)
 มุมมองการทำงานใน Dreamweaver
        ในการสร้างงานเว็บเพจ เราสามารถเลือกมุมมองในการทำงานได้ 3 รูปแบบ โดยคลิกที่รูปไอคอน   ที่อยู่ใน Toolbar แถบเครื่องมือมาตรฐาน ดังนี้
        1.   Show Code View คลิกที่            จะปรากฏมุมมองแสดงโค้ด HTML ของหน้า
เว็บเพจที่เรากำลังทำงานอยู่ ถ้าเรามีความรู้เรื่องภาษา HTML ก็สามารถแก้ไขโค้ดได้ตามต้องการ    

 

        ภาพที่ 3.23 Show Code View 
        2.   Show Code and Design View คลิกที่   จะปรากฏมุมมองที่แสดงทั้งโค้ดและหน้าเว็บเพจที่เรากำลังทำงานอยู่ สำหรับผู้ที่ต้องการ
ดูโค้ดไปพร้อมกับการออกแบบหน้าจอ

 

        ภาพที่ 3.24 Show Code and Design View 
        3.   Show Design View คลิกที่   จะแสดงหน้าจอที่เราออกแบบเว็บเพจซึ่งประกอบด้วยภาพ ข้อความ ตาราง หรื่ออื่น ๆ โดยไม่มีการแสดงโค้ดต่าง ๆ มาเกี่ยวข้อง ดังภาพ

 

                 
        ภาพที่ 3.25 Show Design View 

        การเปิดโปรแกรม
            
หลังจากติดตั้งโปรแกรมบนเครื่องคอมพิวเตอร์แล้ว  สามารถเรียกใช้งานโปรแกรม ดังนี้
             ดับเบิลคลิกที่ไอคอน   กรณีที่ได้สร้างไอคอนไว้บนเดสก์ทอป (Desktop) 
             คลิกปุ่ม Start

        ภาพที่ 3.26 การเปิดโปรแกรม
        1.   คลิกปุ่ม Start บน Taskbar (มุมล่างซ้ายของหน้าจอ)
        2.   เลือกคำสั่งย่อย Programs -> Macromedia -> Macromedia Dreamweaver 8
             เมื่อเข้าสู่โปรแกรม Dreamweaver 8   จะปรากฏหน้าต่าง Workspace Setup สำหรับเลือกรูปแบบพื้นที่ทำงานของโปรแกรม (แสดงเฉพาะตอนเปิดใช้โปรแกรมครั้งแรกเท่านั้น) ให้เลือกรูปแบบที่ต้องการ แล้วคลิกปุ่ม OK (รูปแบบที่ใช้โดยทั่วไป คือ Designer) ดังรูป

        ภาพที่ 3.27 เข้าสู่โปรแกรม Dreamweaver 8  
        
Designer เหมาะสำหรับการออกแบบและสร้างเว็บเพจโดยทั่วไป (ตามปกติควรเลือกแบบนี้)
        Code เหมาะสำหรับวิธีสร้างเว็บเพจที่เน้นการเขียนชุดคำสั่งเอง
การปิดโปรแกรม
        หลังจากเสร็จสิ้นการใช้งานแล้ว ควรปิดโปรแกรม ดังนี้
        คลิกเมนูย่อย File -> Exit
        คลิกปุ่ม   Close ที่มุมบนขวาของโปรแกรม
        กดคีย์ Ctrl+Q เพื่อปิดโปรแกรม
        กดคีย์ Altl+F4 เพื่อปิดหน้าต่างการทำงานขณะนั้น
การกำหนดไฟล์และโฟลเดอร์ภายในเว็บไซต์
ภายในเว็บไซต์ประกอบด้วยหน้าเว็บเพจและไฟล์ต่างๆ เป็นจำนวนมาก หากเว็บไซต์ของเรามีขนาดใหญ่จำนวนหน้าเว็บเพจและไฟล์ต่างๆ ก็จะมีจำนวนมากขึ้น ดังนั้นการวางแผนในการจัดเก็บไฟล์เหล่านี้ก็นับว่าเป็นสิ่งสำคัญโครงสร้างโฟลเดอร์ภายในเว็บไซต์จะประกอบไปด้วยโฟลเดอร์หลักและโฟลเดอร์ย่อยๆ ที่ซ้อนกันอยู่เป็นชั้น ๆ ลงมา ดังนั้นในการแบ่งโฟลเดอร์สำหรับเก็บไฟล์ควรแบ่งเป็นหมวดหมู่ และแยกตามประเภทของไฟล์ เช่น เว็บเพจ กราฟิก สคริปต์ เป็นต้น

                                     

        ภาพที่ 3.28 การกำหนดไฟล์และโฟลเดอร์ภายในเว็บไซต์
โครงสร้างของโฟลเดอร์ดังรูปตัวอย่างเป็นการกำหนดตำแหน่งและสถานที่เก็บไฟล์ข้อมูลโดยมีรายละเอียดของโครงสร้างโฟล์เดอร์ภายในเว็บไซต์ ดังนี้
        Home เป็นโฟลเดอร์หลักของเว็บไซต์ สำหรับเก็บไฟล์ HTML ของเว็บเพจ
        banner เป็นโฟลเดอร์ย่อยเก็บ ภาพเคลื่อนไหวในเว็บเพจ
        gif เป็นโฟลเดอร์ย่อยเก็บไฟล์ที่เป็นภาพเคลื่อนไหว
        pic เป็นโฟลเดอร์ย่อยที่เก็บเกี่ยวกับภาพที่ต่าง ๆ ที่เป็นกิจกรรมต่าง ๆ

 

  เข้าสู่บทเรียนต่อไปคลิก