Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

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

                   เมื่อนักเรียนเรียนเรื่อง  เริ่มต้นรู้จักโปรแกรม Adobe Dreamweaver CS4 แล้ว  นักเรียนสามารถ
        1.  อธิบายขั้นตอนการสร้างเว็บไซต์
        2.  อธิบายขั้นตอนการติดตั้ง Adobe Dreamweaver CS4 ได้
        3.  ใช้งานส่วนประกอบของหน้าต่างโปรแกรม  Adobe Dreamweaver CS4  ได้
        4.  สามารถทำงานกับพาเนล  ได้

สาระการเรียนรู้

        1.  ขั้นตอนการสร้างเว็บไซต์
        2.  ขั้นตอนการติดตั้ง Adobe Dreamweaver CS4
        3.  ใช้งานส่วนประกอบของหน้าต่างโปรแกรม  Adobe Dreamweaver CS4 
        4. ทำงานกับพาเนล


 

ความรู้ทั่วไปเกี่ยวกับโปรแกรม Adobe Dreamweaver CS4

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

       การสร้างเว็บไซต์ในยุคแรกนิยมใช้ภาษา HTML ซึ่งเป็นซอฟต์แวร์ประยุกต์สำหรับสร้างเว็บเพจ โดยใช้โปรแกรมเท็กซ์ เอดิเตอร์ (Text Editor) ทั่วไป เช่น Noteped WordPed และโปรแกรมประมวลผลคำ เช่น MS-Word Open Office เป็นต้น แต่ผู้สร้างก็สามารถสร้างเว็บเำจให้สวยงาม สามารถใส่สีตัวอักษร สร้างตาราง ฯลฯ โดยจะต้องเขียนโค้ดทั้งหมดและบันทึกไฟล์นามสกุล .html แล้วนำไปเปิดด้วยเว็บเปราว์เซอร์ได้

       การเขียนภาษา HTML ด้วย Text Editor นั้น แม้จะไม่ยากนักแต่ถ้าต้องตกแต่งเว็บเพจให้สวยงามมีภาพประกอบและรายละเอียดที่ซับซ้อน ก็ยิ่งต้องเขียนโค้ดมากนับร้อยนับพันบรรทัด ทำให้ช้าและมีโอกาสผิดพลาดได้ง่าย ต่อมาได้มีผู้เล็งเห็นความยากลำบากในการเขียนโค้ดคำสั่งดังกล่าว จึงได้พัฒนาโปรแกรมสำเร็จรูปที่ช่วยในการสร้างเว็บเพจให้ง่ายขึ้นเรียกว่า WYSIWYG editors (What You See Is What You Get Editors) หมายถึง ใช้ภาพกราฟิกแทนการเขียนโค้ดคำสั่ง เมื่อผู้สร้างเว็บวางภาพ ตัวอักษรและวัตถุใดๆ ลงบนแผ่นสร้างเว็บโปรแกรมจะทำการเขียนโค้ดคำสั่งภาษา HTML ให้โดยอัตโนมัติ เราจะเห็นตัวอย่างงานที่สร้างกับที่แสดงบนเว็บเบราว์เซอร์ จึงช่วยให้การสร้างเว็บเพจง่ายขึ้น รวดเร็วขึ้นและสวยงามมากยิ่งขึ้น

      โปรแกรมประเภท WYSIWYG นี้จึงจัดว่าเป็น HTML ภาีคกราฟิกนั่นเอง โดยในปัจจุบันมีโปรแกรมประเภทนี้จำนวนมาก แต่ที่ได้รับความนิยมมาก เช่น ประเภทที่มห้ใช้ฟรี คือ Amaya Aptana Composer Nvu และ OPENBEXI HTML Builder ประเภทที่ต้องเสียค่าใช้จ่ายคือ Microsoft FrontPage HomeSite Microsoft Expression Web Designer และ Dreamweaver

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

โปรแกรม Adobe Dreamweaver CS4

       โปรแกรม Dreamweaver ได้รับการพัฒนาขึ้นโดยบริษัท Macromedia ใช้ชื่อว่า Macromedia Dreamweaver โดยเริ่มออกจำหน่ายเมื่อเดือน ธันวาคม พ.ศ. 2540 ตามมาด้วย Version 1.2 เมื่อเดือนมีนาคม พ.ศ. 2541 และออกรุ่นต่างๆ โดยสรุป คือ
       เดือน ธันวาคม พ.ศ. 2541 ออกรุ่น Dreamweaver 2.0
       เดือน ธันวาคม พ.ศ. 2542 ออกรุ่น Dreamweaver 3.0
       เดือน มิถุนายน พ.ศ. 2543 ออกรุ่น Dreamweaver Ultradev 1.0
       เดือน ธันวาคม พ.ศ. 2543 ออกรุ่น Dreamweaver 4.0 และรุ่น Dreamweaver Ultradev 4.0
       เดือน พฤษภาคม พ.ศ. 2545 ออกรุ่น Dreamweaver MX 6.0
       เดือน กันยายน พ.ศ. 2546 ออกรุ่น Dreamweaver MX 2004
       เดือน กันยายน พ.ศ. 2548 ออกรุ่น Dreamweaver 8
       เดือน เมษายน พ.ศ. 2550 ออกรุ่น Dreamweaver CS3 เป็นเวอร์ชันแรกหลังจากรวมกับบริษัท อะโดบี 
       เดือน กันยายน พ.ศ. 2551 ออกรุ่น Dreamweaver CS4

โดยโปรแกรม Dreamweaver CS4 มีคุณสมบัติใหม่เพิ่มเติมจากรุ่นก่อน หลายประการ เช่น
      - ที่ด้านขวาของหน้าต่างจะมีส่วนประกอบทั้งหมดที่สามารถใช้งานร่วมกับโปรแกรมอื่น ๆ ของอะโดบีได้
      - มีแถบค้นหาแบบรวมเำื่อค้นหาความช่วยเหบือใน Community Help ของเว็บไซต์อะโดบี
      - สามารถเปิดไฟบ์ที่เกี่ยวข้องได้โดยอัตโนมัติ
      - เพิ่มฟังก์ชั่นสำหรับการใชงานด้วยปุ่มเว็บวิดเจตส์แบบใหม่ ซึ่งส่วนใหญ่จะใช้กับจาวาสคริปต์
      - มีดร็อปดาวน์เมนูแบบใหม่ซึ่งใช้สำหรับเปลี่ยนรูปแบบการแสดงผลหน้าต่างการทำงาน ไปตามชนิดของงานที่ทำ และสนับสนุนการทำงานแบบสองหน้าร่างพร้อมกัน
      - เมื่อสร้างไฟล์งาน HTML ไฟล์งานที่เกี่ยวข้องทั้งหมด ทั้งจาวาสคริปต์ ไฟล์ซีเอสเอส เป็นต้น ก็จะถูกเปิดขึ้นพร้อมกัน
      - มีพาเนลซีเอสเอสแบบใหม่
      - มีระบบป้องกันโค้ดจาวาสคริปต์จากการถูกขโมย