เรื่อง : ก้าวแรกสู่การเป็นนักพัฒนาเว็บไซต์ เริ่มทำความรู้จักกับโปรแกรม 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) ดังนี้
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
หน้าจอของโปรแกรม Dreamweaver
สำหรับหน้าจอโปรแกรมนั้น ก็มีการพัฒนาปรับปรุงมาโดยตลอด ซึ่งถึงแม้จะมีการเปลี่ยนแปลงไปมากมายจนมาถึงเวอร์ชั่นในปัจจุบันนี้ หากใครใช้โปรแกรม Dreamweaver มาพอสมควร จะพบว่าโปรแกรม Dreamweaver นั้นมีการปรับปรุงเปลี่ยนแปลงไปเพื่อให้เข้ากับเทคโนโลยีเว็บที่ไม่มีวันหยุดนิ่งนั่นเอง...ลองดูหน้าจอโปรแกรมในเวอร์ชั่นต่าง ๆ ของโปรแกรมกันดูครับ
องค์ประกอบที่สำคัญของโปรแกรม Dreamweaver
เครื่องมือหลัก ๆ ของโปรแกรม Dreamweaver ที่จะต้องใช้งานกันบ่อย ๆ ก็มีอยู่ด้วยกัน 4 ส่วนหลัก ๆ ด้วยกันครับ ตามหมายเลขในรูปภาพที่เขียนไว้ ซึ่งในแต่ละส่วนเราจะมารู้จักกันทีละเครื่องมือกันเรียงตามหมายเลข ดังนี้
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 ในบทความนี้ ส่วนของการใช้งานต่าง ๆ ของโปแกรม 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 หรือ ลิงค์ เป็นจุดเชื่อมโยงที่ปรากฎบนหน้าเว็บ เพื่อให้ผู้ใช้งานเว็บสามารถคลิกหรือกด...