จง บอก ความสามารถของโปรแกรม ออกแบบ และ สร้างเว็บไซต์ 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) ดังนี้

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

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

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

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

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

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

มุมมองการใช้งานของโปรแกรม 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 ข้างต้นได้จากปุ่ม ด้านบนของโปรแกรม ดังรูป

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

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

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

Dreamweaver Shortcut

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

About the Author

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 :

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

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

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