DreamCS6

คาํ นํา หนังสือเล่มนีข้ ้าพเจ้าจัดทําขึน้ เพื่อเป็นสื่อการเรียนการสอนในวิชาคอมพิวเตอร์ เรื่อง การสร้ างเว็บไซต์ด้วยโปรแกรม Adobe Dreamweaver CS6 ในเอกสารเล่มนีไ้ ด้ กล่าวถึง พืน้ ฐานการใช้โปรแกรม เร่ิมต้นใช้โปรแกรม และส่วนประกอบของโปรแกรม Adobe Dreamweaver CS6 ซงึ่ จะเป็นประโยชน์สาํ หรับผ้ทู ี่เร่ิมต้นในการใช้โปรแกรม ข้าพเจ้าหวงั เป็นอย่างยิ่งว่า หนงั สือเล่มนีจ้ ะมีประโยชน์สําหรับผ้ทู ่ีสนใจในการเริ่ม สร้างเวบ็ ไซต์ และสาํ หรับผ้ทู ่ีอยากเรียนรู้เกี่ยวกบั โปรแกรม Adobe Dreamweaver CS6 นายยรุ นนั ท์ ศรีสรุ ะ

สารบญั หน้า เร่ือง 1 6 พนื้ ฐานการใช้โปรแกรม 13 เร่ิมต้นใช้โปรแกรม ส่วนประกอบของหน้าจอโปรแกรม

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) 1

ความสามารถใหมข่ อง 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 เป็นต้น 2

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 ด้วยตนเอง ประหยดั เวลาและได้งานสวย ๆ ที่มีคณุ ภาพและน่าประทบั ใจ 3

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 ทาํ ให้ปัญหาเรอ่ื งฟอนตใ์ นเครอ่ื งผชู้ ม สามารถแสดงตวั อกั ษรบนหน้าเวบ็ ได้ถกู ต้อง 4

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

ริ่มต้นใช้งานโปรแกรม Adobe Dreamweaver CS6 Adobe Dreamweaver Cs6 Adobe Dreamweaver CS6 เป็นโปรแกรมสาํ เรจ็ รปู ท่ีใช้สาํ หรบั สรา้ งเวบ็ ไซต์ เหมาะสาํ หรบั นักพฒั นา เวบ็ ไซตต์ งั้ แต่มอื ใหมไ่ ปจนถึงมอื อาชีพโดยสามารถนําข้อความและภาพมาประกอบเป็นหน้าเวบ็ เพจได้อย่างงา่ ย ๆ และสามารถเพิ่มลกู เล่นทางด้านมลั ติมีเดียตลอดจนการติดต่อกบั ฐานข้อมลู ท่ีทาํ ได้งา่ ยนอกจากนี้ Adobe Dreamweaver CS6 ยงั เป็นโปรแกรมประเภท WYSIWYG อ่านว่า \"วิซชีวิก,, (What You See Is What You Get) แปลว่า คณุ เหน็ อยา่ งไรคณุ กไ็ ด้รบั อย่างนัน้ หมายความว่าลกั ษณะข้อความ การวางภาพกราฟิ ก บนเวบ็ เพจทาํ ไว้อยา่ งไร เมอ่ื ทาํ การแสดงผล บนบราวเซอรแ์ ล้ว ลกั ษณะของข้อความหรอื ภาพกราฟิ กท่ีได้กจ็ ะเหมือนกนั ที่ทาํ ไว้ 1.1 การติดตงั้ โปรแกรม Adobe Dreamweaver CS6 ความต้องการของระบบ การติดตงั้ โปรแกรม Adobe Dreamweaver CS6 บนระบบปฏิบตั ิการ Windows ให้ สามารถใช้งานได้นัน้ จะต้องมีองคป์ ระกอบของฮารด์ แวรแ์ ละระบบปฏิบตั ิการดงั นัน้ 1. หน่วยประมวลผลกลาง (CPU) Intel Pentium 4 หรอื AMD Athlon 64 2. หน่วยความจาํ (RAM) 512 MB ขึน้ ไปฮารด์ ดิสกม์ ีพืน้ ท่ีว่าง 1 GB ขึน้ ไป 3. ความละเอียดของจอภาพไมน่ ้อยกว่า 1024 X 576 พกั เซล และการด์ จอสนับสนุนการแสดงผลแบบ 16 bit 4. ไดร์ DVD ROM 5. ระบบปฏิบตั ิการไมต่ า่ํ กว่า Windows XP (SP3) การติดตงั้ โปรแกรม Adobe Dreamweaver CS6 มีขนั้ ตอนการติดตงั้ 6

7

8

9

การเปิ ดและออกจากโปรแกรม Adobe Dreamweaver CS6 การเปิ ดโปรแกรม Adobe Dreamweaver CS6 เมอ่ื ติดตงั้ โปรแกรม Adobe Dreamweaver CS6 เรยี บรอ้ ยแล้ว สามารถเปิ ดใช้งานโปรแกรมได้ทนั ที มีขนั้ ตอน 10

11

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 การออกจากโปรแกรม สามารถทาํ ได้ 2 วิธีดงั นี้ 12

ส่วนประกอบหน้าจอโปรแกรม Adobe Dreamweaver CS6 Adobe Dreamweaver Cs6 เมื่อเปิ ดโปรแกรมAdob4e Dreamweaver แล้วจะได้หน้าต่างโปรแกรมซึ่งมีส่วนประกอบหลกั ดงั นี้ Menu bar Menu bar เป็นที่รวมคาํ สงั่ ทงั้ หมดของโปรแกรม Dreamweaver ที่ใช้ในการจดั การกบั ไฟล์ เวบ็ เพจประกอบด้วยเมนูแสดงนี้ Menu bar ประกอบด้วยเมนูย่อย ดงั นี้ 1. File เป็นเมนูคาํ สงั่ สาํ หรบั จดั การกบั ไฟลเ์ วบ็ เพจ เช่น สรา้ งเวบ็ เพจใหม่ บนั ทึกเวบ็ เพจ เปิ ดเวบ็ เพจ แสดงเวบ็ เพจผ่านบราวเซอร์ หรอื ออกจากโปรแกรม เป็นต้น 2. Edit เป็นเมนูคาํ สงั่ สาํ หรบั การแก้ไข เช่น คดั ลอก ตดั วาง ค้นหา รวมถงึ การ ตงั้ ค่าการทาํ งาน (Preference) ต่าง ๆ เป็นต้น 3. View เป็นเมนูคาํ สงั่ สาํ หรบั ปรบั เปลี่ยนมมุ มองของเวบ็ เพจขณะทาํ งาน 4. Insert เป็นเมนูคาํ สงั่ สาํ หรบั แทรกวตั ถตุ ่าง ๆ เช่น รปู ภาพ เสียง ตาราง ฟอรม์ ต่าง ๆ ลงบนเวบ็ เพจ เป็น ต้น 5. Modify เป็นเมนูคาํ สงั่ สาํ หรบั แก้ไขวตั ถตุ ่าง ๆ บนเวบ็ เพจ เช่น การแก้ไข รปู แบบตวั อกั ษร การแก้ไข รปู ภาพ การจดั การตาราง หรือการกาํ หนดคณุ สมบตั ิของเวบ็ เพจ เป็นต้น 13

6. Format เป็นเมนูคาํ สงั่ สาํ หรบั เปล่ียนรปู แบบโดยรวมของข้อความบนเวบ็ เพจ เช่น การจดั รปู แบบ ข้อความ การสรา้ งหวั ข้อรายการ เป็นต้น 7. Command เป็นเมนูคาํ สงั่ สาํ หรบั จดั การกบั ชดุ คาํ สงั่ ต่าง ๆ บนเวบ็ เพจที่ทาํ งานอยู่ 8. Site เป็นเมนูคาํ สงั่ สาํ หรบั จดั การกบั Site เช่น สรา้ ง Site หรอื แก้ไข Site ท่ีทาํ งานรวมถึงการตรวจสอบ ลิงคต์ ่าง ๆ ใน Site เป็นต้น 9. Window เป็นเมนูที่ใช้ในการเปิ ดหรอื ปิ ดพาแนลท่ีทาํ งานอยู่ 10. Help เป็นเมนูที่ใช้ในการขอความช่วยเหลือผา่ นเวบ็ ไซต์ Adobe Toolbar Toolbar เป็นแถบเครอ่ื งมือท่ีใช้รวมป่ มุ คาํ สงั่ ที่จาํ เป็นต้องใช้งานเป็นประจาํ สามารถ เปิ ด/ปิ ดการใช้งานได้ Toolbars ประกอบด้วยแถบเครอื่ งมอื ดงั นี้ 1.Document Toolbar เป็นทลู บารท์ ี่ประกอบไปด้วยป่ มุ คาํ สงั่ ในการกาํ หนดมมุ มองการแสดงเวบ็ เพจ การ แสดงความละเอียดของหน้าเวบ็ เพจ การโอนยา้ ยไฟล์ หรอื การกาํ หนดคาํ อธิบายเวบ็ เพจ 2. Standard Toolbar เป็นทลู บารท์ ี่ประกอบไปด้วยป่ มุ คาํ สงั่ พืน้ ฐาน ท่ีใช้ในการจดั การไฟล์ เช่น การสรา้ ง ไฟล์ บนั ทึกไฟล์ เปิ ดไฟล์ คดั ลอก ย้าย หรอื วางเนื้อหาตลอดจนการยกเลิกหรอื ทาํ ซา้ํ คาํ สงั่ 3. Style Rendering Toolbar เป็นทลู บารท์ ี่ออกแบบมาเพื่อให้แสดงการทาํ งานของหน้าเวบ็ เพจที่ใช้ Style Sheet บนมีเดียประเภทต่าง ๆ เช่น บนหน้าจอคอมพิวเตอร์ บนเครอื่ งพิมพ์ บนโปรเจค็ เตอร์ บนทีวี การเพิ่ม/ลด ขนาดตวั อกั ษรตลอดจนการแสดงสีของสถานการณ์ เช่ือมโยง 4. Application bar เป็นแถบประยกุ ต์ ประกอบด้วยแถบเครอื่ งมอื Application bar ประกอบด้วย สาํ หรบั เลือกรปู แบบการแสดงพืน้ ที่สาํ หรบั สรา้ งหน้าเวบ็ เพจเช่น Code Split หรอื Design เป็นต้น สาํ หรบั ค้นหา และติดตงั้ โปรแกรมเสริม สาํ หรบั บริหารจดั การไซต์ เช่น สรา้ งไซตใ์ หม่ 5. Workspace switcher เป็นป่ มุ สาํ หรบั เปลี่ยนมมุ มองพืน้ ท่ีทาํ งาน (Workspace) โดยสามารถเลือกได้ว่าต้องการใช้งานรปู แบบในลกั ษณะ ใด ซึ่งใน Adobe Dreamweaver CS6 มีให้เลือกใช้ 11 แบบ 14

6. Insert panelเป็นพาแนลท่ีรวบรวมกล่มุ คาํ สงั่ ท่ีใช้สาํ หรบั สรา้ งและแทรกออบเจค็ ต่าง ๆ แบง่ ออกเป็น กล่มุ โดยจะ เพื่อให้ใช้งานได้สะดวก วิธีเรียกใช้ คลิกเมนู Window > Insert ตวั อยา่ งกล่มุ คาํ สงั่ ท่ีใช้งาน Common เป็นกล่มุ คาํ สงั่ สาํ หรบั วางออบเจค็ ท่ีต้องใช้งานเป็น ประจาํ เช่น รปู ภาพ ตาราง ไฟล์ มลั ติมีเดีย หรอื ลิงค์ เป็นต้น Layout เป็นกล่มุ คาํ สงั่ สาํ หรบั วางออบเจค็ ท่ีใช้จดั หน้าเวบ็ เพจ เช่น AP Element หรอื ตาราง เป็นต้น 15

Forms เป็นกล่มุ คาํ สงั่ สาํ หรบั วางออบเจค็ ท่ีเป็นฟอรม์ รบั ข้อมลู Text เป็นกล่มุ คาํ สงั่ สาํ หรบั จดั รปู แบบ ข้อความ เช่นทาํ ตวั หนา เอียง หรอื ใส่listรายการ รวมทงั้ แทรกสญั ลกั ษณ์พิเศษต่าง ๆ Data เป็นกล่มุ คาํ สงั่ สาํ หรบั จดั การฐานข้อมลู และดึงข้อมลู จากฐานข้อมลู มาแสดงบนเวบ็ เพจ 7. กล่มุ พาแนลการทาํ งาน (Panel Group) เป็นพาแนลหน้าต่างขนาดเลก็ ท่ีรวบรวมเครอ่ื งมือไว้เป็นกล่มุ ตามหน้าท่ี สาํ หรบั ใช้งาน เฉพาะเรอ่ื งไว้โดย สามารถเปิ ดหรอื ปิ ดพาแนลการทาํ งานได้โดยคลิกเมนูคาํ สงั่ Window แล้วคลิกเลือกพาแนลที่ต้องการ 16

การเปิ ดหรอื ปิ ดพาแนลการทาํ งาน CSS Styles Panel เป็นพาแนลที่ใช้ สาํ หรบั จดั การกบั สไตล์ CSS เช่น การสรา้ ง การ แก้ไข การลบหรอื การกาํ หนดคณุ สมบตั ิ ต่างๆของ CSS File Panel เป็นพาแนลท่ีใช้สาํ หรบั จดั การ กบั ไฟล์ เวบ็ เพจ ทงั้ ไฟลร์ ปู ภาพ ไฟล์ HTML ไฟล์ มลั ติมีเดีย และโฟลเดอรภ์ ายในเวบ็ ไซต์ หรอื สามารถทดสอบการ ทาํ งานของเวบ็ เพจผา่ นเซิรฟ์ เวอรไ์ ด้ 17

Database panel เป็นพาแนลท่ีใช้สาํ หรบั สรา้ งและจดั การให้เวบ็ เพจสามารถ เช่ือมต่อกบั ฐานข้อมลู 18

การแสดงและซ่อนพาแนลทงั้ หมด การซ่อนพาแนลทงั้ หมดทาํ ได้โดยคลิกท่ีเมนู Window >Hide Panels หรอื กดแป้น F4 หากต้องการให้แสดง พาแนลกใ็ ห้คลิกท่ีเมนู Window แล้วเลือกคาํ สงั่ Show Panels หรอื กดป่ มุ F4 ซาํ้ อีกครงั้ ภาพแสดงการแสดง/ซ่อนพาแนล สรปุ โปรแกรม Adobe Dreamweaver CS6 เป็นโปรแกรมสาํ เรจ็ รปู ท่ีใช้สาํ หรบั สรา้ งเวบ็ ไซต์ ส่วนประกอบหน้าจอ โปรแกรม Adobe Dreamweaver CS6 ประกอบด้วย Menu Bar Toolbar Application Bar Workspace Switcher Insert Panel Document Area แถบสถานะ (Status Bar), พาแนลคณุ สมบตั ิ (Panel Properties) และกล่มุ พาแนล การทาํ งาน (Panel Group) 19

เอกสารอ้างองิ http://papillondreamweaver.blogspot.com/2014/02/dreamweaver-cs6.html http://krupichai4259.blogspot.com/p/dreamweaver-cs6-adobe-dreamweaver- cs6.html http://www.idealready.com/whatsnew_2.html 20