淺談網(wǎng)的設(shè)計與制作(網(wǎng)站策劃)

1、PAGE PAGE 20目 錄 TOC o 1-3 h z u HYPERLINK l _Toc293061231 摘 要 PAGEREF _Toc293061231 h 2 HYPERLINK l _Toc293061232 關(guān)鍵詞 PAGEREF _Toc293061232 h 2 HYPERLINK l _Toc293061233 Abstracct PAGEREF _Toc293061233 h 2 HYPERLINK l _Toc293061234 Key Worrds PAGEREF _Toc293061234 h 2 HYPERLINK l _Toc293061235 一、網(wǎng)頁設(shè)

2、計的的原則 PAGEREF _Toc293061235 h 3 HYPERLINK l _Toc293061236 （一）明確網(wǎng)站站主題 PAGEREF _Toc293061236 h 3 HYPERLINK l _Toc293061237 （二）總體設(shè)計計方案主題鮮鮮明 PAGEREF _Toc293061237 h 3 HYPERLINK l _Toc293061238 （三）網(wǎng)頁設(shè)計計形式與內(nèi)容容相統(tǒng)一 PAGEREF _Toc293061238 h 3 HYPERLINK l _Toc293061239 二、網(wǎng)頁設(shè)計與與制作的具體體流程 PAGEREF _Toc293061239 h

3、3 HYPERLINK l _Toc293061240 （一）網(wǎng)站策劃劃 PAGEREF _Toc293061240 h 4 HYPERLINK l _Toc293061241 （二）網(wǎng)頁布局局版式設(shè)計 PAGEREF _Toc293061241 h 5 HYPERLINK l _Toc293061242 （三）網(wǎng)頁色彩彩搭配 PAGEREF _Toc293061242 h 6 HYPERLINK l _Toc293061243 （四）網(wǎng)站后臺臺設(shè)計 PAGEREF _Toc293061243 h 7 HYPERLINK l _Toc293061244 三、網(wǎng)頁制作工工具的學(xué)習(xí)與與應(yīng)用 PAG

4、EREF _Toc293061244 h 8 HYPERLINK l _Toc293061245 （一）Dreaamweavver PAGEREF _Toc293061245 h 8 HYPERLINK l _Toc293061246 （二）Flassh PAGEREF _Toc293061246 h 9 HYPERLINK l _Toc293061247 (三) Phootoshoop PAGEREF _Toc293061247 h 9 HYPERLINK l _Toc293061248 四、網(wǎng)頁優(yōu)化 PAGEREF _Toc293061248 h 10 HYPERLINK l _Toc29

5、3061249 （一）網(wǎng)頁技術(shù)術(shù)優(yōu)化 PAGEREF _Toc293061249 h 11 HYPERLINK l _Toc293061250 （二）人文優(yōu)化化 PAGEREF _Toc293061250 h 12 HYPERLINK l _Toc293061251 參考文獻(xiàn)133淺談網(wǎng)頁的設(shè)計計與制作學(xué)生姓名：林永永俊 學(xué)號：2007551710330美術(shù)學(xué)院 美術(shù)術(shù)學(xué)專業(yè)指導(dǎo)教師：張睿睿 職稱：講講師摘 要：隨著著中國互聯(lián)網(wǎng)網(wǎng)的高速發(fā)展展，相關(guān)的網(wǎng)網(wǎng)絡(luò)應(yīng)用技術(shù)術(shù)將會得到更更多的應(yīng)用，做做為互聯(lián)網(wǎng)信信息表述和傳傳遞基礎(chǔ)載體體的網(wǎng)頁也越越來越受到人人們的關(guān)注。本文從網(wǎng)頁頁設(shè)計的要素素、原則及相

6、關(guān)關(guān)技巧等對網(wǎng)網(wǎng)頁設(shè)計與制制作進(jìn)行了介介紹和說明。通通過對網(wǎng)頁的的設(shè)計與制作作的研究,探探求符合時代代特色的網(wǎng)頁頁制作原理和和行之有效的的設(shè)計方法,提高網(wǎng)頁的用戶體驗和視視覺沖擊力,增強(qiáng)網(wǎng)站與與網(wǎng)民的互動動，促進(jìn)企業(yè)業(yè)開展電子商商務(wù)，信息平平臺等基礎(chǔ)設(shè)設(shè)施，創(chuàng)造更更高的經(jīng)濟(jì)效效益。關(guān)鍵詞：網(wǎng)頁設(shè)設(shè)計；網(wǎng)頁制制作；色彩搭搭配Abstracct: Withh the rapidd deveelopmeent off Chinnas IInternnet weeb appplicattions, relaated ttechnoology will get mmore aappliccationns

7、, ass Inteernet inforrmatioon reppresenntatioon andd trannsfer of weeb bassed caarrierr has becomme thee conccern oof thee publlic. TThis aarticlle froom thee web page desiggn eleementss and princcipless and relatted skkills on weeb dessign aand prroducttion aare inntroduuced aand illlustrrated. Thr

8、oough tthe deesign and mmanufaacturee of wweb paage, wwhich can aaccordd withh the speciial agge webb prodductioon priinciplle andd effeectivee desiign meethodss, impprove web uuser eexperiience and vvisuall impaact, eenhancce thee inteeractiion wiith Innterneet webbsite, prommote eenterpprise in de

9、evelopping eelectrronic commeerce, inforrmatioon plaatformm and otherr infrrastruucturee, andd creaate moore ecconomiic bennefitss. Key Worrds: web deesign；web paages；colourr colllocatiion一個成功抓住用用戶“眼球”并并最終帶來經(jīng)經(jīng)濟(jì)效益的網(wǎng)網(wǎng)站首先需要要一個優(yōu)秀的的設(shè)計，然后后加上優(yōu)秀的制制作。設(shè)計是是網(wǎng)站的核心心和靈魂，是是一個感性思思考與理性分分析相結(jié)合的的復(fù)雜的過程程，它的方向向取決于設(shè)計計的任務(wù)，它它

10、的實現(xiàn)依賴賴于網(wǎng)頁的制制作。把網(wǎng)頁藝術(shù)設(shè)設(shè)計與其他藝藝術(shù)設(shè)計形式式進(jìn)行比較，嘗嘗試從網(wǎng)頁藝藝術(shù)設(shè)計的內(nèi)內(nèi)容、原則、制制作技巧、制制作流程等幾幾個方面對這這個新的藝術(shù)術(shù)設(shè)計領(lǐng)域進(jìn)進(jìn)行初步的歸歸納總結(jié)和理理論探討，網(wǎng)頁藝術(shù)設(shè)設(shè)計是藝術(shù)與與技術(shù)的高度度統(tǒng)一。一、網(wǎng)頁設(shè)計的的原則（一）明確網(wǎng)站站主題優(yōu)秀的網(wǎng)頁設(shè)計計必然服務(wù)于于網(wǎng)站的主題題，就是說要建設(shè)設(shè)一個網(wǎng)站，首首先需要定位位，既要清楚楚建設(shè)網(wǎng)站的的目的和面向向瀏覽的對象象，只有定位位準(zhǔn)確的網(wǎng)站站才會有可觀觀性和應(yīng)用性性。因此我們們必須明確設(shè)設(shè)計站點(diǎn)的目目的和用戶需需求，從而做做出切實可行行的設(shè)計計劃劃。（二）總體設(shè)計計方案主題鮮鮮明在目標(biāo)明確的基

11、基礎(chǔ)上，完成成網(wǎng)站的構(gòu)思思創(chuàng)意即總體體設(shè)計方案。對對網(wǎng)站的整體體風(fēng)格和特色色作出定位，規(guī)規(guī)劃網(wǎng)站的組組織結(jié)構(gòu)。做做到主題鮮明明突出，要點(diǎn)點(diǎn)明確，以簡簡單明確的語語言和畫面體體現(xiàn)站點(diǎn)的主主題；調(diào)動一一切手段充分分表現(xiàn)網(wǎng)站的的個性和情趣趣。（三）網(wǎng)頁設(shè)計計形式與內(nèi)容容相統(tǒng)一內(nèi)容是構(gòu)成設(shè)計計的一切內(nèi)在在要素的總和和，是設(shè)計存存在的基礎(chǔ)，被被稱為“設(shè)計計的靈魂”；形式是構(gòu)成成內(nèi)容諸要素素的內(nèi)部結(jié)構(gòu)構(gòu)或內(nèi)容的外外部表現(xiàn)方式式。為了將豐豐富的意義和和多樣的形式式組織成統(tǒng)一一的頁面結(jié)構(gòu)構(gòu)，形式語言言必須符合頁頁面的內(nèi)容，體體現(xiàn)內(nèi)容的豐豐富含義。靈靈活運(yùn)用對比比與調(diào)和、對對稱與平衡、節(jié)奏與韻律以及留白等手法，

12、通過空間、文字、圖形之間的相互關(guān)系建立整體的均衡狀態(tài)，產(chǎn)生和諧的美感。如對稱原則在頁面設(shè)計中，它的均衡有時會使頁面顯得呆板，但如果加入一些富有動感的文字、圖案，或采用夸張的手法來表現(xiàn)內(nèi)容往往會達(dá)到比較好的效果。 點(diǎn)、線、面作為視覺語言中的基本元素，巧妙地互相穿插、互相襯托、互相補(bǔ)充構(gòu)成最佳的頁面效果，充分表達(dá)完美的設(shè)計意境。一個優(yōu)秀的設(shè)計必定是形式對內(nèi)容的完美表現(xiàn)。正如黑格爾所說：“工藝的美就不在于要求實用品的外部造型、色彩、紋樣去摹擬事物，再現(xiàn)現(xiàn)實，而在于使其外部形式傳達(dá)和表現(xiàn)出一定的情緒、氣氛、格調(diào)、風(fēng)尚、趣味，使物質(zhì)經(jīng)由象征變成相似于精神生活的有關(guān)環(huán)境?！标慁i，走出藝術(shù)哲學(xué)迷宮陳鵬，走出

13、藝術(shù)哲學(xué)迷宮黑格爾美學(xué)筆記，文化藝術(shù)出版社，2007年第7期，第201頁。二、網(wǎng)頁設(shè)計與與制作的具體體流程網(wǎng)頁設(shè)計是一個個綜合性極強(qiáng)強(qiáng)的工作，涉涉及到商業(yè)策策劃、平面設(shè)設(shè)計、人機(jī)界界面、程序語語言和數(shù)據(jù)庫庫等。網(wǎng)頁設(shè)計從總體上可大致致分為策劃、前前臺頁面設(shè)計計和后臺三部部分，本文主主要從AZEE設(shè)計工作室室的網(wǎng)站實例例來論述網(wǎng)頁頁設(shè)計與制作作的流程。（一）網(wǎng)站策劃劃策劃是指網(wǎng)站的的整體定位、功功能規(guī)劃、應(yīng)應(yīng)用分析、流流程設(shè)計和內(nèi)內(nèi)容架構(gòu)組織織，網(wǎng)站策劃是是網(wǎng)站平臺建建設(shè)成敗的關(guān)關(guān)鍵內(nèi)容之一一。網(wǎng)站策劃劃重點(diǎn)闡述了了解決方案能能給客戶帶來什什么價值，以以及通過何種種方法去實現(xiàn)現(xiàn)這種價值。在在策劃

14、的同時時要以人為本本，迎合網(wǎng)民民需求、找到到了市場需求求的點(diǎn)，才能能把整體定位位策劃做到位位。對網(wǎng)站內(nèi)內(nèi)容功能規(guī)劃劃，做到讓搜搜索引擎更多多的收錄和關(guān)關(guān)注，網(wǎng)頁打打開速度更快快。通過對AZE設(shè)設(shè)計工作室的的分析，主要要包涵動畫設(shè)設(shè)計、網(wǎng)站設(shè)設(shè)計、家裝設(shè)設(shè)計、CG培培訓(xùn)四個大欄欄目，明確了了網(wǎng)站定位后后來分析相關(guān)關(guān)行業(yè)和市場場特點(diǎn)。通過過對相關(guān)行業(yè)業(yè)和市場的分分析，以及網(wǎng)網(wǎng)站內(nèi)容和功功能的分析，規(guī)劃出本次建設(shè)的網(wǎng)站主要內(nèi)容如下：1.進(jìn)入頁fllash Flash 頁頁面的導(dǎo)入網(wǎng)網(wǎng)站不僅生動動形象，還會會給人印象深深刻的感覺， flashh 頁面以四四個版塊為基基準(zhǔn)，主要分分動畫設(shè)計、網(wǎng)網(wǎng)站建設(shè)、

15、墻墻體彩繪、設(shè)設(shè)計培訓(xùn)。點(diǎn)點(diǎn)擊任意一個個可以直接進(jìn)進(jìn)入每個小站站，具有明確確的導(dǎo)航性，設(shè)設(shè)置較醒目的的進(jìn)入首頁按按鈕，通過點(diǎn)點(diǎn)擊它就可以以進(jìn)入網(wǎng)站首首頁。2.網(wǎng)站首頁網(wǎng)站首頁是整個個網(wǎng)站的門戶戶，簡潔、大大方、加載速速度快是網(wǎng)站站首頁的關(guān)鍵鍵要素。網(wǎng)站站主要規(guī)劃的的欄目內(nèi)容有：首頁、業(yè)內(nèi)內(nèi)新聞、動畫畫設(shè)計、網(wǎng)站站建設(shè)、家裝裝設(shè)計、CGG培訓(xùn)、精品品案例、關(guān)于于我們、服務(wù)務(wù)范圍、聯(lián)系系我們。3.新聞動態(tài)發(fā)發(fā)布系統(tǒng)最新動態(tài)欄目主主要用來發(fā)布布企業(yè)新聞，公公司動態(tài)、最最新消息等。通通過最新動態(tài)態(tài)欄目可使客客戶對公司最最新的發(fā)展動動態(tài)、產(chǎn)品信息、人人文文化、最最新消息等信信息有一個及及時的了解。此此欄

16、目，可讓讓客戶在線實實時管理、發(fā)布新聞、刪除新聞、更改等。4.企業(yè)留言系系統(tǒng)企業(yè)留言欄目在在設(shè)計方面要要美觀、大方、與網(wǎng)站風(fēng)格格融成一體，更要要注重用戶體體驗。網(wǎng)民無無需注冊，有有回復(fù)，通過相互直直接的交流，能能夠為企業(yè)找到潛在在客戶，和一一些市場信息息。5.人才招聘目前很多企業(yè)都都利用公司網(wǎng)網(wǎng)站平臺發(fā)布布招聘信息。這樣不但可可以充分利用用現(xiàn)有資源，而且相比傳統(tǒng)的職業(yè)服務(wù)中心更具有實時性、互動性等優(yōu)點(diǎn)。（二）網(wǎng)頁布局局版式設(shè)計logo公司公告、人才招聘、網(wǎng)站地圖、論壇聯(lián)系方式/收藏本站首頁業(yè)內(nèi)新聞動畫設(shè)計網(wǎng)站建設(shè)墻體彩繪CG培訓(xùn)精品案例關(guān)于我們服務(wù)范圍聯(lián)系我們網(wǎng)站主幻燈片公司公告動畫設(shè)計欄目最

17、新資訊幫助中心網(wǎng)頁設(shè)計欄目公司簡介資源共享墻體手繪欄目友情鏈接CG培訓(xùn)欄目網(wǎng)頁版權(quán)信息圖（1） AZZE設(shè)計工作作室首頁規(guī)劃劃圖頁面的整體布局局則是網(wǎng)頁設(shè)設(shè)計的根基。根根據(jù)現(xiàn)代網(wǎng)頁頁的發(fā)展趨勢勢來看，簡潔潔、直觀、人人性化以及個個性化是網(wǎng)站站設(shè)計的基本本要素，所以以在做整體布布局的時候一一定要充分的的考慮到這些些要素。網(wǎng)頁頁設(shè)計作為一一種視覺語言言，特別講究究編排和布局局，通過文字字圖形的空間間組合編排，表達(dá)出出和諧與美。在AZE網(wǎng)站首首頁主要版塊塊設(shè)計中，我我采用了“匡”字型布局，給給主內(nèi)容區(qū)釋釋放了更多空空間，如圖(1)（AZZE設(shè)計工作作室網(wǎng)站首頁頁）所示：頁頁面上部是網(wǎng)網(wǎng)頁標(biāo)志和導(dǎo)導(dǎo)航

18、條，接下下來是網(wǎng)頁主主幻燈片，左左邊欄目放友友情鏈接和網(wǎng)網(wǎng)頁的一些小小欄目，中間間是網(wǎng)站的四四個核心內(nèi)容容欄目，右邊邊欄目放新聞聞更新和公司司簡介，網(wǎng)頁頁底部放版權(quán)權(quán)信息。網(wǎng)頁頁內(nèi)容作為一一種版面，既既要有文字，又又要有圖片；文字有大小小、標(biāo)題和正正文之分等網(wǎng)網(wǎng)頁構(gòu)成畫面面的對比，在在網(wǎng)頁排版的的時候充分考考慮網(wǎng)站的定定位，突出表表現(xiàn)網(wǎng)站的主主體內(nèi)容。AAZE設(shè)計工工作室網(wǎng)站是是個多頁面站站點(diǎn)，頁面的編排排設(shè)計要求把把頁面之間的的有機(jī)聯(lián)系反反映出來，特特別要處理好好頁面之間和和頁面內(nèi)的秩秩序與內(nèi)容的的關(guān)系。為了了達(dá)到最佳的的視覺表現(xiàn)效效果，設(shè)計中中應(yīng)利用各組組成部分在內(nèi)內(nèi)容上的內(nèi)在在聯(lián)系和表現(xiàn)

19、現(xiàn)形式上的相相互呼應(yīng)，并并注意整個頁頁面設(shè)計風(fēng)格格的一致性，實實現(xiàn)視覺上和和心理上的連連貫，使整個個頁面設(shè)計的的各個部分極極為融洽，布布局的合理，讓瀏覽者有一個流暢的視覺體驗。（三）網(wǎng)頁色彩彩搭配色彩是藝術(shù)表現(xiàn)現(xiàn)的要素之一一。在網(wǎng)頁設(shè)設(shè)計中，根據(jù)據(jù)和諧、均衡衡和重點(diǎn)突出出的原則，將將不同的色彩彩進(jìn)行組合、搭配來構(gòu)成成符合審美要要求的頁面。根根據(jù)色彩對人人們心理的影影響，合理地地加以運(yùn)用。不同的顏色也代表著不同的行業(yè)訴求。(例如：醫(yī)院和環(huán)保部門會選擇綠色，而公共事業(yè)機(jī)構(gòu)則會選擇藍(lán)色等)因此在設(shè)計之初要充分考慮該網(wǎng)站的性質(zhì)及訪問對象，以此來確認(rèn)網(wǎng)頁的色彩搭配形式。當(dāng)主題色確定好以后，考慮其它配色時

20、，一定要考慮其它配色與主題色的關(guān)系，要體現(xiàn)什么樣的效果?！吧士偟膽?yīng)用用原則是:總總體協(xié)調(diào)，局局部對比。網(wǎng)網(wǎng)頁的整體色色彩效果應(yīng)該該是和諧的，只只有局部的、小小范圍的地方方可以有一些些強(qiáng)烈色彩的的對比?！备哂雷印⒈R堅、潘星亮著，網(wǎng)頁經(jīng)典配色與設(shè)計手冊，中國青年出版社，2006年第7期，第56頁。在色彩的運(yùn)運(yùn)用上，可以以根據(jù)主頁內(nèi)內(nèi)容的需要，分分別采用不同同的主色調(diào)。色色彩還具有明明顯的心理感感覺，例如冷冷、暖的感覺覺，進(jìn)、退的的效果等。另另外，色彩還還有民族性，各各個民族由于于環(huán)境、文化化、傳統(tǒng)等因因素的影響，對對于色彩的喜喜好也存在著著較大的差異異。充分運(yùn)用用色彩的這些些特性，可以以使我們的

21、主主頁具有深刻刻的藝術(shù)內(nèi)涵涵，從而提升升網(wǎng)頁的文化化品位。高永子、盧堅、潘星亮著，網(wǎng)頁經(jīng)典配色與設(shè)計手冊，中國青年出版社，2006年第7期，第56頁。AZE設(shè)計工作作室網(wǎng)站是一一個藝術(shù)設(shè)計計類型的網(wǎng)站站，在色彩運(yùn)運(yùn)用方面要凸凸顯行業(yè)特色色的同時更要要獨(dú)具特色，通通過對網(wǎng)站的的策劃和內(nèi)容容規(guī)劃，網(wǎng)站站主要分四個個小站分別表表現(xiàn)四個設(shè)計計行業(yè)，在把把握好每個小小站色彩整體體性又要有所所區(qū)別，動畫畫設(shè)計頁用藍(lán)藍(lán)紫色調(diào)，網(wǎng)網(wǎng)站設(shè)計頁用用藍(lán)色調(diào)，墻墻體手繪頁用用黃綠色調(diào)，CCG培訓(xùn)頁用用綠色調(diào)，主主頁采用灰色色調(diào)把四個小小站統(tǒng)一起來來。下面是網(wǎng)站設(shè)計計中用到的幾幾種調(diào)色方案案：單色方案案、相似色方方案、

22、對比色方案。1.單色方案單色方案是指在在網(wǎng)站設(shè)計中中使用一種基基本顏色，為為避免單調(diào)，可可以通過調(diào)整整這種基本顏顏色的灰度和和亮度來得到到更多的顏色色，由于整個個顏色方案中中事實上只有有一種基色，因因此這種方案案稱為單色方方案。例如：在Phottoshopp的色彩選擇擇窗口中，我我們可以這樣樣進(jìn)行建立單單色方案。首首先調(diào)整H（也也就是Huee的縮寫）后后面的值來調(diào)調(diào)整色調(diào)。注注意，H的單單位是度，也也就是基本顏顏色在顏色環(huán)環(huán)上所處位置置的角度。設(shè)設(shè)置好H的值值之后，再調(diào)調(diào)整B后面的的數(shù)字調(diào)整亮亮度以及S后后面的數(shù)字調(diào)調(diào)整飽和度。注注意，其中BB和S的單位位是百分比，也也就是向基本本顏色中添加加

23、白色和黑色色的百分比。這這樣就可以得得到一個單色色方案了。2.相似色方案案在色彩圓環(huán)上選選擇彼此相鄰鄰的幾種顏色色構(gòu)成的配色色方案就是相相似色方案。例例如橙色、橙橙紅色以及橙橙黃色就可以以組成一個相相似色方案。由由于相似色方方案中包含了了多種基色，如如果再加上亮亮度和飽和度度的變化，可可以構(gòu)成的顏顏色就非常多多。 相似色色配色方案可可以給人非常常協(xié)調(diào)的感覺覺，因此在網(wǎng)網(wǎng)站設(shè)計中非非常常用。典典型的運(yùn)用方方法就是，用用一種顏色作作為頁面背景景，而另外一一種在顏色環(huán)環(huán)中與其相鄰鄰的顏色作為為前景色。除除了上面介紹紹的綠色和黃黃色之外，藍(lán)藍(lán)色和綠色以以及紅色和褐褐色也是比較較常用的相似似色配色方案案

24、。3.對比色方案案對比色方案即把把色性完全相相反的色彩搭搭配在同一個個空間里。例例如：紅與綠綠、黃與紫、橙橙與藍(lán)等。這這種色彩的搭搭配，可以產(chǎn)產(chǎn)生強(qiáng)烈的視視覺效果，給給人亮麗、鮮鮮艷、喜慶的的感覺。當(dāng)然然，對比色調(diào)調(diào)如果用得不不好，會適得得其反，產(chǎn)生生俗氣、刺眼眼的不良效果果。這就要把把握“大調(diào)和，小小對比”這一個重要要原則，即總總體的色調(diào)應(yīng)應(yīng)該是統(tǒng)一和和諧的，局部部的地方可以以有一些小的的強(qiáng)烈對比。 （四）網(wǎng)站后臺臺設(shè)計后臺是指程序設(shè)設(shè)計、數(shù)據(jù)操操作、功能實實現(xiàn)、管理界界面和管理功功能設(shè)計等。網(wǎng)站后臺設(shè)計經(jīng)常被人們所忽視，好的后臺可以提高編輯的使用效率，同時一些好的設(shè)計也能減少錯誤的發(fā)生，針

25、對“后臺用戶”這一特殊群體提供一些可行的體驗優(yōu)化原則。合理的功能設(shè)計和友好設(shè)計對于效率和差錯率均會有非常大的提高，小小的設(shè)計可能會起到非凡的作用。三、網(wǎng)頁制作工工具的學(xué)習(xí)與與應(yīng)用（一）DreaamweavverDreamweeaver是是美國MACCROMEDDIA公司開開發(fā)的集網(wǎng)頁頁制作和管理理網(wǎng)站于一身身的所見即所所得網(wǎng)頁編輯輯器，它是第第一套針對專專業(yè)網(wǎng)頁設(shè)計計師特別發(fā)展展的視覺化網(wǎng)網(wǎng)頁開發(fā)工具具，利用它可可以輕而易舉舉地制作出跨跨越平臺限制制和跨越瀏覽覽器限制的充充滿動感的網(wǎng)網(wǎng)頁。1.Dreammweaveer的優(yōu)點(diǎn) 最佳的制作作效率 “Dreamwweaverr提供了以CCSS為基礎(chǔ)

26、礎(chǔ)設(shè)計與開發(fā)發(fā)提供支持的的革命性功能能，CSS將將網(wǎng)頁要展示示的內(nèi)容與樣樣式設(shè)定分開開?！蓖跄戎?，Dreamweaver網(wǎng)頁制作與色彩搭配全攻略，清華大學(xué)出版社，2006年第5期，第23頁。當(dāng)要改變網(wǎng)網(wǎng)頁外觀時，只只需更改樣式式設(shè)定的部分分，HTMLL文件本身并并不需要更改改。這一功能能的實現(xiàn)將網(wǎng)網(wǎng)頁設(shè)計提升升到新的層王娜著，Dreamweaver網(wǎng)頁制作與色彩搭配全攻略，清華大學(xué)出版社，2006年第5期，第23頁。 網(wǎng)站管理 使用網(wǎng)站地圖可可以快速制作作網(wǎng)站雛形、設(shè)設(shè)計、更新和和重組網(wǎng)頁。改改變網(wǎng)頁位置置或檔案名稱稱，Dreaamweavver 會自自動更新所有有連結(jié)。使用用支援文字、HHT

27、ML碼、HHTML屬性性標(biāo)簽和一般般語法的搜尋尋及置換功能能使得復(fù)雜的的網(wǎng)站更新變變得迅速又簡簡單。 2.Dreammweaveer的缺點(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)構(gòu)）中便可以以體現(xiàn)出來。 頁面原始代碼的的難以控制性性，比如您在在所見即所得得編輯器中制制作一張表格格也要幾分鐘鐘，但您要它它完全符合您您要求可能需需要幾十分鐘鐘，甚至更多多時間。而相相比之下，非非所見則所得得的網(wǎng)頁編輯輯器，就不存存在這個問題題，因為

28、所有有的HTMLL代碼 都在在您的監(jiān)控下下產(chǎn)生，但是是由于非所見見則所得編輯輯器的先天條條件就注定了了它的工作低低效率。如何何實現(xiàn)兩者的的完美結(jié)合，則則既產(chǎn)生干凈凈、準(zhǔn)確的HHTML代碼碼，又具備則則見則所得的的高效率、直直觀性，一直直是網(wǎng)頁設(shè)計計師夢想。（二）Flassh1.Flashh簡介和發(fā)展展趨勢Flash也是是由macrromediia公司推出出的交互式矢矢量圖和 WWeb 動畫畫的標(biāo)準(zhǔn)，由由Adobee公司收購。網(wǎng)網(wǎng)頁設(shè)計者使使用 Flaash 創(chuàng)作作出既漂亮又又可改變尺寸寸的導(dǎo)航界面面以及其他奇奇特的效果。fflash動動畫的好壞是是評估一個網(wǎng)網(wǎng)站好壞的重重要影響因素素之一，動感

29、感絢麗的fllash動畫畫，能給網(wǎng)站站受眾以極大大的視覺沖擊擊力。2.Flashh的優(yōu)點(diǎn)Flash的一一個很重要的的特點(diǎn)是創(chuàng)建建的文件體積積很小，F(xiàn)llash是完完全基于矢量量的動畫處理理技術(shù)，而矢矢量圖形就是是用少量的向向量數(shù)據(jù)來描描述一個復(fù)雜雜的對象，存存儲時只占很很小的空間，而而且圖像的質(zhì)質(zhì)量也很高。FFlash使使用的是插件件的工作方式式，用戶只要要安裝一次插插件，以后就就可以快速啟啟動并觀看動動畫，而不必必像Javaa那樣，每次次都要花費(fèi)大大量的時間啟啟動虛擬機(jī)。FFlash動動畫采用的是是“流式”的的動畫播放技技術(shù)，用戶不不必等到動畫畫下載完全再再去欣賞動畫畫，而是一邊邊下載一邊欣

30、欣賞。 Fllash功能能還是很廣泛泛的。使用內(nèi)內(nèi)置的ActtionSccript語語句結(jié)合JaavaScrript，也也可以制作出出互動性很強(qiáng)強(qiáng)的主頁來。3.網(wǎng)站應(yīng)用fflash注注意事項插件，F(xiàn)lassh動畫的播播放需要安裝裝Adodbb公司的播放放插件。如果果客戶電腦上上沒有便不能能播放動畫，而而且Flassh播放插件件的版本有很很多種，一些些低版本的并并不能播放采采用高版本制制作的flaash動畫。全Flash網(wǎng)網(wǎng)站，對于全Fllash網(wǎng)站站在seo方方面有很多劣劣勢，因為它它全部的內(nèi)容容，結(jié)構(gòu)都在在flashh內(nèi)部，因此此，搜索引擎擎會全然不知知這個網(wǎng)站是是什么內(nèi)容?，F(xiàn)現(xiàn)在的搜索技技

31、術(shù)并不能識識別到Flaash里面的的文本，圖片片等信息。因因此，在百度度、Googgle等搜索索引擎中無法法識別到Fllash到底底在表達(dá)什么么信息，影響響網(wǎng)站的推廣。(三) Phootoshoop1.Photooshop在在網(wǎng)頁布局中中規(guī)劃的作用用布局靈活。PPhotosshop的靈靈魂是圖層，每每層可以放置置不同的元素素，圖層之間間可以相互鏈鏈接，也可單單獨(dú)存放，每每個圖層上的的圖像位置可可以隨意挪動動而不影響其其它圖層的圖圖像位置，每每個圖層上的的圖像大小、色色階、亮度、飽飽和度透明度度等可單獨(dú)設(shè)設(shè)置而不影響響其它圖層上上的圖像。如如此靈活的功功能，完全可可以讓設(shè)計者者隨心所欲設(shè)設(shè)計而不

32、受任任何約束。修改方便。網(wǎng)網(wǎng)站建設(shè)前期期首先要與客客戶簽定合同同，簽定合同同時客戶最關(guān)關(guān)心的是自己己的網(wǎng)站是什什么樣子，這這時設(shè)計者不不可能拿出建建好的網(wǎng)站給給客戶演示，這這樣成本太高高，最好的辦辦法是拿出在在Photooshop中中做出的效果果圖給客戶看看。一般情況況下，客戶一一次滿意率非非常低，總會會提出修改意意見，而且還還會不斷地提提出修改方案案。這時我們們就可以利用用Photooshop的的強(qiáng)大功能按按客戶的要求求方便地進(jìn)行行修改和優(yōu)化化，直到客戶戶滿意為止。加快瀏覽進(jìn)度度。一個設(shè)計計不美觀不規(guī)規(guī)范的網(wǎng)站是是沒有生命力力，同樣一個個打開、下載載速度慢的網(wǎng)網(wǎng)站也是沒有有存在的價值值。使用

33、Phhotoshhop設(shè)計的的網(wǎng)頁經(jīng)過裁裁切后體積相相對要小得多多，相同的元元素因為其格格式變化也會會大大提高下下載速度，因因此Phottoshopp就成了提高高速度，提高高點(diǎn)擊率的制制勝法寶。2.photooshop與與dreammweaveer的配合雖然效果圖是用用Photooshop設(shè)設(shè)計的，但一一定要兼顧到到Dreammweaveer對頁面布布局的要求，Dreamweaver下網(wǎng)頁布局是使用國字形，還是其他模式，是否使用框架，使用框架的類型是哪一種，都是在設(shè)計前要考慮到的。否則會造成效果圖與最后的網(wǎng)站布局出現(xiàn)出入，使網(wǎng)頁的設(shè)計過程變得復(fù)雜。正確切片，只有有經(jīng)過正確切切片后，Drream

34、Weeaver才才能對效果圖圖進(jìn)行有效的的整合，Phhotoshhop在網(wǎng)頁頁布局中的積積極作用才發(fā)發(fā)揮到了極致致。四、網(wǎng)頁優(yōu)化“在網(wǎng)頁設(shè)計中中，網(wǎng)頁的優(yōu)優(yōu)化是較為重重要的一個環(huán)環(huán)節(jié)?！蓖鯐苑?、焦燕著，網(wǎng)頁設(shè)計原理及實戰(zhàn)策略，清華大學(xué)出版社，2009年第3期，第68頁。它的成功與與否會影響頁頁面的瀏覽速速度和頁面的的適應(yīng)性，影影響觀者對網(wǎng)網(wǎng)站的印象。而而網(wǎng)頁的優(yōu)化化工作是由很很多方面的優(yōu)優(yōu)化組成的，一一名優(yōu)秀的網(wǎng)網(wǎng)頁優(yōu)化工作作人員必須具具備多方面的的知識，不僅僅僅要掌握網(wǎng)網(wǎng)站設(shè)計制作作技術(shù)；還要要掌握很多計計算機(jī)其他方方面的知識(包括電子商商務(wù)、人機(jī)交交互、易用性性和一些相關(guān)關(guān)的軟件知識識等等

35、)；甚甚至需要掌握握心理學(xué)、商商業(yè)運(yùn)作等相相關(guān)知識。我我在網(wǎng)頁制作作優(yōu)化過程中中主要有兩個個方面：技術(shù)術(shù)優(yōu)化，人文文優(yōu)化。王曉峰、焦燕著，網(wǎng)頁設(shè)計原理及實戰(zhàn)策略，清華大學(xué)出版社，2009年第3期，第68頁。（一）網(wǎng)頁技術(shù)術(shù)優(yōu)化技術(shù)優(yōu)化主要是是對代碼優(yōu)化化、目錄結(jié)構(gòu)構(gòu)優(yōu)化和針對對搜索引擎的的優(yōu)化三個部部分。1.代碼優(yōu)化代碼優(yōu)化主要解解決的問題就就是頁面瀏覽覽速度和適應(yīng)應(yīng)性的問題。文文字和圖片是是構(gòu)成頁面的的兩個主要因因素，所以我我們的優(yōu)化也也要從文字和和圖片開始。在在一個網(wǎng)站中中文字是頁面面中準(zhǔn)確傳達(dá)達(dá)信息的元素素，因此字體體的優(yōu)化顯得得尤為重要。使使用css樣樣式表指定文文字的樣式是是必要的，

36、通通常我們將字字體指定為宋宋體，大小指指定12pxx，顏色要視視背景色而定定，原則上以以能看清且與與整個頁面搭搭配和諧為準(zhǔn)準(zhǔn)。在白色的的背景上，我我們一般使用用黑色，這樣樣不易產(chǎn)生視視覺疲勞，能能保證瀏覽者者較長時間地地瀏覽網(wǎng)頁。圖片是網(wǎng)頁中的的重要元素。圖圖片的優(yōu)化可可以在保證瀏瀏覽質(zhì)量的前前提下將其大大小降至最低低，這樣可以以成倍地提高高網(wǎng)頁的下載載速度。利用用Photooshop可可以將圖片切切成小塊，分分別進(jìn)行優(yōu)化化。輸出的格格式可以為ggif或jppeg，要視視具體情況而而定。一般我我們把有較為為復(fù)雜顏色變變化的小塊優(yōu)優(yōu)化為jpeeg，而把那那種只有單純純色塊的卡通通畫式的小塊塊優(yōu)化

37、為giif，這是由由這兩種格式式的特點(diǎn)決定定的。DIV與表格(tablee)是頁面中中的重要元素素,是頁面排排版的主要手手段。我們可可以設(shè)定DIIV與表格的的寬度、高度度、邊框、背背景色、對齊齊方式等參數(shù)數(shù)。很多時候候，我們將表表格的邊框設(shè)設(shè)為0，以此此來定位頁面面中的元素，或或者借此確定頁面面中各元素的的相對位置?！盀g覽器在讀取網(wǎng)頁html原代碼時，是讀完整個table才將它顯示出來的,我們在設(shè)計頁面表格的時候，應(yīng)該盡量避免將所有元素嵌套在一個表格里，而且表格嵌套層次盡量要少?！焙涡惴贾W(wǎng)頁制作與網(wǎng)站建設(shè)課堂實錄，人民郵電出版社，2009年第5期，第73頁。因此在網(wǎng)頁制作過程中可以采用DI

38、V套表格的方式來減少嵌套，提高網(wǎng)頁的瀏覽速度。何秀芳著，網(wǎng)頁制作與網(wǎng)站建設(shè)課堂實錄，人民郵電出版社，2009年第5期，第73頁。2.目錄結(jié)構(gòu)優(yōu)優(yōu)化目錄結(jié)構(gòu)優(yōu)化主主要是對網(wǎng)站站文件管理，我建議建立一個大文件夾，里邊包括各個頻道的文件夾、網(wǎng)頁頁面圖片文件夾、網(wǎng)頁內(nèi)容圖片文件夾等等一個一個的單獨(dú)類別的文件夾，使得在維護(hù)時候可以方便的找到每一個頁面的具體位置，提高工作效率。3.針對搜索引引擎的優(yōu)化搜索引擎優(yōu)化是是完整的優(yōu)化化工作必不可可少的一個步步驟。以例舉舉我對網(wǎng)站關(guān)關(guān)鍵字的優(yōu)化化，“關(guān)鍵字字”的體現(xiàn)要要合理，比如如我們可以制制作一個“網(wǎng)網(wǎng)站導(dǎo)航”的的頁面，網(wǎng)站站導(dǎo)航頁面會會淋漓盡致的的體現(xiàn)各個關(guān)關(guān)鍵字，這個個頁面不但方方便用戶使用用也會更容易易的被搜索引引擎找到起到到事半功倍的的作用。隨著著搜索