บทที่6 การจัดการเว็บไซต์ด้วย Dreamweaver CS6

บทที่6 การจัดการเว็บไซต์ด้วย Dreamweaver CS6

เนื้อหาสาระ

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

6.1ทำความรู้จักโปรแกรม Dreamweaver
  สำหรับ Dreamweaver เป็นโปรแกรมสร้างโฮมเพจแบบเสมือนจริง โดยไม่ต้อง เขียนภาษา HTML เอง หรือที่ศัพท์เทคนิคเรียกว่า "WYSIWYG" 
   เราสามารถใช้หน้าจอเสมือนจริงของ Dreamweaver ในการทำเว็บเพจได้เลย โดยใช้เครื่องมือต่างๆที่มีมาให้ดังแสดงในรูปด้านล่าง
หน้าตาของโปรแกรม Dreamweaver และชื่อเรียกเครื่องมือต่างๆ

อธิบายเครื่องมือต่างๆ
 1.Document window
      เป็นส่วนที่ใช้การแสดงผลเว็บเพจที่กำลังสร้างอยู่ ซึ่งแสดงผลได้ทั้งแบบ Code และ แบบเสมือนจริงที่แสดงผลบน web browser หรือจะแสดงควบคู่ไปก็ได้ และใช้ในการทำงานแก้ไขตัวอักษร รูปภาพต่างๆในเว็บเพจด้วย โดยอาศัยเครื่องมือต่างๆ ที่แสดงอยู่ในรูป
   ข้อเสียของ Dreamweaver ยังไม่อยู่บ้างคือ หน้าจอที่แสดงผลเสมือนจริง กับการแสดงผลจริงใน web browser อาจไม่ตรงกัน ขึ้นอยู่กับ web browser ที่เราใช้ด้วย

 2.Insert Bar

ประกอบด้วยคำสั่งต่างๆ แยกย่อยดังนี้
1.Common ในแถบนี้จะประกอบด้วยเครื่องมือที่ใช้งานบ่อยๆ เช่น สร้างตาราง , สร้างลิงค์ หรือใส่รูปในเว็บเพจ
2.Layout ในแถบนี้จะเป็นเครื่องมือที่เกี่ยวกับ การแสดงผลแบบ div , ตาราง และ frame สำหรับใช้สร้างเว็บเพจ   แบบ layout
   3.Forms ในแถบนี้ประกอบด้วยคำสั่งที่ใช้ในการสร้าง form เช่น radio , check box เป็นต้น
  4.Data เป็นแถบที่ใส่สำหรับ Dynamic เว็บไซต์ ใช้จัดการกับระบบ data base จะใช้มากในการพัฒนา web application บนเว็บไซต์ เช่นการเขียนระบบ web board , ระบบสมาชิก
  5.Spry เป็นแถบใหม่ของ dreamwerver ที่หลายคนจะต้องชอบ เพราะเป็นเครื่องมือที่รวม javascript กับ HTML , CSS เข้าด้วยกัน ทำให้เว็บไซต์มีความน่าสนใจ และมีความสะดวกในการใช้งานมากขึ้น
  6.Text ในนี้จะเป็นเครื่องมือที่ใช้จัดการกับตัวอักษรทั้งหมด เช่นใส่สัญลักษณ์พิเศษต่างๆ
  7.Favorites แถบอันนี้คุณสามารถเพิ่ม เครื่องมือต่างด้วยตัวเอง โดยการคลิกขวา สำหรับผู้ที่ต้องการเก็บเครื่องมือต่างๆที่ใช้งานบ่อยไว้ในนี้

 3.Property inspector

  property inspector เป็นแถบเครื่องมือที่จะเปลี่ยนแปลงตามวัตถุที่เราเลือกอยู่เช่น ถ้าคลิกที่รูป property inspector ก็จะเป็นคุณสมบัติเกี่ยวกับรูปนั้นเช่น ขนาดรูป , ชื่อรูป , ลิงค์ของรูป ถ้าเลือกที่ตารางอยู่ ก็จะเป็นคุณสมบัติของตาราง เช่น ขนาดตาราง , จำนวนแถวและหลักของตาราง เป็นต้น 

  4.docking panels

  เครื่องมือตัวนี้เป็นเครื่องมือที่จะต้องใช้บ่อยมาก เพราะใช้แสดง file ที่อยู่ในเว็บไซต์ , ไฟล์ CSS และใช้แก้ไข CSS รวมถึงเครื่องมือที่ใช้แสดงภาพ และเครื่องมือ ftp เราสามารถปิด/เปิด แถบนี้ได้โดยการคลิกที่รูปลูกศรด้านซ้ายมือของ panels 

 5.menu
   เป็นคำสั่งที่เห็นอยู่ทั่วไปในโปรแกรมทั่วไป จะมีคำสั่งที่ใช้ที่เหมือนกับเครื่องมือต่างที่แสดงอยู่ใน Insert bar, Property inspector, panels แต่มีบางคำสั่งที่แสดงเฉพาะใน menu ด้วย 

 6.Status bar

       ถือว่าเป็นเครื่องมือที่มีประโยชน์มาก ทางขวาของแถบนี้จะเป็นตัวเลขที่บอกเวลาในการโหลดหน้านี้ ขนานของ document window เครื่องมือย่อ/ขยาย ส่วนทางขวาจะเป็น Tag select ของ HTML จะแสดงคำสั่งของ HTML เราสามารถแก้ไขคำสั่งต่างๆได้จากหน้าต่างนี้ 
 
7.Document Tool bar

ทางซ้ายมือสุดจะเป็นคำสั่ง ใช้เปลี่ยนการแสดงผลของ document window อันแรกจะแสดงเฉพาะ code อันต่อมาจะแสดงทั้ง code และ หน้าออกแบบ อันสุดท้ายจะแสดงหน้าออกแบบเท่านั้น และยังมือเครื่องมือที่ใช้กำหนด Title <title> </title> ของหน้าเว็บเพจอีกด้วย 

หน้าต่างต่อไปที่จะลืมไม่ได้คือ Perference การเปิดหน้าต่างนี้ทำได้โดยคลิกที่ Edit >Preferences เป็นหน้าต่างที่ใช้ในการปรับระบบต่างๆของ Dreamweaver ให้ตรงกับความต้องการของเรา 

บทที่6 การจัดการเว็บไซต์ด้วย Dreamweaver CS6‎ > 
6.2ความสามารถใหม่ของ Adobe Dreamweaver CS6
   1. Fluid grid layout

           

   การออกแบบหน้าเอกสารใหม่บนพื้นฐานของตารางที่สามารถนำไปใช้ได้หลากหลาย บนหน้าจอขนาดต่าง ๆ เช่น SmartPhone 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 เป็นต้น

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

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

 7. CSS Multiple Classes selection

            

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

ที่มา : http://www.idealready.com/whatsnew_2.html

 คุณสมบัติของเครื่องคอมพิวเตอร์ก่อนติดตั้งโปรแกรม
           
            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)

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

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

             2. จะปรากฏหน้าต่าง ให้เลือกตำแหน่งที่จะติดตั้งโปรแกรม เมื่อเลือกเสร็จแล้ว คลิกที่ปุ่ม Next

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

            หมายเหตุ การติดตั้งโปรแกรมในครั้งนี้ เลือกการติดตั้งแบบ Install

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

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

           6. จะปรากฏหน้าต่าง Options เพื่อเลือกโปรแกรมในการติดตั้ง ดังนี้

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

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

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

            1. คลิกที่ปุ่ม Start
            2. คลิก Programs หรือ All Programs
            3. เลือก Adobe Dreamweaver CS6
            4. จะปรากฏหน้าต่าง Welcome Screen ก่อนการเข้าสู่หน้าโปรแกรมหลัก ซึ่งแต่ละส่วนมีรายละเอียด ดังนี้

                    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 มีองค์ประกอบ ดังนี้

            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 เป็นแถบที่ประกอบด้วยปุ่มคำสั่งที่ใช้ในการแทรกออบเจ็กต์ (องค์ประกอบต่างๆ) ลงในเว็บเพจ โดยแบ่งเป็นหมวดหมู่ซึ่งมีรายละเอียดดังนี้

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


            7. Panel Group เป็นกลุ่มหน้าต่างพาเนล ซึ่งช่วยเพิ่มความสามารถในการจัดการและออกแบบเว็บเพจ