ข้อ ใด ขั้น ตอน แรก ในการ ติด ตั้ง โปรแกรม Adobe Dreamweaver cc 2022

คุณสามารถสร้างเว็บไซต์โดยใช้เครื่องมือต่างๆ ได้มากมาย—บางตัวทำงานออนไลน์, บางตัวทำงานบนเครื่องคอมพิวเตอร์ของคุณ, บางตัวทำงานออนไลน์บางส่วน, บางส่วนในเครื่องของคุณ—แต่ Adobe Dreamweaver 2020 เป็นแอปสร้างเว็บไซต์เพียงแอปเดียว เหมาะสำหรับนักออกแบบรายบุคคลเช่นเดียวกับโครงการระดับองค์กรมีประโยชน์พอๆ กันเมื่อคุณสร้างไซต์โดยการเขียนโค้ดจริง เช่นเดียวกับเมื่อทำงานในเลย์เอาต์กราฟิกแบบ WYSIWYG ที่ซ่อนโค้ดทั้งหมดไว้จนกว่าคุณจะต้องการแอพทำงานให้เสร็จสำหรับผู้ใช้แต่ละรายหรือแต่ละทีม โดยที่สมาชิกในทีมแต่ละคนมีระดับอิสระในการเพิ่มหรือเปลี่ยนแปลงเนื้อหาที่แตกต่างกัน และแน่นอนว่ามันทำงานได้อย่างราบรื่นด้วยคลังแสงของแอพกราฟิกและบริการเว็บของ Adobe

เช่นเดียวกับแอพ Adobe อื่น ๆ ทั้งหมดมาใน Mac และ Windows เวอร์ชันที่แทบเหมือนกัน และสามารถใช้ได้ผ่านการสมัครสมาชิกแบบชำระเงิน Dreamweaver เท่านั้น ($ 20.99 ต่อเดือนโดยมีข้อผูกมัด 1 ปี $ 31.49 ต่อเดือนหรือ $239.88 สำหรับการชำระล่วงหน้าหนึ่งปี ) หรือเป็นส่วนหนึ่งของชุด Creative Cloud เต็มรูปแบบ ($52.99 ต่อเดือน) ซึ่งจะทำให้คุณได้รับ Photoshop, Illustrator และซอฟต์แวร์และแอปสร้างสรรค์อื่นๆ ทั้งหมดทั้งแอพเดี่ยวและการสมัครสมาชิกแบบเต็มมาพร้อมกับที่เก็บข้อมูลบนคลาวด์ 100GB

การออกแบบเว็บไซต์ที่ตอบสนอง

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

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

Adobe ต้องการให้คุณทำงานกับเครื่องมือของ Adobe ดังนั้นจึงเป็นเรื่องง่ายที่จะใช้ Photoshop และ Illustrator เพื่อแก้ไขภาพหรือ Premiere Pro และ Audition สำหรับไฟล์วิดีโอและเสียงคุณยังสามารถใช้ Photoshop เพื่อสร้างม็อคอัพของสิ่งที่คุณต้องการให้ไซต์ของคุณดูเหมือน แล้วใช้เมนู Extract ของ Dreamweaver เพื่อลากองค์ประกอบจากไฟล์ Photoshop ไปยังหน้าเว็บของคุณแต่ Dreamweaver ยังใช้งานได้กับเครื่องมือสร้างเว็บไซต์ของบริษัทอื่นที่คุณอาจต้องการใช้ตัวอย่างเช่น คุณสามารถใช้ Dreamweaver เพื่อออกแบบและแก้ไขไซต์ที่จัดการโดย WordPress, Joomla!หรือ Drupal หรือคุณสามารถสร้างที่เก็บ Git และใช้เพื่อติดตามการเปลี่ยนแปลงในเว็บไซต์ของคุณ

Dreamweaver ใช้เฟรมเวิร์ก Bootstrap สำหรับไซต์ที่ตอบสนอง และตามค่าเริ่มต้นแล้วจะใช้ Bootstrap เวอร์ชันล่าสุด 4.3.1 แม้ว่าเวอร์ชัน 3.4.1 ก่อนหน้าจะยังคงอยู่ในตัวหากคุณต้องการใช้งานต่อไปDreamweaver จะแนะนำคุณตลอดการอัพเกรดไซต์โดยอิงจากเวอร์ชันก่อนหน้า และพยายามแก้ไขปัญหาความไม่ลงรอยกันโดยการสร้างไฟล์ CSS และ JavaScript ใหม่ที่ใช้มาตรฐานล่าสุดไซต์ที่ตอบสนองของ Bootstrap นั้นเน้นไปที่อุปกรณ์พกพา หมายความว่าเฟรมเวิร์ก Bootstrap นั้นได้รับการปรับให้เหมาะสมสำหรับโทรศัพท์หรือแท็บเล็ตเป็นส่วนใหญ่ แต่เทมเพลต Bootstrap ในตัวของ Adobe นั้นได้รับการออกแบบมาอย่างดีเพื่อให้ดูดีเท่าเทียมกันบนเดสก์ท็อปและโทรศัพท์

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

เมื่อแก้ไขเว็บไซต์ทั่วไปที่ค่อนข้างเรียบง่าย คุณต้องเปิดแท็บเอกสารอย่างน้อยสี่แท็บ แท็บหนึ่งสำหรับหน้าปัจจุบัน แท็บอื่นสำหรับไฟล์ JavaScript และ CSS และแผงข้อมูลที่มีอย่างน้อยเจ็ดแท็บ แสดงไฟล์ ไลบรารี Creative Cloud, HTML แท็กที่คุณสามารถลากลงในไฟล์ได้ ชุดควบคุม CSS ที่ซับซ้อน โครงสร้าง Document Object Model (DOM) รายการทรัพย์สิน (จัดเรียงเป็น URL รูปภาพ สื่อ และอื่นๆ) และรายการที่สร้างไว้ล่วงหน้าและกำหนดเองแบบยาว - ตัวอย่างที่สร้างขึ้นเพิ่มแถบเครื่องมือที่ปรับแต่งได้ทางด้านซ้ายและเมนูที่มีประชากรหนาแน่นที่ด้านบนนี้ และคุณมีอินเทอร์เฟซที่ซับซ้อนที่สุดเท่าที่เคยมีมาในแอพ ซึ่งเทียบได้กับซอฟต์แวร์การพัฒนาอื่นๆ เช่น Microsoft Visual Studio เท่านั้น

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

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

คุณสมบัติใหม่

Dreamweaver 2020 ที่เพิ่งเปิดตัวมีรูปลักษณ์และใช้งานได้เกือบเหมือนกับ Dreamweaver 2019 ของปีที่แล้วAdobe กล่าวถึงคุณลักษณะใหม่เพียงสามประการ: คลิกเพื่อแก้ไขอย่างง่ายใน Live view ดังนั้นคุณจึงสามารถแก้ไขข้อความ ไม่ใช่แค่แท็ก ใน Live view ได้ง่ายๆ เพียงคลิกที่องค์ประกอบข้อความ การตั้งค่าเริ่มต้นใหม่สำหรับแบบอักษรภาษาญี่ปุ่น และป๊อปอัปการบอกรหัสที่ปรับปรุงแล้วไม่มีช่วงการเรียนรู้ใหม่ๆ และอินเทอร์เฟซและคุณลักษณะอื่นๆ ก็ไม่เปลี่ยนแปลงgotcha ที่อาจเกิดขึ้นเล็กน้อยในคุณลักษณะการแก้ไข Live view ที่ได้รับการปรับปรุงคือการกดแป้นบางแป้นไม่เป็นไปตามที่คุณคาดหวังตัวอย่างเช่น คุณสามารถแบ่งย่อหน้าโดยกด Enter ในข้อความบางข้อความใน Live view แต่ Backspace จะไม่รวมย่อหน้าที่แยกใหม่ คุณจะต้องเปลี่ยนเป็นมุมมองโค้ดและเอาแท็กสำหรับย่อหน้าใหม่ออก

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

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

หากคุณไม่ต้องการคิดเกี่ยวกับการเขียนโค้ดเลย ให้ใช้บริการโฮสติ้งที่มี Wix หรือ Weebly หรือสภาพแวดล้อมการสร้างเว็บไซต์แบบภาพอื่นๆ ที่ไม่ต้องการการเข้ารหัสใดๆได้รับการเตือนว่าคุณจะต้องเสียสละความสามารถในการปรับแต่งและการควบคุมบางอย่างWeebly ให้คุณเปลี่ยนธีมได้ทุกเมื่อ แต่มีตัวเลือกที่จำกัดสำหรับการจัดรูปแบบข้อความทั้งสองเสนอตัวเลือกอีคอมเมิร์ซแบบชำระเงินคุณยังสามารถลองใช้ระบบ CKEditor สำหรับองค์กรในเวอร์ชันฟรี ซึ่งมีคุณลักษณะขั้นสูง เช่น การแก้ไขร่วมกัน การแก้ไขแบบ WYSIWYG และการควบคุมโค้ดของไซต์ของคุณได้อย่างเต็มที่

สำหรับเว็บไซต์ขนาดเล็กที่ออกแบบมาสำหรับแล็ปท็อปและเบราว์เซอร์เดสก์ท็อปเป็นส่วนใหญ่ คุณสามารถใช้โปรแกรมแก้ไขหน้าเว็บแบบดั้งเดิม เช่น RapidWeaver หรือ Coda บน Mac ได้ แต่คุณจะไม่ได้รับการแก้ไขแบบ WYSIWYG อย่างแท้จริง เช่นเดียวกับใน Dreamweaver หรือระบบบนเบราว์เซอร์ เช่น เวิร์ดเพรสหรือ Wix.ตัวแก้ไขหน้าเว็บแบบดั้งเดิมจำนวนมากมีโหมดแสดงตัวอย่าง และบางตัว (เช่น โปรแกรมแก้ไขวงเล็บที่ยอดเยี่ยมและฟรีของ Adobe) มีการแสดงตัวอย่างแบบเรียลไทม์ในเบราว์เซอร์ของคุณ แต่นั่นไม่เหมือนกับการแก้ไขทั้งหมดในโหมด WYSIWYG เช่นเดียวกับในโหมดแก้ไขสดของ Dreamweaver

โปรแกรมแก้ไขเว็บ WYSIWYG ที่รวดเร็วและสะอาดที่ฉันโปรดปรานสำหรับไซต์ทั่วไปคือ Expression Web ที่ให้บริการฟรีสำหรับ Windows เท่านั้นของ Microsoft ซึ่งเดิมเป็นแอปราคาสูง แต่ตอนนี้ดาวน์โหลดฟรี เนื่องจาก Microsoft หยุดอัปเดตหลังจาก Visual Studio ให้การสร้างไซต์ขั้นสูงขึ้น เครื่องมือExpression Web ไม่ได้รับการอัปเดตตั้งแต่ปี 2011 แต่ชุดคุณลักษณะยังคงทำงานให้เสร็จสิ้นสำหรับเว็บไซต์พื้นฐาน และคุณไม่สามารถโต้เถียงกับราคาได้

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

ยังคงยอดเยี่ยม

แม้จะมีปัญหาเล็กน้อย แต่ Adobe Dreamweaver 2020 ส่วนใหญ่สร้างขึ้นเหมือนเรือรบ และมีการผสมผสานที่ดีที่สุดของความยืดหยุ่น พลัง และความง่ายของเครื่องมือใดๆ ที่เคยประดิษฐ์ขึ้นสำหรับการสร้างเว็บไซต์Dreamweaver ไม่มีการแข่งขันที่แท้จริง และไม่มีนักออกแบบเว็บไซต์ที่จริงจังไม่ควรขาดมันDreamweaver คือ PCMag Editors' Choice สำหรับโปรแกรมพัฒนาเว็บไซต์