หน่วยการเรียนรู้ที่4

รจู้ ักกบั 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)

ที่มา :https://sites.google.com/site/phinsuphinya/-naeana-porkaerm-dreamweaver-cs6

1. Fluid grid layout

การออกแบบหนา้ เอกสารใหมบ่ นพ้ืนฐานของตารางท่ีสามารถนาไปใช้ได้หลากหลาย บนหน้าจอขนาดต่าง ๆ เช่น
SmartPhone Tablet หรอื PC โดยเราสามารถออกแบบครง้ั เดียว แล้วสามารถนาไปใชไ้ ด้กบั ทกุ อุปกรณ์
ทีม่ า :https://sites.google.com/site/phinsuphinya/-naeana-porkaerm-dreamweaver-cs6

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 ต่างๆ
ไดง้ ่าย ๆ

ที่มา :https://sites.google.com/site/phinsuphinya/-naeana-porkaerm-dreamweaver-cs6

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 ขึ้นไปใช้งานได้ทันที (มี
ท้งั แบบฟรีให้ทดลองใช้ และเสยี เงินเปน็ รายเดอื น)

ทีม่ า :https://sites.google.com/site/phinsuphinya/-naeana-porkaerm-dreamweaver-cs6

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 ให้ง่ายและสะดวกข้ึนมาก

ที่มา :https://sites.google.com/site/phinsuphinya/-naeana-porkaerm-dreamweaver-cs6

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)

ที่มา :https://sites.google.com/site/phinsuphinya/-naeana-porkaerm-dreamweaver-cs6

การติดตง้ั โปรแกรม Adobe Dreamweaver CS6 สามารถติดต้ังจากแผ่นซีดีหรอื ดาวนโ์ หลดจากอนิ เทอรเ์ นต็ มีข้นั ตอนการติดตง้ั ดงั น้ี
1. คลิกท่ไี อคอน
2. จะปรากฏหน้าต่าง ให้เลือกตาแหนง่ ท่ีจะติดตั้งโปรแกรม เม่ือเลอื กเสร็จแล้ว คลกิ ทีป่ ่มุ Next

ทีม่ า :https://sites.google.com/site/phinsuphinya/-naeana-porkaerm-dreamweaver-cs6

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

หมายเหตุ การตดิ ต้งั โปรแกรมในครั้งน้ี เลอื กการตดิ ตง้ั แบบ Install
ที่มา : https://sites.google.com/site/phinsuphinya/-naeana-porkaerm-dreamweaver-cs6

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

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

ทีม่ า : https://sites.google.com/site/phinsuphinya/-naeana-porkaerm-dreamweaver-cs6

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

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

ทีม่ า : https://sites.google.com/site/phinsuphinya/-naeana-porkaerm-dreamweaver-cs6

การเปิดใชง้ าน Adobe Dreamweaver CS6
เมอ่ื ต้องการเข้าส้่โู ปรแกรม Adobe Dreamweaver CS6 เพือ่ เปดิ ใช้งาน มีข้ันตอนดงั น้ี (ระบบปฏิบตั กิ าร Windows XP)

1. คลกิ ท่ีปุ่ม Start
2. คลิก Programs หรอื All Programs
3. เลือก Adobe Dreamweaver CS6
4. จะปรากฏหน้าต่าง Welcome Screen ก่อนการเขา้ ส่หู น้าโปรแกรมหลกั ซ่งึ แต่ละสว่ นมีรายละเอยี ด ดังน้ี
ทีม่ า : https://sites.google.com/site/phinsuphinya/-naeana-porkaerm-dreamweaver-cs6

การเปิดใชง้ าน Adobe Dreamweaver CS6
เมอ่ื ต้องการเข้าส้่โู ปรแกรม Adobe Dreamweaver CS6 เพือ่ เปดิ ใช้งาน มีข้ันตอนดงั น้ี (ระบบปฏิบตั กิ าร Windows XP)

1. คลกิ ท่ีปุ่ม Start
2. คลิก Programs หรอื All Programs
3. เลือก Adobe Dreamweaver CS6
4. จะปรากฏหน้าต่าง Welcome Screen ก่อนการเขา้ ส่หู น้าโปรแกรมหลกั ซ่งึ แต่ละสว่ นมีรายละเอยี ด ดังน้ี
ทีม่ า : https://sites.google.com/site/phinsuphinya/-naeana-porkaerm-dreamweaver-cs6

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

ทีม่ า : https://sites.google.com/site/phinsuphinya/-naeana-porkaerm-dreamweaver-cs6

สว่ นประกอบของโปรแกรม Adobe Dreamweaver CS6 มอี งคป์ ระกอบ ดงั น้ี
ทีม่ า : https://sites.google.com/site/phinsuphinya/-naeana-porkaerm-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เปน็ แถบท่ีประกอบด้วยปุ่มคาสงั่ ท่ีใช้ในการแทรกออบเจ็กต์ (องค์ประกอบต่าง ๆ) ลงในเว็บเพจ โดยแบ่งเป็นหมวดหมู่
ซง่ึ มรี ายละเอยี ดดังน้ี

ที่มา : https://sites.google.com/site/phinsuphinya/-naeana-porkaerm-dreamweaver-cs6

- Common เปน็ กลมุ่ เครอื่ งมอื พน้ื ฐานในการสร้างเว็บเพจ เช่น รปู ภาพ กราฟกิ ตาราง ไฟล์มีเดีย เปน็ ต้น
- Layout เป็นกลุ่มเครอ่ื งมอื ท่ีชว่ ยในการจัดองคป์ ระกอบของหน้าเว็บเพจ
- Forms เปน็ กลุม่ เคร่ืองมือทีใ่ ช้สร้างแบบฟอร์มรับขอ้ มูลจากผู้ชม เชน่ ช่องรบั ข้อความ และฟิลดช์ นิดต่าง ๆ
- Data เปน็ กลุม่ เครอ่ื งมอื ที่ใชส้ าหรบั สรา้ งหนา้ เวบ็ ติดตอ่ กบั ฐานข้อมลู
- Spry เป็นกลุ่มเคร่อื งมอื ที่ใช้ในการจัดการหนา้ เว็บเพจ โดยจะช่วยในการทางานเพิ่มเตมิ หรอื แกไ้ ขในส่วนที่
ผดิ พลาดหรือต้องการปรับเปลยี่ นใหส้ ะดวกขึ้น
- jQuery Mobile เป็นกลุ่มเครื่องมอื ที่ช่วยในการสรา้ งหน้าเวบ็ บนมอื ถอื
- InConext Editing เปน็ กลุ่มเคร่อื งมอื ทีช่ ว่ ยอานวยความสะดวกใหผ้ ใู้ ช้งานสามารถแก้ไขเวบ็ เพจได้
- Text เปน็ กลุ่มเครอื่ งมือท่ีใชจ้ ดั รปู แบบข้อความในเวบ็ เพจ
- Favorite เป็นกลุ่มเคร่อื งมือที่ใชง้ านบอ่ ย ๆ เพ่ือความสะดวกในการใชง้ าน
- Color Icons แสดงสขี องปุม่ เคร่อื งมือ
- Hide Labels ซอ่ นชอื่ เรียกของปมุ่ เครอ่ื งมือ
7. Panel Group เป็นกล่มุ หนา้ ตา่ งพาเนล ซงึ่ ชว่ ยเพิ่มความสามารถในการจัดการและออกแบบเว็บเพจ

ที่มา : https://sites.google.com/site/phinsuphinya/-naeana-porkaerm-dreamweaver-cs6

เมื่อเปิดใชง้ านโปรแกรมเสร็จแล้ว ต้องการทจ่ี ะปิดหรอื ออกจากโปรแกรม สามารถทาไดห้ ลาย ๆ วิธี ดงั นี้
1. คลกิ ทปี่ ุม่ Close บน Control Box ดังรปู

2.คลิกเลือกทป่ี ุม่ บนไตเติ้ลบาร์ แล้วทาการเลอื กคาสง่ั Close ดงั รปู

3. คลกิ เลือกที่เมนู File >> Exit ดงั รูป หรอื ใชแ้ ป้นคยี ล์ ัด Ctrl + Q

*** เมื่อสง่ั ปดิ โปรแกรมแต่ยังมไี ฟลง์ านใด ๆ ยงั ไมท่ าการบนั ทกึ จะมลี ักษณะดังรปู คอื มเี ครือ่ งหมาย (*)ตอ่ ท้ายชือ่ ไฟล์ โปรแกรมจะเตอื นใหท้ าการบันทึก ใหท้ าการ
บนั ทึกให้เรยี บร้อย

ทีม่ า : https://krusriwan.com/data/dreamtopic2-2.html