網(wǎng)頁三劍客（Macromedia開發(fā)的網(wǎng)頁編輯軟件）

名稱由來

之所以稱為三劍客，很大一部分是因?yàn)檫@三種軟件能相互無縫合作。制作網(wǎng)頁，通常由Fireworks導(dǎo)出切片、圖片等，然后在Dreamweaver中繪制表格；較為流行的一種是在Fireworks中做好主要頁面，然后導(dǎo)出，在Dreamweaver中加以修改，添加鏈接等，便做出一個非常好看的頁面。

Flash

Flash是美國Macromedia公司所設(shè)計(jì)的二維動畫軟件，全稱Macromedia Flash（被Adobe公司收購后稱為Adobe Flash），主要用于設(shè)計(jì)和編輯Flash文檔。附帶的Macromedia Flash Player，用于播放Flash文檔。

2011年底，F(xiàn)lash被Adobe公司合并，最新版本為2013年宣布的：Adobe Flash Creative Cloud（CC），播放器也更名為Adobe Flash Player。^[1]

被大量應(yīng)用于互聯(lián)網(wǎng)網(wǎng)頁的矢量動畫文件格式。

使用向量運(yùn)算﹙Vector Graphics﹚的方式，產(chǎn)生出來的影片占用存儲空間較小。

使用Flash創(chuàng)作出的影片有自己的特殊檔案格式﹙swf﹚。

該公司聲稱全世界97%的網(wǎng)絡(luò)瀏覽器都內(nèi)建Flash播放器﹙Flash Player﹚。

是Macromedia/Adobe提出的“富因特網(wǎng)應(yīng)用”（RIA）概念的實(shí)現(xiàn)平臺。

Fireworks

Adobe Fireworks可以加速Web設(shè)計(jì)與開發(fā)，是一款創(chuàng)建與優(yōu)化Web圖像和快速構(gòu)建網(wǎng)站與Web界面原型的理想工具。Fireworks不僅具備編輯矢量圖形與位圖圖像的靈活性，還提供了一個預(yù)先構(gòu)建資源的公用庫，并可與Adobe Photoshop、Adobe Illustrator、Adobe Dreamweaver和Adobe Flash軟件省時集成。在Fireworks中將設(shè)計(jì)迅速轉(zhuǎn)變?yōu)槟Ｐ?，或利用來自Illustrator、Photoshop和Flash的其它資源。然后直接置入Dreamweaver中輕松地進(jìn)行開發(fā)與部署。

矢量編輯與位圖編輯。創(chuàng)建和編輯矢量圖像與位圖圖像，并導(dǎo)入和編輯本機(jī) Photoshop和Illustrator文件。

圖像優(yōu)化。采用預(yù)覽、跨平臺灰度系統(tǒng)預(yù)覽、選擇性JPEG壓縮和大量導(dǎo)出控件，針對各種交付情況優(yōu)化圖像。

高效的Photoshop和Illustrator集成。導(dǎo)入Photoshop(PSD)文件，導(dǎo)入時可保持分層的圖層、圖層效果和混合模式。將Fireworks(PNG)文件保存回Photoshop(PSD)格式。導(dǎo)入Illustrator(AI)文件，導(dǎo)入時可保持包括圖層、組和顏色信息在內(nèi)的圖形完整性。

快速原型構(gòu)建。網(wǎng)站和各種Internet應(yīng)用程序構(gòu)建交互式布局原型。將網(wǎng)站原型導(dǎo)出至Adobe Dreamweaver,將RIA原型導(dǎo)出至Adobe Flex。

支持多頁。使用新的頁面板在單個文檔(PNG文件)中創(chuàng)建多個頁面，并在多個頁面之間共享圖層。每個頁面都可以包含自己的切片、圖層、幀、動畫、畫布設(shè)置，因而可在原型中方便地模擬網(wǎng)站流程。

分層的圖層組織方式。采用與Adobe Photoshop類似的新分層圖層結(jié)構(gòu)來組織和管理原型，使您能方便地組織Web圖層和頁面。

濾鏡效果。應(yīng)用燈光效果、陰影效果、樣式和混合模式(包括源自Photoshop的7種新的混合模式),增加文本和元件的深度和特性。

公用庫。公用庫中包含Web應(yīng)用程序、表單、界面和網(wǎng)站中經(jīng)常用到的圖形元件、文本元件和動畫，可以使用它迅速開始原型構(gòu)建過程。

智能縮放。通過9切片縮放智能地縮放矢量圖像或位圖圖像中的按鈕與圖形元件。將9切片縮放與新的自動形狀庫相結(jié)合，以加速網(wǎng)站和應(yīng)用程序的原型構(gòu)建進(jìn)度。

簡化的Dreamweaver和Flash集成。復(fù)制Fireworks CS3中的任意對象，并直接粘貼到Dreamweaver CS3中。創(chuàng)建可保存為CSS和HTML的彈出菜單。將Fireworks(PNG)文件直接導(dǎo)出至Flash CS3,導(dǎo)出時可保持矢量、位圖、動畫和多狀態(tài)不變，然后在Flash CS3中編輯文件。

眾所周知，在網(wǎng)頁上的jpg圖片如果過大，會嚴(yán)重影響頁面的打開速度，F(xiàn)ireworks提供優(yōu)化圖片的功能，即縮小圖片的KB，而且不影響畫面的質(zhì)量（除非放大了與原圖對比）。由于很多人喜歡用photoshop制作jpg圖片，所以它的容量會很大，最終還是要用Fireworks來處理一下。

Dreamweaver

Dreamweaver是美國Macromedia公司（現(xiàn)已被Adobe公司收購，成為Adobe Dreamweaver）開發(fā)的集網(wǎng)頁制作和管理網(wǎng)站于一身的所見即所得網(wǎng)頁編輯器，它是第一套針對專業(yè)網(wǎng)頁設(shè)計(jì)師特別發(fā)展的視覺化網(wǎng)頁開發(fā)工具，利用它可以輕而易舉地制作出跨越平臺限制和跨越瀏覽器限制的充滿動感的網(wǎng)頁。

Dreamweaver、Flash以及在Dreamweaver之后推出的針對專業(yè)網(wǎng)頁圖像設(shè)計(jì)的Fireworks，三者被Macromedia公司稱為DreamTeam（夢之隊(duì)），足見市場的反響和Macromedia公司對它們的自信。說到Dreamweaver我們應(yīng)該了解一下網(wǎng)頁編輯器的發(fā)展過程，隨著互聯(lián)網(wǎng)(Internet)的家喻戶曉，HTML（標(biāo)準(zhǔn)通用標(biāo)記語言下的一個應(yīng)用）技術(shù)的不斷發(fā)展和完善，隨之而產(chǎn)生了眾多網(wǎng)頁編輯器，從網(wǎng)頁編輯器基本性質(zhì)可以分為所見即所得網(wǎng)頁編輯器和非所見即所得網(wǎng)頁編輯器（則原始代碼編輯器），兩者各有千秋。所見則所得網(wǎng)頁編輯器的優(yōu)點(diǎn)就是直觀性，使用方便，容易上手，您在所見即所得網(wǎng)頁編輯器進(jìn)行網(wǎng)頁制作和在WORD中進(jìn)行文本編輯不會感到有什么區(qū)別，但它同時也存在著致命的弱點(diǎn)。

最佳的制作效率。Dreamweaver可以用最快速的方式將Fireworks，FreeHand，或Photoshop等檔案移至網(wǎng)頁上。使用檢色吸管工具選擇熒幕上的顏色可設(shè)定最接近的網(wǎng)頁安全色。對于選單，快捷鍵與格式控制，都只要一個簡單步驟便可完成。Dreamweaver能與您喜愛的設(shè)計(jì)工具，如Playback Flash，Shockwave和外掛模組等搭配，不需離開Dremweaver便可完成，整體運(yùn)用流程自然順暢。除此之外，只要單擊便可使Dreamweaver自動開啟Firework或Photoshop來進(jìn)行編輯與設(shè)定圖檔的最佳化。

網(wǎng)站管理。使用網(wǎng)站地圖可以快速制作網(wǎng)站雛形、設(shè)計(jì)、更新和重組網(wǎng)頁。改變網(wǎng)頁位置或檔案名稱，Dreamweaver會自動更新所有連結(jié)。使用支援文字、HTML碼、HTML屬性標(biāo)簽和一般語法的搜尋及置換功能使得復(fù)雜的網(wǎng)站更新變得迅速又簡單。

無可比擬的控制能力。Dreamweaver是唯一提供Roundtrip HTML、視覺化編輯與原始碼編輯同步的設(shè)計(jì)工具。它包含HomeSite和BBEdit等主流文字編輯器。幀(frames)和表格的制作速度快的令您無法想像。進(jìn)階表格編輯功能使您簡單的選擇單格、行、欄或作未連續(xù)之選取。甚至可以排序或格式化表格群組，Dreamweaver支援精準(zhǔn)定位，利用可輕易轉(zhuǎn)換成表格的圖層以拖拉置放的方式進(jìn)行版面配置。所見即所得Dreamweaver成功整合動態(tài)式出版視覺編輯及電子商務(wù)功能，提供超強(qiáng)的支援能力給Third-party廠商，包含ASP，Apache，BroadVision，Cold Fusion，iCAT，Tango與自行發(fā)展的應(yīng)用軟體。當(dāng)您正使用Dreamweaver在設(shè)計(jì)動態(tài)網(wǎng)頁時，所見即所得的功能，讓您不需要透過瀏覽器就能預(yù)覽網(wǎng)頁。夢幻樣版和XML Dreamweaver將內(nèi)容與設(shè)計(jì)分開，應(yīng)用于快速網(wǎng)頁更新和團(tuán)隊(duì)合作網(wǎng)頁編輯。建立網(wǎng)頁外觀的樣版，指定可編輯或不可編輯的部份，內(nèi)容提供者可直接編輯以樣式為主的內(nèi)容卻不會不小心改變既定之樣式。您也可以使用樣版正確地輸入或輸出XML內(nèi)容。全方位的呈現(xiàn)利用Dreamweaver設(shè)計(jì)的網(wǎng)頁，可以全方位的呈現(xiàn)在任何平臺的熱門瀏覽器上。對于cascading style sheets的動態(tài)HTML支援和鼠標(biāo)換圖效果，聲音和動畫的DHTML效果資料庫可在Netscape和Microsoft瀏覽器上執(zhí)行。使用不同瀏覽器檢示功能，Dreamweaver可以告知您在不同瀏覽器上執(zhí)行的成效如何。當(dāng)有新的瀏覽器上市時，只要從Dreamweaver的網(wǎng)站在下載它的描述檔，便可得知詳盡的成效報(bào)告。

它的缺點(diǎn)

難以精確達(dá)到與瀏覽器完全一致的顯示效果。也就是說您在所見即所得網(wǎng)頁編輯器中制作的網(wǎng)頁放到瀏覽器中是很難完全達(dá)到您真正想要的效果，這一點(diǎn)在結(jié)構(gòu)復(fù)雜一些的網(wǎng)頁（如分幀結(jié)構(gòu)、動態(tài)網(wǎng)頁結(jié)構(gòu)）中便可以體現(xiàn)出來；

頁面原始代碼的難以控制性，比如您在所見即所得編輯器中制作一張表格也要幾分鐘，但您要它完全符合您要求可能需要幾十分鐘，甚至更多時間。而相比之下，非所見則所得的網(wǎng)頁編輯器，就不存在這個問題，因?yàn)樗械腍TML（標(biāo)準(zhǔn)通用標(biāo)記語言下的一個應(yīng)用）都在您的監(jiān)控下產(chǎn)生，但是由于非所見則所得編輯器的先天條件就注定了它的工作低效率。如何實(shí)現(xiàn)兩者的完美結(jié)合，則既產(chǎn)生干凈、準(zhǔn)確的HTML代碼，又具備所見則所得的高效率、直觀性，一直是網(wǎng)頁設(shè)計(jì)師夢想。

CS5新功能

Adobe出品的CS5系列開始銷售了，我們關(guān)注下此次DREAMWEAVER CS5的相關(guān)功能。

實(shí)時視圖新增功能

借助Dreamweaver CS5中新增的實(shí)時視圖在真實(shí)的瀏覽器環(huán)境中設(shè)計(jì)網(wǎng)頁，同時仍可以直接訪問代碼。呈現(xiàn)的屏幕內(nèi)容會立即反映出對代碼所做的更改。

針對Ajax和JavaScript框架的代碼提示

借助改進(jìn)的JavaScript核心對象和基本數(shù)據(jù)類型支持，更有效地編寫JavaScript。通過集成包括jQuery、Prototype和Spry在內(nèi)的流行JavaScript框架，充分利用Dreamweaver CS5的擴(kuò)展編碼功能。

全新用戶界面

借助共享型用戶界面設(shè)計(jì),在Adobe Creative Suite? 4的不同組件之間更快、更明智地工作。使用工作區(qū)切換器可以從一個工作環(huán)境快速切換到下一個環(huán)境。

相關(guān)文件和代碼導(dǎo)航器

單擊“相關(guān)文件”欄中顯示的任何包含文件，即可在“代碼”視圖中查看其源代碼，在“設(shè)計(jì)”視圖中查看父頁面。新增的代碼導(dǎo)航器功能顯示影響當(dāng)前選定內(nèi)容的CSS源代碼，并允許您快速訪問它。

HTML數(shù)據(jù)集

無需掌握數(shù)據(jù)庫或XML編碼即可將動態(tài)數(shù)據(jù)的強(qiáng)大功能融入網(wǎng)頁中。Spry數(shù)據(jù)集可以將簡單HTML表中的內(nèi)容識別為交互式數(shù)據(jù)源。

Adobe InContext Editing (預(yù)發(fā)布版)

在Dreamweaver中設(shè)計(jì)頁面，使最終用戶能使用Adobe InContext Editing在線服務(wù)編輯他們的網(wǎng)頁，無需幫助或使用其它軟件。*作為Dreamweaver設(shè)計(jì)人員，您可以限制對特定頁面、特殊區(qū)域的更改權(quán)，甚至可以自定格式選項(xiàng)。

Adobe Photoshop?智能對象

將任何Photoshop PSD文檔插入Dreamweaver即可創(chuàng)建出圖像。智能對象與源文件緊密鏈接。無需打開Photoshop即可在Dreamweaver中更改源圖像和更新圖像。

CSS最佳做法

無需編寫代碼即可實(shí)施CSS最佳做法。在“屬性”面板中新建CSS規(guī)則，并在樣式級聯(lián)中清晰、簡單地說明每個屬性的相應(yīng)位置。

Subversion集成

在Dreamweaver中直接更新站點(diǎn)和登記修改內(nèi)容。Dreamweaver CS4與Subversion軟件緊密集成，后者是一款開放源代碼版本控制系統(tǒng)，可以提供更強(qiáng)大的登記/注銷體驗(yàn)。

Adobe AIR 創(chuàng)作支持新增功能

在Dreamweaver中直接創(chuàng)建基于HTML和JavaScript的Adobe AIR應(yīng)用程序。在Dreamweaver中即可預(yù)覽AIR應(yīng)用程序。使Adobe AIR應(yīng)用程序隨時可與AIR打包及代碼簽名功能一起部署。

CS6

升級到DreamweaverCS6，可以使用更新的“實(shí)時視圖”和“多屏預(yù)覽”面板高效創(chuàng)建和測試跨平臺、跨瀏覽器的HTML5內(nèi)容。利用增強(qiáng)的jQuery和PhoneGap?支持構(gòu)建更出色的移動應(yīng)用程序，并通過重新設(shè)計(jì)的多線程FTP傳輸工具來縮短上傳大文件所需的時間。^[2]

相關(guān)事件

在線建站平臺Wix、Weebly、9466網(wǎng)頁助手等的崛起讓建站門檻大大降低，基于云計(jì)算的在線建站模式使得人人皆可建站成為可能，不用編程即可在線拖拽生成網(wǎng)頁。