2.1 แนะน ำโปรแกรม Adobe 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)

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

ควำมสำมำรถใหม่ของ Adobe Dreamweaver CS6 1. Fluid grid layout

รูปที่ 2.1 แสดง Fluid grid layout ที่มา : http://www.kruwan-d.info/chapter2.html สืบค้นเมื่อวันที่ 9 มกราคม 2558.

การออกแบบหน้าเอกสารใหม่บนพ้ืนฐานของตารางที่สามารถน าไปใช้ได้หลากหลาย บนหน้าจอขนาดต่าง ๆ เช่น SmartPhone Tablet หรือ PC โดยเราสามารถออกแบบครั้งเดียว แล้วสามารถน าไปใช้ได้กับทุกอุปกรณ ์ 2. JQuery Mobile Framework updates

รูปที่ 2.2 แสดง JQuery Mobile Framework updates ที่มา : http://www.kruwan-d.info/chapter2.html สืบค้นเมื่อวันที่ 9 มกราคม 2560.

JQuery Mobile Framework เข้ามาใน Adobe Dreamweaver CS5.5 ในเวอร์ชั่นนี้ได้มีการเพ่ิมส่วนช่วยในการท างานกับ JQuery Mobile Framework ได้สะดวกขึ้นไปอีก เช่น การน า Theme ที่ออกแบบด้วย Adobe Firework CS6 มาเลือกใช้กับ Mobile Web project และ การเลือกก าหนด icon ต่าง ๆ ให้กับ button เป็นต้น

3. Adobe PhoneGap Build integration

รูปที่ 2.3 แสดง Adobe PhoneGap Build integration ที่มา : http://www.kruwan-d.info/chapter2.html สืบค้นเมื่อวันที่ 9 มกราคม 2558.

ส าหรับใน Adobe Dreamweaver CS6 ได้เพ่ิมส่วนของการท างานกับ PhoneGap Build เข้าไป ท าให้คุณสามารถที่จะน า Mobile project ที่ท าอยู่ขึ้นไปบนระบบ online service ของ PhoneGap Build ให้ท าการ compile ออกมาเป็นไฟล์ mobile application บน platform ต่างๆ ได้ง่าย ๆ

4. CSS3 Transition

รูปที่ 2.4 แสดง CSS3 Transition ที่มา : http://www.kruwan-d.info/chapter2.html สืบค้นเมื่อวันที่ 9 มกราคม 2558.

ความสามารถของ CSS3 นั้นเริ่มปรากฏออกมาให้เห็นมากข้ึนเรื่อย ๆ ทั้งเรื่อง Web Font หรือการท า animation ของ HTML Element ก็สามารถท าได้อย่างน่าประทับใจ Adobe Dreamweaver

CS6 ได้เพ่ิมส่วน User Interface ให้คุณสามารถก าหนด CSS3 Transition ให้กับ element ได้ตามที่คุณต้องการ ลดขั้นตอนการเขียน code CSS ด้วยตนเอง ประหยัดเวลาและได้งานสวย ๆ ที่มีคุณภาพและน่าประทับใจ 5. Integrate with Adobe Business Catalyst

รูปที่ 2.5 แสดง Integrate with Adobe Business Catalyst ที่มา : http://www.kruwan-d.info/chapter2.html สืบค้นเมื่อวันที่ 9 มกราคม 2558.

หากคุณยังไม่รู้จัก 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

รูปที่ 2.6 แสดง Web Font Management ที่มา : http://www.kruwan-d.info/chapter2.html สืบค้นเมื่อวันที่ 9 มกราคม 2558.

Adobe Dreamweaver CS6 ได้มีส่วนของการจัดการ Web Font ท าให้ปัญหาเรื่องฟอนต์ในเครื่องผู้ชมสามารถแสดงตัวอักษรบนหน้าเว็บได้ถูกต้อง

7. CSS Multiple Classes selection

รูปที่ 2.7 แสดง CSS Multiple Classes selection ที่มา : http://www.kruwan-d.info/chapter2.html สืบค้นเมื่อวันที่ 9 มกราคม 2558.

การเลือกใส่ CSS Class ให้ HTML Element ใน Adobe Dreamweaver รุ่นก่อนๆ ไม่สามารถท าได้อย่างสะดวกนัก ต้องอาศัยความรอบคอบ แต่ใน Adobe Dreamweaver CS6 ได้มีการเพ่ิมส่วนในการจัดการ CSS Multiple Class ให้ง่ายและสะดวกข้ึนมาก

2.2 ควำมต้องกำรที่เหมำะสมกับโปรแกรม Adobe Dreamweaver CS6 คุณสมบัติของเครื่องคอมพิวเตอร์ก่อนติดตั้งโปรแกรม 1. หน่วยประมวลผลกลาง (CPU) ไม่น้อยกว่า Intel Pentium4 หรือ AMD Athlon 64 2. หน่วยความจ า (RAM) ไม่น้อยกว่า 512 MB (แนะน า 1 GB) 3. เนื้อท่ีว่าง (Hard disk) ไม่น้อยกว่า 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.8 แสดงไอคอนโปรแกรม Adobe Dreamweaver CS6 ที่มา : http://www.kruwan-d.info/chapter2.html สืบค้นเมื่อวันที่ 9 มกราคม 2558.

2. จะปรากฏหน้าต่าง ให้เลือกต าแหน่งที่จะติดตั้งโปรแกรม เมื่อเลือกเสร็จแล้ว คลิกที่ปุ่ม Next

รูปที่ 2.9 แสดงการเลือกต าแหน่งที่จะติดตั้งโปรแกรม Adobe Dreamweaver CS6 ที่มา : http://www.kruwan-d.info/chapter2.html สืบค้นเมื่อวันที่ 9 มกราคม 2558.

3. จะปรากฏหน้าต่าง การติดตั้งโปรแกรม ซึ่งแบ่งออกเป็น 2 แบบ คือ - Install ต้องมี Serial Number เพ่ือใช้ติดตั้งโปรแกรม - Try เป็นโปรแกรมส าหรับทดลองใช้ 30 วัน

รูปที่ 2.10 แสดงรูปแบบการติดตั้งโปรแกรม Adobe Dreamweaver CS6 ที่มา : http://www.kruwan-d.info/chapter2.html สืบค้นเมื่อวันที่ 9 มกราคม 2558.

หมำยเหตุ การติดตั้งโปรแกรมในครั้งนี้ เลือกการติดตั้งแบบ Install

4. จะปรากฏหน้าต่าง แสดงลิขสิทธิ์เกี่ยวกับโปรแกรม ให้คลิกที่ปุ่ม Accept

รูปที่ 2.11 แสดงลิขสิทธิ์เกี่ยวกับโปรแกรม ที่มา : http://www.kruwan-d.info/chapter2.html สืบค้นเมื่อวันที่ 9 มกราคม 2558.

5. จะปรากฏหน้าต่าง ให้ใส่ Serial Number จากนั้นให้คลิกที่ปุ่ม Next

รูปที่ 2.12 แสดงการก าหนด Serial Number ที่มา : http://www.kruwan-d.info/chapter2.html สืบค้นเมื่อวันที่ 9 มกราคม 2558.

6. จะปรากฏหน้าต่าง Options เพ่ือเลือกโปรแกรมในการติดตั้ง ดังนี้

รูปที่ 2.13 แสดงการเลือกโปรแกรมการติดตั้ง ที่มา : http://www.kruwan-d.info/chapter2.html สืบค้นเมื่อวันที่ 9 มกราคม 2558.

- เลือกโปรแกรม Adobe Dreamweaver CS6 เพ่ือติดตั้งโปรแกรม - ช่อง Language เพ่ือเลือกภาษาในการติดตั้งโปรแกรม - ช่อง Location เพ่ือเลือกต าแหน่งในการติดตั้งโปรแกรม โดยการติดตั้งอัตโนมัติ จะถูกติดตั้งที่ต าแหน่ง C:\Program Files\Adobe (สามารถเปลี่ยนต าแหน่งในการติดตั้งได้) - เมื่อก าหนด Options ต่าง ๆ เสร็จแล้ว ให้คลิกที่ปุ่ม Install 7. จะปรากฏหน้าต่าง ก าลังติดตั้งโปรแกรม เมื่อติดตั้งโปรแกรมเสร็จเรียบร้อย ให้คลิกที่ปุ่ม Close

รูปที่ 2.14 แสดงการติดตั้งโปรแกรม ที่มา : http://www.kruwan-d.info/chapter2.html สืบค้นเมื่อวันที่ 9 มกราคม 2558.

2.3 กำรเปิดใช้งำน Adobe Dreamweaver CS6 เมื่อต้องการเข้าสู่โปรแกรม Adobe Dreamweaver CS6 เพ่ือเปิดใช้งาน มีข้ันตอนดังนี้

รูปที่ 2.15 แสดงขั้นตอนการเข้าสู่การใช้งานโปรแกรม Adobe Dreamweaver CS6 ที่มา : http://www.kruya.in.th/DreamCS6/lesson1_3.html สืบค้นเมื่อวันที่ 9 มกราคม 2558.

1. คลิกท่ีปุ่ม Start 2. คลิก Programs หรือ All Programs 3. เลือก Adobe Dreamweaver CS6 4. จะปรากฏหน้าต่าง Welcome Screen ก่อนการเข้าสู่หน้าโปรแกรมหลัก ซึ่งแต่ละส่วนมีรายละเอียด ดังนี้

รูปที่ 2.16 แสดงหน้า Welcome Screen ที่มา : http://www.kruwan-d.info/chapter2.html สืบค้นเมื่อวันที่ 9 มกราคม 2558.

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 ดูวีดิโอสาธิตการใช้งาน

2.4 ส่วนประกอบของ Adobe Dreamweaver CS6 ส่วนประกอบของโปรแกรม Adobe Dreamweaver CS6 มีองค์ประกอบ ดังนี้ แถบเมนู (Menu bar) เป็นถบที่ใช้เก็บค าสั่งทั้งหมดของโปรแกรม

แถบสถำนะ (Status bar) แถบสถานะของ Dreamweaver จะแสดงข้อมูลเพ่ิมเกี่ยวกับงานที่เรากาลังทา ซึ่งมีส่วนประกอบต่าง ๆ ดังนี้

แถบค าสั่ง (Toobar) รวบรวมปุ่มค าสั่งที่ใช้งานบ่อย

พาเนลเครื่องมือ (Insert panel) เป็นพาเนลที่รวบรวมเครื่องมือต่าง ๆ ในการสร้างเว็บ

กลุ่มหน้าต่างพาเนล (Panel Group) ที่ช่วยเพ่ิมความสามารถในการจัดการและออกแบบหน้าเว็บของเรา

หน้าต่ างออกแบบหน้า เว็บ (Document Window) เป็นพื้นที่สาหรับสร้างหน้าเว็บ

แถบสถานนะ (Status bar) แสดงข้อมูลเพิ่มเติมเกี่ยวกับงานท่ีกาลังทา

พาเนลคุณสมบัติ (Property Inspector) จะแสดงค่าในการปรับแต่งองค์ประกอบต่าง ๆ บนหน้าเว็บได้

เครื่องมือปรับการแสดงผล ขนาดหน้าเว็บและเวลาที่ใช้ในการโหลด

ส่วนเลือกแท็ก HTML (Tag Selector) จะแสดงแท็ก HTMl ของต าแหน่งที่เราคลิกเลือกบนหน้าเว็บ เช่น เราคลิกเลือกตาราง ก็จะแสดงแท็ก <table> ซึ่งจะมีประโยชน์มากในการเลือกจุดแก้ไข เพราะสามารถเลือกจุดหรือแท็กที่ต้องการได้อย่างแม่นย า

เครื่องมือปรับกำรแสดงผล Zoom Tool ใช้ส าหรับย่อขยายหน้าเว็บให้เห็นรายละเอียดชัดขึ้นหรือใช้ Hand Tool เลื่อนดูหน้าเว็บในส่วนที่มองไม่เห็น

ขนำดหน้ำต่ำงแสดงผล (Window Size) จะแสดงหน้าต่างขนาดต่าง ๆ เช่น มือถือ แท็บแล็ต คอมพิวเตอร์ที่ใช้ในการแสดงผลหน้าเว็บ

ขนำดของหน้ำเว็บและเวลำที่ใช้ในกำรโหลด จะแสดงเวลา โดยประมาณ ที่ใช้ในการโหลดหน้าเว็บที่เราสร้าง โดยถ้าหน้าที่เราสร้างมีขนาดใหญ่เพราะมีข้อความและรูปภาพจานวนมาก ก็จะทาให้ต้องใช้เวลาโหลดนาน โดยเริ่มแรก Dreamweaver จะแสดงเวลานี้โดยอ้างอิงกับโมเด็มความเร็ว 384K ซึ่งสามารถเปลี่ยนค่านี้ได้ในเมนู Edit > Preferences หัวข้อ Window Size ที่ช่องคาสั่ง Connection speed

รองรับกำรทำงำนหลำยภำษำ จะแสดงการทางานหลายภาษาเพ่ือรองรับการแสดงหลายภาษา บนหน้าเว็บเดียวกัน พำเนลเครื่องมือ (Insert panel) เป็นเครื่องมือที่ใช้ส าหรับสร้างองค์ประกอบต่าง ๆ เราเรียกองค์ประกอบเหล่านี้ว่า ออบเจ็กต์ ที่จะนามาสร้างเป็นหน้าเว็บ โดยเครื่องมือจะถูกเก็บไว้เป็นกลุ่มในแท็บต่าง ๆ 9 แท็บ ดังนี้

พำเนลคุณสมบัติ (Property Inspector) เมื่อใดที่เราคลิกเลือกภาพหรือองค์ประกอบต่าง ๆ บนหน้าเว็บ จะปรากฏ Property Inspectorที่แสดงค่าต่าง ๆ ให้เราปรับแต่งคุณสมบัติที่เกี่ยวข้องกับองค์ประกอบนั้น ๆ ได้ กลุ่มหน้ำต่ำงพำเนล (Panel Group)

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

2.5 มุมมองในกำรทำงำนใน Dreamweaver CS6 ใน Dreamweaver สามารถเลือกมุมมองการท างานได้หลายรูปแบบ ให้เราเลือกใช้ได้ตามความถนัดของแต่ละบุคคล โดยคลิกที่ไอคอนบริเวณแถบค าสั่ง ดังนี้

ปุ่มค าสั่ง Code จะปรากฏมุมมองแสดงโค้ด HTML หรือสคริปต์ต่าง ๆ เหมาะส าหรับผู้ที่สามารถเขียนโค้ด HTML หรือสคริปต์ต่าง ๆ ได ้

ปุ่มคาสั่ง Split จะปรากฏมุมมองแสดงและมุมมองออกแบบ เหมาะส าหรับผู้ที่ต้องการแก้ไขโค้ด พร้อมดูผลการแก้ไขในมุมมองการออกแบบไปพร้อม ๆ กัน

ปุ่มค าสั่ง Design จะปรากฏมุมมองออกแบบ เหมาะส าหรับผู้ที่ต้องการออกแบบหน้าเว็บ โดยไม่ยุ่งเกี่ยวกับโค้ดเลย

ปุ่มค าสั่ง Live จะแสดงตัวอย่างหน้าเว็บเหมือนดูจากบราวเซอร์ เราจะดูได้อย่างเดียว ไม่สามารถแก้ไขหน้าเว็บได้ เราสามารถใช้ปุ่ม Live ร่วมกับปุ่ม Code ,Split และ Design ได้ โดยในการดูหน้าเว็บแบบ Live จะเหมือนเราเปิดดูหน้าเว็บจากบราวเซอร์จริงแต่จะไม่สามารถแก้ไขหน้าเว็บขณะนั้นได้ต้องยกเลิกปุ่ม Live ก่อน

ปุ่มค าสั่ง Live Code จะแสดงโค้ดและหน้าเว็บเหมือนดูจากเว็บบราวเซอร์ เราจะใช้มุมมองนี้ก็ต่อเมื่ออยู่ในมุมมอง Live ก่อนเท่านั้น

เลือกเมนูค าสั่ง Window แล้วเลือกพาเนลต่าง ๆท่ีเราจะใช้งาน กลุ่มหน้าต่างพาเนลท่ีเราเลือกเปิดขึ้นมาใช้งาน