วันพุธที่ 31 สิงหาคม พ.ศ. 2559

หน่วยการเรียนรู้ที่ 1 ความรู้เกี่ยวกับการสร้างเว็บไซต์

โฮมเพจ เว็บเพจ และเว็บไซต์ คืออะไร

        เว็บเพจ (Web Page)
            เอกสารที่ประกอบไปด้วยข้อมูลที่เป็นอักษร เสียง และภาพต่างๆ ที่บรรจุในแฟ้มเอกสารแต่ละหน้าของเวิลด์ไวด์เว็บ (WWW) ที่เปิดอ่านจากโปรแกรม Browser

        โฮมเพจ (Home page)
            เว็บเพจหน้าแรกของเว็บไซต์ ข้อกำหนดที่เป็นมาตรฐานต้องมีชื่อไฟล์ว่า index.html หรือ index.htm

        เว็บไซต์ (Web site)
            เว็บที่ประกอบด้วยหน้าโฮมเพจและเว็บเพจหลาย ๆ หน้ามาประกอบกัน ตัวอย่าง เช่น เว็บไซต์ของโรงเรียนเทศบาลวัดดอนไก่ดี คือ www.dkd.ac.th เป็นต้น


ส่วนประกอบของหน้าเว็บเพจ

        เนื่องจากหน้าเว็บเพจในปัจจุบันมีรูปแบบที่หลากหลาย แต่โดยทั่วไปหน้าเว็บเพจจะแบ่งออกเป็น 4 ส่วนหลักๆ ดังนี้



        1. ส่วนหัว (Page Header) อยู่บริเวณบนสุดของหน้าเว็บเพจ เป็นส่วนที่แสดงชื่อเว็บไซต์ โลโก้ แบนเนอร์โฆษณา ลิงก์สำหรับข้ามไปยังหน้าเว็บอื่น
        2. ส่วนเนื้อหา (Page Body) อยู่บริเวณตอนกลางของหน้าเว็บเพจ ซึ่งเป็นส่วนที่แสดงเนื้อหาภายในหน้าเว็บเพจนั้น โดยประกอบด้วยข้อความ ข้อมูล ภาพเคลื่อนไหว เป็นต้น
        3. แถบข้าง (Slide Bar) อยู่ด้านซ้ายมือหรือขวามือของเว็บไซต์ สำหรับวางป้ายโฆษณา หรือเมนูสำหรับลิงค์ไปยังหน้าเว็บเพจอื่นๆ หรือเว็บไซต์อื่น ๆ
        4. ส่วนท้าย (Page Footer) อยู่บริเวณด้านล่างสุดของหน้าเว็บเพจ ส่วนมากใช้สำหรับแสดงชื่อเจ้าของเว็บไซต์ อีเมลของผู้ดูแลเว็บไซต์สำหรับติดต่อกับทางเว็บไซต์

ลักษณะของเว็บไซต์ที่ดี

        1. ความทันสมัย (Currency) เป็นข้อมูลที่ใหม่ ทันต่อสถานการณ์และได้รับการปรับปรุงแก้ไขตามระยะเวลาอย่างเหมาะสม และแสดงวันที่ปรับปรุงข้อมูลครั้งล่าสุด
        2. เนื้อหาและข้อมูล (Content and Information) ต้องมีเนื้อหาและข้อมูลที่เป็นประโยชน์ เนื้อหาของเว็บมีความถูกต้อง เป็นไปตามวัตถุประสงค์ในการจัดทำเว็บไซต์
        3. ความน่าเชื่อถือ (Authority) คือ ผู้จัดทำเว็บเป็นผู้ที่เกี่ยวข้องโดยตรงกับเนื้อหา หรือเป็นองค์กรที่รับผิดชอบด้านนั้นโดยตรง โดยแสดงความรับผิดชอบในเว็บอย่างชัดเจน แสดงให้เห็นได้จากส่วนที่สงวนลิขสิทธิ์และผู้รับผิดชอบภายในเว็บ ซึ่งนิยมแสดงไว้ด้านล่างของเว็บไซต์
        4. การเชื่อมโยงข้อมูล (Navigation) ควรจะแสดงการเชื่อมโยงไปยังส่วนต่างๆ ในรูปแบบที่เข้าใจง่าย และอ่านได้อย่างชัดเจน
        5. การปฏิบัติจริง (Experience) ต้องทำให้ผู้เข้าชมรู้สึกว่าไม่เสียเวลา ไมไร้ประโยชน์หรือเว็บเพจไม่เป็นไปตามวัตถุประสงค์
        6. ความเป็นมัลติมีเดีย (Multimedia) องค์ประกอบที่สำคัญของความเป็น multimedia ภายในเว็บไซด์ คือ เสียง ภาพ กราฟิก ภาพเคลื่อนไหว ควรสอดคล้องกับเนื้อหาภายในเว็บ
        7. การให้ข้อมูล (treatment) ควรจะเข้าถึงได้ง่ายและรวดเร็ว โดยไม่มีความสลับซับซ้อน มีการจัดรูปแบบและหมวดหมู่ของข้อมูลอย่างเป็นระบบ เพื่อให้ง่ายต่อการตรวจสอบและใช้งานข้อมูล
        8. การเข้าถึงข้อมูล (Access) สามารถแสดงผลข้อมูลได้อย่างรวดเร็ว เมื่อผู้ใช้เข้าสู่เว็บไซต์
        9. ความหลากหลายของข้อมูล (Miscellaneous) เว็บควรมีความหลากหลายและมีเรื่องที่เป็นประโยชน์หลาย ๆ เรื่อง มีความน่าเชื่อถือและตรวจสอบข้อมูลได้ ข้อมูลนั้นก็จะได้ความนิยมและแนะนำกันให้เข้ามาชมอีก

การออกแบบขนาดของเว็บเพจให้พอดีกับหน้าจอ

        การออกแบบเว็บเพจที่ดี จะต้องคำนึงถึงกลุ่มผู้ชมเป็นส่วนใหญ่ว่าใช้จอภาพที่มีความละเอียด (Resolution) ดังนั้นจึงควรออกแบบเว็บเพจให้มีความสัมพันธ์กับขนาดหน้าจอคอมพิวเตอร์ของกลุ่มผู้ชมด้วย เนื่องจากหน้าเว็บเพจแต่ละขนาดก็จะสามารถใช้งานได้พอดีกับขนาดหน้าจอที่แตกต่างกันไป ซึ่งขนาดความละเอียดของหน้าจอและเว็บเพจที่นิยมใช้กันมี 2 ขนาด ได้แก่
        - 1024 x 768 pixels
        - 1280 x 800 หรือ 1280 x 1024 pixels

 การเลือกใช้สีให้เหมาะสม

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


หน่วยการเรียนรู้ที่ 2 แนะนำโปรแกรม 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)


ความสามารถใหม่ของ 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




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