แนะนำ Adobe Dreamweaver CS4 โปรแกรมสร้างเว็บระดับโลก

admin · 26-01-2009, 11:19 PM

Adobe Dreamweaver CS4

นับได้ว่าเป็นโปรแกรมสร้างโฮมเพจที่มีความทันสมัย เนื่องจากสามารถสนับสนุนการสร้างเว็บเพจ ด้วยเทคโนโลยี DHTML (Dynamic HTML) และ XML (Extensible Markup Language) สามารถใส่ส่วนเพิ่มเติม เช่น Active X Applet และ Shockwave ได้ และสามารถใช้ CSS (Cascading Style Sheet) ซึ่งเป็นเทคโนโลยีใหม่ของการ สร้างเว็บเพจเพื่อให้เว็บเพจน่าสนใจ มีภาพเคลื่นไหว และสามารถได้โต้ตอบกับผู้เข้าชมเว็บไซต์ ได้ดียิ่งขึ้น Dreamweaver สามารถทำงานพื้นฐานเกี่ยวกับการสร้างโฮมเพจในส่วนต่าง ๆ ได้อย่างดีเยี่ยม Source Code ของ HTML ที่ได้ก็จัดอย่างเรียบร้อย และสามารถแก้ไข Source Code ที่ Dreamweaver สร้างขึ้นได้โดยไม่ส่งผลให้ตัวโปรแกรมทำงานผิดพลาดในภายหลัง

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

คุณลักษณะที่สำคัญ
ทำงานกับหน้าเว็บไว้ง่ายขึ้น เราสามารถใช้กลุ่มเครื่องมือจากแถบสถานะ (Status Bar) ช่วยในการทำงานกับหน้าเว็บได้ง่ายขึ้น เช่น การซูมหน้าเว็บเข้ามาเพื่อให้เห็นรายละเอียด ขณะทำงานด้วย Zoom Tool หรือเลื่อนดูหน้าเว็บไปมาด้วย Hand Tool นอกจากนั้นยังสามารถขยายมุมมองหน้าเว็บในรูปแบบเปอร์เซนต์เป็นจำนวนเท่าของ หน้าเว็บเดิมได้

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

ปรับค่าการทำงานกับ CSS เราสามารถตั้งรายละเอียดกับ CSS ได้ง่ายขึ้น โดยเลือกจากปุ่ม Visual Aids เพื่อให้เรามีความสะดวกมากขึ้นในการออกแบบหน้าเว็บ ตัวอย่างเช่น สามารถเลือกให้มีสีสันในแต่ละเฟรม แต่ละเลย์เอาท์ได้ เพื่อช่วยให้คนมีปัญหาทางด้านการมองเห็น สามารถจัดการเลย์เอาท์ได้อย่างชัดเจน

แสดงคุณสมบัติของ CSS ในส่วนที่เราเลือก เราสามารถปรับคุณสมบัติของ CSS ได้สะดวกมากยิ่งขึ้น โดยใช้พาเนล CSS (ซึ่งเป็นพาเนลใหม่ที่ Dreamwever CS4 ได้กำหนดขึ้นมา) ซึ่งจะสะดวกกว่าในอดีตที่เราต้องจดจำชื่อคุณสมบัติของ CSS และค่าที่สามารถกำหนดใส่ในคุณสมบัตินั้นได้

ในเวอร์ชั่น Dreamweaver CS4 นี้ ได้เพิ่มหน้าจอที่ใช้กับไฟล์นามสกุล flv (Flash Video เป็นไฟล์วิดีโอในรูปแบบของ Streaming Video ซึ่งวิดีโอประเภทนี้เราจะพบเห็นโดยทั่วๆ ไป คือวิดีโอที่สามารถโหลดและดูไปด้วยพร้อมๆ กันได้ ถ้าเป็นวิดีโอธรรมดา เราต้องโหลดให้เสร็จก่อน แล้วจึงค่อยเปิดดู)

จุดเด่นที่รักษาความเป็น Dreamweaver อยู่ ได้แก่ ผู้ใช้ไม่จำเป็นต้องศึกษาภาษา HTML มาก่อน ก็สามารถสร้างเอกสารเว็บได้ เพราะตัวโปรแกรมมีฟังก์ชันการทำงานแบบ HTML Generator ปุ่มควบคุมการทำงาน ได้จัดแบ่งเป็นหมวดหมู่ ช่วยให้การสั่งงานกระทำได้สะดวก และรวดเร็ว สามารถใช้งานภาษาไทยได้ดี สร้างภาพเคลื่อนไหว (Animation) โดยใช้รูปแบบของ Director ด้วยคุณสมบัติ Animate Netscape และ CSS-P Layers ทำให้ได้ภาพเคลื่อนไหวบนเบราเซอร์ โดยไม่ต้องอาศัย Plugin ใด ๆ ความสามารถในการสร้างตาราง โดยการอิมพอร์ทจาก Text File สนับสนุน CSS (Cascading Style Sheet) ความสามารถในการตรวจสอบเบราเซอร์ ความสามารถในการปรับปรุง ดูแลรักษาไซต์ เช่น การตรวจสอบลิงก์, สร้างรายงานแสดงผลการทดสอบการทำงาน มีฟังก์ชันในการโอนถ่ายข้อมูล (FTP) ขึ้นเครื่องแม่ข่าย (Server)
ความสามารถในการทำ Image Roller หรือรูปภาพที่สามารถเปลี่ยนแปลงเมื่อนำเมาส์มาผ่าน (Mouse Over/Mouse Out) กรณีที่ต้องการควบคุมคำสั่ง HTML มีฟังก์ชันให้ป้อน หรือแก้ไขรหัสคำสั่ง HTML ด้วย HTML Inspector รวมทั้งสามารถกำหนดโปรแกรมแก้ไขเอกสารเว็บอื่นๆ ได้ เช่น HomeSite (for Windows) และ BBEdit (for MAC) ไว้ด้วยกัน ความสามารถในการสร้างเฟรมอัตโนมัติ

นอกจากนี้ ในเวอร์ชั่นล่าสุดนี้ยังมีความสามารถใหม่ด้านอื่น ๆ อีก อาทิ การใช้งานในส่วน Accessibility,การติดตั้ง XML ลงบนหน้าเว็บอย่างง่ายโดยใช้วิธีลากวาง เป็นต้น ซึ่งความสามารถใหม่บางอย่าง เป็นความสามารถชั้นสูงที่เรามิได้กล่าวถึงในส่วนของคอนเท็นต์นี้ ถ้าผู้อ่านสนใจในเรื่องดังกล่าวสามารถเข้าไปศึกษาต่อเพิ่มเติมได้จากเว็บไซต์ www.adobe.com/products/dreamweaver

หน้าจอการทำงานของโปรแกรมเปลี่ยนไปมากจากเดิมครับ เครื่องมือเครื่องใช้ต่าง ๆ ก็มีการจัดวางที่แตกต่างไปจากเวอร์ชั่นก่อน ๆ เป็นอันมาก ผมจะหยิบนำมาแนะน เป็นบางอย่างครับ เช่น[color=#ff6600]

ในส่วนของ Main Menu และ Tools Bar มีการเปลี่ยนไปเยอะพอสมควรเลยครับ เข้าใจว่า ผู้ผลิตโปรแกรมต้องการขยายหน้าจอของโปรแกรมให้มีพื้นที่มากขึ้น โดยได้มีพื้นที่การออกแบบเว็บได้มากขึ้น เลยทำการตัดในส่วนของ Title Bar ของโปรแกรมออกไป และถ้าเราสังเกตที่ Tool Bar เราจะพบว่าโปรแกรมได้เพิ่มสิ่งอำนวยความสะดวกมาให้แก่ผู้ใช้พอสมควร เช่น เพิ่มแติม Input สำหรับการค้นหาข้อมูลมาให้เรา

ซึ่งเมื่อเราทำการกรอกคีย์ที่ต้องการค้นหาลงไป แล้วเรากดที่ปุ่ม Enter โปรแกรมจะไปค้นหาคีย์นั้นที่เว็บของ Adobe ให้เราในทันที

มาดูเรื่องหน้าตาของโปรแกรมในเวอร์ชั่นนี้กันต่อครับ โปรแกรมมีการจัดวางพวก Panel ต่าง ๆ แตกต่างไปจากเดิม พร้อมทั้งรูปลักษณ์ที่แปลกไปจากเดิมเล็กน้อย เช่น จากเดิมเมื่อคุณทำการยุบพาเนลลงไป ตัวพาเนลก็จะยุบหายไปเลย แต่มาในเวอร์ชั่นนี้ไม่หายครับ แต่จะปรากฏเป็นรูปแบบ List icon ให้คุณเห็น ดังรูป

แต่สำหรับการจัดวางพวก Panel หรืออื่น ๆ คุณสามารถเลือกโหมดของรูปแบบหน้าตาโปรแกรมได้ครับ โดยเลือกไปที่ Main Menu ด้านบนครับ จากนั้นก็เลือก ดังรูป เช่นในที่นี้ผมลองเลือกเป็นแบบบ App Developer ดังรูป

จะได้หน้าจอโปรแกรม ดังนี้

ในเวอร์ชั่นนี้ในส่วนของ Properties Panel มีการเปลี่ยนไปเล็กน้อย (แต่อาจจะมากสำหรับบางท่าน) ดังในรูป

เริ่มกันที่อย่างแรกเลยที่เปลี่ยนไป คือ Align icon หรือไอคอนสำหรับการจัดตำแหน่งข้อความที่เราต้องใช้กันเสมอ ๆ สำหรับในเวอร์ชั่นนี้หายไป....(สำหรับในโหมด HTML) หากคุณต้องการใช้งานการจัดตำแหน่งข้อความ ให้กระทำดังนี้

เลือก ที่ข้อความที่ต้องการจัดตำแหน่ง จากนั้นทำการ Click ขวา แล้วทำการเลือกที่ Align -> ตำแหน่งที่ต้องการ (Left, Center, Right, Justify) ดังรูป

แต่เตือนไว้นิดนึงนะครับ ใครอย่าไปสลับโหมดเป็น CSS แล้วทำการเลือก Align นะครับ เพราะว่า CSS ที่คุณสร้างไว้อาจจะเสียหายได้ เพราะจะได้คุณสมบัติที่ไม่ต้องการไปด้วยกับ CSS ของคุณ ยกเว้นแต่ว่า คุณมีความรู้เรื่อง CSS ดีแล้ว อันนี้ไม่ว่ากัน....

ขอบคุณบทความจาก

http://www.dwthai.com