ส่วนประกอบของโปรแกรม dreamweaver

ส่วนประกอบของโปรแกรม dreamweaver
ส่วนประกอบของโปรแกรม dreamweaver
ส่วนประกอบของโปรแกรม dreamweaver

ส่วนประกอบของโปรแกรม dreamweaver
   เข้าสู่โปรแกรม   Dreamweaver 8
          _________________________________ .......

           ก.   การเข้าสู่โปรแกรม Dreamweaver 8               ขั้นตอนการเปิดโปรแกรมมาใช้งาน มีดังต่อไปนี้
                 1.       คลิกปุ่ม Start  --> เลือก All Program --> เลือก Macromedia Dreamweaver 8 
                 2.       เลือกรูปแบบพื้นที่การทำงานของโปรแกรม โดยมีรายละเอียดดังนี้
                           2.1  Designer  หมายถึง  การสร้างและออกแบบเว็บเพจโดยทั่วไป  ผู้คนส่วนมากนิยมเลือกรูปแบบนี้
                           2.2  Code  หมายถึง  วิธีการสร้างเว็บเพจที่เน้นการเขียนชุดคำสั่งเอง 
                 3.      คลิกปุ่ม OK 


          ข.   ส่วนประกอบของโปรแกรม     ในที่นี้จะอธิบายแยกเป็น 2 ส่วน  คือ  ส่วนหน้าจอเริ่มต้น(Start page) และ ส่วนประกอบหน้าจอโปรแกรม

                1)  หน้าเริ่มต้น (Start page) ของโปรแกรม   เมื่อเราเข้าสู่โปรแกรม Dreamweaver 8  ทุกครั้ง เราจะเจอหน้าเริ่มต้น (Start page) ของโปรแกรม ซึ่งประกอบด้วย 3 ส่วน ดังภาพ โดยแต่ละส่วนมีหน้าที่การทำงานแตกต่างกันไป ดังนี้ 

ส่วนประกอบของโปรแกรม dreamweaver

                 1.1) Open a Recent Item   เปิดไฟล์เว็บเพจที่เคยใช้งานมาแล้ว      เป็นส่วนแรกของหน้าจอเริ่มต้น ใช้สำหรับเปิดงานที่เราทำไว้ก่อน ซึ่ง สามารถเลือกจากรายชื่อที่แสดงอยู่ โปรแกรมจะเปิดแฟ้มงานที่เราใช้บ่อยไว้ด้านบน ถ้าไม่มีแสดงในรายชื่อให้คลิกที่ open 

                 1.2) Create New  การสร้างงานใหม่        ส่วนนี้เป็นการเลือกประเภทงานที่ต้องการสร้างใหม่ โดยเลือกประเภทไฟล์ต่าง ๆ  ได้แก่ HTML  PHP  ASP  Javascript CSS เป็นต้น

                 1.3)  Create from Samples  การสร้างตามแบบฟอร์ม    เป็นส่วนที่ใช้สำหรับสร้างเว็บเพจตามแบบฟอร์มที่โปรแกรมจัดไว้ให้แล้ว ซึ่งมี รูปแบบ ให้เลือกหลายประเภท

      2) ส่วนประกอบหน้าจอโปรแกรม      เมื่อเราคลิกเลือก HTML  จากส่วนของ Create New  จะปรากฎหน้าต่างการทำงานของโปรแกรม ซึ่งมีรายละเอียดดังนี้

ส่วนประกอบของโปรแกรม dreamweaver

1.  Title Bar      เป็นส่วนแสดงชื่อโปรแกรม Dreamweaver และชื่อไฟล์ที่กำลังทำงานอยู่

2.  Menu Bar    เป็นส่วนที่รวบรวมเมนูคำสั่งการทำงานเอาไว้ ซึ่งสามารถเปิดเมนูต่าง ๆ ขึ้นมาใช้งานได้โดยคลิกที่ชื่อเมนูแล้วเลื่อนเมาส์ไปยังคำสั่งย่อยที่ต้องการได้ หากคำสั่งย่อยใด ๆ มีคำสั่งย่อยลงไปอีกจะมีเครื่องหมาย

ส่วนประกอบของโปรแกรม dreamweaver
อยู่ด้านหลังของคำสั่งย่อยนั้น ๆ   Menu Bar  ประกอบด้วยคำสั่งต่าง ๆ ดังนี้              

ส่วนประกอบของโปรแกรม dreamweaver

3.  Insert Bar    เป็นแถบที่ประกอบด้วยคำสั่งที่ใช้ในการแทรกออบเจกต์(องค์ประกอบต่าง ๆ ) ลงในเว็บเพจ แบ่งเป็นหมวดหมู่ ดังนี้
       3.1  Common  สำหรับ  แทรกออบเจ็กต์ที่เรียกใช้งานบ่อย เช่น รูปภาพ ตาราง ไฟล์มีเดีย เป็นต้น
       3.2  Layout      สำหรับ  เลือกมุมมองในการสร้างเว็บเพจ เช่น มุมมองปกติ มุมมองขยาย เป็นต้น
       3.3  Form         สำหรับ  แทรกออบเจ็กต์ที่ใช้สร้างแบบฟอร์มรับข้อมูล
       3.4  Text           สำหรับ  จัดรูปแบบข้อความในเว็บเพจ เช่น หัวเรื่อง ตัวหนา ตัวเอียง จัดหัวข้อ ย่อหน้า เป็นต้น
       3.5  HTML       สำหรับ   แทรกออบเจ็กต์ HTML เช่น เส้นคั่นหน้า คำสั่งควบคุมเว็บเพจ
       3.6  Application  สำหรับแทรกคำสั่งและดึงข้อมูลจากฐานข้อมูลมาแสดงบนเว็บ
       3.7  Flash element  สำหรับนำไฟล์ flash เข้ามาใช้งาน
       3.8  Favorites สำหรับจัดเก็บออบเจ็กต์ที่ชอบไว้ใช้งาน
       3.9  Shows as Tabs  เปลี่ยนแถบเครื่องมือให้แสดงผลในลักษณะเป็นแท็บคำสั่งเรียงต่อกันไป

4. Tool Bar เป็นแถบเครื่องมือที่เก็บปุ่มคำสั่งที่ต้องใช้งานบ่อย ๆ  เช่น  
      4.1  Show code View  สำหรับแสดงการทำงานในรูป HTML และเขียนคำสั่ง HTML หรือคำสั่งภาษาสคริปต์อื่น ๆ 
      4.2  Show code and design สำหรับแสดงการทำงานแบบ HTML กับการแสดงพื้นที่ออกแบบโดยส่วนของคำสั่งอยู่ด้านบนและการออกแบบไว้ด้านล่าง
      4.3  Show Design View  สำหรับแสดงเว็บเพจคล้ายกับที่เห็นบนเว็บบราวเซอร์ทั้งหลาย และสามารถแก้ไขเนื้อหาลงในเว็บเพจได้

   

ส่วนประกอบของโปรแกรม dreamweaver

5. Document Area   เป็นส่วนที่ใช้สำหรับสร้างหน้าเว็บเพจ โดยการใส่เนื้อหา จัดองค์ประกอบต่าง ๆ โดยสามารถเลือกพื้นที่การทำงานนี้ได้หลายมุมมอง ดังกล่าวแล้วในข้อ 4. Toolbar


    6.  Status Bar  คือแถบแสดงสถานะ อยู่บริเวณด้านล่างของพื้นที่สร้างงาน (Document Area)  ประกอบด้วย 2 ส่วน คือ
          6.1  ด้านซ้าย      เรียกว่า Tag Selector     ใช้สำหรับแสดงคำสั่ง HTML  ของส่วนประกอบกในเว็บเพจที่เลือกทำงานอยู่
          6.2  ด้านขวา      เป็นส่วนที่บอกขนาด เวลาที่ใช้ในการดาวน์โหลดเว็บเพจ

ส่วนประกอบของโปรแกรม dreamweaver

7.  Properties Inspector   เป็นหน้าต่างแสดงคุณสมบัติของออบเจ็กต์ที่เรากำลังเลือกในเว็บเพจ สามารถกำหนดหรือแก้ไขคุณสมบัติของส่วนประกอบต่าง ๆ ในหน้าเว็บเพจได้ ข้อความ สี ขนาด ตาราง จุดเชื่อมโยง เป็นต้น  โดยปกติหน้าต่าง Properties Inspector จะไม่เหมือนกันขึ้นอยู่กับว่าในขณะนั้นเรากำลังเลือกทำงานกับออบเจ็กต์ใดอยู่

ส่วนประกอบของโปรแกรม dreamweaver

8.  Panels   เป็นกรอบเล็ก ๆ บริเวณด้านขวาประกอบด้วยเครื่องมือใช้งานต่าง ๆ  แต่ละ Panels จะมีหน้าที่แตกต่างกันไป เช่นการจัดการเกี่ยวกับ Code  ไฟล์ และโฟลเดอร์ เป็นต้น  สามารถเปิด / ปิด Panels การทำงานได้โดยใช้เมนูคำสั่ง Windows แล้วเลือกคำสั่ง Panels ที่ต้องการเปิด/ปิด


 ออกแบบและพัฒนาโดย  "กลุ่มผู้ก่อการดี คน IT ตรังรังสฤษฎ"์    โรงเรียนตรังรังสฤษฎ์ จังหวัดตรัง       
Copyright (c) 2009 All rights reserved.