About DwThai.Com 00

DwThai.Com Logo

DwThai.Com

Tip and Trick Dreamweaver

ก่อตั้งเมื่อปีพุทธศักราช ๒๕๔๖





ค้นหาข้อมูลใน DwThai.Com

%E0%B8%81%E0%B9%89%E0%B8%B2%E0%B8%A7%E0%B9%81%E0%B8%A3%E0%B8%81%E0%B8%82%E0%B8%AD%E0%B8%87%E0%B8%99%E0%B8%B1%E0%B8%81%E0%B8%9E%E0%B8%B1%E0%B8%92%E0%B8%99%E0%B8%B2%E0%B9%80%E0%B8%A7%E0%B9%87%E0%B8%9A %3A %E0%B8%97%E0%B8%B3%E0%B8%84%E0%B8%A7%E0%B8%B2%E0%B8%A1%E0%B8%A3%E0%B8%B9%E0%B9%89%E0%B8%88%E0%B8%B1%E0%B8%81%E0%B8%81%E0%B8%B1%E0%B8%9A%E0%B9%82%E0%B8%9B%E0%B8%A3%E0%B9%81%E0%B8%81%E0%B8%A3%E0%B8%A1 Dreamweaver [Article ID : 99]


เรื่อง : ก้าวแรกสู่การเป็นนักพัฒนาเว็บไซต์ เริ่มทำความรู้จักกับโปรแกรม 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 version Version Name Year Provider
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 Download Dreamweaver

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

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

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

เครื่องมือหลัก ๆ ของโปรแกรม Dreamweaver ที่จะต้องใช้งานกันบ่อย ๆ ก็มีอยู่ด้วยกัน 4 ส่วนหลัก ๆ ด้วยกันครับ ตามหมายเลขในรูปภาพที่เขียนไว้ ซึ่งในแต่ละส่วนเราจะมารู้จักกันทีละเครื่องมือกันเรียงตามหมายเลข ดังนี้ Dreamweaver Work Space 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 ข้างต้นได้จากปุ่ม ด้านบนของโปรแกรม ดังรูป
Dreamweaver CC Three View
ทำความรู้จักกันไปแบบคร่าว ๆ นะครับ สำหรับโปรแกรม Dreamweaver ในบทความนี้ ส่วนของการใช้งานต่าง ๆ ของโปแกรม Dreamweaver โดยละเอียด DwThai.Com จะนำเสนอท่านต่อไปในบทความที่จะค่อย ๆ ทยอยเขียนตามออกมาเรื่อย ๆ ครับ

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

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

Dreamweaver Shortcut

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

About the Author
Mr.Sittichai Raksasuk

Mr.Sittichai Raksasuk

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 : dwthai@gmail.com



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

การตั้งไซต์งานใหม่ (New Site, Site Setup)

เรื่อง : เริ่มต้นใช้งานโปรแกรม Dreamweaver ต้องทำ Site Setup ก่อน ก่อนที่เราจะใช้งานโปรแกรม Dreamweaver...  

การติดตั้ง Extension (How to install extension)

เรื่อง : การติดตั้ง Extension ให้กับโปรแกรม Dreamweaver Dreamweaver Extension คือ โปรแกรมช่วยเสริมและขยา...  

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

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

การ Insert ไฟล์ Flash อนิเมชั่นมาใช้งานกับเว็บ (SWF)

เรื่อง : การ Insert ไฟล์ Flash Animation มาใช้งานกับเว็บด้วย Dreamweaver Flash เป็นเทคโนโลยีที่ใช้จัดท...  


Copyright ©2003-2019 dwthai.com. All rights reserved.
This website was created by : S.raksasuk.

ติดต่อ DwThai.Com

e-mail : dwthai@gmail.com
mobile: 08-9495-7296

เขียน Guestbook : DwThai.Com

*
*
*