名稱由來
之所以稱為三劍客,很大一部分是因為這三種軟件能相互無縫合作。制作網頁,通常由Fireworks導出切片、圖片等,然后在Dreamweaver中繪制表格;較為流行的一種是在Fireworks中做好主要頁面,然后導出,在Dreamweaver中加以修改,添加鏈接等,便做出一個非常好看的頁面。
Flash
概述Flash是美國Macromedia公司所設計的二維動畫軟件,全稱Macromedia Flash(被Adobe公司收購后稱為Adobe Flash),主要用于設計和編輯Flash文檔。附帶的Macromedia Flash Player,用于播放Flash文檔。
2011年底,Flash被Adobe公司合并,最新版本為2013年宣布的:Adobe Flash Creative Cloud(CC),播放器也更名為Adobe Flash Player。[1]
主要功能被大量應用于互聯(lián)網網頁的矢量動畫文件格式。
使用向量運算﹙Vector Graphics﹚的方式,產生出來的影片占用存儲空間較小。
使用Flash創(chuàng)作出的影片有自己的特殊檔案格式﹙swf﹚。
該公司聲稱全世界97%的網絡瀏覽器都內建Flash播放器﹙Flash Player﹚。
是Macromedia/Adobe提出的“富因特網應用”(RIA)概念的實現平臺。
Fireworks
概述Adobe Fireworks可以加速Web設計與開發(fā),是一款創(chuàng)建與優(yōu)化Web圖像和快速構建網站與Web界面原型的理想工具。Fireworks不僅具備編輯矢量圖形與位圖圖像的靈活性,還提供了一個預先構建資源的公用庫,并可與Adobe Photoshop、Adobe Illustrator、Adobe Dreamweaver和Adobe Flash軟件省時集成。在Fireworks中將設計迅速轉變?yōu)槟P?,或利用來自Illustrator、Photoshop和Flash的其它資源。然后直接置入Dreamweaver中輕松地進行開發(fā)與部署。
主要功能矢量編輯與位圖編輯。創(chuàng)建和編輯矢量圖像與位圖圖像,并導入和編輯本機 Photoshop和Illustrator文件。
圖像優(yōu)化。采用預覽、跨平臺灰度系統(tǒng)預覽、選擇性JPEG壓縮和大量導出控件,針對各種交付情況優(yōu)化圖像。
高效的Photoshop和Illustrator集成。導入Photoshop(PSD)文件,導入時可保持分層的圖層、圖層效果和混合模式。將Fireworks(PNG)文件保存回Photoshop(PSD)格式。導入Illustrator(AI)文件,導入時可保持包括圖層、組和顏色信息在內的圖形完整性。
快速原型構建。網站和各種Internet應用程序構建交互式布局原型。將網站原型導出至Adobe Dreamweaver,將RIA原型導出至Adobe Flex。
支持多頁。使用新的頁面板在單個文檔(PNG文件)中創(chuàng)建多個頁面,并在多個頁面之間共享圖層。每個頁面都可以包含自己的切片、圖層、幀、動畫、畫布設置,因而可在原型中方便地模擬網站流程。
分層的圖層組織方式。采用與Adobe Photoshop類似的新分層圖層結構來組織和管理原型,使您能方便地組織Web圖層和頁面。
濾鏡效果。應用燈光效果、陰影效果、樣式和混合模式(包括源自Photoshop的7種新的混合模式),增加文本和元件的深度和特性。
公用庫。公用庫中包含Web應用程序、表單、界面和網站中經常用到的圖形元件、文本元件和動畫,可以使用它迅速開始原型構建過程。
智能縮放。通過9切片縮放智能地縮放矢量圖像或位圖圖像中的按鈕與圖形元件。將9切片縮放與新的自動形狀庫相結合,以加速網站和應用程序的原型構建進度。
簡化的Dreamweaver和Flash集成。復制Fireworks CS3中的任意對象,并直接粘貼到Dreamweaver CS3中。創(chuàng)建可保存為CSS和HTML的彈出菜單。將Fireworks(PNG)文件直接導出至Flash CS3,導出時可保持矢量、位圖、動畫和多狀態(tài)不變,然后在Flash CS3中編輯文件。
須知眾所周知,在網頁上的jpg圖片如果過大,會嚴重影響頁面的打開速度,Fireworks提供優(yōu)化圖片的功能,即縮小圖片的KB,而且不影響畫面的質量(除非放大了與原圖對比)。由于很多人喜歡用photoshop制作jpg圖片,所以它的容量會很大,最終還是要用Fireworks來處理一下。
Dreamweaver
概況Dreamweaver是美國Macromedia公司(現已被Adobe公司收購,成為Adobe Dreamweaver)開發(fā)的集網頁制作和管理網站于一身的所見即所得網頁編輯器,它是第一套針對專業(yè)網頁設計師特別發(fā)展的視覺化網頁開發(fā)工具,利用它可以輕而易舉地制作出跨越平臺限制和跨越瀏覽器限制的充滿動感的網頁。
Dreamweaver、Flash以及在Dreamweaver之后推出的針對專業(yè)網頁圖像設計的Fireworks,三者被Macromedia公司稱為DreamTeam(夢之隊),足見市場的反響和Macromedia公司對它們的自信。說到Dreamweaver我們應該了解一下網頁編輯器的發(fā)展過程,隨著互聯(lián)網(Internet)的家喻戶曉,HTML(標準通用標記語言下的一個應用)技術的不斷發(fā)展和完善,隨之而產生了眾多網頁編輯器,從網頁編輯器基本性質可以分為所見即所得網頁編輯器和非所見即所得網頁編輯器(則原始代碼編輯器),兩者各有千秋。所見則所得網頁編輯器的優(yōu)點就是直觀性,使用方便,容易上手,您在所見即所得網頁編輯器進行網頁制作和在WORD中進行文本編輯不會感到有什么區(qū)別,但它同時也存在著致命的弱點。
主要功能最佳的制作效率。Dreamweaver可以用最快速的方式將Fireworks,FreeHand,或Photoshop等檔案移至網頁上。使用檢色吸管工具選擇熒幕上的顏色可設定最接近的網頁安全色。對于選單,快捷鍵與格式控制,都只要一個簡單步驟便可完成。Dreamweaver能與您喜愛的設計工具,如Playback Flash,Shockwave和外掛模組等搭配,不需離開Dremweaver便可完成,整體運用流程自然順暢。除此之外,只要單擊便可使Dreamweaver自動開啟Firework或Photoshop來進行編輯與設定圖檔的最佳化。
網站管理。使用網站地圖可以快速制作網站雛形、設計、更新和重組網頁。改變網頁位置或檔案名稱,Dreamweaver會自動更新所有連結。使用支援文字、HTML碼、HTML屬性標簽和一般語法的搜尋及置換功能使得復雜的網站更新變得迅速又簡單。
無可比擬的控制能力。Dreamweaver是唯一提供Roundtrip HTML、視覺化編輯與原始碼編輯同步的設計工具。它包含HomeSite和BBEdit等主流文字編輯器。幀(frames)和表格的制作速度快的令您無法想像。進階表格編輯功能使您簡單的選擇單格、行、欄或作未連續(xù)之選取。甚至可以排序或格式化表格群組,Dreamweaver支援精準定位,利用可輕易轉換成表格的圖層以拖拉置放的方式進行版面配置。所見即所得Dreamweaver成功整合動態(tài)式出版視覺編輯及電子商務功能,提供超強的支援能力給Third-party廠商,包含ASP,Apache,BroadVision,Cold Fusion,iCAT,Tango與自行發(fā)展的應用軟體。當您正使用Dreamweaver在設計動態(tài)網頁時,所見即所得的功能,讓您不需要透過瀏覽器就能預覽網頁。夢幻樣版和XML Dreamweaver將內容與設計分開,應用于快速網頁更新和團隊合作網頁編輯。建立網頁外觀的樣版,指定可編輯或不可編輯的部份,內容提供者可直接編輯以樣式為主的內容卻不會不小心改變既定之樣式。您也可以使用樣版正確地輸入或輸出XML內容。全方位的呈現利用Dreamweaver設計的網頁,可以全方位的呈現在任何平臺的熱門瀏覽器上。對于cascading style sheets的動態(tài)HTML支援和鼠標換圖效果,聲音和動畫的DHTML效果資料庫可在Netscape和Microsoft瀏覽器上執(zhí)行。使用不同瀏覽器檢示功能,Dreamweaver可以告知您在不同瀏覽器上執(zhí)行的成效如何。當有新的瀏覽器上市時,只要從Dreamweaver的網站在下載它的描述檔,便可得知詳盡的成效報告。
它的缺點
難以精確達到與瀏覽器完全一致的顯示效果。也就是說您在所見即所得網頁編輯器中制作的網頁放到瀏覽器中是很難完全達到您真正想要的效果,這一點在結構復雜一些的網頁(如分幀結構、動態(tài)網頁結構)中便可以體現出來;
頁面原始代碼的難以控制性,比如您在所見即所得編輯器中制作一張表格也要幾分鐘,但您要它完全符合您要求可能需要幾十分鐘,甚至更多時間。而相比之下,非所見則所得的網頁編輯器,就不存在這個問題,因為所有的HTML(標準通用標記語言下的一個應用)都在您的監(jiān)控下產生,但是由于非所見則所得編輯器的先天條件就注定了它的工作低效率。如何實現兩者的完美結合,則既產生干凈、準確的HTML代碼,又具備所見則所得的高效率、直觀性,一直是網頁設計師夢想。
版本介紹CS5新功能
Adobe出品的CS5系列開始銷售了,我們關注下此次DREAMWEAVER CS5的相關功能。
實時視圖新增功能
借助Dreamweaver CS5中新增的實時視圖在真實的瀏覽器環(huán)境中設計網頁,同時仍可以直接訪問代碼。呈現的屏幕內容會立即反映出對代碼所做的更改。
針對Ajax和JavaScript框架的代碼提示
借助改進的JavaScript核心對象和基本數據類型支持,更有效地編寫JavaScript。通過集成包括jQuery、Prototype和Spry在內的流行JavaScript框架,充分利用Dreamweaver CS5的擴展編碼功能。
全新用戶界面
借助共享型用戶界面設計,在Adobe Creative Suite? 4的不同組件之間更快、更明智地工作。使用工作區(qū)切換器可以從一個工作環(huán)境快速切換到下一個環(huán)境。
相關文件和代碼導航器
單擊“相關文件”欄中顯示的任何包含文件,即可在“代碼”視圖中查看其源代碼,在“設計”視圖中查看父頁面。新增的代碼導航器功能顯示影響當前選定內容的CSS源代碼,并允許您快速訪問它。
HTML數據集
無需掌握數據庫或XML編碼即可將動態(tài)數據的強大功能融入網頁中。Spry數據集可以將簡單HTML表中的內容識別為交互式數據源。
Adobe InContext Editing (預發(fā)布版)
在Dreamweaver中設計頁面,使最終用戶能使用Adobe InContext Editing在線服務編輯他們的網頁,無需幫助或使用其它軟件。*作為Dreamweaver設計人員,您可以限制對特定頁面、特殊區(qū)域的更改權,甚至可以自定格式選項。
Adobe Photoshop?智能對象
將任何Photoshop PSD文檔插入Dreamweaver即可創(chuàng)建出圖像。智能對象與源文件緊密鏈接。無需打開Photoshop即可在Dreamweaver中更改源圖像和更新圖像。
CSS最佳做法
無需編寫代碼即可實施CSS最佳做法。在“屬性”面板中新建CSS規(guī)則,并在樣式級聯(lián)中清晰、簡單地說明每個屬性的相應位置。
Subversion集成
在Dreamweaver中直接更新站點和登記修改內容。Dreamweaver CS4與Subversion軟件緊密集成,后者是一款開放源代碼版本控制系統(tǒng),可以提供更強大的登記/注銷體驗。
Adobe AIR 創(chuàng)作支持新增功能
在Dreamweaver中直接創(chuàng)建基于HTML和JavaScript的Adobe AIR應用程序。在Dreamweaver中即可預覽AIR應用程序。使Adobe AIR應用程序隨時可與AIR打包及代碼簽名功能一起部署。
CS6
升級到DreamweaverCS6,可以使用更新的“實時視圖”和“多屏預覽”面板高效創(chuàng)建和測試跨平臺、跨瀏覽器的HTML5內容。利用增強的jQuery和PhoneGap?支持構建更出色的移動應用程序,并通過重新設計的多線程FTP傳輸工具來縮短上傳大文件所需的時間。[2]
相關事件
在線建站平臺Wix、Weebly、9466網頁助手等的崛起讓建站門檻大大降低,基于云計算的在線建站模式使得人人皆可建站成為可能,不用編程即可在線拖拽生成網頁。