รู้จักกับ Adobe Dreamweaver

webdevelopment

               Adobe Dreamweaver เวอร์ชั่น CC เป็นโปรแกรมที่ช่วยอำนวยความสะดวกในการออกแบบและพัฒนาเว็บไซต์เป็นโปรแกรมที่ช่วยสร้างหรือแก้ไขเอกสารเอชทีเอ็มแอล ในรูปแบบ WYSIWYG (what you see is what you get) คือในขณะที่ผู้พัฒนากำลังออกแบบเว็บไซต์ ผู้พัฒนาสามารถเห็นรูปแบบหรือผลของเว็บไซต์ที่จะได้ผ่านทางโปรแกรมได้ทันที

              Adobe Dreamweaver CC ได้รับความนิยมเป็นอย่างมาก เนื่องจากเป็นโปรแกรมที่ช่วยอำนวยความสะดวกให้กับผู้พัฒนาเว็บไซต์ แม้ไม่มีประสบการณ์ หรือ ไม่มีพื้นฐานด้วยการออกแบบและพัฒนาเว็บไซต์ ก็สามารถเรียนรู้วิธีการใช้งาน และสามารถออกแบบ และพัฒนาเว็บไซต์เป็นของตัวเองได้อย่างสะดวกสบาย และสวยงาม เนื่องจาก Adobe Dreamweaver CC ทำหน้าที่ในการแปลงคำสั่งเป็นรหัสต้นฉบับ หรือ เป็นเอกสารเว็บที่ง่ายต่อการเข้าใจ และยังรองรับการทำงานร่วมกับภาษาคอมพิวเตอร์อื่น ๆ สำหรับออกแบบ และพัฒนาเว็บไซต์ในรูปแบบของเว็บไซต์แบบไดนามิค เช่น ASP,ASP.NET, PHP, JSP และColdFusion รวมถึงการจัดการฐานข้อมูล เป็นต้น

               การเขียนเว็บเพจโดยทั่วไปสำหรับผู้ที่มีความรู้ หรือ มีพื้นฐานด้านภาษาเอชทีเอ็มแอล ภาษาซีเอสเอส หรือภาษาคอมพิวเตอร์อื่นดีอยู่แล้วจะใช้โปรแกรมสำหรับแก้ไขตัวอักษรโดยทั่วไป เช่น Notepad, NotePad++, EditPlus เป็นต้น ซึ่งผู้พัฒนาจะต้องมีพื้นฐาน และรู้จักคำสั่งในการพัฒนาเว็บไซต์ โดยจะไม่เหมาะสำ หรับผู้พัฒ นาเว็บไซต์แบบเริ่มต้น ความสามารถของ Adobe Dreamweaver สรุปได้ดังนี้

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

2. มีเครื่องมือในการช่วยสร้างเว็บเพจ ที่มีความยืดหยุ่นสูง เช่นการสร้างตาราง การแทรก รูปภาพ การจัดการคุณสมบัติของเว็บไซต์ เป็นต้น

3. รองรับภาษาคอมพิวเตอร์ที่หลากหลาย เป็นโปรแกรมที่รองรับการแก้ไข และพัฒนาภาษาคอมพิวเตอร์ที่หลากหลายทั้งภาษาสคริปต์ในฝั่งเครื่องผู้ร้องขอบริการ (client side script) และภาษาในฝั่งเครื่องผู้ให้บริการ (server side script) เช่น Java, ASP, PHP, CGI, VBScript เป็นต้น

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

5. สนับสนุนสื่อมัลติมีเดียที่หลากหลาย เช่น การใส่เสียงบรรยาย เสียงเพลงบรรเลง การแทรกไฟล์วิดีโอการใช้งานร่วมกับโปรแกรมอื่น ๆ เช่น Flash, Fireworks เป็นต้น

ความสามารถของ โปรแกรม Adobe Dreamweaver

1. ทำงานร่วมกับไฟล์เอกสารจากโปรแกรม Photoshop (*.psd) ได้ โดยโปรแกรมสามารถแยกองค์ประกอบภาพกราฟิกของไฟล์ psd และคัดลอกวางหรือลากวาง (drag and drop) ลงบนหน้าจอของโปรแกรม Adobe Dreamweaver ได้ทันที โดยโปรแกรมจะทำ หน้าที่แปลงองค์ประกอบภาพกราฟิกไปเป็นรหัสคำสั่งซีเอสเอส ซึ่งจะมีรูปแบบการแสดงผลทั้งตัวอักษร สี เงา และกราฟิกอื่น ๆ จากไฟล์เอกสาร psd

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

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

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

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

6. สามารถสร้างเลย์เอาท์แบบ Fluid Grid Layout เป็นการออกแบบเพื่อให้ตอบสนองต่อการแสดงผลในอุปกรณ์ที่แตกต่างกัน และมีความละเอียดหน้าจอที่แตกต่างกันออกไปด้วย Fluid Grid Layout จะช่วยในการปรับส่วนประสานงานกับผู้ใช้ให้แสดงผลได้อย่างเหมาะสมกับอุปกรณ์นั้น ๆ เช่น ความกว้าง หน้าจอ สีสัน รูปภาพกราฟิก เป็นต้น เพื่อให้รองรับการใช้งานเว็บไซต์แบบ Responsive Website Design

7. รองรับ jQuery Mobile Framework เป็นการออกแบบ และพัฒนาเว็บไซต์เพื่อให้รองรับกับอุปกรณ์เคลื่อนที่โดยเฉพาะ เช่น โทรศัพท์มือถือ สมาร์ทโฟน แท็บเล็ต เป็นต้น ซึ่งข้อดีของการใช้ jQuery Mobile Framework คือ สามารถรันได้ในทุก ๆ ระบบปฏิบัติการทั้ง Windows,Linux, OSX, Android หรือ iOS เป็นต้น

8. รองรับ CSS3 และHTML5 ทำให้ผู้พัฒนาสามารถใช้งานแท็กคำสั่ง หรือคุณสมบัติใหม่ ๆ ที่เป็นมาตรฐานที่ประกาศใช้งานตามมาตรฐานใหม่ของการออกแบบ และพัฒนาเว็บไซต์ ทำให้เว็บไซต์ที่ได้มีความเป็นมาตรฐาน และสามารถแสดงผลได้ในทุก ๆ อุปกรณ์ ทุก ๆ เว็บเบราว์เซอร์ และสามารถแสดงผลได้ในทุก ๆ ระบบปฏิบัติการ เป็นต้น

9. รองรับการแสดงผลตัวอย่างรหัสคำสั่ง (hinting) ภาษา PHP รวมไปถึง Ajax และJavaScript โดยโปรแกรมสามารถแสดงผลคำสั่งขึ้นมาเพื่อให้ผู้พัฒนาเลือกใช้ในกรณีที่ผู้พัฒนาพิมพ์คำสั่ง เพื่อให้ผู้พัฒนาเลือกใช้งานได้อย่างสะดวก รวดเร็ว และป้องกันข้อผิดพลาดจากการพิมพ์คำสั่งที่ไม่ถูกต้อง

10. สามารถฝังฟอนต์ลงไปในเว็บเพจ ในรูปแบบของเว็บฟอนต์ (Web Font) ได้ เพื่อให้หน้าเว็บเพจ แสดงผลรูปแบบตัวอักษรตามที่ผู้พัฒนาต้องการ เพื่อความสวยงามในการนำเสนอ ซึ่งปกติการใช้งานฟอนต์บนเว็บไซต์จะแสดงผลได้เฉพาะเครื่องผู้พัฒนา หากเครื่องอื่นไม่มีฟอนต์ก็ไม่สามารถแสดงผลตามที่ผู้พัฒนาต้องการได้ โปรแกรม Adobe Dreamweaver เวอร์ชั่นใหม่นี้ รองรับการฝังฟอนต์ลงในหน้าเว็บไซต์ทำให้เครื่องผู้ใช้งานสามารถแสดงผลแบบตัวอักษรได้แม้ไม่ได้ติดตั้งฟอนต์ลงไปในเครื่องผู้ใช้งาน ผู้พัฒนาสามารถฝังฟอนต์ได้โดยใช้เว็บไซต์สร้างเว็บฟอนต์ ตัวอย่างการแปลงฟอนต์เพื่อให้ใช้งานได้บนเว็บไซต์

 

ความต้องการของระบบ (system requirement)

ก่อนการติดตั้งโปรแกรม Adobe Dreamweaver CC ผู้พัฒนาจะต้องทำการตรวจสอบความต้องการของระบบก่อนการติดตั้ง เพื่อให้มั่นใจว่าสามารถติดตั้งโปรแกรมลงไปในเครื่องคอมพิวเตอร์ผู้พัฒนา และสามารถใช้งานได้อย่างสมบูรณ์ ซึ่งความต้องการระบบของโปรแกรม สำหรับ
ระบบปฏิบัติการ Windows มีดังนี้
1. หน่วยประมวลผลกลาง Intel Pentium 4หรือ AMD Athlon 64 processor ขึ้นไป
2. ระบบปฏิบัติการ Microsoft Windows 7, Windows 8, or Windows 8.1
3. หน่วยความจำหลัก (RAM) ขนาด 2 GB ขึ้นไป
4. พื้นที่ฮาร์ดดิสก์ว่างขนาด 1 GB ขึ้นไป สำหรับติดตั้งโปรแกรม
5. ความละเอียดหน้าจอขนาด 1280 x 1024พิกเซล ขึ้นไป