68
69 การติดตั้งและใช้งานโปรแกรม Adobe Dreamweaver CC 2018 5.1 รู้จักกับโปรแกรม Adobe Dreamweaver CC 2018 5.2 การติดตั้งโปรแกรม Adobe Dreamweaver CC 2018 5.3 ส่วนประกอบต่าง ๆ ของโปรแกรม Adobe Dreamweaver CC 2018 แนวคิดสำคัญ (Main Idea) ปัจจุบันเครื่องมือในการสร้างเว็บไซต์มีหลายโปรแกรม และโปรแกรม Adobe Dreamweaver CC เป็นอีกโปรแกรมหนึ่งที่สะดวกในการสร้างเว็บไซต์ เพราะมีเครื่องมือมากมายที่สนับสนุนการทำงานทำให้ สามารถสร้างเว็บไซต์ได้อย่างง่ายดาย สำหรับเนื้อหาในหน่วยนี้ประกอบด้วย การทำความรู้จักกับโปรแกรม Adobe Dreamweaver CC 2018 การติดตั้งโปรแกรม Adobe Dreamweaver CC 2018 ส่วนประกอบ ต่าง ๆ ของโปรแกรม Adobe Dreamweaver CC 2018 เพื่อเป็นพื้นฐานในการใช้งานโปรแกรมในการ สร้างเว็บไซต์ในหน่วยต่อไป 1.แสดงความรู้เกี่ยวกับโปรแกรม Adobe Dreamweaver CC 2018 2.แสดงความรู้เกี่ยวกับการติดตั้งโปรแกรม Adobe Dreamweaver CC 2018 3.แสดงความรู้เกี่ยวกับส่วนประกอบต่าง ๆ ของโปรแกรม Adobe Dreamweaver CC 2018 1.อธิบายเกี่ยวกับโปรแกรม Adobe Dreamweaver CC 2018 ได้ 2.ติดตั้งโปรแกรม Adobe Dreamweaver CC 2018 ได้ 3.บอกส่วนประกอบต่าง ๆ ของโปรแกรม Adobe Dreamweaver CC 2018 ได้ หัวข้อเรื่อง (Topics) จุดประสงค์เชิงพฤติกรรม (Behavioral Objectives) สมรรถนะย่อย (Element of Competency)
70 Adobe Dreamweaver CC เป็นหนึ่งในชุดโปรแกรม Adobe Creative Cloud เป็นโปรแกรมที่มี เครื่องมือในการสร้างเว็บไซต์คุณภาพสูง มีหลากหลายเครื่องมือ ช่วยให้สร้างเว็บไซต์ได้สะดวกสบายขึ้น นอกจากนี้ ยังรองรับการเขียนภาษา DHTML หรือที่รู้จักกันในนามของ Dynamic HTML ซึ่งจะช่วยเพิ่ม ลูกเล่นให้กับเว็บเพจ อีกทั้งมีระบบช่วยเติม Source Code ของภาษ1 HTML อย่างอัตโนมัติ และยังสามารถ ช่วยจัดการกำหนดค่าของรูปภาพที่จะนำมาใส่ประกอบในเว็บไซต์ได้อย่างสะดวก โดยการเพิ่มคำและประโยค ให้กับการเขียนเว็บไซแบบอัตโนมัติ โปรแกรมนี้เป็นที่ยมกันมากในหมู่ของเว็บมาสเตอร์ต่าง ๆ ทั้งเมืองไทย และต่างประเทศ รูปที่ 5.1 Adobe โปรแกรม Dreamweaver CC 5.1.1 คุณสมบัติใหม่ของโปรแกรม 1.ชุดงานที่ส่งออกจาก PSDs ทำให้ประหยัดเวลาไต้อย่างรวดเร็ว โดยการแยกภาพเว็บที่ดีที่สุดจาก เอกสาร Adobe Photoshop ในหลายความละเอียดและรูปแบบ ทำงานร่วมกับไฟล์เอกสารจากโปรแกรม Photoshop (*.psd) ได้ โดยโปรแกรมสามารถแยกองค์ประกอบภาพกราฟิกของไฟล์ psd คัดลอกวาง หรือลากวาง (Drag and Drop) ลงบนหน้าจอของโปรแกรม Adobe Dreamweaver ได้ทันทีโดยโปรแกรม จะทำหน้าที่แปลงองค์ประกอบภาพกราฟิกไปเป็นรหัสคำสั่ง ซีเอสเอส ซึ่งจะมีรูปแบบการแสดงผลทั้งตัวอักษร สี เงา และกราฟิกอื่น ๆ จากไฟล์เอกสาร psd เนื้อหาสาระ (Content ) (((Content)Z((((Z(Z((Con tent 5.1รู้จักกับโปรแกรม Adobe Dreamweaver CC 2018
71 2.สร้างเว็บไซที่ปรับให้พอดีกับขนาดหน้าจอหลายตัวในการเริ่มต้นระบบแบบไดนามิกปรับปรุงเว็บไซต์ เริ่มต้นจาก Scratch การใช้ Templates หรือรวมส่วนประกอบ Bootstrap แสดงผลตัวอย่างการออกแบบใน เวลาจริงโดยการปรับขนาดแบบ Live View ใน Dreamweaver ระบุ media queries Visually และอื่น ๆ 3.การทดสอบและการตรวจสอบเว็บไซต์บนอุปกรณ์หลายคนพร้อมกัน เพียงพิมพ์ URL ที่สั้นลงใน บราวเซอร์โทรศัพท์มือถือเพื่อดูตัวอย่างเว็บไชต์ได้ 4. รูปแบบการแก้ไขโค้ดใหม่ การตรวจสอบโค้ดแบบเรียลไทม์กับ Linting และทำให้สมบูรณ์อัตโนมัติ ด้วยการสนับสนุนให้เขียนโค้ดใน Dreamweaver ได้เร็วขึ้น และง่ายกว่าเดิม 5. รองรับ CS53 และ HTML5 ทำให้ผู้สร้างสามารถใช้งานแท็กคำสั่งหรือคุณสมบัติใหม่ที่เป็น มาตรฐานที่ประกาศใช้งานตามมาตรฐานใหม่ของการออกแบบและพัฒนาเว็บไซต์ ทำให้เว็บไซต์ที่ได้มีความ เป็นมาตรฐาน สามารถแสดงผลได้ในทุกอุปกรณ์ ทุกเว็บบราวเซอร์ และสามารถแสดงผลได้ใน ทุกระบบปฏิบัติการ เป็นตัน 6. รองรับการแสดงผลตัวอย่างรหัสคำสั่ง (Hinting) ภาษา PHP รวมไปถึง Ajax และ Javascipt โดยโปรแกรมสมารถแสดงผลคำสั่งขึ้นมาเพื่อให้ผู้สร้างเลือกใช้ในกรณีที่ผู้สร้างพิมพ์คำสั่ง เพื่อให้ผู้สร้างเลือกใช้ งานได้อย่างสะดวก รวดเร็ว และป้องกันข้อผิดพลาดจากการพิมพ์คำสั่งที่ไม่ถูกต้อง 7. สามารถฝังฟอนต์ลงในเว็บไซต์ในรูปแบบของเว็บฟอนต์ (Web Font) ได้ เพื่อให้หน้าเว็บเพจ แสดงผลรูปแบบตัวอักษรตามที่ผู้สร้างต้องการ เพื่อความสวยงามในการนำเสนอ รองรับการฝังฟอนต์ลงในหน้า เว็บไซต์ ทำให้เครื่องผู้ใช้งานสามารถแสดงผลแบบตัวอักษรได้แม้ไม่ได้ติดตั้งฟอนต์ลงไปในเครื่องผู้ใช้งานผู้สร้าง สามารฝังฟอนต์ใต้โดยใช้เว็บไซต์สร้างเว็บฟอนต์ตัวอย่างการแปลงฟอนต์เพื่อให้ใช้งานได้บนเว็บไซต์ 8. ค้นหาภาพที่สมบูรณ์แบบสำหรับเว็บไซต์ใน Adobe Stock Marketplace. สำรวจไลบรารีที่เคย ขยายตัวของภาพถ่าย หรือภาพประกอบ และดาวน์โหลดได้โดยตรงกับ Creative Cloud 5.1.2 ความต้องการพื้นฐานในการติดตั้งโปรแกรม ตารางที่ 5.1 ความต้องการพื้นฐานในการติดตั้งโปรแกรม
72 ตารางที่ 5.1 (ต่อ) ความต้องการพื้นฐานในการติดตั้งโปรแกรม การดาวน์โหลดโปรแกรม Adobe Dreamweaver CC 2018 สมารถทำได้โดยคลิกที่เว็บไซต์ https://www.adobe.com/sea/products/catalog htm1 เพื่อเลือกโปรแกรมในการดาวน์โหลด์ได้ คลิกเลือกโปรแกรม Dreamweaver สมารถเลือกดาวน์โหลดโดยการซื้อ Buy Now จะได้โปรแกรมที่สามารถ ใช้งานได้ตลอดไป หรือดาวน์โหลดโดยใช้เวอร์ชันทดลอง (Download Tial ใช้ซึ่งโปรแกรมของบริษัท Adobe มีนโยบายไม่ตัดฟีเจอร์ใด ๆ ของโปรแกรมออกเลย แต่มีระยะเวลาการทดลองใช้ 7 วัน โปรแกรมจะนับวัน ตั้งแต่การติดตั้ง หากอยากใช้งานต่อต้องมีค่าใช้จ่ายในการต่ออายุโปรแกรม การติดตั้งโปรแกรม Adobe Dreamweaver CC 2018 มีขั้นตอนการติดตั้งดังนี้ ดาวน์โหลดและติดตั้งโปรแกรม Creative Cloud Apps ซึ่งเป็นโปรแกรมที่ให้บริการในการ ดาวน์โหลดชุดโปรแกรมต่าง ๆ ของบริษัท Adobe ที่เว็บไซต์ https://www.adobe.com/sea/creativecloud/catalog/desktop.html ดังรูป 5.2 การติดตั้งโปรแกรม Adobe Dreamweaver CC 2018
73 2.เมื่อดาวน์โหลดไฟล์เสร็จเรียบร้อยแล้วให้ตับเบิลคลิกไฟล์ Creative_Cloud_Set-Up.exe 3. ปรากฎหน้าจอ Creative Cloud Installer ให้คลิก Sign In ใส่รูป 4. ให้ใส่ค่าข้อมูลการลงทะเบียน Adobe ID คลิกปุ่ม Sign up 5. เมื่อกรอกข้อมูลเสร็จเรียบร้อยแล้ว โปรแกรมจะปรากฎหน้าจอ Creative Cloud Installer คลิก ปุ่ม Start Installing 6. โปรแกรมจะทำการติดตั้ง 7.เมื่อติดตั้งเสร็จเรียบร้อยจะแสดงหน้าจอ Creative Cloud แสดงโปรแกรมต่าง ๆของบริษัท Adobe ที่สามารถตาวน์โหลดมาใช้งานได้ ในหน่วยนี้จะใช้เวอร์ชันทดลองใช้ (Try) คลิกโปรแกรม Dream-weaver CC คลิกปุ่ม Try
74 8. รอสักครู่ โปรแกรม Creative Cloud กำลังทำการติดตั้งโปรแกรม Dreamweaver CC 9. เมื่อติดตั้งเสร็จเรียบร้อย คลิกปุ่ม Start Trial 10.เมื่อติดตั้งโปรแกรมเวอร์ชันทดลองใช้แล้ว ที่โปรแกรม Creative Cloud จะเปลี่ยนเป็นปุ่ม Buy Now และจะมีข้อความแจ้งให้ทราบว่า ได้เริ่มใช้โปรแกรม Dreamweaver CC ในรุ่นทดลองใช้ (trial) 7 วัน
75 11. คลิก DW เข้าสู่โปรแกรมจะแสดงหน้าจอการทดลองใช้งาน คลิกปุ่ม continue trial 12. โปรแกรมจะแสดงหน้าจอการเริ่มทำงาน คลิก Create New เพื่อเริ่มใช้งานโปรแกรม หน้าจอการทำงานของโปรแกรม Adobe Dreamweaver CC 2018 เมื่อเปิดโปรแกรมขึ้นมาจะพบ กับหน้าจอว่าง ๆ ให้คลิกที่เมนู File > New เพื่อสร้างเอกสารใหม่ ดังรูป 5.3 ส่วนประกอบต่าง ๆ ของโปรแกรม Adobe Dreamweaver CC 2018
76 จะปรากฏหน้าจอของการสร้างเอกสารใหม่ New Document ซึ่งประกอบไปด้วย Document Type คือ ประเภทของเอกสารที่จะสร้าง ได้แก่ เอกสาร HTML, CSS, LESS, SCSS, SASS, JavaScript, JSON,PHP, XML, SVG, HTML template, PHP template และ Framework หรือ Layout คือ โครงสร้างรูปแบบของ เอกสาร ในการสร้างเว็บไซต์แบบพื้นฐานจะใช้ประเภทเอกสารเป็น HTML คลิก Create เพื่อสร้างเอกสารใหม่ HTML หน้าจอการทำงานของโปรแกรม Adobe Dreamweaver CC 2018 มีส่วนประกอบต่าง ๆ ดังนี้ 1. แถบเมนูบาร์ (Menu Bar) เป็นแถบชุดคำสั่งที่เก็บรวมรวมคำสั่งต่าง ๆ ที่จำเป็นต่อการใช้งาน โปรแกรม เพื่อให้ง่ายต่อการเข้าถึง และเรียกใช้งาน ประกอบด้วย File, Edit, View, Insert, Tools,Find,Site, Window และ Help 2. แถบเครื่องมือ (Insert Pane!) เป็นแถบที่รวบรวมเครื่องมือในการทำงาน เช่น ข้อความ ภาพเคลื่อนไหวการเชื่อมโยงการแทรก รูปภาพ แทรกตาราง แทรกวันที่ ภาษาสคริปต์ หรือสัญลักษณ์พิเศษ เป็นต้น ประกอบด้วยกลุ่มคำสั่งที่ใช้ทำงานดังนี้
77 • HTML คือ แถบเครื่องมือที่รวบรวมเครื่องมือต่าง ๆ ในการทำงานของเอกสาร HTIML เช่น แท็ก รูปภาพ ข้อความ ลิงก์ ย่อหน้า คีย์เวิร์ด อีเมล ภาพเคลื่อนไหว วิดีโอ เสียง วันที่เวลา ปลั๊กอิน การจัด ตัวอักษร รูปแบบตัวอักษร เป็นต้น • Form คือ แถบเครื่องมือที่รวบรวมเครื่องมือต่าง ๆ ในการทำงานเกี่ยวกับฟอร์ม เช่น การสร้างฟอร์ม ข้อความ อีเมล การกำหนดรหัสผ่าน รูปแบบฟอร์ม ช่วงข้อมูล วันที่เวลา ปุ่ม และเครื่องมือต่าง ๆ เกี่ยวกับการสร้างฟอร์มเก็บข้อมูล • Templates คือ แถบเครื่องมือที่รวบรวมเครื่องมือต่าง ๆ ในการทำงานเกี่ยวกับการสร้างแม่แบบ เอกสารเว็บไซต์ เช่น สร้างแม่แบบเอกสารเว็บ การกำหนดจุดให้กับแม่แบบเอกสารเว็บ เป็นต้น • Bootstrap Components คือ แถบเครื่องมือที่รวบรวมเครื่องมือต่าง ๆ ช่วยให้สามารถพัฒนา ระบบติดต่อกับผู้ใช้ บน (User Interface) ของเว็บแอปพลิเคชันได้อย่างรวดเร็วและดูสวยงาม เช่น ปุ่ม สีฟอร์มคอนโทรลต่าง ๆ ตารางไอคอนแถบเมนู (Menu Bar) ดร็อปดาวน์ (Dropdown) ป๊อปอัพ(Popup) เป็นต้น • jQuery Mobile แถบเครื่องมือที่รวบรวมเครื่องมือต่าง ๆ ในการทำงานที่ช่วยให้สามารถสร้าง เว็บไซต์บนมือถือ (Mobile Website) ได้อย่างสะดวกและรวดเร็ว เช่น การสร้างฟอร์มรับข้อมูลในมือ ถือ กล่องรับข้อความ ปุ่ม เมนูรูปแบบต่าง ๆ เป็นต้น • jQuery U คือ แถบเครื่องมือที่รวบรวมเครื่องมือต่าง ๆ ในการทำงานที่ช่วยให้สามารถออกแบบ ส่วนติดต่อกับผู้ใช้ UI (User Interface) การสร้างเว็บไซต์บนมือถือได้อย่างสะดวกและรวดเร็ว เช่น สร้างการแสดงผลแบบพับได้ Spry Accordion การสร้างแท็บจัดกลุ่มข้อมูล การสร้างปุ่ม เมนู รูปแบบต่าง ๆ เป็นต้น • Favorites คือ แถบเครื่องมือที่รวบรวมเครื่องมือต่าง ๆ ที่ใช้งานบ่อย สามารถเพิ่มเครื่องมือต่าง ๆ ด้วยตัวเอง โดยการคลิกขวา 3. มุมมองการทำงานของโปรแกรม มีไว้เพื่อเลือกสัดส่วนการแสดงผลบนหน้าจอการทำงานของ โปรแกรมผู้สร้างสามารถเลือกรูปแบบการแสดงผล เพื่อตรวจสอบการทำงานหรือข้อผิดพลาดจาก การพัฒนา เว็บไชต์ได้ ตามรูปแบบที่ผู้สร้างเองต้องการ มุมมองการใช้งานโปรแกรม มีดังต่อไปนี้ Design คือ มุมมองออกแบบ เป็นส่วนมุมมองที่แสดงผลของการพัฒนาในรูปแบบเสมือนกับที่ แสดงผลบนหน้าจอเว็บบราวเซอร์ ซึ่งจะแสดงตัวอักษร รูปภาพ ตาราง ลิงค์เชื่อมโยง หรือสื่อมัลติมีเดียอื่น ๆ เพื่อให้ผู้สร้างได้ตรวจสอบข้อผิดพลาดก่อนการใช้งาน ตัวอย่างหน้าจอการทำงานในมุมมองออกแบบ ดังรูป
78 มุมมอง Split เป็นส่วนมุมมองที่แสดงผลและแสดงคำสั่งของเว็บเพจที่กำลังพัฒนา ซึ่งมีส่วนทีให้ ผู้ใช้งานเลือกพิมพ์แก้ไขรหัสคำสั่งที่ผู้สร้างต้องการ หรือเลือกแก้ไขเว็บเพจที่ส่วนการแสดงผลของโปรแกรม ก็ได้ ดังรูป มุมมอง code เป็นส่วนมุมมองที่แสดงผลเฉพาะคำสั่งของเว็บเพจที่กำลังพัฒนา ซึ่งจะแสดงผลคำสั่งที่ เป็นภาษา HTML,CSS รวมไปถึง JavaScript หรือภาษาอื่น ๆ เพื่อให้ผู้สร้างได้พิมพ์คำสั่งเพิ่มเติมตาม ที่ต้องการดังรูป
79 มุมมอง Live เป็นการแสดงผลเว็บไซต์ในโปรแกรม Dreamweaver CC 2018 มุมมอง Live สามารถ แสดงผลได้ทั้งมุมมอง Code และมุมมอง Design ซึ่งจะแสดงผลการทำงานเหมือนกับการแสดงผลของเว็บใน โปรแกรมเว็บบราวเซอร์ เพื่อให้ผู้สร้างได้ตรวจสอบข้อผิดพลาดจากการพัฒนาเว็บ ดังรูป 4. พื้นที่การทำงาน (Workspace ) พื้นที่หน้าจอการทำงานของโปรแกรม เพื่อให้ใช้งานได้สะดวก รวดเร็วต่อการเรียกใช้งาน และเหมาะสมกับผู้สร้าง โดยผู้สร้างสามารถสร้างหน้าจอการทำงานได้เอง หรือเลือกรูปแบบการจัดวางเครื่องมือที่โปรแกรมได้จัดไว้ให้ 5. แถบเครื่องมือ File คือ แถบเครื่องมือในการเก็บไฟล์ต่าง ๆ ที่ใช้ประกอบในการสร้างเว็บไซต์ เช่นไฟล์แฟ้มข้อมูลเว็บไซต์ ไฟล์รูปภาพ ไฟล์เอกสาร HTIML เป็นต้น 6. แถบ Properties คือ แถบเครื่องมือแสดงคุณสมบัติต่าง ๆ ให้กับวัตถุ เช่น รูปภาพ ตาราง ที่ผู้ใช้งานเลือก ซึ่งการกำหนดคุณสมบัติต่าง ๆ เมื่อผู้สร้างเลือกวัตถุใดคุณสมบัติจะเปลี่ยนไปตามวัตถุ ที่ผู้ใช้งานกำลังแก้ไข
80