ใบความรู้ แนะนาโปรแกรม Adobe Dreamweaver CS6 # รู้ จกั กับ 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
การเลือกใส่ 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)
# การติดตั้งโปรแกรม Adobe Dreamweaver CS6 การติดตั้งโปรแกรม Adobe Dreamweaver CS6 สามารถติดตั้งจากแผ่นซีดีหรื อดาวน์โหลดจากอินเทอร์เน็ต มีข้นั ตอนการติดตั้ง ดังนี้
1.ดาวน์โหลดที่ https://helpx.adobe.com/x-productkb/policy-pricing/cs6-product-downloads.html 2.จะปรากฏหน้าต่าง Welcome ต้อนรับการติดตั้งโปรแกรม จะมีให้เลือกการติดตั้ง 2 แบบคือ o Install เป็ นการติดตั้งแบบมีลิขสิ ทธิ์ จะต้องมี Serial Number o Try เป็ นการติดตั้งแบบทดลองใช้งานโปรแกรม 30 วัน ในการติดตั้งครั้งนี้ให้เลือกแบบ Try
3.คลิกเลือก Try
4.เลือก Sign In
5.เลือก Sign In Laster
6.คลิกเลือกภาษาเป็ น English (International) เสร็ จแล้ว คลิก Accept
7.คลิก Install
8.รอการติดตั้ง
9.คลิก Launch Now
10.คลิก X เพื่อปิ ดหน้าต่าง
การเปิ ดใช้งาน Adobe Dreamweaver CS6 เมื่อต้องการเข้าสู่ โปรแกรม Adobe Dreamweaver CS6 เพื่อเปิ ด ใช้งาน มีข้นั ตอนดังนี้ 1.คลิกที่ปุ่ม Start 2.คลิก Programs หรื อ All Programs คลิก Adobe Master Collection CS6 3.เลือก Adobe Dreamweaver CS6
4.ในการเปิ ดโปรแกรม Adobe Dreamweaver CS6 ครั้งแรก จะปรากฏหน้าต่าง Default Editor คลิก OK
5.จะปรากฏหน้าต่าง 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 มีองค์ ประกอบ ดังนี้
1.Document Windows เป็ นพื้นที่สาหรับสร้างหน้าเว็บเพจ และสามารถเลือกพื้นที่การทางานได้หลาย มุมมอง เช่น o Code View สาหรับแสดงการทางานในรู ปแบบ HTML นอกจากนี้ยงั สามารถเขียนคาสัง่ HTML หรื อคาสัง่ ภาษาสคริ ปต์ (Script) อื่น ๆ ได้ดว้ ย
o Code and Design สาหรับแสดงการทางานแบบ HTML กับการแสดงพื้นที่ออกแบบ โดยด้านบนจะ แสดงส่ วนของคาสัง่ และด้านล่างแสดงเว็บเพจปกติไว้ o Design View สาหรับแสดงเว็บเพจคล้ายกับที่เราเห็นในบราวเซอร์ เช่น ข้อความ กราฟิ ก หรื อออป เจ็กต์อื่น ๆ และสามารถแก้ไขเนื้อหาลงเว็บเพจได้ 2.Menu bar เป็ นแถบรวบรวมคาสัง่ ทั้งหมดของโปรแกรม 3.Toolbar เป็ นแถบรวบรวมคาสัง่ ที่ใช้งานบ่อย ๆ o Code สาหรับแสดงการทางานในรู ปแบบ HTML นอกจากนี้ยงั สามารถเขียนคาสัง่ HTML หรื อ คาสัง่ ภาษาสคริ ปต์ (Script) อื่นๆ ได้ดว้ ย o Split สาหรับแสดงการทางานแบบ HTML กับการแสดงพื้นที่ออกแบบ โดยจะแสดงส่ วนของคาสัง่ ไว้ดา้ นบนและแสดงเว็บเพจปกติไว้ ด้านล่าง o Design สาหรับแสดงเว็บเพจคล้ายกับที่เราเห็นในบราวเซอร์ เช่น ข้อความ กราฟิ กหรื อออปเจ็กต์อื่น ๆ และสามารถแก้ไขเนื้อหาลงเว็บเพจได้ o Title สาหรับแสดงชื่อของเว็บเพจ ในส่ วนของแถบหัวเรื่ อง 4.Insert Bar เป็ นแถบที่ประกอบด้วยปุ่ มคาสัง่ ที่ใช้ในการแทรกออปเจ็กต์ (องค์ประกอบต่าง ๆ) ลงในเว็บเพจ โดยแบ่งเป็ นหมวดหมู่ซ่ ึงมีรายละเอียดดังนี้
o Common เป็ นกลุ่มเครื่ องมือพื้นฐานในการสร้างเว็บเพจ เช่น รู ปภาพ กราฟิ ก ตาราง ไฟล์มีเดีย เป็ น ต้น o Layout เป็ นกลุ่มเครื่ องมือที่ช่วยในการจัดองค์ประกอบของหน้าเว็บเพจ o Forms เป็ นกลุ่มเครื่ องมือที่ใช้สร้างแบบฟอร์มรับข้อมูลจากผูช้ ม เช่น ช่องรับข้อความและฟิ ลด์ชนิด ต่าง ๆ o Data เป็ นกลุ่มเครื่ องมือที่ใช้สาหรับสร้างหน้าเว็บติดต่อกับฐานข้อมูล o Spry เป็ นกลุ่มเครื่ องมือที่ใช้ในการจัดการหน้าเว็บเพจ โดยจะช่วยในการทางานเพิ่มเติมหรื อแก้ไข ในส่ วนที่ผดิ พลาดหรื อต้องการปรับเปลี่ยนให้สะดวกขึ้น o jQuery Mobile เป็ นกลุ่มเครื่ องมือที่ช่วยในการสร้างหน้าเว็บบนมือถือ o InConext Editing เป็ นกลุ่มเครื่ องมือที่ช่วยอานวยความสะดวกให้ผใู ้ ช้งานสามารถแก้ไขเว็บเพจ o Text เป็ นกลุ่มเครื่ องมือที่ใช้จดั รู ปแบบข้อความในเว็บเพจ o Favorite เป็ นกลุ่มเครื่ องมือที่ใช้งานบ่อย ๆ เพื่อความสะดวกในการใช้งาน o Color Icons แสดงสี ของปุ่ มเครื่ องมือ o Hide Labels ซ่อนชื่อเรี ยกของปุ่ มเครื่ องมือ 5.Status bar เป็ นแถบแสดงสถานะ ซึ่งประกอบด้วย 2 ส่วน คือ ทางด้านซ้ายเรี ยกว่า Tag Selector ใช้สาหรับ แสดงคาสัง่ HTML ของส่ วนประกอบในเว็บเพจที่เลือกอยู่ และทางด้านขวาเป็ นส่วนที่บอกขนาดหน้าจอ การแสดงผลและเวลาที่ใช้ในการดาวน์โหลดเว็บเพจ 6.Properties Inspector เป็ นส่ วนที่กาหนดคุณสมบัติต่าง ๆ ในการปรับแต่งองค์ประกอบของหน้าเว็บเพจ 7.Panel Group เป็ นกลุ่มหน้าต่างพาเนล ซึ่งช่วยเพิ่มความสามารถในการจัดการและออกแบบ เว็บเพจ