Dreamweaver 簡介

大家好，今天我們來學習一門實用而且成就感強的專題–Dreamweaver，就像它的標志圖標一樣，我們今后可以稱它 DW。關于 DW 的知識多且細，市面上的介紹寥寥無幾，而且缺少系統性。這個專題我們重點針對 DW 在網頁開發的基礎實戰功能對DW的應用進行講解。本文我們先介紹一下 Dreamweaver 是什么？Dreamweaver 主要優勢有哪些？DW 各版本簡介及推薦？DW 主干學習路線？

1. 為什么要學習 Dreamweaver？

各位同學可能被市面上的一些“誤解”錯誤地引導，認為曾經的網頁三劍客其中個別成員現在評價不是很好，所以 Dreamweaver 就可能不值得學。在這里要告訴各位同學們，這種想法完完全全是有些人誤會了 Dreamweaver 。說 Dreamweaver 不值得學的人大多數是缺少對 Dreamweaver 系統學習，或者對 Dreamweaver 的印象還停留在3年或幾年之前。喜歡這樣講的人還有一部分是由于他們使用了 Dreamweaver 同類型的競品工具，但工具的好壞，時間積淀會說明一切。

Adobe 公司在網頁設計的積淀就好比 PC 界的 MicroSoft ，汽車圈的 Tesla。所以，現在這個在我們面前的 Dreamweaver 早就已經具備了強大的功能，覆蓋你的網頁設計的方方面面?；蛟S有同學會覺得，網頁設計這個詞和時髦的互聯網公司里講的前端/后端工程師比起來是十分老舊？不！ Dreamweaver 能做目前前端工程師手下的大部分工作，而且絕對能夠給你帶來眼前一亮出色表現。

2. 什么是 Dreamweaver ？

我們先來看下官網對 Dreamweaver 是如何介紹的：

Adobe Dreamweaver 為網頁設計軟件提供了一套直觀的可視界面，供您創建和編輯 HTML 網站和移動應用程序。使用專為跨平臺兼容性設計的自適應網格版面創建適應性版面。在發布前使用多屏幕預覽審閱設計。使用更新的“實時視圖”和“多屏預覽”面板高效創建和測試跨平臺、跨瀏覽器的 HTML5 內容。利用增強的 jQuery 和 PhoneGap? 支持構建更出色的移動應用程序?！狝dobe 公司中國區官網

Tips：這里的 HTML5 主要指第五代 HTML 標準，可以理解為更高級的 HTML 語言。

看過了 DW 官網的介紹，簡單說就是 Dreamweaver 能夠適應各種不同的電腦系統。在 DW 使用過程中，你看到的就是你制作好的網頁，不用編寫 HTML 代碼，不用做繁雜的代碼檢查，只需要發布前使用預覽功能檢查一下是不是自己心中理想的效果效果就可以。DW 還能幫助我們做出現在非常時髦的移動程序 — 各種APP。

DreamWearver 是 Dream （夢想）和 weaver （編織工）兩個單詞的組合，直譯為夢想編織人。為什么叫夢想編織人？因為有了 Dreamweaver，我們不必掌握 HTML，CSS，Javascript （一些構成網頁的語言）等程序開發技能就可以設計出界面美觀大方，交互合理的網頁。Dreamweaver 貫穿了網頁設計，發布，管理的方方面面，描述為網頁開發的一站式服務一點兒也不過分。

3. Dreamweaver 適合哪些人群學習？

• 前端從業人員；
• 網頁設計人員；
• 電商從業人員；
• 想要提升網頁制作水平，給自己的網頁增色的學生群體。

以上這些群體，都是 Dreamweaver 最好的受益者，經過各自行業的打磨，目前在現實生活中占比都很高。尤其越來越火的電商，已經有專門為電商從業群體開設的 Dreamweaver 課程。電商網站精美的網頁有很多都是出自 Dreamweaver 之手。

4. Dreamweaver 主要優勢有哪些？

通過訪問 Adobe 公司中國區官網我們可以看到目前的 DW 主要有 3 個突出優勢：

4.1 快速、靈活的編碼

借助經過簡化的智能編碼引擎，輕松地創建、編碼和管理動態網站。訪問代碼提示，用于快速了解并編輯 HTML、CSS 和其他 Web 標準。使用視覺輔助功能減少錯誤并提高網站開發速度?！狝dobe 公司中國區官網

這里的意思說直白就是：Dreamweaver 編寫代碼功能強大，而且提示代碼智能，支持的格式豐富。所見即所得的一個軟件，大大提升了你制作網站的成本和速度。

4.2 通過更少的步驟輕松設置網站。

利用起始模板更快地啟動并運行您的網站，您可以通過自定義這些模板來構建 HTML 電子郵件、“關于”頁面、博客、電子商務頁面、新聞稿和作品集?！狝dobe 公司中國區官網

這里的意思是說 Dreamweaver 這個軟件本身提供了很多“成熟例子”供你選擇使用。這些“例子”不但設計成熟，而且能適應你常見的用途，比如網頁、博客、電商網站、新聞頁面等。這一點好用到甚至你在剛開始學習 Dreamweaver 的時候，就能揮手間創造出市面上很成熟的頁面，畢竟 Dreamweaver 自帶的模版都是符合當下主流設計風格的網頁。

4.3 在各個設備上動態顯示。

構建可以自動調整以適應任何屏幕尺寸的響應式網站。實時預覽網站并進行編輯，確保在進行發布之前網頁的外觀和工作方式均符合您的需求?！狝dobe 公司中國區官網

響應式網站的意思是網頁可以在各種手機，平板，電腦屏幕上很好地顯示。試想一下，現在社會上那么多種尺寸的手機屏幕，如果每一個都要把網頁重新做一遍，那得是多大的工作量？也不符合我們使用 Dreamweaver 便捷高效的初衷。Dreamweaver 的出現恰好替我們解決了這一點，它非常智能地在各個設備上調整自己做出來的網頁。也就是說，Dreamweaver 做出來的網頁能夠輕松在所有人的手機顯示出你預定的樣子，為了適應你的手機/平板/電腦它 Dreamweaver 會智能地自我調整。

4.3 總結

使用過 Adobe 公司其他明星產品的同學會感受到，Adobe 公司在創意領域一直獨領風騷。DW 就是它在網頁制作方面的實力證明。Dreamweaver 把原來只有代碼工程師做的工作簡單化，讓沒有基礎的同學也能很快上手掌握，而且功能涵蓋一應俱全。從這一點上講，Dreamweaver 勝過了所有同類型競品軟件。

5. DW 各版本簡介及推薦？

Dreamweaver 發源于 Macromedia 公司，后來被 Adobe 公司收購。

日常應用中比較常見的版本是 Dreamweaver CS6，這是一個 Dreamweaver 經典版本。因為在 2013 年之前，Adobe 公司對 Dreamweaver 的命名都是以CS 加數字作為軟件名稱。在 2013 年 Adobe 推出了Adobe 創意協作云平臺（Creative Cloud=CC），因此之后的 Dreamweaver 都改為以 Dreamweaver CC 加發布年份來命名了。

除了Dreamweaver CS6 之外，目前主流的 Dreamweaver 版本還包括：

• Dreamweaver CC 2015；
• Dreamweaver CC 2017；
• Dreamweaver CC 2018；
• Dreamweaver CC 2019。

Tips：本教程中會使用 Dreamweaver CC 2018 版本來進行演示講解。

6. 學習基礎及主干學習路線

1. 了解過網頁開發的一般流程，有一定的 HTML，CSS，JavaScript 基礎；

2. 若想成為 Dreamweaver 高級應用者，還需了解一些 Web 開發基礎。

7. 主干學習路線

按照 Dreamweaver 官網的提供的信息，可以把 Dreamweaver 的學習科學地劃分為 11 個階段，每個過程對應一系列知識點，大家可以跟著這 11 個過程來獲取學習中的重點：

1. 大致了解你能用 Dreamweaver 做哪些事情；
2. 結合 Dreamweaver 了解網站的結構；
3. 結合 Dreamweaver 了解web設計的幾個階段；
4. 結合 Dreamweaver 學習如何定義一個網站；
5. 結合 Dreamweaver 使用HTML定義一個頁面結構；
6. 結合 Dreamweaver 給你制作的的網頁添加內容；
7. 結合 Dreamweaver 用CSS 裝飾你的網頁；
8. 在瀏覽器和移動設備上預覽你的網頁；
9. 用 Dreamweaver 發布和管理你的網站；
10. 使用 Dreamweaver 高效開發網站基礎；
11. 一些可使用的 Dreamweaver 擴展工具。