第一篇：畢業(yè)論文-淺析傳統(tǒng)風(fēng)格網(wǎng)頁(yè)設(shè)計(jì)

淺析傳統(tǒng)風(fēng)格網(wǎng)頁(yè)設(shè)計(jì)

——以“千秋詞君李煜”、“北京小吃”網(wǎng)站為例

摘 要

現(xiàn)代風(fēng)格，簡(jiǎn)約、扁平化、有質(zhì)感，擁有空間感，能夠以少勝多；傳統(tǒng)風(fēng)格，也指中國(guó)風(fēng)，包羅萬(wàn)象，既有繁復(fù)精巧，亦有淡雅意境。二者在網(wǎng)頁(yè)風(fēng)格設(shè)計(jì)中，并不對(duì)立，反而共生，以網(wǎng)頁(yè)為載體，就要遵守其一定的內(nèi)在規(guī)律，例如按照瀏覽者眼動(dòng)規(guī)律來(lái)布局，根據(jù)傳達(dá)給瀏覽者的信息來(lái)配色等，只有這樣才能讓傳統(tǒng)風(fēng)格成功的呈現(xiàn)在互聯(lián)網(wǎng)上，一成不變的照搬必然會(huì)被用戶拒絕甚至淘汰。

本文以“千秋詞君李煜”和“北京小吃”網(wǎng)站項(xiàng)目為例，同時(shí)輔以其他網(wǎng)站案例，介紹了傳統(tǒng)風(fēng)格中具有代表性的兩個(gè)類(lèi)型，通過(guò)淺析傳統(tǒng)網(wǎng)頁(yè)風(fēng)格設(shè)計(jì)的特點(diǎn)和要素，總結(jié)如何在網(wǎng)頁(yè)這一現(xiàn)代產(chǎn)物中更好的表現(xiàn)傳統(tǒng)風(fēng)格，以及怎樣準(zhǔn)確的向用戶傳達(dá)中國(guó)傳統(tǒng)風(fēng)格中的文化含義，加快傳統(tǒng)風(fēng)格設(shè)計(jì)的普及。關(guān)鍵詞：網(wǎng)頁(yè)設(shè)計(jì) 傳統(tǒng)風(fēng)格 信息傳達(dá)

設(shè)計(jì)總說(shuō)明

本人的畢業(yè)設(shè)計(jì)是“千秋詞君李煜”與“北京小吃”兩個(gè)網(wǎng)站項(xiàng)目，這兩個(gè)是我個(gè)人非常感興趣的項(xiàng)目。

李煜，世稱(chēng)南唐后主，是五代十國(guó)之一南唐的最后一位帝王，他的詩(shī)詞，既有哀戚婉轉(zhuǎn)亦有氣勢(shì)磅礴；他的一生，恣意放縱卻可享國(guó)十余年，但早年喪兄喪父喪妻，中年流亡為質(zhì)終死于毒酒；幾句話不足以總結(jié)李煜充滿傳奇色彩的一生，不談?wù)?，私以為李煜是中?guó)歷史上任何一位帝王都不可比擬的。

北京小吃，分為民間小吃和宮廷小吃。隨著各個(gè)朝代不斷更替與進(jìn)步，現(xiàn)已傳承有百來(lái)種各具特色并深受多方食客喜愛(ài)的口味與風(fēng)格，譬如爆肚兒、炒肝兒、鹵煮、豆汁兒、焦圈兒等等。凝聚了無(wú)數(shù)人的智慧，傳承了中國(guó)5000年的文化。而且在很多小吃的背后，都有一段鮮為人知的小故事，或是帶有傳奇色彩的民間流傳，或是跟慈禧老佛爺?shù)囊萋勅な掠嘘P(guān)。所以北京小吃已經(jīng)不單單是簡(jiǎn)單的小吃，而是一種代表北京的飲食文化。

本次畢業(yè)設(shè)計(jì)的主要任務(wù)根據(jù)兩個(gè)不同的項(xiàng)目會(huì)有所調(diào)整。

首先是“李煜”，因?yàn)樵谀壳八械氖鼙娙后w中，知道和了解李煜的用戶比較少，好在現(xiàn)在許多人都開(kāi)始注重自身文化修養(yǎng)，所以我們從李煜的詩(shī)詞入手，運(yùn)用傳統(tǒng)風(fēng)格營(yíng)造一種濃郁的文化氣氛，既要符合李煜的個(gè)人氣質(zhì)，也要符合當(dāng)今各種用戶的欣賞需求，以此去吸引用戶進(jìn)一步的了解和關(guān)注李煜這個(gè)人物。

其次是關(guān)于北京小吃。北京作為中國(guó)的首都，每天都迎接著八方來(lái)客。所以北京小吃這個(gè)帶有濃郁文化的特色傳承，也自然受到了更多人的喜愛(ài)與探尋。但至今為止互聯(lián)網(wǎng)上還沒(méi)有一個(gè)關(guān)于北京小吃的網(wǎng)站，實(shí)在可惜。

本人想通過(guò)這個(gè)網(wǎng)站可以系統(tǒng)的梳理其種類(lèi)和多方式去展現(xiàn)北京小吃，讓愛(ài)吃、會(huì)吃的朋友們能夠深入了解北京小吃與北京文化，有一個(gè)可以交流的平臺(tái)，同時(shí)也要吸引更多不了解其中奧妙的民眾來(lái)關(guān)注北京小吃，并深深的愛(ài)上它。

在制作這兩個(gè)項(xiàng)目時(shí)，我們選擇了現(xiàn)在市場(chǎng)上主流的HTML+CSS樣式，便于用戶瀏覽和閱讀信息，并配以Flash導(dǎo)入頁(yè)，增加視覺(jué)效果。在“千秋詞君李煜”這個(gè)項(xiàng)目中我們采用了淡然雅致的配色，其中導(dǎo)入頁(yè)與首頁(yè)各1頁(yè)，5個(gè)二級(jí)頁(yè)面，21個(gè)次級(jí)頁(yè)面，次級(jí)頁(yè)面中共有49個(gè)內(nèi)容頁(yè)，共計(jì)77個(gè)頁(yè)面；而在“北京小吃”中，我們采用了活潑鮮艷的配色，其中導(dǎo)入頁(yè)與首頁(yè)各1頁(yè)，登錄注冊(cè)1頁(yè)，4個(gè)二級(jí)頁(yè)面，10個(gè)次級(jí)頁(yè)面，32個(gè)內(nèi)容頁(yè)，共計(jì)49個(gè)頁(yè)面，其中有兩個(gè)二級(jí)頁(yè)面因有用戶發(fā)言功能，需后臺(tái)服務(wù)器支持，故只能做出一個(gè)模版，其中鏈接不可點(diǎn)擊，如果可以點(diǎn)擊內(nèi)容會(huì)更加豐富。

制作該網(wǎng)站時(shí)主要使用的是Photoshop（用于界面設(shè)計(jì)）、Dreamweave（用于網(wǎng)頁(yè)制作）以及Flash（用于界面主視覺(jué)Flash制作）三款軟件。

目 錄

緒論........................................................................1 1 網(wǎng)頁(yè)風(fēng)格設(shè)計(jì)..............................................................1

1.1網(wǎng)頁(yè)風(fēng)格設(shè)計(jì)的概念....................................................1 1.2網(wǎng)頁(yè)風(fēng)格種類(lèi)..........................................................1 2 傳統(tǒng)風(fēng)格網(wǎng)頁(yè)設(shè)計(jì)..........................................................3

2.1傳統(tǒng)風(fēng)格網(wǎng)頁(yè)設(shè)計(jì)......................................................3 2.2.如何選擇傳統(tǒng)風(fēng)格網(wǎng)頁(yè)設(shè)計(jì)..............................................4 2.3傳統(tǒng)風(fēng)格網(wǎng)頁(yè)設(shè)計(jì)的優(yōu)勢(shì)與趨勢(shì)..........................................4 3千秋詞君李煜官方網(wǎng)站風(fēng)格設(shè)計(jì)...............................................5

3.1導(dǎo)入頁(yè)設(shè)計(jì)............................................................6 3.2首頁(yè)設(shè)計(jì)..............................................................7 3.3次級(jí)頁(yè)面與內(nèi)容頁(yè)設(shè)計(jì)..................................................8

3.4淡然雅致風(fēng)格設(shè)計(jì)應(yīng)注意的細(xì)節(jié)..........................................9 4北京小吃官方網(wǎng)站風(fēng)格設(shè)計(jì)...................................................9

4.1首頁(yè)設(shè)計(jì).............................................................10 4.2次級(jí)頁(yè)面與內(nèi)容頁(yè)設(shè)計(jì).................................................11 4.3活潑鮮艷風(fēng)格設(shè)計(jì)應(yīng)注意的細(xì)節(jié).........................................12 5“李煜”與“北京小吃”案例風(fēng)格設(shè)計(jì)對(duì)比....................................12

5.1布局對(duì)比.............................................................12 5.2色彩對(duì)比..........................................................................................................................13 5.3傳統(tǒng)元素運(yùn)用對(duì)比..........................................................................................................13 總結(jié).......................................................................14 謝辭.......................................................................15 參考文獻(xiàn)...................................................................16

緒論

如今的互聯(lián)網(wǎng)正飛速發(fā)展著，人們通過(guò)互聯(lián)網(wǎng)不僅可以用傳統(tǒng)的方式搜索所需信息，而且還可以通過(guò)它滿足生活中的衣食住行。在如今的大數(shù)據(jù)時(shí)代，網(wǎng)站做為一個(gè)多元化的信息載體，在其中扮演著非常重要的角色。用戶也不僅僅滿足于簡(jiǎn)單的信息傳遞，對(duì)視覺(jué)和形式感也愈發(fā)重視。所以網(wǎng)站風(fēng)格設(shè)計(jì)的未來(lái)發(fā)展趨勢(shì)要注重更多的整體與細(xì)節(jié)，帶給用戶從視覺(jué)到心理的整體感受。所以豐富的帶有創(chuàng)意性的迎合網(wǎng)民心理需求的網(wǎng)頁(yè)風(fēng)格設(shè)計(jì)越來(lái)越成為主流。

而就在這樣一個(gè)獲取信息十分便利的時(shí)代，人們的內(nèi)心也愈發(fā)浮躁，于是一種經(jīng)過(guò)歷史沉淀的文化正在悄然流行，它就是——中國(guó)風(fēng)。從服裝到美食到藝術(shù)形式，都受到很多人的喜愛(ài)和研究，當(dāng)然其中也不缺乏其他國(guó)家的愛(ài)好者。中國(guó)風(fēng)，或者說(shuō)中國(guó)傳統(tǒng)文化正在以它自己的方式慢慢傳播于全球，而我們的互聯(lián)網(wǎng)發(fā)展也緊跟時(shí)代的步伐，中國(guó)傳統(tǒng)風(fēng)格設(shè)計(jì)的網(wǎng)站就是其中之一。將中國(guó)傳統(tǒng)元素融入到現(xiàn)代網(wǎng)頁(yè)風(fēng)格設(shè)計(jì)中，是發(fā)展中國(guó)傳統(tǒng)文化的又一個(gè)好的方式。本人選擇這個(gè)論點(diǎn)為題目，也是希望能夠更深入的去理解和研究文化的傳承，并設(shè)計(jì)出更好的帶有中國(guó)文化風(fēng)格的網(wǎng)站。網(wǎng)頁(yè)風(fēng)格設(shè)計(jì)

網(wǎng)頁(yè)風(fēng)格設(shè)計(jì)最能傳遞企業(yè)文化信息，好的網(wǎng)頁(yè)風(fēng)格不僅能幫助客戶認(rèn)識(shí)和了解網(wǎng)站背后的企業(yè)，也能幫助企業(yè)樹(shù)立別具一格的形象。通過(guò)網(wǎng)頁(yè)風(fēng)格的獨(dú)特，直接給自身網(wǎng)站和所處行業(yè)的其它網(wǎng)站之間營(yíng)造出一種清晰的辨識(shí)度。隨著互聯(lián)網(wǎng)的影響力不斷提升，網(wǎng)站成了企業(yè)讓客戶了解自身最直接的一個(gè)門(mén)戶，通過(guò)自身網(wǎng)站的辨識(shí)度在眾多網(wǎng)站中脫穎而出，迅速幫助企業(yè)樹(shù)立品牌，提升企業(yè)形象。

1.1網(wǎng)頁(yè)風(fēng)格設(shè)計(jì)的概念

網(wǎng)站風(fēng)格是抽象的概念，一般是指網(wǎng)站的整體形象給瀏覽者的綜合性惑受。每一個(gè)網(wǎng)站都有自己獨(dú)特的風(fēng)格，而擁有獨(dú)立風(fēng)格的網(wǎng)站會(huì)吸引越來(lái)越多用戶的關(guān)注，從而提升自己網(wǎng)站的知名度。網(wǎng)站的整體形象包括頁(yè)面的排版布局，形式，色彩，效果等。比如：我們覺(jué)得福娃的形象是生動(dòng)活潑的而法官的形象則是專(zhuān)業(yè)嚴(yán)肅。每一個(gè)網(wǎng)站都會(huì)給瀏覽者留下不同感受。因此我們需要做到的是根據(jù)網(wǎng)站的定位不同做出每個(gè)網(wǎng)站特有的形式。除此我們還需要在風(fēng)格上把握一下，網(wǎng)頁(yè)上所有的圖形、文字，包括背景顏色排版形式等等都要統(tǒng)一風(fēng)格，這樣網(wǎng)頁(yè)才可以使瀏覽者看起來(lái)舒服、順暢。

1.2網(wǎng)頁(yè)風(fēng)格種類(lèi)

網(wǎng)頁(yè)風(fēng)格按不同的分類(lèi)標(biāo)準(zhǔn)可分為很多不同的種類(lèi)，就本文而言，按照用途可分

為以下六類(lèi)。

（1）時(shí)尚類(lèi)（見(jiàn)圖1）：適用于精品、時(shí)尚、飯店旅館、服飾、婚紗等產(chǎn)業(yè)。需要特別注重視覺(jué)的效果。時(shí)尚風(fēng)格類(lèi)型的設(shè)計(jì)特色呈現(xiàn)出簡(jiǎn)約、精致、高質(zhì)感，比較少使用線條。另外照片的運(yùn)用上建議使用高解析度、飽和度高、鮮明對(duì)比色為主，較能表現(xiàn)出高質(zhì)感的感覺(jué)。

圖1 時(shí)尚類(lèi)網(wǎng)站

（2）科技類(lèi)：此類(lèi)型一般適用于高科技、機(jī)械、電子、多媒體等產(chǎn)業(yè)。科技類(lèi)型大多使用大量動(dòng)畫(huà)特效、多媒體音效及線條并結(jié)合主打商品或服務(wù)，來(lái)傳達(dá)高科技感和專(zhuān)業(yè)度。

（3）商業(yè)類(lèi)：商業(yè)網(wǎng)站制作適用于任何類(lèi)型的企業(yè)，是目前最普遍類(lèi)型的網(wǎng)站。此類(lèi)型網(wǎng)的風(fēng)格偏向簡(jiǎn)單且網(wǎng)站動(dòng)線明確為主，不做過(guò)度華麗的版面設(shè)計(jì)或使用過(guò)多的動(dòng)畫(huà)，以增加網(wǎng)站瀏覽速度而提高搜尋排名。

（4）休閑類(lèi)（見(jiàn)圖2）：適用于休閑農(nóng)場(chǎng)、觀光景點(diǎn)、戶外餐廳等企業(yè)。此類(lèi)型的網(wǎng)頁(yè)設(shè)計(jì)大多會(huì)使用戶外的素材，如藍(lán)天白云、天空、樹(shù)木、綠地等等來(lái)營(yíng)造出休閑自然的風(fēng)格，會(huì)讓用戶感受到。

圖2 休閑類(lèi)網(wǎng)站

（5）活潑類(lèi)：適用于主題樂(lè)園、童裝、學(xué)校等客群以幼童或青少年為主的網(wǎng)站。

（6）傳統(tǒng)類(lèi)：又稱(chēng)古典風(fēng)，適用于企業(yè)形象或主要商品風(fēng)格偏向中國(guó)風(fēng)或歐洲古典風(fēng)的網(wǎng)站。這種類(lèi)型的網(wǎng)站設(shè)計(jì)會(huì)以復(fù)古風(fēng)格結(jié)合的花紋底圖或圖藤效果來(lái)表現(xiàn)柔美復(fù)古感。若是屬于中國(guó)風(fēng)網(wǎng)站，通常在設(shè)計(jì)上會(huì)比較注重國(guó)畫(huà)中“留白”的原則，同時(shí)輔以復(fù)古配色，以及水墨，毛筆字和印章烙印等圖片來(lái)傳達(dá)中國(guó)文化。傳統(tǒng)風(fēng)格網(wǎng)頁(yè)設(shè)計(jì)

2.1傳統(tǒng)風(fēng)格網(wǎng)頁(yè)

傳統(tǒng)風(fēng)格是一個(gè)比較概括的分類(lèi)，在傳統(tǒng)風(fēng)格中又分為中國(guó)風(fēng)、日韓風(fēng)和歐洲古典風(fēng)。本文重點(diǎn)研究的是偏向中國(guó)風(fēng)的傳統(tǒng)風(fēng)格，其中包含以下三種主要風(fēng)格。

淡然雅致風(fēng)格（見(jiàn)圖3）：配色飽和度較低，多以淡色為主色調(diào)，配以國(guó)畫(huà)、書(shū)法等素材，“留白”概念在此中能得到很好的詮釋。

圖3 淡然雅致風(fēng)格

活潑鮮艷風(fēng)格（見(jiàn)圖4）：以較為鮮艷的色彩為主色調(diào)，有形式感，排版不過(guò)于正式，圖片較多，內(nèi)容豐富。

圖4 活潑鮮艷風(fēng)格

沉穩(wěn)大氣風(fēng)格（見(jiàn)圖5）：配色正式，能體現(xiàn)氣勢(shì)，如紅+黃，紫+黃等，排版也突出對(duì)稱(chēng)和穩(wěn)定性。

圖5 沉穩(wěn)大氣風(fēng)格

2.2如何選擇傳統(tǒng)風(fēng)格網(wǎng)頁(yè)設(shè)計(jì)

首先，最重要的是根據(jù)網(wǎng)站所要傳遞給用戶的信息內(nèi)容來(lái)確定風(fēng)格。以介紹人物的網(wǎng)站為例，假設(shè)此人是知名古詩(shī)詞人，可根據(jù)其詞風(fēng)來(lái)確定。如詞風(fēng)清雋就選擇淡雅風(fēng)格，偏民俗可選擇活潑的風(fēng)格。要是換成企業(yè)類(lèi)或機(jī)構(gòu)類(lèi)網(wǎng)站的話，還是以沉穩(wěn)、大氣風(fēng)格為主；如果一個(gè)清雋詞人的網(wǎng)站設(shè)定成沉穩(wěn)大氣的風(fēng)格就會(huì)顯得死板，難以吸引用戶。

2.3傳統(tǒng)風(fēng)格網(wǎng)頁(yè)設(shè)計(jì)的優(yōu)勢(shì)與趨勢(shì)

傳統(tǒng)風(fēng)格網(wǎng)頁(yè)設(shè)計(jì)的優(yōu)勢(shì)：

（1）突顯網(wǎng)站的文化底蘊(yùn)。只要和傳統(tǒng)風(fēng)格不過(guò)于相反的內(nèi)容，同樣可以使用。傳統(tǒng)風(fēng)格演變自中國(guó)五千多年的歷史積累，其中網(wǎng)頁(yè)設(shè)計(jì)的變化和統(tǒng)一、對(duì)比和調(diào)和、均齊與平衡，這些概念最早就來(lái)源于《易經(jīng)》一書(shū)。

（2）更適合文化類(lèi)、機(jī)構(gòu)類(lèi)網(wǎng)站?，F(xiàn)在很多此類(lèi)網(wǎng)站仍使用單調(diào)的線條，內(nèi)容與風(fēng)格不匹配，反之如果使用傳統(tǒng)風(fēng)格，就會(huì)襯托出網(wǎng)站的整體氛圍，讓用戶感覺(jué)更和諧。

（3）屬于中國(guó)獨(dú)創(chuàng)。像時(shí)尚類(lèi)、休閑類(lèi)的風(fēng)格網(wǎng)站并不能準(zhǔn)確說(shuō)出它們屬于哪個(gè)國(guó)家，而中國(guó)傳統(tǒng)風(fēng)格有類(lèi)似符號(hào)的性質(zhì)，代表著中國(guó)文化，世界上絕無(wú)僅有。

傳統(tǒng)風(fēng)格網(wǎng)頁(yè)設(shè)計(jì)的趨勢(shì)：

（1）政府重視?，F(xiàn)在，非物質(zhì)文化遺產(chǎn)的傳承受到了政府更多的支持和保護(hù)，并且我校還申請(qǐng)了國(guó)家級(jí)民族文化傳承與創(chuàng)新教學(xué)資源庫(kù)，越來(lái)越多的學(xué)生和青年人加入到非遺的保護(hù)、傳承和發(fā)展的行列，隨之傳統(tǒng)風(fēng)格的網(wǎng)頁(yè)設(shè)計(jì)也會(huì)越來(lái)越普及。

（2）國(guó)民重視?，F(xiàn)代生活節(jié)奏的加快與生活的壓力，讓很多人開(kāi)始回歸簡(jiǎn)單與

向往淳樸的生活方式，并開(kāi)始注重本國(guó)的傳統(tǒng)文化，而且人們獲取信息最有效的途徑仍是互聯(lián)網(wǎng)。所以隨著這種發(fā)展趨勢(shì)和民眾需求，中國(guó)傳統(tǒng)風(fēng)格網(wǎng)頁(yè)設(shè)計(jì)也會(huì)得到很好的發(fā)展。

（3）國(guó)外流行。雖然“中國(guó)風(fēng)”為近年流行，可早在十七、八世紀(jì)的歐洲就興起了“中國(guó)熱”。當(dāng)時(shí)太陽(yáng)王路易十四有一場(chǎng)聚會(huì)，他坐著中國(guó)的八抬大轎進(jìn)入會(huì)場(chǎng)，從那時(shí)起很多人開(kāi)始對(duì)中國(guó)有了了解，平民百姓也開(kāi)始收集一些古玩等等。雖然如今傳統(tǒng)風(fēng)格網(wǎng)頁(yè)設(shè)計(jì)在國(guó)外還不十分流行，但隨著各國(guó)間的文化交流，當(dāng)中國(guó)傳統(tǒng)文化真正普及到全球那一天，相信關(guān)于傳統(tǒng)風(fēng)格的網(wǎng)頁(yè)設(shè)計(jì)也會(huì)更加受到人們喜愛(ài)。

3“千秋詞君李煜”官方網(wǎng)站風(fēng)格設(shè)計(jì)

南唐后主李煜，唐末宋初，五代十國(guó)，生逢亂世。如果可以用一句話概括他的一生，那便是：“一代風(fēng)流君不二，多情才子薄命王”。因?yàn)樗某錾厥墙窠K省，又因?yàn)樗脑~派是花間詞，這些都與溫潤(rùn)和淡雅結(jié)合了起來(lái)，所以把李煜的官方網(wǎng)站風(fēng)格設(shè)定為淡然雅致是最恰當(dāng)不過(guò)了。為了體現(xiàn)這樣的風(fēng)格理念，其設(shè)計(jì)所應(yīng)用到的元素是來(lái)自于中國(guó)水墨畫(huà)和江南建筑中的花窗。

水墨畫(huà)這種帶有濃郁中國(guó)特色的藝術(shù)表現(xiàn)手法，可在網(wǎng)站設(shè)計(jì)中應(yīng)用的元素，包括宣紙、山水、花草、墨韻、印章，和各種動(dòng)物等等（見(jiàn)圖6）；這些元素表現(xiàn)的意境也非常廣泛，例如古樸、飄渺、優(yōu)美、蒼勁、生機(jī)勃勃??

圖6 水墨元素

水墨畫(huà)中可應(yīng)用在網(wǎng)頁(yè)設(shè)計(jì)的素材很多，意境也不局限于此，但傳統(tǒng)風(fēng)格并不是元素的疊加?！耙饩呈侵甘闱樾宰髌分谐尸F(xiàn)的那種情景交融、虛實(shí)相生、活躍著生命

律動(dòng)的韻味無(wú)窮的詩(shī)意空間”，這一點(diǎn)和網(wǎng)頁(yè)設(shè)計(jì)中的對(duì)比與調(diào)和不謀而合。

說(shuō)起江南建筑中的花窗，就不得不說(shuō)榫卯。榫卯是古典家具之魂，一榫一卯之間，一轉(zhuǎn)一折之際，凝結(jié)著中國(guó)幾千年傳統(tǒng)家具文化的精粹，這種木材的精巧銜接，十分堅(jiān)固牢靠，并且美觀，花窗就是這樣技術(shù)下的產(chǎn)物。在傳統(tǒng)風(fēng)格網(wǎng)站設(shè)計(jì)中，可以應(yīng)用一些古建筑的元素，如寶塔、宮殿、拱橋等等，也包括花窗、屋檐、城墻這種小素材，這樣有利于感官的虛實(shí)結(jié)合，只是不要太多，畫(huà)蛇添足，少而精為佳。

網(wǎng)頁(yè)風(fēng)格設(shè)計(jì)中可應(yīng)用的中國(guó)元素還有很多，書(shū)法，和其他多樣的繪畫(huà)手法，但同樣需要注意，傳統(tǒng)風(fēng)格的元素應(yīng)用不是一味的重復(fù)，一般網(wǎng)站風(fēng)格設(shè)計(jì)中，取一主要風(fēng)格應(yīng)用即可。

（以下“千秋詞君李煜”官方網(wǎng)站，簡(jiǎn)稱(chēng)“李煜”）

3.1導(dǎo)入頁(yè)（風(fēng)格）設(shè)計(jì)

導(dǎo)入頁(yè)的效果要盡量豐富，因?yàn)樗怯脩魧?duì)網(wǎng)站的第一印象，一定要吸引住用戶的眼球。“李煜”導(dǎo)入頁(yè)的設(shè)計(jì)，采用紙張底紋，為使背景不單調(diào)，加上了水墨遠(yuǎn)山以襯托李煜為人性格的飄渺的感覺(jué)；上下封底是花窗元素，讓界面看起來(lái)更整齊；進(jìn)入時(shí)界面飄下花瓣，增加界面優(yōu)美感；圓形墨韻按照筆序出現(xiàn)，然后淡入李煜本人畫(huà)像，同時(shí)展開(kāi)講述他生平的一首詩(shī)，有一種既視感，舒緩的把用戶帶入到的李煜的世界當(dāng)中去。為吸引用戶視覺(jué)；在界面下方是一副滾動(dòng)的《韓熙載夜宴圖》（描繪李煜宮廷生活的真實(shí)寫(xiě)照），畫(huà)幅較長(zhǎng)，在設(shè)計(jì)上豐富了頁(yè)面內(nèi)容，有圖片支撐底部顯得更穩(wěn)定（見(jiàn)圖7）。

圖7 李煜導(dǎo)入頁(yè)-第一步效果

之后，進(jìn)入導(dǎo)入頁(yè)的另一個(gè)界面，整體變暗模糊變?yōu)楸尘埃谶@之上從界面的四周匯集本站LOGO“李煜千秋詞君”六字，增加視覺(jué)效果；隨之出現(xiàn)閃爍的點(diǎn)擊進(jìn)入按鈕；至此所有的導(dǎo)入頁(yè)動(dòng)畫(huà)完畢，點(diǎn)擊按鈕即可進(jìn)入（見(jiàn)圖8）。

圖8 李煜導(dǎo)入頁(yè)-第二步效果

3.2首頁(yè)（風(fēng)格）設(shè)計(jì)

在首頁(yè)（見(jiàn)圖9）設(shè)計(jì)中，LOGO和導(dǎo)航處于界面頂端，下方是網(wǎng)站的動(dòng)態(tài)banner，可以自動(dòng)切換圖片。為了視覺(jué)效果banner設(shè)計(jì)的尺寸比較大，如果將導(dǎo)航放在它下面，當(dāng)用戶瀏覽時(shí)就會(huì)受到banner尺寸的影響，不利于點(diǎn)擊導(dǎo)航，同時(shí)LOGO旁邊也會(huì)顯得太過(guò)空曠。網(wǎng)站的下半部分分為三欄，分別是李煜的三類(lèi)信息，在分欄右下角的位置有“更多”按鈕，點(diǎn)擊可切換到對(duì)應(yīng)頁(yè)面。

圖9 李煜首頁(yè)

在LOGO的設(shè)計(jì)上，采用了水墨底，水墨菊花，祥云這三樣素材；為了使素材與背景更加融合，菊花使用了正片疊底效果，并且和祥云一樣降低了75%的透明度；喻意是，菊花，高貴，清雅，與大多數(shù)春夏盛開(kāi)的花朵不同，但到嚴(yán)寒時(shí)還是會(huì)枯萎，就好像李煜的一生，與眾不同，卻最終死于窘境之中。文字分別是柏青體“李煜”，以效“翠微松柏”的精神，以及繁方篆“千秋詞君”，以增古韻。同時(shí)文字的大小已接近藝術(shù)字體的識(shí)別界限，為了與背景區(qū)別開(kāi)，所有文字都添加了比較明顯的陰影。

在導(dǎo)航的設(shè)計(jì)上，過(guò)于單調(diào)的設(shè)計(jì)讓導(dǎo)航不容易被用戶注意，過(guò)重的裝飾影響用戶識(shí)別，缺少整體感，不利于點(diǎn)擊。所以本站導(dǎo)航選擇圓形色塊為裝飾，為了不顯單調(diào)并增加整體感，在上面應(yīng)用了中文大寫(xiě)數(shù)字的樣式，有作為項(xiàng)目編號(hào)的意義；當(dāng)鼠標(biāo)滑過(guò)時(shí)，顯示文字的墨跡背景，點(diǎn)擊后跳轉(zhuǎn)到二級(jí)頁(yè)面，墨跡背景停留在該狀態(tài)，這樣會(huì)讓用戶清楚的知道自己在網(wǎng)站中所處的位置。

在banner的設(shè)計(jì)上，為了增加動(dòng)態(tài)效果，我們選擇利用HTML代碼，實(shí)現(xiàn)非Flash的圖片切換。同時(shí)banner中的圖片也經(jīng)過(guò)精心設(shè)計(jì)，第一張運(yùn)用LOGO和導(dǎo)入頁(yè)中的菊花、文字、墨韻和畫(huà)像再重組，偶爾重組素材會(huì)讓界面看起來(lái)有互相輝映之感；第二張“詞·賞析”，采用了遠(yuǎn)山水和荷花，荷花有高潔之意，山水正好應(yīng)了詩(shī)詞中“一江春水向東流”的意境；第三張講軼事典故，因?yàn)闀?huì)講到李煜的愛(ài)情故事，所以設(shè)計(jì)得粉嫩一些，采用了桃花和折扇的元素，它們分別帶給人甜蜜及風(fēng)流的聯(lián)想；最后一張第四張“驚才艷艷”，講李煜的才氣，“驚”“金”二字發(fā)音相近，所以在最后一張中添加了金色的花朵以取巧意。從四個(gè)不同的角度，取四種不同意境來(lái)制作banner，但仍符合淡然雅致的網(wǎng)站整體風(fēng)格，并不脫離主題。

3.3次級(jí)頁(yè)面與內(nèi)容頁(yè)（風(fēng)格）設(shè)計(jì)

為了讓用戶更快捷、更有效的了解李煜，包括他的生平、詩(shī)詞、為政等，本人用簡(jiǎn)潔精煉的的方法去設(shè)置次級(jí)頁(yè)面與內(nèi)容頁(yè)（見(jiàn)圖10）的框架，這樣可以讓有些不了解李煜的用戶，很快并清晰的對(duì)這個(gè)歷史人物有個(gè)大概的認(rèn)知。

圖10 李煜次級(jí)頁(yè)面與內(nèi)容頁(yè)

在設(shè)計(jì)內(nèi)容頁(yè)與次級(jí)頁(yè)面的整體風(fēng)格時(shí)，本人應(yīng)用了牡丹，以及梅、蘭、竹、菊，五個(gè)元素，這五個(gè)元素對(duì)應(yīng)五個(gè)欄目的主題，每個(gè)二級(jí)頁(yè)面都有自己的主題，為網(wǎng)站添加了統(tǒng)一之中的變化。同時(shí)，之所以在“四君子”之外選擇牡丹，是因?yàn)槟档ご碇喝萑A貴，李煜首先是個(gè)君主，然后才是一位詞人。

在制作整體設(shè)計(jì)時(shí)，根據(jù)用戶的普遍視覺(jué)習(xí)慣，是最先關(guān)注左半部分的內(nèi)容，所以為了使用戶先被內(nèi)容吸引住，我們把內(nèi)容部分放在了左半部分，占整個(gè)頁(yè)面大約五分之四，而切換內(nèi)容的按鈕選擇欄放置在頁(yè)面右半部份，約占頁(yè)面的五分之一（在所有的網(wǎng)頁(yè)設(shè)計(jì)中，選擇欄都不宜過(guò)寬，否則會(huì)影響頁(yè)面的和諧感）。

3.4淡然雅致風(fēng)格設(shè)計(jì)應(yīng)注意的細(xì)節(jié)

在設(shè)計(jì)淡然雅致風(fēng)格時(shí)我們應(yīng)該注意以下細(xì)節(jié)：

（1）畫(huà)面色彩不要過(guò)于單調(diào)。慎用全篇黑白配色，可以搭配一些低飽和度的顏色，例如絳紅、黎色（土青）、牙色等。

（2）內(nèi)容不要太滿。要有適當(dāng)留白，方寸之地亦顯天地之寬。

4“北京小吃”官方網(wǎng)站風(fēng)格設(shè)計(jì)

北京小吃，歷史悠久，技藝精湛，品種繁多，其中有漢民風(fēng)味、回民風(fēng)味和宮廷小吃等，各種葷素、甜咸、干稀、涼熱，種類(lèi)紛繁，季節(jié)性強(qiáng)，適應(yīng)面廣。有史料可查北京小吃元代已甚著稱(chēng)，由于北京曾為金、元、清的 都城，又是新中國(guó)的首都，多方面的有利條件使它能博彩各地小吃之精華，兼收各組小吃之風(fēng)味，使北京小吃更加豐富多彩。

在網(wǎng)頁(yè)風(fēng)格設(shè)計(jì)方面，因?yàn)楸本┬〕越o人的整體感覺(jué)是偏民俗的，貼近生活的，所以本人選擇了活潑鮮艷的色彩搭配，運(yùn)用了老北京城的設(shè)計(jì)元素。鮮艷的顏色可以吸引視覺(jué)的注意和激起對(duì)食物的食欲，老北京城的民俗感又和北京小吃悠久的歷史相得益彰。北京小吃官方網(wǎng)站的風(fēng)格設(shè)計(jì)，靈感來(lái)源于故宮的紅墻琉璃瓦，因?yàn)檫@樣的設(shè)計(jì)很有北京古建筑的特點(diǎn)，而且北京小吃比較大的一部分也來(lái)自宮廷流傳，所以用這種古建筑風(fēng)格的元素來(lái)相襯北京小吃的整體風(fēng)格再貼合不過(guò)。

在設(shè)計(jì)傳統(tǒng)風(fēng)格的網(wǎng)站時(shí)，需要收集大量中國(guó)傳統(tǒng)風(fēng)格的藝術(shù)經(jīng)典素材，比如青花瓷，祥云，龍紋等等。這些帶有強(qiáng)烈中國(guó)特色的形象，為設(shè)計(jì)傳統(tǒng)風(fēng)格的網(wǎng)站提供了很多的靈感來(lái)源，也最能體現(xiàn)我國(guó)的文化精髓。這些都是傳統(tǒng)風(fēng)格網(wǎng)站必不可少的元素點(diǎn)綴。

4.1首頁(yè)（風(fēng)格）設(shè)計(jì)

在設(shè)計(jì)北京小吃這個(gè)網(wǎng)站的首頁(yè)（見(jiàn)圖11）時(shí)，主色調(diào)為緋紅，設(shè)計(jì)的較為醒目，這是為了當(dāng)用戶登陸網(wǎng)站時(shí)第一眼就被中國(guó)紅所吸引住，而且為了視覺(jué)對(duì)顏色的平衡，但我們將LOGO設(shè)計(jì)成黑色并延展下來(lái)，這樣的紅黑搭配更加具有親和力，讓人感覺(jué)均齊與平衡。

在界面的頂端是網(wǎng)站LOGO和登錄/注冊(cè)，添加了一張小吃圖片的漸變（透明度55%），這樣看起來(lái)既不會(huì)太單調(diào)也不會(huì)太凌亂。下面是一個(gè)Flash，有一個(gè)流動(dòng)的背景，里面包含導(dǎo)航按鈕，鼠標(biāo)滑過(guò)時(shí)會(huì)在首頁(yè)中切換不同的圖片，豐富了視覺(jué)效果。

界面的下半部分，是吃貨論壇和小吃簡(jiǎn)介，之所以要推薦這個(gè)兩個(gè)欄目板塊，一是因?yàn)樽層脩艨吹竭@是一個(gè)有人氣的社交平臺(tái)，增加用戶的對(duì)北京小吃的凝聚力和對(duì)美食的熱衷；二是因?yàn)榫W(wǎng)站需要不斷的更換最新最快的相關(guān)信息，從而不讓用戶流失，讓他們可以在論壇里時(shí)刻暢所欲言對(duì)北京小吃的熱愛(ài)。而且主頁(yè)還設(shè)置了“今日推薦”這個(gè)特別小板塊，更加貼心的為用戶提供了有用的信息，拉近與食客們的距離感。

在設(shè)計(jì)LOGO時(shí)，考慮到北京也是一個(gè)現(xiàn)代化都市，所以用色塊與英文“TASTE OF PEKING”增加現(xiàn)代感，旁邊的京味兒三字是其中文翻譯，采用繁體古隸，是小篆走向隸書(shū)的過(guò)度字體，古韻十足。

圖11 北京小吃首頁(yè)

而在設(shè)計(jì)界面時(shí)，我們把紅墻琉璃瓦的元素，應(yīng)用到了占比最重的視覺(jué)Flash里，奠定了整體風(fēng)格的基調(diào)；并把導(dǎo)航按鈕嵌入其中，當(dāng)鼠標(biāo)劃過(guò)按鈕時(shí)會(huì)切換圖片，增加網(wǎng)站視覺(jué)效果。這其中，不僅有“墻瓦”的元素，還有背景中的龍頭噴泉，左上方的豎排文字，切換時(shí)與欄目對(duì)應(yīng)的民俗圖片，以及“墻”下用以增加質(zhì)感的麻布底紋，正是這些元素一點(diǎn)一滴的融合，才完成了民俗、鮮艷、活潑的北京小吃官方網(wǎng)站的風(fēng)格設(shè)計(jì)。

4.2次級(jí)頁(yè)面與內(nèi)容頁(yè)（風(fēng)格）設(shè)計(jì)

在設(shè)計(jì)北京小吃的次級(jí)頁(yè)面與內(nèi)容頁(yè)時(shí)，考慮到網(wǎng)站設(shè)定包括地圖與在線論壇功能，所以在版式的設(shè)計(jì)上也有所不同。

次級(jí)頁(yè)面上，“小吃食譜”與“歷史典故”（見(jiàn)圖12）為一類(lèi)，因?yàn)樗鼈冇忻鞔_的分類(lèi)，層級(jí)較清晰明確。“美食地圖”（見(jiàn)圖13）就是網(wǎng)站中包括的地圖功能，因?yàn)楸本┬〕源蟛糠旨性诔菂^(qū)內(nèi)，郊區(qū)部分會(huì)出現(xiàn)大量空白，所以不適用類(lèi)似“高德地圖”的實(shí)時(shí)交互界面，而是更適合類(lèi)似“大眾點(diǎn)評(píng)”的分類(lèi)查找，這樣不僅提高了信息查找的準(zhǔn)確性與便捷性，同時(shí)也更容易閱讀瀏覽。最后一個(gè)欄目“吃貨論壇”（見(jiàn)圖14）就是網(wǎng)站中的在線論壇功能，但由于沒(méi)有后臺(tái)服務(wù)器支持，我們只設(shè)計(jì)出一個(gè)雛形，包括左半部分的內(nèi)容，以及右半部份的“發(fā)表帖子”，“論壇版塊”，與“熱門(mén)帖子”，總共四部分。

圖12 北京小吃次級(jí)頁(yè)面-歷史典故

↑圖13 北京小吃次級(jí)頁(yè)面-美食地圖 ←圖14 北京小吃次級(jí)頁(yè)面-吃貨論壇

在內(nèi)容頁(yè)上，“小吃食譜”與“歷史典故”在界面右側(cè)都設(shè)立了副導(dǎo)航，用以欄

目?jī)?nèi)切換內(nèi)容用；在“歷史典故”的四級(jí)頁(yè)面的導(dǎo)航下方，是“足跡”功能，為防止層級(jí)過(guò)多，用戶在網(wǎng)頁(yè)中不能清晰了解自己所在的位置。在“美食地圖”中，當(dāng)點(diǎn)擊次級(jí)頁(yè)面的內(nèi)容欄的鏈接時(shí)，會(huì)進(jìn)入到內(nèi)容頁(yè)，此時(shí)同樣可點(diǎn)擊右側(cè)的副導(dǎo)航進(jìn)行內(nèi)容切換。

設(shè)計(jì)上，北京小吃的內(nèi)容頁(yè)并沒(méi)有延續(xù)首頁(yè)的“紅墻琉璃瓦”元素，而是改為“素瓦白墻”，一方面因?yàn)樵诖渭?jí)頁(yè)面與內(nèi)容頁(yè)中，要閱讀的文字較多，但絳紅仍屬于比較鮮艷的顏色，不適于用戶閱讀；另一方面也是因?yàn)闃闼氐呐渖踪N近北京小吃中民俗的一面。但并不是在次級(jí)頁(yè)面與內(nèi)容頁(yè)中沒(méi)有鮮艷的顏色，暗紅色（非絳紅）在朱紅的基礎(chǔ)上降低了飽和度，用于界面中的“點(diǎn)睛色”，在一些選項(xiàng)和需要用戶注意的地方，都運(yùn)用了這種“點(diǎn)睛色”，如此不僅可以延續(xù)首頁(yè)的風(fēng)格，增加頁(yè)面統(tǒng)一感，也有畫(huà)龍點(diǎn)睛之妙。

4.3活潑鮮艷風(fēng)格設(shè)計(jì)應(yīng)注意的細(xì)節(jié)

在設(shè)計(jì)活潑鮮艷風(fēng)格時(shí)我們應(yīng)注意以下細(xì)節(jié)：

（1）避免配色過(guò)于鮮艷。注意色彩的對(duì)比與調(diào)和，界面顏色最好不要超過(guò)五種，對(duì)于比較鮮艷的顏色可降低其飽和度，或用明度較低的顏色進(jìn)行調(diào)和。

（2）內(nèi)容頁(yè)要適于閱讀。因內(nèi)容頁(yè)文字較多，故不適用大量高飽和度顏色，同時(shí)注意背景色與文字顏色間的對(duì)比。

（3）增加視聽(tīng)覺(jué)效果。避免活潑風(fēng)格中頁(yè)面過(guò)于死板，可應(yīng)用動(dòng)畫(huà)、音樂(lè)、圖片等元素。

5“李煜”與“北京小吃”

網(wǎng)站風(fēng)格設(shè)計(jì)對(duì)比

在傳統(tǒng)風(fēng)格網(wǎng)頁(yè)設(shè)計(jì)中，李煜與北京小吃這兩個(gè)案例，帶給了用戶截然不同的感受。在布局、色彩，和對(duì)傳統(tǒng)元素的應(yīng)用上，這兩個(gè)案例有所同，也有所不同，下文從如何細(xì)致準(zhǔn)確得應(yīng)用傳統(tǒng)風(fēng)格網(wǎng)頁(yè)設(shè)計(jì)的角度出發(fā)，分析了李煜和北京小吃這兩個(gè)案例。

5.1布局對(duì)比

李煜與北京小吃在布局上的相同之處在于，二者都應(yīng)用了占頁(yè)面比例較大的banner；不同之處則是李煜的banner應(yīng)用JavaScript技術(shù)實(shí)現(xiàn)圖片輪播，導(dǎo)航處于頁(yè)面banner上方，頁(yè)面下半部分則是規(guī)則的三個(gè)分欄。而北京小吃是利用Flash將導(dǎo)航按鈕融合在banner中，頁(yè)面下方的不規(guī)則分欄，更具有活力。在兩個(gè)案例的二級(jí)頁(yè)面中，都更偏向于左半部分為內(nèi)容，右半部分為副導(dǎo)航，用以切換欄目?jī)?nèi)的頁(yè)面，不同之處在于，李煜的二級(jí)頁(yè)面與內(nèi)容頁(yè)是一體的，而北京小吃則有較深的層級(jí)。

5.2色彩對(duì)比

李煜為淡然雅致風(fēng)格，北京小吃為活潑鮮艷風(fēng)格。首先從色彩上來(lái)講，李煜采用淡然雅致風(fēng)格，整體運(yùn)用白色，配黎、絳紅為點(diǎn)睛色，有水墨畫(huà)之感（見(jiàn)圖15）。

圖15 李煜配色

北京小吃采用活潑鮮艷風(fēng)格，主色調(diào)運(yùn)用緋紅，米、黑為配色，絳紅為點(diǎn)睛色（見(jiàn)圖16）。兩個(gè)案例中關(guān)于色彩，最大的不同是李煜大量應(yīng)用了白色，所以黎、絳紅只能為點(diǎn)睛色，映襯水墨之感，以體現(xiàn)淡然雅致；北京小吃則以緋紅為主色調(diào)，但顏色偏于鮮艷，所以配米、黑為輔助色，黑與紅之間既是對(duì)比亦是制衡，故需米為之調(diào)和。

圖16 北京小吃配色

5.3傳統(tǒng)元素應(yīng)用對(duì)比

在這兩個(gè)案例中，從元素運(yùn)用上來(lái)講，李煜為水墨，北京小吃偏民間，其所呈現(xiàn)的效果各有千秋。李煜運(yùn)用水墨畫(huà)和江南建筑元素，給人以溫柔，細(xì)膩，雅致的意象。而在北京小吃中，最為突顯的是視覺(jué)Flash里“紅墻琉璃瓦”的北方宮廷建筑元素，其它民俗韻味則以食物、人物等圖片來(lái)體現(xiàn)，這些元素整體帶給人樸實(shí)、民俗、活潑的意象，活潑在詞典中的釋意為“生動(dòng)自然；不呆板”。兩個(gè)案例作為兩種不同的傳統(tǒng)風(fēng)格，其中最大的差別在于，李煜中的每個(gè)元素都與整體風(fēng)格相呼應(yīng)；而北京小吃則是突出其中一個(gè)，并融合現(xiàn)代設(shè)計(jì)元素。

總結(jié)

傳統(tǒng)網(wǎng)頁(yè)風(fēng)格設(shè)計(jì)是對(duì)中國(guó)元素進(jìn)行完美的拆分與重組，它包含了繪畫(huà)、書(shū)法、建筑、圖騰等元素，需要設(shè)計(jì)師對(duì)中國(guó)傳統(tǒng)文化有一定的了解與認(rèn)知。本文中淺析了傳統(tǒng)風(fēng)格網(wǎng)頁(yè)設(shè)計(jì)的概念、分類(lèi)，優(yōu)勢(shì)與趨勢(shì)，并輔以畢業(yè)設(shè)計(jì)案例，分析傳統(tǒng)元素的實(shí)際應(yīng)用。但就李煜與北京小吃這兩個(gè)案例而言，還存在著不足，例如李煜的二級(jí)欄目之間沒(méi)有明顯的風(fēng)格區(qū)分，讓界面看起來(lái)有些單調(diào)；北京小吃的設(shè)計(jì)略顯稚嫩，線條、按鈕等一些細(xì)節(jié)還需要仔細(xì)調(diào)試。

在將來(lái)，互聯(lián)網(wǎng)仍是許多人獲得信息的首要渠道，而網(wǎng)頁(yè)也仍是一個(gè)重要的傳播載體，人們會(huì)更加注重網(wǎng)頁(yè)設(shè)計(jì)的美與丑和帶給自身的感受，而傳統(tǒng)風(fēng)格也會(huì)在中國(guó)傳統(tǒng)文化復(fù)興的大背景下發(fā)展得更加順利。作為一名未來(lái)的“設(shè)計(jì)師”，也要增加自身修養(yǎng)，多學(xué)習(xí)中國(guó)的傳統(tǒng)文化。希望有一天中國(guó)的傳統(tǒng)風(fēng)格網(wǎng)頁(yè)設(shè)計(jì)，可以成為亞洲東方文化的代表。

謝 辭

歲月如白駒過(guò)隙，五年的時(shí)間，學(xué)校見(jiàn)證了我們的成長(zhǎng)，我們也見(jiàn)證了學(xué)校的改變。感謝曾經(jīng)教授過(guò)我的每一位老師，也感謝這次的畢設(shè)指導(dǎo)——陳金梅老師。得一良師，勝萬(wàn)卷書(shū)，陳老師的嚴(yán)謹(jǐn)、耐心、負(fù)責(zé)讓我受益匪淺。同時(shí)還要感謝小組另一個(gè)成員白宇軒同學(xué)，與他一起做過(guò)很多大作業(yè)，默契無(wú)需多言，感謝他這兩年來(lái)的支持與照顧。最后，感謝參考文獻(xiàn)中作者們做出的研究。

參考文獻(xiàn)

[1]覃瀚穎.淺談網(wǎng)站風(fēng)格設(shè)計(jì)[J].現(xiàn)代企業(yè)教育, 2014(20):532-532.[2]王志瑋.淺談網(wǎng)站風(fēng)格設(shè)計(jì)[J].價(jià)值工程, 2011, 30(13):171-171.[3]徐美雅.淺談網(wǎng)站風(fēng)格設(shè)計(jì)的基本要求[J].天津電大學(xué)報(bào), 2009, 13(1):59-62.[4]馮皓, 吳向煒.現(xiàn)代網(wǎng)頁(yè)設(shè)計(jì)風(fēng)格分析[J].長(zhǎng)治學(xué)院學(xué)報(bào), 2009, 26(4):83-84.[5]耿陽(yáng), 孫志紅.淺談網(wǎng)頁(yè)設(shè)計(jì)的形式和藝術(shù)風(fēng)格[J].藝術(shù)與設(shè)計(jì)：理論, 2009(03):65-67.[6]余小芬, 宋魁友.網(wǎng)頁(yè)設(shè)計(jì)風(fēng)格的審美效應(yīng)[J].大眾文藝：學(xué)術(shù)版, 2012(6):108-109.[7]馬艷麗.中國(guó)風(fēng)格在網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用[J].藝術(shù)教育, 2012(05):149-149.[8]楊敬飛.傳統(tǒng)風(fēng)格網(wǎng)頁(yè)設(shè)計(jì)及其視覺(jué)審美性研究[J].設(shè)計(jì), 2014(04):113-114.

第二篇：網(wǎng)頁(yè)設(shè)計(jì)畢業(yè)論文

目錄

一、課題來(lái)源.....................................................3

（一）設(shè)計(jì)思想.................................................3

（二）網(wǎng)站主題.................................................3

二、網(wǎng)站需求分析.................................................3

（一）搜集材料.................................................3

（二）需求分析與規(guī)劃...........................................3 三 軟件介紹.....................................................4

（一）Adobe Photoshop..........................................4

（二）Dreamweaver CS6..........................................4(三)軟件運(yùn)行環(huán)境..............................................4

四、網(wǎng)站整體設(shè)計(jì).................................................5

（一）網(wǎng)頁(yè)的規(guī)劃...............................................5

（二）系統(tǒng)框架.................................................6

五、主頁(yè)介紹與網(wǎng)頁(yè)截圖...........................................6

（一）主頁(yè)面介紹...............................................6

（二）子頁(yè)面介紹...............................................7

六、總結(jié)與感想...................................................9

（一）本網(wǎng)站實(shí)現(xiàn)了形式與內(nèi)容的統(tǒng)一.............................9

（二）本網(wǎng)站具有良好的互動(dòng)性..................................10

（三）缺點(diǎn)與不足..............................................10 參考文獻(xiàn)........................................................11

/ 11

摘要

在網(wǎng)絡(luò)高速發(fā)展的今天，互聯(lián)網(wǎng)不僅深深的改變了人們的生活方式，更改變了人們的思維方式，雷軍用互聯(lián)網(wǎng)思維帶領(lǐng)小米科技走到了今天，馬云借助互聯(lián)網(wǎng)成就了他的商業(yè)帝國(guó)，而首屆世界互聯(lián)網(wǎng)大會(huì)在浙江烏鎮(zhèn)召開(kāi)更加突出了互聯(lián)網(wǎng)的重要性。而網(wǎng)站作為互聯(lián)網(wǎng)的載體，只有優(yōu)秀的網(wǎng)站才能使互聯(lián)網(wǎng)更好的為我們服務(wù)?；谶@一理念，我設(shè)計(jì)了自己的網(wǎng)站——田園采摘網(wǎng)。我利用所學(xué)習(xí)的內(nèi)容自己動(dòng)手設(shè)計(jì)本網(wǎng)站，制作過(guò)程中所使用的軟件是Macromedia 公司的Adobe Dreamweaver CS6 和photoshop。在整個(gè)網(wǎng)站的制作過(guò)程中，我盡力優(yōu)化網(wǎng)頁(yè)的布局和排版，合理選擇內(nèi)容，盡可能做到完美。

關(guān)鍵詞： Dreamweaver Photoshop 網(wǎng)站設(shè)計(jì) 田園采摘

/ 11

一、課題來(lái)源

（一）設(shè)計(jì)思想

用互聯(lián)網(wǎng)的思維思考問(wèn)題、做事情，創(chuàng)建優(yōu)秀網(wǎng)站，精品網(wǎng)站。

（二）網(wǎng)站主題

結(jié)合自己的實(shí)際情況，選定田園采摘園作為本網(wǎng)站的設(shè)計(jì)主題，用互聯(lián)網(wǎng)的思維經(jīng)營(yíng)采摘園。

二、網(wǎng)站需求分析

（一）搜集材料

明確了網(wǎng)頁(yè)的主題以后，就可以圍繞主題開(kāi)始搜集材料了。材料既可以從圖書(shū)、報(bào)紙、光盤(pán)、多媒體上得來(lái)，也可以從互聯(lián)網(wǎng)上搜集，然后把搜集的材料去粗取精，去偽存真，作為自己制作網(wǎng)頁(yè)的素材。

（二）需求分析與規(guī)劃

一個(gè)完整的網(wǎng)頁(yè)是建立在各種各樣的需求上面的，這種需求往往來(lái)自于客戶的實(shí)際需求或者是出于公司自身發(fā)展的需要，其中客戶的實(shí)際需求也就是說(shuō)這種交易性質(zhì)的需求占了絕大部分。

面對(duì)網(wǎng)頁(yè)設(shè)計(jì)擁有不同知識(shí)層面的客戶，設(shè)計(jì)的負(fù)責(zé)人對(duì)用戶需求的理解程度，在很大程度上決定了此類(lèi)網(wǎng)頁(yè)規(guī)劃的成敗。因此如何更好地的了解、分析、明確用戶需求，并且能夠準(zhǔn)確、清晰以文檔的形式表達(dá)給參與項(xiàng)目開(kāi)發(fā)的每個(gè)成員，保證開(kāi)發(fā)過(guò)程按照滿足用戶需求為目的正確項(xiàng)目開(kāi)發(fā)方向進(jìn)行，是每個(gè)網(wǎng)頁(yè)規(guī)劃和網(wǎng)頁(yè)制作管理者需要面對(duì)的問(wèn)題。據(jù)我們調(diào)查，當(dāng)今 3 / 11

互聯(lián)網(wǎng)已經(jīng)有成千上萬(wàn)的采摘網(wǎng)。所以，這就要求我們的網(wǎng)站中要有突出和新穎的地方去吸引顧客，這樣我們才能在眾多的采摘園中占有一席之地并獲益。網(wǎng)頁(yè)設(shè)計(jì)中，運(yùn)用photoshop等圖形圖像處理軟件，進(jìn)行大量的圖片處理制作，給人以強(qiáng)烈的美感。并添加flash代碼等，給瀏覽者一種現(xiàn)代感。整個(gè)網(wǎng)頁(yè)由dreamweaver完成。

三 軟件介紹

（一）Adobe Photoshop Photoshop簡(jiǎn)稱(chēng)“PS”，是由Adobe Systems開(kāi)發(fā)和發(fā)行的圖像處理軟件。Photoshop主要處理以像素所構(gòu)成的數(shù)字圖像。使用其眾多的編修與繪圖工具，可以有效地進(jìn)行圖片編輯工作。ps有很多功能，在圖像、圖形、文字、視頻、出版等各方面都有涉及。

（二）Dreamweaver CS6 dreamwraver軟件由美國(guó)著名的網(wǎng)站應(yīng)用開(kāi)發(fā)工具生產(chǎn)廠商Adobe Macromedia于2005年6月推出并正式投入市場(chǎng)以來(lái)，已經(jīng)發(fā)展得相當(dāng)成熟。關(guān)于dreamwraver的技術(shù)介紹的相關(guān)書(shū)籍與網(wǎng)絡(luò)信息相當(dāng)豐富。通過(guò)大學(xué)中軟件開(kāi)發(fā)環(huán)境課程的學(xué)習(xí)，對(duì)dreamwraver有了比較深刻的認(rèn)識(shí)，并比較輕松的掌握了dreamwraver的操作。因此，軟件技術(shù)可以完成任務(wù)的要求。

(三)軟件運(yùn)行環(huán)境

Dreamweaver是一款簡(jiǎn)體中文軟件，可以在Win2003/WinXP/Win7/Win8中安全運(yùn)行，換句話說(shuō)，它可以在任何家用微機(jī)中運(yùn)行。

/ 11

圖1.Dreamweaver CS6

四、網(wǎng)站整體設(shè)計(jì)

（一）網(wǎng)頁(yè)的規(guī)劃

一個(gè)網(wǎng)頁(yè)設(shè)計(jì)得成功與否，很大程度上決定于設(shè)計(jì)者的規(guī)劃水平，規(guī)劃網(wǎng)頁(yè)就像設(shè)計(jì)師設(shè)計(jì)大樓一樣，圖紙?jiān)O(shè)計(jì)好了，才能建成一座漂亮的樓房。網(wǎng)頁(yè)規(guī)劃包含的內(nèi)容很多，如網(wǎng)頁(yè)的結(jié)構(gòu)、欄目的設(shè)置、網(wǎng)頁(yè)的風(fēng)格、5 / 11

顏色搭配、版面布局、文字圖片的運(yùn)用等，你只有在制作網(wǎng)頁(yè)之前把這些方面都考慮到了，才能在制作時(shí)駕輕就熟，胸有成竹。也只有如此制作出來(lái)的網(wǎng)頁(yè)才能有個(gè)性、有特色，具有吸引力。

（二）系統(tǒng)框架

采摘園首頁(yè) 采摘概況 最新動(dòng)態(tài) 時(shí)令水果 活動(dòng)影集 聯(lián)系我們 圖2.系統(tǒng)模塊框架圖

五、主頁(yè)介紹與網(wǎng)頁(yè)截圖

（一）主頁(yè)面介紹

首先是利用Dreamwear技術(shù)制作的網(wǎng)頁(yè)。上方框架是網(wǎng)站的圖片、網(wǎng)站名稱(chēng)，點(diǎn)擊相關(guān)文字可以進(jìn)入到相關(guān)的頁(yè)面上，下方包括五大個(gè)分類(lèi)鏈接。

圖3.主頁(yè)

/ 11

（二）子頁(yè)面介紹

本網(wǎng)站總共包括五個(gè)子網(wǎng)頁(yè)，分別為：采摘概況、最新動(dòng)態(tài)、時(shí)令水果、活動(dòng)影集、在線聯(lián)系。

圖4.采摘概況

圖5.最新動(dòng)態(tài)

/ 11

圖6.活動(dòng)影集

圖7.時(shí)令水果

/ 11

圖8.聯(lián)系我們

六、總結(jié)與感想

（一）本網(wǎng)站實(shí)現(xiàn)了形式與內(nèi)容的統(tǒng)一

要將豐富的意義和多樣的形式組織成統(tǒng)一的頁(yè)面結(jié)構(gòu)，形式語(yǔ)言必須符合頁(yè)面的內(nèi)容，體現(xiàn)內(nèi)容的豐富含義。運(yùn)用對(duì)比與調(diào)和、對(duì)稱(chēng)與平衡、節(jié)奏與韻律以及留白等手段，通過(guò)空間、文字、圖形之間的相互關(guān)系建立整體的均衡狀態(tài)，產(chǎn)生和諧的美感。如對(duì)稱(chēng)原則在頁(yè)面設(shè)計(jì)中，它的均衡有時(shí)會(huì)使頁(yè)面顯得呆板，但如果加入一些富有動(dòng)感的文字、圖案，或采用夸張的手法來(lái)表現(xiàn)內(nèi)容往往會(huì)達(dá)到比較好的效果。點(diǎn)、線、面作為視覺(jué)語(yǔ)言中的基本元素，要使用點(diǎn)、線、面的互相穿插、互相襯托、互相補(bǔ)充構(gòu)成最佳的頁(yè)面效果。網(wǎng)頁(yè)設(shè)計(jì)中點(diǎn)、線、面的運(yùn)用并不是孤立的，很多時(shí)候都需要將它們結(jié)合起來(lái)，表達(dá)完美的設(shè)計(jì)意境。

/ 11

（二）本網(wǎng)站具有良好的互動(dòng)性

對(duì)于銷(xiāo)售業(yè)務(wù)頁(yè)面要求運(yùn)行的工作環(huán)境穩(wěn)定，易于操作，界面美觀大方，對(duì)于前臺(tái)展示界面要求系統(tǒng)便于維護(hù)，安全可靠，對(duì)于廣大客戶所要執(zhí)行的操作簡(jiǎn)單易懂，遠(yuǎn)程訪問(wèn)速度較快，界面友好美觀，有基本的錯(cuò)誤提醒功能，遠(yuǎn)程操作數(shù)據(jù)庫(kù)正確，要求和客戶有一定的互動(dòng)性，在主頁(yè)上直觀的就可以查看瀏覽者所想要了解的東西。

（三）缺點(diǎn)與不足

就我個(gè)人而言，對(duì)網(wǎng)頁(yè)制作還缺少很多的理論與實(shí)際操作知識(shí)，曾經(jīng)只是做一些簡(jiǎn)單的個(gè)人主頁(yè)，僅此而已。對(duì)通過(guò)此次畢業(yè)設(shè)計(jì)，可以深入的學(xué)習(xí)，以提高自身的制作水平。下一步我將進(jìn)一步完善和優(yōu)化本網(wǎng)站，同時(shí)將推出適合移動(dòng)端應(yīng)用的網(wǎng)站，這樣可以進(jìn)一步優(yōu)化采摘網(wǎng)的布局。

/ 11

參考文獻(xiàn)

[1]鄧文淵.網(wǎng)頁(yè)制作高手[M].北京：人民郵電大學(xué)出版，2007，6 [2]李憲廣.網(wǎng)頁(yè)制作邊學(xué)邊用[M].北京：清華大學(xué)出版社，2009，3 [3]網(wǎng)頁(yè)設(shè)計(jì)入門(mén)[EB/OL].http://004km.cn/sale/view.asp?Article ID=288 [4]許凌云，柳勇良.網(wǎng)頁(yè)設(shè)計(jì)全方位學(xué)習(xí)[M].北京：清華大學(xué)出版社，2008，11 [5]陳琳.photoshop cs3 入門(mén)實(shí)戰(zhàn)與提高[M].北京：電子工業(yè)出版社，2008，11 [6]焦慧.網(wǎng)頁(yè)制作基礎(chǔ)與典型范例[M].北京：電子工業(yè)出版社，2008，7 [7]戎馬工作室.Dreamweaver 8與asp動(dòng)態(tài)網(wǎng)站開(kāi)發(fā)[M].北京：機(jī)械工業(yè)出版社，2006，5 [8]戴一波.Dreamweaver CS3網(wǎng)站制作炫例精講[M].北京：電子工業(yè)出版社，2008，1 [9]何秀芳.網(wǎng)頁(yè)制作與網(wǎng)站建設(shè)課堂實(shí)錄[M].北京：人民郵電出版社.2009，3 [10]孫連三.新編網(wǎng)頁(yè)制作與網(wǎng)站建設(shè)入門(mén)與提高[M].北京：人民郵電出版社.2008，9 [11]鄧文淵.網(wǎng)頁(yè)制作高手FLASH 8[M].北京：人民郵電出版社，2007，6 [12]胡崧.超夢(mèng)幻勁爆網(wǎng)頁(yè)[M].中國(guó)青年出版社.2008，7 [13]Scot Johson etal.using Active Server Page[J].Que 2007 11 / 11

第三篇：網(wǎng)頁(yè)設(shè)計(jì)畢業(yè)論文

《網(wǎng)頁(yè)設(shè)計(jì)畢業(yè)論文》簡(jiǎn)介：

前言隨著時(shí)代的發(fā)展，網(wǎng)站建設(shè)越來(lái)越接近于一門(mén)藝術(shù)而不僅僅是一項(xiàng)技術(shù)。網(wǎng)頁(yè)的藝術(shù)設(shè)計(jì)，日益被網(wǎng)站建設(shè)者 《網(wǎng)頁(yè)設(shè)計(jì)畢業(yè)論文》正文開(kāi)始>> 前言

隨著時(shí)代的發(fā)展，網(wǎng)站建設(shè)越來(lái)越接近于一門(mén)藝術(shù)而不僅僅是一項(xiàng)技術(shù)。網(wǎng)頁(yè)的藝術(shù)設(shè)計(jì)，日益被網(wǎng)站建設(shè)者所注重。在目前國(guó)

內(nèi)對(duì)此領(lǐng)域研究甚少的情況下，作者將網(wǎng)頁(yè)藝術(shù)設(shè)計(jì)與其他藝術(shù)設(shè)計(jì)形式進(jìn)行比較，嘗試從網(wǎng)頁(yè)藝術(shù)設(shè)計(jì)的內(nèi)容、原則和特點(diǎn)等

三個(gè)方面，對(duì)這個(gè)新的藝術(shù)設(shè)計(jì)領(lǐng)域進(jìn)行初步的歸納總結(jié)和理論探討。作者認(rèn)為網(wǎng)頁(yè)藝術(shù)設(shè)計(jì)是藝術(shù)與技術(shù)的高度統(tǒng)一，指出網(wǎng)

頁(yè)藝術(shù)設(shè)計(jì)包含視聽(tīng)元素與版式設(shè)計(jì)兩項(xiàng)內(nèi)容；以主題鮮明、形式與內(nèi)容相統(tǒng)一、強(qiáng)調(diào)整體為設(shè)計(jì)原則；具有交互性與持續(xù)性、多維性、綜合性、版式的不可控性、藝術(shù)與技術(shù)結(jié)合的緊密性等五個(gè)特點(diǎn)。在明確了網(wǎng)頁(yè)藝術(shù)設(shè)計(jì)與網(wǎng)站主題的關(guān)系的基礎(chǔ)上，提出了“美”和“功能”都是為了更好地表達(dá)網(wǎng)站主題這一觀點(diǎn)。

網(wǎng)頁(yè)藝術(shù)設(shè)計(jì)是伴隨著計(jì)算機(jī)互聯(lián)網(wǎng)絡(luò)的產(chǎn)生而形成的視聽(tīng)設(shè)計(jì)新課題，是網(wǎng)頁(yè)設(shè)計(jì)者以所處時(shí)代所能獲取的技術(shù)和藝術(shù)經(jīng)驗(yàn)為

基礎(chǔ)，依照設(shè)計(jì)目的和要求自覺(jué)地對(duì)網(wǎng)頁(yè)的構(gòu)成元素進(jìn)行藝術(shù)規(guī)劃的創(chuàng)造性思維活動(dòng)，必然要成為設(shè)計(jì)藝術(shù)的重要組成部分，并

隨著網(wǎng)絡(luò)技術(shù)的發(fā)展而發(fā)展。表面上看，它不過(guò)是關(guān)于網(wǎng)頁(yè)版式編排的技巧與方法，而實(shí)際上，它不僅是一種技能，更是藝術(shù)與 技術(shù)的高度統(tǒng)一。

目錄：

一、網(wǎng)頁(yè)藝術(shù)設(shè)計(jì)的內(nèi)容~~~~~~~~~~~~~~~~~~~~頁(yè) 1.視聽(tīng)元素~~~~~~~~~~~~~~~~~~~~頁(yè) 2.版式設(shè)計(jì)~~~~~~~~~~~~~~~~~~~~頁(yè)

二、網(wǎng)頁(yè)藝術(shù)設(shè)計(jì)的原則 ~~~~~~~~~~~~~~~~~~頁(yè) 1.主題鮮明 ~~~~~~~~~~~~~~~~~~~~~~~~~~頁(yè) 2.形式與內(nèi)容統(tǒng)一~~~~~~~~~~~~~~~~~~~~~頁(yè) 3.強(qiáng)調(diào)整體

三、網(wǎng)頁(yè)藝術(shù)設(shè)計(jì)的特點(diǎn)~~~~~~~~~~~~~~~~~~~~~

1.交互性與持續(xù)性~~~~~~~~~~~~~~~~~~~~~~~ 2.多維性 ~~~~~~~~~~~~~~~~~~~~~~~~~~~ 3.多種媒體的綜合性 ~~~~~~~~~~~~~~~~~~~~ 4.版式的不可控性~~~~~~~~~~~~~~~~~~~~~~ 5.技術(shù)與藝術(shù)結(jié)合的緊密性~~~~~~~~~~~~~~~~~

四、結(jié) 束 語(yǔ)~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

一、網(wǎng)頁(yè)藝術(shù)設(shè)計(jì)的內(nèi)容

設(shè)計(jì)活動(dòng)中包含著主觀和客觀兩方面的因素，在確立了網(wǎng)頁(yè)主題之后，首先要明確和熟悉設(shè)計(jì)的對(duì)象和構(gòu)成的要素。網(wǎng)頁(yè)藝術(shù)設(shè)

計(jì)涉及的具體內(nèi)容很多，可以概括為視聽(tīng)元素和版式設(shè)計(jì)兩個(gè)方面。

1.視聽(tīng)元素

這里所說(shuō)的視聽(tīng)元素，主要包括：文本、背景、按鈕、圖標(biāo)、圖像、表格、顏色、導(dǎo)航工具、背景音樂(lè)、動(dòng)態(tài)影像等。無(wú)論是文

字、圖形、動(dòng)畫(huà)，還是音頻、視頻，網(wǎng)頁(yè)設(shè)計(jì)者所要考慮的是如何以感人的形式把它們放進(jìn)頁(yè)面這個(gè)“大畫(huà)布”里。多媒體技術(shù) 的運(yùn)用大大豐富了網(wǎng)頁(yè)藝術(shù)設(shè)計(jì)的表現(xiàn)力。

以上各視聽(tīng)元素大多數(shù)瀏覽器本身都可以顯示或收聽(tīng)，無(wú)需任何外部程序或模塊支持。比如，大部分瀏覽器都可以顯示GIF、JPE G圖形和GIF89a動(dòng)畫(huà)。還有些多媒體文件（如MP3音樂(lè)）需要先下載到本地硬盤(pán)上，然后啟動(dòng)相應(yīng)的外部程序來(lái)播放。另外，在瀏

覽器使用插件（Plug-in）可以播放更多格式的多媒體文件。微軟推出IE瀏覽器后，提供了基于OLE的ActiveX技術(shù)，用來(lái)在網(wǎng)頁(yè)

中播放多媒體。目前ActiveX已經(jīng)成為熱門(mén)技術(shù)。另一種播放多媒體的技術(shù)是JavaApplet。它是用Java語(yǔ)言編寫(xiě)的應(yīng)用于網(wǎng)頁(yè)之

中的小應(yīng)用程序，相比于插件和ActiveX，JavaApplet具有更大的靈活性和良好的跨平臺(tái)能力，因此具有很好的發(fā)展前景?？傊?，技術(shù)的不斷發(fā)展使多媒體元素在網(wǎng)頁(yè)藝術(shù)設(shè)計(jì)中的綜合運(yùn)用越來(lái)越廣泛，使瀏覽者可以享受到更加完美的視聽(tīng)效果。這些新技 術(shù)的出現(xiàn)，也對(duì)網(wǎng)頁(yè)的藝術(shù)設(shè)計(jì)提出了更高的要求。

2.版式設(shè)計(jì)

網(wǎng)頁(yè)的版式設(shè)計(jì)同報(bào)刊雜志等平面媒體的版式設(shè)計(jì)有很多共同之處，它在網(wǎng)頁(yè)的藝術(shù)設(shè)計(jì)中占據(jù)著重要的地位。所謂網(wǎng)頁(yè)的版式

設(shè)計(jì)，是在有限的屏幕空間上將視聽(tīng)多媒體元素進(jìn)行有機(jī)的排列組合，將理性思

維個(gè)性化的表現(xiàn)出來(lái)，是一種具有個(gè)人風(fēng)格和藝

術(shù)特色的視聽(tīng)傳達(dá)方式。它在傳達(dá)信息的同時(shí)，也產(chǎn)生感官上的美感和精神上的享受。

但網(wǎng)頁(yè)的排版與書(shū)籍雜志的排版又有很多差異。印刷品都有固定的規(guī)格尺寸，網(wǎng)頁(yè)則不然，它的尺寸是由讀者來(lái)控制的。這使網(wǎng)

頁(yè)設(shè)計(jì)者不能精確控制頁(yè)面上每個(gè)元素的尺寸和位置。而且，網(wǎng)頁(yè)的組織結(jié)構(gòu)不像印刷品那樣為線性組合，這給網(wǎng)頁(yè)的版式設(shè)計(jì) 帶來(lái)了一定的難度。

二、網(wǎng)頁(yè)藝術(shù)設(shè)計(jì)的原則

網(wǎng)頁(yè)作為傳播信息的一種載體，同其他出版物如報(bào)紙、雜志等在設(shè)計(jì)上有許多共同之處，也要遵循一些設(shè)計(jì)的基本原則。但是，由于表現(xiàn)形式、運(yùn)行方式和社會(huì)功能的不同，網(wǎng)頁(yè)設(shè)計(jì)又有其自身的特殊規(guī)律。網(wǎng)頁(yè)的藝術(shù)設(shè)計(jì)，是技術(shù)與藝術(shù)的結(jié)合，內(nèi)容與

形式的統(tǒng)一。它要求設(shè)計(jì)者必須掌握以下三個(gè)主要原則：

1.主題鮮明

視覺(jué)設(shè)計(jì)表達(dá)的是一定的意圖和要求，有明確的主題，并按照視覺(jué)心理規(guī)律和形式將主題主動(dòng)地傳達(dá)給觀賞者。訴求的目的，是使主題在適當(dāng)?shù)沫h(huán)境里被人們即時(shí)地理解和接受，以滿足人們的實(shí)用和需求，這就要求視覺(jué)設(shè)計(jì)不但要單純、簡(jiǎn)練、清晰

和精確，而且在強(qiáng)調(diào)藝術(shù)性的同時(shí)，更應(yīng)該注重通過(guò)獨(dú)特的風(fēng)格和強(qiáng)烈的視覺(jué)沖擊力，來(lái)鮮明地突出設(shè)計(jì)主題。

根據(jù)認(rèn)知心理學(xué)的理論，大多數(shù)人在短期記憶中只能同時(shí)把握４到７條分立的信息，而對(duì)多于７條的分立信息或者不分立的信息

容易產(chǎn)生記憶上的模糊或遺忘，概括起來(lái)就是：較小而分立的信息要比較長(zhǎng)而不分立的信息更為有效和容易瀏覽。這個(gè)規(guī)律蘊(yùn)含

在人們尋找信息和使用信息的實(shí)踐活動(dòng)中，它要求視覺(jué)設(shè)計(jì)者的設(shè)計(jì)活動(dòng)必須自覺(jué)地掌握和遵從。

作為視覺(jué)設(shè)計(jì)范疇一種的網(wǎng)頁(yè)藝術(shù)設(shè)計(jì)，其最終目的是達(dá)到最佳的主題訴求效果。這種效果的取得，一方面通過(guò)對(duì)網(wǎng)頁(yè)主題思想

運(yùn)用邏輯規(guī)律進(jìn)行條理性處理，使之符合瀏覽者獲取信息的心理需求和邏輯方式，讓瀏覽者快速地理解和吸收；另一方面通過(guò)對(duì)

網(wǎng)頁(yè)構(gòu)成元素運(yùn)用藝術(shù)的形式美法則進(jìn)行條理性處理，更好地營(yíng)造符合設(shè)計(jì)目的的視覺(jué)環(huán)境，突出主題，增強(qiáng)瀏覽者對(duì)網(wǎng)頁(yè)的注

意力，增進(jìn)對(duì)網(wǎng)頁(yè)內(nèi)容的理解。只有兩個(gè)方面有機(jī)地統(tǒng)一，才能實(shí)現(xiàn)最佳的主題訴求效果。

優(yōu)秀的網(wǎng)頁(yè)設(shè)計(jì)必然服務(wù)于網(wǎng)站的主題，就是說(shuō)，什么樣的網(wǎng)站，應(yīng)該有什么樣的設(shè)計(jì)。例如，設(shè)計(jì)類(lèi)的個(gè)人站點(diǎn)與商業(yè)站點(diǎn)性

質(zhì)不同，目的也不同，所以評(píng)論的標(biāo)準(zhǔn)也不同。網(wǎng)頁(yè)藝術(shù)設(shè)計(jì)與網(wǎng)站主題的關(guān)系應(yīng)該是這樣：首先，設(shè)計(jì)是為主題服務(wù)的；其次，設(shè)計(jì)是藝術(shù)和技術(shù)結(jié)合的產(chǎn)物，就是說(shuō)，即要“美”，又要實(shí)現(xiàn)“功能”；最后，“美”和“功能”都是為了更好地表達(dá)主題

。當(dāng)然，有些情況下，“功能”即是“主題”，還有些情況下，“美”即是主題。例如，雅虎作為一個(gè)搜索引擎，首先要實(shí)現(xiàn)

“搜索”的“功能”。它的主題即是它的“功能”。而一個(gè)個(gè)人網(wǎng)站，可以只體現(xiàn)作者的設(shè)計(jì)思想，或者僅僅以設(shè)計(jì)出“美”的 網(wǎng)頁(yè)為目的。它的主題只有一個(gè)，就是——美。

只注重主題思想的條理性而忽視網(wǎng)頁(yè)構(gòu)成元素空間關(guān)系的形式美組合，或者只重視網(wǎng)頁(yè)形式上的條理而淡化主題思想的邏輯，都

將削弱網(wǎng)頁(yè)主題的最佳訴求效果，難以吸引瀏覽者的注意力，出現(xiàn)平庸的網(wǎng)頁(yè)設(shè)計(jì)或使網(wǎng)頁(yè)設(shè)計(jì)以失敗而告終。

要使網(wǎng)頁(yè)從形式上獲得良好的誘導(dǎo)力，鮮明地突出訴求主題，具體可以通過(guò)對(duì)網(wǎng)頁(yè)的空間層次、主從關(guān)系、視覺(jué)秩序及彼此間的 邏輯性的把握運(yùn)用來(lái)達(dá)到。

2.形式與內(nèi)容統(tǒng)一

任何設(shè)計(jì)都有一定的內(nèi)容和形式。內(nèi)容是構(gòu)成設(shè)計(jì)的一切內(nèi)在要素的總和，是設(shè)計(jì)存在的基礎(chǔ)，被稱(chēng)為“設(shè)計(jì)的靈魂”；形式

是構(gòu)成內(nèi)容諸要素的內(nèi)部結(jié)構(gòu)或內(nèi)容的外部表現(xiàn)方式。設(shè)計(jì)的內(nèi)容就是指它的主題、形象、題材等要素的總和，形式就是它的

結(jié)構(gòu)、風(fēng)格或設(shè)計(jì)語(yǔ)言等表現(xiàn)方式。內(nèi)容決定形式，形式反作用于內(nèi)容。一個(gè)優(yōu)秀的設(shè)計(jì)必定是形式對(duì)內(nèi)容的完美表現(xiàn)。正如

黑格爾所說(shuō)：“工藝的美就不在于要求實(shí)用品的外部造型、色彩、紋樣去摹擬事物，再現(xiàn)現(xiàn)實(shí)，而在于使其外部形式傳達(dá)和表

現(xiàn)出一定的情緒、氣氛、格調(diào)、風(fēng)尚、趣味，使物質(zhì)經(jīng)由象征變成相似于精神生活的有關(guān)環(huán)境?！保ê诟駹枴睹缹W(xué)》第三卷）

一方面，網(wǎng)頁(yè)設(shè)計(jì)所追求的形式美，必須適合主題的需要，這是網(wǎng)頁(yè)設(shè)計(jì)的前提。只講花哨的表現(xiàn)形式以及過(guò)于強(qiáng)調(diào)“獨(dú)特的

設(shè)計(jì)風(fēng)格”而脫離內(nèi)容，或者只求內(nèi)容而缺乏藝術(shù)的表現(xiàn)，網(wǎng)頁(yè)設(shè)計(jì)都會(huì)變的空洞而無(wú)力。設(shè)計(jì)者只有將二者有機(jī)地統(tǒng)一起來(lái)，深入領(lǐng)會(huì)主題的精髓，再融合自己的思想感情，找到一個(gè)完美的表現(xiàn)形式，才能體現(xiàn)出網(wǎng)頁(yè)設(shè)計(jì)獨(dú)具的分量和特有的價(jià)值。另

一方面，要確保網(wǎng)頁(yè)上的每一個(gè)元素都有存在的必要性，不要為了炫耀而使用冗余的技術(shù)。那樣得到的效果可能會(huì)適得其反。

只有通過(guò)認(rèn)真設(shè)計(jì)和充分的考慮來(lái)實(shí)現(xiàn)全面的功能并體現(xiàn)美感才能實(shí)現(xiàn)形式與內(nèi)容的統(tǒng)一。

據(jù)有關(guān)資料所做的保守估計(jì)，目前在WWW上網(wǎng)頁(yè)數(shù)據(jù)傳輸平均以每秒1.5k的速度到達(dá)客戶端。假設(shè)某個(gè)網(wǎng)頁(yè)為了豐富其藝術(shù)性而

追趕時(shí)髦地大量使用圖像或其它多媒體元素等，雖然達(dá)到了其靜態(tài)形式美的效果，卻造成多達(dá)幾十K甚至更大的網(wǎng)頁(yè)數(shù)據(jù)，使瀏

覽者必須等待很長(zhǎng)時(shí)間才能看到“廬山真面目”，這樣的網(wǎng)頁(yè)就不是一個(gè)優(yōu)秀的網(wǎng)頁(yè)，因?yàn)樗环暇W(wǎng)頁(yè)傳播信息的突出特性之

一——快捷性，使網(wǎng)頁(yè)內(nèi)容不能很快地到達(dá)訪問(wèn)者，影響了訪問(wèn)效果和質(zhì)量，損害了訪問(wèn)者的情趣和積極性，這種技術(shù)要素影響 了傳達(dá)信息的效果，因而不是形式與內(nèi)容的完美統(tǒng)一。

網(wǎng)頁(yè)具有多屏、分頁(yè)、嵌套等特性，設(shè)計(jì)者可以對(duì)其進(jìn)行形式上的適當(dāng)變化以達(dá)到多變性處理效果，豐富整個(gè)網(wǎng)頁(yè)的形式美。這

就要求設(shè)計(jì)者在注意單個(gè)頁(yè)面形式與內(nèi)容統(tǒng)一的同時(shí)，更不能忽視同一主題下多個(gè)分頁(yè)面組成的整體網(wǎng)頁(yè)的形式與整體內(nèi)容的統(tǒng)一。

因此，在網(wǎng)頁(yè)設(shè)計(jì)中必須注意形式與內(nèi)容的高度統(tǒng)一。

3.強(qiáng)調(diào)整體

網(wǎng)頁(yè)的整體性包括內(nèi)容和形式上的整體性，這里主要討論設(shè)計(jì)形式上的整體性。

網(wǎng)頁(yè)是傳播信息的載體，它要表達(dá)的是一定的內(nèi)容、主題和意念，在適當(dāng)?shù)臅r(shí)間和空間環(huán)境里為人們所理解和接受，它以滿足

人們的實(shí)用和需求為目標(biāo)。設(shè)計(jì)時(shí)強(qiáng)調(diào)其整體性，可以使瀏覽者更快捷、更準(zhǔn)確、更全面地認(rèn)識(shí)它、掌握它，并給人一種內(nèi)部

有機(jī)聯(lián)系、外部和諧完整的美感。整體性也是體現(xiàn)一個(gè)站點(diǎn)獨(dú)特風(fēng)格的重要手段之一。

網(wǎng)頁(yè)的結(jié)構(gòu)形式是由各種視聽(tīng)要素組成的。在設(shè)計(jì)網(wǎng)頁(yè)時(shí)，強(qiáng)調(diào)頁(yè)面各組成部分的共性因素或者使諸部分共同含有某種形式特

征，是求得整體的常用方法。這主要從版式、色彩、風(fēng)格等方面入手。例如：在

版式上，將頁(yè)面中各視覺(jué)要素作通盤(pán)考慮，以

周密的組織和精確的定位來(lái)獲得頁(yè)面的秩序感，即使運(yùn)用“散”的結(jié)構(gòu)，也是經(jīng)過(guò)深思熟慮之后的決定；一個(gè)站點(diǎn)通常只使用

兩到三種標(biāo)準(zhǔn)色，并注意色彩搭配的和諧；對(duì)于分屏的長(zhǎng)頁(yè)面，不可設(shè)計(jì)完第一屏再考慮下一屏。同樣，整個(gè)網(wǎng)頁(yè)內(nèi)部的頁(yè)面，都應(yīng)統(tǒng)一規(guī)劃，統(tǒng)一風(fēng)格，讓瀏覽者體會(huì)到設(shè)計(jì)者完整的設(shè)計(jì)思想。

從某種意義上講，強(qiáng)調(diào)網(wǎng)頁(yè)結(jié)構(gòu)形式的視覺(jué)整體性必然會(huì)犧牲靈活的多變性，“物極必反”就是這個(gè)道理。因此，在強(qiáng)調(diào)網(wǎng)頁(yè)

整體性設(shè)計(jì)的同時(shí)必須注意：過(guò)于強(qiáng)調(diào)整體性可能會(huì)使網(wǎng)頁(yè)呆板、沉悶，以致影響訪問(wèn)者的情趣和繼續(xù)瀏覽的欲望?！罢w” 是“多變”基礎(chǔ)上的整體。

三、網(wǎng)頁(yè)藝術(shù)設(shè)計(jì)的特點(diǎn)

1.交互性與持續(xù)性

網(wǎng)頁(yè)不同于傳統(tǒng)媒體之處，就在于信息的動(dòng)態(tài)更新和即時(shí)交互性。即時(shí)的交互性是Web成為熱點(diǎn)的主要原因，也是網(wǎng)頁(yè)設(shè)計(jì)時(shí)

必須考慮的問(wèn)題。傳統(tǒng)媒體（如廣播、電視節(jié)目、報(bào)刊雜志等）都以線性方式提供信息，即按照信息提供者的感覺(jué)、體驗(yàn)和事

先確定的格式來(lái)傳播。而在Web環(huán)境下，人們不再是一個(gè)傳統(tǒng)媒體方式的被動(dòng)接受者，而是以一個(gè)主動(dòng)參與者的身份加入到信息 的加工處理和發(fā)布之中。這種持續(xù)的交互，使網(wǎng)頁(yè)藝術(shù)設(shè)計(jì)不像印刷品設(shè)計(jì)那樣，發(fā)表之后就意味著設(shè)計(jì)的結(jié)束。網(wǎng)頁(yè)設(shè)計(jì)人

員必須根據(jù)網(wǎng)站各個(gè)階段的經(jīng)營(yíng)目標(biāo)，配合網(wǎng)站不同時(shí)期的經(jīng)營(yíng)策略，以及用戶的反饋信息，經(jīng)常地對(duì)網(wǎng)頁(yè)進(jìn)行調(diào)整和修改。

例如，為了保持瀏覽者對(duì)網(wǎng)站的新鮮感，很多大型網(wǎng)站總是定期或不定期的進(jìn)行改版，這就需要設(shè)計(jì)者在保持網(wǎng)站視覺(jué)形象一 貫性的基礎(chǔ)上，不斷創(chuàng)作出新的網(wǎng)頁(yè)設(shè)計(jì)作品。

2.多維性

多維性源于超級(jí)鏈接，主要體現(xiàn)在網(wǎng)頁(yè)設(shè)計(jì)中對(duì)導(dǎo)航的設(shè)計(jì)上。由于超級(jí)鏈接的出現(xiàn)，網(wǎng)頁(yè)的組織結(jié)構(gòu)更加豐富，瀏覽者可以

在各種主題之間自由跳轉(zhuǎn)，從而打破了以前人們接收信息的線性方式。例如，可將頁(yè)面的組織結(jié)構(gòu)分為序列結(jié)構(gòu)、層次結(jié)構(gòu)、網(wǎng)狀結(jié)構(gòu)、復(fù)合結(jié)構(gòu)等。但頁(yè)面之間的關(guān)系過(guò)于復(fù)雜，不僅使瀏覽者檢索和查找信息增加了難度，也給設(shè)計(jì)者帶來(lái)了更大的困

難。為了讓瀏覽者在網(wǎng)頁(yè)上迅速找到所需的信息，設(shè)計(jì)者必須考慮快捷而完善的導(dǎo)航設(shè)計(jì)。

印刷品中導(dǎo)航問(wèn)題不是那么突出，如果一個(gè)句子在頁(yè)尾突然終止，讀者會(huì)很自然地翻到下一頁(yè)查找剩余部分，為了幫助讀者找

到他們要找的信息，出版者提供了目錄、索引或腳注。如果文章從期刊中的一頁(yè)跳到后面的非順序頁(yè)時(shí)，讀者會(huì)看到類(lèi)似于

“續(xù)68頁(yè)”這樣的指引語(yǔ)句。然而，作為一名網(wǎng)頁(yè)設(shè)計(jì)者，你以前所學(xué)的導(dǎo)航技術(shù)沒(méi)有一種完全適合于網(wǎng)頁(yè)導(dǎo)航。在替瀏覽者

考慮得很周到的網(wǎng)頁(yè)中，導(dǎo)航提供了足夠的、不同角度的鏈接，幫助讀者在網(wǎng)頁(yè)的各個(gè)部分之間跳轉(zhuǎn)，并告知瀏覽者現(xiàn)在所在 的位置、當(dāng)前頁(yè)面和其他頁(yè)面之間的關(guān)系等。而且，每頁(yè)都有一個(gè)返回主頁(yè)的按鈕或鏈接，如果頁(yè)面是按層次結(jié)構(gòu)組織的，通

常還有一個(gè)返回上級(jí)頁(yè)面的鏈接。對(duì)于網(wǎng)頁(yè)設(shè)計(jì)者來(lái)說(shuō)，面對(duì)的不是按順序排列的印刷頁(yè)面，而是自由分散的網(wǎng)頁(yè)，因此必須

考慮更多的問(wèn)題。如：怎樣構(gòu)建合理的頁(yè)面組織結(jié)構(gòu)，讓瀏覽者對(duì)你提供的巨量信息感到條理？怎樣建立包括站點(diǎn)索引、幫助

頁(yè)面、查詢功能在內(nèi)的導(dǎo)航系統(tǒng)？這一切從哪兒開(kāi)始，到哪兒結(jié)束？

3.多種媒體的綜合性

目前網(wǎng)頁(yè)中使用的多媒體視聽(tīng)元素主要有文字、圖像、聲音、視頻等，隨著網(wǎng)絡(luò)帶寬的增加、芯片處理速度的提高以及跨平

臺(tái)的多媒體文件格式的推廣，必將促使設(shè)計(jì)者綜合運(yùn)用多種媒體元素來(lái)設(shè)計(jì)網(wǎng)頁(yè)，以滿足和豐富瀏覽者對(duì)網(wǎng)絡(luò)信息傳輸質(zhì)量

提出的更高要求。目前國(guó)內(nèi)網(wǎng)頁(yè)已經(jīng)出現(xiàn)了模擬三維的操作界面，在數(shù)據(jù)壓縮技術(shù)的改進(jìn)和流（Stream）技術(shù)的推動(dòng)下，Internet網(wǎng)上出現(xiàn)實(shí)時(shí)的音頻和視頻服務(wù)，典型的有在線音樂(lè)、在線廣播、網(wǎng)上電影、網(wǎng)上直播等。因此，多種媒體的綜合

運(yùn)用是網(wǎng)頁(yè)藝術(shù)設(shè)計(jì)的特點(diǎn)之一，是未來(lái)的發(fā)展方向。

4.版式的不可控性

網(wǎng)頁(yè)版式設(shè)計(jì)與傳統(tǒng)印刷版式設(shè)計(jì)有著極大的差異：

(1)印刷品設(shè)計(jì)者可以指定使用的紙張和油墨，而網(wǎng)頁(yè)設(shè)計(jì)者卻不能要求瀏覽者使用什么樣的電腦或?yàn)g覽器；

(2)網(wǎng)絡(luò)正處于不斷發(fā)展之中，不象印刷那樣基本具備了成熟的印刷標(biāo)準(zhǔn)；

(3)網(wǎng)頁(yè)設(shè)計(jì)過(guò)程中有關(guān)Web的每一件事都可能隨時(shí)發(fā)生變化。

這一切說(shuō)明，網(wǎng)絡(luò)應(yīng)用尚處在發(fā)展之中，關(guān)于網(wǎng)絡(luò)應(yīng)用也很難在各個(gè)方面都制訂出統(tǒng)一的標(biāo)準(zhǔn)，這必然導(dǎo)致網(wǎng)頁(yè)版式設(shè) 計(jì)的不可控制性。其具體表現(xiàn)為：

(1)網(wǎng)頁(yè)頁(yè)面會(huì)根據(jù)當(dāng)前瀏覽器窗口大小自動(dòng)格式化輸出；

(2)網(wǎng)頁(yè)的瀏覽者可以控制網(wǎng)頁(yè)頁(yè)面在瀏覽器中的顯示方式；

(3)不同種類(lèi)、版本的瀏覽器觀察同一個(gè)網(wǎng)頁(yè)頁(yè)面，效果會(huì)有所不同；

(4)用戶的瀏覽器工作環(huán)境不同，顯示效果也會(huì)有所不同。

把所有這些問(wèn)題歸結(jié)為一點(diǎn)，即網(wǎng)頁(yè)設(shè)計(jì)者無(wú)法控制頁(yè)面在用戶端的最終顯示效果，但這也正是網(wǎng)頁(yè)設(shè)計(jì)的吸引人之處。

5.技術(shù)與藝術(shù)結(jié)合的緊密性

設(shè)計(jì)是主觀和客觀共同作用的結(jié)果，是在自由和不自由之間進(jìn)行的，設(shè)計(jì)者不能超越自身已有經(jīng)驗(yàn)和所處環(huán)境提供 的客觀條件限制，優(yōu)秀設(shè)計(jì)者正是在掌握客觀規(guī)律基礎(chǔ)上得到了完全的自由，一種想象和創(chuàng)造的自由。網(wǎng)絡(luò)技術(shù)主

要表現(xiàn)為客觀因素，藝術(shù)創(chuàng)意主要表現(xiàn)為主觀因素，網(wǎng)頁(yè)設(shè)計(jì)者應(yīng)該積極主動(dòng)地掌握現(xiàn)有的各種網(wǎng)絡(luò)技術(shù)規(guī)律，注

重技術(shù)和藝術(shù)緊密結(jié)合，這樣才能窮盡技術(shù)之長(zhǎng)，實(shí)現(xiàn)藝術(shù)想象，滿足瀏覽者對(duì)網(wǎng)頁(yè)信息的高質(zhì)量需求。

例如，瀏覽者欣賞一段音樂(lè)或電影，以前必須先將這段音樂(lè)或電影下載回本地機(jī)器，然后使用相應(yīng)的程序來(lái)播放，由于音頻或視頻文件都比較大，需要較長(zhǎng)的下載時(shí)間。流（Stream）技術(shù)出現(xiàn)以后，網(wǎng)頁(yè)設(shè)計(jì)者充分、巧妙地應(yīng)

用此技術(shù)，讓瀏覽者在下載過(guò)程中就可以欣賞這段音樂(lè)或電影，實(shí)現(xiàn)了實(shí)時(shí)的網(wǎng)上視頻直播服務(wù)和在線欣賞音樂(lè)

服務(wù)，無(wú)疑增強(qiáng)了頁(yè)面?zhèn)鞑バ畔⒌谋憩F(xiàn)力和感染力。

網(wǎng)絡(luò)技術(shù)與藝術(shù)創(chuàng)意的緊密結(jié)合，使網(wǎng)頁(yè)的藝術(shù)設(shè)計(jì)由平面設(shè)計(jì)擴(kuò)展到立體設(shè)計(jì)，由純粹的視覺(jué)藝術(shù)擴(kuò)展到空間

聽(tīng)覺(jué)藝術(shù)，網(wǎng)頁(yè)效果不再近似于書(shū)籍或報(bào)刊雜志等印刷媒體，而更接近于電影或電視的觀賞效果。技術(shù)發(fā)展促進(jìn)了

技術(shù)與藝術(shù)的緊密結(jié)合，把瀏覽者帶入一個(gè)真正現(xiàn)實(shí)中的虛擬世界。

四 結(jié) 束 語(yǔ)

網(wǎng)頁(yè)作為一種新的視覺(jué)表現(xiàn)形式，它的發(fā)展雖然沒(méi)有多長(zhǎng)時(shí)間，它兼容了傳統(tǒng)平

面設(shè)計(jì)的特征，又具備其

所沒(méi)有的優(yōu)勢(shì)，成為今后信息交流的一個(gè)非常有影響的途徑。網(wǎng)頁(yè)設(shè)計(jì)是一種綜合性的設(shè)計(jì)，它所涉及的范圍非常的廣泛，包括消費(fèi)者心理學(xué)、視覺(jué)設(shè)計(jì)美學(xué)、人機(jī)工程、哲學(xué)等諸多方面，當(dāng)然也離不開(kāi)一定的科學(xué)技術(shù)發(fā)展。在本文中只從視

覺(jué)傳達(dá)的角度進(jìn)行了一些闡述與分析。好的網(wǎng)頁(yè)設(shè)計(jì)除首先應(yīng)考慮其內(nèi)容上的精益求精外，其次就是對(duì)內(nèi)容合理有效的視

覺(jué)編排。美是任何網(wǎng)頁(yè)所必需具備的基本因素，網(wǎng)頁(yè)信息不僅是為了滿足使用者的需求，更重要的是創(chuàng)造一種愉悅的視覺(jué)

環(huán)境，技術(shù)與藝術(shù)的緊密結(jié)合在網(wǎng)頁(yè)藝術(shù)設(shè)計(jì)中體現(xiàn)得尤為突出。參 考 文 獻(xiàn)

(1)謝依君.電子報(bào)的新聞介面分析(D).臺(tái)北：臺(tái)灣國(guó)立政治大學(xué)新聞學(xué)系，1999.(2)唐良瑞，蔡安妮，孫景鰲.從認(rèn)知心理及人機(jī)界面談網(wǎng)頁(yè)設(shè)計(jì)(J).工程圖學(xué)學(xué)報(bào)，2000，(2)：31-36.(3)徐珂，苗彤，趙暉.網(wǎng)頁(yè)視覺(jué)與設(shè)計(jì)(M).北京：人民郵電出版社，2001.(4)李硯祖，蘆影.視覺(jué)傳達(dá)的歷史與美學(xué)(M).北京：中國(guó)人民大學(xué)出版社，2000.(5)何蘇六.網(wǎng)絡(luò)媒體的策劃與編輯(M).北京：北京廣播學(xué)院出版社，2001.

第四篇：東西方傳統(tǒng)設(shè)計(jì)風(fēng)格

設(shè)計(jì)風(fēng)格與流派課程 指導(dǎo)老師：盛忠誼

雲(yún)南少數(shù)民族“干欄式”民居

姓名：陳明梅 學(xué)號(hào)：M11055108066

專(zhuān)業(yè)：2011屆MFA環(huán)境藝術(shù)

雲(yún)南少數(shù)民族“干欄式”民居

水傣的傳統(tǒng)民居是干欄式，也就是俗稱(chēng)“竹樓”。特點(diǎn)是歇山式的屋頂，正脊很短，屋頂很大，坡度非常陡，也就是當(dāng)?shù)厝苏f(shuō)的“偏廈”，看上去很象重檐頂形式。傣族干欄民居的構(gòu)架非常簡(jiǎn)単，在平地上接塔出一亇穩(wěn)定的架子，底層懸空二層做出居室型，然后在頂部輔草就可以了。這種形式是因地取材便利快捷，占地面積少居住面積大，有防潮通風(fēng)等特點(diǎn)很適合當(dāng)?shù)貧夂驐l件。

干欄式建筑的結(jié)構(gòu)干欄（也作[干闌]）是歷史極為久遠(yuǎn)的一種建筑類(lèi)型，它是由原始人類(lèi)的巢居逐步演變而成的。[干欄]一詞最早見(jiàn)于《魏書(shū)》：[依樹(shù)積木，以居其上名曰干欄]。《舊唐書(shū)》：[山有毒草及風(fēng)蝮蛇，人并樓居，登梯而上，號(hào)為干欄]。干欄是一種把居住層地板用支柱架離地面的建筑，以避蟲(chóng)蛇猛獸，并有利于防潮及通風(fēng)，適用于溫暖潮濕的地域。（如圖）

云南省劍川劍湖海尾河旁的海門(mén)口遺址的復(fù)原的干欄建筑（距今7000多年干欄式建筑群（距今3000多年）干欄在中國(guó)古時(shí)候的長(zhǎng)江以南地區(qū)曾廣泛采用，后來(lái)逐漸減少，現(xiàn)在只存在于西南少數(shù)民族地區(qū)。如今仍以干欄為主要住房的，有傣族的竹樓、壯族的麻欄、侗族的木干欄、黎族的船形屋、水族的木樓等。其中傣族的竹樓是以竹為主要建筑材料，每家有籬笆圍成的小院，種有芭蕉等熱帶植物，極富生趣。壯族的麻欄吸收了較多的漢族建筑手法，木材用量增加。侗族的木干欄建造工藝較高，尤其是村寨中的鼓樓及風(fēng)雨橋，顯示出驚人的木工技巧。

干欄式竹樓具有獨(dú)特的風(fēng)格，它有舒適、衛(wèi)生、防潮、防蟲(chóng)等優(yōu)點(diǎn)。傣家的竹樓正方形，分為上下兩層，上層住人，距離地面約2公尺左右，以數(shù)根木料（或用大青竹）為柱。下層無(wú)墻，用以飼養(yǎng)牲畜及堆放什物。竹樓層頂造型為歇山式，層面用草排復(fù)蓋。設(shè)有樓梯，拾級(jí)登樓，有走廊、涼臺(tái)，可以晾物和納涼。室內(nèi)用竹籬笆隔為兩間，內(nèi)間為主人臥室，外間為客室?？褪疫M(jìn)門(mén)內(nèi)有高出地面四、五寸長(zhǎng)的火塘，供烹飪?nèi)∨彰髦?。外間是接待賓客的場(chǎng)所，也是室內(nèi)活動(dòng)的中心。臥室是一大通間，男女?dāng)?shù)代同宿一室，席樓而臥，僅僅是使用黑布蚊帳，作為間隔。室內(nèi)陳設(shè)簡(jiǎn)樸，用具絕大部份為竹制品，除鍋、盆、罐外。其余桌、凳、籮、筐、飯盒等系竹篾編制而成。壁多無(wú)窗，陽(yáng)光和風(fēng)都是從這些竹片縫中透入。樓外以竹為籬笆，宅院內(nèi)長(zhǎng)著勁秀挺拔的椰子、樹(shù)干高大的柚樹(shù)、果實(shí)累累的香蕉、香甜可口的木瓜和婆娑蒼翠的竹叢。一派詩(shī)情畫(huà)意，點(diǎn)綴出濃郁的亞熱帶風(fēng)光。傣族的竹樓具有兩大優(yōu)點(diǎn)。一是竹樓能防蚊蟲(chóng)、防潮濕、防野獸。二是建蓋竹樓的材料來(lái)源方便，就地取材，比較經(jīng)濟(jì)。傣族建造竹樓使用的材料主要是大青竹和少量木料。大青竹是傣族地區(qū)的特產(chǎn)，而竹樓屋面覆蓋的草排是以當(dāng)?shù)厮L(zhǎng)的茅草編制而成，這種制草排的茅草來(lái)源廣，又很經(jīng)濟(jì)。加之傣族人民建造新房時(shí)有全寨互相幫助的習(xí)慣，一家蓋房，全村出動(dòng)，送草排，贈(zèng)送青竹，出勞力。因此，傣族人民建造新房的速度也相當(dāng)快，一幢竹樓只需一天多即可竣工。新房落成，全村老幼都前往祝賀。傣族人民喜愛(ài)的民間歌手“贊哈”，更以自己的歌聲祝賀主人遷入新居。、

第五篇：計(jì)算機(jī)網(wǎng)頁(yè)設(shè)計(jì)畢業(yè)論文（范文）

計(jì)算機(jī)網(wǎng)頁(yè)設(shè)計(jì)畢業(yè)論文

計(jì)算機(jī)網(wǎng)頁(yè)設(shè)計(jì)畢業(yè)論文

asp技術(shù)在交互式網(wǎng)頁(yè)設(shè)計(jì)中的運(yùn)用

一、asp技術(shù)簡(jiǎn)介

asp技術(shù) asp（active server pages動(dòng)態(tài)網(wǎng)頁(yè)）是微軟公司推出的一種用以取代cgi（common gateway interface通用網(wǎng)關(guān)接口）的技術(shù)。目前，internet上的許多基于windows平臺(tái)的web站點(diǎn)已開(kāi)始應(yīng)用asp來(lái)替換cgi。簡(jiǎn)單地講，asp是一個(gè)位于服務(wù)器端的腳本運(yùn)行環(huán)境，通過(guò)這種環(huán)境，用戶可以創(chuàng)建和運(yùn)行動(dòng)態(tài)的交互式web服務(wù)器應(yīng)用程序，如交互式動(dòng)態(tài)網(wǎng)頁(yè)，包括使用html表單收集和處理信息，上傳與下載等等。通常情況下，用戶通過(guò)瀏覽器看到的網(wǎng)頁(yè)大多是靜態(tài)的，目前internet 上的許多站點(diǎn)，仍然提供'靜態(tài)'（static）的主頁(yè)內(nèi)容。所謂'靜態(tài)'，指的就是站點(diǎn)的主頁(yè)內(nèi)容是'固定不變'的。當(dāng)瀏覽器通過(guò)internet 的http(hypertext transport protocol)協(xié)議，向站點(diǎn)服務(wù)器(web server)要求提供主頁(yè)的內(nèi)容時(shí)，站點(diǎn)服務(wù)器收到要求后，就傳送原已設(shè)計(jì)好的靜態(tài)的html 的文件數(shù)據(jù)給瀏覽器。一個(gè)'靜態(tài)'的站點(diǎn)，若要更新主頁(yè)的內(nèi)容，必須手動(dòng)的來(lái)更新其html的文件數(shù)據(jù)。而隨著web應(yīng)用的發(fā)展，用戶希望能夠看到根據(jù)要求而動(dòng)態(tài)生成的主頁(yè)，例如響應(yīng)用戶查詢數(shù)據(jù)庫(kù)的要求、生成報(bào)表等。當(dāng)在瀏覽器上填好表單(form)的輸入數(shù)據(jù)，以提供http要求時(shí)，可以在站點(diǎn)服務(wù)器中執(zhí)行的應(yīng)用程序，而不只是一個(gè)html 文件。

站點(diǎn)服務(wù)器收到要求執(zhí)行的應(yīng)用程序，分析表單(form)的輸入數(shù)據(jù)，將執(zhí)行的結(jié)果以html的格式傳送給瀏覽器。根據(jù)用戶請(qǐng)求生成動(dòng)態(tài)主頁(yè)的傳統(tǒng)方法有cgi、isapi等。cgi是根據(jù)瀏覽器端的http請(qǐng)求激活響應(yīng)進(jìn)程，每一個(gè)請(qǐng)求對(duì)應(yīng)一個(gè)進(jìn)程。當(dāng)同時(shí)有很多請(qǐng)求時(shí)，程序擠占系統(tǒng)資源，造成效率低下；isapi針對(duì)這一缺點(diǎn)進(jìn)行改進(jìn)，利用dll（動(dòng)態(tài)鏈接庫(kù)）技術(shù)，以線程代替進(jìn)程，提高了性能和速度，但要考慮線程的同步問(wèn)題，而且開(kāi)發(fā)步驟煩瑣。這兩種技術(shù)和另一普遍使用的開(kāi)發(fā)動(dòng)態(tài)網(wǎng)頁(yè)的技術(shù)java都還存在著另外一個(gè)問(wèn)題，那就是開(kāi)發(fā)困難，程序的開(kāi)發(fā)和html寫(xiě)作是兩個(gè)完全不同的過(guò)程，需要專(zhuān)門(mén)的程序員開(kāi)發(fā)。而較簡(jiǎn)單的開(kāi)發(fā)技術(shù)如javascript和idc(internet database connector)等功能有限，不敷使用。

asp使用的activex技術(shù)基于開(kāi)放設(shè)計(jì)環(huán)境，用戶可以自己定義和制作組件加入其中，使自己的動(dòng)態(tài)網(wǎng)頁(yè)幾乎具有無(wú)限的擴(kuò)充能力，這是傳統(tǒng)的cgi等程序所遠(yuǎn)遠(yuǎn)不及的地方。asp與常見(jiàn)的在client端實(shí)現(xiàn)動(dòng)態(tài)主頁(yè)的技術(shù)如java applet、activex control、vbscript、javascript等不同，asp中的命令和script語(yǔ)句都是由服務(wù)器來(lái)解釋執(zhí)行的，執(zhí)行結(jié)果產(chǎn)生動(dòng)態(tài)生成的web頁(yè)面并送到瀏覽器；而client端技術(shù)的script命令則是由瀏覽器來(lái)解釋執(zhí)行。由于asp是在服務(wù)器端解釋執(zhí)行，開(kāi)發(fā)者可以不必考慮瀏覽器是否支持asp；同時(shí)由于它在服務(wù)器端執(zhí)行，開(kāi)發(fā)者也不必?fù)?dān)心別人下載程序從而竊取編程邏輯。

asp通過(guò)后綴名為.asp的asp文件來(lái)實(shí)現(xiàn)，一個(gè).asp文件相當(dāng)于一個(gè)可執(zhí)行文件，因此必須放在web服務(wù)器上有可執(zhí)行權(quán)限的目錄下。當(dāng)用戶從瀏覽器輸入了.asp文件的地址后，瀏覽器就將這個(gè)url請(qǐng)求發(fā)給web server，如果web server上裝了asp，就調(diào)用asp。asp讀出相應(yīng).asp文件，解釋并執(zhí)行命令，動(dòng)態(tài)生成一個(gè)html頁(yè)面回傳web server，然后web server再把結(jié)果發(fā)送給瀏覽器。asp文件的制作和html類(lèi)似，且和html開(kāi)發(fā)集成，可以在同一個(gè)過(guò)程完成，利用asp將可以執(zhí)行的腳本嵌入到html文件中(將html文件的后綴名改為.asp)，這使得html文件的編寫(xiě)與腳本的開(kāi)發(fā)融合在一起。通過(guò)asp內(nèi)置的對(duì)象、服務(wù)器組件（server component）可以完成非常復(fù)雜的任務(wù)，而且用戶還可以自己開(kāi)發(fā)或利用別人開(kāi)發(fā)的服務(wù)器組件完成專(zhuān)門(mén)的任務(wù)。asp比較網(wǎng)關(guān)及服務(wù)器擴(kuò)展模式有著以下優(yōu)點(diǎn)：

(1)完全與html文件融合在一起；

(2)容易創(chuàng)建，不需要其它編譯、鏈接程序；

(3)面向?qū)ο蟮牟⑼ㄟ^(guò)activex server對(duì)象可擴(kuò)展。

二、電子商務(wù)數(shù)據(jù)訪問(wèn)方式

電子商務(wù)是指通過(guò)電子方式，并在網(wǎng)絡(luò)基礎(chǔ)上實(shí)現(xiàn)物資、人員過(guò)程的協(xié)調(diào)，以便商業(yè)交換的活動(dòng)。在電子商務(wù)系統(tǒng)中，web提供了與客戶進(jìn)行通信聯(lián)絡(luò)的有效手段，利用web技術(shù)，實(shí)現(xiàn)web服務(wù)器與數(shù)據(jù)庫(kù)系統(tǒng)的連接，完成對(duì)數(shù)據(jù)的處理與查詢，用戶可以通過(guò)操作簡(jiǎn)單易學(xué)的瀏

覽器來(lái)查詢處理所需要的各種數(shù)據(jù)。實(shí)現(xiàn)web服務(wù)器與數(shù)據(jù)庫(kù)的連接一般有兩種方法：一種是利用中間件技術(shù)在兩者之間建立連接和通信，如cgi(通用網(wǎng)關(guān)接口)和api(應(yīng)用程序編程接口)。

web服務(wù)器通過(guò)調(diào)用cgi程序?qū)崿F(xiàn)與web瀏覽器的交互，即cgi程序接受瀏覽器發(fā)給web服務(wù)器的信息，進(jìn)行處理后，將相應(yīng)結(jié)果再送回給web服務(wù)器，通過(guò)web服務(wù)器將信息傳送給瀏覽器。但cgi程序在響應(yīng)速度和資源利用等方面有較大局限性，客戶端每請(qǐng)求一個(gè)cgi程序，服務(wù)器端便打開(kāi)一個(gè)進(jìn)程，當(dāng)請(qǐng)求的數(shù)量較大時(shí)容易引起瓶頸現(xiàn)象，開(kāi)發(fā)人員常利用api編程來(lái)擴(kuò)展服務(wù)器功能，api程序占系統(tǒng)資源少，運(yùn)行效率較高，但它的編程較cgi程序更為復(fù)雜；另一種是由瀏覽器中的java小應(yīng)用程序(java applet)通過(guò)瀏覽器訪問(wèn)web服務(wù)器上的數(shù)據(jù)庫(kù)，利用了jdbc(java database connectivity)技術(shù)，它通過(guò)jdbc提供的api實(shí)現(xiàn)對(duì)web server的訪問(wèn)。由于java applet本身的局限性，目前大多數(shù)的應(yīng)用是基于中間件技術(shù)的。asp也是屬于中間件的一種模式，但在windows平臺(tái)上它比較網(wǎng)關(guān)及服務(wù)器擴(kuò)展模式有著較大的優(yōu)點(diǎn)。網(wǎng)關(guān)的最大特點(diǎn)是它的平臺(tái)無(wú)關(guān)性，但網(wǎng)關(guān)程序通常較難編寫(xiě)和改變。網(wǎng)關(guān)程序通常是一個(gè)獨(dú)立的程序，并不和html文件融合在一起，它需要用如c、c++、vb、perl等語(yǔ)言來(lái)編寫(xiě)?yīng)毩⒌膽?yīng)用程序，而asp應(yīng)用改變了這一點(diǎn)。使用asp不僅可以讀取access和 sql server的數(shù)據(jù)庫(kù)，而且還可以讀取其他odbc（open database connect 開(kāi)放式數(shù)據(jù)庫(kù)互聯(lián)）兼容的數(shù)據(jù)庫(kù)。

在asp中訪問(wèn)數(shù)據(jù)庫(kù)是通過(guò)ado(activex database object活動(dòng)數(shù)據(jù)對(duì)象)及事務(wù)處理語(yǔ)句來(lái)實(shí)現(xiàn)的。ado是一種操作microsoft所支持的數(shù)據(jù)庫(kù)的方法，是一項(xiàng)容易使用并且可擴(kuò)展的將數(shù)據(jù)庫(kù)訪問(wèn)添加到 web 頁(yè)的技術(shù)。ado對(duì)象的使用與dao（數(shù)據(jù)訪問(wèn)對(duì)象）、rdo（遠(yuǎn)程數(shù)據(jù)對(duì)象）的方式相似。在asp中，ado可以看作是一個(gè)服務(wù)器組件，更簡(jiǎn)單點(diǎn)說(shuō)，是一系列的對(duì)象，應(yīng)用這些功能強(qiáng)大的對(duì)象，即可輕松完成對(duì)數(shù)據(jù)庫(kù)復(fù)雜的操作。

三、asp在電子商務(wù)中的應(yīng)用

在電子商務(wù)中，對(duì)用戶而言，進(jìn)行網(wǎng)上信息查詢的目的是尋找自己需要的產(chǎn)品或服務(wù)，而對(duì)于商品或服務(wù)提供者來(lái)說(shuō)，其目的則是向用戶推銷(xiāo)自己的產(chǎn)品或服務(wù)。因此，讓用戶通過(guò)瀏覽器查詢服務(wù)器的后端數(shù)據(jù)庫(kù)是許多web服務(wù)提供者必需有的服務(wù)，asp通過(guò)內(nèi)置的adodb組件來(lái)實(shí)現(xiàn)這一功能?？梢允褂胊do去編寫(xiě)緊湊簡(jiǎn)明的腳本以便連接到odbc 兼容的數(shù)據(jù)庫(kù)和 ole db 兼容的數(shù)據(jù)源。具體的操作步驟可以歸納為以下幾步：

① 創(chuàng)建數(shù)據(jù)庫(kù)源名（dsn）adodb通過(guò)odbc工作，因此要在odbc中設(shè)置dsn（數(shù)據(jù)源名）。打開(kāi)windows的'控制面板'，雙擊'odbc'的圖標(biāo)，然后選擇'文件 dsn '的屬性頁(yè)，單擊<添加，選擇數(shù)據(jù)庫(kù)驅(qū)動(dòng)程序，然后單擊'下一步'，按照屏幕的指示鍵入數(shù)據(jù)源文件的名稱(chēng)，然后單擊'下一步'，再單擊'完成'創(chuàng)建數(shù)據(jù)源。

②創(chuàng)建數(shù)據(jù)庫(kù)鏈接 鏈接用以保持一些關(guān)于正在訪問(wèn)的數(shù)據(jù)的動(dòng)態(tài)信息，以及鏈接者信息。利用adodb的成員函數(shù)open和先前設(shè)定的dsn與數(shù)據(jù)庫(kù)連接，其語(yǔ)法如下：

setconnect=server.createobject('adodb.connection')’創(chuàng)建了鏈接對(duì)象connect。connect.open('dsn=dsnname；uid=userid；pwd=password')’打開(kāi)鏈接。dsnname為數(shù)據(jù)源名；userid為用戶名；password為用戶口令。③創(chuàng)建數(shù)據(jù)對(duì)象 ado中的數(shù)據(jù)對(duì)象通常保存的是查詢結(jié)果。recordset 是ado中最復(fù)雜的對(duì)象，有許多屬性和方法，靈活運(yùn)用，可以達(dá)到許多好的效果。其創(chuàng)建方法如下： set recordset =connect.execute(sqtstr)’創(chuàng)建并打開(kāi)了對(duì)象recordset，sqtstr是一個(gè)串，代表一條標(biāo)準(zhǔn)的sql語(yǔ)句。例如： sqlstr='select*from b1' set recordset =connect.execute(sqlstr)這條語(yǔ)句執(zhí)行后，對(duì)象recordset中就保存了b1中的所有記錄。

④操作數(shù)據(jù)庫(kù) 可利用execute方便地執(zhí)行數(shù)據(jù)的插入、修改、刪除等操作。如執(zhí)行插入操作： sqlstr='insert into b1values(1,2)' connect.execute(sqlstr)⑤關(guān)閉數(shù)據(jù)對(duì)象和鏈接 在使用了ado對(duì)象之后，一定要關(guān)閉數(shù)據(jù)對(duì)象和鏈接。在asp中通過(guò)調(diào)用方法close實(shí)現(xiàn)關(guān)閉。關(guān)閉創(chuàng)建的數(shù)據(jù)對(duì)象：record set.close set record set=nothing 關(guān)閉創(chuàng)建的鏈接對(duì)象：connect.close set connect=nothing 完整的程序片段：

//產(chǎn)生組件實(shí)例

<％

setconnect=server.createobject('adodb.connection')//連接數(shù)據(jù)庫(kù)

connect.open('dsn=dsnname;uid=userid;pwd=password')//執(zhí)行查詢

sql=select＊fromtablename setrs=connect.execute(sql)％

//顯示結(jié)果

<％dowhile not rs.eof％

<％=rs(fieldname)％ <％

rs.movenext

loop ％

上述是用asp訪問(wèn)數(shù)據(jù)庫(kù)的全過(guò)程，由于應(yīng)用面向?qū)ο笏枷?，所有操作都比較簡(jiǎn)單，用戶需要注意的僅是對(duì)數(shù)據(jù)結(jié)構(gòu)的了解、當(dāng)前所操作的對(duì)象及對(duì)象的屬性等等，只要對(duì)這些有了清晰的認(rèn)識(shí)，再加上asp強(qiáng)大功能，在網(wǎng)絡(luò)上使用數(shù)據(jù)庫(kù)，實(shí)現(xiàn)用戶與頁(yè)面間交換信息，就再也不是什么難事了。