หน่วยที่ 5

หัวขอเรอื่ ง (Topics) 5.1 รูจักกับโปรแกรม Adobe Dreamweaver CC 2018 5.2 การตดิ ต้ังโปรแกรม Adobe Dreamweaver CC 2018 5.3 สว นประกอบตาง ๆ ของโปรแกรม Adobe Dreamweaver CC 2018



Adobe Dreamweaver CC เปนหน่งึ ในชุดโปรแกรม Adobe Creative Cloud เปนโปรแกรมทมี่ ี เครือ่ งมือในการสรางเว็บไซตคณุ ภาพสงู มี หลากหลายเครอ่ื งมอื ชว ยใหสรา งเว็บไซตไ ดส ะดวกสบายขนึ้ นอกจากน้ี ยังรองรับการเขยี นภาษาDHTML หรอื ท่รี ูจ ักกนั ในนามของ Dynamic HTML ซ่งึ จะชว ยเพิม่ ลูกเลน ใหก บั เว็บเพจ อีกทง้ั มีระบบชว ยเติม Source Code ของภาษาHTML อยา งอตั โนมตั ิ และยงั สามารถ ชวยจดั การกําหนดคา ของ รูปภาพทีจ่ ะนํามาใสป ระกอบในเว็บไซตไ ดอ ยางสะดวก โดยการเพ่มิ คาํ และประโยค ใหกบั การเขยี นเว็บไซตแบบอตั โนมัติ โปรแกรมน้ีเปน ท่นี ยิ มกันมากใน หมูของเว็บมาสเตอรต า ง ๆ ท้งั ใน เมืองไทยและตา งประเทศ 5.1.1 คณุ สมบตั ิใหมข องโปรแกรม 1. ชุดงานท่ีสงออกจาก PSDs ทําใหป ระหยัดเวลาไดอ ยา งรวดเรว็ โดยการแยกภาพเว็บทดี่ ี ทสี่ ุดจากเอกสาร Adobe Photoshop ในหลาย ความละเอยี ดและรูปแบบ ทาํ งานรว มกบั ไฟลเอกสารจาก โปรแกรม Photoshop (*.psd) ได โดยโปรแกรมสามารถแยกองคประกอบภาพกราฟก ของ ไฟล .psd และ คัดลอกวาง หรอื ลากวาง (Drag and Drop) ลงบนหนาจอของโปรแกรม Adobe Dreamweaver ไดทนั ที โดยโปรแกรมจะทําหนาที่ แปลงองคประกอบภาพกราฟกไปเปนรหสั คาํ สั่ง ซเี อสเอส ซึ่งจะมรี ปู แบบการ แสดง ผลทง้ั ตวั อกั ษร สี เงาและกราฟกอ่นื ๆ จากไฟลเอกสาร .psd 2. สรางเวบ็ ไซตท ป่ี รับใหพ อดกี บั ขนาดหนาจอหลายตัวในการเรมิ่ ตน ระบบแบบไดนามกิ ปรบั ปรงุ เวบ็ ไซตเร่ิมตน จาก Scratch การใช Templates หรอื รวมสวนประกอบ Bootstrap แสดงผลตวั อยางการออกแบบในเวลาจรงิ โดยการปรับขนาดแบบ Live View ใน Dreamweaver ระบุ media queries Visually และอนื่ ๆ 3. การทดสอบและการตรวจสอบเว็บไซตบนอุปกรณหลายคนพรอมกนั เพียงพมิ พ URL ที่ สั้นลงในบราวเซอรโ ทรศัพทม อื ถอื เพ่ือดูตัวอยาง เวบ็ ไซตไ ด 4. รูปแบบการแกไ ขโคด ใหม การตรวจสอบโคดแบบเรยี ลไทมก บั Linting และทําใหส มบรู ณ อัตโนมตั ิ ดวยการสนบั สนุนใหเ ขียน โคด ใน Dreamweaver ไดเรว็ ขน้ึ และงา ยกวา เดมิ 5. รองรับ CSS3 และ HTML5 ทําใหผูสร างสามารถใชง านแท็กคาํ ส่งั หรือคุณสมบัตใิ หมที่ เปน มาตรฐานท่ปี ระกาศใชง านตามมาตรฐานใหม ของการออกแบบและพฒั นาเว็บไซต ทําใหเว็บไซตที่ไดม ี ความเปนมาตรฐาน สามารถแสดงผลไดในทกุ อุปกรณ ทกุ เว็บบราวเซอร และสามารถ แสดงผลไดใ นทกุ ระบบ ปฏิบตั กิ าร เปนตน 6. รองรบั การแสดงผลตัวอยา งรหสั คาํ สัง่ (Hinting) ภาษาPHP รวมไปถึง Ajax และ Java Script โดยโปรแกรมสามารถแสดงผล คําสัง่ ขึ้นมา เพื่อใหผสู รา งเลือกใชในกรณีทีผ่ สู รา งพิมพค ําสั่ง เพ่อื ให ผูสรา งเลอื กใชง านไดอยา งสะดวก รวดเร็ว และปองกนั ขอผดิ พลาด จากการพิมพคาํ สั่งที่ไมถูกตอง

7. สามารถฝง ฟอนตล งในเวบ็ ไซตใ นรูปแบบของเวบ็ ฟอนต (Web Font) ได เพือ่ ใหห นา เว็บเพจ แสดงผลรูปแบบตัวอกั ษรตามทผี่ สู ราง ตองการ เพ่อื ความสวยงามในการนําเสนอ รองรบั การฝงฟอนตล งในหนา เวบ็ ไซต ทําให เครอื่ งผูใชงานสามารถแสดงผลแบบตัวอักษรได แมไม ได ตดิ ตง้ั ฟอนตล งไปในเคร่อื งผูใ ช งาน ผสู รา ง สามารถฝง ฟอนตไดโ ดยใชเว็บไซตส รางเว็บฟอนต ตัวอยา งการ แปลงฟอนตเ พ่ือใหใชง านไดบ นเวบ็ ไซต 8. คนหาภาพทส่ี มบูรณแบบสาํ หรับเว็บไซตใน Adobe Stock Marketplace. สาํ รวจไลบรารี ที่เคยขยายตวั ของภาพถา ย หรอื ภาพประกอบ และดาวนโหลดไดโดยตรงกับ Creative Cloud 5.1.2 ความตองการพน้ื ฐานในการตดิ ตง้ั โปรแกรม ตารางที่ 5.1 ความตองการพ้นื ฐานในการตดิ ตั้งโปรแกรม ตารางที่ 5.1 (ตอ ) ความตอ งการพนื้ ฐานในการตดิ ต้งั โปรแกรม



การดาวนโหลดโปรแกรม Adobe Dreamweaver CC 2018 สามารถทาํ ไดโ ดยคลกิ ทีเ่ วบ็ ไซต https://www.adobe.com/sea/products/catalog.html เพอ่ื เลือกโปรแกรมในการดาวนโ หลดได คลกิ เลอื ก โปรแกรม Dreamweaver สามารถเลือกดาวนโ หลดโดยการซอ้ื Buy Now จะไดโปรแกรมทสี่ ามารถใชงาน ไดต ลอดไป หรือดาวนโ หลดโดยใช เวอรชน่ั ทดลอง (Download Trial) ใชซ ่งึ โปรแกรมของบรษิ ัท Adobe มนี โยบายไมตดั ฟเ จอรใ ด ๆ ของโปรแกรมออกเลย แตมี ระยะเวลาการทดลองใช 7 วนั โปรแกรมจะนับวัน ตง้ั แตก ารตดิ ตงั้ หากอยากใชงานตอ ตองมีคาใชจายในการตอ อายโุ ปรแกรม การ ติดตัง้ โปรแกรม Adobe Dreamweaver CC 2018 มีขน้ั ตอนการติดต้ังดงั น้ี 1. ดาวนโ หลดและติดตงั้ โปรแกรม Creative Cloud Apps ซง่ึ เปนโปรแกรมทีใ่ หบ ริการในการ ดาวนโหลดชดุ โปรแกรมตาง ๆ ของบรษิ ัท Adobe ทเี่ ว็บไซต https://www.adobe.com/sea/creativecloud/ catalog/desktop.html ดังรปู ท่ี 5.2 รปู ที่ 5.2 ดาวนโ หลดและตดิ ตัง้ โปรแกรม Creative Cloud Apps

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) คลกิ โปรแกรม Dreamweaver CC คลกิ ป่มุ Try 8. รอสกั ครู่ โปรแกรม Creative Cloud กาํ ลงั ทาํ การตดิ ตงั้ โปรแกรม Dreamweaver CC 9. เมอ่ื ตดิ ตงั้ เสรจ็ เรยี บรอ้ ย คลกิ ปุ่ม Start Trial 10. เมอ่ื ตดิ ตงั้ โปรแกรมเวอรช์ นั่ ทดลองใชแ้ ลว้ ทโ่ี ปรแกรม Creative Cloud จะเปลย่ี นเป็นป่มุ Buy Now และจะมขี อ้ ความแจง้ ใหท้ ราบวา่ ไดเ้ รม่ิ ใชโ้ ปรแกรม Dreamweaver CC ในรนุ่ ทดลองใช้ (trial) 7 วนั 11. คลกิ เขา้ สโู่ ปรแกรมจะแสดงหน้าจอการทดลองใชง้ าน คลกิ ป่มุ continue trial 12. โปรแกรมจะแสดงหน้าจอการเรม่ิ ทาํ งาน คลกิ Create New เพอ่ื เรมิ่ ใชง้ านโปรแกรม



หนา จอการทํางานของโปรแกรม Adobe Dreamweaver CC 2018 เมอื่ เปดโปรแกรมขนึ้ มาจะพบ กับหนา จอวาง ๆ ใหคลกิ ท่ีเมนู File > New เพ่อื สรางเอกสารใหม ดังรปู จะปรากฏหนา จอของการสรา งเอกสารใหม New Document ซึง่ ประกอบไปดว ย Document Type คอื ประเภทของเอกสารที่จะ สราง ไดแก เอกสาร HTML, CSS, LESS, SCSS, SASS, JavaScript, JSON, PHP, XML, SVG, HTML template, PHP template และ Framework หรือ Layout คือ โครงสราง รูปแบบของเอกสาร ในการสรา งเวบ็ ไซตแ บบพืน้ ฐานจะใชประเภทเอกสารเปน HTML คลิก Create เพื่อ สรา งเอกสารใหม HTML 1. แถบเมนบู าร (Menu Bar) เปนแถบชดุ คําสง่ั ทเ่ี กบ็ รวมรวมคาํ สง่ั ตาง ๆ ทจี่ าํ เปน ตอ การใช งานโปรแกรม เพอื่ ใหงา ยตอ การเขา ถงึ และเรียกใชง าน ประกอบดวย File, Edit, View, Insert, Tools, Find, Site, Window และ Help 2. แถบเคร่อื งมือ (Insert Panel) เปน แถบทร่ี วบรวมเคร่อื งมือในการทาํ งาน เชน ขอความ ภาพ เคลอื่ นไหว การเชือ่ มโยงการ แทรก รปู ภาพ แทรกตาราง แทรกวันท่ี ภาษาสคริปต หรอื สัญลักษณพ เิ ศษ เปน ตน ประกอบดว ยกลุมคาํ สัง่ ทใี่ ชท ํางานดงั น้ี • HTML คือ แถบเคร่ืองมือทีร่ วบรวมเครอ่ื งมือตา ง ๆ ในการทาํ งานของเอกสาร HTML เชน แทก็ รปู ภาพ ขอ ความ ลิงก ยอ หนา คีย เวริ ด อเี มล ภาพเคลือ่ นไหว วิดโี อ เสยี ง วนั ท่ีเวลาปลก๊ั อนิ การจัด ตัวอักษร รูปแบบตวั อกั ษร เปนตน • Form คอื แถบเครอ่ื งมอื ที่รวบรวมเคร่ืองมือตาง ๆ ในการทาํ งานเก่ียวกบั ฟอรม เชน การสรา ง ฟอรม ขอความ อเี มล การกาํ หนด รหสั ผาน รปู แบบฟอรม ชว งขอ มลู วันที่เวลาปุม และเคร่อื งมอื ตา ง ๆ เก่ยี วกับการสรา งฟอรม เกบ็ ขอ มลู • Templates คอื แถบเคร่ืองมือทีร่ วบรวมเครื่องมือตาง ๆ ในการทํางานเกยี่ วกับการสรา งแม แบบเอกสารเวบ็ ไซต เชน สราง แมแ บบเอกสารเวบ็ การกาํ หนดจดุ ใหก บั แมแ บบเอกสารเวบ็ เปนตน • Bootstrap Components คอื แถบเครื่องมือทร่ี วบรวมเคร่ืองมือตา ง ๆ ชว ยใหสามารถพฒั นาระบบตดิ ตอ กบั ผูใ ช UI (User Interface) ของเวบ็ แอปพลเิ คชนั ไดอยา งรวดเรว็ และดสู วยงาม เชน ปมุ สี ฟอรมคอนโทรลตาง ๆ ตารางไอคอนแถบเมนู (Menu Bar) ดร็อป ดาวน (Dropdown) ปอ ปอัพ (Popup) เปน ตน • jQuery Mobile แถบเครื่องมือทร่ี วบรวมเครื่องมอื ตา ง ๆ ในการทาํ งานทช่ี วยใหส ามารถสรา ง เว็บไซตบนมอื ถือ (Mobile Website) ไดอ ยางสะดวกและรวดเรว็ เชน การสรา งฟอรม รบั ขอ มลู ในมอื ถอื กลอ งรบั ขอ ความ ปมุ เมนูรปู แบบตา ง ๆ เปนตน

• jQuery UI คอื แถบเครือ่ งมือทีร่ วบรวมเคร่ืองมอื ตา ง ๆ ในการทํางานท่ชี ว ยใหส ามารถออกแบบ สว นติดตอกับผใู ช UI (User Interface) การสรา งเว็บไซตบ นมือถอื ไดอยางสะดวกและรวดเร็ว เชน สรา งการ แสดงผลแบบพับได Spry Accordion การสรา งแทบ็ จัดกลมุ ขอมูล การสรา งปมุ เมนรู ูปแบบตาง ๆ เปน ตน • Favorites คือ แถบเครอ่ื งมือทร่ี วบรวมเคร่อื งมอื ตาง ๆ ที่ใชงานบอ ย สามารถเพิม่ เครือ่ งมอื ตา ง ๆ ดว ยตวั เอง โดยการคลิกขวา 3. มมุ มองการทํางานของโปรแกรม มไี วเ พ่อื เลือกสดั สวนการแสดงผลบนหนา จอการทํางานของ โปรแกรม ผสู รา งสามารถเลือก รปู แบบการแสดงผล เพอ่ื ตรวจสอบการทํางานหรอื ขอ ผิดพลาดจาก การพัฒนาเวบ็ ไซตได ตามรูปแบบท่ผี ูส รา งเองตองการ มุมมองการใชงาน โปรแกรม มดี ังตอ ไปนี้ • Design คอื มุมมองออกแบบ เปนสว นมมุ มองท่ีแสดงผลของการพฒั นาในรูปแบบเสมือนกบั ท่ี แสดงผลบนหนา จอเวบ็ บราวเซอร ซึง่ จะ แสดงตวั อักษร รปู ภาพ ตาราง ลิงกเชื่อมโยง หรือสือ่ มลั ตมิ เี ดียอื่น ๆ เพ่อื ใหผสู รา งไดตรวจสอบขอผดิ พลาดกอ นการใชงาน ตวั อยา งหนาจอการ ทาํ งานในมุมมองออกแบบ ดังรปู • มุมมอง Split เปน สวนมุมมองที่แสดงผลและแสดงคาํ สง่ั ของเวบ็ เพจทกี่ ําลงั พฒั นาซง่ึ มีสว นที่ใหผ ใู ชงานเลอื กพมิ พแ กไ ขรหสั คําสง่ั ท่ี ผสู รางตองการ หรือเลอื กแกไขเวบ็ เพจทสี่ วนการแสดงผล ของโปรแกรมกไ็ ด ดังรปู • มมุ มอง Code เปน สวนมมุ มองทีแ่ สดงผลเฉพาะคาํ สงั่ ของเวบ็ เพจทก่ี าํ ลังพัฒนาซงึ่ จะแสดง ผลคําส่ังที่เปน ภาษาHTML, CSS รวมไปถงึ JavaScript หรือภาษาอืน่ ๆ เพอื่ ใหผสู รา งไดพ มิ พค ําสง่ั เพิม่ เตมิ ตามที่ตองการดังรูป • มุมมอง Live เปน การแสดงผลเว็บไซตในโปรแกรม Dreamweaver CC 2018 มมุ มอง Live สามารถแสดงผลไดท ง้ั มมุ มอง Code และ มมุ มอง Design ซึง่ จะแสดงผลการทาํ งานเหมอื นกบั การแสดงผล ของเวบ็ ในโปรแกรมเว็บบราวเซอร เพ่ือใหผสู รา งไดตรวจสอบขอผดิ พลาดจาก การพฒั นาเว็บ ดังรูป 4. พ้ืนทีก่ ารทํางาน (Workspace) พน้ื ที่หนา จอการทาํ งานของโปรแกรม เพ่ือใหใชง านไดสะดวก รวดเรว็ ตอการเรียกใชงาน และ เหมาะสมกบั ผูส ราง โดยผูสรา งสามารถสรางหนา จอการทาํ งานไดเอง หรือ เลือกรูปแบบการจัดวางเครอื่ งมือทโี่ ปรแกรมไดจ ัดไวใ ห 5. แถบเคร่ืองมือ File คอื แถบเครอ่ื งมือในการเก็บไฟลตา ง ๆ ท่ใี ชป ระกอบในการสรา งเวบ็ ไซต เชน ไฟลแ ฟมขอ มลู เวบ็ ไซต ไฟล รูปภาพ ไฟลเอกสาร HTML เปนตน 6. แถบ Properties คอื แถบเครอ่ื งมอื แสดงคณุ สมบัติตา ง ๆ ใหก บั วัตถุ เชน รูปภาพ ตาราง ทผี่ ูใ ช งานเลือก ซ่ึงการกาํ หนด คุณสมบตั ิตาง ๆ เมอ่ื ผสู รา งเลอื กวตั ถใุ ดคณุ สมบัติจะเปลย่ี นไปตามวตั ถุท่ีผใู ชงาน กําลังแกไ ข