響應(yīng)式企業(yè)網(wǎng)站設(shè)計(jì)與實(shí)現(xiàn)

1、<p>　　畢 業(yè) 論 文</p><p><b>　　摘 要</b></p><p>　　在信息高速發(fā)展的這個(gè)時(shí)代，網(wǎng)絡(luò)作為現(xiàn)今最為方便快捷的媒介也越來(lái)越被人們接受，并且融入我們的生活。在2015年時(shí)，隨著HTML5在國(guó)內(nèi)的興起，也在不斷的推進(jìn)著信息時(shí)代的發(fā)展，網(wǎng)站也逐漸脫離了傳統(tǒng)的枯燥頁(yè)面風(fēng)格，如今的HTML5比起以前的HTML來(lái)說(shuō)，更容易維護(hù)和管

2、理，而且還能實(shí)現(xiàn)跨平臺(tái)開(kāi)發(fā)，減少開(kāi)發(fā)成本。</p><p>　　本論文主要圍繞寫(xiě)意集團(tuán)的HTML5響應(yīng)式網(wǎng)站為開(kāi)發(fā)主題，用到的也是最必備的三個(gè)技能元素，在布局頁(yè)面時(shí)，用HTML將元素進(jìn)行定義，布局基礎(chǔ)布局；css對(duì)展示的HTML元素布局進(jìn)行定位渲染，然后利用Javascript或者jQuery實(shí)現(xiàn)相應(yīng)的效果和交互。雖然這么看起來(lái)很簡(jiǎn)單，但這里需要認(rèn)真了解的東西很多。在開(kāi)發(fā)前，需要對(duì)這些概念弄清楚，在開(kāi)發(fā)過(guò)程中還要

3、考慮兼容，性能等各種問(wèn)題。</p><p>　　分析并解決實(shí)現(xiàn)中的若干技術(shù)問(wèn)題：介紹企業(yè)官網(wǎng)個(gè)性化頁(yè)面的背景及HTML5響應(yīng)式布局的一般原理；闡述整個(gè)企業(yè)官網(wǎng)的結(jié)構(gòu)及工作原理；分析</p><p>　　實(shí)現(xiàn)中的難點(diǎn)和重點(diǎn)；</p><p>　　關(guān)鍵詞：HTML5; CSS3; 響應(yīng)式; javascript; 網(wǎng)站美化; 交互設(shè)計(jì)</p><p&

4、gt;<b>　　abstract</b></p><p>　　In this era of rapid development of information and network as the most convenient media now increasingly being accepted and integrated into our lives. In 2015, with

5、 the rise of HTML5 in the country, has also been advancing the development of the information age, the site is also moving away from the traditional boring page style, and now HTML5 compared to the previous HTML is easie

6、r to maintain and management, but also to achieve cross-platform development, reduce development costs.</p><p>　　This paper mainly around Freehand Group HTML5 Responsive website development topics, used in t

7、he three most essential elements of skill, in the layout of the page, using HTML to define the elements, layout basic layout; css to display HTML elements positioning layout rendering, then use Javascript or jQuery to ac

8、hieve the appropriate effects and interactions. Although such looks very simple, but here need to understand a lot of serious things. Before development, the need to clarify these concep</p><p>　　Analyze and

9、 solve technical problems in implementation of: The official website of the general principles of corporate background personalized page HTML5 and responsive layout; elaborate structure and working principle of the whole

10、 enterprise official website; Analysis</p><p>　　Implementation difficulties and priorities;</p><p>　　Keywords: HTML5; CSS3; responsive; javascript; website landscaping; Interactive Design目 錄<

11、;/p><p>　　第一章 緒 論6</p><p>　　1.1 本課題研究的背景和目的6</p><p>　　1.2 國(guó)內(nèi)外HTML5響應(yīng)式企業(yè)網(wǎng)站建設(shè)的狀況7</p><p><b>　　1.3本章小結(jié)7</b></p><p>　　第二章 前端開(kāi)發(fā) 及相關(guān)技術(shù)7</p>

12、<p>　　2.1 HTML5前端開(kāi)發(fā)環(huán)境8</p><p>　　2.2 HTML5前端開(kāi)發(fā)工具8</p><p>　　2.3 HTML5前端開(kāi)發(fā)相關(guān)技術(shù)8</p><p>　　2.3.1 javascript簡(jiǎn)介8</p><p>　　2.3.2 javascript基

13、本特點(diǎn)9</p><p>　　2.3.3 css簡(jiǎn)介9</p><p>　　2.3.4 jQuery10</p><p>　　2.4 本章小結(jié)10</p><p>　　第三章 前端布局分析與設(shè)計(jì)10</p><p>　　3.1 前端總體開(kāi)發(fā)流程與設(shè)計(jì)10</p&

14、gt;<p>　　3.1.1 分層開(kāi)發(fā)10</p><p>　　3.1.2 代碼編寫(xiě)11</p><p>　　3.1.3 內(nèi)部測(cè)試與后續(xù)優(yōu)化11</p><p>　　3.2 前端UI設(shè)計(jì)11</p><p>　　3.2.1 模塊分布11</p><p

15、>　　3.2.2 顏色配置12</p><p>　　3.2.3 css元素12</p><p>　　3.3 交互設(shè)計(jì)與UI14</p><p>　　3.4 網(wǎng)站結(jié)構(gòu)布局與設(shè)計(jì)14</p><p>　　3.5.1  網(wǎng)站首頁(yè)結(jié)構(gòu)14</p><p&g

16、t;　　3.5.2  主題鮮明，富有特色14</p><p>　　3.5 網(wǎng)站前臺(tái)頁(yè)面設(shè)計(jì)14</p><p>　　3.5.1 首頁(yè)15</p><p>　　3.5.2 其余子頁(yè)面15</p><p>　　3.7 本章小結(jié)15</p><p>　　第

17、四章 主要功能的實(shí)現(xiàn)15</p><p>　　4.1 界面設(shè)計(jì)15</p><p>　　4.2 具體設(shè)計(jì)文檔15</p><p>　　4.3 前臺(tái)新聞文摘顯示16</p><p>　　4.3.1 網(wǎng)站裝飾風(fēng)格16</p><p>　　4.3.2 網(wǎng)站的鏈接結(jié)構(gòu)

18、16</p><p>　　4.4 可視化設(shè)計(jì)16</p><p>　　4.5 具體實(shí)現(xiàn)技術(shù)16</p><p>　　4.5.1 css在“寫(xiě)意集團(tuán)響應(yīng)式企業(yè)官網(wǎng)”中的應(yīng)用實(shí)例16</p><p>　　4.6 本章小結(jié)18</p><p>　　第五章 總結(jié)18<

19、/p><p><b>　　致謝18</b></p><p><b>　　參考文獻(xiàn)19</b></p><p><b>　　第一章 緒 論</b></p><p>　　1.1 本課題研究的背景和目的</p><p>　　如今的互聯(lián)網(wǎng)已經(jīng)滲透到了我們生活

20、的每一個(gè)層面，網(wǎng)站的內(nèi)容越來(lái)越豐富全面，各大瀏覽器商也在競(jìng)相的開(kāi)發(fā)各種各樣的新的功能，供開(kāi)發(fā)者進(jìn)行開(kāi)發(fā)構(gòu)建出更好的用戶體驗(yàn)，以此來(lái)滿足各種不同需求的瀏覽者。隨機(jī)計(jì)算機(jī)的這些技術(shù)的飛速生長(zhǎng)，手機(jī)的上網(wǎng)率高于傳統(tǒng)PC，而在手機(jī)端上，傳統(tǒng)網(wǎng)站又難以做到兼容所有的設(shè)備尺寸，越來(lái)越多的商家的傳統(tǒng)門(mén)戶官網(wǎng)已經(jīng)不能滿足用戶的體驗(yàn)，各大商家大企業(yè)都開(kāi)始重構(gòu)新的HTML5響應(yīng)式網(wǎng)站</p><p>　　，以求將自己的產(chǎn)品信息和企業(yè)

21、動(dòng)態(tài)，更直接的展示給用戶，并且通過(guò)豐富的交互去優(yōu)化與用戶溝通的過(guò)程。</p><p>　　目前很多的企業(yè)已經(jīng)建立起了自己的響應(yīng)式官網(wǎng)。這些網(wǎng)站的建立使得企業(yè)可以突破傳統(tǒng)的PC媒介，在移動(dòng)網(wǎng)絡(luò)上開(kāi)辟屬于自己的新天地。用戶能在手機(jī)上，隨時(shí)隨地就能看到企業(yè)的最新動(dòng)態(tài)，可以更好的利用用戶的碎片時(shí)間去關(guān)注企業(yè)，網(wǎng)絡(luò)之所以為網(wǎng)，也正是因?yàn)樗哂谐瑫r(shí)空性。人們無(wú)論在哪都應(yīng)該可以進(jìn)行訪問(wèn)，體驗(yàn)空間層面上帶來(lái)的開(kāi)放性。</p

22、><p>　　整個(gè)官網(wǎng)設(shè)置多個(gè)板塊與分頁(yè)面，分別放置相關(guān)內(nèi)容，不同板塊的信息相互獨(dú)立。交互上更多是體驗(yàn)在CSS3的新屬性帶給用戶的新體驗(yàn)，用戶在與官網(wǎng)進(jìn)行交互的方式更加豐富與精彩了。</p><p>　　與傳統(tǒng)官網(wǎng)相比，響應(yīng)式網(wǎng)站不外乎也是企業(yè)介紹，新聞發(fā)布，產(chǎn)品介紹一類(lèi)等。</p><p>　　為何還要花時(shí)間精力和人力去建立和維護(hù)網(wǎng)站呢？是正如上面所說(shuō)：內(nèi)容更加多姿多

23、彩，板塊，內(nèi)容更加豐富，而且能夠相應(yīng)不同屏幕大小，在這個(gè)用手機(jī)多過(guò)PC的時(shí)代，能更好更快地將第一手信息送到用戶手上。</p><p>　　這些都促成了各個(gè)企業(yè)組織新的信息化建設(shè)，構(gòu)建專(zhuān)業(yè)，易于維護(hù)和管理的網(wǎng)站。</p><p>　　我們要構(gòu)建專(zhuān)門(mén)的企業(yè)響應(yīng)式官網(wǎng)，網(wǎng)站前端開(kāi)發(fā)最基本的還是3個(gè)技能：html;css;Javascript,也用到其他部分工具，如PS圖片處理工具，新的HTML5

24、，css3；javascript的工具集jQuery。這些都是開(kāi)發(fā)中最基本的技能。前端開(kāi)發(fā)的過(guò)程中，頁(yè)面的布局將會(huì)用HTML元素進(jìn)行定義和布局，css對(duì)布局元素進(jìn)行元素的定位和畫(huà)面效果的渲染，然后再通過(guò)javascript實(shí)現(xiàn)相對(duì)應(yīng)的網(wǎng)站效果和優(yōu)化用戶交互體驗(yàn)。</p><p>　　1.2 國(guó)內(nèi)外HTML5響應(yīng)式企業(yè)網(wǎng)站建設(shè)的狀況</p><p>　　1、截至2015，有80%的App將全

25、部或部分基于HTML5。這意味著大部分App的內(nèi)容都將是以網(wǎng)頁(yè)的形式呈現(xiàn)，典型的例子包括微信、Facebook、Twitter等。(數(shù)據(jù)來(lái)源：國(guó)際科技媒體 ReadWriteWeb，2015)</p><p>　　2、瀏覽量最高的1000個(gè)H5作品中，42%是心靈雞湯，最高17,358,480 uv;27%是測(cè)試題，最高49,940,339 uv;15%是社交互動(dòng)游戲，最高2,892,047 uv; 5%是大型品

26、牌宣傳，最高551,195 uv。(數(shù)據(jù)來(lái)源：在線h5工具平臺(tái)ih5.cn，2015.9)</p><p>　　3、谷歌瀏覽器于9月1日起不再自動(dòng)播放Flash。 亞馬遜宣布旗下網(wǎng)絡(luò)(包括Amazon.com門(mén)戶在內(nèi))的所有廣告將不再使用Flash。在可預(yù)見(jiàn)的未來(lái)，F(xiàn)lash廣告將被HTML5廣告所替代。</p><p>　　4、朋友圈廣告上線，據(jù)傳起投20萬(wàn)， CPM 40元。詳情外鏈的

27、H5頁(yè)面可以用微信提供的模板，也可以自行定制。</p><p>　　以上的信息反映了H5在內(nèi)容營(yíng)銷(xiāo)的應(yīng)用潛力。出于好奇，筆者又調(diào)研了國(guó)內(nèi)外的幾個(gè)社交平臺(tái)。目前支持H5分享的平臺(tái)：國(guó)內(nèi)的微信、微博，國(guó)外有Facebook、Twitter、LinkedIn，當(dāng)然每個(gè)平臺(tái)分享的形式略有差異。各大主流社交平臺(tái)對(duì)H5分享的支持都是比較友好的，只不過(guò)每個(gè)平臺(tái)的分享接口都需要單獨(dú)的定制。當(dāng)然這也在暗示HTML5的推廣渠道其實(shí)可

28、以更加多元化，并且其在內(nèi)容營(yíng)銷(xiāo)中有著極大的應(yīng)用潛力?！∈聦?shí)上隨著技術(shù)的成熟和各種H5工具的涌現(xiàn)，H5制作已經(jīng)漸漸走向標(biāo)準(zhǔn)化，成本問(wèn)題也隨著一些工具的出現(xiàn)有了極大的改善?；蛟SH5技術(shù)的發(fā)展已經(jīng)超出你的想象，很多問(wèn)題已經(jīng)有了不錯(cuò)的解決方案。所以各大企業(yè)官網(wǎng)轉(zhuǎn)型做響應(yīng)式也是勢(shì)在必得的過(guò)程。</p><p><b>　　1.3本章小結(jié)</b></p><p>　　本章闡述了開(kāi)

29、發(fā)企業(yè)響應(yīng)式官網(wǎng)的研究背景和意義。介紹了國(guó)內(nèi)外HTML5響應(yīng)式網(wǎng)站的發(fā)展?fàn)顟B(tài)對(duì)比目前國(guó)內(nèi)的現(xiàn)狀，說(shuō)明建設(shè)HTML5響應(yīng)式網(wǎng)站的重要性。</p><p><b>　　前端開(kāi)發(fā)及相關(guān)技術(shù)</b></p><p>　　2.1 HTML5前端開(kāi)發(fā)環(huán)境</p><p>　　HTML5網(wǎng)頁(yè)前端開(kāi)發(fā)，實(shí)際也是HTML網(wǎng)頁(yè)開(kāi)發(fā)，HTML5只是萬(wàn)維網(wǎng)的

30、核心語(yǔ)言、標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言下的一個(gè)應(yīng)用超文本標(biāo)記語(yǔ)言（HTML）的第五次重大修改的第五次，其中增添很多新的API功能。網(wǎng)頁(yè)前端主要是由用戶交互設(shè)計(jì)，視覺(jué)體驗(yàn)設(shè)計(jì)等配合，根據(jù)設(shè)計(jì)圖合理的規(guī)劃和布局頁(yè)面，合理編寫(xiě)頁(yè)面代碼，編寫(xiě)易于管理具有一定的層次代碼，挖掘用戶深層次的體驗(yàn)效果，進(jìn)一步去優(yōu)化體驗(yàn)。一般都是由有網(wǎng)頁(yè)三劍客之稱(chēng)的：HTML，css,js來(lái)作為基本構(gòu)建項(xiàng)目語(yǔ)言。在該項(xiàng)目中用到的開(kāi)發(fā)工具是WebStorm。</p>&

31、lt;p>　　2.2 HTML5前端開(kāi)發(fā)工具</p><p>　　(1)WebStorm </p><p>　　WebStorm 是jetbrains公司旗下一款JavaScript 開(kāi)發(fā)工具。被廣大中國(guó)JS開(kāi)發(fā)者譽(yù)為“Web前端開(kāi)發(fā)神器”、“最強(qiáng)大的HTML5編輯器”、“最智能的JavaScript IDE”等。與IntelliJ IDEA同源，繼承了IntelliJ I

32、DEA強(qiáng)大的JS部分的功能。然后根據(jù)設(shè)計(jì)圖制作靜態(tài)頁(yè)面，兼容各主流瀏覽器，并做到IE8下排版不亂，IE9以上響應(yīng)式布局。另外，對(duì)網(wǎng)站做一些維護(hù)已經(jīng)性能的優(yōu)化。整個(gè)網(wǎng)站的詳細(xì)開(kāi)發(fā)過(guò)程在后面將逐步具體介紹。</p><p><b>　　Photoshop</b></p><p>　　Adobe Photoshop,簡(jiǎn)稱(chēng)“PS”,他是由Adobe Systems開(kāi)發(fā)和發(fā)行的

33、圖像處理軟件。Photoshop主要處理以像素所構(gòu)成的數(shù)字圖像。使用其眾多的編修與繪圖工具，可以有效地進(jìn)行圖片編輯工作。ps有很多功能，在圖像、圖形、文字、視頻、出版等各方面都有涉及。</p><p>　?。?）IE tester</p><p>　　IETester是一個(gè)免費(fèi)的WebBrowser控件，讓我們可以在Windows系列的桌面Vista和XP系統(tǒng)中看到IE5.5、IE6、IE

34、7、IE8、IE9、IE10、IE11的 渲染和JavaScript引擎?？梢詭臀覀兡M網(wǎng)頁(yè)在IE5.5、IE6、IE7、IE8、IE9以及IE10等瀏覽器中的兼容性，讓我們可以檢測(cè)到我們做的網(wǎng)站能否兼容各版本的IE瀏覽器，用于觀察兼容性。</p><p>　　2.3 HTML5前端開(kāi)發(fā)相關(guān)技術(shù)</p><p>　　2.3.1 javascript簡(jiǎn)介</p>

35、;<p>　　Javascript是一種直譯式腳本語(yǔ)言。是一種動(dòng)態(tài)類(lèi)型、弱類(lèi)型、基于原型的語(yǔ)言，內(nèi)置支持類(lèi)型，具有自己獨(dú)特的垃圾回收等機(jī)制，他的解釋器被稱(chēng)為Javascript引擎，為瀏覽器的一部分，目前最新的javascript引擎為V8引擎它是使用C++開(kāi)發(fā)出來(lái)的，并在谷歌瀏覽器中使用。Javascript廣泛用于客戶端的腳本語(yǔ)言，最早是在HTML（標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言下的一個(gè)應(yīng)用）網(wǎng)頁(yè)上使用，用來(lái)給HTML網(wǎng)頁(yè)增加動(dòng)態(tài)功

36、能。</p><p>　　它的出現(xiàn)，起初只是進(jìn)行簡(jiǎn)單的信息和用戶之間的一種實(shí)時(shí)的，動(dòng)態(tài)的，可交互的腳本表達(dá)能力?；贑GI靜態(tài)的HTML頁(yè)面將可以通過(guò)javascript提供動(dòng)態(tài)實(shí)時(shí)信息，并對(duì)客戶操作進(jìn)行反饋。目前它是眾多腳本語(yǔ)言中較為優(yōu)秀的一種，隨著HTML5的出現(xiàn)，javascript的功能已經(jīng)擴(kuò)展到編寫(xiě)后臺(tái)開(kāi)發(fā)。配合HTML5就能實(shí)現(xiàn)跨平臺(tái)webAPP的開(kāi)發(fā)。因此，掌握好javascript腳本語(yǔ)言的編程方

37、法是目前我們必須去日益關(guān)心和學(xué)習(xí)的。</p><p>　　2.3.2 javascript基本特點(diǎn)</p><p>　?。?)  基于對(duì)象的語(yǔ)言    </p><p>　　javascript也一種基于對(duì)象的語(yǔ)言，可以看作是一種面向?qū)ο缶幊痰恼Z(yǔ)言。這意味著它能像其他語(yǔ)言一樣聲明與運(yùn)用自己已經(jīng)創(chuàng)建

38、的對(duì)象。因此，許多功能可以來(lái)自于腳本環(huán)境中對(duì)象的方法與腳本的相互作用。 </p><p>　　(2)  簡(jiǎn)單性     </p><p>　　javascript的簡(jiǎn)單性主要體現(xiàn)在：它是一種弱語(yǔ)言腳本，對(duì)使用的數(shù)據(jù)類(lèi)型沒(méi)做嚴(yán)格的聲明要求,而且javascript是基于Java基本語(yǔ)句和控制的腳本語(yǔ)言,使其設(shè)計(jì)簡(jiǎn)

39、單緊湊</p><p>　　(3)  安全性     </p><p>　　javascript是一種安全性語(yǔ)言，它不允許訪問(wèn)本地的硬盤(pán)資料，不能將數(shù)據(jù)存入到服務(wù)器上，不允許對(duì)網(wǎng)絡(luò)文檔進(jìn)行修改和刪除，javascript安全限制中有同源策略的保護(hù)，一段腳本只能讀取來(lái)自同一來(lái)源的窗口和文檔的屬性,這里的同一來(lái)源指的是主機(jī)名

40、、協(xié)議和端口號(hào)的組合。只能通過(guò)瀏覽器實(shí)現(xiàn)信息瀏覽或動(dòng)態(tài)交互。從而有效地防止數(shù)據(jù)的丟失。而且</p><p>　　(4)  動(dòng)態(tài)性     </p><p>　　java script是動(dòng)態(tài)的，它可以直接通過(guò)檢測(cè)用戶和客戶在瀏覽器上做出的動(dòng)作并做出相應(yīng)，而無(wú)須經(jīng)過(guò)Web服務(wù)程序，它對(duì)用戶的反應(yīng)相應(yīng)，是采用事件驅(qū)動(dòng)

41、的方式進(jìn)行的。事件驅(qū)動(dòng)就是指在頁(yè)面中執(zhí)行了某種操作所產(chǎn)生的特定事件。比如單擊事件，滾輪事件，鼠標(biāo)移動(dòng)事件。當(dāng)這些事件被觸發(fā)時(shí)就能引起相對(duì)應(yīng)的事件程序響應(yīng)。</p><p>　　2.3.3 css簡(jiǎn)介</p><p>　　層疊樣式表是一種用來(lái)表現(xiàn)HTML（標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的一個(gè)應(yīng)用）或XML（標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的一個(gè)子集）等文件樣式的計(jì)算機(jī)語(yǔ)言。是用來(lái)進(jìn)行網(wǎng)頁(yè)風(fēng)格修飾的，可以有效地對(duì)

42、各個(gè)標(biāo)簽的樣式進(jìn)行統(tǒng)一的修改。</p><p>　　CSS的全名中，Cascading有“層疊”的意思，也就是說(shuō)在同一個(gè)web頁(yè)面中可以同時(shí)存在多個(gè)樣式表，但這些樣式表中的樣式，會(huì)根據(jù)他們所在的位置，擁有不同的優(yōu)先級(jí)，優(yōu)先級(jí)越高的，就會(huì)在最終顯示出來(lái)。樣式表插入方法分為3種：(1) 內(nèi)聯(lián)式樣式表；(2)嵌入式樣式表；(3)外部式樣式表； </p><p>　　CSS某種

43、程度上來(lái)說(shuō)是擴(kuò)展了HTML，但不能用來(lái)替換HTML，也就是說(shuō)CSS不能脫離HTML，它只是一種輔助修飾頁(yè)面的“工具”，除了可以擴(kuò)展HTML默認(rèn)的樣式設(shè)定外，CSS讓網(wǎng)站的設(shè)計(jì)樣式維護(hù)更加方便搞笑，主要體現(xiàn)是為：減少圖片的使用率，方便管理樣式表樣式，設(shè)置公用樣式，樣式分類(lèi)設(shè)置調(diào)用。</p><p>　　CSS目前最新版本為CSS3，是能夠真正做到網(wǎng)頁(yè)表現(xiàn)與內(nèi)容分離的一種樣式設(shè)計(jì)語(yǔ)言。相對(duì)于傳統(tǒng)HTML的表現(xiàn)而言，C

44、SS能夠?qū)W(wǎng)頁(yè)中的對(duì)象的位置排版進(jìn)行像素級(jí)的精確控制，支持幾乎所有的字體字號(hào)樣式，擁有對(duì)網(wǎng)頁(yè)對(duì)象和模型樣式編輯的能力，并能夠進(jìn)行初步交互設(shè)計(jì)，是目前基于文本展示最優(yōu)秀的表現(xiàn)設(shè)計(jì)語(yǔ)言。CSS能夠根據(jù)不同使用者的理解能力，簡(jiǎn)化或者優(yōu)化寫(xiě)法，針對(duì)各類(lèi)人群，有較強(qiáng)的易讀性。</p><p>　　2.3.4 jQuery</p><p>　　JQuery是繼prototype之后又一個(gè)優(yōu)秀

45、的Javascript庫(kù)。它是輕量級(jí)的js庫(kù) ，它兼容CSS3，還兼容各種瀏覽器（IE 6.0+, FF1.5+, Safari 2.0+, Opera 9.0+），jQuery2.0及后續(xù)版本將不再支持IE6/7/8瀏覽器。jQuery使用戶能更方便地處理HTML（標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言下的一個(gè)應(yīng)用）、events、實(shí)現(xiàn)動(dòng)畫(huà)效果，并且方便地為網(wǎng)站提供AJAX交互。jQuery還有一

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

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

48、元素、制作動(dòng)畫(huà)效果、事件處理、使用Ajax以及其他功能。除此以外，jQuery提供API讓開(kāi)發(fā)者編寫(xiě)插件。其模塊化的使用方式使開(kāi)發(fā)者可以很輕松的開(kāi)發(fā)出功能強(qiáng)大的靜態(tài)或動(dòng)態(tài)網(wǎng)頁(yè)。</p><p><b>　　2.4 本章小結(jié)</b></p><p>　　本章介紹了開(kāi)發(fā)企業(yè)響應(yīng)式網(wǎng)站前端所需要用到的開(kāi)發(fā)工具其運(yùn)行環(huán)境，同時(shí)講述了相關(guān)的前端開(kāi)發(fā)語(yǔ)言，比如：Java

49、script，css，Jquery等。以便于在后面的開(kāi)發(fā)中對(duì)這些技術(shù)有深刻的理解</p><p>　　第三章 前端布局分析與設(shè)計(jì)</p><p>　　3.1 前端總體開(kāi)發(fā)流程與設(shè)計(jì)</p><p>　　Web前端開(kāi)發(fā)與其他平臺(tái)開(kāi)發(fā)不一樣，它是一個(gè)先易后難的學(xué)習(xí)曲線，主要包括三個(gè)基本技能要素：HTML,CSS,和Javascript，所以前端工程師不僅要掌握

50、這些基本技能外，還要去學(xué)習(xí)網(wǎng)站的性能優(yōu)化，SEO和與后臺(tái)服務(wù)器端交互的基礎(chǔ)知識(shí)，而且還要善于利用各種測(cè)試輔助工具輔助開(kāi)發(fā)，例如IEtext，google的debug，還要具有一定的溝通能力，協(xié)調(diào)美工設(shè)計(jì)與后臺(tái)開(kāi)發(fā)人員，還要掌握如何封裝代碼組件，增加代碼維護(hù)性，代碼的易用性，瀏覽器兼容與適配，面向?qū)ο蟮木幊趟枷?，等等?lt;/p><p>　　3.1.1 分層開(kāi)發(fā)</p><p>　　

51、在響應(yīng)式企業(yè)網(wǎng)站的具體概要確定之后，就要著手進(jìn)行分層開(kāi)發(fā)的劃分，根據(jù)項(xiàng)目?jī)?nèi)容的不同，劃分出不同的功能模塊，分步完成，以便合理地安排開(kāi)發(fā)時(shí)間，在有限的時(shí)間內(nèi)，有條理地完成模塊和需要功能，減少時(shí)間的浪費(fèi)，降低開(kāi)發(fā)成本，提高開(kāi)發(fā)效率。整個(gè)分層開(kāi)發(fā)大致分為總體結(jié)構(gòu)搭建，模塊制作，頁(yè)面設(shè)置制作，底層JS腳本搭建，JS交互效果，內(nèi)部測(cè)試，bug修復(fù)，代碼優(yōu)化。</p><p>　　3.1.2 代碼編寫(xiě)</p&

52、gt;<p>　　當(dāng)總規(guī)劃和設(shè)計(jì)圖初稿完成后，就可以進(jìn)入代碼編寫(xiě)階段，進(jìn)行前期的前端開(kāi)發(fā)，大致流程如下：搭建大致的HTML結(jié)構(gòu)，然后等設(shè)計(jì)圖完成后再對(duì)頁(yè)面進(jìn)行細(xì)節(jié)調(diào)整布局，并添加頁(yè)面樣式修改完善，最后搭建javascript腳本開(kāi)發(fā)，嵌套腳本文件，實(shí)現(xiàn)逐層開(kāi)發(fā)，減少整體消耗的時(shí)間，使得有更多的時(shí)間對(duì)產(chǎn)品進(jìn)行修改，優(yōu)化和完善。</p><p>　　確定了流程后，還需要對(duì)產(chǎn)品原型進(jìn)行分析，研究，把復(fù)用性

53、高的部分劃分出來(lái)，重點(diǎn)標(biāo)記，在以后的代碼編寫(xiě)過(guò)程中，封裝成一個(gè)復(fù)用組件，方便調(diào)用。并且根據(jù)二三級(jí)頁(yè)面的設(shè)計(jì)布局，搭建統(tǒng)一的大致框架。</p><p>　　前端設(shè)計(jì)風(fēng)格樣式確定以后，進(jìn)行通用組件模塊樣式的設(shè)計(jì)（例如按鈕，分頁(yè)，字體樣式等）</p><p>　　在代碼編寫(xiě)的過(guò)程中，要做到遵守標(biāo)準(zhǔn)的w3c行業(yè)標(biāo)準(zhǔn)，在編寫(xiě)代碼的時(shí)候，盡可能的實(shí)現(xiàn)向下兼容，減少耦合性，增加擴(kuò)展自由度，以便日后功能等

54、各方面的修改。</p><p>　　在整個(gè)過(guò)程中，先劃分好各模塊的開(kāi)發(fā)順序，先編寫(xiě)大概的HTML布局，設(shè)計(jì)圖完成后在進(jìn)行CSS的開(kāi)發(fā)，大大節(jié)省開(kāi)發(fā)時(shí)間，提高開(kāi)發(fā)效率，同時(shí)也體現(xiàn)了模塊化開(kāi)發(fā)的重要性，強(qiáng)調(diào)編寫(xiě)規(guī)范，這樣便于后期維護(hù)，減少維護(hù)成本。模塊化開(kāi)發(fā)時(shí)工程師必備的技能，是敏捷開(kāi)發(fā)必須的，易于復(fù)用與組件管理。</p><p>　　3.1.3 內(nèi)部測(cè)試與后續(xù)優(yōu)化</p>

55、;<p>　　前端內(nèi)部測(cè)試，主要是觀察頁(yè)面與設(shè)計(jì)圖的差異，優(yōu)化頁(yè)面細(xì)節(jié)樣式，及時(shí)發(fā)現(xiàn)問(wèn)題并且進(jìn)行修改。并且利用IEtext查看頁(yè)面的兼容性，當(dāng)所有細(xì)節(jié)與兼容問(wèn)題修改完畢后，就要對(duì)制作文件進(jìn)行代碼優(yōu)化，盡可能的壓縮文件大小和減少外部http的鏈接請(qǐng)求數(shù)，優(yōu)化訪問(wèn)速度。</p><p>　　該流程是參照公司開(kāi)發(fā)流程制定出來(lái)的，以經(jīng)過(guò)很長(zhǎng)時(shí)間的磨合跟改進(jìn)，盡管雖然不是很完美，但是很適合我們現(xiàn)在開(kāi)發(fā)這個(gè)項(xiàng)目

56、的需求，優(yōu)點(diǎn)也是很明顯的，能更好的應(yīng)對(duì)高強(qiáng)度，高質(zhì)量的開(kāi)發(fā)需求，代碼更加容易控制和修改優(yōu)化，充分利用時(shí)間，提高了開(kāi)發(fā)俠侶</p><p>　　3.2 前端UI設(shè)計(jì)</p><p>　　3.2.1 模塊分布</p><p>　　UI即User Interface（用戶界面）的簡(jiǎn)稱(chēng)。UI設(shè)計(jì)則是指對(duì)頁(yè)面的人機(jī)交互、操作邏輯、界面美觀的整體設(shè)計(jì)。好的U

57、I設(shè)計(jì)不僅是讓頁(yè)面變得有個(gè)性有品味，還要讓頁(yè)面的操作變得舒適、簡(jiǎn)單、自由，充分體現(xiàn)頁(yè)面的定位和特點(diǎn)。</p><p>　　所以UI設(shè)計(jì)師設(shè)計(jì)中最重要的一點(diǎn)，也可以發(fā)揮出更多創(chuàng)意的設(shè)計(jì)想法；其中體現(xiàn)出層次感設(shè)計(jì)的就是從屬關(guān)系，點(diǎn)構(gòu)成線，線構(gòu)成面，主次清晰明了。圖3-1為寫(xiě)意集團(tuán)響應(yīng)式企業(yè)官網(wǎng)首頁(yè)：</p><p>　　圖3-1 寫(xiě)意集團(tuán)響應(yīng)式企業(yè)官網(wǎng)首屏著陸頁(yè)</p><

58、;p>　　首頁(yè)的logo還設(shè)計(jì)了一個(gè)動(dòng)畫(huà)，整個(gè)著陸頁(yè)使用了一張滿屏大圖。</p><p>　　3.2.2 顏色配置</p><p>　　產(chǎn)生豐富色彩的三原色是紅，綠，藍(lán)，也就是RGB，十六進(jìn)制是00 00 00， 例如經(jīng)常寫(xiě)的red，color:#FF0000； 縮寫(xiě)color:#F00；color:gray(#808080)；是比較

59、深的灰色。所謂鄰近色，就是在色帶上相鄰近的顏色，例如綠色和藍(lán)色，紅色和黃色就互為鄰近色。采用鄰近色設(shè)計(jì)網(wǎng)頁(yè)可以使網(wǎng)頁(yè)避免色彩雜亂，易于達(dá)到頁(yè)面的和諧統(tǒng)一。我們網(wǎng)站上用的色彩系是屬于灰白色系這個(gè)選擇符合網(wǎng)站的整體風(fēng)格，不可能把網(wǎng)站設(shè)計(jì)成五顏六色，因?yàn)閷?xiě)意集團(tuán)是一個(gè)從事建筑行業(yè)的企業(yè)，所以網(wǎng)站要體現(xiàn)一種簡(jiǎn)潔，自然，穩(wěn)重的色彩風(fēng)格。背景色一般采用素淡清雅的色彩，避免采用花紋復(fù)雜的圖片和純度很高的色</p><p>　　

60、背景色大量六百，同時(shí)背景色要與文字的排列對(duì)比強(qiáng)烈一些。首頁(yè)的頂端使用，滿屏的圖片下面用大量六百這兩個(gè)部分過(guò)度的很自然。 </p><p>　　在文字部分用黑色文字當(dāng)鼠標(biāo)移動(dòng)到相關(guān)文字上面時(shí)文字顏色變成紅色。不同的文字顏色會(huì)產(chǎn)生不同的效果，這能給瀏覽者一種層次感，方便與閱讀。 </p><p>　　如果要大面積留白一定要對(duì)內(nèi)容的排版有比較充足的經(jīng)驗(yàn)，不然不但不能讓用戶感到

61、留白的自由感反而多了一絲內(nèi)容空洞的想法，如果是較深的背景下，禁止大面積使用加粗文字。如圖3-2所示：</p><p>　　圖3-2 網(wǎng)站首頁(yè)導(dǎo)航字體顏色變化</p><p>　　3.2.3 css元素 </p><p>　　CSS塊狀元素(block)：</p><p>　　CSS塊狀元素非?！鞍缘馈保?#160;總是另起一行開(kāi)始，

62、可對(duì)其設(shè)置高度，寬度，行高等等，常用的有：div p table h1 ul dl 等等。 </p><p>　　CSS內(nèi)聯(lián)元素(inline):</p><p>　　CSS內(nèi)聯(lián)元素和其它內(nèi)聯(lián)元素可以同時(shí)都在一行上；高度，行高以及頂，底邊距不可改變；常用的有：a strong font im

63、g input span small label等等  </p><p>　　CSS行內(nèi)塊狀元素（inline-block）:</p><p>　　Display: inline-block，該樣式可將元素改為行內(nèi)塊狀元素，將元素對(duì)象呈遞為內(nèi)聯(lián)元素對(duì)象，但是元素對(duì)象的內(nèi)容作為塊對(duì)象元素呈遞。旁邊的內(nèi)聯(lián)對(duì)象元素會(huì)被呈遞在同

64、一行內(nèi)，允許空格，即可以讓元素同時(shí)擁有塊狀元素設(shè)置寬高行高等特性，同時(shí)也具有行內(nèi)元素的同一行內(nèi)顯示。但對(duì)于這個(gè)屬性不是所有瀏覽器都識(shí)別，兼容性較差，而且會(huì)留下默認(rèn)的外邊距，而且不能通過(guò)margin：0樣式去掉，解決方法是利用浮動(dòng)float來(lái)解決。</p><p><b>　　CSS盒模型:</b></p><p>　　網(wǎng)頁(yè)設(shè)計(jì)中常聽(tīng)的屬性名：內(nèi)容(content)、填

65、充(padding)、邊框(border)、邊界(margin)， CSS盒子模式都具備這些屬性。</p><p>　　這些屬性我們可以把它轉(zhuǎn)移到我們?nèi)粘Ｉ钪械暮凶樱ㄏ渥樱┥蟻?lái)理解，日常生活中所見(jiàn)的盒子也就是能裝東西的一種箱子，也具有這些屬性，所以叫它盒子模式。</p><p>　　CSS盒子模型就是在網(wǎng)頁(yè)設(shè)計(jì)中經(jīng)常用到的CSS技術(shù)所使用的一種思維模型。</p><p

66、>　　內(nèi)邊距padding：元素的內(nèi)邊距在邊框和內(nèi)容區(qū)之間。padding:20px 15px 5px 10px;上 20px右 15px下 5px左 10px；padding:10px 5px 15px; 上右左下padding:10px 15px;上右下左<div style="width:1

67、00px; padding:0 20px;">無(wú)標(biāo)題文檔</div>這個(gè)的寬度實(shí)質(zhì)已經(jīng)增加了40px外邊距margin：圍繞在元素邊框的空白區(qū)域是外邊距。margin支持負(fù)值，在頁(yè)面布局中，應(yīng)該大膽的用，可以解決很多問(wèn)題。最常用的就是div居中:margin:0 auto;當(dāng)然一定要固定寬度。<div style=“width:200px;text-align:c

68、enter;”><div style=“width:100px;”>無(wú)標(biāo)題文檔</div></div> 這個(gè)屬性是無(wú)法居中的，如圖所示3-3所示：</p><p><b>　　3-3 盒子模型</b></p><p>　　3.3 交互設(shè)計(jì)與UI </p><p>　　交互設(shè)

69、計(jì)是一種目標(biāo)導(dǎo)向設(shè)計(jì)，所有的工作內(nèi)容都是在圍繞著用戶行為去設(shè)計(jì)的。交互設(shè)計(jì)師通過(guò)設(shè)計(jì)用戶的行為，讓用戶更方便更有效率的去完成產(chǎn)品業(yè)務(wù)目標(biāo)，獲得愉快的用戶體驗(yàn)。如果是廣義的UI設(shè)計(jì)，應(yīng)該包括原型設(shè)計(jì)、交互設(shè)計(jì)、視覺(jué)設(shè)計(jì)。狹義的UI往往只是人們看到的最后一個(gè)環(huán)節(jié)UI視覺(jué)設(shè)計(jì)，交互是當(dāng)用戶發(fā)生動(dòng)作事件，所產(chǎn)生的反映。比如點(diǎn)擊彈出下拉菜單，瀏覽過(guò)鏈接的顏色變紫，這都是非常細(xì)微的交互，但卻處處體現(xiàn)著用戶體驗(yàn)。交互設(shè)計(jì)更多是對(duì)用戶行為響應(yīng)的設(shè)計(jì)

70、,UI視覺(jué)設(shè)計(jì)，更多是界面的外觀靜態(tài)設(shè)計(jì)。</p><p>　　所以這種情況下，交互設(shè)計(jì)尤為重要，既不能失去UI設(shè)計(jì)的特性，又要確保UI設(shè)計(jì)師利用其專(zhuān)業(yè)知識(shí)在視覺(jué)結(jié)構(gòu)內(nèi)進(jìn)行充分發(fā)揮，這是一種藝術(shù)</p><p>　　3.4 網(wǎng)站結(jié)構(gòu)布局與設(shè)計(jì)</p><p>　　3.5.1  網(wǎng)站首頁(yè)結(jié)構(gòu)</p><p>　　實(shí)

71、際內(nèi)容占據(jù)網(wǎng)頁(yè)的大部分空間，為50%～80%，導(dǎo)航部分不超過(guò)20%。顏色的選擇以灰白色為主，沒(méi)有使用太多的顏色來(lái)修飾某個(gè)對(duì)象，此外，正，一般字色為默認(rèn)的近黑色，并且用了不同的背景色條或大圖與留白區(qū)區(qū)分正文區(qū)與其他功能區(qū)。為了提高網(wǎng)頁(yè)的可讀性，標(biāo)題區(qū)，標(biāo)題行和正文區(qū)使用了不同大小的字體，正文使用的是靜止的文字，且字體足夠大，顏色各方面易于辨認(rèn)，以便于閱讀。 </p><p>　　寫(xiě)意集團(tuán)響應(yīng)式企業(yè)官網(wǎng)網(wǎng)站

72、主要用來(lái)進(jìn)行公司信息發(fā)布，公司資源展示。作為一個(gè)網(wǎng)站，應(yīng)該由一些相關(guān)及相對(duì)獨(dú)立的模塊整合而成。本網(wǎng)站系統(tǒng)主要包括以下幾個(gè)主要頁(yè)面及幾個(gè)大的模塊，每個(gè)頁(yè)面包含豐富的內(nèi)容，每個(gè)大的模塊下又細(xì)分為幾個(gè)的功能模塊。  </p><p>　　制作前臺(tái)頁(yè)面模塊，包括主頁(yè)及各個(gè)子頁(yè)面，建立各個(gè)頁(yè)面之間的相關(guān)鏈接，。整體網(wǎng)站遵循寫(xiě)意集團(tuán)響應(yīng)式企業(yè)官網(wǎng)網(wǎng)站的設(shè)計(jì)思路，擁有完善的功能，風(fēng)格要求簡(jiǎn)潔大方不單調(diào)。各個(gè)

73、子頁(yè)面都可正常返回主頁(yè)以及正確連接到各個(gè)子頁(yè)面。功能要求使用簡(jiǎn)單全面，容易操作。</p><p>　　3.5.2  主題鮮明，富有特色 </p><p>　　在目標(biāo)明確的基礎(chǔ)上，完成網(wǎng)站的構(gòu)思創(chuàng)意即總體設(shè)計(jì)方案。對(duì)網(wǎng)站的整體風(fēng)格和特色做出定位，規(guī)劃網(wǎng)站的組織結(jié)構(gòu)。</p><p>　　整個(gè)首頁(yè)大量運(yùn)用動(dòng)畫(huà)以及目前常用的簡(jiǎn)單卻用戶體驗(yàn)好的

74、效果，要做到主題鮮明突出，力求簡(jiǎn)潔，要點(diǎn)明確，以簡(jiǎn)單動(dòng)作與交互讓用戶更好的了解網(wǎng)站的主題內(nèi)容，吸引對(duì)本站點(diǎn)有需求的人的視線，對(duì)無(wú)關(guān)的人員也能留下一定的印象。對(duì)于一些LOGO標(biāo)志也都給充分利用起來(lái)，在首頁(yè)的logo首次加載的時(shí)候做了一個(gè)logo動(dòng)畫(huà)，以其來(lái)吸引用戶注意力。調(diào)動(dòng)一切手段充分表現(xiàn)網(wǎng)站的個(gè)性和情趣，突出個(gè)性，這樣才能夠辦出網(wǎng)站的特色。</p><p>　　3.5 網(wǎng)站前臺(tái)頁(yè)面設(shè)計(jì)</p&g

75、t;<p>　　寫(xiě)意集團(tuán)響應(yīng)式企業(yè)官網(wǎng)主要包括：首頁(yè)，關(guān)于寫(xiě)意，企業(yè)文化，新聞中心，人才招聘，聯(lián)系我們等9個(gè)子頁(yè)面。制作過(guò)程如下：</p><p><b>　　3.5.1 首頁(yè)</b></p><p>　　網(wǎng)站制作過(guò)程：首先利用Photoshop以寬度為1920px，高度自動(dòng)排列，制作了網(wǎng)站的首頁(yè)設(shè)計(jì)圖，之后使用Webstorm中用布局出整個(gè)首

76、頁(yè)的大體布局格式，主要分為6部分，雖然設(shè)計(jì)圖寬為1920，但當(dāng)屏幕不適配1920寬度的時(shí)候，對(duì)其進(jìn)行自適應(yīng)滿屏，并且因?yàn)橐獙?shí)現(xiàn)一個(gè)“滾一屏”效果，故每個(gè)板塊高度也要自適應(yīng)高度。然后通過(guò)CSS樣式來(lái)調(diào)布局樣式以及圖片，文字的位子。主頁(yè)包括的內(nèi)容主要有：網(wǎng)站的域名，導(dǎo)航條，LOGO，版權(quán)。導(dǎo)航條又包含首頁(yè)，關(guān)于寫(xiě)意，企業(yè)文化，新聞中心，人才招聘，聯(lián)系我們等。</p><p>　　3.5.2 其余子頁(yè)面<

77、;/p><p>　　子頁(yè)面的設(shè)計(jì)風(fēng)格基本一致，導(dǎo)航欄跟隨瀏覽器滾動(dòng)，始終貼在瀏覽器窗口上方，下面是滿屏幕寬度的banner圖，下方便是各大模塊內(nèi)容的顯示；制作過(guò)程中采用的制作方法和調(diào)用的模塊內(nèi)容跟上一個(gè)差不多</p><p><b>　　3.7 本章小結(jié)</b></p><p>　　本章主要介紹了寫(xiě)意集團(tuán)響應(yīng)式企業(yè)官網(wǎng)的具體布局，具體結(jié)構(gòu)

78、。也說(shuō)明了</p><p>　　前端頁(yè)面從設(shè)計(jì)到代碼編寫(xiě)的基本工作流程，講述了界面UI設(shè)計(jì)和交互設(shè)計(jì)中的一些理論和真是設(shè)計(jì)效果。</p><p>　　第四章 主要功能的實(shí)現(xiàn)</p><p><b>　　4.1 界面設(shè)計(jì)</b></p><p>　　完善的網(wǎng)站內(nèi)容。網(wǎng)站的整體顏色：灰白色為導(dǎo)航顏色；主體顏色：灰白

79、色；字體：微軟雅黑；行距：150%。 </p><p>　　網(wǎng)站統(tǒng)一頂部為導(dǎo)航條，首頁(yè)，關(guān)于寫(xiě)意，企業(yè)文化，新聞中心，人才招聘，聯(lián)系我們。 </p><p>　　首頁(yè)網(wǎng)站上中部：banner圖片。 </p><p>　　網(wǎng)站中部：網(wǎng)站信息；站點(diǎn)數(shù)據(jù)；圖文信息。  </p><p>　　網(wǎng)站底部

80、：網(wǎng)站/版面制作；版權(quán)信息。</p><p>　　其中網(wǎng)站的導(dǎo)航條會(huì)一路跟隨屏幕滾動(dòng)</p><p>　　4.2 具體設(shè)計(jì)文檔</p><p><b>　　內(nèi)容和功能設(shè)計(jì)</b></p><p>　　這個(gè)企業(yè)網(wǎng)站主要實(shí)現(xiàn)企業(yè)信息展示，公告展示等功能。先明確各板塊提供的主要功能：</p><p

81、><b>　　首頁(yè)功能板塊：</b></p><p>　　旗下品牌（默認(rèn)灰色，當(dāng)鼠標(biāo)移上去有一個(gè)變彩色的過(guò)程，起聚焦）；</p><p>　　服務(wù)項(xiàng)目（默認(rèn)灰色，當(dāng)鼠標(biāo)移上去有一個(gè)變彩色的過(guò)程，起聚焦）；</p><p>　　服務(wù)領(lǐng)域（響應(yīng)式九宮格，當(dāng)鼠標(biāo)移上去，圖片會(huì)以中心點(diǎn)向外放大）；</p><p>　　企業(yè)

82、榮耀（靜態(tài)數(shù)據(jù)，顯示企業(yè)參與的項(xiàng)目）</p><p>　　合作商家（眾多合作商家logo排列）</p><p><b>　　版權(quán)（版權(quán)信息）</b></p><p>　　子頁(yè)面功能如子頁(yè)面標(biāo)題所示；</p><p>　　4.3 前臺(tái)新聞文摘顯示</p><p>　　4.3.1 

83、網(wǎng)站裝飾風(fēng)格</p><p>　　采用了灰白色為主導(dǎo)航顏色，首頁(yè)中運(yùn)用滾一屏效果，以及各種css動(dòng)畫(huà)或者javascript效果，使整個(gè)網(wǎng)站看上去雖大部分為灰白色，但不失其靈動(dòng)。</p><p>　　4.3.2 網(wǎng)站的鏈接結(jié)構(gòu)</p><p>　　校園網(wǎng)站的主要鏈接關(guān)系如下： </p><p>　　首頁(yè)，關(guān)于寫(xiě)意，企業(yè)文化

84、，新聞中心，人才招聘，聯(lián)系我們等</p><p>　　其中關(guān)于寫(xiě)意，企業(yè)文化，新聞中心，有一個(gè)Javascript效果，整合在一個(gè)按鈕上，用一個(gè)下拉方式展示</p><p><b>　　4.4 可視化設(shè)計(jì)</b></p><p>　　網(wǎng)站可視化設(shè)計(jì)的主要目的是提供給用戶一個(gè)關(guān)于網(wǎng)站的信息展示方案，一個(gè)良好有效的網(wǎng)站可視化設(shè)計(jì)能給用戶留

85、下深刻的印象，使得用戶能夠自然，友好的瀏覽Web站點(diǎn)所提供的信息，也是網(wǎng)站設(shè)計(jì)中重要的一環(huán)。 </p><p>　　可視化設(shè)計(jì)最重要的是確定網(wǎng)站的頁(yè)面布局。然后設(shè)計(jì)網(wǎng)頁(yè)的表現(xiàn)框架，建立頁(yè)面模型。 </p><p>　　4.5 具體實(shí)現(xiàn)技術(shù)</p><p>　　4.5.1 css在“寫(xiě)意集團(tuán)響應(yīng)式企業(yè)官網(wǎng)”中的應(yīng)用實(shí)例</

86、p><p>　　在該網(wǎng)站中使用了大量css動(dòng)畫(huà)，使頁(yè)面有了特殊的顯示效果</p><p>　　寫(xiě)意集團(tuán)響應(yīng)式企業(yè)官網(wǎng)中CSS樣式表使用的部分代碼：</p><p>　　.serviceArea_main ul li:hover a img{</p><p>　　transform: scale3d(1.1,1.1,1);</p>&

87、lt;p>　　-webkit-transform: scale3d(1.1,1.1,1);</p><p>　　-moz-transform: scale3d(1.1,1.1,1);</p><p>　　-o-transform: scale3d(1.1,1.1,1);</p><p>　　-ms-transform: scale3d(1.1,1.1,1);&

88、lt;/p><p>　　position: relative;</p><p><b>　　}</b></p><p>　　.serviceArea_main ul li:hover .s_Area_gai p{</p><p>　　transform-style: preserve-3d;</p><p

89、><b>　　}</b></p><p>　　.serviceArea_main ul li a img{</p><p>　　transition:1s;</p><p><b>　　top: 0;</b></p><p><b>　　left:0;</b></p

90、><p>　　z-index:9;</p><p>　　width: 100%;</p><p>　　vertical-align: top;</p><p><b>　　}</b></p><p>　　以上樣式是用于設(shè)置首頁(yè)的服務(wù)領(lǐng)域一部分的CSS效果，當(dāng)鼠標(biāo)移上去的時(shí)候，首先圖片上方會(huì)有一個(gè)黑色的

91、遮罩，然后圖片有一個(gè)逐漸放大的效果，但不撐開(kāi)外面的DIV，其中transform: scale3d(1.1,1.1,1);為控制圖片縮放，其下方還有加了-webkit-，-moz-，-o-，-ms-前綴的樣式，目的是兼容別的瀏覽器廠商；transition:1s;改樣式用于設(shè)定動(dòng)畫(huà)的過(guò)渡時(shí)間，如果缺少則無(wú)法上述的圖片縮放樣式將沒(méi)有動(dòng)畫(huà)，而只是直接把圖片放大1.1倍；</p><p>　　4.5.2 應(yīng)用

92、Javascript設(shè)計(jì)網(wǎng)頁(yè)</p><p>　　JavaScript是一種基于對(duì)象(Object)和事件驅(qū)動(dòng)(Event Driven)并具有安全性能的腳本語(yǔ)言。使用它的目的是與HTML超文本標(biāo)記語(yǔ)言，Java 腳本語(yǔ)言（Java小程序）一起實(shí)現(xiàn)在一個(gè)Web頁(yè)面中鏈接多個(gè)對(duì)象，與Web客戶交互作用，從而可以開(kāi)發(fā)客戶端的應(yīng)用程序等。它是通過(guò)嵌入或調(diào)入在標(biāo)準(zhǔn)的HTML語(yǔ)言中實(shí)現(xiàn)的。它的出現(xiàn)彌補(bǔ)了

93、HTML語(yǔ)言的缺陷[17]。 </p><p>　　JavaScript的出現(xiàn)使得信息和用戶之間不僅只是一種顯示和瀏覽的關(guān)系，而是實(shí)現(xiàn)了一種實(shí)時(shí)的，動(dòng)態(tài)的，可交式的表達(dá)能力[18]。從而基于CGI靜態(tài)的HTML頁(yè)面將被可提供動(dòng)態(tài)實(shí)時(shí)信息，并對(duì)客戶操作進(jìn)行反應(yīng)的Web頁(yè)面的取代。JavaScript腳本正是滿足這種需求而產(chǎn)生的語(yǔ)言。它深受廣泛用戶的喜愛(ài)。它是眾多腳本語(yǔ)言中較為優(yōu)秀的一種，與WWW的結(jié)合有效

94、地實(shí)現(xiàn)了網(wǎng)絡(luò)計(jì)算和網(wǎng)絡(luò)計(jì)算機(jī)的藍(lán)圖。</p><p>　　在網(wǎng)站開(kāi)發(fā)中使用了下面這么一段Javascript代碼，用來(lái)回到網(wǎng)頁(yè)頂部的</p><p>　　var overTop=document.getElementById('top');</p><p>　　overTop.onclick=function(){</p><p&

95、gt;　　var oldScroll=getSt();</p><p>　　tweenFn(-oldScroll);</p><p><b>　　}</b></p><p>　　function getSt(){</p><p>　　return document.documentElement.scrollTop||d

96、ocument.body.scrollTop;</p><p><b>　　}</b></p><p><b>　　//滾動(dòng)效果</b></p><p>　　function tweenFn(change,fn) {</p><p>　　var start=getSt();</p>&

97、lt;p>　　var change=change;</p><p><b>　　var t=0;</b></p><p>　　var endT=30;</p><p>　　var timer=setInterval(function(){</p><p><b>　　t++;</b></

98、p><p>　　if (t>endT) {</p><p>　　clearInterval(timer);</p><p><b>　　}else{</b></p><p>　　var l=Tween.Cubic.easeIn(t,start,change,endT)</p><p>　　doc

99、ument.documentElement.scrollTop=l;</p><p>　　document.body.scrollTop=l;</p><p><b>　　}</b></p><p><b>　　},10);</b></p><p><b>　　}</b><

100、;/p><p>　　此代碼主要是實(shí)現(xiàn)導(dǎo)航欄里面的top按鈕，當(dāng)用戶點(diǎn)擊的時(shí)候可以自動(dòng)滾屏至頁(yè)面頂部，其中還利用了一個(gè)tween.js的插件，來(lái)優(yōu)化回到頂部的動(dòng)畫(huà)過(guò)程.由于首頁(yè)內(nèi)容偏長(zhǎng)，故設(shè)計(jì)這一按鈕，讓用戶能返回頂部進(jìn)行瀏覽和操作。</p><p><b>　　4.6 本章小結(jié)</b></p><p>　　本章具體介紹了網(wǎng)站前端的實(shí)現(xiàn)，在

101、動(dòng)畫(huà)效果的實(shí)現(xiàn)中給出了具體的代碼。說(shuō)明了在頁(yè)面設(shè)計(jì)過(guò)程的具體實(shí)現(xiàn)，說(shuō)明了網(wǎng)站修飾風(fēng)格，可視化的重要概念。也是整個(gè)網(wǎng)站集聚吸引力的地方。整個(gè)網(wǎng)站的響應(yīng)式功能試驗(yàn)不單單用了CSS的樣式，還利用javascript去配合實(shí)現(xiàn)，缺一不可。并且整個(gè)網(wǎng)站為了方便向下兼容，即向低版本瀏覽器兼容，多說(shuō)動(dòng)畫(huà)利用javascript來(lái)實(shí)行，提高了兼容性，雖然一定程度上來(lái)說(shuō)，影響了部分性能，但以基本實(shí)現(xiàn)IE8版面不亂，IE9以上所有效果界面均正常顯示。<

102、;/p><p><b>　　第五章部分項(xiàng)目源碼</b></p><p>　　5.1 首頁(yè)HTML代碼</p><p>　　<head lang="en"> <meta charset="UTF-8"> <title>首頁(yè)</title>

103、 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1"> <link rel="stylesheet" href="css/reset.css"/> <link

104、rel="stylesheet" href="css/style.css"/> <link rel="stylesheet" href="css/media.css"/> <script type="text/javascript" src="js/jquery-1.11.3.min.js

105、"></script> <script type="text/javascript" src="js/tween.js"></script> <script src="js/scrollTopJQ.js"></scri</p><p>　　5.2 首頁(yè)CSS代

106、碼</p><p>　　.clear{ zoom: 1;}.clear:after{ content: ""; display: block; clear: both; height: 0; overflow: hidden;}.lf{ float: left;}.rf{ float: right;}#wrap{

107、 width: 1366px; margin: 0 auto; overflow: hidden;}.nav_main{ width: 82.72%; margin: 0 auto;}.nav_left{ width: 87.34%;}.nav_left a{ color: #626262; float: left; font-size: 14px;

108、 padding: 39px 45px 39px 0;}.nav_left .nav_select{ color: #d6000f;}.top{ padding-</p><p>　　@charset "utf-8";/* CSS Document *//* @font-face { font-family: 'FZLTCXHJW';

109、 src: url('../font/FZLTCXHJW.TTF'); font-weight: normal; font-style: normal; }*/img{ border: none;}body{ font-size: 12px;}/*首頁(yè)*/.clear{ zoom: 1;}.clear:after{ content: "&qu

110、ot;; display: block; clear: both; height: 0; overflow: hidden;}.lf{ float: left;}.rf{ float: right;}.wrap{ width: 100%; margin: 0 auto; overflow: hidden;}/*banner*/#banner{ </p&

111、gt;<p>　　.clear{ zoom: 1;}.clear:after{ content: ""; display: block; clear: both; height: 0; overflow: hidden;}.lf{ float: left;}.rf{ float: right;}#wrap{ back

112、ground: #eee; width: 1366px; margin: 0 auto; overflow: hidden;}.footer_main{ padding-top: 48px; width: 82.72%; margin: 0 auto;}.footer_top{ border-bottom: 1px solid #c4c4c4;}.footer_left

113、{ width: 66.19469%;}.footer_left dl{ width: 20%; float: left;}.footer_</p><p>　　@charset "utf-8";/* CSS Document */@media screen and (max-width:1980px){ .big_events{ padd

114、ing: 0 4.605% 5.752212% 2.605%; } .footer_main{ font-size: 18px; } .col ul li .li_con p{ font-size: 17px; }}@media screen and (max-width: 1600px){ .ny_bottom ul li{ margin-right: 90p