第7章 網(wǎng)頁設(shè)計(jì)工具簡介.ppt

1、7.1 網(wǎng)頁制作工具 7.2 網(wǎng)頁圖形圖像處理工具 7.3 網(wǎng)頁動(dòng)畫制作與特效工具 7.4 網(wǎng)頁上傳工具 7.5 網(wǎng)頁設(shè)計(jì)工具的發(fā)展動(dòng)向,第7章 網(wǎng)頁設(shè)計(jì)工具簡介,隨著互聯(lián)網(wǎng)的普及，HTML技術(shù)的不斷發(fā)展和完善，隨之而產(chǎn)生了眾多網(wǎng)頁編輯器。網(wǎng)頁編輯器基本上可以分為“所見即所得”網(wǎng)頁編輯器和“非所見即所得”網(wǎng)頁編輯器（即源代碼編輯器）兩類，二者各有千秋。 “所見即所得”網(wǎng)頁編輯器的優(yōu)點(diǎn)就是直觀、使用方便、容易上手，在其中進(jìn)行網(wǎng)頁制作與在Word中進(jìn)行文本編輯一樣不會(huì)感到有什么區(qū)別，但它同時(shí)也存在難以精確達(dá)到與瀏覽器完全一致的顯示效果的缺點(diǎn)。也就是說，在“所見即所得”網(wǎng)頁編輯器中制作的網(wǎng)頁放到瀏覽

2、器中是很難達(dá)到真正想要的效果的，這一點(diǎn)在結(jié)構(gòu)復(fù)雜一些的網(wǎng)頁（如分幀結(jié)構(gòu)、動(dòng)態(tài)網(wǎng)頁結(jié)構(gòu)及精確定位）中便可體現(xiàn)出來。“非所見即所得”的網(wǎng)頁編輯器就不存在這個(gè)問題，因?yàn)樗械腍TML代碼都是在用戶的監(jiān)控下產(chǎn)生的，但是，“非所見即所得”編輯器的先天條件注定了它的工作效率太低。,7.1 網(wǎng)頁制作工具,7.1.1 FrontPage FrontPage是用來制作網(wǎng)頁的最流行的、功能最強(qiáng)大的軟件之一。它是Microsoft公司專門開發(fā)的網(wǎng)頁制作專業(yè)工具。目前FrontPage的最高版本是FrontPage 2003。 FrontPage 2003的網(wǎng)頁編輯功能非常強(qiáng)大，它可以非常簡單而且直觀地實(shí)現(xiàn)HTML幾

3、乎所有的功能，例如，新建和修改一個(gè)網(wǎng)頁，新建一個(gè)Web站點(diǎn)，在網(wǎng)頁中插入圖片、多媒體、設(shè)置動(dòng)態(tài)效果、設(shè)置過渡效果，直接調(diào)用ODBC數(shù)據(jù)庫等。 FrontPage 2003還具有強(qiáng)大的網(wǎng)頁管理功能，是Web站點(diǎn)發(fā)布管理的強(qiáng)有力的工具，可以方便地進(jìn)行文件夾管理、報(bào)表管理、導(dǎo)航管理、超鏈接管理、任務(wù)管理等多項(xiàng)管理功能。而且，F(xiàn)rontPage 2003可以實(shí)現(xiàn)“所見即所得”的強(qiáng)大功能，方便用戶在制作網(wǎng)頁過程中，隨時(shí)觀察制作效果。這不僅方便初學(xué)者，對于專業(yè)人員也可大大提高網(wǎng)頁的制作效率。,7.1 網(wǎng)頁制作工具,7.1.2 Dreamweaver Dreamweaver是Macromedia公司推出的主

4、頁編輯工具。它也是所見即所得網(wǎng)頁編輯器，支持最新的XHTML和CSS標(biāo)準(zhǔn)。Dreamweaver采用了多種先進(jìn)技術(shù)，能夠快速高效地創(chuàng)建極具表現(xiàn)力和動(dòng)感效果的網(wǎng)頁，使網(wǎng)頁創(chuàng)作過程變得非常簡單。 Dreamweaver的最新版本是Dreamweaver 8，是一款專業(yè)的HTML編輯器，用于對Web站點(diǎn)、Web頁和Web應(yīng)用程序進(jìn)行設(shè)計(jì)、編碼和開發(fā)。 利用Dreamweaver的可視化編輯功能，用戶可以快速地創(chuàng)建頁面而無須編寫任何代碼。不過，如果用戶更喜歡手工直接編碼，也可以使用Dreamweaver提供的許多與編碼相關(guān)的工具和功能。另外，借助Dreamweaver還可以使用服務(wù)器語言（例如ASP、

5、ASP.NET、ColdFusion標(biāo)記語言、JSP和PHP）生成支持動(dòng)態(tài)數(shù)據(jù)庫的Web應(yīng)用程序。,7.1 網(wǎng)頁制作工具,7.1.3 Adobe Pagemill Pagemill功能不算強(qiáng)大，但使用起來很方便，適合初學(xué)者制作較為美觀，但不是非常復(fù)雜的主頁。如果用戶的主頁需要很多框架、表單和Image Map圖像，那么Adobe Pagemill 3.0的確是首選。 Pagemill創(chuàng)建多框架頁十分方便，可以同時(shí)編輯各個(gè)框架中的內(nèi)容。Pagemill在服務(wù)器端或客戶端都可創(chuàng)建和處理Image Map圖像，它也支持表單的創(chuàng)建。Pagemill允許在HTML代碼上編寫和修改，支持大部分常見的HTM

6、L擴(kuò)展，還提供拼寫檢錯(cuò)、搜索替換等文檔處理工具。Pagemill另一大特色是提供一個(gè)剪貼板，可以將任意多的文本、圖形、表格拖放到里面，需要時(shí)再打開，很方便。,7.1 網(wǎng)頁制作工具,7.1.4 HomeSite HomeSite是一個(gè)小巧而全能的HTML代碼編輯器，有豐富的幫助功能，支持CGI和CSS等，并且可以直接編輯Perl程序。HomeSite工作界面繁簡由人。根據(jù)個(gè)人習(xí)慣，可以將其設(shè)置成像記事本那樣簡單的編輯窗口，也可以在復(fù)雜的界面下工作。 HomeSite具有良好的站點(diǎn)管理功能，鏈接確認(rèn)向?qū)Э梢詸z查一個(gè)或多個(gè)文檔的鏈接狀況。HomeSite更適合進(jìn)行比較復(fù)雜和精美頁面的設(shè)計(jì)。如果用戶希

7、望能完全控制頁面制作的進(jìn)程，那么HomeSite是最佳選擇。,7.1 網(wǎng)頁制作工具,7.1.5 Visual Studio.Net 程序編輯器應(yīng)當(dāng)支持相應(yīng)程序的自動(dòng)語法檢查，最好還應(yīng)當(dāng)支持程序的調(diào)試與編譯。Visual Studio.Net無疑是非常強(qiáng)大的編輯器。 Visual Studio.Net內(nèi)置有VB.Net、VC+.Net、C#等程序開發(fā)工具，集程序的調(diào)試、編譯等功能于一身，并且還提供了詳細(xì)的幫助，這是任何一款其他軟件都不能比擬的。但是，由于Visual Studio.Net本身帶有的部件太多，需要計(jì)算機(jī)有比較高的配置，否則運(yùn)行速度會(huì)非常緩慢。,7.1 網(wǎng)頁制作工具,7.1.6 Ed

8、itPlus 任意文本編輯器都可以用于編寫動(dòng)態(tài)網(wǎng)站應(yīng)用程序，最常見的文本編輯器就是Windows自帶的記事本。但是畢竟記事本的功能太少，遠(yuǎn)遠(yuǎn)不能滿足程序編寫的要求。一個(gè)好的文件編輯器將會(huì)起到事半功倍的作用。 EditPlus是目前非常流行的一款功能強(qiáng)大的文本編輯器，該軟件功能強(qiáng)大、易于使用、兼容性強(qiáng)，支持幾乎所有程序語言的代碼色彩顯示。它的缺點(diǎn)就是不支持程序的調(diào)試。,7.1 網(wǎng)頁制作工具,7.2.1 Fireworks Fireworks是Macromedia公司開發(fā)的一款優(yōu)秀的網(wǎng)頁圖形圖像處理應(yīng)用軟件。Fireworks與多種產(chǎn)品集成在一起，包括Macromedia的其他產(chǎn)品（如Dreamw

9、eaver、Flash、FreeHand和Director）和其他用戶喜歡的圖形應(yīng)用程序及HTML編輯器，從而提供了一個(gè)真正集成Web解決方案，可以幫助網(wǎng)頁圖形設(shè)計(jì)人員和開發(fā)人員解決所面臨的特殊問題。 Fireworks的最新版本是Fireworks 8，利用Fireworks 8中的新增功能，可以更方便地在網(wǎng)站上添加圖形和交互元素，這使得該應(yīng)用程序越來越易于使用。對于有經(jīng)驗(yàn)的Web設(shè)計(jì)人員，需要與圖形打交道的HTML開發(fā)人員，以及需要開發(fā)包含大量圖形圖像的交互式網(wǎng)頁但對代碼編寫或JavaScript知之甚少或一無所知的Web開發(fā)新手來說，F(xiàn)ireworks 8都可以最大限度地提高工作效率。,

10、7.2 網(wǎng)頁圖形圖像處理工具,7.2.2 Photoshop Photoshop是Adobe公司推出的功能強(qiáng)大的平面圖像處理軟件，也是迄今為止世界上最暢銷的圖像編輯軟件。Adobe Photoshop CS2（Creative Suite）是目前Photoshop的最新版本，無論從性能的優(yōu)越還是使用的方便等方面，Adobe Photoshop CS2都給人以耳目一新的感覺。由于Photoshop在圖像編輯、桌面出版、網(wǎng)頁圖像編輯、廣告設(shè)計(jì)、婚紗攝影等各行各業(yè)中廣泛應(yīng)用，它已成為許多涉及圖像處理的行業(yè)的事實(shí)標(biāo)準(zhǔn)。 Photoshop中包含的ImageReady是用于網(wǎng)頁圖片制作的工具，其缺點(diǎn)是體

11、積龐大，操作比較復(fù)雜，非專業(yè)人士很難熟練掌握。,7.2 網(wǎng)頁圖形圖像處理工具,7.2.3 CorelDRAW CorelDRAW是PC平臺(tái)上歷史最悠久的繪圖軟件之一，現(xiàn)在已經(jīng)發(fā)展到第12個(gè)版本。自1989年CorelDRAW第一次對外發(fā)布以來，CorelDRAW不斷改良、升級，自身越來越成熟功能也越來越強(qiáng)大。CorelDRAW每次發(fā)布的新版本，都包含了很多新的特性。 新發(fā)布的CorelDRAW 12繪圖套件包含了用于繪圖和排版的CorelDRAW、用于圖像編輯的CorelPhoto-Paint及用于制作矢量動(dòng)畫的CorelR.A.V.E。CorelDRAW還不斷向新的領(lǐng)域進(jìn)軍，使其成為專業(yè)的網(wǎng)

12、頁圖形圖像處理工具。朝著這個(gè)目標(biāo)，Corel公司在CorelDRAW繪圖套件中新增了 CorelR.A.V.E，還增加了網(wǎng)頁圖片優(yōu)化器等基于網(wǎng)頁制作的新特性，以及生成波動(dòng)條的功能。,7.2 網(wǎng)頁圖形圖像處理工具,7.3.1 Flash Flash是Macromedia公司開發(fā)的一款優(yōu)秀的網(wǎng)頁動(dòng)畫制作軟件，從簡單的動(dòng)畫到復(fù)雜的交互式Web應(yīng)用程序，它使用戶可以創(chuàng)建任何作品。最吸引人的一點(diǎn)還是Flash作品SWF文件“體積”出奇得小，并且可以以插件的形式加入到網(wǎng)頁中，通常幾分鐘的復(fù)雜動(dòng)畫才幾百KB，是目前網(wǎng)絡(luò)中最常用的動(dòng)畫格式。Flash的最新版本是Flash 8。 Flash 8是Web設(shè)計(jì)人員

13、、交互式媒體專業(yè)人員或開發(fā)多媒體內(nèi)容的主題專家的理想工具。該版本注重于創(chuàng)建、導(dǎo)入和處理多種類型的媒體（音頻、視頻、位圖、矢量、文本和數(shù)據(jù)）。Flash 8提供了對Web團(tuán)隊(duì)（由設(shè)計(jì)人員和開發(fā)人員組成）成員之間的工作流程進(jìn)行優(yōu)化的項(xiàng)目管理工具。外部腳本撰寫和處理數(shù)據(jù)庫中動(dòng)態(tài)數(shù)據(jù)的能力及其他功能使得Flash 8特別適用于大規(guī)模的復(fù)雜項(xiàng)目。,7.3 網(wǎng)頁動(dòng)畫制作與特效工具,7.3.2 Ulead Gif Animator Ulead GIF Animator是Ulead（友立）公司發(fā)布的是一個(gè)簡單、快速、靈活、功能強(qiáng)大的GIF動(dòng)畫編輯軟件，使網(wǎng)頁設(shè)計(jì)者可以快速地輕松創(chuàng)建和編輯網(wǎng)頁動(dòng)畫文件。同時(shí)，U

14、lead GIF Animator也是一款不錯(cuò)的網(wǎng)頁設(shè)計(jì)輔助工具，還可以作為Photoshop的插件使用。它具有豐富而強(qiáng)大的內(nèi)置動(dòng)畫選項(xiàng)，讓設(shè)計(jì)者能夠更方便地制作出符合要求的GIF動(dòng)畫。 Ulead GIF Animator 5.0作為Ulead GIF Animator家族的最新成員，使用它制作出的GIF動(dòng)畫再也不是傳統(tǒng)觀念上的256色了，而是允許設(shè)計(jì)者在真彩色環(huán)境下，制作出色彩斑斕的動(dòng)畫。,7.3 網(wǎng)頁動(dòng)畫制作與特效工具,7.3.3 Swish 雖然網(wǎng)上的動(dòng)畫早已是Flash的天下，但Flash的設(shè)計(jì)過程太過煩瑣。Swish是一款非常方便的Flash特效制作工具，可以實(shí)現(xiàn)簡單地在網(wǎng)頁中加入

15、Flash動(dòng)畫。Swish特效中有許多細(xì)節(jié)結(jié)合使用能得到非常美觀的效果，支持直接預(yù)覽，能直接導(dǎo)出為SWF文檔格式，支持中文，而且可以直接修改組件。 最新版本的Swish網(wǎng)絡(luò)版支持Flash MX、視頻片段導(dǎo)入等多種新特性，這使得Swish不再是以往定位的字體特效制作工具，而是一款功能強(qiáng)大，操作簡單的新款Flash MX制作輔助工具。事實(shí)上，如果對于新版Swish操作足夠熟悉，單單利用Swish就可以很快制作出復(fù)雜的Flash特效。,7.3 網(wǎng)頁動(dòng)畫制作與特效工具,7.4.1 CuteFTP CuteFTP是最早支持?jǐn)帱c(diǎn)續(xù)傳的FTP客戶軟件之一，是一個(gè)集FTP上傳下載、FTP搜索和網(wǎng)頁編輯功能于

16、一體的軟件包，其功能強(qiáng)大，使用方便，支持拖放。最新的CuteFTP版本，為了更好地適合專業(yè)用戶的使用，推出不少新的特色功能，例如，目錄比較上傳、宏處理、遠(yuǎn)端文件直接比較操作及IE風(fēng)格的工具欄等。 CuteFTP的最新版本是CuteFTP 6.0 Pro，是一個(gè)全新的商業(yè)級FTP客戶端上傳工具，提供了目錄同步，自動(dòng)排程，同時(shí)多站點(diǎn)鏈接、多協(xié)議支持（FTP、SFTP、HTTP、HTTPS），智能覆蓋，整合的HTML編輯器等功能，以及更加快速的文件傳輸系統(tǒng)。,7.4 網(wǎng)頁上傳工具,7.4.2 FlashFXP FlashFXP是一個(gè)功能強(qiáng)大的上傳下載工具，融合了其他優(yōu)秀FTP軟件的優(yōu)點(diǎn)，例如，像Cu

17、teFTP一樣可以比較文件夾，支持彩色文字顯示；支持子文件夾的文件傳送、刪除；支持上傳、下載及第三方文件續(xù)傳；可以跳過指定的文件類型，只傳送需要的文件；可以自定義不同文件類型的顯示顏色；可以緩存遠(yuǎn)端文件夾列表，支持FTP代理；具有避免空閑功能，防止被站點(diǎn)踢出；可以顯示具有“隱藏”屬性的文件和文件夾；支持每個(gè)站點(diǎn)使用被動(dòng)模式等。,7.4 網(wǎng)頁上傳工具,7.4.3 LeapFTP LeapFTP是一款功能強(qiáng)大，可以媲美CuteFTP的網(wǎng)頁上傳工具。LeapFTP的用戶界面采用和Netscape相仿的書簽形式，連線更加方便；下載與上傳文件支持續(xù)傳；可下載或上傳整個(gè)目錄，亦可直接刪除整個(gè)目錄；瀏覽網(wǎng)頁

18、時(shí)，若在文件鏈接上單擊鼠標(biāo)右鍵選擇“復(fù)制捷徑”命令，便會(huì)自動(dòng)下載該文件；LeapFTP具有不會(huì)因閑置過久而被站點(diǎn)踢出的功能；此外，還可以直接編輯遠(yuǎn)端Server上的文件，可設(shè)定文件傳送完畢自動(dòng)中斷網(wǎng)絡(luò)連接。,7.4 網(wǎng)頁上傳工具,7.4.4 其他上傳工具 除了上邊功能強(qiáng)大的上傳工具以外，用戶還可以選擇一些短小精悍的上傳工具。 1UploadNow!上傳工具 UploadNow!上傳工具可以自動(dòng)上傳本地站點(diǎn)中更新過的文件，避免上傳沒有更新過的文件，節(jié)省上網(wǎng)的時(shí)間和費(fèi)用。 2WS-FTP上傳工具 WS-FTP上傳工具速度特別快，支持拖放，對有多個(gè)站點(diǎn)要維護(hù)的用戶比較適用。 當(dāng)然，除了這些專用的上傳工具以外，F(xiàn)rontPage和Dreamweaver軟件自身也具有上傳網(wǎng)頁的功能。,7.4 網(wǎng)頁上傳工具,2005年4月18日，全球知名的應(yīng)用軟件公司Adobe以34億美元的價(jià)格收購了Macromedia公司，這次收購代表著多媒體產(chǎn)業(yè)領(lǐng)域的融合。Adobe公司收購Macromedia公司后，無論在圖形處理方面，還是在網(wǎng)頁制作方面，都會(huì)成為未來的壟斷者。Adobe與Macromedia兩個(gè)公司從此將共同迎接更廣大的消費(fèi)者群體，面對更大的市場成長機(jī)會(huì)，特別是在無線通信和企業(yè)級應(yīng)用兩大領(lǐng)域。 隨著Adobe公司對Macromedia公司進(jìn)行全新的整合，勢必推出更加強(qiáng)大的圖形網(wǎng)