ส่วนประกอบของหน้าจอโปรแกรม Dreamweaver

ขั้นตอนการติดตั้งโปรแกรม Dreamweaver CS3

1. เมื่อเข้าสู่ขั้นตอนการติดตั้งจะพบกับหน้าจอ License Agreement หรือสัญญาอนุญาตให้ใช้ซอฟแวร์ของเจ้าของผลิตภัณฑ์ ให้อ่านรายละเอียดอย่างครบถ้วนสมบูรณ์ และกดยอมรับ (Accept)

setup1

 

2. เลือกพื้นที่ในดิสก์ที่ต้องการติดตั้งโปรแกรม

setup-2

 

3. โปรแกรมจะสรุปเพื่อเตรียมเข้าสู่ขั้นตอนการติดตั้ง ให้อ่านรายละเอียดต่างๆ อย่างรอบคอบอีกครั้ง

setup-3

 

4. กำลังติดตั้งโปรแกรม กรุณารอ

setup4

 

5. โปรแกรมติดตั้งเรียบร้อย เพียงเท่านี้ ท่านก็จะมีโปรแกรมไว้ออกแบบเว็บไซต์ในฝันของท่านแล้ว

setup5

 

 

 

ส่วนประกอบของหน้าจอโปรแกรม Dreamweaver

d1

 

แถบคำสั่ง (Menu Bar) เป็นแถบที่ใช้เก็บคำสั่งทั้งหมดของโปรแกรม

 

แถบเครื่องมือ (Toolbar) รวบรวมปุ่มคำสั่งที่ใช้งานบ่อย

d2

 

 

แถบวัตถุ (Object Palette) เป็นกลุ่มเครื่องมือต่างๆ ที่ใช้ในการควบคุมวัตถุ บนชิ้นงาน เอกสารเว็บ ประกอบด้วย

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

d3

 

Layout สำหรับเลือกมุมมองในการสร้างเว็บเพจ เช่น มุมมองปกติ มุมมองแบบขยาย เพื่อให้เห็นออปเจ็กต์ต่างๆ ได้อย่างชัดเจน

 

 

Forms ใช้สำหรับแทรกออปเจ็กต์ที่ใช้สร้างแบบฟอร์มรับข้อมูลจากผู้ชม เช่น ช่องรับข้อความ และฟิลด์ (Field) ชนิดต่างๆ

d5

 

Text สำหรับจัดรูปแบบข้อความในเว็บเพจ เช่น หัวเรื่อง ตัวหนา ตัวเอียง จัดหัวข้อ จัดย่อหน้า และแทรกสัญลักษณ์พิเศษต่างๆ

d6

 

Application สำหรับแทรกคำสั่งและการดึงข้อมูลจากฐานข้อมูลมาแสดงบนเว็บ

d7

 

Flash element สำหรับนำไฟล์ Flash เข้ามาใช้งาน

d8

 

Favorite สำหรับจัดเก็บออบเจ็กต์ที่ชอบเพื่อความสะดวกในการใช้งาน

d9

 

Show as Tabs เปลี่ยนแถบเครื่องมือให้แสดงผลในลักษณะแท็บคำสั่งเรียงต่อกันไป ลักษณะการ แสดงผลจะเหมือนกับเวอร์ชั่นก่อนหน้านี้ เช่น Macromedia Dreamweaver MX, 2004 เป็นต้น

d10

 

 

แถบแสดงสถานะ (Status Bar) คอยแสดงสถานะการทำงานต่างๆ ของเรา

 

แถบควบคุมการทำงาน (Properties Palette) เป็นรายการที่ปรับเปลี่ยนได้ ตามลักษณะการเลือกข้อมูล เช่น หากมีการเลือกที่จะพิมพ์ หรือแก้ไขเนื้อหา รายการก็จะเป็น ส่วนทำงานที่เกี่ยวกับอักษร, การจัดพารากราฟ ถ้าเลือกที่รูปภาพ รายการในแถบนี้ ก็จะเป็นคำสั่งต่างๆ ที่เกี่ยวกับ การควบคุมเรื่องรูปภาพ

d11(Properties Inspector ของภาพกราฟิก)

 

d12(Properties Inspector ของข้อความ)

 

(Properties Inspector ของตาราง)

 

 

ส่วนของ Panel Group เป็นกลุ่มของแถบเครื่องมือที่สามารถเรียกใช้งานได้อย่างรวดเร็ว เพื่อให้ง่ายในการสร้าง Application บนอินเทอร์เน็ต เช่น การแทรก Code ของ JavaScript และ VBScript ลงในเว็บเพจได้อย่างง่ายๆ โดยสามารถเรียกใช้งานได้จาก Panel Group

d14

 

 

 

เรียนรู้การปรับโหมดหน้าจอแสดงผลโปรแกรม Dreamweaver (Document Windows)

หน้าต่างการทำงานของ Dreamweaver สามารถเลือกหน้าต่างการทำงานได้ 3 รูปแบบ โดยการคลิกไอคอนที่อยู่ในแถบเครื่องมือ Toolbar ดังนี้

dr1

Show Code View เป็นหน้าต่างที่ให้แสดงเฉพาะโค้ด HTML ของหน้าเว็บเพจที่ กำลังทำงาน
Show Code and Design View เป็นหน้าต่างที่แสดงทั้งโค้ด HTML และหน้าเว็บเพจที่กำลังทำงาน
Show Design View ให้แสดงแต่หน้าเว็บเพจไม่ต้องแสดงโค้ด HTML

 

 

หน้าจอการแสดงผล

Show Code View

dr2

 

Show Code and Design View

dr3

 

Show Design View

dr4

 

 

 

อ้างอิง :  Zone-IT โซนไอที : สังคมดีๆบนโลกออนไลน์ . “การติดตั้ง Adobe Dreamweaver CS3”. www.zone-it.com . 2550

ICT CENTER . “เทคนิคการสร้าง และออกแบบ Web site ด้วย Adobe Dreamweaver CS3”. aster.spu.ac.th .