ข้อ เสีย ของโปรแกรม Dreamweaver

ในปัจจุบันนี้โปรแกรม Dreamweaver ถูกพัฒนาโดย Adobe ซึ่งเป็นการซื้อกิจการต่อมาจาก Macromedia เมื่อปี 2005 ที่ผ่านมา ดังนั้น ในปัจจุบันนี้เราจะเรียกโปรแกรมนี้ว่า Adobe Dreamweaver แทน Macromedia Dreamweaver กันครับ โดยนับถึงปัจจุบันนี้ (วันที่ผม re-write บทความคือปี 2015) โปรแกรมได้รับการพัฒนามาแล้วทั้งหมด 16 เวอร์ชั่น (นับตั้งแต่เวอร์ชั่น 1.0 ที่ออกมาเมื่อปี 1997) ดังนี้Major versionVersion NameYearProvider11.01997Macromedia22.01998Macromedia33.01999Macromedia44.02000Macromedia5UltraDev 4.02000Macromedia6MX2002Macromedia7MX 20042003Macromedia88.02005Macromedia9CS32007Adobe10CS42008Adobe11CS52010Adobe12CS62012Adobe13CC (Creative Cloud)2013Adobe14CC 20142014Adobe15CC 2014 (14.1)2014Adobe16CC 20152015Adobe

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

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

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

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

Dreamweaver Version 7 หรือ MX 2004 Dreamweaver Version 12 หรือ CS6 Dreamweaver Version 13 หรือ CC

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

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

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 ในบทความนี้ ส่วนของการใช้งานต่าง ๆ ของโปแกรม Dreamweaver โดยละเอียด DwThai.Com จะนำเสนอท่านต่อไปในบทความที่จะค่อย ๆ ทยอยเขียนตามออกมาเรื่อย ๆ ครับ

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

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

Dreamweaver Shortcut

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

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

ADOBE DREAMWEAVER จุดเริ่มต้นดีๆ ของนักสร้างเว็บไซต์มืออาชีพ

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

ความเป็นมาของ DREAMWEAVER

ADOBE DREAMWEAVER หรือชื่อเดิมคือ MACROMEDIA DREAMWEAVER เป็นโปรแกรมแก้ไข HTML พัฒนาโดย MACROMEDIA ปัจจุบันควบกิจการรวมกับบริษัท ADOBE SYSTEMS โดย ADOBE DREAMWEAVER มีทั้งในระบบปฏิบัติการ MAC OS / MICROSOFT WINDOWS และ UNIX-LIKE OPERATING SYSTEM

โปรแกรม DREAMWEAVER มีการพัฒนา ตั้งแต่ ธันวาคม ค.ศ. 1997 เป็น DREAMWEAVER 1.0 เป็นเวอร์ชันแรกสำหรับระบบปฏิบัติการ MAC OS จากนั้นออกรุ่น DREAMWEAVER 1.2 เป็นเวอร์ชันแรกสำหรับระบบปฏิบัติการ WINDOWS และรุ่นลุ่กตอนนี้คือ DREAMWEAVER CC 2021 

มาลองใช้โปรแกรมกันเลย

เริ่มจาก ขั้นตอนการเริ่มต้นใช้งาน ก็ต้องเปิดโปรแกรม ADOBE DREAMWEAVER จะปรากฏหน้าต่าง WELCOME SCREEN ก่อนการเข้าสู่หน้าโปรแกรมหลัก ซึ่งแต่ละส่วนมีรายละเอียด ดังนี้

1. OPEN A RECENT ITEM : แสดงชื่อเว็บเพจที่เคยใช้งานมาแล้ว หรือคลิกที่ปุ่ม OPEN เพื่อค้นหาไฟล์ที่ต้องการ
2. CREATE NEW : สร้างไฟล์ใหม่ โดยถ้าคลิก HTML จะเป็นการสร้างเว็บเพจพื้นฐานแต่ถ้าคลิกหัวข้ออื่นจะเป็นการสร้างเว็บเพจหรือไฟล์ตามชนิดนั้น เช่น

• HTML : สร้างหน้าเว็บธรรมดา เหมาะสำหรับผู้เริ่มต้นสร้างเว็บ
• COLDFUSION : สร้างหน้าเว็บแอพพลิเคชันที่พัฒนาด้วยเทคโนโลยีฝั่งเซิร์ฟเวอร์ COLDFUSION
• PHP : สร้างหน้าเว็บแอพพลิเคชันที่พัฒนาด้วยเทคโนโลยีฝั่งเซิร์ฟเวอร์ PHP
• CSS : สร้างไฟล์เก็บรูปแบบตัวอักษร ตาราง สีพื้นหลัง เพื่อนำไปใช้ในทุก ๆ หน้าเว็บเพจ
• JAVASCRIPT : สร้างไฟล์สคริปต์ที่ทำงานฝั่งไคลเอนต์ และทำงานที่เครื่องของผู้เข้าชมเว็บไซต์
• DREAMWEAVER SITE : สร้างเว็บไซต์ใหม่

1. TOP FEATURES (VIDEOS) : เข้าสู่หน้าเว็บ ADOBE TV ดูวิดิโอสาธิตการใช้งานและอธิบายส่วนประกอบของโปรแกรม ADOBE DREAMWEAVER CS6
2. เปิดดูคำแนะนำการใช้โปรแกรม
3. เปิดดูคำแนะนำการใช้โปรแกรม
4. คลิกออปชันนี้หากไม่ต้องการแสดง WELCOME SCREEN อีกในครั้งต่อไป

มาทำความรู้จักกันต่อใน ส่วนประกอบของโปรแกรม ADOBE DREAMWEAVER CS6 ในการการใช้งาน ADOBE DREAMWEAVER

1. MENU BAR เป็นแถบรวบรวมคำสั่งทั้งหมดของโปรแกรม

• CODE สำหรับแสดงการทำงานในรูปแบบ HTML นอกจากนี้ยังสามารถเขียนคำสั่ง HTML หรือคำสั่งภาษาสคริปต์ ได้ด้วย
• SPLIT สำหรับแสดงการทำงานแบบ HTML กับการแสดงพื้นที่ออกแบบ โดยจะแสดงส่วนของคำสั่ง ไว้ด้านบนและแสดงเว็บเพจปกติไว้ ด้านล่าง
• DESIGN สำหรับแสดงเว็บเพจคล้ายกับที่เราเห็นในเบราว์เซอร์ เช่น ข้อความ กราฟิก หรือออปเจ็กต์อื่นๆ และสามารถแก้ไขเนื้อหาลงเว็บเพจได้
• TITLE สำหรับแสดงชื่อของเว็บเพจ ในส่วนของแถบหัวเรื่อง
• SAVE และ SAVE AS… ก็จะมีความสงสัยว่า โปรแกรม ADOBE DREAMWEAVER เมื่อบันทึกจะได้ไฟล์ชนิดใด ส่วนมากเราจะบันทึกเป็นไฟล์ HTML

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

• COMMON ใช้วางออบเจ็กต์ที่ต้องใช้งานบ่อย ๆ เช่น รูปภาพ ตาราง ไฟล์มัลติมีเดีย เป็นต้น
• LAYOUT ใช้วางออบเจ็กต์ที่ใช้จัดโครงสร้างของเว็บเพจ เช่น ตาราง เฟรม และ AP ELEMENT
• FORMS ใช้วางออบเจ็กต์ที่ใช้ในการสร้างแบบฟอร์มรับข้อมูล เช่น ช่องรับข้อความ ปุ่มตัวเลือกต่าง ๆ
• DATA ใช้วางคำสั่งที่ใช้การจัดการฐานข้อมูล และดึงข้อมูลจากฐานข้อมูลมาแสดงบนเว็บเพจ
• SPRY ใช้วางออบเจ็กต์ที่ใช้เทคโนโลยีของ AJAX
• JQUERY MOBILE ใช้สร้างหน้าเพจที่แสดงบนอุปกรณ์มือถือและแท็บเล็ตโดยใช้เทคโนโลยีแบบ JQUERY
• INCONTEXT EDTING ใช้สร้างออบเจ็กต์ที่ช่วยอำนวยความสะดวกให้ผู้ใช้งานสามารถแก้ไขเว็บเพจได้
• TEXT ใช้สำหรับจัดปรับแต่งหรือจัดรูปแบบของตัวอักษรและข้อความสะดวกให้ผู้ใช้งาน เช่น หัวเรื่อง ตัวหน้า ตัวเอียง รวมทั้งแทรกสัญลักษณ์พิเศษต่าง ๆ เช่น $ (DOLLAR) © (COPYRIGHT) เป็นต้น
• FAVORITES เป็นกลุ่มที่สามารถเพิ่มปุ่มคำสั่งที่ใช้บ่อยจากกลุ่มอื่น ๆ เข้ามาเก็บไว้ใช้งานเอง เพื่อความสะดวกในการใช้งาน

1. DOCUMENT WINDOWS เป็นพื้นที่สำหรับสร้างหน้าเว็บเพจ และสามารถเลือกพื้นที่การทำงานได้หลายมุมมอง เช่น CODE VIEW / CODE AND DESIGN และ DESIGN VIEW
2. STATUS BAR เป็นแถบแสดงสถานะ ซึ่งประกอบด้วย 2 ส่วน คือ ทางด้านซ้ายเรียกว่า TAG SELECTOR ใช้สำหรับแสดงคำสั่ง HTML ของส่วนประกอบในเว็บเพจที่เลือกอยู่ และทางด้านขวาเป็นส่วนที่บอกขนาดหน้าจอการแสดงผลและเวลาที่ใช้ในการดาวน์โหลดเว็บเพจ
3. PROPERTIES INSPECTOR เป็นส่วนที่กำหนดคุณสมบัติต่าง ๆ ในการปรับแต่งองค์ประกอบของหน้าเว็บเพจ
4. INSERT BAR เป็นแถบที่ประกอบด้วยปุ่มคำสั่งที่ใช้ในการแทรกออบเจ็กต์ (องค์ประกอบต่างๆ) ลงในเว็บเพจ โดยแบ่งเป็นหมวดหมู่
5. PANEL GROUP เป็นกลุ่มหน้าต่างพาเนล ซึ่งช่วยเพิ่มความสามารถในการจัดการและออกแบบเว็บเพจ

ข้อดีและข้อเสียในการใช้ DREAMWEAVER

ข้อดีของโปรแกรม 

• ADOBE DREAMWEAVER CS6 การใช้งาน ช่วยให้คุณทำงานได้เร็วขึ้น เพราะเมื่อก่อนนั้นถ้าเราต้องการสร้างเว็บเพจ เราจะต้องเขียนภาษา HTML ขึ้นมาเพื่อให้แสดงผลผ่าน BROWSER เป็นรูปภาพหรือข้อความออกมา ซึ่งทำให้เราทำงานได้ช้าลง แต่ DREAMWEAVER โปรแกรมจะแสดงหน้าจอที่แสดงผลให้เราสามารถปรับแต่งหน้าตาของเว็บเพจของเราได้เลย โดย DREAMWEAVER จะทำการเขียน HTML ให้เราเองเป็น EDITOR ที่มีประสิทธิภาพตัวหนึ่ง
• เป็นโปรแกรมจัดการเว็บไซต์ที่ดีสำหรับ ADOBE DREAMWEAVER ยังเป็นโปรแกรมที่ช่วยให้เราจัดการกับเว็บไซต์ของเราได้ดีขึ้น 
• ช่วยให้เราทำเว็บได้ง่ายขึ้น สำหรับคนที่ไม่เคยทำเว็บมาก่อนก็สามารถใช้ DREAMWEAVER เพียงโปรแกรมเดียวเพื่อพัฒนาเว็บไซต์ของตัวเองขึ้นมาได้ง่ายเหมือนกับการเขียนหนังสือ

ข้อเสียของโปรแกรม

• สำหรับข้อเสียของ DREAMWEAVER นั้นก็มีอยู่ตรงที่ถ้าเราไม่เรียนรู้วิธีการใช้งานที่ถูกต้องเราจะได้เว็บไซต์ที่มี CODE เยอะมากทำให้การแก้ไขภายหลังจะทำได้ยาก ต้องพยายามศึกษาตัวอย่างการใช้งานในหลายรูปแบบ อีกข้อนึงคือโปรแกรมตัวนี้มีราคาที่ค่อนข้างแพงสำหรับผู้ที่จะเริ่มหัดทำเว็บไซต์

สรุป DREAMWEAVER จุดเริ่มของนักสร้างเว็บไซต์ฝึกหัด

ADOBE DREAMWEAVER อาจจะเป็นทางเลือกหนึ่งทางสำหรับคนอยากสร้างเว็บไซต์เบื้องต้น แต่ผู้ใช้อาจจะเข้าใจในการเขียนทางคอมพิวเตอร์ระดับหนึ่งถึงเริ่มมี เทคนิคการใช้โปรแกรม และเริ่ม ขั้นตอนการสร้างไซต์ สำหรับคนที่ติดปัญหาเรื่องเงินซื้อโปรแกรม ก็จะมีให้ทดลองฟรีอยู่ ลองหัดลองศึกษา ตามเว็บไซต์และตัวโปรแกรมแนะนำเชื่อว่าคุณก็จะเป็นนักเขียนเว็บไซต์ได้แน่