หน่วยการเรียนรู้ที่ 2
การเรียนรู้การออกแบบเว็บเพจด้วยเทคนิค Fluid Grid Layout

สาระสำคัญ

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

สมรรถนะประจำหน่วย

1. แสดงความรู้เกี่ยวกับการพัฒนาเว็บไซต์ด้วยโปรแกรม Adobe Dreamweaver CS6

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

๑. บอกประวัติและFeature ใหม่ในโปรแกรม Adobe Dreamweaver CS6 ได้

๒. อธิบายส่วนประกอบของโปรแกรม Adobe Dreamweaver CS6 ได้

๓. สร้างเว็บไซต์ด้วยโปรแกรม Adobe Dreamweaver CS6 ได้

๔. สร้าง บันทึก เปิดและปิดไฟล์เว็บเพจได้

๕. ปรับแต่งคุณสมบัติพื้นฐานให้กับโปรแกรม Adobe Dreamweaver CS6 ได้

เนื้อหาสาระการเรียนรู้

๑. ประวัติความเป็นมาของโปรแกรม Adobe Dreamweaver CS6

๒. Feature ใหม่ในโปรแกรม Adobe Dreamweaver CS6

๓. การติดตั้งโปรแกรม Adobe Dreamweaver CS6

๔. ส่วนประกอบของหน้าจอโปรแกรม Adobe Dreamweaver CS6

๕. การสร้างเว็บไซต์

๖. การสร้างเว็บเพจ

๗. การบันทึกไฟล์เว็บเพจ

๘. การปิดไฟล์เว็บเพจ

9. การเปิดไฟล์เว็บเพจ

10. การกำหนดคุณสมบัติพื้นฐานให้โปรแกรม


1.ประวัติความเป็นมาของโปรเเกรม Adobe Dremweaver CS6

  1. Adobe Macromedia Dreamweaver
    - ผู้พัฒนา อะโดบีซิสเต็มส์ (เริ่มพัฒนาโดย แมโครมีเดีย)
    - รุ่นเสถียร ล่าสุด CS4 (10.0)
    - รุ่นทดลอง ล่าสุด (27 มีนาคม พ.ศ. 2550)
    - โอเอส Windows Mac OS X
    - ชนิด โปรแกรมแก้ไข HTML
    - ลิขสิทธิ์ Closed source
    - เว็บไซต์ http://www.adobe.com/


    อะโดบี ดรีมวีฟเวอร์ (Adobe Dreamweaver) หรือชื่อเดิมคือ แมโครมีเดีย ดรีมวีฟเวอร์ (Macromedia Dreamweaver) เป็นโปรแกรมแก้ไข HTML พัฒนาโดยบริษัทแมโครมีเดีย (ปัจจุบันควบกิจการรวมกับบริษัท อะโดบีซิสเต็มส์) สำหรับการออกแบบเว็บไซต์ในรูปแบบ WYSIWYG กับการควบคุมของส่วนแก้ไขรหัส HTML ในการพัฒนาโปรแกรมที่มีการรวมทั้งสองแบบเข้าด้วยกันแบบนี้ ทำให้ ดรีมวีฟเวอร์เป็นโปรแกรมที่แตกต่างจากโปรแกรมอื่นๆ ในประเภทเดียวกัน ในช่วงปลายปีทศวรรษ 2533 จนถึงปีพ.ศ. 2544 ดรีมวีฟเวอร์มีสัดส่วนตลาดโปรแกรมแก้ไข HTML อยู่มากกว่า 70% ดรีมวีฟเวอร์มีทั้งในระบบปฏิบัติการแมคอินทอช และไมโครซอฟท์วินโดวส์ ดรีมวีฟเวอร์ยังสามารถทำงานบนระบบปฏิบัติการแบบยูนิกซ์ ผ่านโปรแกรมจำลองอย่าง WINEได้ รุ่นล่าสุดคือ ดรีมวีฟเวอร์ CS4


    การทำงานกับภาษาต่างๆ ดรีมวีฟเวอร์ สามารถทำงานกับภาษาคอมพิวเตอร์ในการเขียนเว็บไซต์แบบไดนามิค ซึ่งมีการใช้ HTML เป็นตัวแสดงผลของเอกสาร เช่น ASP, ASP.NET, PHP, JSP และ ColdFusion รวมถึงการจัดการฐานข้อมูลต่างๆ อีกด้วย และในเวอร์ชันล่าสุด (เวอร์ชัน CS4) ยังสามารถทำงานร่วมกับ XML และ CSS ได้อย่างง่ายดาย


    รุ่นต่างๆ
    Dreamweaver 1.0 (ธันวาคม ค.ศ. 1997)
    Dreamweaver 1.2 (มีนาคม ค.ศ. 1998)
    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 ออกจำหน่ายเมือปี 2007

  2. Dreamweaver CS4 ออกจำหน่ายเมือปี 2008

  3. Dreamweaver CS5 ออกจำหน่ายเมือปี 2010

  4. Dreamweaver CS ออกจำหน่ายเมือปี 2012

  5. Dreamweaver CC ออกจำหน่ายเมือปี 2014


2.Feature ใหม่ในโปรแกรม Adobe Dreamweaver CS6

การติดตั้งโปรแกรม Adobe Dreamweaver CS6


1. ดับเบิ้ลคลิกที่ชื่อไฟล์ Set-up.exe

1. ดับเบิ้ลคลิกที่ชื่อไฟล์ Set-up.exe

2. หลังจากนั้นจะเข้าสู่ขั้นตอนการติดตั้งโปรแกรม โดยจะปรากฏหน้าจอดังนี้

3. คลิกที่ปุ่ม Install

4. คลิกที่ปุ่ม Accept

5. กรอก Serial Number แลว้คลิกที่ปุ่ม Next

6. เลือกโปรแกรมที่ต้องการติดตั้ง หลังจากนั้นคลิกที่ปุ่ม Install

7. โปรแกรมจะเริ่มทาการติดตั้ง

8. เมื่อติดตั้งโปรแกรมเรียบร้อยแล้ว จะปรากฏหน้าจอดังนี้

4.ส่วนประกอบของหน้าจอโปรแกรม Adobe Dreamweaver Cs6


1. Application bar เป็นแถบประยุกต์ ประกอบด้วยแถบเครื่องมือ Application bar ประกอบด้วย

สำหรับเลือกรูปแบบการแสดงพื้นที่สาหรับสร้างหน้าเว็บเพจ เช่น Code Split หรือ Design เป็นต้น

สำหรับค้นหา และติดตั้งโปรแกรมเสริม

สำหรับบริหารจัดการไซต์ เช่นสร้างไซต์ใหม่

2. Menu bar เป็นที่รวมคำสั่งทั้งหมดของโปรแกรม Dreamweaver ที่ใช้ในการจัดการกับไฟล์เว็บเพจ

Menu bar ประกอบด้วยเมนูย่อย ดังนี้

2.1 File เป็นเมนูคำสั่งสาหรับจัดการกับไฟล์เว็บเพจ เช่น สร้างเว็บเพจใหม่ บันทึกเว็บเพจ เปิดเว็บเพจ แสดงเว็บเพจผ่านบราวเซอร์ หรือออกจากโปรแกรม เป็นต้น

2.2 Edit เป็นเมนูคำสั่งสำหรับการแก้ไข เช่น คัดลอง ตัด วาง ค้นหา รวมถึงการตั้งค่าการทำงาน (Preference) ต่าง ๆ เป็นต้น

2.3 View เป็นเมนูคำสั่งสาหรับปรับเปลี่ยนมุมมองของเว็บเพจขณะทำงาน เป็นต้น

2.4 Insert เป็นเมนูคำสั่งสาหรับแทรกวัตถุต่าง ๆ เช่น รูปภาพ เสียงตาราง ฟอร์มต่าง ๆ ลงบนเว็บเพจ เป็นต้น

2.5 Modify เป็นเมนูคำสั่งสาหรับแก้ไขวัตถุต่างๆ บนเว็บเพจ เช่น การแก้ไขรูปแบบตัวอักษร การแก้ไขรูปภาพ การจัดการตาราง หรือการกำหนดคุณสมบัติของเว็บเพจ เป็นต้น

2.6 Format เป็นเมนูคำสั่งสาหรับเปลี่ยนรูปแบบโดยรวมของข้อความบนเว็บเพจ เช่น การจัดรูปแบบข้อความ การสร้างหัวข้อรายการ เป็นต้น

2.7 Command เป็นเมนูคำสั่งสำหรับจัดการกับชุดคำสั่งต่างๆ บนเว็บเพจที่ทำงานอยู่

2.8 Site เป็นเมนูคำสั่งสำหรับจัดการกับ Site เช่น สร้าง Site หรือแก้ไข Site ที่ทำงาน รวมถึงการตรวจสอบลิงค์ต่างๆ ใน Site เป็นต้น

2.9 Window เป็นเมนูที่ใช้ในการเปิดหรือปิดพาเนลที่ทำงานอยู่

2.10 Help เป็นเมนูที่ใช้ในการขอความช่วยเหลือผ่านเว็บไซต์ Adobe


3. Workspace Switcher เป็นปุ่มสำหรับเปลี่ยนมุมมองพื้นที่ทำงาน (Workspace) โดยสามารถเลือกได้ว่าต้องการใช้งานรูปแบบในลักษณะใด ซึ่งใน Adobe Dreamweaver CS6 มีให้เลือกใช้ 11 แบบ