ความรู้เกี๋ยวกับ โปรแกรม Dreamweaver CS6

เริ่มต้นใช้งานด้วยโปรแกรม Adobe Dreamweaver CS6

ประวัติความเป็นมาของโปรแกรม Dreamweaver

Adobe Macromedia Dreamweaver

ผู้พัฒนา อะโดบีซิสเต็มส์ (เริ่มพัฒนาโดย แมโครมีเดีย)

รุ่นเสถียร ล่าสุด CS4 (10.0)

รุ่นทดลอง ล่าสุด (27 มีนาคม พ.ศ. 2550)

โอเอส Windows Mac OS X

ชนิด โปรแกรมแก้ไข HTML

ลิขสิทธิ์ Closed source

เว็บไซต์ http://www.adobe.com/

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

การทำงานกับภาษาต่างๆ 

ดรีมวีฟเวอร์ สามารถทำงานกับภาษาคอมพิวเตอร์ในการเขียนเว็บไซต์แบบไดนามิค ซึ่งมีการใช้ HTML เป็นตัวแสดงผลของเอกสาร เช่น ASP, ASP.NET, PHP, JSP และ ColdFusion รวมถึงการจัดการฐานข้อมูลต่างๆ อีกด้วย และในเวอร์ชันล่าสุด (เวอร์ชัน CS4) ยังสามารถทำงานร่วมกับ XML และ CSS ได้อย่างง่ายดาย

รุ่นต่างๆ

Dreamweaver 1.0 (ธันวาคม ค.ศ. 1997) 

Dreamweaver 1.2 (มีนาคม ค.ศ. 1998) 

Dreamweaver 2.0 (ธันวาคม ค.ศ. 1998) 

Dreamweaver 3.0 (ธันวาคม ค.ศ. 1999) 

Dreamweaver UltraDev 1.0 (มิถุนายน ค.ศ. 2000) 

Dreamweaver 4.0 (ธันวาคม ค.ศ. 2000) 

Dreamweaver UltraDev 4.0 (ธันวาคม ค.ศ. 2000) 

Dreamweaver MX (พฤษภาคม ค.ศ. 2002) 

Dreamweaver MX 2004 (10 พฤศจิกายน ค.ศ. 2003) 

Dreamweaver 8 (13 พฤศจิกายน ค.ศ. 2005) 

Dreamweaver CS3

Dreamweaver CS4
Dreamweaver CS5
Dreamweaver CS6

ความสามารถของ Dreamweaver

1. สนับสนุนการทํางานแบบ WYSIWYG (What You See Is What You Get) หมายความวาอะไรก็ตามที่เราทํา บนหนาจอ Dreamweaver ก็จะปรากฎผลแบบเดียวกันบนเว็บเพจ ซึ่งชวยใหการสรางและแกไขเว็บเพจนั้นทําได งาย โดยไมตองมีความรูภาษา HTML เลย

2. มีเครื่องมือในการสรางรูปแบบหนาจอเว็บเพจ ซึ่งชวยอํานวยความสะดวกใหผูใชงานไดมาก

3. สนับสนุนภาษาสคริปตตางๆ เชน Java,ASP,PHP,CGI,VBScript

4. มีเครื่องมือที่ชวยในการ upload หนาเว็บที่สรางไปที่ server เพื่อทําการเผยแพรงานที่สรางบน internet

5. รองรับการใชมัลติมีเดียตางๆ เชน เสียง กราฟก และภาพเคลื่อนไหว ที่สรางโดยโปรแกรม  Flash, Shockwave, Firework เปนตน

6. มีความสามารถทําการติดตอกับฐานขอมูล เพื่อเชื่อมตอกับเว็บไซต



การเปิดโปรแกรม

วิธีที่ 1 คลิก start -> All Programs -> Adobe Dreamweaver CS6 ดังตัวอย่างด้านล่าง

วิธีที่ 2 ดับเบิลคลิกไอคอน

ที่หน้าจอ Desktop

            

 ส่วนประกอบของ welcome screen

หลังจากเปิดโปรแกรมขึ้นมาจะปรากฏหน้าต่าง welcome screen ซึ่งแบ่งออกเป็น 3 กลุ่มหลัก

ดังภาพด้านล่าง ดังนี้

A. เปิดไฟล์งานเก่าที่เคยเรียกใช้งาน

(open a recent ltem)

B. สร้างงานใหม่ (create new) ใช้สำหรับสร้างไฟล์งานใหม่ ซึ่งสามารถเลือกสร้างไฟล์งานได้หลายชนิด ไม่ว่าจะเป็น ไฟล์ html, php, asp,หรือ JavaScript

C. สร้างงานสำเร็จรูป (create from samples) สร้างเว็บเพจใหม่โดยใช้ไฟล์ตัวอย่าง ที่โปรแกรมจัดเตรียมเอาไว้ให้ 


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

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 ส่วนด้านขวาเป็นเครื่องมือต่าง ๆ

หลักสำคัญก่อนการสร้างเว็บเพจ

1.       เลือกรูปแบบพื้นที่ทำงาน(Workspace) ให้เหมาะสม

2.       จัดการกับหน้าต่างไฟล์

3.       เตรียมโฟลเดอร์สำหรับสร้างเว็บไซต์

4.       สร้าง Define Site เพื่อจัดระบบให้ข้อมูล

การบันทึกเว็บเพจ

1.คลิกเลือกคำสั่ง File - > Save (หรือกดคีย์ลัด Ctrl+S)

- ถ้าต้องการบันทึกเว็บเพจเดิมให้เป็นชื่อใหม่ เลือกคำสั่ง Save As

- ถ้าต้องการบันทึกเว็บเพจทั้งหมดที่เปิดใช้งานอยู่ เลือกคำสั่ง Save All

          2. เปิดเข้าไปยังโฟลเดอร์หลักที่จัดเก็บเว็บไซต์และโฟลเดอร์ย่อยที่จะใช้เก็บไฟล์

          3. ตั้งชื่อไฟล์ที่ต้องการ (กรณีหน้าแรกของเว็บไซต์ ต้องตั้งเป็น Index.html เท่านั้น นอกจากนั้นตั้งชื่อตามชนิดของไฟล์งาน)

          4. เลือกประเภทไฟล์ที่จะบันทึกเป็น html

          5. คลิกปุ่ม Save