ใบงาน 7 เรื่อง ความรู้เบื้องต้นเกี่ยวกับ Dreamweaver

1. โปรแกรม Dreamweaver   เป็นโปรแกรม 

ตอบ  สร้างเว็บเพจแบบเสมือนจริง ของค่าย Adobe ซึ่งช่วยให้ผู้ที่ต้องการสร้างเว็บเพจไม่ต้องเขียนภาษา HTML หรือโค๊ดโปรแกรม เอง หรือที่ศัพท์เทคนิคเรียกว่า "WYSIWYG " โปรแกรม Dreamweaver มีฟังก์ชันที่ทำให้ผู้ใช้สามารถจัดวางข้อความ รูปภาพ ตาราง ฟอร์ม วิดีโอ รวมถึงองค์ประกอบอื่น ๆ ภายในเว็บเพจได้อย่างสวยงามตามที่ผู้ใช้ต้องการ โดยไม่ต้องใช้ภาษาสคริปต์ที่ยุ่งยากซับซ้อนเหมือนก่อน Dreamweaver มีทั้งในระบบปฏิบัติการ แมคอินทอช และไมโครซอฟท์วินโดวส์ Dreamweaver ยังสามารถทำงานบนระบบปฏิบัติการแบบยูนิกซ์ ผ่านโปรแกรมจำลองอย่าง WINE ได้ 

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

1. แถบเมนูหลัก (Menu bar) เป็นแถบรวมรวมคำสั่งทั้งหมดของโปรแกรม โดยแบ่งคำสั่งทั้งหมดออกเป็นหมวดหมู่ตามลักษณะของการใช้งาน

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

ซึ่งจะประกอบด้วยกลุ่มคำสั่งดังนี้

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

-      Layout ใช้วางออบเจ็กต์ที่ใช้จัดโครงสร้างของเว็บเพจ เช่น ตาราง เฟรม และ AP element

(หรือเลเยอร์)

-      Forms ใช้วางออบเจ็กต์ที่ใช้ในการสร้างแบบฟร์อมรับข้อมูล เช่น ช่องรับข้อความ ปุ่มตัวเลือกต่าง ๆ เป็นต้น

-      Data ใช้วางคำสั่งที่ใช้การจัดการฐานข้อมูล และดึงข้อมูลจากฐานข้อมูลมาแสดงบนเว็บเพจ

-      Sary ใช้วางออบเจ็กต์ที่ใช้เทคโนโลยีของ Ajax

-      jQuery Mobile ใช้สร้างหน้าเพจที่แสดงบนอุปกรณ์มือถือและแท็บเล็ตโดยใช้เทคโนโลยีแบบ jQuery

-      InContext Edting ใช้สร้างออบเจ็กต์ที่ช่วยอำนวยความสะดวกให้ผู้ใช้งานสามารถแก้ไขเว็บเพจได้

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

-      Favorites เป็นกลุ่มที่สามารถเพิ่มปุ่มคำสั่งที่ใช้บ่อยจากกลุ่มอื่น ๆ เข้ามาเก็บไว้ใช้งานเอง เพื่อความสะดวกในการใช้งาน

3. พื้นที่สร้างงาน (Document area) เป็นส่วนที่ใช้สร้างหน้าเว็บเพจ ใส่เนื้อหา และองค์ประกอบต่าง ๆ

ของเว็บเพจ ซึ่งสามารถเลือกเปิดพื้นที่สร้างงานได้ด้วยกัน 4 มุมมอง

-      มุมมองออกแบบ (Design View) ใช้แก้ไขและจัดวางเนื้อหาต่าง ๆ ลงบนเว็บเพจ

-      มุมมองโค้ด (Code View) ใช้สำหรับเปิดดูคำสั่งต่าง ๆ เช่น HTML PHP ASP และ JSP และสามารถแก้ไขคำสั่งต่าง ๆ ได้ตามต้องการ

-      มุมมองโค้ดและออกแบบ (Code and Design View หรือ Split) แสดงทั้งแบบมุมมองออกแบบ และมุมมองโค้ดพร้อมกัน สามารถปรับขนาดพื้นที่ของแต่ละส่วนได้โดยคลิกลากที่เส้นแบ่งระหว่างทั้ง 2 ส่วนนี้

-      มุมมองแสดงเว็บเพจเหมือนดูบนเบราเซอร์ (Live View) แสดงหน้าเว็บเพจเหมือนดูบนเบราเซอร์ทั้งในส่วนของ JavaScript และ Plugin

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

5. กลุ่มหน้าต่างพาเนล (Panels) เป็นหน้าต่างเล็ก ๆ ที่รวบรวมเครื่องมือไว้เป็นกลุ่มตามหน้าที่ที่เกี่ยวข้อง ทำให้ใช้งานได้สะดวกขึ้น

6. แถบสถานะ (Status Bar) เป็นแถบที่อยู่ทางด้านล่างของหน้าต่าง ๆ Document ประกอบด้วย 2 ส่วน

คือ ด้านซ้ายเป็น  Tag Selector ส่วนด้านขวาเป็นเครื่องมือต่าง ๆ