【正文】 計(jì) ...............................................14 首頁(yè) .......................................................15 其余子頁(yè)面 .................................................15 本章小結(jié) .......................................................15第四章 主要功能的實(shí)現(xiàn) ..............................................15 界面設(shè) 計(jì) .......................................................15 具體設(shè)計(jì)文檔 ...................................................15 前臺(tái)新聞文摘顯示 ...............................................16 網(wǎng)站裝飾風(fēng)格 ...............................................16 網(wǎng)站的鏈接結(jié)構(gòu) .............................................16 可視化設(shè)計(jì) .....................................................16 具體實(shí)現(xiàn)技術(shù) ...................................................16 css 在“寫意集團(tuán)響應(yīng)式企業(yè)官網(wǎng)”中的應(yīng)用實(shí)例 ...............16 本章小結(jié) .......................................................18第五章 總結(jié) .......................................................18致謝 ...............................................................18參考文獻(xiàn) ...........................................................19響應(yīng)式企業(yè)網(wǎng)站設(shè)計(jì)與實(shí)現(xiàn)1第一章 緒 論 本課題研究的背景和目的如今的互聯(lián)網(wǎng)已經(jīng)滲透到了我們生活的每一個(gè)層面，網(wǎng)站的內(nèi)容越來越豐富全面，各大瀏覽器商也在競(jìng)相的開發(fā)各種各樣的新的功能，供開發(fā)者進(jìn)行開發(fā)構(gòu)建出更好的用戶體驗(yàn)，以此來滿足各種不同需求的瀏覽者。這些網(wǎng)站的建立使得企業(yè)可以突破傳統(tǒng)的 PC 媒介，在移動(dòng)網(wǎng)絡(luò)上開辟屬于自己的新天地。交互上更多是體驗(yàn)在 CSS3 的新屬性帶給用戶的新體驗(yàn)，用戶在與官網(wǎng)進(jìn)行交互的方式更加豐富與精彩了。我們要構(gòu)建專門的企業(yè)響應(yīng)式官網(wǎng)，網(wǎng)站前端開發(fā)最基本的還是 3 個(gè)技能：html。前端開發(fā)的過程中，頁(yè)面的布局將會(huì)用 HTML 元素進(jìn)行定義和布局，css 對(duì)布局元素進(jìn)行元素的定位和畫面效果的渲染，然后再通過 javascript 實(shí)現(xiàn)相對(duì)應(yīng)的網(wǎng)站效果和優(yōu)化用戶交互體驗(yàn)。27%是測(cè)試題，最高 49,940,339 uv。 亞馬遜宣布旗下網(wǎng)絡(luò)響應(yīng)式企業(yè)網(wǎng)站設(shè)計(jì)與實(shí)現(xiàn)2(包括 門戶在內(nèi))的所有廣告將不再使用 Flash。以上的信息反映了 H5 在內(nèi)容營(yíng)銷的應(yīng)用潛力。當(dāng)然這也在暗示 HTML5 的推廣渠道其實(shí)可以更加多元化，并且其在內(nèi)容營(yíng)銷中有著極大的應(yīng)用潛力。 本章小結(jié)本章闡述了開發(fā)企業(yè)響應(yīng)式官網(wǎng)的研究背景和意義。一般都是由有網(wǎng)頁(yè)三劍客之稱的：HTML，css,js 來作為基本構(gòu)建項(xiàng)目語(yǔ)言。與 IntelliJ IDEA 同源，繼承了 IntelliJ IDEA 強(qiáng)大的 JS 部分的功能。（2）PhotoshopAdobe Photoshop,簡(jiǎn)稱“PS”,他是由 Adobe Systems 開發(fā)和發(fā)行的圖像處理軟件。（3）IE testerIETester 是一個(gè)免費(fèi)的 WebBrowser 控件，讓我們可以在 Windows 系列的桌面 Vista 和 XP 系統(tǒng)中看到 、IEIEIEIEIEIE11 的 渲染和 JavaScript 引擎。Javascript 廣泛用于客戶端的腳本語(yǔ)言，最早是在 HTML（標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言下的一個(gè)應(yīng)用）網(wǎng)頁(yè)上使用，用來給 HTML 網(wǎng)頁(yè)增加動(dòng)態(tài)功能。配合 HTML5 就能實(shí)現(xiàn)跨平臺(tái) webAPP 的開發(fā)。因此，許多功能可以來自于腳本環(huán)境中對(duì)象的方法與腳本的相互作用。而且(4) 動(dòng)態(tài)性 java script 是動(dòng)態(tài)的，它可以直接通過檢測(cè)用戶和客戶在瀏覽器上做出的動(dòng)作并做出相應(yīng)，而無須經(jīng)過 Web 服務(wù)程序，它對(duì)用戶的反應(yīng)相應(yīng)，是采用事件驅(qū)動(dòng)的方式進(jìn)行的。 css 簡(jiǎn)介層疊樣式表是一種用來表現(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ǔ)言。CSS 目前最新版本為 CSS3，是能夠真正做到網(wǎng)頁(yè)表現(xiàn)與內(nèi)容分離的一種樣式設(shè)計(jì)語(yǔ)言。它是輕量級(jí)的js 庫(kù) ，它兼容 CSS3，還兼容各種瀏覽器（IE +, +, Safari +, Opera +）， 及后續(xù)版本將不再支持 IE6/7/8 瀏覽器。jQuery 是一個(gè)兼容多瀏覽器的 javascript 庫(kù)，核心理念是 write less,do more(寫得更少,做得更多)。jQuery 的語(yǔ)法設(shè)計(jì)可以使開發(fā)更加便捷，例如操作文檔對(duì)象、選擇 DOM 元素、制作動(dòng)畫效果、事件處理、使用 Ajax 以及其他功能。以便于在后面的開發(fā)中對(duì)這些技術(shù)有深刻的理解響應(yīng)式企業(yè)網(wǎng)站設(shè)計(jì)與實(shí)現(xiàn)6第三章 前端布局分析與設(shè)計(jì) 前端總體開發(fā)流程與設(shè)計(jì)Web 前端開發(fā)與其他平臺(tái)開發(fā)不一樣，它是一個(gè)先易后難的學(xué)習(xí)曲線，主要包括三個(gè)基本技能要素：HTML,CSS,和 Javascript，所以前端工程師不僅要掌握這些基本技能外，還要去學(xué)習(xí)網(wǎng)站的性能優(yōu)化，SEO 和與后臺(tái)服務(wù)器端交互的基礎(chǔ)知識(shí)，而且還要善于利用各種測(cè)試輔助工具輔助開發(fā)，例如IEtext，google 的 debug，還要具有一定的溝通能力，協(xié)調(diào)美工設(shè)計(jì)與后臺(tái)開發(fā)人員，還要掌握如何封裝代碼組件，增加代碼維護(hù)性，代碼的易用性，瀏覽器兼容與適配，面向?qū)ο蟮木幊趟枷耄鹊?。確定了流程后，還需要對(duì)產(chǎn)品原型進(jìn)行分析，研究，把復(fù)用性高的部分劃分出來，重點(diǎn)標(biāo)記，在以后的代碼編寫過程中，封裝成一個(gè)復(fù)用組件，方便調(diào)用。模塊化開發(fā)時(shí)工程師必備的技能，是敏捷開發(fā)必須的，易于復(fù)用與組件管理。UI 設(shè)計(jì)則是指對(duì)頁(yè)面的人機(jī)交互、操作邏輯、界面美觀的整體設(shè)計(jì)。 顏色配置產(chǎn)生豐富色彩的三原色是紅，綠，藍(lán)，也就是 RGB，十六進(jìn)制是00 00 00， 例如經(jīng)常寫的 red，color:FF0000； 縮寫color:F00；color:gray(808080)；是比較深的灰色。背景色一般采用素淡清雅的色彩，避免采用花紋復(fù)雜的圖片和純度很高的色背景色大量六百，同時(shí)背景色要與文字的排列對(duì)比強(qiáng)烈一些。 如果要大面積留白一定要對(duì)內(nèi)容的排版有比較充足的經(jīng)驗(yàn)，不然不但不能讓用戶感到留白的自由感反而多了一絲內(nèi)容空洞的想法，如果是較深的背景下，響應(yīng)式企業(yè)網(wǎng)站設(shè)計(jì)與實(shí)現(xiàn)8禁止大面積使用加粗文字。但對(duì)于這個(gè)屬性不是所有瀏覽器都識(shí)別，兼容性較差，而且會(huì)留下默認(rèn)的外邊距，而且不能通過 margin：0 樣式去掉，解決方法是利用浮動(dòng) float來解決。內(nèi)邊距 padding：元素的內(nèi)邊距在邊框和內(nèi)容區(qū)之間。上右下左div style=width:100px。最常用的就是 div 居中:margin:0 auto。”div style=“width:100px。狹義的UI 往往只是人們看到的最后一個(gè)環(huán)節(jié) UI 視覺設(shè)計(jì)，交互是當(dāng)用戶發(fā)生動(dòng)作事件，所產(chǎn)生的反映。顏色的選擇以灰白色為主，沒有使用太多的顏色來修飾某個(gè)對(duì)象，此外，正，一般字色為默認(rèn)的近黑色，并且用了不同的背景色條或大圖與留白區(qū)區(qū)分正文區(qū)與其他功能區(qū)。本網(wǎng)站系統(tǒng)主要包括以下幾個(gè)主要頁(yè)面及幾個(gè)大的模塊，每個(gè)頁(yè)面包含豐富的內(nèi)容，每個(gè)大的模塊下又細(xì)分為幾個(gè)的功能模塊。功能要求使用簡(jiǎn)單全面，容易操作。對(duì)于一些 LOGO 標(biāo)志也都給充分利用起來，在首頁(yè)的logo 首次加載的時(shí)候做了一個(gè) logo 動(dòng)畫，以其來吸引用戶注意力。然后通過 CSS 樣式來調(diào)布局樣式以及圖片，文字的位子。也說明了前端頁(yè)面從設(shè)計(jì)到代碼編寫的基本工作流程，講述了界面 UI 設(shè)計(jì)和交互設(shè)計(jì)中的一些理論和真是設(shè)計(jì)效果。 首頁(yè)網(wǎng)站上中部：banner 圖片。先明確各板塊提供的主要功能：首頁(yè)功能板塊：旗下品牌（默認(rèn)灰色，當(dāng)鼠標(biāo)移上去有一個(gè)變彩色的過程，起聚焦）；服務(wù)項(xiàng)目（默認(rèn)灰色，當(dāng)鼠標(biāo)移上去有一個(gè)變彩色的過程，起聚焦）；服務(wù)領(lǐng)域（響應(yīng)式九宮格，當(dāng)鼠標(biāo)移上去，圖片會(huì)以中心點(diǎn)向外放大）；企業(yè)榮耀（靜態(tài)數(shù)據(jù)，顯示企業(yè)參與的項(xiàng)目）合作商家（眾多合作商家 logo 排列）版權(quán)（版權(quán)信息）子頁(yè)面功能如子頁(yè)面標(biāo)題所示； 前臺(tái)新聞文摘顯示 網(wǎng)站裝飾風(fēng)格采用了灰白色為主導(dǎo)航顏色，首頁(yè)中運(yùn)用滾一屏效果，以及各種 css 動(dòng)畫或者 javascript 效果，使整個(gè)網(wǎng)站看上去雖大部分為灰白色，但不失其靈動(dòng)。 具體實(shí)現(xiàn)技術(shù) css 在“寫意集團(tuán)響應(yīng)式企業(yè)官網(wǎng)”中的應(yīng)用實(shí)例在該網(wǎng)站中使用了大量 css 動(dòng)畫，使頁(yè)面有了特殊的顯示效果寫意集團(tuán)響應(yīng)式企業(yè)官網(wǎng)中 CSS 樣式表使用的部分代碼：.serviceArea_main ul li:hover a img{ transform: scale3d(,1)。 mstransform: scale3d(,1)。 top: 0。 verticalalign: top。使用它的目的是與 HTML 超文本標(biāo)記語(yǔ)言，Java 腳本語(yǔ)言（Java 小程序）一起實(shí)現(xiàn)在一個(gè) Web 頁(yè)面中鏈接多個(gè)對(duì)象，與Web 客戶交互作用，從而可以開發(fā)客戶端的應(yīng)用程序等。從而基于CGI 靜態(tài)的 HTML 頁(yè)面將被可提供動(dòng)態(tài)實(shí)時(shí)信息，并對(duì)客戶操作進(jìn)行反應(yīng)的Web 頁(yè)面的取代。在網(wǎng)站開發(fā)中使用了下面這么一段 Javascript 代碼，用來回到網(wǎng)頁(yè)頂部的var overTop=(39。tweenFn(oldScroll)。var t=0。}else{var l=(t,start,change,endT)=l。 本章小結(jié)本章具體介紹了網(wǎng)站前端的實(shí)現(xiàn)，在動(dòng)畫效果的實(shí)現(xiàn)中給出了具體的代碼。并且整個(gè)網(wǎng)站為了方便向下兼容，即向低版本瀏覽器兼容，多說動(dòng)畫利用javascript 來實(shí)行，提高了兼容性，雖然一定程度上來說，影響了部分性能，但以基本實(shí)現(xiàn) IE8 版面不亂，IE9 以上所有效果界面均正常顯示。凈高控制、管線綜合、機(jī)電設(shè)備族庫(kù)制作br/BIM 培訓(xùn)：基礎(chǔ) BIM 應(yīng)用培訓(xùn)、首次 BIM 項(xiàng)目實(shí)施輔導(dǎo) /p /span /div div class=border_bottom_con div class=border_bottom_left div class=border_bottom_right/div /div /div /a /li li class=sitem clearMarginR a href= div class=border_top_con div class=border_top_left div class=border_top_right/div /div /div div class=sitem_con span img src=imgs/ alt=/ img src=imgs/ class=img1 alt=