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

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

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

3、考慮兼容，性能等各種問題。</p><p>　　分析并解決實現(xiàn)中的若干技術(shù)問題：介紹企業(yè)官網(wǎng)個性化頁面的背景及HTML5響應式布局的一般原理；闡述整個企業(yè)官網(wǎng)的結(jié)構(gòu)及工作原理；分析</p><p>　　實現(xiàn)中的難點和重點；</p><p>　　關(guān)鍵詞：HTML5; CSS3; 響應式; javascript; 網(wǎng)站美化; 交互設計</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è)網(wǎng)站建設的狀況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、本特點9</p><p>　　2.3.3 css簡介9</p><p>　　2.3.4 jQuery10</p><p>　　2.4 本章小結(jié)10</p><p>　　第三章 前端布局分析與設計10</p><p>　　3.1 前端總體開發(fā)流程與設計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設計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 交互設計與UI14</p><p>　　3.4 網(wǎng)站結(jié)構(gòu)布局與設計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)站前臺頁面設計14</p><p>　　3.5.1 首頁15</p><p>　　3.5.2 其余子頁面15</p><p>　　3.7 本章小結(jié)15</p><p>　　第

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

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

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

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

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

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

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

24、，css3；javascript的工具集jQuery。這些都是開發(fā)中最基本的技能。前端開發(fā)的過程中，頁面的布局將會用HTML元素進行定義和布局，css對布局元素進行元素的定位和畫面效果的渲染，然后再通過javascript實現(xiàn)相對應的網(wǎng)站效果和優(yōu)化用戶交互體驗。</p><p>　　1.2 國內(nèi)外HTML5響應式企業(yè)網(wǎng)站建設的狀況</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個H5作品中，42%是心靈雞湯，最高17,358,480 uv;27%是測試題，最高49,940,339 uv;15%是社交互動游戲，最高2,892,047 uv; 5%是大型品

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

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

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

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

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

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

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

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

34、7、IE8、IE9、IE10、IE11的 渲染和JavaScript引擎?？梢詭臀覀兡M網(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是一種直譯式腳本語言。是一種動態(tài)類型、弱類型、基于原型的語言，內(nèi)置支持類型，具有自己獨特的垃圾回收等機制，他的解釋器被稱為Javascript引擎，為瀏覽器的一部分，目前最新的javascript引擎為V8引擎它是使用C++開發(fā)出來的，并在谷歌瀏覽器中使用。Javascript廣泛用于客戶端的腳本語言，最早是在HTML（標準通用標記語言下的一個應用）網(wǎng)頁上使用，用來給HTML網(wǎng)頁增加動態(tài)功

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

62、可對其設置高度，寬度，行高等等，常用的有：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)元素可以同時都在一行上；高度，行高以及頂，底邊距不可改變；常用的有：a strong font im

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

81、><b>　　首頁功能板塊：</b></p><p>　　旗下品牌（默認灰色，當鼠標移上去有一個變彩色的過程，起聚焦）；</p><p>　　服務項目（默認灰色，當鼠標移上去有一個變彩色的過程，起聚焦）；</p><p>　　服務領域（響應式九宮格，當鼠標移上去，圖片會以中心點向外放大）；</p><p>　　企業(yè)

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

83、網(wǎng)站裝飾風格</p><p>　　采用了灰白色為主導航顏色，首頁中運用滾一屏效果，以及各種css動畫或者javascript效果，使整個網(wǎ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è)文化，新聞中心，有一個Javascript效果，整合在一個按鈕上，用一個下拉方式展示</p><p><b>　　4.4 可視化設計</b></p><p>　　網(wǎng)站可視化設計的主要目的是提供給用戶一個關(guān)于網(wǎng)站的信息展示方案，一個良好有效的網(wǎng)站可視化設計能給用戶留

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

86、p><p>　　在該網(wǎng)站中使用了大量css動畫，使頁面有了特殊的顯示效果</p><p>　　寫意集團響應式企業(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>　　以上樣式是用于設置首頁的服務領域一部分的CSS效果，當鼠標移上去的時候，首先圖片上方會有一個黑色的

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

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

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

94、地實現(xiàn)了網(wǎng)絡計算和網(wǎng)絡計算機的藍圖。</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>　　//滾動效果</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>　　此代碼主要是實現(xiàn)導航欄里面的top按鈕，當用戶點擊的時候可以自動滾屏至頁面頂部，其中還利用了一個tween.js的插件，來優(yōu)化回到頂部的動畫過程.由于首頁內(nèi)容偏長，故設計這一按鈕，讓用戶能返回頂部進行瀏覽和操作。</p><p><b>　　4.6 本章小結(jié)</b></p><p>　　本章具體介紹了網(wǎng)站前端的實現(xiàn)，在

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

102、;/p><p><b>　　第五章部分項目源碼</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