รู้จักกับ Dreamweaver CS6
Adobe Dreamweaver CS6 เป็นโปรแกรมที่ช่วยในการสร้างเว็บไซต์ และเหมาะสมสำหรับนักพัฒนาเว็บไซต์มือใหม่ โดยสามารถนำรูปภาพหรือข้อความมาประกอบเป็นเว็บเพจ อีกทั้งยังเพิ่มลูกเล่นต่าง ๆ เช่น เสียง ภาพเคลื่อนไหว วีดิโอ ซึ่งไม่จำเป็นต้องรู้หลักการเขียนโปรแกรมด้วยภาษา HTML ก็สามารถสร้างเว็บไซต์ได้
อะโดบี ดรีมวีฟเวอร์ (Adobe Dreamweaver) หรือชื่อเดิมคือ แมโครมีเดีย ดรีมวีฟเวอร์ (Macromedia Dreamweaver) เป็นโปรแกรมแก้ไข HTML พัฒนาโดยบริษัทแมโครมีเดีย (ปัจจุบันควบกิจการรวมกับบริษัท อะโดบีซิสเต็มส์) ดรีมวีฟเวอร์มีทั้งในระบบปฏิบัติการแมคอินทอช และไมโครซอฟท์วินโดวส์ ดรีมวีฟเวอร์ยังสามารถทำงานบนระบบปฏิบัติการแบบยูนิกซ์ ผ่านโปรแกรมจำลองอย่าง WINE ได้ โปรแกรม Dreamweaver มีการพัฒนาดังนี้
- Dreamweaver 1.0 (ธันวาคม ค.ศ. 1997) เป็นเวอร์ชันแรกสำหรับระบบปฏิบัติการ MAC OS
- Dreamweaver 1.2 (มีนาคม ค.ศ. 1998) เป็นเวอร์ชันแรกสำหรับระบบปฏิบัติการ Windows
- Dreamweaver 2.0 (ธันวาคม ค.ศ. 1998)
- Dreamweaver 3.0 (ธันวาคม ค.ศ. 1999)
- Dreamweaver UltraDev 1.0 (มิถุนายน ค.ศ. 2000)
- Dreamweaver 4.0 (ธันวาคม ค.ศ. 2000)
- Dreamweaver UltraDev 4.0 (ธันวาคม ค.ศ. 2000)
- Dreamweaver MX (พฤษภาคม ค.ศ. 2002)
- Dreamweaver MX 2004 (10 พฤศจิกายน ค.ศ. 2003)
- Dreamweaver 8 (13 พฤศจิกายน ค.ศ. 2005)
- Dreamweaver CS3 (16 เมษายน ค.ศ. 2007) เป็นเวอร์ชันแรกหลังจากรวมกับบริษัท อะโดบีซิสเต็มส์
- Dreamweaver CS4 (23 กันยายน ค.ศ. 2008)
- Dreamweaver CS5 (20 มิถุนายน ค.ศ. 2010)
- Dreamweaver CS6 (23 เมษายน ค.ศ. 2012)
ความสามารถใหม่ของ Adobe Dreamweaver CS6
1. Fluid grid layout
การออกแบบหน้าเอกสารใหม่บนพื้นฐานของตารางที่สามารถนำไปใช้ได้หลากหลาย บนหน้าจอขนาดต่าง ๆ เช่น SmartPhone Tablet หรือ PC โดยเราสามารถออกแบบครั้งเดียว แล้วสามารถนำไปใช้ได้กับทุกอุปกรณ์
2. JQuery Mobile Framework updates
JQuery Mobile Framework เข้ามาใน Adobe Dreamweaver CS5.5 ในเวอร์ชั่นนี้ได้มีการเพิ่มส่วนช่วยในการทำงานกับ JQuery Mobile Framework ได้สะดวกขึ้นไปอีก เช่น การนำ Theme ที่ออกแบบด้วย Adobe Firework CS6 มาเลือกใช้กับ Mobile Web project และ การเลือกกำหนด icon ต่าง ๆ ให้กับ button เป็นต้น
3. Adobe PhoneGap Build integration
สำหรับใน Adobe Dreamweaver CS6 ได้เพิ่มส่วนของการทำงานกับ PhoneGap Build เข้าไป ทำให้คุณสามารถที่จะนำ Mobile project ที่ทำอยู่ขึ้นไปบนระบบ online service ของ PhoneGap Build ให้ทำการ compile ออกมาเป็นไฟล์ mobile application บน platform ต่างๆ ได้ง่าย ๆ
4. CSS3 Transition
ความสามารถของ CSS3 นั้นเริ่มปรากฏออกมาให้เห็นมากขึ้นเรื่อย ๆ ทั้งเรื่อง Web Font หรือการทำ animation ของ HTML Element ก็สามารถทำได้อย่างน่าประทับใจ Adobe Dreamweaver CS6 ได้เพิ่มส่วน User Interface ให้คุณสามารถกำหนด CSS3 Transition ให้กับ element ได้ตามที่คุณต้องการ ลดขั้นตอนการเขียน code CSS ด้วยตนเอง ประหยัดเวลาและได้งานสวย ๆ ที่มีคุณภาพและน่าประทับใจ
5. Integrate with Adobe Business Catalyst
หากคุณยังไม่รู้จัก Adobe Business Catalyst มาก่อน ให้คุณนึกถึง บริการ hosting ตั้งแต่จด domain name, ใช้บริการ hosting, จนถึง SEO, Web Analytic จนไปถึง E-commerce system เรียกได้ว่าครบวงจร ซึ่ง Adobe นำ online service นี้มาเชื่อมเข้ากับ Adobe Dreamweaver เพื่อให้ Web designer ไม่ต้องออกไปหา domain หรือ hosting ที่ไหน แค่สมัครใช้บริการ แล้วก็สามารถ upload ตัว Web Project ขึ้นไปใช้งานได้ทันที (มีทั้งแบบฟรีให้ทดลองใช้ และเสียเงินเป็นรายเดือน)
6. Web Font Management
Adobe Dreamweaver CS6 ได้มีส่วนของการจัดการ Web Font ทำให้ปัญหาเรื่องฟอนต์ในเครื่องผู้ชมสามารถแสดงตัวอักษรบนหน้าเว็บได้ถูกต้อง
7. CSS Multiple Classes selection
การเลือกใส่ CSS Class ให้ HTML Element ใน Adobe Dreamweaver รุ่นก่อนๆ ไม่สามารถทำได้อย่างสะดวกนัก ต้องอาศัยความรอบคอบ แต่ใน Adobe Dreamweaver CS6 ได้มีการเพิ่มส่วนในการจัดการ CSS Multiple Class ให้ง่ายและสะดวกขึ้นมาก
ที่มา : http://www.idealready.com/whatsnew_2.html
คุณสมบัติของเครื่องคอมพิวเตอร์ก่อนติดตั้งโปรแกรม
1. หน่วยประมวลผลกลาง (CPU) ไม่น้อยกว่า Intel Pentium4 หรือ AMD Athlon 64
2. หน่วยความจำ (RAM) ไม่น้อยกว่า 512 MB (แนะนำ 1 GB)
3. เนื้อที่ว่าง (Harddisk) ไม่น้อยกว่า 1 GB
4. จอภาพ (Monitor) ความละเอียดไม่น้อยกว่า 1,024 x 768 Pixels
5. ระบบปฏิบัติการ (OS) ไม่ต่ำกว่าระบบปฏิบัติการ Windows XP
6. ไดร์ฟดีวีดี-รอม (DVD-ROM drive)
การติดตั้งโปรแกรม Adobe Dreamweaver CS6
การติดตั้งโปรแกรม Adobe Dreamweaver CS6 สามารถติดตั้งจากแผ่นซีดีหรือดาวน์โหลดจากอินเทอร์เน็ต มีขั้นตอนการติดตั้งดังนี้
1. คลิกที่ไอคอน
2. จะปรากฏหน้าต่าง ให้เลือกตำแหน่งที่จะติดตั้งโปรแกรม เมื่อเลือกเสร็จแล้ว คลิกที่ปุ่ม Next
3. จะปรากฏหน้าต่าง การติดตั้งโปรแกรม ซึ่งแบ่งออกเป็น 2 แบบ คือ
- Install ต้องมี Serial Number เพื่อใช้ติดตั้งโปรแกรม
- Try เป็นโปรแกรมสำหรับทดลองใช้ 30 วัน
หมายเหตุ การติดตั้งโปรแกรมในครั้งนี้ เลือกการติดตั้งแบบ Install
4. จะปรากฏหน้าต่าง แสดงลิขสิทธิ์เกี่ยวกับโปรแกรม ให้คลิกที่ปุ่ม Accept
5. จะปรากฏหน้าต่าง ให้ใส่ Serial Number จากนั้นให้คลิกที่ปุ่ม Next
6. จะปรากฏหน้าต่าง Options เพื่อเลือกโปรแกรมในการติดตั้ง ดังนี้
- เลือกโปรแกรม Adobe Dreamweaver CS6 เพื่อติดตั้งโปรแกรม
- ช่อง Language เพื่อเลือกภาษาในการติดตั้งโปรแกรม
- ช่อง Location เพื่อเลือกตำแหน่งในการติดตั้งโปรแกรม โดยการติดตั้งอัตโนมัติ จะถูกติดตั้งที่ตำแหน่ง C:\Program Files\Adobe (สามารถเปลี่ยนตำแหน่งในการติดตั้งได้)
- เมื่อกำหนด Options ต่าง ๆ เสร็จแล้ว ให้คลิกที่ปุ่ม Install
7. จะปรากฏหน้าต่าง กำลังติดตั้งโปรแกรม เมื่อติดตั้งโปรแกรมเสร็จเรียบร้อย ให้คลิกที่ปุ่ม Close
การเปิดใช้งาน Adobe Dreamweaver CS6
เมื่อต้องการเข้าสู่้โปรแกรม Adobe Dreamweaver CS6 เพื่อเปิดใช้งาน มีขั้นตอนดังนี้ (ระบบปฏิบัติการ Windows XP)
1. คลิกที่ปุ่ม Start
2. คลิก Programs หรือ All Programs
3. เลือก Adobe Dreamweaver CS6
4. จะปรากฏหน้าต่าง Welcome Screen ก่อนการเข้าสู่หน้าโปรแกรมหลัก ซึ่งแต่ละส่วนมีรายละเอียด ดังนี้
1. Open a Recent Item : แสดงชื่อเว็บเพจที่เคยใช้งานมาแล้ว หรือคลิกที่ปุ่ม Open เพื่อค้นหาไฟล์ที่ต้องการ
2. Create New : เป็นการสร้างไฟล์งานใหม่ เช่น HTML, ColdFusion, PHP, ASP, JavaScript เป็นต้น
- HTML : สร้างหน้าเว็บธรรมดา เหมาะสำหรับผู้เริ่มต้นสร้างเว็บ
- ColdFusion : สร้างหน้าเว็บแอพพลิเคชั่นที่พัฒนาด้วยเทคโนโลยีฝั่งเซิร์ฟเวอร์ ColdFusion
- PHP : สร้างหน้าเว็บแอพพลิเคชั่นที่พัฒนาด้วยเทคโนโลยีฝั่งเซิร์ฟเวอร์ PHP
- CSS : สร้างไฟล์เก็บรูปแบบตัวอักษร ตาราง สีพื้นหลัง เพื่อนำไปใช้ในทุก ๆ หน้าเว็บเพจ
- JavaScript : สร้างไฟล์สคริปต์ที่ทำงานฝั่งไคลเอนต์ และทำงานที่เครื่องของผู้เข้าชมเว็บไซต์
- Dreamweaver Site : สร้างเว็บไซต์ใหม่
3. Top Features (Videos) : เข้าสู่หน้าเว็บ Adobe TV ดูวีดิโอสาธิตการใช้งาน
ส่วนประกอบของ Adobe Dreamweaver CS6
ส่วนประกอบของโปรแกรม Adobe Dreamweaver CS6 มีองค์ประกอบ ดังนี้
1. Menu bar เป็นแถบรวบรวมคำสั่งทั้งหมดของโปรแกรม
- Code สำหรับแสดงการทำงานในรูปแบบ HTML นอกจากนี้ยังสามารถเขียนคำสั่ง HTML หรือคำสั่งภาษาสคริปต์ (Script) อื่นๆ ได้ด้วย
- Split สำหรับแสดงการทำงานแบบ HTML กับการแสดงพื้นที่ออกแบบ โดยจะแสดงส่วนของคำสั่ง ไว้ด้านบนและแสดงเว็บเพจปกติไว้ ด้านล่าง
- Design สำหรับแสดงเว็บเพจคล้ายกับที่เราเห็นในบราวเซอร์ เช่น ข้อความ กราฟิก หรือออปเจ็กต์อื่นๆ และสามารถแก้ไขเนื้อหาลงเว็บเพจได้
- Title สำหรับแสดงชื่อของเว็บเพจ ในส่วนของแถบหัวเรื่อง
2. Toolbar เป็นแถบรวบรวมคำสั่งที่ใช้งานบ่อยๆ
3. Document Windows เป็นพื้นที่สำหรับสร้างหน้าเว็บเพจ และสามารถเลือกพื้นที่การทำงานได้หลายมุมมอง เช่น
- Code View สำหรับแสดงการทำงานในรูปแบบ HTML นอกจากนี้ยังสามารถเขียนคำสั่ง HTML หรือคำสั่งภาษาสคริปต์ (Script) อื่นๆ ได้ด้วย
- Code and Design สำหรับแสดงการทำงานแบบ HTML กับการแสดงพื้นที่ออกแบบ โดยด้านบนจะแสดงส่วนของคำสั่ง และด้านล่างแสดงเว็บเพจปกติไว้
- Design View สำหรับแสดงเว็บเพจคล้ายกับที่เราเห็นในบราวเซอร์ เช่น ข้อความ กราฟิก หรือออปเจ็กต์อื่นๆ และสามารถแก้ไขเนื้อหาลงเว็บเพจได้
4. Status bar เป็นแถบแสดงสถานะ ซึ่งประกอบด้วย 2 ส่วน คือ ทางด้านซ้ายเรียกว่า Tag Selector ใช้สำหรับแสดงคำสั่ง HTML ของส่วนประกอบในเว็บเพจที่เลือกอยู่ และทางด้านขวาเป็นส่วนที่บอกขนาดหน้าจอการแสดงผลและเวลาที่ใช้ในการดาวน์โหลดเว็บเพจ
5. Properties Inspector เป็นส่วนที่กำหนดคุณสมบัติต่าง ๆ ในการปรับแต่งองค์ประกอบของหน้าเว็บเพจ
6. Insert Bar เป็นแถบที่ประกอบด้วยปุ่มคำสั่งที่ใช้ในการแทรกออบเจ็กต์ (องค์ประกอบต่างๆ) ลงในเว็บเพจ โดยแบ่งเป็นหมวดหมู่ซึ่งมีรายละเอียดดังนี้
- Common เป็นกลุ่มเครื่องมือพื้นฐานในการสร้างเว็บเพจ เช่น รูปภาพ กราฟิก ตาราง ไฟล์มีเดีย เป็นต้น
- Layout เป็นกลุ่มเครื่องมือที่ช่วยในการจัดองค์ประกอบของหน้าเว็บเพจ
- Forms เป็นกลุ่มเครื่องมือที่ใช้สร้างแบบฟอร์มรับข้อมูลจากผู้ชม เช่น ช่องรับข้อความ และฟิลด์ชนิดต่างๆ
- Data เป็นกลุ่มเครื่องมือที่ใช้สำหรับสร้างหน้าเว็บติดต่อกับฐานข้อมูล
- Spry เป็นกลุ่มเครื่องมือที่ใช้ในการจัดการหน้าเว็บเพจ โดยจะช่วยในการทำงานเพิ่มเติมหรือแก้ไขในส่วนที่ผิดพลาดหรือต้องการปรับเปลี่ยนให้สะดวกขึ้น
- jQuery Mobile เป็นกลุ่มเครื่องมือที่ช่วยในการสร้างหน้าเว็บบนมือถือ
- InConext Editing เป็นกลุ่มเครื่องมือที่ช่วยอำนวยความสะดวกให้ผู้ใช้งานสามารถแก้ไขเว็บเพจได้
- Text เป็นกลุ่มเครื่องมือที่ใช้จัดรูปแบบข้อความในเว็บเพจ
- Favorite เป็นกลุ่มเครื่องมือที่ใช้งานบ่อยๆ เพื่อความสะดวกในการใช้งาน
- Color Icons แสดงสีของปุ่มเครื่องมือ
- Hide Labels ซ่อนชื่อเรียกของปุ่มเครื่องมือ
7. Panel Group เป็นกลุ่มหน้าต่างพาเนล ซึ่งช่วยเพิ่มความสามารถในการจัดการและออกแบบเว็บเพจ
