ลักษณะ การ ทำงาน ของโปรแกรม Adobe Dreamweaver CS6

เรื่อง : ก้าวแรกสู่การเป็นนักพัฒนาเว็บไซต์ เริ่มทำความรู้จักกับโปรแกรม Dreamweaver

Dreamweaver เป็นโปรแกรมเพื่อช่วยในการพัฒนาเว็บไซต์ ให้เป็นไปอย่างง่ายดาย ซึ่งมีคุณสมบัติในการใช้งานในแบบ WYSIWYG (What You See Is What You Get) คือ เป็นโปรแกรมประเภทคุณออกแบบมาอย่างไรกับโปรแกรม Dreamweaver คุณก็เห็นงานของคุณเป็นแบบนั้นเมื่อดูการแสดงผลผ่าน Web Browser เลยครับ โดยโปรแกรม Dreamweaver จะช่วยอำนวยความสะดวกให้กับการพัฒนาเว็บไซต์ให้เราได้เป็นอย่างมาก เนื่องจาก ในเบื้องต้น ถ้าเราอยากจะมีเว็บไซต์สัก 1 เว็บ เราไม่จำเป็นต้องมานั่งเรียนรู้ Code ของ HTML เลยครับ เราก็สามารถสร้าง Website ได้อย่างมืออาชีพแล้ว
*ด้านล่างของบทความมีเอกสาร Dreamweaver Shortcut ให้ Download

เวอร์ชั่นต่าง ๆ ของโปรแกรม Dreamweaver

ในปัจจุบันนี้โปรแกรม Dreamweaver ถูกพัฒนาโดย Adobe ซึ่งเป็นการซื้อกิจการต่อมาจาก Macromedia เมื่อปี 2005 ที่ผ่านมา ดังนั้น ในปัจจุบันนี้เราจะเรียกโปรแกรมนี้ว่า Adobe Dreamweaver แทน Macromedia Dreamweaver กันครับ โดยนับถึงปัจจุบันนี้ (วันที่ผม re-write บทความคือปี 2015) โปรแกรมได้รับการพัฒนามาแล้วทั้งหมด 16 เวอร์ชั่น (นับตั้งแต่เวอร์ชั่น 1.0 ที่ออกมาเมื่อปี 1997) ดังนี้

Major versionVersion NameYearProvider
1 1.0 1997 Macromedia
2 2.0 1998 Macromedia
3 3.0 1999 Macromedia
4 4.0 2000 Macromedia
5 UltraDev 4.0 2000 Macromedia
6 MX 2002 Macromedia
7 MX 2004 2003 Macromedia
8 8.0 2005 Macromedia
9 CS3 2007 Adobe
10 CS4 2008 Adobe
11 CS5 2010 Adobe
12 CS6 2012 Adobe
13 CC (Creative Cloud) 2013 Adobe
14 CC 2014 2014 Adobe
15 CC 2014 (14.1) 2014 Adobe
16 CC 2015 2015 Adobe

ดาวน์โหลดโปรแกรม Dreamweaver

หากท่านต้องการ Download โปรแกรมมาใช้งาน สามารถเข้าไปดาวน์โหลดได้จากเว็บของ Adobe ได้โดยตรง ซึ่งจะได้โปรแกรมในเวอร์ชั่นล่าสุดมาใช้งาน และเป็นเวอร์ชั่นทดลองใช้งาน หรือทำการ Click ที่ ฺBanner ด้านล่างนี้เพื่อเข้าสู่หน้า Download ของ Adobe

ลักษณะ การ ทำงาน ของโปรแกรม Adobe Dreamweaver CS6

หน้าจอของโปรแกรม Dreamweaver

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

ลักษณะ การ ทำงาน ของโปรแกรม Adobe Dreamweaver CS6
Dreamweaver Version 7 หรือ MX 2004
ลักษณะ การ ทำงาน ของโปรแกรม Adobe Dreamweaver CS6
Dreamweaver Version 12 หรือ CS6
ลักษณะ การ ทำงาน ของโปรแกรม Adobe Dreamweaver CS6
Dreamweaver Version 13 หรือ CC

องค์ประกอบที่สำคัญของโปรแกรม Dreamweaver

เครื่องมือหลัก ๆ ของโปรแกรม Dreamweaver ที่จะต้องใช้งานกันบ่อย ๆ ก็มีอยู่ด้วยกัน 4 ส่วนหลัก ๆ ด้วยกันครับ ตามหมายเลขในรูปภาพที่เขียนไว้ ซึ่งในแต่ละส่วนเราจะมารู้จักกันทีละเครื่องมือกันเรียงตามหมายเลข ดังนี้

ลักษณะ การ ทำงาน ของโปรแกรม Adobe Dreamweaver CS6
1. Document หรือส่วนที่ใช้แสดงหน้าเว็บของเรา ซึ่งส่วนนี้เป็นพื้นที่หลักที่เราจะใช้กัน จะทำการออกแบบหน้าเว็บเพจก็ทำที่นี้กันครับ
2. Main Menu เป็นส่วนที่เก็บรวบรวมคำสั่งการใช้งานโปรแกรมไว้ โดยเราสามารถเรียกใช้งานคำสั่งต่าง ๆ ได้คลิกเลืแกที่เมนูทีเราต้องการ
3. Panel Group ส่วนนี้เป็นส่วนที่รวบรวมพาเนลชนิดต่าง ๆ ไว้
4. Properties ส่วนนี้เป็นส่วนที่ใช้งานกันบ่อยมาก เป็นส่วนที่ใช้ในการกำหนดคุณสมบัติต่าง ๆ ของสิ่งที่ปรากฏบนเว็บเพจของเรา

มุมมองการใช้งานของโปรแกรม Dreamweaver

โปรแกรม Dreamweaver จะมีมุมมองในการใช้งานโปรแกรมอยู่ด้วยกัน 4 มุมมอง คือ
1. Design เป็นมุมมองในแบบ What You See Is What You Get
2. Code เป็นมุมมองที่ใช้งานการทำงานเกี่ยวกับโค้ดของเว็บเพจ
3. Split เป็นมุมมองที่แบ่งส่วนหน้าจอโปรแกรมออกเป็น 2 ส่วน ระหว่าง Design กับ Code
4. Live เป็นมุมมองที่ใช้แสดงผล คล้าย ๆ การ Preview การแสดงผลกับ Web Browser
เราสามารถเลือกมุมมองทั้ง 4 ข้างต้นได้จากปุ่ม ด้านบนของโปรแกรม ดังรูป

ลักษณะ การ ทำงาน ของโปรแกรม Adobe Dreamweaver CS6

ทำความรู้จักกันไปแบบคร่าว ๆ นะครับ สำหรับโปรแกรม Dreamweaver ในบทความนี้ ส่วนของการใช้งานต่าง ๆ ของโปแกรม Dreamweaver โดยละเอียด DwThai.Com จะนำเสนอท่านต่อไปในบทความที่จะค่อย ๆ ทยอยเขียนตามออกมาเรื่อย ๆ ครับ

คลิปประกอบบทความ

*คลิกที่โลโก้ YouTube เพื่อเข้าดูที่ยูทูปนะครับ จะสามารถขยายจอดูได้

Dreamweaver Shortcut

สำหรับท่านที่ต้องการทราบ Shortcut ในการใช้ปุ่ม Keyboard กับโปรแกรม Dreamweaver ท่าน Download ได้จากไฟล์ด้านล่างนี้

About the Author

ลักษณะ การ ทำงาน ของโปรแกรม Adobe Dreamweaver CS6

Sittichai is a Web Developer and Web Technology Instructor for over 10 yrs. He is also a webmaster of dwthai.com and author jQuery with Dreamweaver (2010). DwThai.Com is a website for web developer using Adobe Dreamweaver.

Contact with him :



บทความอื่นที่คุณอาจสนใจ

ลักษณะ การ ทำงาน ของโปรแกรม Adobe Dreamweaver CS6

การสร้างจุด Link (Text Link)

การสร้าง Link ในแบบ Text Link Link หรือ ลิงค์ เป็นจุดเชื่อมโยงที่ปรากฎบนหน้าเว็บ เพื่อให้ผู้ใช้งานเว็บสามารถคลิกหรือกด...  

ลักษณะ การ ทำงาน ของโปรแกรม Adobe Dreamweaver CS6

ลักษณะ การ ทำงาน ของโปรแกรม Adobe Dreamweaver CS6

ลักษณะ การ ทำงาน ของโปรแกรม Adobe Dreamweaver CS6


โปรแกรมAdobe Dreamweaver สามารถทำงานด้านใดได้บ้าง

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

จุดเด่นของโปรแกรม Adobe Dreamweaver มีกี่ข้อ อะไรบ้าง

จุดเด่นของโปรแกรม Macromedia Dreamweaver.
จุดเด่นของโปรแกรม Macromedia Dreamweaver. ... .
สนับสนุนเว็บเพจที่เป็นภาษาไทยได้ดี.
มีคุณสมบัติที่สามารถจัดการกับรูปภาพเคลื่อนไหว โดยไม่ต้องอาศัย Plug-in..
สามารถเรียกใช้ตารางจากภายนอก โดยการอิมพอร์ตจาก Text File..
เป็นโปรแกรมที่สามารถสนับสนุนการใช้งาน CSS (Cascading Style Sheet).

มุมมองในการใช้งานของโปรแกรม Adobe Dreamweaver CS6 มีกี่แบบ

โปรแกรม Dreamweaver จะมีมุมมองในการใช้งานโปรแกรมอยู่ด้วยกัน 4 มุมมอง คือ 1. Design เป็นมุมมองในแบบ What You See Is What You Get. 2. Code เป็นมุมมองที่ใช้งานการทำงานเกี่ยวกับโค้ดของเว็บเพจ 3. Split เป็นมุมมองที่แบ่งส่วนหน้าจอโปรแกรมออกเป็น 2 ส่วน ระหว่าง Design กับ Code.

คำสั่ง Insert มีหน้าที่อะไรในโปรแกรม Adobe Dreamweaver CS6

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