Dreamweaver 簡(jiǎn)介

大家好，今天我們來學(xué)習(xí)一門實(shí)用而且成就感強(qiáng)的專題–Dreamweaver，就像它的標(biāo)志圖標(biāo)一樣，我們今后可以稱它 DW。關(guān)于 DW 的知識(shí)多且細(xì)，市面上的介紹寥寥無幾，而且缺少系統(tǒng)性。這個(gè)專題我們重點(diǎn)針對(duì) DW 在網(wǎng)頁開發(fā)的基礎(chǔ)實(shí)戰(zhàn)功能對(duì)DW的應(yīng)用進(jìn)行講解。本文我們先介紹一下 Dreamweaver 是什么？Dreamweaver 主要優(yōu)勢(shì)有哪些？DW 各版本簡(jiǎn)介及推薦？DW 主干學(xué)習(xí)路線？

1. 為什么要學(xué)習(xí) Dreamweaver？

各位同學(xué)可能被市面上的一些“誤解”錯(cuò)誤地引導(dǎo)，認(rèn)為曾經(jīng)的網(wǎng)頁三劍客其中個(gè)別成員現(xiàn)在評(píng)價(jià)不是很好，所以 Dreamweaver 就可能不值得學(xué)。在這里要告訴各位同學(xué)們，這種想法完完全全是有些人誤會(huì)了 Dreamweaver 。說 Dreamweaver 不值得學(xué)的人大多數(shù)是缺少對(duì) Dreamweaver 系統(tǒng)學(xué)習(xí)，或者對(duì) Dreamweaver 的印象還停留在3年或幾年之前。喜歡這樣講的人還有一部分是由于他們使用了 Dreamweaver 同類型的競(jìng)品工具，但工具的好壞，時(shí)間積淀會(huì)說明一切。

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

2. 什么是 Dreamweaver ？

我們先來看下官網(wǎng)對(duì) Dreamweaver 是如何介紹的：

Adobe Dreamweaver 為網(wǎng)頁設(shè)計(jì)軟件提供了一套直觀的可視界面，供您創(chuàng)建和編輯 HTML 網(wǎng)站和移動(dòng)應(yīng)用程序。使用專為跨平臺(tái)兼容性設(shè)計(jì)的自適應(yīng)網(wǎng)格版面創(chuàng)建適應(yīng)性版面。在發(fā)布前使用多屏幕預(yù)覽審閱設(shè)計(jì)。使用更新的“實(shí)時(shí)視圖”和“多屏預(yù)覽”面板高效創(chuàng)建和測(cè)試跨平臺(tái)、跨瀏覽器的 HTML5 內(nèi)容。利用增強(qiáng)的 jQuery 和 PhoneGap? 支持構(gòu)建更出色的移動(dòng)應(yīng)用程序。—Adobe 公司中國(guó)區(qū)官網(wǎng)

Tips：這里的 HTML5 主要指第五代 HTML 標(biāo)準(zhǔn)，可以理解為更高級(jí)的 HTML 語言。

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

DreamWearver 是 Dream （夢(mèng)想）和 weaver （編織工）兩個(gè)單詞的組合，直譯為夢(mèng)想編織人。為什么叫夢(mèng)想編織人？因?yàn)?strong>有了 Dreamweaver，我們不必掌握 HTML，CSS，Javascript （一些構(gòu)成網(wǎng)頁的語言）等程序開發(fā)技能就可以設(shè)計(jì)出界面美觀大方，交互合理的網(wǎng)頁。Dreamweaver 貫穿了網(wǎng)頁設(shè)計(jì)，發(fā)布，管理的方方面面，描述為網(wǎng)頁開發(fā)的一站式服務(wù)一點(diǎn)兒也不過分。

3. Dreamweaver 適合哪些人群學(xué)習(xí)？

• 前端從業(yè)人員；
• 網(wǎng)頁設(shè)計(jì)人員；
• 電商從業(yè)人員；
• 想要提升網(wǎng)頁制作水平，給自己的網(wǎng)頁增色的學(xué)生群體。

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

4. Dreamweaver 主要優(yōu)勢(shì)有哪些？

通過訪問 Adobe 公司中國(guó)區(qū)官網(wǎng)我們可以看到目前的 DW 主要有 3 個(gè)突出優(yōu)勢(shì)：

4.1 快速、靈活的編碼

借助經(jīng)過簡(jiǎn)化的智能編碼引擎，輕松地創(chuàng)建、編碼和管理動(dòng)態(tài)網(wǎng)站。訪問代碼提示，用于快速了解并編輯 HTML、CSS 和其他 Web 標(biāo)準(zhǔn)。使用視覺輔助功能減少錯(cuò)誤并提高網(wǎng)站開發(fā)速度?！狝dobe 公司中國(guó)區(qū)官網(wǎng)

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

4.2 通過更少的步驟輕松設(shè)置網(wǎng)站。

利用起始模板更快地啟動(dòng)并運(yùn)行您的網(wǎng)站，您可以通過自定義這些模板來構(gòu)建 HTML 電子郵件、“關(guān)于”頁面、博客、電子商務(wù)頁面、新聞稿和作品集?！狝dobe 公司中國(guó)區(qū)官網(wǎng)

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

4.3 在各個(gè)設(shè)備上動(dòng)態(tài)顯示。

構(gòu)建可以自動(dòng)調(diào)整以適應(yīng)任何屏幕尺寸的響應(yīng)式網(wǎng)站。實(shí)時(shí)預(yù)覽網(wǎng)站并進(jìn)行編輯，確保在進(jìn)行發(fā)布之前網(wǎng)頁的外觀和工作方式均符合您的需求?！狝dobe 公司中國(guó)區(qū)官網(wǎng)

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

4.3 總結(jié)

使用過 Adobe 公司其他明星產(chǎn)品的同學(xué)會(huì)感受到，Adobe 公司在創(chuàng)意領(lǐng)域一直獨(dú)領(lǐng)風(fēng)騷。DW 就是它在網(wǎng)頁制作方面的實(shí)力證明。Dreamweaver 把原來只有代碼工程師做的工作簡(jiǎn)單化，讓沒有基礎(chǔ)的同學(xué)也能很快上手掌握，而且功能涵蓋一應(yīng)俱全。從這一點(diǎn)上講，Dreamweaver 勝過了所有同類型競(jìng)品軟件。

5. DW 各版本簡(jiǎn)介及推薦？

Dreamweaver 發(fā)源于 Macromedia 公司，后來被 Adobe 公司收購(gòu)。

日常應(yīng)用中比較常見的版本是 Dreamweaver CS6，這是一個(gè) Dreamweaver 經(jīng)典版本。因?yàn)樵?2013 年之前，Adobe 公司對(duì) Dreamweaver 的命名都是以CS 加數(shù)字作為軟件名稱。在 2013 年 Adobe 推出了Adobe 創(chuàng)意協(xié)作云平臺(tái)（Creative Cloud=CC），因此之后的 Dreamweaver 都改為以 Dreamweaver CC 加發(fā)布年份來命名了。

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

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

Tips：本教程中會(huì)使用 Dreamweaver CC 2018 版本來進(jìn)行演示講解。

6. 學(xué)習(xí)基礎(chǔ)及主干學(xué)習(xí)路線

1. 了解過網(wǎng)頁開發(fā)的一般流程，有一定的 HTML，CSS，JavaScript 基礎(chǔ)；

2. 若想成為 Dreamweaver 高級(jí)應(yīng)用者，還需了解一些 Web 開發(fā)基礎(chǔ)。

7. 主干學(xué)習(xí)路線

按照 Dreamweaver 官網(wǎng)的提供的信息，可以把 Dreamweaver 的學(xué)習(xí)科學(xué)地劃分為 11 個(gè)階段，每個(gè)過程對(duì)應(yīng)一系列知識(shí)點(diǎn)，大家可以跟著這 11 個(gè)過程來獲取學(xué)習(xí)中的重點(diǎn)：

1. 大致了解你能用 Dreamweaver 做哪些事情；
2. 結(jié)合 Dreamweaver 了解網(wǎng)站的結(jié)構(gòu)；
3. 結(jié)合 Dreamweaver 了解web設(shè)計(jì)的幾個(gè)階段；
4. 結(jié)合 Dreamweaver 學(xué)習(xí)如何定義一個(gè)網(wǎng)站；
5. 結(jié)合 Dreamweaver 使用HTML定義一個(gè)頁面結(jié)構(gòu)；
6. 結(jié)合 Dreamweaver 給你制作的的網(wǎng)頁添加內(nèi)容；
7. 結(jié)合 Dreamweaver 用CSS 裝飾你的網(wǎng)頁；
8. 在瀏覽器和移動(dòng)設(shè)備上預(yù)覽你的網(wǎng)頁；
9. 用 Dreamweaver 發(fā)布和管理你的網(wǎng)站；
10. 使用 Dreamweaver 高效開發(fā)網(wǎng)站基礎(chǔ)；
11. 一些可使用的 Dreamweaver 擴(kuò)展工具。