基于html5的響應(yīng)式網(wǎng)站的設(shè)計與實現(xiàn)(論文)正文

1、<p><b>　　摘 要</b></p><p>　　隨著網(wǎng)絡(luò)的發(fā)展和普及，各類建站技術(shù)的更新與運用，現(xiàn)在搭建一個網(wǎng)站的時間和成本越來越低，使得企業(yè)官方網(wǎng)站得到了極大的發(fā)展。從早期簡單的網(wǎng)頁展示，到后來的營銷型網(wǎng)站，全網(wǎng)營銷型網(wǎng)站，以及目前最新最主流的響應(yīng)式網(wǎng)站?；贖TML5的響應(yīng)式網(wǎng)站能夠自動適應(yīng)屏幕大小，實現(xiàn)多終端覆蓋，設(shè)計高端，豐富的特效讓頁面展示更精美。</p&

2、gt;<p>　　HTML5是HTML下一個主要的修訂版本，現(xiàn)在仍處于發(fā)展階段。廣義論及HTML5時，實際指的是包括HTML、CSS和JavaScript在內(nèi)的一套技術(shù)組合。它希望能夠減少瀏覽器對于需要插件的豐富性網(wǎng)絡(luò)應(yīng)用服務(wù)RIA，如Adobe Flash、Microsoft Silverlight，與Oracle Java FX的需求，并且提供更多能有效增強網(wǎng)絡(luò)應(yīng)用的標(biāo)準(zhǔn)集。HTML5是新興的Web開發(fā)技術(shù)，其擁有良好

3、的語義化標(biāo)簽，搭配最新CSS3可以展現(xiàn)出無與倫比的顯示效果。</p><p>　　本課題結(jié)合HTML5技術(shù)和eclipse開發(fā)工具，MySQL Server 作為數(shù)據(jù)庫，實現(xiàn)了企業(yè)響應(yīng)式網(wǎng)站及其管理，使得企業(yè)官網(wǎng)的展示更精美，管理更便捷。</p><p>　　關(guān)鍵詞：HTML5； CSS3； JavaScript； MySQL Server； 響應(yīng)式網(wǎng)站</p><p&

4、gt;<b>　　ABSTRACT</b></p><p>　　With the development of network and popularization, the updating and use of all kinds of web technology, now time and cost of building a website has become more and

5、more low, makes the enterprise's official website got great development. From the early simple web pages, to later marketing type site, the entire network marketing type site, and the reactive sites of the latest mos

6、t mainstream. Based on the response of the HTML5 responsive website can automatically adapt to screen size, realize the</p><p>　　HTML5 is HTML next major revision, now is still in the stage of development. G

7、eneralized when asked about it actually means, including HTML, CSS, and JavaScript, a set of technology combination. It hopes to be able to reduce the browser plug-in to need the richness of network application service R

8、IA, such as Adobe Flash, Microsoft Silverlight, and the demand of the Oracle Java FX, and can provide more effective enhance the standard set of network applications. HTML5 is the emerging Web developme</p><p&

9、gt;　　This topic combines the technique of HTML5 and the eclipse development tools, MySQL as the database Server, realize the reactive sites and its management, make enterprise website to show more elegant, more convenien

10、t management.</p><p>　　Key words: HTML5; CSS3; JavaScript; MySQL Server; Reactive sites </p><p><b>　　目 錄</b></p><p><b>　　1. 緒論1</b></p><p&

11、gt;　　1.1 課題研究意義和目的1</p><p>　　1.2 國內(nèi)外發(fā)展現(xiàn)狀和趨勢2</p><p>　　1.3 本文工作和論文結(jié)構(gòu)3</p><p>　　1.3.1 本文工作3</p><p>　　1.3.2 論文結(jié)構(gòu)3</p><p>　　2. 系統(tǒng)技術(shù)理論基礎(chǔ)5</p><p

12、>　　2.1 HTML5簡介5</p><p>　　2.2 JavaEE簡介7</p><p>　　2.3 CSS3概述9</p><p>　　2.4 JSP概述9</p><p>　　2.5 JQuery概述10</p><p>　　2.6 B/S 模式概述11</p><p&g

13、t;　　2.7 MySQL概述12</p><p>　　3. 系統(tǒng)需求分析13</p><p>　　3.1 系統(tǒng)基本需求13</p><p>　　3.2 系統(tǒng)用例圖14</p><p>　　3.2.1 系統(tǒng)管理員用例14</p><p>　　3.2.2 會員用例14</p><p>

14、　　3.2.3 游客用例15</p><p>　　4. 系統(tǒng)設(shè)計與實現(xiàn)16</p><p>　　4.1 系統(tǒng)設(shè)計原則16</p><p>　　4.2 系統(tǒng)前端設(shè)計與實現(xiàn)17</p><p>　　4.3 系統(tǒng)后臺設(shè)計與實現(xiàn)25</p><p>　　4.4 數(shù)據(jù)庫設(shè)計與實現(xiàn)28</p><p

15、>　　4.4.1 數(shù)據(jù)庫表28</p><p>　　4.4.2 數(shù)據(jù)庫完整性和安全性33</p><p>　　5. 系統(tǒng)測試35</p><p>　　5.1 測試目的35</p><p>　　5.2 測試方法35</p><p>　　5.3 測試過程36</p><p>　　6

16、. 總結(jié)和展望41</p><p><b>　　參考文獻(xiàn)43</b></p><p><b>　　致 謝45</b></p><p><b>　　緒論</b></p><p><b>　　課題研究意義和目的</b></p><p

17、>　　現(xiàn)在網(wǎng)絡(luò)的發(fā)展已呈現(xiàn)商業(yè)化、全民化、全球化的趨勢。目前，幾乎世界上所有的公司都在利用網(wǎng)絡(luò)傳遞商業(yè)信息，進(jìn)行商業(yè)活動，從宣傳企業(yè)、發(fā)布廣告、招聘雇員、傳遞商業(yè)文件乃至拓展市場、網(wǎng)上銷售等，無所不能。如今網(wǎng)絡(luò)已成為企業(yè)進(jìn)行競爭的戰(zhàn)略手段。企業(yè)經(jīng)營的多元化拓展，企業(yè)規(guī)模的進(jìn)一步擴(kuò)大，對于企業(yè)的管理、業(yè)務(wù)擴(kuò)展、企業(yè)品牌形象等提供了更高的要求。在以信息技術(shù)為支撐的新經(jīng)濟(jì)條件下，越來越多的企業(yè)利用起網(wǎng)絡(luò)這個有效的工具。網(wǎng)站早已由論證階段

18、進(jìn)入了實質(zhì)階段，尤其為企業(yè)提供一個展示自己的舞臺、為消費者創(chuàng)造一個了解企業(yè)的捷徑[1]。</p><p>　　隨著3G、4G的發(fā)展和移動通信及WEB3.0技術(shù)的提升以及近年來各種移動智能設(shè)備的興起，中國互聯(lián)網(wǎng)正在往移動方向發(fā)展，呈現(xiàn)多元化趨勢。越來越多的用戶擁有多種移動設(shè)備，像智能手機(jī)、平板電腦、智能手表等,在現(xiàn)今的大環(huán)境下移動設(shè)備正在普及并且正在逐漸超過PC設(shè)備，面對市場上移動設(shè)備的不斷增多，同時伴隨著各種設(shè)備

19、屏幕的分辨率、尺寸和型號的越來越多，如何能夠在不同屏幕、不同系統(tǒng)平臺等環(huán)境下保持網(wǎng)頁的一致性，滿足用戶的一致體驗這將成為了整個網(wǎng)頁設(shè)計行業(yè)的一個新挑戰(zhàn)。</p><p>　　企業(yè)可以通過建立商業(yè)平臺，實行全天候銷售服務(wù)，借助網(wǎng)絡(luò)推廣企業(yè)的形象、宣傳企業(yè)的產(chǎn)品、發(fā)布公司新聞，同時通過信息反饋使公司更加了解顧客的心理和需求，網(wǎng)站虛擬公司與實體公司的經(jīng)營運作有機(jī)的結(jié)合，將會有利于公司產(chǎn)品銷售渠道的拓展，并節(jié)省大量的廣告

20、宣傳和經(jīng)營運營成本，更好地把握商機(jī)。</p><p>　　今天越來越多的人使用智能手機(jī)、平板電腦等來查看郵件、瀏覽網(wǎng)頁。隨著移動終端的流行和大趨勢的變化，網(wǎng)站設(shè)計技術(shù)也在隨之變化。為了能夠給移動終端客戶提供更好的體驗與服務(wù)，我們可以有很多選擇。例如為移動設(shè)備單獨重新設(shè)計一個網(wǎng)站，這種情況下所有使用移動終端的訪問者都會被指向到這個為他們單獨設(shè)計的站點[2]。另外一種選擇就是將網(wǎng)站做成響應(yīng)式，這種情況下無論客戶使用何

21、種終端設(shè)備訪問網(wǎng)站，網(wǎng)站都會根據(jù)終端設(shè)備屏幕尺寸自動調(diào)整網(wǎng)站顯示，使所有客戶都能有最好的訪問體驗。</p><p>　　響應(yīng)式Web設(shè)計(Responsive Web design)的理念是：頁面的設(shè)計與開發(fā)應(yīng)當(dāng)根據(jù)用戶行為以及設(shè)備環(huán)境(系統(tǒng)平臺、屏幕尺寸、屏幕定向等)進(jìn)行相應(yīng)的響應(yīng)和調(diào)整[3]。具體的實踐方式由多方面組成，包括彈性網(wǎng)格和布局、圖片、CSS media query的使用等。無論用戶正在使用筆記本還

22、是iPad，我們的頁面都應(yīng)該能夠自動切換分辨率、圖片尺寸及相關(guān)腳本功能等，以適應(yīng)不同設(shè)備；換句話說，頁面應(yīng)該有能力去自動響應(yīng)用戶的設(shè)備環(huán)境。響應(yīng)式網(wǎng)頁設(shè)計就是一個網(wǎng)站能夠兼容多個終端——而不是為每個終端做一個特定的版本。這樣，我們就可以不必為不斷到來的新設(shè)備做專門的版本設(shè)計和開發(fā)了。</p><p>　　國內(nèi)外發(fā)展現(xiàn)狀和趨勢</p><p>　　響應(yīng)式設(shè)計的網(wǎng)站能滿足所有類型終端用戶的需求

23、，能帶給所有終端用戶最優(yōu)的訪問體驗。當(dāng)然專門為手機(jī)或者平板電腦設(shè)計的網(wǎng)站或者app應(yīng)用也能滿足部分訪問者的需求，但是據(jù)調(diào)查數(shù)據(jù)顯示，常用的終端移動設(shè)備有230多種不同的屏幕尺寸，我們不可能為所有這些常用的230多種屏幕尺寸都設(shè)計一個獨有的網(wǎng)站或者app應(yīng)用。所以響應(yīng)式設(shè)計此時體現(xiàn)出了它的價值所在。</p><p>　　有調(diào)查結(jié)果顯示，移動設(shè)備正在逐漸超過PC設(shè)備，如果數(shù)據(jù)屬實那么毋庸置疑，以后我們的網(wǎng)頁設(shè)計就應(yīng)該

24、實現(xiàn)響應(yīng)式布局。設(shè)想一個在移動終端都不能正常顯示的網(wǎng)頁能給公司企業(yè)帶來的大概也只有負(fù)面的影響，所以為了能夠使所有利用移動設(shè)備訪問網(wǎng)站的用戶都能有最優(yōu)最好的體驗，響應(yīng)式設(shè)計絕對是最好的一種選擇和趨勢。</p><p>　　Ethan Marcotte曾經(jīng)在A List Apart發(fā)表過一篇文章"Responsive Web Design"，文中援引了響應(yīng)式建筑設(shè)計的概念：現(xiàn)出現(xiàn)了一門新興的學(xué)科&

25、quot;響應(yīng)式架構(gòu)(responsive architecture)"提出，物理空間應(yīng)該可以根據(jù)存在于其中的人的情況進(jìn)行響應(yīng)。結(jié)合嵌入式機(jī)器人技術(shù)以及可拉伸材料的應(yīng)用，建筑師們正在嘗試建造一種可以根據(jù)周圍人群的情況進(jìn)行彎曲、伸縮和擴(kuò)展的墻體結(jié)構(gòu)；還可以使用運動傳感器配合氣候控制系統(tǒng)，調(diào)整室內(nèi)的溫度及環(huán)境光。已經(jīng)有公司在生產(chǎn)"智能玻璃"：當(dāng)室內(nèi)人數(shù)達(dá)到一定的閾值時，這種玻璃可以自動變?yōu)椴煌该?，確保隱私[4]

26、。</p><p>　　將這個思路延伸到Web設(shè)計的領(lǐng)域，我們就得到了一個全新的概念。為什么一定要為每個用戶群各自打造一套設(shè)計和開發(fā)方案？和響應(yīng)式建筑相似，Web設(shè)計同樣應(yīng)該做到根據(jù)不同設(shè)備環(huán)境自動響應(yīng)及調(diào)整。</p><p>　　顯然，我們無法也無需使用運動傳感器或是機(jī)器人技術(shù)，響應(yīng)式Web設(shè)計更多需要的是抽象思維。好在，一些相關(guān)的概念已經(jīng)得到了實踐，比如液態(tài)布局、幫助頁面重新格式化的m

27、edia queries和腳本等。但是響應(yīng)式Web設(shè)計不僅僅是關(guān)于屏幕分辨率自適應(yīng)以及自動縮放的圖片等等，它更像是一種對于設(shè)計的全新思維模式[5]。</p><p>　　響應(yīng)式設(shè)計在2012年被提的比較多，但是響應(yīng)式設(shè)計仍然在不斷變化，不斷創(chuàng)新。比如，新的設(shè)備不斷出來(iPad Mini)，這讓以前的設(shè)計想法土崩瓦解。而各種Web的響應(yīng)式設(shè)計也獲得了越來越多的注意，“讓人們忘記設(shè)備尺寸”的理念將更快地驅(qū)動響應(yīng)式設(shè)

28、計，所以Web設(shè)計也將迎來更多的響應(yīng)式設(shè)計元素。</p><p><b>　　本文工作和論文結(jié)構(gòu)</b></p><p><b>　　本文工作</b></p><p>　　本文主要分析了符合企業(yè)品牌宣傳和產(chǎn)品展示需要的響應(yīng)式網(wǎng)站的開發(fā)過程。闡述了一個基于J2EE基礎(chǔ)之上的、應(yīng)用HTML5，JSP等語言開發(fā)的B/S結(jié)構(gòu)的高校

29、辦公自動化系統(tǒng)的設(shè)計與實現(xiàn)過程。具體工作如下：</p><p>　　⑴ 介紹本系統(tǒng)的開發(fā)背景和本系統(tǒng)的國內(nèi)外發(fā)展現(xiàn)狀；</p><p>　?、?論述了開發(fā)本響應(yīng)式網(wǎng)站平臺開發(fā)過程中的理論支持、技術(shù)基礎(chǔ)和實現(xiàn)的關(guān)鍵技術(shù)；</p><p>　?、?對本系統(tǒng)進(jìn)行了需求分析和功能的設(shè)計，確定系統(tǒng)的體系結(jié)構(gòu)；</p><p>　?、?以系統(tǒng)設(shè)計原則為標(biāo)

30、準(zhǔn)，完成系統(tǒng)的前端頁面、后臺管理系統(tǒng)和數(shù)據(jù)庫內(nèi)容的具體實現(xiàn)過程。</p><p><b>　　論文結(jié)構(gòu)</b></p><p>　　全文共分為六章，具體工作如下： </p><p>　　第一章 緒論。簡單闡述了本系統(tǒng)的開發(fā)背景和國內(nèi)外發(fā)展現(xiàn)狀。 </p><p>　　第二章 系統(tǒng)技術(shù)理論基礎(chǔ)。主要介紹開發(fā)系統(tǒng)的過程中用到

31、的技術(shù)和理論。</p><p>　　第三章 系統(tǒng)需求分析。主要對響應(yīng)式網(wǎng)站的基本需求進(jìn)行分析、建模。 </p><p>　　第四章 系統(tǒng)設(shè)計與實現(xiàn)。按照系統(tǒng)設(shè)計原則，對系統(tǒng)前端、后臺和數(shù)據(jù)庫進(jìn)行設(shè)計，以及系統(tǒng)的前端頁面、后臺管理系統(tǒng)和數(shù)據(jù)庫內(nèi)容的具體實現(xiàn)過程。 </p><p>　　第五章 系統(tǒng)測試。對系統(tǒng)的兼容性和功能性進(jìn)行測試。</p><p

32、>　　第六章 總結(jié)和展望。對當(dāng)前系統(tǒng)在設(shè)計和實現(xiàn)的過程當(dāng)中遇到的問題和針對這些問題給出的解決的方案做個概要的經(jīng)驗總結(jié)，以便今后對類似系統(tǒng)的開發(fā)提出良好的可行性的建議。對當(dāng)前系統(tǒng)的不足加以總結(jié)，在今后系統(tǒng)的升級或類似系統(tǒng)的開發(fā)時做出修改和調(diào)整。</p><p><b>　　系統(tǒng)技術(shù)理論基礎(chǔ)</b></p><p><b>　　HTML5簡介</b&

33、gt;</p><p>　　HTML5是HTML下一個主要的修訂版本，現(xiàn)在仍處于發(fā)展階段。目標(biāo)是取代1999年所制定的HTML 4.01和XHTML 1.0 標(biāo)準(zhǔn)，以期能在互聯(lián)網(wǎng)應(yīng)用迅速發(fā)展的時候，使網(wǎng)絡(luò)標(biāo)準(zhǔn)達(dá)到符合當(dāng)代的網(wǎng)絡(luò)需求。HTML5有兩大特點：首先，強化了 Web 網(wǎng)頁的表現(xiàn)性能。其次，追加了本地數(shù)據(jù)庫等 Web 應(yīng)用的功能。廣義論及HTML5時，實際指的是包括HTML、CSS和JavaScript在內(nèi)

34、的一套技術(shù)組合。它希望能夠減少瀏覽器對于需要插件的豐富性網(wǎng)絡(luò)應(yīng)用服務(wù)RIA，如Adobe Flash、Microsoft Silverlight，與Oracle Java FX的需求，并且提供更多能有效增強網(wǎng)絡(luò)應(yīng)用的標(biāo)準(zhǔn)集[1]。HTML5是新興的Web開發(fā)技術(shù)，其擁有良好的語義化標(biāo)簽，搭配最新CSS3可以展現(xiàn)出無與倫比的顯示效果。支持Html5的瀏覽器包括Firefox（火狐瀏覽器），IE9及其更高版本，Chrome（谷歌瀏覽器），S

35、afari，Opera等；國內(nèi)的傲游瀏覽器（Maxthon），以及基于IE或Chromium（Chrome的工程版或稱實驗版）所推出的360瀏覽器、搜狗瀏覽器、QQ瀏覽器、</p><p>　　HTML5具有以下特性：</p><p>　　語義特性（Class：Semantic）</p><p>　　HTML5賦予網(wǎng)頁更好的意義和結(jié)構(gòu)。更加豐富的標(biāo)簽將隨著對RDFa

36、的，微數(shù)據(jù)與微格式等方面的支持，構(gòu)建對程序、對用戶都更有價值的數(shù)據(jù)驅(qū)動的Web。</p><p>　　2. 本地存儲特性（Class: OFFLINE & STORAGE）</p><p>　　基于HTML5開發(fā)的網(wǎng)頁APP擁有更短的啟動時間，更快的聯(lián)網(wǎng)速度，這些全得益于HTML5 APP Cache，以及本地存儲功能。Indexed DB（html5本地存儲最重要的技術(shù)之一）和A

37、PI說明文檔。</p><p>　　設(shè)備兼容特性 (Class: DEVICE ACCESS)</p><p>　　從Geolocation功能的API文檔公開以來，HTML5為網(wǎng)頁應(yīng)用開發(fā)者們提供了更多功能上的優(yōu)化選擇，帶來了更多體驗功能的優(yōu)勢。HTML5提供了前所未有的數(shù)據(jù)與應(yīng)用接入開放接口。使外部應(yīng)用可以直接與瀏覽器內(nèi)部的數(shù)據(jù)直接相連，例如視頻影音可直接與microphones及攝像

38、頭相聯(lián)。</p><p>　　連接特性（Class: CONNECTIVITY）</p><p>　　更有效的連接工作效率，使得基于頁面的實時聊天，更快速的網(wǎng)頁游戲體驗，更優(yōu)化的在線交流得到了實現(xiàn)。HTML5擁有更有效的服務(wù)器推送技術(shù)，Server-Sent Event和WebSockets就是其中的兩個特性，這兩個特性能夠幫助我們實現(xiàn)服務(wù)器將數(shù)據(jù)“推送”到客戶端的功能。</p>

39、;<p>　　網(wǎng)頁多媒體特性(Class: MULTIMEDIA)</p><p>　　支持網(wǎng)頁端的Audio、Video等多媒體功能，與網(wǎng)站自帶的APPS，攝像頭，影音功能相得益彰。</p><p>　　三維、圖形及特效特性（Class: 3D, Graphics & Effects）</p><p>　　基于SVG、Canvas、WebGL

40、及CSS3的3D功能，用戶會驚嘆于在瀏覽器中，所呈現(xiàn)的驚人視覺效果。 </p><p>　　7. 性能與集成特性（Class: Performance & Integration）</p><p>　　沒有用戶會永遠(yuǎn)等待你的Loading——HTML5會通過XMLHttpRequest2等技術(shù)，幫助您的Web應(yīng)用和網(wǎng)站在多樣化的環(huán)境中更快速的工作。 </p

41、><p>　　CSS3特性(Class: CSS3)</p><p>　　在不犧牲性能和語義結(jié)構(gòu)的前提下，CSS3中提供了更多的風(fēng)格和更強的效果。此外，較之以前的Web排版，Web的開放字體格式（WOFF）也提供了更高的靈活性和控制性[7]。</p><p>　　HTML5具有以下優(yōu)勢：</p><p><b>　　1.網(wǎng)絡(luò)標(biāo)準(zhǔn)<

42、/b></p><p>　　HTML5 本身是由W3C推薦出來的，它的開發(fā)是通過谷歌、蘋果，諾基亞、中國移動等幾百家公司一起醞釀的技術(shù)，這個技術(shù)最大的好處在于它是一個公開的技術(shù)。換句話 說，每一個公開的標(biāo)準(zhǔn)都可以根據(jù)W3C的資料庫找尋根源。另一方面，W3C通過的HTML5標(biāo)準(zhǔn)也就意味著每一個瀏覽器或每一個平臺都會去實現(xiàn)。</p><p><b>　　2.多設(shè)備、跨平臺<

43、;/b></p><p>　　用 HTML5的優(yōu)點主要在于，這個技術(shù)可以進(jìn)行跨平臺的使用。比如你開發(fā)了一款HTML5的游戲，你可以很輕易地移植到UC的開放平臺、Opera的游戲中 心、Facebook應(yīng)用平臺，甚至可以通過封裝的技術(shù)發(fā)放到App Store或Google Play上，所以它的跨平臺非常強大，也是大多數(shù)人對HTML5有興趣的主要原因。</p><p><b>

44、　　自適應(yīng)網(wǎng)頁設(shè)計</b></p><p>　　很早就有人設(shè)想，能不能”一次設(shè)計，普遍適用”，讓同一張網(wǎng)頁自動適應(yīng)不同大小的屏幕，根據(jù)屏幕寬度，自動調(diào)整布局（layout）2010年，Ethan Marcotte提出了”自適應(yīng)網(wǎng)頁設(shè)計“這個名詞，指可以自動識別屏幕寬度、并做出相應(yīng)調(diào)整的網(wǎng)頁設(shè)計。</p><p>　　這就解決了傳統(tǒng)的一種局面——網(wǎng)站為不同的設(shè)備提供不同的網(wǎng)頁，比

45、如專門提供一個mobile版本，或者iPhone / iPad版本。這樣做固然保證了效果，但是比較麻煩，同時要維護(hù)好幾個版本，而且如果一個網(wǎng)站有多個portal（入口），會大大增加架構(gòu)設(shè)計的復(fù)雜度。</p><p><b>　　即時更新</b></p><p>　　游戲客戶端每次都要更新，很麻煩。可是更新HTML5游戲就好像更新頁面一樣，是馬上的、即時的更新[8]。&

46、lt;/p><p>　　總結(jié)概括HTML5有以下優(yōu)點：</p><p>　　1. 提高可用性和改進(jìn)用戶的友好體驗；</p><p>　　2. 有幾個新的標(biāo)簽，這將有助于開發(fā)人員定義重要的內(nèi)容；</p><p>　　3. 可以給站點帶來更多的多媒體元素(視頻和音頻)；</p><p>　　4. 可以很好的替代FLASH和Si

47、lverlight；</p><p>　　5. 當(dāng)涉及到網(wǎng)站的抓取和索引的時候，對于SEO很友好；</p><p>　　6. 將被大量應(yīng)用于移動應(yīng)用程序和游戲。</p><p><b>　　JavaEE簡介</b></p><p>　　J2EE（Java 2 Platform,Enterprise Edition）是一套

48、全然不同于傳統(tǒng)應(yīng)用開發(fā)的技術(shù)架構(gòu)，包含許多組件，主要可簡化且規(guī)范應(yīng)用系統(tǒng)的開發(fā)與部署，進(jìn)而提高可移植性、安全與再用價值[9]。</p><p>　　J2EE 的核心是一組技術(shù)規(guī)范與指南，其中所包含的各類組件、服務(wù)架構(gòu)及技術(shù)層次，均有共通的標(biāo)準(zhǔn)及規(guī)格，讓各種依循 J2EE 架構(gòu)的不同平臺之間，存在良好的兼容性，解決過去企業(yè)后端使用的信息產(chǎn)品彼此之間無法兼容，導(dǎo)致企業(yè)內(nèi)部或外部難以互通的窘境。</p>

49、<p>　　在 J2EE 架構(gòu)下，開發(fā)人員可依循規(guī)范基礎(chǔ)，進(jìn)而開發(fā)企業(yè)級應(yīng)用；而不同 J2EE 供貨商，同會支持不同 J2EE 版本內(nèi)所擬定的標(biāo)準(zhǔn)，以確保不同 J2EE 平臺與產(chǎn)品之間的兼容性。</p><p>　　對于開發(fā)人員而言，只需要專注于各種應(yīng)用系統(tǒng)的商業(yè)邏輯與架構(gòu)設(shè)計，至于底層繁瑣的程序撰寫工作，可搭配不同的開發(fā)平臺，以讓應(yīng)用系統(tǒng)的開發(fā)與部署效率大幅提升。</p><p&g

50、t;　　目前許多程序設(shè)計師，或者是網(wǎng)頁設(shè)計人員，多利用 JSP/Servlet的便利性，進(jìn)而在 J2EE 服務(wù)器之上開發(fā)相關(guān)的應(yīng)用，或是整合公司內(nèi)部的各種資源。推出 J2EE 的最初目的是為了克服傳統(tǒng) Client/Server 模式的弊病，迎合Browser/Server 架構(gòu)的潮流，為應(yīng)用 Java 技術(shù)開發(fā)服務(wù)器端應(yīng)用提供一個平臺獨立的、可移植的、多用戶的、安全的和基于標(biāo)準(zhǔn)的企業(yè)級平臺，從而簡化企業(yè)應(yīng)用的開發(fā)、管理和部署。J2EE

51、 是一個標(biāo)準(zhǔn)，而不是一個現(xiàn)成的產(chǎn)品。各個平臺開發(fā)商按照 J2EE 規(guī)范分別開發(fā)了不同的 J2EE 應(yīng)用服務(wù)器，J2EE 應(yīng)用服務(wù)器是 J2EE 企業(yè)級應(yīng)用的部署平臺。由于它們都遵循了 J2EE 規(guī)范，因此，使用 J2EE 技術(shù)開發(fā)的企業(yè)級應(yīng)用可以部署在各種 J2EE 應(yīng)用服務(wù)器上。</p><p>　　J2EE 組成了一個完整企業(yè)級應(yīng)用的不同部分納入不同的容器(Container)，每個容器中都包含若干組件(這些

52、組件是需要部署在相應(yīng)容器中的)，同時各種組件都能使用各種 J2EE Service/API。J2EE 容器包括：</p><p>　　◆ Web 容器 服務(wù)器端容器，包括兩種組件 JSP 和 Servlet，JSP 和Servlet 都是 Web 服務(wù)器的功能擴(kuò)展，接受 Web 請求，返回動態(tài)的 Web頁面。Web 容器中的組件可使用 EJB 容器中的組件完成復(fù)雜的商務(wù)邏輯。</p><p&g

53、t;　　◆ EJB 容器 服務(wù)器端容器，包含的組件為 EJB(Enterprise Java Beans)，它是 J2EE 的核心之一，主要用于服務(wù)器端的商業(yè)邏輯的實現(xiàn)。EJB 規(guī)范定義了一個開發(fā)和部署分布式商業(yè)邏輯的框架，以簡化企業(yè)級應(yīng)用的開發(fā)，使其較容易地具備可伸縮性、可移植性、分布式事務(wù)處理、多用戶和安全性等。</p><p>　　◆ Applet 容器 客戶端容器，包含的組件為 Applet。Applet

54、 是嵌在瀏覽器中的一種輕量級客戶端，一般而言，僅當(dāng)使用 Web 頁面無法充分地表現(xiàn)數(shù)據(jù)或應(yīng)用界面的時候，才使用它。Applet 是一種替代 Web 頁面的手段，我們僅能夠使用 J2EE 開發(fā) Applet，Applet 無法使用 J2EE的各種 Service 和 API，這是為了安全性的考慮。</p><p>　　◆ Application Client 容 器 客 戶 端 容 器 ， 包 含 的 組 件

55、為Application Client。Application Client 相對 Applet 而言是一種較重量級的客戶端，它能夠使用 J2EE 的大多數(shù) Service 和 API[10]。</p><p><b>　　CSS3概述</b></p><p>　　CSS即層疊樣式表（Cascading StyleSheet）。在網(wǎng)頁制作時采用層疊樣式表技術(shù)

56、，可以有效地對頁面的布局、字體、顏色、背景和其它效果實現(xiàn)更加精確的控制。 只要對相應(yīng)的代碼做一些簡單的修改，就可以改變同一頁面的不同部分，或者頁數(shù)不同的網(wǎng)頁的外觀和格式。CSS3是CSS技術(shù)的升級版本，CSS3語言開發(fā)是朝著模塊化發(fā)展的。以前的規(guī)范作為一個模塊實在是太龐大而且比較復(fù)雜，所以，把它分解為一些小的模塊，更多新的模塊也被加入進(jìn)來。這些模塊包括： 盒子模型、列表模塊、超鏈接方式 、語言模塊 、背景和邊框 、文字特效、多欄布局等。

57、</p><p>　　CSS3將完全向后兼容，所以沒有必要修改的設(shè)計來讓它們繼續(xù)運作。網(wǎng)絡(luò)瀏覽器也還將繼續(xù)支持CSS2。CSS3主要的影響是將可以使用新的可用的選擇器和屬性，這些會允許實現(xiàn)新的設(shè)計效果（譬如動態(tài)和漸變），而且可以很簡單的設(shè)計出現(xiàn)在的設(shè)計效果（比如說使用分欄）[11]。</p><p><b>　　JSP概述</b></p><p&g

58、t;　　JSP(Java Server Pages)是由Sun Microsystems公司倡導(dǎo)、許多公司參與一起建立的一種動態(tài)網(wǎng)頁技術(shù)標(biāo)準(zhǔn)。JSP技術(shù)有點類似ASP技術(shù)，它是在傳統(tǒng)的網(wǎng)頁HTML文件(*.htm,*.html)中插入Java程序段(Scriptlet)和JSP標(biāo)記(tag)，從而形成JSP文件(*.jsp)。</p><p>　　用JSP開發(fā)的Web應(yīng)用是跨平臺的，

59、即能在Linux下運行，也能在其他操作系統(tǒng)上運行。JSP技術(shù)使用Java編程語言編寫類XML的tags和scriptlets，來封裝產(chǎn)生動態(tài)網(wǎng)頁的處理邏輯。網(wǎng)頁還能通過tags和scriptlets訪問存在于服務(wù)端的資源的應(yīng)用邏輯。JSP將網(wǎng)頁邏輯與網(wǎng)頁設(shè)計和顯示分離，支持可重用的基于組件的設(shè)計，使基于Web的應(yīng)用程序的開發(fā)變得迅速和容易。</p><p>　　Web服務(wù)器在遇到訪問JSP網(wǎng)頁的請求時，首先執(zhí)行其

60、中的程序段，然后將執(zhí)行結(jié)果連同JSP文件中的HTML代碼一起返回給客戶。插入的Java程序段可以操作數(shù)據(jù)庫、重新定向網(wǎng)頁等，以實現(xiàn)建立動態(tài)網(wǎng)頁所需要的功能。</p><p>　　JSP與Java Servlet一樣，是在服務(wù)器端執(zhí)行的，通常返回該客戶端的就是一個HTML文本，因此客戶端只要有瀏覽器就能瀏覽。</p><p>　　JSP的1.0規(guī)范的最后版本是1999年9月推出的，

61、12月又推出了1.1規(guī)范。目前較新的是JSP1.2規(guī)范，JSP2.0規(guī)范的征求意見稿也已出臺。</p><p>　　JSP頁面由HTML代碼和嵌入其中的Java代碼所組成。服務(wù)器在頁面被客戶端請求以后對這些Java代碼進(jìn)行處理，然后將生成的HTML頁面返回給客戶端的瀏覽器。Java Servlet 是JSP的技術(shù)基礎(chǔ)，而且大型的Web應(yīng)用程序的開發(fā)需要Java Servlet和JSP

62、配合才能完成。JSP具備了Java技術(shù)的簡單易用，完全的面向?qū)ο?，具有平臺無關(guān)性且安全可靠，主要面向因特網(wǎng)的所有特點。</p><p>　　自JSP推出后，眾多大公司都支持JSP技術(shù)的服務(wù)器，如IBM、Oracle、Bea公司等，所以JSP迅速成為商業(yè)應(yīng)用的服務(wù)器端語言[12]。</p><p>　　JSP 技術(shù)的優(yōu)勢：</p><p>　　⑴ 一次編寫，到處運行。

63、在這一點上 Java 比 PHP 更出色，除了系統(tǒng)之外，代碼不用做任何更改。</p><p>　　⑵ 系統(tǒng)的多平臺支持?；旧峡梢栽谒衅脚_上的任意環(huán)境中開發(fā)，在任意環(huán)境中進(jìn)行系統(tǒng)部署，在任意環(huán)境中擴(kuò)展。相比 ASP/PHP 的局限性是顯而易見的。</p><p>　?、?強大的可伸縮性。從只有一個小的 Jar 文件就可以運行 Servlet/JSP ，到由多臺服務(wù)器進(jìn)行集群和負(fù)載均衡，到

64、多臺Application 進(jìn)行事務(wù)處理，消息處理，一臺服務(wù)器到無數(shù)臺服務(wù)器，Java 顯示了一個巨大的生命力。</p><p>　?、榷鄻踊凸δ軓姶蟮拈_發(fā)工具支持。Java 已經(jīng)有了許多非常優(yōu)秀的開發(fā)工具，而且許多可以免費得到，并且其中許多已經(jīng)可以順利的運行于多種平臺之下[13]。</p><p><b>　　JQuery概述</b></p><

65、;p>　　JQuery是繼prototype之后又一個優(yōu)秀的Javascript庫。它是輕量級的js庫 ，它兼容CSS3，還兼容各種瀏覽器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+），jQuery2.0及后續(xù)版本將不再支持IE6/7/8瀏覽器。jQuery使用戶能更方便地處理HTML（標(biāo)準(zhǔn)通用標(biāo)記語言下的一個應(yīng)用）、events、實現(xiàn)動畫效果，并且方便地為網(wǎng)站提供AJAX交互。jQuery

66、還有一個比較大的優(yōu)勢是，它的文檔說明很全，而且各種應(yīng)用也說得很詳細(xì)，同時還有許多成熟的插件可供選擇[2]。jQuery能夠使用戶的html頁面保持代碼和html內(nèi)容分離，也就是說，不用再在html里面插入一堆js來調(diào)用命令了，只需要定義id即可。</p><p>　　jQuery是一個兼容多瀏覽器的javascript庫，核心理念是write less,do more(寫得更少,做得更多)。jQuery在2006

67、年1月由美國人John Resig在紐約的barcamp發(fā)布，吸引了來自世界各地的眾多JavaScript高手加入，由Dave Methvin率領(lǐng)團(tuán)隊進(jìn)行開發(fā)。如今，jQuery已經(jīng)成為最流行的javascript庫，在世界前10000個訪問最多的網(wǎng)站中，有超過55%在使用jQuery[14]。</p><p>　　jQuery是免費、開源的，使用MIT許可協(xié)議。jQuery的語法設(shè)計可以使開發(fā)更加便捷，例如操作

68、文檔對象、選擇DOM元素、制作動畫效果、事件處理、使用Ajax以及其他功能。除此以外，jQuery提供API讓開發(fā)者編寫插件。其模塊化的使用方式使開發(fā)者可以很輕松的開發(fā)出功能強大的靜態(tài)或動態(tài)網(wǎng)頁。</p><p>　　jQuery，顧名思義，也就是JavaScript和查詢（Query），即是輔助JavaScript開發(fā)的庫[15]。</p><p><b>　　B/S結(jié)構(gòu)概述&

69、lt;/b></p><p>　　B/S（Browser/Server）結(jié)構(gòu)即瀏覽器和服務(wù)器結(jié)構(gòu)。它是隨著Internet 技術(shù)的興起，對 C/S 結(jié)構(gòu)的一種變化或者改進(jìn)的結(jié)構(gòu)。在這種結(jié)構(gòu)下，用戶工作界面是通過 WWW 瀏覽器來實現(xiàn)，極少部分事務(wù)邏輯在前端（Browser）實現(xiàn)，但是主要事務(wù)邏輯在服務(wù)器端（Server）實現(xiàn)，形成所謂三層 3-tier 結(jié)構(gòu)。這樣就大大簡化了客戶端電腦載荷，減輕了系統(tǒng)維護(hù)與

70、升級的成本和工作量，降低了用戶的總體成本（TCO）。</p><p>　　以目前的技術(shù)看，局域網(wǎng)建立 B/S 結(jié)構(gòu)的網(wǎng)絡(luò)應(yīng)用，并通過Internet/Intranet 模式下數(shù)據(jù)庫應(yīng)用，相對易于把握、成本也是較低的。它是一次性到位的開發(fā)，能實現(xiàn)不同的人員，從不同的地點，以不同的接入方式訪問和操作共同的數(shù)據(jù)庫；它能有效地保護(hù)數(shù)據(jù)平臺和管理訪問權(quán)限，服務(wù)器數(shù)據(jù)庫也很安全 。特別是在 JAVA 這樣的跨平臺語言出現(xiàn)之后

71、，B/S 架構(gòu)管理軟件更是方便、快捷、高效[16]。</p><p>　　B/S 架構(gòu)軟件的優(yōu)勢：</p><p>　?、?維護(hù)和升級方式簡單</p><p>　　目前，網(wǎng)站平臺的改進(jìn)和升級越來越頻繁，B/S 架構(gòu)的產(chǎn)品明顯體現(xiàn)著更為方便的特性。 B/S 架構(gòu)的平臺只需要管理服務(wù)器就行了，所有的客戶端只是瀏覽器，根本不需要做任何的維護(hù)。無論用戶的規(guī)模有多大，有多少分

72、支機(jī)構(gòu)都不會增加任何維護(hù)升級的工作量，所有的操作只需要針對服務(wù)器進(jìn)行；如果是異地，只需要把服務(wù)器連接專網(wǎng)即可，實現(xiàn)遠(yuǎn)程維護(hù)、升級和共享。所以客戶機(jī)越來越“瘦”，而服務(wù)器越來越“胖”是將來信息化發(fā)展的主流方向。今后，系統(tǒng)升級和維護(hù)會越來越容易，而使用起來會越來越簡單，這對用戶人力、物力、時間、費用的節(jié)省是顯而易見的。</p><p>　?、瞥杀窘档?，選擇更多</p><p>　　大家都知道

73、windows 在桌面電腦上幾乎一統(tǒng)天下，瀏覽器成為了標(biāo)準(zhǔn)配置，但在服務(wù)器操作系統(tǒng)上 windows 并不是處于絕對的統(tǒng)治地位?，F(xiàn)在的趨勢是凡使用 B/S 架構(gòu)的應(yīng)用管理軟件，只需安裝在 Linux 服務(wù)器上即可，而且安全性高。所以服務(wù)器操作系統(tǒng)的選擇是很多的，不管選用那種操作系統(tǒng)都可以讓大部分人使用 windows 作為桌面操作系統(tǒng)電腦不受影響，這就使的最流行免費的 Linux 操作系統(tǒng)快速發(fā)展起來，Linux 除了操作系統(tǒng)是免費的以

74、外，連數(shù)據(jù)庫也是免費的，這種選擇非常盛行[17]。</p><p><b>　　MySQL概述</b></p><p>　　MySQL是一個關(guān)系型數(shù)據(jù)庫管理系統(tǒng)，由瑞典MySQL AB 公司開發(fā)，目前屬于 Oracle 旗下公司。MySQL 最流行的關(guān)系型數(shù)據(jù)庫管理系統(tǒng)，在 WEB 應(yīng)用方面MySQL是最好的關(guān)系數(shù)據(jù)庫管理系統(tǒng) ( Relation

75、al Database Management System, RDBMS ) 應(yīng)用軟件之一[18]。</p><p>　　MySQL所使用的 SQL 語言是用于訪問數(shù)據(jù)庫的最常用標(biāo)準(zhǔn)化語言。MySQL 軟件采用了雙授權(quán)政策，它分為社區(qū)版和商業(yè)版，由于其體積小、速度快、總體擁有成本低，尤其是開放源碼這一特點，一般中小型網(wǎng)站的開發(fā)都選擇 MySQL 作為網(wǎng)站數(shù)據(jù)庫[19]。</p><p>&

76、lt;b>　　系統(tǒng)需求分析</b></p><p><b>　　系統(tǒng)基本需求</b></p><p>　　通過網(wǎng)站建設(shè)，借助網(wǎng)絡(luò)推廣企業(yè)的形象、宣傳企業(yè)的產(chǎn)品、發(fā)布公司新聞，從而使更多的用戶認(rèn)識企業(yè)、了解企業(yè)，同時采用面向未來的第四代網(wǎng)站技術(shù)，以html5為基礎(chǔ)，自適應(yīng)pc、筆記本、pad、手機(jī)等不同尺寸的終端。“一次設(shè)計、普遍適用”。設(shè)計時尚大氣，

77、更好的展示企業(yè)品牌形象、更利于網(wǎng)站優(yōu)化、后臺管理更便捷。迎合移動互聯(lián)網(wǎng)的趨勢，增加移動終端的客戶轉(zhuǎn)化率。</p><p>　　本系統(tǒng)從功能上，可分為：</p><p>　　前端功能包括：信息瀏覽，站內(nèi)查詢，會員注冊，會員登錄</p><p>　　會員功能包括：藏品鑒定，藏品養(yǎng)護(hù)</p><p>　　后臺功能包括：商品管理，問答管理，會員管理，

78、內(nèi)容管理</p><p>　　圖3-1 系統(tǒng)訪問權(quán)限圖</p><p>　　從訪問權(quán)限上，可分為系統(tǒng)管理員，會員，游客。系統(tǒng)的權(quán)限設(shè)計使得不同的角色只能使用相對應(yīng)的功能。系統(tǒng)管理員可以使用所有功能，包括前端的信息瀏覽、站內(nèi)查詢、會員注冊、會員登錄功能，會員的藏品鑒定、藏品養(yǎng)護(hù)功能，以及后臺的商品管理、問答管理、會員管理和內(nèi)容管理功能；會員可以使用前端的信息瀏覽、站內(nèi)查詢、會員注冊、會員登錄

79、功能，會員的藏品鑒定、藏品養(yǎng)護(hù)功能；游客只能使用前端的信息瀏覽、站內(nèi)查詢功能和會員的會員注冊功能。具體權(quán)限如圖3-1.</p><p><b>　　系統(tǒng)用例圖</b></p><p><b>　　系統(tǒng)管理員用例</b></p><p>　　系統(tǒng)管理員則負(fù)責(zé)具體信息系統(tǒng)日常管理和維護(hù)，具有信息系統(tǒng)的最高管理權(quán)限。</p

80、><p>　　圖3-2 管理員用例圖</p><p>　　系統(tǒng)管理員可以使用所有功能，包括前端的信息瀏覽、站內(nèi)查詢、會員注冊、會員登錄功能，會員的藏品鑒定、藏品養(yǎng)護(hù)功能，以及后臺的商品管理、問答管理、會員管理和內(nèi)容管理功能。用例圖如圖3-2.</p><p><b>　　會員用例</b></p><p>　　會員是指通過正規(guī)

81、流程申請?zhí)峤换拘畔ⅲ尤牍緯T系統(tǒng)的客戶。</p><p>　　圖3-3 會員用例圖</p><p>　　會員可以使用前端的信息瀏覽、站內(nèi)查詢、會員注冊、會員登錄功能和會員的藏品鑒定、藏品養(yǎng)護(hù)功能。用例圖如圖3-3.</p><p><b>　　游客用例</b></p><p>　　游客是指，通過互聯(lián)網(wǎng)在在線訪問瀏

82、覽網(wǎng)站，之前和公司無關(guān)聯(lián)的訪客。</p><p>　　圖3-4 游客用例圖</p><p>　　游客只能使用前端的信息瀏覽、站內(nèi)查詢功能和會員的會員注冊功能。用例圖如圖3-4.</p><p><b>　　系統(tǒng)設(shè)計與實現(xiàn)</b></p><p><b>　　系統(tǒng)設(shè)計原則</b></p>

83、<p><b>　　1. 移動優(yōu)先原則</b></p><p>　　隨著移動互聯(lián)網(wǎng)的發(fā)展，移動設(shè)備的不斷增加，考慮到當(dāng)前的發(fā)展形勢，優(yōu)先考慮移動設(shè)計無可厚非。所謂移動優(yōu)先原則是指，整個頁面設(shè)計的流程優(yōu)先考慮到移動設(shè)備的兼容顯示，再次前提下在考慮PC機(jī)的兼容顯示。</p><p><b>　　2. 觸控優(yōu)先原則</b></p>

84、;<p>　　對觸控優(yōu)先原則的考慮也是基于移動互聯(lián)網(wǎng)的發(fā)展迅速的前提下提出的。在移動設(shè)備終端上目前觸控是我們主要的一種人機(jī)交互方式?；谶@點在設(shè)計頁面上就應(yīng)該優(yōu)先考慮設(shè)計出易于手指觸摸的按鈕等交互元素其次才是考慮同樣易于鼠標(biāo)點擊的按鈕等其他元素。所以網(wǎng)頁設(shè)計師應(yīng)該先從觸控優(yōu)先原則入手設(shè)計頁面，之后在此基礎(chǔ)上對頁面進(jìn)行適當(dāng)?shù)恼{(diào)整以達(dá)到對PC端的兼容顯示。使網(wǎng)頁上的相關(guān)交互元素既適合手指觸摸又適合鼠標(biāo)點擊。</p>

85、<p><b>　　3. 彈性化原則</b></p><p>　　在彈性化布局的基礎(chǔ)上引入CSS媒介查詢的功能使得web響應(yīng)式的設(shè)計和開發(fā)思路讓頁面真正的富有彈性。頁面布局再不會被破壞，圖片的尺寸可以被自動調(diào)整。這樣無論用戶使用任何設(shè)備，頁面都能夠自動響應(yīng)與調(diào)整。 </p><p><b>　　4. 宏觀性原則</b></p&

86、gt;<p>　　在響應(yīng)式 Web 開發(fā)過程中，設(shè)計人員在項目的每一個階段都要在多種瀏覽器和不同尺寸屏幕中進(jìn)行測試，以盡早發(fā)現(xiàn)問題。</p><p><b>　　5. 開放性原則</b></p><p>　　支持跨平臺運行的體系架構(gòu)，系統(tǒng)可以運行在各種Windows平臺。系統(tǒng)具備互操作性和可擴(kuò)展性性，具有兼容性。</p><p>

87、<b>　　6. 穩(wěn)定性原則</b></p><p>　　保證系統(tǒng)采用成熟穩(wěn)定的操作系統(tǒng)、數(shù)據(jù)庫、網(wǎng)絡(luò)協(xié)議等，保證系統(tǒng)長期穩(wěn)定的不間斷運行。</p><p><b>　　7. 安全性原則</b></p><p>　　對于基于網(wǎng)絡(luò)的應(yīng)用，最重要的問題之一是安全性。系統(tǒng)具備精細(xì)的權(quán)限管理，在網(wǎng)絡(luò)安全各個環(huán)節(jié)采用有力措施，保證系

88、統(tǒng)網(wǎng)絡(luò)整體安全性。</p><p><b>　　系統(tǒng)前端設(shè)計與實現(xiàn)</b></p><p>　　首頁：網(wǎng)站首頁是一個網(wǎng)站的入口網(wǎng)頁，作用是引導(dǎo)互聯(lián)網(wǎng)用戶瀏覽網(wǎng)站以及其他部分的內(nèi)容。這部分內(nèi)容一般被認(rèn)為是一個目錄性質(zhì)的內(nèi)容。</p><p>　　圖4-1 網(wǎng)站首頁圖</p><p>　　整體個網(wǎng)站首頁遵循扁平化設(shè)計，簡潔大

89、氣，在色彩搭配上，根據(jù)企業(yè)LOGO色彩、行業(yè)特性進(jìn)行設(shè)計，主次分明，沖擊力強。首頁為多屏，鼠標(biāo)下拉或滾輪滾動展示，包含有導(dǎo)航欄，banner圖區(qū)，站內(nèi)搜索框，藝術(shù)資訊，藝術(shù)名家，精品展覽，合作機(jī)構(gòu)的部分展示，這樣設(shè)計的目的是讓訪客瀏覽更輕松便捷，突出公司的服務(wù)和特色。另外，這樣的設(shè)計更適合移動終端的上滑、下滑顯示，首頁內(nèi)容更豐富直觀，瀏覽更輕松便捷。如圖4-1. </p><p>　　導(dǎo)航欄：網(wǎng)站導(dǎo)航欄位于網(wǎng)站最

90、上面，通常網(wǎng)站的主導(dǎo)航主要包括網(wǎng)站的首頁和產(chǎn)品欄目及各個單頁面的導(dǎo)入鏈接，是網(wǎng)站中最主要的、必不可少的內(nèi)容。方便用戶以最快，最簡單的到達(dá)不同的網(wǎng)頁。同時也方便用戶一目了然的發(fā)現(xiàn)網(wǎng)站的主要信息，而不用費力的尋找。</p><p><b>　　圖4-2 導(dǎo)航欄</b></p><p>　　導(dǎo)航欄功能劃分包括：首頁，藝術(shù)品，展覽，資訊，藝術(shù)名家，會員中心，關(guān)于我們，常見問題

91、；功能根據(jù)行業(yè)需求和客戶體驗來劃分，精簡全面便捷的展示企業(yè)信息和服務(wù)。其中鼠標(biāo)經(jīng)過不同欄目時，當(dāng)鼠標(biāo)懸停在欄目上方，欄目背景色變?yōu)榧t色，并展開二級導(dǎo)航欄目。此處用的是CSS3中的:hover 偽類實現(xiàn)的，:hover 偽類在鼠標(biāo)移到元素上時向此元素添加特殊的樣式。如圖4-2.</p><p>　　藝術(shù)品：藝術(shù)品欄的設(shè)計目的是為了讓訪客更細(xì)致的了解公司藝術(shù)品相關(guān)的服務(wù)和流程，是網(wǎng)站內(nèi)容更豐富全面。</p>

92、;<p>　　如圖4-3 藝術(shù)品和二級導(dǎo)航</p><p>　　藝術(shù)品下面二級導(dǎo)航欄目包含鑒證備案，資產(chǎn)管理，修復(fù)保養(yǎng)，個性定制。鑒證備案中包含有鑒證的意義以及具體流程和信息，資產(chǎn)管理中包含有基金、信托、按揭和鑒賞管理，修復(fù)保養(yǎng)中包含有保養(yǎng)的意義和具體流程，個性定制中包含有服務(wù)項目及優(yōu)勢。如圖4-3.</p><p>　　展覽：設(shè)計展覽欄主要是對公司的產(chǎn)品進(jìn)行一個集中展示。&

93、lt;/p><p>　　圖4-4 展覽和二級導(dǎo)航</p><p>　　展覽欄主要分為中國繪畫，書法篆刻，西畫雕塑，古瓷雜項，當(dāng)代工藝五個板塊。可以選擇直接點擊展覽進(jìn)入展覽大廳，也可以選擇直接點擊不同二級欄目進(jìn)入細(xì)分板塊。如圖4-4.</p><p>　　圖4-5 展覽頁布局</p><p>　　展覽大廳可以看到五個板塊分類，不同價格區(qū)間，以及通過

94、對展品的人氣高低、價格高低、錄入時間來進(jìn)行排序，更方便訪客對展品進(jìn)行定位和選擇。展品以通欄的形式布局，平面感強，是產(chǎn)品更清晰突出。鼠標(biāo)懸停在圖片上，會有圖片的信息介紹彈出，鼠標(biāo)離開消失，互動性和體驗度很高。這個用到的是jQuery中的mouseover和mouseout事件，鼠標(biāo)經(jīng)過懸停時mouseover觸發(fā)顯示信息，鼠標(biāo)離開mouseout觸發(fā)信息消失。如圖4-5.</p><p>　　圖4-6 商品圖片的放

95、大鏡功能</p><p>　　點擊圖片信息上的查看詳情，就可以看到該展品的詳細(xì)信息，此時鼠標(biāo)經(jīng)過懸停圖片，會有一個一個放大鏡效果，這樣設(shè)計的初衷是為了讓訪客看到更多的展品細(xì)節(jié)，獲取更多信息，提高體驗度。如圖4-6.</p><p>　　資訊：資訊是用戶因為及時地獲得它并利用它而能夠在相對短的時間內(nèi)給自己帶來價值的信息，資訊有時效性和地域性，它必須被消費者利用。資訊是一種信息，涵蓋的不只是新

96、聞，還可以包括其他媒介。</p><p>　　圖4-7 資訊和二級導(dǎo)航</p><p>　　資訊欄的設(shè)計主要是發(fā)布即時的行業(yè)新聞動態(tài)，活動宣傳，文化展示。其中包含有行業(yè)動態(tài)，藝術(shù)活動，藝術(shù)展訊，藝術(shù)視頻四個二級導(dǎo)航。如圖4-7.</p><p>　　藝術(shù)名家：藝術(shù)名家欄主要是向訪客展示介紹一些有所成的藝術(shù)家，要知道所有藝術(shù)品都離不開創(chuàng)造它的藝術(shù)家。</p>

97、;<p><b>　　圖4-8 藝術(shù)名家</b></p><p>　　選擇一些優(yōu)秀的藝術(shù)家進(jìn)行介紹展示，首先可以提升藝術(shù)家知名度，提高展品熱度，其次訪客也可以了解到各個優(yōu)秀藝術(shù)家，了解更多行業(yè)知識，當(dāng)然優(yōu)秀藝術(shù)家入駐，也可以很好的提升企業(yè)形象和實力。如圖4-8.</p><p>　　會員中心：會員制是一種人與人或組織與組織之間進(jìn)行溝通的媒介，它是由某個組

98、織發(fā)起并在該組織的管理運作下，吸引客戶自愿加入，目的是定期與會員聯(lián)系，為他們提供具有較高感知價值的利益包。</p><p>　　圖4-9 會員中心和二級導(dǎo)航</p><p>　　圖4-10 會員注冊、登錄</p><p>　　設(shè)置會員可以區(qū)別一般訪客，增加客戶粘度，為客戶提供更多，更優(yōu)質(zhì)，更便捷的服務(wù)。會員中心包含有鑒定藏品，藏品養(yǎng)護(hù)兩個二級導(dǎo)航。如圖4-9.進(jìn)入會

99、員中心必須要先經(jīng)過注冊和登錄。如圖4-10.</p><p>　　圖4-11 送鑒信息</p><p>　　圖4-12 送鑒養(yǎng)護(hù)統(tǒng)計</p><p>　　會員登錄后，就可以使用會員功能，包括鑒定藏品和藏品養(yǎng)護(hù)。點開二級導(dǎo)航選擇送鑒，就可以填寫送鑒信息。如圖4-11.也可以查看送鑒和養(yǎng)護(hù)信息。如圖4-12.</p><p>　　圖4-13 個人

100、中心</p><p>　　點擊會員中心，可以進(jìn)入到個人中心，可以顯示自己會員等級和送鑒養(yǎng)護(hù)的藏品。如圖4-13.</p><p>　　關(guān)于我們：主要對企業(yè)做一個詳細(xì)的介紹，讓訪客對企業(yè)有個更系統(tǒng)細(xì)致的了解。</p><p><b>　　4-14 關(guān)于我們</b></p><p>　　關(guān)于我們中可以寫企業(yè)的文化背景，整體實

101、力，服務(wù)宗旨，可以加深訪客對企業(yè)的認(rèn)知和了解，下面合作機(jī)構(gòu)的設(shè)置，是加強行業(yè)內(nèi)的交流與互動，也通過同行也的知名平臺，來提升和打造自己的品牌。如圖4-14.</p><p>　　常見問題：解決訪客疑慮和問題，種植價值觀，提高訪客轉(zhuǎn)化率。</p><p>　　圖4-15 常見問題和二級導(dǎo)航</p><p>　　圖4-16 鑒證備案問題</p><p&

102、gt;　　訪客在瀏覽網(wǎng)站內(nèi)容時，難免對服務(wù)產(chǎn)生的疑慮和問題，通過對問題的整理和分析，總結(jié)歸納初一些常見問題，并進(jìn)行分類，有鑒證備案，鑒證流程，資產(chǎn)管理，修復(fù)養(yǎng)護(hù)，個性定制。如圖4-15.每個板塊都有一些相關(guān)概念和疑問解答。如圖4-16.</p><p>　　站內(nèi)搜索：站內(nèi)搜索通俗來講是一個網(wǎng)站或商城的“大門口”，一般在形式上包括兩個要件：搜索入口和搜索結(jié)果頁面，但在其后臺架構(gòu)上是比較復(fù)雜的，其核心要件包括：中文分

103、詞技術(shù)、頁面抓取技術(shù)、建立索引、對搜索結(jié)果排序以及對搜索關(guān)鍵詞的統(tǒng)計、分析、關(guān)聯(lián)、推薦等。</p><p>　　圖4-17 站內(nèi)搜索</p><p>　　站內(nèi)搜索的設(shè)置，主要是針對商品這塊，由于商品數(shù)量較大，單個尋找比較麻煩，也很浪費時間，使用站內(nèi)搜索，按備案編號或物品名稱查詢，快速便捷。如圖4-17.</p><p><b>　　系統(tǒng)后臺設(shè)計與實現(xiàn)<

104、;/b></p><p>　　系統(tǒng)后臺的設(shè)計首先要功能齊全，能全面的監(jiān)控和管理前端及數(shù)據(jù)。其次是管理要便捷，因為一般系統(tǒng)管理員對代碼都不了解，關(guān)于內(nèi)容的增刪改查要簡單可操作。最后也是很重要的一點是，安全性要好，這樣才能保障系統(tǒng)正常穩(wěn)定的運行。</p><p>　　圖4-18 管理員登錄</p><p>　　管理員登錄：管理員登錄界面包括用戶名、密碼、驗證碼、記

105、住用戶名、登錄等。正確輸入用戶名、密碼、驗證碼才能進(jìn)入后臺管理系統(tǒng)。點擊驗證碼圖片可以更新驗證碼，記住用戶名的設(shè)置是為了方便管理員下次登錄。如圖4-18.</p><p>　　圖4-19 后臺系統(tǒng)界面</p><p>　　后臺管理系統(tǒng)：管理員登錄后，會進(jìn)入后臺管理系統(tǒng)界面，包括功能導(dǎo)航、商品管理、問答管理、會員管理、內(nèi)容管理等模塊。界面采用了分上下左右布局，左側(cè)為導(dǎo)航區(qū)域，右側(cè)為用戶主要操

106、作區(qū)域。在右上可以進(jìn)行賬號設(shè)置，退出后臺操作。如圖4-19.</p><p>　　圖4-20 商品管理</p><p>　　商品管理：商品管理包含了商品管理、商品分類、商品參數(shù)、商品屬性、規(guī)格管理、藝術(shù)名家等模塊。在商品列表中可以添加、刪除商品，也可以對商品進(jìn)行篩選，設(shè)置每頁顯示的商品條數(shù)等。如圖4-20.</p><p>　　圖4-21 添加商品參數(shù)</p&

107、gt;<p>　　添加商品參數(shù)：商品參數(shù)中可以選擇添加操作，添加內(nèi)容包括綁定分類、商品名稱、商品排序、增加參數(shù)等。填寫完整信息后，點擊確定就可以添加成功了，放棄添加則點擊返回。如圖4-21.</p><p>　　圖4-22 問答管理</p><p>　　問答管理：問答管理實現(xiàn)對常見問題的歸類解答，在問答管理界面可以對常見問題進(jìn)行添加、刪除操作。展示形式是問題類型，問題描述，問

108、題解答。還可以對每頁顯示的問題條數(shù)進(jìn)行設(shè)置。如圖4-22.</p><p>　　圖4-23 會員管理</p><p>　　會員管理：會員管理實現(xiàn)會員基本信息、等級，藏品的鑒定、養(yǎng)護(hù)的管理。選擇會員后，可進(jìn)行編輯修改和刪除操作，也可以在后臺直接添加會員，填寫會員信息。還可以對每頁顯示的會員數(shù)進(jìn)行設(shè)置。如圖4-23.</p><p>　　圖4-24 文章管理</p

109、><p>　　內(nèi)容管理：內(nèi)容管理實現(xiàn)系統(tǒng)的實時新聞資訊發(fā)布，相關(guān)文章添加。在文章列表中，展示包括文章標(biāo)題、文章分類、是否發(fā)布、文章內(nèi)容等，選擇文章可以進(jìn)行修改、刪除等操作。也可以對每頁顯示的文章篇數(shù)進(jìn)行設(shè)置。如圖4-24.</p><p><b>　　數(shù)據(jù)庫設(shè)計與實現(xiàn)</b></p><p><b>　　數(shù)據(jù)庫表</b><