響應(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)今最為方便快捷的媒介也越來越被人們接受，并且融入我們的生活。在2015年時(shí)，隨著HTML5在國內(nèi)的興起，也在不斷的推進(jìn)著信息時(shí)代的發(fā)展，網(wǎng)站也逐漸脫離了傳統(tǒng)的枯燥頁面風(fēng)格，如今的HTML5比起以前的HTML來說，更容易維護(hù)和管

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

3、考慮兼容，性能等各種問題。</p><p>　　分析并解決實(shí)現(xiàn)中的若干技術(shù)問題：介紹企業(yè)官網(wǎng)個(gè)性化頁面的背景及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 國內(nèi)外HTML5響應(yīng)式企業(yè)網(wǎng)站建設(shè)的狀況7</p><p><b>　　1.3本章小結(jié)7</b></p><p>　　第二章 前端開發(fā) 及相關(guān)技術(shù)7</p>

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

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

14、gt;<p>　　3.1.1 分層開發(fā)10</p><p>　　3.1.2 代碼編寫11</p><p>　　3.1.3 內(nèi)部測試與后續(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)站首頁結(jié)構(gòu)14</p><p&g

16、t;　　3.5.2  主題鮮明，富有特色14</p><p>　　3.5 網(wǎng)站前臺(tái)頁面設(shè)計(jì)14</p><p>　　3.5.1 首頁15</p><p>　　3.5.2 其余子頁面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在“寫意集團(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)容越來越豐富全面，各大瀏覽器商也在競相的開發(fā)各種各樣的新的功能，供開發(fā)者進(jìn)行開發(fā)構(gòu)建出更好的用戶體驗(yàn)，以此來滿足各種不同需求的瀏覽者。隨機(jī)計(jì)算機(jī)的這些技術(shù)的飛速生長，手機(jī)的上網(wǎng)率高于傳統(tǒng)PC，而在手機(jī)端上，傳統(tǒng)網(wǎng)站又難以做到兼容所有的設(shè)備尺寸，越來越多的商家的傳統(tǒng)門戶官網(wǎng)已經(jīng)不能滿足用戶的體驗(yàn)，各大商家大企業(yè)都開始重構(gòu)新的HTML5響應(yīng)式網(wǎng)站</p><p>　　，以求將自己的產(chǎn)品信息和企業(yè)

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

22、><p>　　整個(gè)官網(wǎng)設(shè)置多個(gè)板塊與分頁面，分別放置相關(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)品介紹一類等。</p><p>　　為何還要花時(shí)間精力和人力去建立和維護(hù)網(wǎng)站呢？是正如上面所說：內(nèi)容更加多姿多

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

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

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

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

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

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

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

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

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

32、DEA強(qiáng)大的JS部分的功能。然后根據(jù)設(shè)計(jì)圖制作靜態(tài)頁面，兼容各主流瀏覽器，并做到IE8下排版不亂，IE9以上響應(yīng)式布局。另外，對(duì)網(wǎng)站做一些維護(hù)已經(jīng)性能的優(yōu)化。整個(gè)網(wǎng)站的詳細(xì)開發(fā)過程在后面將逐步具體介紹。</p><p><b>　　Photoshop</b></p><p>　　Adobe Photoshop,簡稱“PS”,他是由Adobe Systems開發(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引擎。可以幫我們模擬網(wǎng)頁在IE5.5、IE6、IE7、IE8、IE9以及IE10等瀏覽器中的兼容性，讓我們可以檢測到我們做的網(wǎng)站能否兼容各版本的IE瀏覽器，用于觀察兼容性。</p><p>　　2.3 HTML5前端開發(fā)相關(guān)技術(shù)</p><p>　　2.3.1 javascript簡介</p>

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

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

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

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

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

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

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

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

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

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

45、的Javascript庫。它是輕量級(jí)的js庫 ，它兼容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)記語言下的一個(gè)應(yīng)用）、events、實(shí)現(xiàn)動(dòng)畫效果，并且方便地為網(wǎng)站提供AJAX交互。jQuery還有一

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

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

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

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

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

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

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

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

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

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

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

57、I設(shè)計(jì)不僅是讓頁面變得有個(gè)性有品味，還要讓頁面的操作變得舒適、簡單、自由，充分體現(xiàn)頁面的定位和特點(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為寫意集團(tuán)響應(yīng)式企業(yè)官網(wǎng)首頁：</p><p>　　圖3-1 寫意集團(tuán)響應(yīng)式企業(yè)官網(wǎng)首屏著陸頁</p><

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

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

60、背景色大量六百，同時(shí)背景色要與文字的排列對(duì)比強(qiáng)烈一些。首頁的頂端使用，滿屏的圖片下面用大量六百這兩個(gè)部分過度的很自然。 </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)站首頁導(dǎo)航字體顏色變化</p><p>　　3.2.3 css元素 </p><p>　　CSS塊狀元素(block)：</p><p>　　CSS塊狀元素非?！鞍缘馈保?#160;總是另起一行開始，

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)的外邊距，而且不能通過margin：0樣式去掉，解決方法是利用浮動(dòng)float來解決。</p><p><b>　　CSS盒模型:</b></p><p>　　網(wǎng)頁設(shè)計(jì)中常聽的屬性名：內(nèi)容(content)、填

65、充(padding)、邊框(border)、邊界(margin)， CSS盒子模式都具備這些屬性。</p><p>　　這些屬性我們可以把它轉(zhuǎn)移到我們?nèi)粘Ｉ钪械暮凶樱ㄏ渥樱┥蟻砝斫?，日常生活中所見的盒子也就是能裝東西的一種箱子，也具有這些屬性，所以叫它盒子模式。</p><p>　　CSS盒子模型就是在網(wǎng)頁設(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;">無標(biāo)題文檔</div>這個(gè)的寬度實(shí)質(zhì)已經(jīng)增加了40px外邊距margin：圍繞在元素邊框的空白區(qū)域是外邊距。margin支持負(fù)值，在頁面布局中，應(yīng)該大膽的用，可以解決很多問題。最常用的就是div居中:margin:0 auto;當(dāng)然一定要固定寬度。<div style=“width:200px;text-align:c

68、enter;”><div style=“width:100px;”>無標(biāo)題文檔</div></div> 這個(gè)屬性是無法居中的，如圖所示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ì)師通過設(shè)計(jì)用戶的行為，讓用戶更方便更有效率的去完成產(chǎn)品業(yè)務(wù)目標(biāo)，獲得愉快的用戶體驗(yàn)。如果是廣義的UI設(shè)計(jì)，應(yīng)該包括原型設(shè)計(jì)、交互設(shè)計(jì)、視覺設(shè)計(jì)。狹義的UI往往只是人們看到的最后一個(gè)環(huán)節(jié)UI視覺設(shè)計(jì)，交互是當(dāng)用戶發(fā)生動(dòng)作事件，所產(chǎn)生的反映。比如點(diǎn)擊彈出下拉菜單，瀏覽過鏈接的顏色變紫，這都是非常細(xì)微的交互，但卻處處體現(xiàn)著用戶體驗(yàn)。交互設(shè)計(jì)更多是對(duì)用戶行為響應(yīng)的設(shè)計(jì)

70、,UI視覺設(shè)計(jì)，更多是界面的外觀靜態(tài)設(shè)計(jì)。</p><p>　　所以這種情況下，交互設(shè)計(jì)尤為重要，既不能失去UI設(shè)計(jì)的特性，又要確保UI設(shè)計(jì)師利用其專業(yè)知識(shí)在視覺結(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)站首頁結(jié)構(gòu)</p><p>　　實(shí)

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

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

73、子頁面都可正常返回主頁以及正確連接到各個(gè)子頁面。功能要求使用簡單全面，容易操作。</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ùn)用動(dòng)畫以及目前常用的簡單卻用戶體驗(yàn)好的

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

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

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

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

78、。也說明了</p><p>　　前端頁面從設(shè)計(jì)到代碼編寫的基本工作流程，講述了界面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)航條，首頁，關(guān)于寫意，企業(yè)文化，新聞中心，人才招聘，聯(lián)系我們。 </p><p>　　首頁網(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>　　首頁功能板塊：</b></p><p>　　旗下品牌（默認(rèn)灰色，當(dāng)鼠標(biāo)移上去有一個(gè)變彩色的過程，起聚焦）；</p><p>　　服務(wù)項(xiàng)目（默認(rèn)灰色，當(dāng)鼠標(biāo)移上去有一個(gè)變彩色的過程，起聚焦）；</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>　　子頁面功能如子頁面標(biāo)題所示；</p><p>　　4.3 前臺(tái)新聞文摘顯示</p><p>　　4.3.1 

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

84、，新聞中心，人才招聘，聯(lián)系我們等</p><p>　　其中關(guān)于寫意，企業(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)站的頁面布局。然后設(shè)計(jì)網(wǎng)頁的表現(xiàn)框架，建立頁面模型。 </p><p>　　4.5 具體實(shí)現(xiàn)技術(shù)</p><p>　　4.5.1 css在“寫意集團(tuán)響應(yīng)式企業(yè)官網(wǎng)”中的應(yīng)用實(shí)例</

86、p><p>　　在該網(wǎng)站中使用了大量css動(dòng)畫，使頁面有了特殊的顯示效果</p><p>　　寫意集團(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è)置首頁的服務(wù)領(lǐng)域一部分的CSS效果，當(dāng)鼠標(biāo)移上去的時(shí)候，首先圖片上方會(huì)有一個(gè)黑色的

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

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

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

94、地實(shí)現(xiàn)了網(wǎng)絡(luò)計(jì)算和網(wǎng)絡(luò)計(jì)算機(jī)的藍(lán)圖。</p><p>　　在網(wǎng)站開發(fā)中使用了下面這么一段Javascript代碼，用來回到網(wǎng)頁頂部的</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)滾屏至頁面頂部，其中還利用了一個(gè)tween.js的插件，來優(yōu)化回到頂部的動(dòng)畫過程.由于首頁內(nèi)容偏長，故設(shè)計(jì)這一按鈕，讓用戶能返回頂部進(jìn)行瀏覽和操作。</p><p><b>　　4.6 本章小結(jié)</b></p><p>　　本章具體介紹了網(wǎng)站前端的實(shí)現(xiàn)，在

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

102、;/p><p><b>　　第五章部分項(xiàng)目源碼</b></p><p>　　5.1 首頁HTML代碼</p><p>　　<head lang="en"> <meta charset="UTF-8"> <title>首頁</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 首頁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;}/*首頁*/.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