Dreamweaver cs3 รองร บ windows 10 ม ย

หนว่ ยการเรียนรทู้ ่ี 1 รู้จกั โปรแกรม Adobe Dreamweaver CS6

จดุ ประสงคก์ ารเรยี นรู้

1. อธบิ ายสว่ นประกอบของโปรแกรม Adobe Dreamweaver CS6 ได้ 2. สามารถเข้าโปรแกรม Adobe Dreamweaver CS6 ได้ 3. สามารถเปล่ยี นมมุ มองโปรแกรม Adobe Dreamweaver CS6

ร้จู กั โปรแกรม Adobe Dreamweaver CS6 โปรแกรม Dreamweaver เปน็ โปรแกรมสาเรจ็ รปู ท่ีใชส้ าหรบั การสรา้ งเวบ็ ไซต์ เรา

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

นอกจากน้ี Dreamweaver ยังเป็นโปรแกรมแบบ WYSIWYG ( What You See Is What You Get) คอื การจดั วางภาพแบบไหน โปรแกรมจะทาการเขยี นโคด้ ให้โดยอัตโนมตั ติ าม การจดั วาง

เข้าโปรแกรม Adobe Dreamweaver CS6 คลิกเม้าท่ี >> All Programs >> Adobe Dreamweaver CS6

เม่อื เปิดโปรแกรม Dreamweaver คร้ังแรกจะปรากฏหน้าต่าง Default Editor ให้กดป่มุ Ok เพ่ือยืนยันคา่ เริ่มตน้

จากนน้ั โปรแกรมจะแสดงหนา้ ต่างประกอบดว้ ยส่วนสาคญั 3 สว่ น คอื 1. Open a Recent Item เปิดเอกสาร (หนา้ เวบ็ ) เดมิ ทส่ี รา้ งไว้ 2. Create New สรา้ งเอกสารเปล่าตามรูปแบบทเ่ี ราเลือก เช่น HTML, ColdFusion,PHP,ASP,CSS เปน็ ตน้ 3. เข้าสหู่ นา้ เว็บ Adobe Tv ดสู าธติ การใชง้ าน

ส่วนประกอบ Adobe Dreamweaver CS6 ส่วนประกอบของโปรแกรม Adobe Dreamweaver CS6 มดี งั นี้

1. แถบเมนบู าร์ (Menu Bar) เปน็ แถบที่ใช้เก็บคาส่ังท้ังหมดของโปรแกรม 2. แถบ ToolBar แถบเครอ่ื งมือท่ีใชก้ าหนดสถานะของหน้าเว็บ 3. แถบ Property Inspector กาหนดองคป์ ระกอบหนา้ เวบ็ ไซต์ โดยการปรับแตง่ หนา้ ตา่ ง ๆ บนหนา้ เว็บไซต์

4. แถบ Status Bar แถบสถานะ ท่จี ะแสดงขอ้ มูลทเี่ กี่ยวกบั การทางาน ท่กี าลงั ทาอยู่ 5. กลุ่มเครอ่ื งมือ Insert ประกอบดว้ ยเคร่อื งมอื กลมุ่ สาคญั ดงั น้ี

5.1 แท็บ Common เปน็ แท็บท่ีรวบรวมเครือ่ งมอื ตา่ ง ๆ ที่เราเรยี กใช้ งานบ่อย ๆ เชน่ การแทรกภาพ การแทรกตาราง เปน็ ตน้

5.2 แทบ็ Layout เป็นแทบ็ ทร่ี วบรวมเครื่องมอื ท่ชี ่วยจดั องค์ประกอบบนหนา้ เวบ็

5.3 แท็บ Forms เป็นแทบ็ ทรี่ วบรวมเคร่อื งมอื ทใี่ ช้ในการสรา้ งแบบฟอร์มสอบถามและ ตัวเลอื กต่าง ๆ

5.4 แทบ็ Data เป็นแทบ็ ท่รี วบรวมเรอ่ื งมอื สาหรบั สรา้ งหนา้ เวบ็ ทต่ี ดิ ตอ่ กบั ฐานขอ้ มลู

5.5 แทบ็ Spy เปน็ แท็บท่รี วบรวมเคร่อื งมือท่ชี ว่ ยใหก้ ารสร้างฟอรม์ ได้รวดเรว็

5.6 แทบ็ jQuery Mobile เปน็ แถบที่รวบรวมเครื่องมอื ที่ชว่ ยในการสรา้ งหนา้ เวบ็ บนมือถอื

5.7 แทบ็ InContext Editing เป็นแทบ็ ท่ีใชส้ าหรบั สรา้ งและจดั การส่วนประกอบท่วั ไป เชน่ CSS และพน้ื ท่ีในเทมเพลต

5.8 แทบ็ Text เป็นแทบ็ ท่รี วบรวมเครือ่ งมอื สาหรบั จดั วางและปรับแต่งตัวอกั ษรบนหน้า เวบ็

มุมมอง Adobe Dreamweaver CS6 การทางานใน Dreamweaver นน้ั จะมมี ุมมองสาหรับการทางานอยู่ 3 แบบ ด้วยกัน

คือ Code View, Split View และ Design View ซ่งึ การเปลย่ี นการทางานในมุมมองตา่ งๆ ทา ได้ด้วยการคลกิ ไอคอนท่ี Toolbar ในแถบเคร่ืองมือ สาหรบั มมุ มองที่ 3 แบบมรี ายละเอียดการ ใช้งานดงั ต่อไปนี้

มมุ มอง Code View การเรยี กใชม้ มุ มองนี้ใหค้ ลิก โดยในมุมมองนี้จะแสดงโคด้ HTML หรอื Script ในหน้า เว็บทีก่ าลงั ทางาน ซง่ึ สามารถทาการเพ่มิ เติมหรือแก้ไขโค้ดใหเ้ ว็บไซตภ์ ายในมมุ มองน้ไี ด้

มมุ มอง Split View การใชม้ ุมมองนี้ใหค้ ลกิ จะแสดงทั้งโคด้ และหน้าเว็บเพจ (Design) ท่ีกาลงั ทางานอยู่ พรอ้ มๆ กนั ทาใหส้ ามารถเปรยี บเทยี บดผู ลลัพธข์ องโค้ดท่ีสร้างขน้ึ มาในรูปแบบของเว็บเพจ (การทางานกบั โคดตอ้ งมคี วามรู้เกี่ยวกบั ภาษา HTML บา้ ง)

มมุ มอง Design View

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

Macromedia Dreamweaver รุน่ ใหม่ ๆ ยังสนบั สนนุ การใชง้ านเว็บแบบไดนามคิ เพิม่ มากข้นึ มีการรองรับสคริปภาษาตา่ ง ๆ เช่น CSS , Java Script , ภาษา XML และรองรับ ลูกเลน่ เกยี่ วกับการทาภาพเคลื่อนไหว Gif Animation และสนบั สนนุ การใชง้ าน Flash เพิ่มขน้ึ อีกด้วยMacromedia Dreamweaver มอี อกมาแล้วหลายเวอร์ช่ัน ซ่งึ มที ้ังหมดดงั น้ี

Major Version Name Year Provider version 1997 Macromedia 1 1.0 1998 Macromedia 1999 Macromedia 2 2.0 2000 Macromedia 2000 Macromedia 3 3.0 2002 Macromedia 2003 Macromedia 4 4.0 2005 Macromedia 2007 Adobe 5 UltraDev 4.0 2008 Adobe 2010 Adobe 6 MX

7 MX 2004

8 8.0

9 CS3

10 CS4

11 CS5

12 CS6 2012 Adobe

13 CC (Creative 2013 Adobe Cloud)

14 CC 2014 2014 Adobe

15 CC 2014 (14.1) 2014 Adobe

16 CC 2015 2015 Adobe

ในอดตี โปรแกรม Macromedia Dreamweaver ถูกสรา้ งขน้ึ โดยบรษิ ทั แมโครมีเดยี แต่ ปจั จุบนั นีค้ วบกจิ การรวมกบั บรษิ ัท อะโดบซี สิ เตม็ ส์ ดังนนั้ เวอร์ชัน่ ทถ่ี กู พัฒนาข้ึนในภายหลัง จงึ มีการใช้ชือ่ ใหม่ จากชอ่ื เดมิ แมโครมเี ดยี ดรีมวฟี เวอร์ (Macromedia Dreamweaver) เปล่ยี นเป็น อะโดบี ดรมี วีฟเวอร์ (Adobe Dreamweaver)