คู่มือการใช้งานadobe dreamweaver cs6

เริ่มต้นใช้งานโปรแกรม Adobe Dreamweaver CS6

           Adobe Dreamweaver CS6 เป็นโปรแกรมสำเร็จรูปที่ใช้สาหรับสร้างเว็บไซต์ เหมาะสาหรับนักพัฒนาเว็บไซต์ตั้งแต่มือใหม่ไปจนถึงมืออาชีพ  โดยสามารถนาข้อความและภาพมาประกอบเป็นหน้าเว็บเพจได้อย่างง่ายๆ และสามารถเพิ่มลูกเล่นทางด้านมัลติมีเดีย ตลอดจนการติดต่อกับฐานข้อมูลที่ทาได้ง่าย นอกจากนี้ Adobe Dreamweaver CS6 ยังเป็นโปรแกรมประเภท WYSIWYG อ่านว่า "วิซซีวิก" (What You See Is What You Get) แปลว่า คุณเห็นอย่างไรคุณก็ได้รับอย่างนั้น หมายความว่าลักษณะข้อความ การวางภาพกราฟิก บนเว็บเพจทาไว้อย่างไร เมื่อทาการแสดงผล บนบราวเซอร์แล้ว ลักษณะของข้อความหรือภาพกราฟิกที่ได้ก็จะเหมือนกับที่ทำไว้

ความสามารถใหม่ของ Adobe Dreamweaver CS6

1. Fluid grid layout

การออกแบบหน้าเอกสารใหม่บนพื้นฐานของตารางที่สามารถนำไปใช้ได้หลากหลายบนหน้าจอขนาดต่างๆ เช่น Smart Phone 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 ได้เพิ่มส่วนของการทำงานกับ Phone Gap Build เข้าไป ทำให้คุณสามารถที่จะนำ Mobile project ที่ทำอยู่ขึ้นไปบนระบบ online service ของ Phone Gap 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 ให้ง่ายและสะดวกขึ้นมาก

คุณสมบัติของเครื่องคอมพิวเตอร์ก่อนติดตั้งโปรแกรม

            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)

ขั้นตอนการติดตั้งโปรแกรม มีวิธีการดังนี้

  1. เปิดโฟลเดอร์โปรแกรม Adobe Dreamweaver CS6  ก่อนติดตั้งให้ปิดอินเทอร์เน็ต

 2. ดับเบิ้ลคลิกที่ไฟล์ Set-up.exe จากนั้นคลิก Next เพื่อดำเนินการต่อ ดังรูป

 3.  คลิกเลือก Install จะเข้าสู่หน้าจอข้อกำหนดในการติดตั้งโปรแกรม ให้เราคลิก Accept

 4. กรอก Serial Number แล้วคลิกที่ปุ่ม Next  จากนั้นจะเข้าสู่หน้า Option ของโปรแกรม ให้เลือก Installs

                                                                                                                                                                                5. รอให้โปรแกรมติดตั้งจนเสร็จ   เมื่อติดตั้งเสร็จจะปรากฏหน้าจอดังภาพ ให้เราคลิก Close

ขั้นตอนการเปิดโปรแกรม Adobe Dreamweaver CS6

 1. สำหรับ Windows7 ทำการเปิดโปรแกรม Dreamweaver CS6     โดยเข้าไปที่ เมนู Start > All Programs > Adobe Dreamweaver CS6

2. สำหรับ Windows8 ทำการเปิดโปรแกรม Dreamweaverโดยเข้าไปที่ เมนู Start > Apps > Adobe Dreamweaver CS6

3. เมื่อเปิดโปรแกรมครั้งแรกจะพบหน้าจอดังภาพ ให้คลิก Select All >> OK  จากนั้นจะเข้าสู่หน้าจอ Welcome Screen ดังรูป

 4.  จากนั้นจะเข้าสู่หน้าจอ Welcome Screen ดังรูป

Welcome Screen เป็นเครื่องมือสำหรับช่วยเลือกขั้นตอนเริ่มต้นในการใช้งานโปรแกรมโดยตัวเลือกจะแบ่งออกเป็นกลุ่มๆ ดังภาพ
           หมายเลขที่ 1 Open a Recent Item เปิดไฟล์ที่เคยใช้โดยคลิกเลือกจากรายชื่อที่แสดงอยู่ (เรียงลำดับจากที่เคยเปิดหลังสุดเป็นต้นไปหรือคลิก Open เพื่อเปิดไฟล์อื่นๆ)

           หมายเลขที่ 2 Create New สร้างไฟล์ใหม่โดยถ้าคลิก HTML จะเป็นการสร้างเว็บเพจพื้นฐานแต่ถ้าคลิกหัวข้ออื่นจะเป็นการสร้างเว็บเพจหรือไฟล์ตามชนิดนั้นๆ

           หมายเลขที่ 3 Top Features (videos) เป็นเส้นทางลัดสำหรับเข้าดูรายละเอียดและเทคนิคในการใช้งานต่างๆ ของโปรแกรมผ่านทางเว็บไซต์ของ Adobe
            หมายเลขที่ 4  เปิดดูคำแนะนำการใช้โปรแกรม
            หมายเลขที่ 5  ดาวน์โหลดโปรแกรมหรือดูข้อมูลบนเว็บไซต์ของ Adobe
            หมายเลขที่ 6  คลิกออปชั่นนี้หากไม่ต้องการแสดง Welcome Screen อีกในครั้งต่อไป