因心而造景-關(guān)于中國風(fēng)ui的網(wǎng)頁設(shè)計論文

因心而造景——關(guān)于中國風(fēng)UI的網(wǎng)頁設(shè)計artisticconceptioninmindaboutChinesestyleonUIwebdesigning專業(yè)：姓名：指導(dǎo)教師：申請學(xué)位級別：論文提交日期：學(xué)位授予單位：摘要就目前來說中國的網(wǎng)頁設(shè)計一直趨向于歐美或者日韓風(fēng)格之間，但是中國本身是一個多民族國家。隨著時間的融合產(chǎn)生了自己在建筑、美術(shù)、飾品、服飾、文字等多個領(lǐng)域上獨特的文化，這些獨特的文化都是當(dāng)今設(shè)計師眼中不可多得的寶貴素材。歐美的設(shè)計師以簡練、嚴(yán)謹?shù)娘L(fēng)格著稱，自然在網(wǎng)站的設(shè)計上也會收到影響，歐美網(wǎng)站的網(wǎng)頁大多簡介干練并沒有多余的修飾元素；而日韓風(fēng)格網(wǎng)頁大多是采用柔和的主色調(diào)，在布局上中規(guī)中矩。相比歐美的網(wǎng)頁顯得比較淡雅。在功能上兩種風(fēng)格都比較偏向信息傳播的實用性及功能性。以上兩種網(wǎng)站風(fēng)格都各有特色，值得學(xué)習(xí)。網(wǎng)頁的設(shè)計與本民族的文化是密切相關(guān)的，國內(nèi)的網(wǎng)頁設(shè)計目前大多以中國的傳統(tǒng)文化元素為主流，當(dāng)中穿插一些歐美日韓的設(shè)計風(fēng)格。但是就目前市場上已有的網(wǎng)頁來說在展現(xiàn)中國風(fēng)格的同時又難以逃離出元素生搬硬套的怪圈。界面設(shè)計——從誕生以來很長的一段時間都沒有受到設(shè)計師過多的關(guān)注，隨著這幾年信息的飛速發(fā)展，人們對產(chǎn)品的要求也比以前高了很多，從功能到操作的界面都變得很重要，界面設(shè)計也因此受到設(shè)計師廣泛的關(guān)注。一個操作簡潔大方的主頁會給人一個很好的感官享受，縮短人與計算機的距離，為賣家創(chuàng)造無限商機，同時用戶能夠最直觀的感受到針對感官設(shè)計的魅力。本文正是對中國風(fēng)與UI設(shè)計的結(jié)合而進行設(shè)計工作本設(shè)計面向的用戶群眾是青年一代的使用者，將網(wǎng)頁的UI設(shè)計與中國風(fēng)相結(jié)合。讓用戶在日常使用中能夠更好的了解中國的傳統(tǒng)文化，全面提升用戶在瀏覽網(wǎng)站時的認知，帶來不一樣的主觀感受的體驗。當(dāng)用戶在瀏覽網(wǎng)頁時不僅僅是在瀏覽自己想要了解的信息，更能體驗到一種別樣的感受，從而帶來感官上的愉悅和滿足，使用戶感受到設(shè)計及中國傳統(tǒng)文化的魅力。關(guān)鍵詞：界面設(shè)計；交互設(shè)計；網(wǎng)頁UI；數(shù)據(jù)庫；中國風(fēng)AbstractChina'smulti-ethnicintegrationprovidesdesignerswithdiversifieddesignmaterials,includingagreatdealofarchitecture,painting,decoration,traditionalcostumes,characters,patterns,culturalrelicsandsoforth,however,alotofwebsitedesigninChinatendstoswingbetweenEuropeandKoreawebsitedesignstyle.WebsitesinEuropeandAmericaadheretothesimplicity,plainandprecisenessofmodernism,withoutflamboyantcolorsandgaudydesignelements,andhomepageoftenuselargepicturesoranimation;Koreawebsitemostlyusesawhitebackgroundcombinedwithtinge,suchassoftlightblue,lightgreen,andtranslucentinterface,thegaugemedium-rangewebsitegraphiclayout,astrongpracticabilityandfunctionalityininformationdissemination.Abovetwostylesofwebsiteshavetheirowncharacteristics,anditisworthlearning.However,websitedesignstylehasacloserelationshipwithnationalcharacter,aesthetictendencyandevenlanguages.Ofcourse,manysiteswillcarryforwardChinesestylesandnationalandtraditionalcharacteristicsinideasandstrategies,butinpracticeitisdifficulttoescapetherutofsimpleandroughideasandslavishlycopiedelement.Interfacedesign,inthelongdevelopmentofsoftware,designershavepaidnoattentiontointerfacedesignwork,infact,softwareinterfacedesignisproducts’importantbuyingpoint.Asimpleandbeautifulinterfacebringsacomfortablevisualenjoyment,narrowingthedistancebetweenpeopleandcomputers,creatingasellingpointforbusinesses,andmeanwhiletheusercandirectlyfeelthecharmofthevisualdesign.ThisarticlewilldodesignworkwiththecombinationofChinesestyleandUIdesign.user-orientedmassofmydesignareusersoftheyoungergeneration,andwebsiteUIdesignwillcombinedwithChinesestyle.Ineverydayuse,theusercanhaveabetterunderstandingoftraditionalChineseculture,toenhanceusers’cognitionwhentheybrowseawebsite,andtobringthemdifferentsubjectiveexperience.Whenauserviewsapage,heisnotonlyjusttobrowsetheinformationtheywanttoknow,butalsocanexperienceadifferentkindoffeeling,soastobringasenseofjoyandsatisfaction,andenableuserstoexperiencethecharmofdesignandtraditionalChineseculture.Keywords：Interfacedesign；interactiondesign；webUI；database；Chinesestyle前言對于中國而言，在總結(jié)、吸收并借鑒其他國家網(wǎng)站設(shè)計的基礎(chǔ)上，結(jié)合我國特有的文化是十分必要的，而中國風(fēng)的網(wǎng)站正式一種很好的表達方式。中國審美觀的獨特風(fēng)格。悠久的歷史和獨特的地形成了“多元一體”格式的不變的民族合營體。不論從民族學(xué)、社會學(xué)，還是政治學(xué)的方面來看，完整的歷史成因才會造就中國人的審美心理。中國風(fēng)是以中國傳統(tǒng)文化為根本再輔之以開埠至今所吸收的外來文化而成，是順應(yīng)世界發(fā)展趨向的產(chǎn)物。把中國風(fēng)的顯現(xiàn)情勢藝術(shù)化，在連年來特別是2008年以后，中國風(fēng)開始盛行于各個范疇。中國風(fēng)一詞來源自中國五千年的歷史進程，繼而形成具有中國特色審美的獨一無二的風(fēng)格。中華民族的大家庭經(jīng)過長期的歷史發(fā)展形成了“多元一體”格式的超穩(wěn)定的民族合營體；中國風(fēng)不僅僅是來自于華族，更有來自于中國除華族以外的民族的彼此作用的成果。不論從民族學(xué)（人類學(xué)）、社會學(xué)，還是政治學(xué)的方面來看，華族與中國其他的民族都是從兩個有差異的層次的看法，正是因為有完好無缺的歷史進程才造成了現(xiàn)在中國人特有的審美方式以至在整個中國的文化演邊歷史中都是有特殊的歷史文化原因和地區(qū)不同的因素。

中國風(fēng)即中國的風(fēng)格、在中國獨有的盛行文化。把中國風(fēng)的表現(xiàn)情勢藝術(shù)化，真正的中國風(fēng)應(yīng)該是深入到生活傍邊，是一種平淡的、內(nèi)斂的生活態(tài)度，不論是什么與中國風(fēng)相關(guān)的產(chǎn)品都是一種“展現(xiàn)”的方式，和西方的“展現(xiàn)”藝術(shù)的方式不同。特別是近年來不論是在文化還是在藝術(shù)上中國風(fēng)都掀起了一股新的風(fēng)潮。第一章緒論第一節(jié)網(wǎng)頁UI設(shè)計的背景和意義Internet發(fā)展到現(xiàn)在已經(jīng)遍布世界各個角落，將世界上不同的領(lǐng)域鏈接到一起，并且已經(jīng)成為現(xiàn)今最大的計算機網(wǎng)絡(luò)。WorldWideWeb(簡稱WWW)作為現(xiàn)在Internet上一種先進并且易于被接受的檢索信息手段，發(fā)展速度自然也是十分的迅速，互聯(lián)網(wǎng)現(xiàn)在已經(jīng)成為全球信息最全的資源庫。根據(jù)現(xiàn)有資料統(tǒng)計，已有上百萬個Web站點在Internet上完成注冊并已經(jīng)上線，其內(nèi)容范疇包含文化產(chǎn)業(yè)、科研教育、新聞消息、商業(yè)出版、貿(mào)易金融、娛樂、體育等多個范疇，也擁有著人數(shù)眾多的用戶群。由此可知web站點的建立對于一個機構(gòu)來說是至關(guān)重要的。這些年隨著計算機的發(fā)展，用戶的需求也變得越來越豐富。數(shù)據(jù)庫的出現(xiàn)滿足了用戶在很多方面的需求，此技術(shù)的出現(xiàn)Web站點服務(wù)也變得比以前更加人性化，內(nèi)容也變得更加豐富[1]。但與此同時也就出現(xiàn)了這樣的問題，在用戶點擊某網(wǎng)站的站點時一般來說只對站點中某些內(nèi)容感興趣，并且這種興趣會保持很長的時間。這個問題很好的啟發(fā)了開發(fā)者，加入能夠按照用戶的要求和喜好來設(shè)計出滿足用戶的頁面，也就是意在重點表現(xiàn)用戶所需要頁面，這將使用戶在使用時獲得一種新的感受，而且這樣的網(wǎng)頁在于與同類網(wǎng)頁的競爭中也顯得更具有吸引力?，F(xiàn)在針對這點某些大型網(wǎng)站公司已經(jīng)做出了大膽的實驗，現(xiàn)今通常所采用的方式是，在登陸時提供一些的設(shè)置網(wǎng)頁顯示的選項供用戶在登陸站點時進行選擇，方便用戶能夠根據(jù)自己的意愿進行設(shè)置用來瀏覽。但是僅僅通過登陸時讓用戶進行一些登陸設(shè)置來體現(xiàn)出一些個性化是遠遠不夠的，并且讓用戶在了解一個站點具體內(nèi)容之前讓其對站點內(nèi)容進行一些設(shè)置，結(jié)果有可能會顯得過于粗糙。于是便設(shè)想出這樣一種方案，根據(jù)用戶點擊的先后所關(guān)聯(lián)的規(guī)則，這樣，當(dāng)一個主題被用戶點擊之后，一個相關(guān)的次級頁面在系統(tǒng)中便能夠自動生成，此中包含了該主題下用戶經(jīng)常點擊的信息內(nèi)容，就能夠做出不用用戶自己做出過多的設(shè)置就能滿足用戶需求的網(wǎng)站。本文主要通過Web前端的UI設(shè)計來展現(xiàn)出中國傳統(tǒng)文化的博大精深。開發(fā)者不同，做出的網(wǎng)頁也就不同。在網(wǎng)頁UI的設(shè)計中，怎樣才能把中國傳統(tǒng)文化通過網(wǎng)也表現(xiàn)出來，也是我這次設(shè)計的主要內(nèi)容。[14]第二節(jié)相關(guān)名詞介紹HTML語言HTML5是超級文本標(biāo)記語言是標(biāo)準(zhǔn)通用標(biāo)記語言下的一個應(yīng)用，也是一種規(guī)范，一種標(biāo)準(zhǔn)，它通過標(biāo)記符號來標(biāo)記要展示的網(wǎng)頁中的各個部分。[9]其實網(wǎng)頁文件自身也是一種文本文件，通過添加標(biāo)記符在文本文件里，來告訴瀏覽器怎樣來展示文本中的內(nèi)容（如：文字如何處理，畫面如何安排，圖片如何顯示等）。瀏覽器按照文本標(biāo)記的次序來閱讀文本以顯示網(wǎng)頁，繼而依據(jù)標(biāo)記符來解釋并展示出文本標(biāo)記的信息，對文本錯誤的標(biāo)記將不指出錯誤的地方，且不會停止對文本進行執(zhí)行解釋的過程，開發(fā)者也僅能通過最后展示出來的結(jié)果以分析在哪里出錯來進行改正。但必須注意的是，根據(jù)瀏覽器內(nèi)核的不同，對相同的標(biāo)記符可能會有完全不同的解釋，因此就展現(xiàn)出不同的展示結(jié)果。[5]二、層疊樣式表CSSCSS即是層疊樣式表，是一種用來展現(xiàn)HTML（標(biāo)準(zhǔn)通用標(biāo)記語言的一個應(yīng)用）或XML（標(biāo)準(zhǔn)通用標(biāo)記語言的一個子集）等文件樣式的計算機語言。CSS能夠真正將網(wǎng)頁格局展示與網(wǎng)頁內(nèi)容信息做到分離的一種樣式設(shè)計語言。CSS相對于傳統(tǒng)HTML的表現(xiàn)方式而言能夠?qū)W(wǎng)頁中對象格局的位置排版進行很精確的位置控制，并且對于所有字體字號的樣式幾乎都支持，對網(wǎng)頁對象和模型樣式擁有強大編輯的能力，并且能夠用CSS對網(wǎng)頁進行初步的交互設(shè)計，是就目前來說基于文本展示中最優(yōu)秀的展示設(shè)計語言。[6]CSS可以憑借開發(fā)者理解能力的不同，用來簡化及優(yōu)化語言寫法，并且針對使用人群的差異，有著很強的的易讀性。CSS可以分為外部樣式表（將網(wǎng)頁鏈接到外部樣式表）和內(nèi)部樣式表（在網(wǎng)頁上穿件嵌入的樣式表）及內(nèi)聯(lián)樣式（應(yīng)用到各個網(wǎng)頁元素）三種使用方法。外部樣式表是當(dāng)樣式需要被應(yīng)用到很多頁面的時候所采用的理想選擇?？梢酝ㄟ^<linkrel=”stylesheet”type=”text/css”href=”mystyle.css”>來連接到外部文件。如圖4-1所示內(nèi)部樣式表則是當(dāng)單個文件需要特別樣式是使用內(nèi)部樣式表進行單獨定義，在head部分使用<style>標(biāo)簽定義。實現(xiàn)的功能是將當(dāng)前網(wǎng)頁內(nèi)標(biāo)簽為pic的div標(biāo)簽的圖片按特定尺寸顯示避免圖片過大溢出網(wǎng)頁內(nèi)聯(lián)樣式一般應(yīng)用在當(dāng)特殊樣式需要應(yīng)用到個別元素是，可以試用的內(nèi)聯(lián)樣式。使用內(nèi)聯(lián)央視的方法則是在相關(guān)標(biāo)簽中使用樣式屬性，可以包含任何CSS屬性。CSS和div的相互結(jié)合使用，是現(xiàn)在網(wǎng)頁設(shè)計布局的主要方法。div用來展現(xiàn)內(nèi)容，CSS則是來管理div展現(xiàn)的樣子，使內(nèi)容和變現(xiàn)變的更加合理，這樣看來CSS和div可以看作網(wǎng)頁的血與肉。[9]三、網(wǎng)頁腳本語言JavaScriptJavaScript一種直譯式的網(wǎng)頁腳本語言。內(nèi)置支持類型，是一種展示動態(tài)類型及弱類型且基于原型的計算機語言。它的解釋器被稱為JavaScript引擎，為瀏覽器的一部分，廣泛應(yīng)用于現(xiàn)今各大客戶端的腳本語言。一開始僅是在HTML（標(biāo)準(zhǔn)通用標(biāo)記語言下的一個應(yīng)用）網(wǎng)頁上來使用，以此來給HTML網(wǎng)頁增加動態(tài)功能，隨著發(fā)展現(xiàn)在被應(yīng)用途徑已經(jīng)不僅僅局限在HTML之中。[7]JS用來為網(wǎng)頁添加各式各樣的動態(tài)功能，能很好的為用戶展現(xiàn)出特殊的界面效果，通常來說JS腳本可以通過嵌入HTML之中來實現(xiàn)自身所要展示的功能，當(dāng)然也可以通過外部鏈接到網(wǎng)頁里便于管理。而且JS不依賴于操作系統(tǒng)，僅需要瀏覽器就能獲得很好的支持，目前JS已被市場上大多是瀏覽器所支持。設(shè)計中的這個墨點邊用到了JS技術(shù)，在鼠標(biāo)進行點擊標(biāo)題操作時JS對點擊做出相應(yīng)的響應(yīng)，進而展現(xiàn)出絢麗的效果。JS通過<script>標(biāo)簽來實現(xiàn)內(nèi)部和外部鏈接。四、jQuery庫jQuery是繼prototype之后又一個優(yōu)秀的庫。它是一個集成了Javascript的輕量級的js庫，它不但兼容CSS3，還兼容現(xiàn)今各種主流瀏覽器內(nèi)核（IE6.0+,FF1.5+,Safari2.0+,Opera9.0+），jQuery2.0及后續(xù)版本將不再支持IE6/7/8瀏覽器。正是jQuery的出現(xiàn)，開發(fā)者才能加方便地通過編輯HTML（標(biāo)準(zhǔn)通用標(biāo)記語言下的一個應(yīng)用）來實現(xiàn)特效，而且還能很好的提供對AJAX的支持。jQuery還有特別大的優(yōu)勢就是，它對文檔的聲明很齊全，并且各種應(yīng)用也解釋的非常詳細，同時還有很多已經(jīng)發(fā)展成熟的插件可以用來使用。jQuery可以使用戶的HTML的頁面代碼和HTML的內(nèi)容進行分離，也就是說，只需要在HTML中定義id便可插入應(yīng)用命令，省卻了在HTML中插入大量JavaScript代碼的麻煩。jQuery本身是一個能夠兼容多個瀏覽器內(nèi)核的JavaScript庫，核心是要實現(xiàn)用最少的代碼實現(xiàn)最多的功能[8]。jQuery于2006年1月最開始由美國人JohnResig在紐約的barcamp發(fā)布，之后吸引了很多全世界的JavaScript好手加入并使其更加完善，由DaveMethvin帶領(lǐng)團隊完成開發(fā)完善。發(fā)展至現(xiàn)在，jQuery已經(jīng)成為世界上最盛行的javascript庫，在全球前10000個點擊量最高的網(wǎng)站中有超過一半的網(wǎng)站在使用jQuery進行編輯來現(xiàn)動畫效果。并且jQuery是免費、開源的，使用MIT許可協(xié)議。jQuery的語法簡單，能讓網(wǎng)頁開發(fā)變得簡單化，例如在文檔的操作對象中選取DOM元素來進行編輯動畫或處理對象的事件及AJAX的使用。除此之外，jQuery還提供PI讓開發(fā)者用來編輯所需應(yīng)用。方便開發(fā)者很方便的編輯出功能更強大的動靜結(jié)合的網(wǎng)頁。[7]jQuery，顧名思義，也就是JavaScript和查詢（Query），即是輔助JavaScript開發(fā)的庫。五、div標(biāo)簽div標(biāo)簽是網(wǎng)頁布局中常用的標(biāo)簽，他可以自定義文檔中的分區(qū)，把文檔分割為獨立的，不同的部分。不但可以用作嚴(yán)格的組織工具，還能不使用任何格式與其關(guān)聯(lián)，將id或class來標(biāo)記div，標(biāo)簽變得更加有效。div是一個塊級元素，內(nèi)容可以自動的開始一個新行，換行也是div固有的唯一格式表現(xiàn)?？梢酝ㄟ^div的class或id應(yīng)用額外的樣式。div可以為文檔添加了額外的結(jié)構(gòu)。同時如果div屬于同一種元素，就可以使用class=“news”來標(biāo)識div標(biāo)簽，如果這樣做不但利于在div標(biāo)簽中添加何時的語句來描述標(biāo)簽，還可以使用樣式的方法來對div進行格式化操作。六、交互設(shè)計交互設(shè)計（英文InteractionDesign,縮寫ID)，是用來表現(xiàn)和設(shè)計人造系統(tǒng)的格局的設(shè)計范疇。它包含了兩個或多個能夠互動的個體，之間用來便于交流的內(nèi)容和結(jié)構(gòu)布局，相互配合，以便達到用戶要求的最終目的。交互設(shè)計的目的是為了努力去建立人與產(chǎn)品及服務(wù)之間的聯(lián)系的同時創(chuàng)造出產(chǎn)品與服務(wù)的意義。以“在以社會復(fù)雜性為藍本的物質(zhì)世界中融入信息技術(shù)”為中心，交互設(shè)計可以從“可用性”和“用戶體驗”兩個層面來舉行分析，存眷“以人為本”的用戶需求。交互設(shè)計的思維方法建構(gòu)于工業(yè)設(shè)計以用戶為中心的方法，同時加以發(fā)展，更多地面向行為和過程，把產(chǎn)品看作一個事件，強調(diào)過程性思考的能力，流程圖與狀態(tài)轉(zhuǎn)換圖和故事板等成為重要設(shè)計表現(xiàn)手段，但更主要的還是要掌握軟件與硬件之間所實現(xiàn)的技巧及評估方式。交互設(shè)計是用來展是人與機械之間交流的界面。交互設(shè)計在二十世紀(jì)八十年代作為一門以交互體驗為主的新學(xué)科誕生了，它是由比爾·摩格理吉（BillMoggridge）在1984年的一次以設(shè)計為主的交流會議上提出來的，他一開始以“軟面（SoftFace）”來命名，因為這個名字很容易讓人想起當(dāng)時正流行的一種玩具“椰菜娃娃（CabbagePatchdoll）”，所以后來他就更名為“InteractionDesign”，即為現(xiàn)在所說的交互設(shè)計。[8]第三節(jié)創(chuàng)意來源自1840年鴉片戰(zhàn)爭被大炮打開國門以來，國人面對歐美事物之時總是會有種潛在的自卑感。中國是一個有著深厚歷史積淀的文明古國，有著自己獨特的文字、服飾、美術(shù)這些都是設(shè)計師眼中不可多得的素材。歐美的設(shè)計師以簡練、嚴(yán)謹?shù)娘L(fēng)格著稱，自然在網(wǎng)站的設(shè)計上也會收到影響，歐美網(wǎng)站的網(wǎng)頁大多簡介干練并沒有多余的修飾元素；而日韓風(fēng)格網(wǎng)頁大多是采用柔和的主色調(diào)，在布局上中規(guī)中矩。相比歐美的網(wǎng)頁顯得比較淡雅。在功能上兩種風(fēng)格都比較偏向信息傳播的實用性及功能性。以上兩種網(wǎng)站風(fēng)格都各有特色，值得學(xué)習(xí)。網(wǎng)頁的設(shè)計與本民族的文化是密切相關(guān)的，國內(nèi)的網(wǎng)頁設(shè)計目前大多以中國的傳統(tǒng)文化元素為主流，其中穿插一些歐美日韓的設(shè)計風(fēng)格。但是就目前市場上已有的網(wǎng)頁來說在展現(xiàn)中國風(fēng)格的同時又難以逃離出元素生搬硬套的怪圈。[10]中華民族的傳統(tǒng)文化積厚流光，中國的傳統(tǒng)文化歷史悠久，并且在繪畫的思維方式和表現(xiàn)手法上，無不真切的反映出對自然、社會、政治、品德、藝術(shù)獨特的理解。繼承傳統(tǒng)文化，并且將其推向世界，也是每個中國人心中所想。在科學(xué)飛速發(fā)展的今天，互聯(lián)網(wǎng)已經(jīng)成為人獲取信息的最主要手段之一。[13]而能引起用戶注意的則是出色的視覺效果、豐富的信息量、使用起來方便快捷的網(wǎng)頁，這就顯示出網(wǎng)頁設(shè)計是及其重要的。隨著社會時代不斷的發(fā)展，網(wǎng)絡(luò)已逐漸變成人們、發(fā)布、快速獲取和信息傳播的首要途徑，它在人們思想、工作、日常生活等各個領(lǐng)域都有著至關(guān)重要的作用。瀏覽網(wǎng)頁是用戶獲取信息的主要途徑，由此網(wǎng)頁的樣式也陪伴著網(wǎng)絡(luò)的迅速發(fā)展而變得至關(guān)重要，網(wǎng)頁的UI設(shè)計也隨之快速鼓起。由于人們?nèi)粘Ｊ褂镁W(wǎng)絡(luò)的次數(shù)日益增加，網(wǎng)頁UI設(shè)計也就變得至關(guān)重要。而網(wǎng)頁UI最重要的便是結(jié)構(gòu)的布局，其功能主要就是要按照一種根據(jù)用戶的想法而定的方式展現(xiàn)給每個用戶，更加方便的讓用戶能夠快速的認識所瀏覽的網(wǎng)頁包含的內(nèi)容。中國有句古話叫，“一方水土養(yǎng)一方人”不同的地區(qū)所流傳的文化是不同的。大到歷史傳統(tǒng)，風(fēng)土人情；小到“鄉(xiāng)音難改”。從分析中國語西方的設(shè)計差異及文化的融合得知，可以得出最重要就是弄明白中國與西方設(shè)計文化中區(qū)域的差異。在地理位置上，社會上普遍認為，中國文化即是指擁有中國獨有的傳統(tǒng)文化，而西方文化指的是以西方文明為藍本的文化。[11]同樣在相同文化的設(shè)計上，文化的差異更是因為地域的差異、時空的差異而形成了中國與西方文化極大的差異性。第二章設(shè)計流程第一節(jié)設(shè)計背景中國人有著自己深厚的傳統(tǒng)文化底蘊，從古至今在文化上已經(jīng)形成了一套屬于自己的體系，植根于充滿內(nèi)涵的東方文化。但當(dāng)前世界的文化有一個特征，一方面是文化的趨同，另一方面是提倡個性的覺醒和對特性的需要和追求，兩者是相互關(guān)聯(lián)的。文化的趨同從某個方面來說是必然的，總體來說是積極的。但是這種趨同的現(xiàn)象，其實并不是各國文化簡單糅合到一起的結(jié)果，而是以某些富有地區(qū)為中心的，這些地區(qū)的知識、技能等方面占統(tǒng)治的地位。這種統(tǒng)一，雖然可以促進符合東西的融合，破壞抵制的東西，但是在這種大潮流的文化下，卻也導(dǎo)致了中國傳統(tǒng)的文化在整體上收到了不同成都的外來文化侵蝕。隨著現(xiàn)在許多大同小異的風(fēng)格開始在國內(nèi)迅速增多，全球化的影響慢慢已經(jīng)對當(dāng)今的設(shè)計風(fēng)格產(chǎn)生了很大的影響。另一方面隨著城市化的成長，人們的生活節(jié)奏也不停的加速。當(dāng)今年輕人對審美的要求也變得日新月異。從二十一世紀(jì)開始，人類便邁入了“信息爆炸時代”，各種形式都可以成為信息的傳播方式。尤其是Internet的興起，讓信息之間的交流達到了新的高度。道瓊斯高級副總裁賀開宇在國際廣告大會上曾說過“在中國，我能真切的感受到這里信息的爆炸，伴隨著新世紀(jì)的到來，人們在展示自己的同時也獲得了新的選擇。”這不僅僅代表著人們可以獲得新的選擇機會，網(wǎng)頁設(shè)計也是一樣。在這樣一個信息爆炸的年代，我們每天都會接收到海量的信息，瀏覽web已經(jīng)成了日常生活中必不可少的一部分。見得多，思考的也就多，進而創(chuàng)新的想法就更多，思維自然也會隨之更加活躍。[15]目前隨著民族意識的復(fù)興，社會上掀起了中國風(fēng)的浪潮。隨著發(fā)展國人變得自信，自身民族的意識也不斷覺醒，民族意識的覺醒也迫使了設(shè)計師在設(shè)計中大量投入包含“中國風(fēng)”的元素。[12]此設(shè)計正是在這樣的背景下設(shè)計出來的。第二節(jié)面向?qū)ο笤O(shè)計一個網(wǎng)頁UI，使用戶面對網(wǎng)頁的瀏覽變得不再枯燥乏味。隨著信息的飛速發(fā)展，網(wǎng)絡(luò)與人們的生活已經(jīng)變得密不可分。因特網(wǎng)的出現(xiàn)更是加快了世界各地之間的交流，在這個大環(huán)境下，年輕人接受新鮮事物遠遠要比上年紀(jì)的人容易的多。通過因特網(wǎng)中國的年輕人可以和其他地方的年輕人聯(lián)系，可以了解到最新的潮流，這對于年輕人來說是特別有吸引力的。根據(jù)2013年、2014年兩年的網(wǎng)民年齡調(diào)查顯示，年輕人是目前因特網(wǎng)使用的主力軍,如圖2-1所示。圖2-1網(wǎng)民年齡構(gòu)成比例圖通過圖2-1可以得出20歲—39歲的年輕用戶，更喜愛在日常生活中瀏覽網(wǎng)頁，對于網(wǎng)絡(luò)產(chǎn)品需要也更多，因此設(shè)計風(fēng)格更偏向年輕人。第三節(jié)設(shè)計思路網(wǎng)絡(luò)在為人們提供所需要的信息同時，用戶對網(wǎng)絡(luò)功能的要求自然也是越來越多，對于界面的要求也從功能慢慢變得要美觀。在視覺享受上、用戶交互的需求也變得與日俱增。設(shè)計主色調(diào)采用黑白結(jié)合，意在體現(xiàn)中國傳統(tǒng)的太極陰陽調(diào)和思想，太極意指時間萬物皆可分為陰和陽，以及表與里的兩面。而且它們之間的斗爭既是相互對立的優(yōu)勢相互依存的，這也是世界的定律，同時也是許多事物的主題和源頭[12]。過多的色彩反而可能會引起用戶的審美疲勞，相反簡單明了色彩可以讓人一眼明了，更加直白的看到網(wǎng)頁所展示的內(nèi)容。背景圖運用了中國繪畫中的傳統(tǒng)的白描技法，用單色的墨線勾勒出形象，不藻修飾與渲染烘托，寥寥數(shù)筆準(zhǔn)確精煉的表達出想要展示的效果。內(nèi)容的題材則是選用了更偏向年輕人審美觀的畫，沒有選用中國畫中傳統(tǒng)的表現(xiàn)方式。隨著時代的發(fā)展，人們對美的要求也在不斷變化，在歷史的長河中中國一直以獨特的東方魅力影響著世界。中國的審美也是與歐美等國家有著很大的區(qū)別，但是近些年隨著網(wǎng)絡(luò)不斷發(fā)展，大量的外來文化也在潛移默化的影響著中國的審美。這次采用的背景圖也正是結(jié)合了外來審美與中國的審美而繪制的，意圖給用戶帶來一種新的感覺。以求一種耳目以新的感覺。設(shè)計的主要字體使用了中國傳統(tǒng)的隸書，隸書是中國現(xiàn)代漢字的雛形，起源于秦代興于東漢，有著深厚的歷史積淀和文化底蘊。隸書端莊典雅大方，對中國書法的影響有著不可小覷的作用。主頁面的設(shè)計如圖2-2所示：圖2-2主頁面設(shè)計圖首頁標(biāo)題為瀏覽菜單，可以方便用戶的更好的了解網(wǎng)站的所含的能容并且能快速的找到自己感興趣的網(wǎng)頁，如圖2-3所示:圖2-3首頁標(biāo)題圖標(biāo)題背景為水墨渲染，體現(xiàn)出中國傳統(tǒng)的水墨文化，右側(cè)則是網(wǎng)站的主要板塊標(biāo)題，想用戶展示網(wǎng)站中主要模塊的內(nèi)容，點開模塊菜單會出現(xiàn)一個下拉菜單，進一步向用戶展示模塊內(nèi)的子頁面如圖2-4所示：圖2-4子頁面圖下拉菜單中包含了模塊子內(nèi)容，再點擊鏈接即可快速鏈接到子網(wǎng)頁上，方便用戶查找。內(nèi)容部分的排版運用了縱向排版的方法，古人自上而下書寫，體現(xiàn)了尊卑的思想，標(biāo)題欄下則是首頁的主體內(nèi)容，采用了“三分天下”的布局，用戶首先看到的是網(wǎng)站的標(biāo)題名字，標(biāo)題背景則是一朵盛開的蓮花。中國人自古愛蓮，古人更有愛蓮說之名篇，傳誦至今--“出淤泥而不染，濯清漣而不妖”。這也正是我國傳統(tǒng)文化中所提倡的高潔的品質(zhì)，也間接的體現(xiàn)出中國的傳統(tǒng)美德。緊隨標(biāo)題的是上下兩層的瀏覽界面，上面一層是實時信息的瀏覽，為用戶推送第一時間的信息。具體內(nèi)容分為六個標(biāo)題，分別為信、文、示、訊、友、賞，分別表示新聞、文章、公告、資訊、同城、鑒賞六個模塊，點擊小標(biāo)題時還會出現(xiàn)在標(biāo)題上出現(xiàn)墨痕，如同一根沾滿墨汁的毛筆點過一樣，給人一種灑脫快意的感覺。同時書法也是我國的國粹，在標(biāo)題中加入書法元素，不但能夠從側(cè)面表現(xiàn)出書法的魅力，同時也有于在年輕人瀏覽網(wǎng)頁時能激起其對中國書法的興趣，將書法藝術(shù)延續(xù)下去。下層則是網(wǎng)站各個模塊的大標(biāo)題，分類展示，整齊劃一。如圖2-5所示圖2-5模塊標(biāo)題圖標(biāo)題效果也同樣用了書法的效果。不過這次不是用筆點了一下，而是用筆快速寫下的一筆，收筆出墨跡已呈現(xiàn)出干竭之勢，大有一種不拘一格灑脫的氣勢，與上一層的點一筆形成鮮明的對比。首頁的背景圖怎是采用了一位眼神有些哀怨、惆悵的古典美人臥在荷塘之中的場景。全圖只略施顏色在蓮花尖及美人嘴唇之處略加紅色，眨眼看去有些憂傷。之沒有選擇過多上色的背景圖，是因為一千個人心中，有一千個哈姆雷特，每個人的想法是不同的。心里對美的理解也是不一樣的，古語：“因心而造境”看似簡單的一句話，卻蘊含著深厚的哲理。就像一抹風(fēng)景，不同的心境會有不同的意境?，F(xiàn)實中人們可能對生活狀態(tài)不滿，一山望著一山高，卻往往忽視了身邊的快樂。沒有過多上色的背景圖在不同人眼中也有不一樣的畫面，可能會想象出絢麗的顏色，也可能會想到壓抑不樂，圖中內(nèi)容，一位在荷塘潛臥的古典美女，“窈窕淑女，君子好逑”中國人自古對美女的向往是很狂熱的，然而又有多少英雄豪杰是在美女的石榴裙下折腰。這也引人深思，用這個背景我想向用戶展現(xiàn)出意境有心而生，同時面對美女的之前也要有一個心中的“境”。首頁的下方是一個視頻展示的模塊，用比較直接的方式向用戶展現(xiàn)出中國文化的魅力。視頻播放器能對視頻進行暫停全屏播放快進快退的一系列操作。二級網(wǎng)頁總體布局如圖2-6所示圖2-6二級頁面圖左側(cè)是采用了從左至右的排版順序，古人左為上，右為下以左為尊。左邊是導(dǎo)航欄，右邊則是顯示網(wǎng)頁內(nèi)容。點擊標(biāo)題下連接則會進入下一層主頁面對用戶想要瀏覽的內(nèi)容進行詳細的介紹。第三章設(shè)計實施—網(wǎng)頁開發(fā)環(huán)境概述第一節(jié)網(wǎng)頁開發(fā)的環(huán)境計算機的開發(fā)環(huán)境是微軟公司的windows10，瀏覽器內(nèi)核是系統(tǒng)自帶的IE11。Windows系統(tǒng)是現(xiàn)在市面上的主流系統(tǒng)之一，由微軟公司開發(fā)有著很好的兼容性和開發(fā)環(huán)境。測試所用瀏覽器是Windows自帶的IE11瀏覽器，IE內(nèi)核是現(xiàn)在市場上的主流瀏覽器內(nèi)核之一，在不同的瀏覽器內(nèi)核之間，同樣的HTML語言顯示出來的效果會有一些差距，有的可能還會無法正常的顯示。面對這些情況自然就要針對不同的瀏覽器進行調(diào)試和個別代碼的編寫。本網(wǎng)站設(shè)計所采用的主要語言是HTML5，為了能夠更好的展示網(wǎng)站的效果在分類瀏覽處和論壇處加入了基于JSP技術(shù)的一些內(nèi)容。所以運行本網(wǎng)站，計算機要在裝載Java的jdk的，并進行環(huán)境變量的設(shè)置。在計算機上安裝JSP引擎，tomcat服務(wù)器。當(dāng)然計算機上也要裝有瀏覽器，本次所用的IE內(nèi)核的瀏覽器。[2]第二節(jié)網(wǎng)頁設(shè)計工具notepad++本次設(shè)計主要使用的開發(fā)工具是notepad++，作為WINDOWS中的“記事本”程序。Notepad++在WINDOWS下可以很好的完成文本編輯。并且大小與Windows寫字板的文字編輯功能相當(dāng)。不但運行起來方便，軟件本身所占的內(nèi)存也小、軟件所占資源也不大，而且還支持很多程序開發(fā)語言，例如C++、C#、Java等主流開發(fā)語言；支持HTML、XML、ASP，Perl、Python、JavaScript等網(wǎng)頁/腳本語言。并且Notepad++做為眾多程序員最喜愛的開發(fā)工具之一，像語法著重顯示，語句折疊，宏等開發(fā)工具常用的功能一個都不少。本設(shè)計中的HTML、JavaScript、CSS的編寫都是在notepad++中完成的。第三節(jié)圖像設(shè)計工具Photoshop和Sai設(shè)計中的圖片美化是由Adobe公司開發(fā)的Photoshop來完成的。通過DTP和圖像軟件的結(jié)合，讓設(shè)計師可以直接在電腦上直接完成對圖像處理的全過程，開創(chuàng)了一個以“電腦平面設(shè)計”為主的時代。Photoshop的專長在于圖像處理，而不是圖形創(chuàng)作。圖像處理是指對已有的數(shù)字圖像進行不同程度的加工處理來達到要求的效果，可以看出其重點實在對數(shù)字圖像的處理加工；而圖形創(chuàng)作則是要是根據(jù)設(shè)計者的思想來進行從零到有創(chuàng)作。繪制圖稿的工作則是由日本SYSTEMAX公司制作的Sai來完成。Sai的操作簡便，繪制的線條流暢，繪制圖形比Photoshop要顯得人性化許多，可以進行任意旋轉(zhuǎn)、反轉(zhuǎn)畫布，在進行縮放時顯示效果可以反鋸齒。Sai還擁有強大的墨線功能，手抖修正功能，有效的解決了用數(shù)位板進行繪圖師最大的問題。Sai還擁有矢量化的鋼筆圖層，能畫出流暢的曲線，在繪制線稿上市一款很棒的繪圖軟件。第四節(jié)網(wǎng)頁設(shè)計總體規(guī)劃制作網(wǎng)頁的步驟首先確定網(wǎng)頁主題，然后查閱相關(guān)背景資料，再結(jié)合自己所學(xué)的知識確定網(wǎng)頁應(yīng)有的特色，進而設(shè)計出初步外觀第一步制定草圖，在Sai中設(shè)計出網(wǎng)頁的初始稿樣，方便制作網(wǎng)頁的大體框架，初始設(shè)計如圖3-1所示：圖3-1初步設(shè)計草圖設(shè)計好大體輪廓以后便開始設(shè)計。目錄層次結(jié)構(gòu)如圖3-2所示：圖3-2目錄層次結(jié)構(gòu)圖完成這些之后就開始著手網(wǎng)頁的制作，首先進行主頁的編輯根據(jù)設(shè)計的草圖，主頁可以大致分為三個大的div板塊，所以先編輯三個div并進行class的命名。最上方的div為標(biāo)題菜單，下一層為首頁菜單，最下一層為視頻播放器的div。接下來再在首頁菜單div內(nèi)添加三個div作用標(biāo)題分別為網(wǎng)頁標(biāo)題，新聞板塊，網(wǎng)站的次級網(wǎng)頁鏈接板塊。其中在新聞板塊內(nèi)，因為設(shè)計成可以翻動的設(shè)置，所以在新聞板塊的div中還要在加入新聞分類板塊的div數(shù)，在新聞板塊上方在編輯一個div框用來添加標(biāo)題，新聞之間標(biāo)題用<li>標(biāo)簽來進行分割。主標(biāo)題div內(nèi)添加兩個div標(biāo)簽一個用來填寫標(biāo)題，一個用來添加標(biāo)題背景圖。做完這些之后主頁的div框基本完成。div框編輯完成之后開始運用CSS來進行修飾。首先對class為主標(biāo)題的div大小進行編輯，主標(biāo)題內(nèi)的標(biāo)題兩個div寬度設(shè)置為一致，位置設(shè)置成偏左這樣就會顯示出左側(cè)顯示標(biāo)題的效果。接下來設(shè)置div的高度，兩個div的高度相加總和為最上方div的高度，接下來開始設(shè)置新聞模塊的div，新聞標(biāo)題的div與內(nèi)容的div寬度為一致，并且新聞標(biāo)題的div與主標(biāo)題的div寬度相加為首頁菜單的總和，同理對網(wǎng)站次級網(wǎng)頁鏈接的板塊進行同樣的編輯完成這些之后便可以看到設(shè)計草圖中的初步效果，不過此時的新聞瀏覽還是一個列表，不能進行分頁瀏覽。完成div和CSS的布局編輯之后便開始添加JS語句來進行修飾，首先對新聞列表進行編輯，從外部鏈接jQuery-1.8.3.min來進行修飾，通過定義div的位置來講新聞列表的div進行重疊。然后不同的模塊對應(yīng)不同的列表內(nèi)容，點擊標(biāo)題相應(yīng)的div便會顯示。接下來開始對標(biāo)題菜單的div進行編輯。根據(jù)圖4-2目錄層次圖標(biāo)，標(biāo)題菜單div可以分為六個大塊分別為：主頁，墨燭剪影，丹青妙筆，青史長存，評說天下，青梅煮酒。其中主頁用于來鏈接次級網(wǎng)頁與主頁之間的快速導(dǎo)航，其他五個模塊對網(wǎng)頁的次級網(wǎng)頁進行快速導(dǎo)航。編輯好這些，開始對除了首頁div之外的五個div進行子菜單div添加。添加完div之后便開始進行CSS的修飾這些div的寬度都設(shè)置成一個寬度，出了首頁之外的五個div模塊都有一個下拉菜單功能。這需要在這五個div模塊中添加一個內(nèi)嵌JS通過隱藏次級網(wǎng)頁的div，點擊時會顯示出隱藏的div表單的來實現(xiàn)菜單的下拉效果。之后開始對表單的CSS進行編輯完成這些之后首頁的div標(biāo)簽設(shè)置已經(jīng)完畢，在瀏覽器中打開，可以看到首頁的框架已經(jīng)初步完成接下來便是通過jQuery來進行編輯。jQuery是一個控制器的集合體，通過從網(wǎng)頁中少量的函數(shù)來定義jQuery控制器的id、屬性以及調(diào)用域來是現(xiàn)實所實現(xiàn)所需要的功能。先將時間進行移動到一個位置進行展示，定義點擊事件時，<li>標(biāo)簽對應(yīng)的元素就會進行移動，來進行顯隱控制，之后再通過class來傳到當(dāng)前變量時間，來達到txt文本的移動，接下來定義當(dāng)前變量顯示在主頁，這樣就會出現(xiàn)點擊效果。要完成翻頁效果還要進行循環(huán)定義，當(dāng)?shù)诙€事件被點擊時原本的class便會被走，循環(huán)選擇當(dāng)前變量，這樣就會實現(xiàn)翻頁的動畫效果。然后開始對視頻模塊div進行編輯視頻的添加使用的是html中的video標(biāo)簽來進行編輯的。通過標(biāo)簽來調(diào)用瀏覽器中自帶的播放器以完成視頻播放。完成這些之后便可以將網(wǎng)頁導(dǎo)入eclipse中，來完成論壇功能和新聞列表連接數(shù)據(jù)庫進行顯示的功能。將編輯好的HTML格式改為jsp格式，打開內(nèi)容為論壇的子網(wǎng)頁添加數(shù)據(jù)庫的鏈接代碼，然后再創(chuàng)建一個Java文件來定義連接數(shù)據(jù)庫，讀取數(shù)據(jù)庫，顯示數(shù)據(jù)庫內(nèi)容的類。打開內(nèi)容為論壇主頁的網(wǎng)頁添加新聞列表接入數(shù)據(jù)庫代碼，然后創(chuàng)建Java文件進行類的創(chuàng)建。實現(xiàn)新聞列表讀取數(shù)據(jù)庫內(nèi)容，通過數(shù)據(jù)庫來管理新聞內(nèi)容。[4]此外還要給網(wǎng)頁中填入各種元素來完善網(wǎng)頁。二、網(wǎng)頁包含元素的制作不論是作為第一次設(shè)計網(wǎng)頁的新手開發(fā)者，還是作為一個資深的開發(fā)者，在最開始都必須從了解構(gòu)成網(wǎng)頁的基本元素開始。通過了解網(wǎng)頁的基本元素，才可以在后續(xù)的設(shè)計和編輯中做到手到擒來，依據(jù)用戶的需求經(jīng)過編輯來達到最后的目標(biāo)，最后完成網(wǎng)頁的設(shè)計。信息的展示是網(wǎng)頁所要展示的主要內(nèi)容之一。網(wǎng)頁是由包含信息內(nèi)容的文本和與之相匹配的圖像兩個基本部分組成的，網(wǎng)頁之間最主要的是超級鏈接，恰是通過超級鏈接才可以將萬維網(wǎng)中多個網(wǎng)頁鏈接到一塊，加入不是通過超級鏈接，網(wǎng)頁自然也就成了擺設(shè)了，此外多種信息的組合及展示方法，以及人與機械之間的交互的元素都在網(wǎng)頁中有著無法替代的地位。本網(wǎng)頁中包含的元素如下文本文本一直以來都是人類用來展示信息的重要方式之一，當(dāng)然網(wǎng)頁中的主要內(nèi)容也是文本信息，與圖像比起來，雖然圖片比文字更能給用戶瀏覽時提供更好的視覺享受，但是想要準(zhǔn)確的展示出內(nèi)容消息還是文本更好一點，為了更好的展示出網(wǎng)頁的文本內(nèi)容，開發(fā)者給予了文本新的屬性而不是普通的中規(guī)中矩的字體，在網(wǎng)頁中字體可大可小，顏色也是可以隨意變換，還能加上底邊和邊框加強重點信息顯示，通過這些讓網(wǎng)頁變得更加絢麗多彩配合圖片能更好的展示出文本內(nèi)容。因此開發(fā)者在網(wǎng)頁設(shè)計可以通過各式各樣的文字圖片來清晰的展示給使用者，無疑這些功能的使用賦予了網(wǎng)頁一個新的生命。本次網(wǎng)頁中的文本內(nèi)容是通過書籍查找，及互聯(lián)網(wǎng)摘查來完成的。文本的字體采用了隸書來書寫，運用<font>標(biāo)簽來進行實現(xiàn)的，通過來定義CSS的屬性達到字體的變換。主標(biāo)題的投影效果也是用CSS來完成的，text-shadow屬性可以用于創(chuàng)建投影字，投影指的是比文本顏色更暗的版本，它位于文本的后方并略有偏移。該屬性還可以通過添加亮度比文本稍高的陰影來創(chuàng)建浮雕效果。由于創(chuàng)建投影需要指定三個長度值和一種顏色，因此該屬性的值比較復(fù)雜。第一個長度值表明一個陰影向左或向右延伸的距離，第二個長度值表示陰影向左或向右延伸的距離，第三個長度值為可選項用于指定投影的模糊程度，最后來設(shè)置投影的顏色值。目前text-shadow屬性的使用非常流行，但是內(nèi)核老舊的瀏覽器還無法支持該屬性。文本之間的間距也是使用CSS來完成的，使用letter-spacing和word-spacing屬性來完成。屬性的值由em值來指定，而且所指定的值會加到字體默認單詞間距上，單詞默認的間距是由字型設(shè)定的，當(dāng)字型是粗體時增加字體之間的間距可以提高文本的閱讀性。圖像圖像在網(wǎng)頁中既可以展示作品也可以用來表達信息，當(dāng)然最主要的還是起到裝飾作用，很好的展現(xiàn)出網(wǎng)頁想要展示的風(fēng)格。開發(fā)者可以降jpg、gif、png三種圖像的文件格式添加到網(wǎng)頁中，當(dāng)中使用最多的便是動態(tài)的GIF圖和JPEG圖片這兩種圖片。本網(wǎng)頁中所用的背景圖都是原創(chuàng)采用Sai軟件來進行繪制，并使用PS來進行修飾編輯。繪制主頁背景圖時先創(chuàng)建圖層1繪制一個草圖結(jié)構(gòu)，然后創(chuàng)建圖層2覆蓋在圖層1上將圖層2透明度調(diào)至50%，選用毛筆筆刷進行人物身體線稿繪制。再創(chuàng)建圖層3覆蓋在圖層2上繪制人物的頭發(fā)，創(chuàng)建圖層4繪制人物眼睛，創(chuàng)建圖層5繪制人物鼻子，創(chuàng)建圖層6繪制人物嘴巴，創(chuàng)建圖層7繪制背景圖，多個圖層來進行繪制可以更加便利的調(diào)整人物的造型，便于修改完成繪圖后將圖層合并成一個圖層，保存成jpg格式運用background屬性編輯成網(wǎng)頁背景圖。如圖3-3所示圖3-3背景圖繪制截圖繪制次網(wǎng)頁背景圖是選用值筆筆刷來進行繪制，值筆筆刷可以模仿出水墨畫中潑墨的質(zhì)感。水面的漸變色則是使用水彩筆刷，先用濃色的筆刷畫出顏色重的地方，然后再用水彩筆刷向顏色淺的地方擦就能穿線水墨畫中濃淡漸變的感覺了。繪制玩這些圖片之后還需要用photoshop來進行圖片美化，在photoshop中打開圖片對其進行濾鏡，顏色的美化。完成上述工作之后便可以將圖片插入到網(wǎng)頁之中來修飾網(wǎng)頁，加深網(wǎng)頁的主題。（三）超級鏈接互聯(lián)網(wǎng)能夠快速流行起來與超級鏈接技術(shù)的普及是密不可分的，它可以把一個網(wǎng)頁鏈接到另一個網(wǎng)頁，網(wǎng)頁可以指向其他網(wǎng)頁也可以在同一網(wǎng)頁上的其他位置，這個連接通常是連接到其他網(wǎng)頁，當(dāng)然也可以連接圖片或者郵件地址或者本地文件程序。文本通常是超級鏈接的載體，圖片或圖片中的區(qū)域也可以成為載點，也可以連接到特定的腳本程序。當(dāng)使用者點擊超級鏈接時，其所鏈接的網(wǎng)頁便會展示給使用者。不同的網(wǎng)頁用不同的方式來完成鏈接，比如，當(dāng)一個包含視頻文件的超級鏈接被用戶點擊以后，便會鏈接到媒體播放軟件進行打開當(dāng)然如果連接指向了一個網(wǎng)頁然后這個網(wǎng)頁就會展現(xiàn)在使用者面前。表格網(wǎng)頁展示信息的布局方式是用網(wǎng)頁里的表格來完成的。這包括兩方面：一是使用行和列來編輯展示出文本及圖像數(shù)據(jù)；二是還可以使用表格來精系規(guī)劃。本網(wǎng)頁中首頁與次級網(wǎng)頁之間的鏈接通過超級鏈接來完成。將所要鏈接網(wǎng)頁的地址填寫在<a>標(biāo)簽中，運用html中的href屬性來完成鏈接已達到網(wǎng)頁之間的關(guān)聯(lián)。三、網(wǎng)頁設(shè)計主要代碼展示網(wǎng)頁設(shè)計先進行div標(biāo)簽的搭建首頁主要代碼如下所示：<divclass="header"><!--header-title開始--><divclass="header-title"><h1><fontstyle="font-family:'隸書';">國風(fēng)</font></h1><imgsrc="./images/logo.png"></div><!--header-title結(jié)束--><!--header-content開始--><divclass="header-content"><!--header-content-menu開始--><divclass="header-content-menu"><divclass="header-content-menu-li"></div><divclass="header-content-text"style="hieght:300px;scroll-y:true;"><%StringnewsType=(String)request.getAttribute("newsType");%><inputtype="hidden"id="newsType"value="<%=newsType%>"/><ul><%List<News>newsList=(List<News>)request.getAttribute("newsList");Newsnews=newNews();for(inti=0;i<newsList.size();i++){news=(News)newsList.get(i);%><li><fontstyle="font-family:'隸書';"><%=news.getNewsName()%></font><spanclass="time"><%=news.getNewsCreateDate()%></span></li><%}</div>以上是主頁的主要代碼顯示主要展示了首頁框架div的標(biāo)簽布局。標(biāo)題目錄編輯div如下：%></ul><divclass="header-content-title"><ul><ahref="sub.jsp"><liclass="tilte-select"><divclass="text"><fontstyle="font-family:'隸書';">墨燭剪影</font></div></li></a><ahref="sub.jsp"><li><divclass="text"><fontstyle="font-family:'隸書';">丹青妙筆</font></div></li></a><ahref="sub.jsp"><li><divclass="text"><fontstyle="font-family:'隸書';">青史長存</font></div></li></a><ahref="sub.jsp"><li><divclass="text"><fontstyle="font-family:'隸書';">評說天下</font></div></li></a><ahref="book.html?arg=3"><li><divclass="text"><fontstyle="font-family:'隸書';">煮酒青梅</font></div></li></a></ul></div><divclass="toutiao"><divclass="container1min-width"><divclass="container2min-width"><divclass="header1"><divclass="header_nav"style="background:url(images/biaoti.jpg);"><divclass="header_nav_contain"><divclass="top-nav"></div><divclass="top-navtop-nav-spc"></div><divclass="top-nav"><divclass="top-nav-main"></div><divclass="top-nav-second"></div></div><divclass="top-nav"><divclass="top-nav-main"></div><divclass="top-nav-second"></div></div>以上是標(biāo)題菜單的div標(biāo)簽格局代碼。標(biāo)題下拉菜單div如下所示：<divclass="top-nav-second"><divid="alert_win"style="display:none;"><divid="mask"style="top:0;left:0;position:absolute;z-index:1000;"class="bg"></div><DIVclass=beian_winBGid=beian_popup><divid="divOneStep"style="z-index:1002;width:98%;height:520px;position:absolute;border:#6666662pxsolid;"><divstyle="width:100%;height:20px;border-bottom:#0000ff2pxsolid;text-align:right;"><ahref="javascript:;"onClick="alert_win.style.display='none';">點擊關(guān)閉</a> </div><div><iframewidth="100%"height="500px"frameborder="0"scrolling="auto"src="../html/bgmusic.html"></iframe></div></div><divstyle="z-index:1001;position:absolute;width:100%;"><iframeid="frmOneStep"width="100%"height="200px"frameborder="0"scrolling="no"src="about:blank"></iframe></div></DIV></div>以上是標(biāo)題菜單下拉的div標(biāo)簽布局。href="javascript:;"onClick="alert_win.style.display='none';"這段代碼是隱藏菜單div的代碼點擊隱藏div屬性。[3]實現(xiàn)新聞列表接入數(shù)據(jù)庫代碼如下：conn=DBCon.getConnection();StringlistSQL="select*fromnewswherenewsType="+newsType;List<News>newsList=newArrayList<News>();try{PreparedStatementpsmt=conn.prepareStatement(listSQL);ResultSetrs=psmt.executeQuery();while(rs.next()){Newsnews=newNews();news.setNewsName(rs.getString(3));news.setNewsCreateDate(rs.getDate(4).toString());newsList.add(news);}mit();returnnewsList;}catch(Exceptione){e.printStackTrace();}finally{if(conn!=null){try{conn.close();}catch(SQLExceptione){e.printStackTrace();}}}returnnewsList;<%List<Message>messageList=(List<Message>)request.getAttribute("messageList");Messagemessage=newMessage();for(inti=0;i<messageList.size();i++){message=(Message)messageList.get(i);%>上段代碼是通過接入數(shù)據(jù)庫來到處數(shù)據(jù)庫中存儲的列表數(shù)據(jù)，用來進行分欄顯示。并且隨著數(shù)據(jù)庫更新，新聞列表也會進行更新，更加方便管理。留言功能接入數(shù)據(jù)庫代碼如下所示：<%List<Message>messageList=(List<Message>)request.getAttribute("messageList");Messagemessage=newMessage();for(inti=0;i<messageList.size();i++){message=(Message)messageList.get(i);%>留言板接入數(shù)據(jù)庫代碼如上所示，通過接入數(shù)據(jù)庫來實現(xiàn)用戶留言的記錄儲存功能。并且通過數(shù)據(jù)庫存儲的數(shù)據(jù)來向用戶展現(xiàn)之前用戶的留言。新聞翻頁瀏覽功能實現(xiàn)代碼如下$(document).ready(function(){ $(".header-content-text").hide(); $(".header-content-text").eq(0).show(); $(".header-content-menu-lili").click(function(){ $(".header-content-menu-lili").removeClass(); $(this).attr('class','select'); $(".header-content-text").hide(); $(".header-content-text").eq($(this).index()).show(); });上述代碼是實現(xiàn)將新聞div整合在一起，分為幾個板塊，點擊板塊標(biāo)題來實現(xiàn)，新聞翻頁的功能。這樣做不但節(jié)省了網(wǎng)頁空間而且讓網(wǎng)頁更加美觀。新聞標(biāo)題點擊實現(xiàn)水墨效果代碼如下：<scripttype="text/javascript"src="./js/jquery-1.8.3.min.js"></script>$(".header-content-titleli").click(function(){ $(".header-content-titleli").removeClass(); $(this).attr('class','tilte-select'); });上述代碼為實現(xiàn)點擊實現(xiàn)水墨效果代碼，通過運用jQuery框架來實現(xiàn)，通過點擊標(biāo)題時與未點擊時不同的時刻來改變圖片的邊距實現(xiàn)點擊時的水墨效果初顯。論壇留言功能代碼如下：<divclass="message-content"><p> 姓名：<%=message.getUserName()%>       電話：<%=message.getPhoneNumber()%> </p> <p> 時間：<%=message.getTalkTime()%></p> <p> 內(nèi)容：<%=message.getTalkDetail()%></p> </div> <%}%><divclass="input-area"><ul><li><p>留言板</p></li><formaction="book.html?arg=4"method="post"><li><inputtype="text"name="userName"placeholder="姓名"><inputclass="message_tel"type="text"name="phoneNumber"placeholder="電話"></li><li><textareaname="talkDetail"></textarea></li><li><inputtype="submit"name="submit"class="message-sub"value="提交"></li></form></ul></div></div>上述是論壇前臺代碼，通過接入數(shù)據(jù)庫來實現(xiàn)留言板的存儲。論壇代碼后臺如下：privateStringuserName; privateStringphoneNumber; privateStringtalkDetail; privateStringtalkTime; publicStringgetUserName(){ returnuserName; } publicvoidsetUserName(StringuserName){ this.userName=userName; } publicStringgetPhoneNumber(){ returnphoneNumber; } publicvoidsetPhoneNumber(StringphoneNumber){ this.phoneNumber=phoneNumber; } publicStringgetTalkDetail(){ returntalkDetail; } publicvoidsetTalkDetail(StringtalkDetail){ this.talkDetail=talkDetail; }publicStringgetTalkTime(){ returntalkTime; } publicvoidsetTalkTime(StringtalkTime){ this.talkTime=talkTime; }以上代碼為論壇的代碼先定義數(shù)據(jù)庫的項，再將定義的值鏈接到數(shù)據(jù)庫進行記錄顯示。在通過前臺顯示后臺程序的結(jié)果。視頻播放代碼：<videosrc="video/01.mp4" poster="images/01.png" width="525"height="300" preload controls autoplay loop> </video><videosrc="video/01.mp4" poster="images/01.png" width="525"height="300" preload controls autoplay loop> </video> <videosrc="video/02.mp4"poster="images/02.png" width="525"height="300" preload controls loop> </video>上述是視頻導(dǎo)入接入的代碼，通過video標(biāo)簽來進行視頻的導(dǎo)入。Preload為告訴瀏覽器要加載什么，一共最多可以選擇三個值分別為“none”表示用戶在按下播放鍵之前，瀏覽器不必加載視頻內(nèi)容；“auto”表示瀏覽器在加載頁面時，載入視頻；“metdata”表示瀏覽器只需收集少量的視頻信息，比如大小，首幀圖像、播放列表和持續(xù)時間。Poster為視頻加載時在視頻播放之前，用于指定在播放器中顯示一個圖像。Autoplay表示使用視頻文件自動播放。Controls表示使用瀏覽器需要提供默認的播放控件。Loop表示視頻播放結(jié)束后循環(huán)播放。第四章關(guān)鍵問題第一節(jié)數(shù)據(jù)庫的接入數(shù)據(jù)庫的接入讓本網(wǎng)站的表現(xiàn)功能更加玩善能夠?qū)崿F(xiàn)，它的設(shè)計好壞直接影響著整個系統(tǒng)的質(zhì)量。接入數(shù)據(jù)庫以后能夠更好展示論壇功能及新聞列表展示功能。本次設(shè)計中共建立了兩個數(shù)據(jù)表分別為message和news，其中message用于論壇記錄數(shù)據(jù)，news用與記錄新聞列表進行更新。首先在數(shù)據(jù)庫中先建好一個表用來顯示存儲上傳的數(shù)據(jù)如圖4-1所示：圖4-1數(shù)據(jù)存儲表圖該表是用來存儲論壇留言的數(shù)據(jù)庫，存儲和顯示用戶的留言。存儲好用戶的留言后便可以將其鏈接到前臺的界面進行顯示。具體代碼如下:<% List<Message>messageList=(List<Message>)request.getAttribute("messageList"); Messagemessage=newMessage(); for(inti=0;i<messageList.size();i++){ message=(Message)messageList.get(i); %>將一個數(shù)據(jù)庫的列表接入到網(wǎng)頁的輸入框及顯示列表里。收集用戶輸入的信息進行儲存方便刪除，修改等工作，同時也便于管理信息。記錄集是動態(tài)網(wǎng)站必須要考慮的問題，因為記錄集包含了一個或多個從網(wǎng)頁里收集到的內(nèi)容。在記錄集中查詢信息是極為方便的所以管理好記錄集是極為關(guān)鍵的。建立新聞列表進行新聞數(shù)據(jù)的顯示如圖4-2所示：圖4-2新聞數(shù)據(jù)表圖接入數(shù)據(jù)庫代碼如下：<%StringnewsType=(String)request.getAttribute("newsType");%> <inputtype="hidden"id="newsType"value="<%=newsType%>"/><ul> <%List<News>newsList=(List<News>)request.getAttribute("newsList"); Newsnews=newNews(); for(inti=0;i<newsList.size();i++){ news=(News)newsList.get(i);%>數(shù)據(jù)庫中所用函數(shù)值對照表如下：新聞數(shù)據(jù)表4-1所示表4-1新聞數(shù)據(jù)表newsIdnewsTypenewsNamenewsCreateDate新聞id新聞所屬模塊新聞標(biāo)題新聞創(chuàng)建日期留言信息數(shù)據(jù)表4-2所示表4-2信息數(shù)據(jù)表messageIduserNamephoneNumbertalkDetailtalkTime信息id使用者姓名使用者電話發(fā)言內(nèi)容發(fā)言日期數(shù)據(jù)庫與后臺與前臺連接示意圖如圖4-3所示:圖4-3前后臺連接示意圖第二節(jié)JS的調(diào)試和編輯JS編寫完成以后還要進行一系列的調(diào)試，以達到更加完善的效果。我使用的是谷歌的chrome瀏覽器進行的調(diào)試。打開需要測試的頁面，按下F12打開調(diào)試工具。在調(diào)試窗口中所有的HTML都會呈現(xiàn)在調(diào)試窗口之中，調(diào)試過程中還能指定dom節(jié)點進行查看和編輯能夠在瀏覽器中的JS進行逐步的調(diào)整。例如自己想要的效果，可以先假設(shè)怎么能實現(xiàn)他的方法，在根據(jù)設(shè)想進行思考，列出可以實現(xiàn)的算法。例如實現(xiàn)鼠標(biāo)點擊標(biāo)題時會有水墨效果的JS便是先給標(biāo)題創(chuàng)建div標(biāo)簽，之后再給標(biāo)簽添加背景圖。如果能夠在鼠標(biāo)點擊時再讓背景圖來移動，就會出現(xiàn)鼠標(biāo)點擊與未點擊時的背景效果不同的效果，但是要實現(xiàn)圖片的移動是很困難的，換個方向來想就可以用改變邊距的方法來實現(xiàn)。通過改變邊距來實現(xiàn)點擊鼠標(biāo)與未點擊鼠標(biāo)時的背景圖變換效果，在瀏覽器中調(diào)試編輯可以對實現(xiàn)效果需要的邊距進行一步一步的調(diào)試，以達到最后想要的效果。當(dāng)然所需要的圖片也是需要經(jīng)過進行特定的尺寸裁剪，這也是為何我們在網(wǎng)上直接下載保存的圖片尺寸都很難達到自己滿意的要求的原因。在設(shè)計鼠標(biāo)滑過標(biāo)題菜單會出現(xiàn)下拉菜單的效果是，也是如此。假設(shè)如果菜單本來存在。只是被div和CSS設(shè)置所覆蓋了，當(dāng)鼠標(biāo)劃過時則會讓被覆蓋的div標(biāo)簽顯示出來及會出現(xiàn)鼠標(biāo)劃過時會有菜單下拉下來的效果。想起來簡單但是實現(xiàn)起來卻比較困難，我是這樣實現(xiàn)的找到兩個相鄰的標(biāo)題div，讓兩個div獲取鼠標(biāo)劃過時的焦點，便改變下面div的CSS使標(biāo)簽顯示出來。這樣就能得到鼠標(biāo)劃過時出現(xiàn)下拉菜單時候的效果。下拉菜單效果如圖4-4所示：圖4-4下拉菜單效果圖視頻播放功能則是引入了jQuery框架，用jQuery框架增加了視頻的播放功能點開網(wǎng)頁就能播放不需要安裝任何插件。第三節(jié)CSS的調(diào)試CSS是網(wǎng)頁的美容師，布局調(diào)整都要用到CSS來實現(xiàn)相比普通的<td><tr>標(biāo)簽來編輯網(wǎng)頁，div加CSS編輯能避免隨著網(wǎng)頁縮放出現(xiàn)的網(wǎng)頁布局問題。CSS能使網(wǎng)頁內(nèi)容隨著縮放而變化，并且調(diào)整和排布起來也有序的多，能大大減少工作量。調(diào)試同樣在瀏覽器里進行，對div的布局進行調(diào)試結(jié)合網(wǎng)頁顯示效果調(diào)整div的之間的距離。作為初學(xué)者對網(wǎng)頁里px的概念還不是很熟悉，不能依靠經(jīng)驗進行快速的定位，雖然在調(diào)整中遇到很多困難，但是通過不斷地嘗試，得到了最后展現(xiàn)出來的網(wǎng)頁效果。達到自己滿足的要求。第五章網(wǎng)頁測試第一節(jié)測試及展示網(wǎng)頁所實現(xiàn)的功能及框架完成以上步驟就是對網(wǎng)頁進行最后的測試，由于網(wǎng)頁中運用了一些jsp技術(shù)所以需要在Java環(huán)境中運行網(wǎng)站實現(xiàn)的功能有首頁導(dǎo)航快速導(dǎo)航瀏覽，新聞列表連接，論壇討論功能，及視頻播放功能具體實現(xiàn)效果如下：論壇留言功能輸入信息前如圖5-1所示：圖5-1信息輸入前截圖輸入信息時如圖5-2所示：圖5-2信息輸入時截圖輸入信息結(jié)果如圖5-3所示：圖5-3信息輸入完成截圖二、新聞列表新聞列表顯示翻頁及水墨點擊效果如圖5-4、圖5-5所示：圖5-4翻頁效果圖圖5-5點擊效果圖三、視頻播放器視頻播放如圖所示5-6所示:圖5-6視頻播放圖四、首頁標(biāo)題欄首頁標(biāo)題導(dǎo)航欄如圖5-7所示：圖5-7標(biāo)題導(dǎo)航欄圖以上圖片所展示是的便是設(shè)計中所實現(xiàn)的基本功能，及設(shè)計思想的實現(xiàn)。所涉及的框架是jQuery1.8.3的框架，jQuery框架不但簡化了HTML和JavaScript之間的操作，而且還是開源的軟件完全免費的。運用MIT的許可證授權(quán)能使jQuery的語法設(shè)計操作變得容易很多。jQuery也提供了給開發(fā)人員在其創(chuàng)建插件的能力。這個便利于開發(fā)者能更好地將交互動畫進行抽象化、模塊化。模塊化的方式可以使jQuery函數(shù)庫編寫出強大絢麗的動態(tài)網(wǎng)頁以及網(wǎng)絡(luò)上的應(yīng)用程序。第二節(jié)網(wǎng)頁的發(fā)布和維護在經(jīng)過測試完成后，網(wǎng)頁便可以公布到互聯(lián)網(wǎng)上投入使用。之后要做的便是網(wǎng)站的內(nèi)容更新及穩(wěn)定性的維護了。網(wǎng)站維護不但是為了維護服務(wù)器以保證正常的運行，還要對可能會出現(xiàn)的問題進行防范工作，制定詳細的計劃，力求將網(wǎng)站的后期維護做到最好。與此同時還要根據(jù)用戶的使用反饋進對面板進行適當(dāng)修改，并增加用戶點擊量多板塊的內(nèi)容。同時還要注意超級鏈接的更新，網(wǎng)絡(luò)信息的更新速度很快，上萬個超級鏈接構(gòu)成了網(wǎng)站。為了保持信息的新鮮度，超級鏈接自然也就要隨時更新同時新聞內(nèi)容也要與之一同更新。結(jié)論經(jīng)過幾個月努力，從最初的設(shè)計草圖到最后展示出來的成品網(wǎng)頁，這幾個月過的節(jié)奏雖然緊張，但是卻很充實，直到今天正式完成畢業(yè)論文意味著學(xué)生時代即將結(jié)束，五年的大學(xué)生活也即將畫上一個完美的句點。我因為個人原因原本四年制的大學(xué)讀了五年，這多出的一年時光，在日后的工作里也要加倍的找回。畢業(yè)設(shè)計是對我們學(xué)習(xí)成果的一種檢驗，也是即將步入社會的一種歷練。平日在學(xué)校里我們都很被動，學(xué)習(xí)起來全都要靠老師去催促，缺少能動性和獨立思考問題的能力，期末考試時候看到復(fù)