網(wǎng)頁設(shè)計與制作的具體流程

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

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

3、3 HYPERLINK l _Toc293061240 （一）網(wǎng)網(wǎng)站策劃劃 PAGEREF _Toc293061240 h 4 HYPERLINK l _Toc293061241 （二）網(wǎng)網(wǎng)頁布局局版式設(shè)設(shè)計 PAGEREF _Toc293061241 h 5 HYPERLINK l _Toc293061242 （三）網(wǎng)網(wǎng)頁色彩彩搭配 PAGEREF _Toc293061242 h 66 HYPERLINK l _Toc293061243 （四）網(wǎng)網(wǎng)站后臺臺設(shè)計 PAGEREF _Toc293061243 h 77 HYPERLINK l _Toc293061244 三、網(wǎng)頁頁制作工工具的學(xué)學(xué)

4、習(xí)與應(yīng)用 PAGEREF _Toc293061244 h 8 HYPERLINK l _Toc293061245 （一）DDreaamweeaveer PAGEREF _Toc293061245 h 8 HYPERLINK l _Toc293061246 （二）FFlassh PAGEREF _Toc293061246 h 9 HYPERLINK l _Toc293061247 (三) Phootosshopp PAGEREF _Toc293061247 h 9 HYPERLINK l _Toc293061248 四、網(wǎng)頁頁優(yōu)化 PAGEREF _Toc293061248 h 110 HYPE

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

6、的網(wǎng)頁頁也越來來越受到到人們的的關(guān)注。本文從從網(wǎng)頁設(shè)設(shè)計的要要素、原則及及相關(guān)技技巧等對對網(wǎng)頁設(shè)設(shè)計與制制作進行行了介紹紹和說明明。通過過對網(wǎng)頁頁的設(shè)計計與制作作的研究究,探求求符合時時代特色色的網(wǎng)頁頁制作原原理和行行之有效效的設(shè)計計方法,提高網(wǎng)網(wǎng)頁的用戶體體驗和視視覺沖擊擊力,增增強網(wǎng)站站與網(wǎng)民民的互動動，促進進企業(yè)開開展電子子商務(wù)，信息平平臺等基基礎(chǔ)設(shè)施施，創(chuàng)造造更高的的經(jīng)濟效效益。關(guān)鍵詞：網(wǎng)頁設(shè)設(shè)計；網(wǎng)網(wǎng)頁制作作；色彩彩搭配Absttracct: Witth tthe rappid devveloopmeent of Chiinas IInteerneet wweb apppliccat

7、iionss, rrelaatedd teechnnoloogy willl gget morre aappllicaatioons, ass Innterrnett innforrmattionn reepreesenntattionn annd ttrannsfeer oof wweb bassed carrrieer hhas beccomee thhe cconccernn off thhe ppubllic. Thhis artticlle ffromm thhe wweb pagge ddesiign eleemennts andd prrincciplles andd reela

8、tted skiillss onn weeb ddesiign andd prroduuctiion aree inntrooducced andd illlusstraatedd. TThrooughh thhe ddesiign andd maanuffactturee off weeb ppagee, wwhicch ccan acccordd wiith thee sppeciial agee weeb pprodducttionn prrincciplle aand efffecttivee deesiggn mmethhodss, iimprrovee weeb uuserr ex

9、xperriennce andd viisuaal iimpaact, ennhannce thee innterracttionn wiith Intternnet webbsitte, proomotte eenteerprrisee inn deevellopiing eleectrroniic ccommmercce, infformmatiion plaatfoorm andd ottherr innfraastrructturee, aand creeatee moore ecoonommic bennefiits. Key Worrds: web dessignn；web pag

10、ges；coloour collloccatiion一個成功功抓住用用戶“眼眼球”并并最終帶帶來經(jīng)濟濟效益的的網(wǎng)站首首先需要要一個優(yōu)優(yōu)秀的設(shè)設(shè)計，然然后加上上優(yōu)秀的的制作。設(shè)計是是網(wǎng)站的的核心和和靈魂，是一個個感性思思考與理理性分析析相結(jié)合合的復(fù)雜雜的過程程，它的的方向取取決于設(shè)設(shè)計的任任務(wù)，它它的實現(xiàn)現(xiàn)依賴于于網(wǎng)頁的的制作。把網(wǎng)頁藝藝術(shù)設(shè)計計與其他他藝術(shù)設(shè)設(shè)計形式式進行比比較，嘗嘗試從網(wǎng)網(wǎng)頁藝術(shù)術(shù)設(shè)計的的內(nèi)容、原則、制作技技巧、制制作流程程等幾個個方面對對這個新新的藝術(shù)術(shù)設(shè)計領(lǐng)領(lǐng)域進行行初步的的歸納總總結(jié)和理理論探討討，網(wǎng)頁藝藝術(shù)設(shè)計計是藝術(shù)術(shù)與技術(shù)術(shù)的高度度統(tǒng)一。一、網(wǎng)頁頁設(shè)計的的原則（一

11、）明明確網(wǎng)站站主題優(yōu)秀的網(wǎng)網(wǎng)頁設(shè)計計必然服服務(wù)于網(wǎng)網(wǎng)站的主主題，就就是說要要建設(shè)一一個網(wǎng)站站，首先先需要定定位，既既要清楚楚建設(shè)網(wǎng)網(wǎng)站的目目的和面面向瀏覽覽的對象象，只有有定位準(zhǔn)準(zhǔn)確的網(wǎng)網(wǎng)站才會會有可觀觀性和應(yīng)應(yīng)用性。因此我我們必須須明確設(shè)設(shè)計站點點的目的的和用戶戶需求，從而做做出切實實可行的的設(shè)計計計劃。（二）總總體設(shè)計計方案主主題鮮明明在目標(biāo)明明確的基基礎(chǔ)上，完成網(wǎng)網(wǎng)站的構(gòu)構(gòu)思創(chuàng)意意即總體體設(shè)計方方案。對對網(wǎng)站的的整體風(fēng)風(fēng)格和特特色作出出定位，規(guī)劃網(wǎng)網(wǎng)站的組組織結(jié)構(gòu)構(gòu)。做到到主題鮮鮮明突出出，要點點明確，以簡單單明確的的語言和和畫面體體現(xiàn)站點點的主題題；調(diào)動動一切手手段充分分表現(xiàn)網(wǎng)網(wǎng)站的個

12、個性和情情趣。（三）網(wǎng)網(wǎng)頁設(shè)計計形式與與內(nèi)容相相統(tǒng)一內(nèi)容是構(gòu)構(gòu)成設(shè)計計的一切切內(nèi)在要要素的總總和，是是設(shè)計存存在的基基礎(chǔ)，被被稱為“設(shè)計的的靈魂”；形式式是構(gòu)成成內(nèi)容諸諸要素的的內(nèi)部結(jié)結(jié)構(gòu)或內(nèi)內(nèi)容的外外部表現(xiàn)現(xiàn)方式。為了將將豐富的的意義和和多樣的的形式組組織成統(tǒng)統(tǒng)一的頁頁面結(jié)構(gòu)構(gòu)，形式式語言必必須符合合頁面的的內(nèi)容，體現(xiàn)內(nèi)內(nèi)容的豐豐富含義義。靈活活運用對對比與調(diào)調(diào)和、對對稱與平平衡、節(jié)節(jié)奏與韻韻律以及及留白等等手法，通過過空間、文字、圖形之之間的相相互關(guān)系系建立整整體的均均衡狀態(tài)態(tài)，產(chǎn)生生和諧的的美感。如對稱稱原則在在頁面設(shè)設(shè)計中，它的均均衡有時時會使頁頁面顯得得呆板，但如果果加入一一些富有有

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

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

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

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

17、通通過最新新動態(tài)欄欄目可使使客戶對對公司最最新的發(fā)發(fā)展動態(tài)態(tài)、產(chǎn)品信信息、人人文文化化、最新新消息等等信息有有一個及及時的了了解。此此欄目，可讓客客戶在線線實時管管理、發(fā)布新新聞、刪除新新聞、更改等等。4.企業(yè)業(yè)留言系系統(tǒng)企業(yè)留言言欄目在在設(shè)計方方面要美美觀、大方、與網(wǎng)站站風(fēng)格融融成一體體，更要要注重用用戶體驗驗。網(wǎng)民民無需注注冊，有有回復(fù)，通過相相互直接接的交流流，能夠夠為企業(yè)業(yè)找到潛潛在客戶戶，和一一些市場場信息。5.人才才招聘目前很多多企業(yè)都都利用公公司網(wǎng)站站平臺發(fā)發(fā)布招聘聘信息。這樣不不但可以以充分利利用現(xiàn)有有資源，而且相相比傳統(tǒng)統(tǒng)的職業(yè)業(yè)服務(wù)中中心更具具有實時時性、互互動性等等優(yōu)點。

18、（二）網(wǎng)網(wǎng)頁布局局版式設(shè)設(shè)計logo公司公告、人才招聘、網(wǎng)站地圖、論壇聯(lián)系方式/收藏本站首頁業(yè)內(nèi)新聞動畫設(shè)計網(wǎng)站建設(shè)墻體彩繪CG培訓(xùn)精品案例關(guān)于我們服務(wù)范圍聯(lián)系我們網(wǎng)站主幻燈片公司公告動畫設(shè)計欄目最新資訊幫助中心網(wǎng)頁設(shè)計欄目公司簡介資源共享墻體手繪欄目友情鏈接CG培訓(xùn)欄目網(wǎng)頁版權(quán)權(quán)信息圖（1） AZZE設(shè)計計工作室室首頁規(guī)規(guī)劃圖頁面的整整體布局局則是網(wǎng)網(wǎng)頁設(shè)計計的根基基。根據(jù)據(jù)現(xiàn)代網(wǎng)網(wǎng)頁的發(fā)發(fā)展趨勢勢來看，簡潔、直觀、人性化化以及個個性化是是網(wǎng)站設(shè)設(shè)計的基基本要素素，所以以在做整整體布局局的時候候一定要要充分的的考慮到到這些要要素。網(wǎng)網(wǎng)頁設(shè)計計作為一一種視覺覺語言，特別講講究編排排和布局局，通

19、過過文字圖圖形的空空間組合合編排，表表達出和和諧與美美。在AZEE網(wǎng)站首首頁主要要版塊設(shè)設(shè)計中，我采用用了“匡”字型布布局，給給主內(nèi)容容區(qū)釋放放了更多多空間，如圖(1)（AZEE設(shè)計工工作室網(wǎng)網(wǎng)站首頁頁）所示示：頁面面上部是是網(wǎng)頁標(biāo)標(biāo)志和導(dǎo)導(dǎo)航條，接下來來是網(wǎng)頁頁主幻燈燈片，左左邊欄目目放友情情鏈接和和網(wǎng)頁的的一些小小欄目，中間是是網(wǎng)站的的四個核核心內(nèi)容容欄目，右邊欄欄目放新新聞更新新和公司司簡介，網(wǎng)頁底底部放版版權(quán)信息息。網(wǎng)頁頁內(nèi)容作作為一種種版面，既要有有文字，又要有有圖片；文字有有大小、標(biāo)題和和正文之之分等網(wǎng)網(wǎng)頁構(gòu)成成畫面的的對比，在網(wǎng)頁頁排版的的時候充充分考慮慮網(wǎng)站的的定位，突出表表現(xiàn)

20、網(wǎng)站站的主體體內(nèi)容。AZEE設(shè)計工工作室網(wǎng)網(wǎng)站是個個多頁面面站點，頁面的的編排設(shè)設(shè)計要求求把頁面面之間的的有機聯(lián)聯(lián)系反映映出來，特別要要處理好好頁面之之間和頁頁面內(nèi)的的秩序與與內(nèi)容的的關(guān)系。為了達達到最佳佳的視覺覺表現(xiàn)效效果，設(shè)設(shè)計中應(yīng)應(yīng)利用各各組成部部分在內(nèi)內(nèi)容上的的內(nèi)在聯(lián)聯(lián)系和表表現(xiàn)形式式上的相相互呼應(yīng)應(yīng)，并注注意整個個頁面設(shè)設(shè)計風(fēng)格格的一致致性，實實現(xiàn)視覺覺上和心心理上的的連貫，使整個個頁面設(shè)設(shè)計的各各個部分分極為融融洽，布布局的合合理，讓讓瀏覽者者有一個個流暢的的視覺體體驗。（三）網(wǎng)網(wǎng)頁色彩彩搭配色彩是藝藝術(shù)表現(xiàn)現(xiàn)的要素素之一。在網(wǎng)頁頁設(shè)計中中，根據(jù)據(jù)和諧、均衡和和重點突突出的原原則，

21、將將不同的的色彩進進行組合合、搭配來來構(gòu)成符符合審美美要求的的頁面。根據(jù)色色彩對人人們心理理的影響響，合理理地加以以運用。不同的的顏色也也代表著著不同的的行業(yè)訴訴求。(例如：醫(yī)院和和環(huán)保部部門會選選擇綠色色，而公公共事業(yè)業(yè)機構(gòu)則則會選擇擇藍色等等)因此此在設(shè)計計之初要要充分考考慮該網(wǎng)網(wǎng)站的性性質(zhì)及訪訪問對象象，以此此來確認認網(wǎng)頁的的色彩搭搭配形式式。當(dāng)主主題色確確定好以以后，考考慮其它它配色時時，一定定要考慮慮其它配配色與主主題色的的關(guān)系，要體現(xiàn)現(xiàn)什么樣樣的效果果?！吧士偪偟膽?yīng)用用原則是是:總體體協(xié)調(diào)，局部對對比。網(wǎng)網(wǎng)頁的整整體色彩彩效果應(yīng)應(yīng)該是和和諧的，只有局局部的、小范圍圍的地方方可以有

22、有一些強強烈色彩彩的對比比?！备哂雷印⒈R堅、潘星亮著，網(wǎng)頁經(jīng)典配色與設(shè)計手冊，中國青年出版社，2006年第7期，第56頁。在色彩彩的運用用上，可可以根據(jù)據(jù)主頁內(nèi)內(nèi)容的需需要，分分別采用用不同的的主色調(diào)調(diào)。色彩彩還具有有明顯的的心理感感覺，例例如冷、暖的感感覺，進進、退的的效果等等。另外外，色彩彩還有民民族性，各個民民族由于于環(huán)境、文化、傳統(tǒng)等等因素的的影響，對于色色彩的喜喜好也存存在著較較大的差差異。充充分運用用色彩的的這些特特性，可可以使我我們的主主頁具有有深刻的的藝術(shù)內(nèi)內(nèi)涵，從從而提升升網(wǎng)頁的的文化品品位。AZE設(shè)設(shè)計工作作室網(wǎng)站站是一個個藝術(shù)設(shè)設(shè)計類型型的網(wǎng)站站，在色色彩運用用方面要要凸

23、顯行行業(yè)特色色的同時時更要獨獨具特色色，通過過對網(wǎng)站站的策劃劃和內(nèi)容容規(guī)劃，網(wǎng)站主主要分四四個小站站分別表表現(xiàn)四個個設(shè)計行行業(yè)，在在把握好好每個小小站色彩彩整體性性又要有有所區(qū)別別，動畫畫設(shè)計頁頁用藍紫紫色調(diào)，網(wǎng)站設(shè)設(shè)計頁用用藍色調(diào)調(diào)，墻體體手繪頁頁用黃綠綠色調(diào)，CG培培訓(xùn)頁用用綠色調(diào)調(diào)，主頁頁采用灰灰色調(diào)把把四個小小站統(tǒng)一一起來。下面是網(wǎng)網(wǎng)站設(shè)計計中用到到的幾種種調(diào)色方方案：單單色方案案、相似似色方案案、對比比色方案案。1.單色色方案單色方案案是指在在網(wǎng)站設(shè)設(shè)計中使使用一種種基本顏顏色，為為避免單單調(diào)，可可以通過過調(diào)整這這種基本本顏色的的灰度和和亮度來來得到更更多的顏顏色，由由于整個個顏色方

24、方案中事事實上只只有一種種基色，因此這這種方案案稱為單單色方案案。例如如：在PPhottoshhop的的色彩選選擇窗口口中，我我們可以以這樣進進行建立立單色方方案。首首先調(diào)整整H（也也就是HHue的的縮寫）后面的的值來調(diào)調(diào)整色調(diào)調(diào)。注意意，H的的單位是是度，也也就是基基本顏色色在顏色色環(huán)上所所處位置置的角度度。設(shè)置置好H的的值之后后，再調(diào)調(diào)整B后后面的數(shù)數(shù)字調(diào)整整亮度以以及S后后面的數(shù)數(shù)字調(diào)整整飽和度度。注意意，其中中B和SS的單位位是百分分比，也也就是向向基本顏顏色中添添加白色色和黑色色的百分分比。這這樣就可可以得到到一個單單色方案案了。2.相似似色方案案在色彩圓圓環(huán)上選選擇彼此此相鄰的的幾

25、種顏顏色構(gòu)成成的配色色方案就就是相似似色方案案。例如如橙色、橙紅色色以及橙橙黃色就就可以組組成一個個相似色色方案。由于相相似色方方案中包包含了多多種基色色，如果果再加上上亮度和和飽和度度的變化化，可以以構(gòu)成的的顏色就就非常多多。 相相似色配配色方案案可以給給人非常常協(xié)調(diào)的的感覺，因此在在網(wǎng)站設(shè)設(shè)計中非非常常用用。典型型的運用用方法就就是，用用一種顏顏色作為為頁面背背景，而而另外一一種在顏顏色環(huán)中中與其相相鄰的顏顏色作為為前景色色。除了了上面介介紹的綠綠色和黃黃色之外外，藍色色和綠色色以及紅紅色和褐褐色也是是比較常常用的相相似色配配色方案案。3.對比比色方案案對比色方方案即把把色性完完全相反反的

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

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

28、1.Drreammweaaverr的優(yōu)點點最佳的的制作效效率 “Dreeamwweavver提提供了以以CSSS為基礎(chǔ)礎(chǔ)設(shè)計與與開發(fā)提提供支持持的革命命性功能能，CSSS將網(wǎng)網(wǎng)頁要展展示的內(nèi)內(nèi)容與樣樣式設(shè)定定分開。”王娜著，Dreamweaver網(wǎng)頁制作與色彩搭配全攻略，清華大學(xué)出版社，2006年第5期，第23頁。當(dāng)要改改變網(wǎng)頁頁外觀時時，只需需更改樣樣式設(shè)定定的部分分，HTTML文文件本身身并不需需要更改改。這一一功能的的實現(xiàn)將將網(wǎng)頁設(shè)設(shè)計提升升到新的的層次。網(wǎng)站管管理 使用網(wǎng)站站地圖可可以快速速制作網(wǎng)網(wǎng)站雛形形、設(shè)計計、更新新和重組組網(wǎng)頁。改變網(wǎng)網(wǎng)頁位置置或檔案案名稱，Dreeamwwea

29、vver 會自動動更新所所有連結(jié)結(jié)。使用用支援文文字、HHTMLL碼、HHTMLL屬性標(biāo)標(biāo)簽和一一般語法法的搜尋尋及置換換功能使使得復(fù)雜雜的網(wǎng)站站更新變變得迅速速又簡單單。 2.Drreammweaaverr的缺點點難以精確確達到與與瀏覽器器完全一一致的顯顯示效果果。也就就是說在在所見即即所得網(wǎng)網(wǎng)頁編輯輯器中制制作的網(wǎng)網(wǎng)頁放到到瀏覽器器中是很很難完全全達到您您真正想想要的效效果，這這一點在在結(jié)構(gòu)復(fù)復(fù)雜一些些的網(wǎng)頁頁（如分分幀結(jié)構(gòu)構(gòu)、動態(tài)態(tài)網(wǎng)頁結(jié)結(jié)構(gòu)）中中便可以以體現(xiàn)出出來。頁面原始始代碼的的難以控控制性，比如您您在所見見即所得得編輯器器中制作作一張表表格也要要幾分鐘鐘，但您您要它完完全符合合您

30、要求求可能需需要幾十十分鐘，甚至更更多時間間。而相相比之下下，非所所見則所所得的網(wǎng)網(wǎng)頁編輯輯器，就就不存在在這個問問題，因因為所有有的HTTML代代碼 都都在您的的監(jiān)控下下產(chǎn)生，但是由由于非所所見則所所得編輯輯器的先先天條件件就注定定了它的的工作低低效率。如何實實現(xiàn)兩者者的完美美結(jié)合，則既產(chǎn)產(chǎn)生干凈凈、準(zhǔn)確確的HTTML代代碼，又又具備則則見則所所得的高高效率、直觀性性，一直直是網(wǎng)頁頁設(shè)計師師夢想。（二）FFlassh1.Fllashh簡介和和發(fā)展趨趨勢Flassh也是是由maacroomeddia公公司推出出的交互互式矢量量圖和 Webb 動畫畫的標(biāo)準(zhǔn)準(zhǔn)，由AAdobbe公司司收購。網(wǎng)頁設(shè)設(shè)

31、計者使使用 FFlassh 創(chuàng)創(chuàng)作出既既漂亮又又可改變變尺寸的的導(dǎo)航界界面以及及其他奇奇特的效效果。fflassh動畫畫的好壞壞是評估估一個網(wǎng)網(wǎng)站好壞壞的重要要影響因因素之一一，動感感絢麗的的flaash動動畫，能能給網(wǎng)站站受眾以以極大的的視覺沖沖擊力。2.Fllashh的優(yōu)點點Flassh的一一個很重重要的特特點是創(chuàng)創(chuàng)建的文文件體積積很小，F(xiàn)laash是是完全基基于矢量量的動畫畫處理技技術(shù)，而而矢量圖圖形就是是用少量量的向量量數(shù)據(jù)來來描述一一個復(fù)雜雜的對象象，存儲儲時只占占很小的的空間，而且圖圖像的質(zhì)質(zhì)量也很很高。FFlassh使用用的是插插件的工工作方式式，用戶戶只要安安裝一次次插件，以后

32、就就可以快快速啟動動并觀看看動畫，而不必必像Jaava那那樣，每每次都要要花費大大量的時時間啟動動虛擬機機。Fllashh動畫采采用的是是“流式式”的動動畫播放放技術(shù)，用戶不不必等到到動畫下下載完全全再去欣欣賞動畫畫，而是是一邊下下載一邊邊欣賞。 Fllashh功能還還是很廣廣泛的。使用內(nèi)內(nèi)置的AActiionSScriipt語語句結(jié)合合JavvaSccrippt，也也可以制制作出互互動性很很強的主主頁來。3.網(wǎng)站站應(yīng)用fflassh注意意事項插件，F(xiàn)Flassh動畫畫的播放放需要安安裝Addodbb公司的的播放插插件。如如果客戶戶電腦上上沒有便便不能播播放動畫畫，而且且Flaash播播放插件

33、件的版本本有很多多種，一一些低版版本的并并不能播播放采用用高版本本制作的的flaash動動畫。全Flaash網(wǎng)網(wǎng)站，對于全全Flaash網(wǎng)網(wǎng)站在sseo方方面有很很多劣勢勢，因為為它全部部的內(nèi)容容，結(jié)構(gòu)構(gòu)都在fflassh內(nèi)部部，因此此，搜索索引擎會會全然不不知這個個網(wǎng)站是是什么內(nèi)內(nèi)容?，F(xiàn)現(xiàn)在的搜搜索技術(shù)術(shù)并不能能識別到到Flaash里里面的文文本，圖圖片等信信息。因因此，在在百度、Goooglee等搜索索引擎中中無法識識別到FFlassh到底底在表達達什么信信息，影影響網(wǎng)站站的推廣廣。(三) Phootosshopp1.Phhotooshoop在網(wǎng)網(wǎng)頁布局局中規(guī)劃劃的作用用布局靈靈活。PPh

34、ottoshhop的的靈魂是是圖層，每層可可以放置置不同的的元素，圖層之之間可以以相互鏈鏈接，也也可單獨獨存放，每個圖圖層上的的圖像位位置可以以隨意挪挪動而不不影響其其它圖層層的圖像像位置，每個圖圖層上的的圖像大大小、色色階、亮亮度、飽飽和度透透明度等等可單獨獨設(shè)置而而不影響響其它圖圖層上的的圖像。如此靈靈活的功功能，完完全可以以讓設(shè)計計者隨心心所欲設(shè)設(shè)計而不不受任何何約束。修改方方便。網(wǎng)網(wǎng)站建設(shè)設(shè)前期首首先要與與客戶簽簽定合同同，簽定定合同時時客戶最最關(guān)心的的是自己己的網(wǎng)站站是什么么樣子，這時設(shè)設(shè)計者不不可能拿拿出建好好的網(wǎng)站站給客戶戶演示，這樣成成本太高高，最好好的辦法法是拿出出在Phho

35、tooshoop中做做出的效效果圖給給客戶看看。一般般情況下下，客戶戶一次滿滿意率非非常低，總會提提出修改改意見，而且還還會不斷斷地提出出修改方方案。這這時我們們就可以以利用PPhottoshhop的的強大功功能按客客戶的要要求方便便地進行行修改和和優(yōu)化，直到客客戶滿意意為止。加快瀏瀏覽進度度。一個個設(shè)計不不美觀不不規(guī)范的的網(wǎng)站是是沒有生生命力，同樣一一個打開開、下載載速度慢慢的網(wǎng)站站也是沒沒有存在在的價值值。使用用Phootosshopp設(shè)計的的網(wǎng)頁經(jīng)經(jīng)過裁切切后體積積相對要要小得多多，相同同的元素素因為其其格式變變化也會會大大提提高下載載速度，因此PPhottoshhop就就成了提提高速度

36、度，提高高點擊率率的制勝勝法寶。2.phhotooshoop與ddreaamweeaveer的配配合雖然效果果圖是用用Phootosshopp設(shè)計的的，但一一定要兼兼顧到DDreaamweeaveer對頁頁面布局局的要求求，Drreammweaaverr下網(wǎng)頁頁布局是是使用國字形，還是其其他模式式，是否否使用框框架，使使用框架架的類型型是哪一一種，都都是在設(shè)設(shè)計前要要考慮到到的。否否則會造造成效果果圖與最最后的網(wǎng)網(wǎng)站布局局出現(xiàn)出出入，使使網(wǎng)頁的的設(shè)計過過程變得得復(fù)雜。正確切片片，只有有經(jīng)過正正確切片片后，DDreaamWeeaveer才能能對效果果圖進行行有效的的整合，Phootosshopp

37、在網(wǎng)頁頁布局中中的積極極作用才才發(fā)揮到到了極致致。四、網(wǎng)頁頁優(yōu)化“在網(wǎng)頁頁設(shè)計中中，網(wǎng)頁頁的優(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)頁頁優(yōu)化工工作人員員必須具具備多方方面的知知識，不不僅僅要要掌握網(wǎng)網(wǎng)站設(shè)計計制作技技術(shù)；還還要掌握握很多計計算機其其他方面面的知識識(包括括電子商商務(wù)、人人機交互互、易用用性和一一些相關(guān)關(guān)的軟件件知識等等等)；甚至需需要掌握握

38、心理學(xué)學(xué)、商業(yè)業(yè)運作等等相關(guān)知知識。我我在網(wǎng)頁頁制作優(yōu)優(yōu)化過程程中主要要有兩個個方面：技術(shù)優(yōu)優(yōu)化，人人文優(yōu)化化。（一）網(wǎng)網(wǎng)頁技術(shù)術(shù)優(yōu)化技術(shù)優(yōu)化化主要是是對代碼碼優(yōu)化、目錄結(jié)結(jié)構(gòu)優(yōu)化化和針對對搜索引引擎的優(yōu)優(yōu)化三個個部分。1.代碼碼優(yōu)化代碼優(yōu)化化主要解解決的問問題就是是頁面瀏瀏覽速度度和適應(yīng)應(yīng)性的問問題。文文字和圖圖片是構(gòu)構(gòu)成頁面面的兩個個主要因因素，所所以我們們的優(yōu)化化也要從從文字和和圖片開開始。在在一個網(wǎng)網(wǎng)站中文文字是頁頁面中準(zhǔn)準(zhǔn)確傳達達信息的的元素，因此字字體的優(yōu)優(yōu)化顯得得尤為重重要。使使用csss樣式式表指定定文字的的樣式是是必要的的，通常常我們將將字體指指定為宋宋體，大大小指定定12p

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

40、的小塊優(yōu)優(yōu)化為ggif，這是由由這兩種種格式的的特點決決定的。DIV與與表格(tabble)是頁面面中的重重要元素素,是頁頁面排版版的主要要手段。我們可可以設(shè)定定DIVV與表格格的寬度度、高度度、邊框框、背景景色、對對齊方式式等參數(shù)數(shù)。很多多時候，我們將將表格的的邊框設(shè)設(shè)為0，以此來來定位頁頁面中的的元素，或者借借此確定定頁面中中各元素素的相對對位置?！盀g覽器器在讀取取網(wǎng)頁hhtmll原代碼碼時，是是讀完整整個taablee才將它它顯示出出來的,我們在在設(shè)計頁頁面表格格的時候候，應(yīng)該該盡量避避免將所所有元素素嵌套在在一個表表格里，而且表表格嵌套套層次盡盡量要少少。”何秀芳著，網(wǎng)頁制作與網(wǎng)站建設(shè)

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