易揚(yáng)眾和信息技術(shù)有限公司響應(yīng)式網(wǎng)頁(yè)制作

易揚(yáng)眾和信息技術(shù)有限公司響應(yīng)式網(wǎng)頁(yè)制作 計(jì)算機(jī)與信息科學(xué)學(xué)院 電子商務(wù) 2011級(jí) 董小芬指導(dǎo)教師 戴政國(guó)摘 要：本文總結(jié)了易揚(yáng)眾和信息技術(shù)有限公司響應(yīng)式網(wǎng)頁(yè)制作技術(shù)和經(jīng)驗(yàn)，介紹了響應(yīng)式網(wǎng)頁(yè)的工作原理和項(xiàng)目實(shí)施過(guò)程，同時(shí)也介紹了該網(wǎng)頁(yè)實(shí)現(xiàn)的響應(yīng)式功能及效果。經(jīng)測(cè)試，開(kāi)發(fā)出的響應(yīng)式網(wǎng)頁(yè)能夠兼容各大主流瀏覽器，能夠識(shí)別不同設(shè)備的屏幕分辨率從而展現(xiàn)最佳的瀏覽效果。關(guān)鍵詞：公司網(wǎng)頁(yè)；響應(yīng)式；HTML；CSS+DIV；JavaScript；jQuery； Abstract：This article summarizes the Yi Yang Zhong He Information Technology Co.,responsive web production technology and experience, introduces the principle of responsive web pages and project implementation process, but also introduced the web-enabled responsive function and effect. After testing, the development of responsive web pages compatible with major browser, the screen resolution can identify different devices which show the best view results.Key words：Company Website; Responsive; HTML; CSS+DIV; JavaScript; jQuery窗體頂端窗體底端1 研究背景隨著互聯(lián)網(wǎng)技術(shù)的日新月異與各種新技術(shù)的突破，響應(yīng)式網(wǎng)站的設(shè)計(jì)與制作成為以后企業(yè)網(wǎng)站必然的發(fā)展方向，無(wú)論用戶使用的是電腦還是手機(jī)，網(wǎng)頁(yè)頁(yè)面都能夠自動(dòng)切換分辨率、圖片尺寸及相關(guān)布局，以適應(yīng)不同的設(shè)備需求；換句話說(shuō)，在未來(lái)網(wǎng)頁(yè)應(yīng)該有能力自動(dòng)識(shí)別客戶端設(shè)備屏幕的不同分辨率。響應(yīng)式網(wǎng)頁(yè)就是一個(gè)網(wǎng)頁(yè)能夠兼容多個(gè)終端而不是為每個(gè)終端做一個(gè)特定的版本，使用不同的設(shè)備瀏覽，響應(yīng)式網(wǎng)頁(yè)會(huì)自動(dòng)檢測(cè)設(shè)備寬度，從而呈現(xiàn)出適合該設(shè)備的網(wǎng)頁(yè)效果1。這樣，我們就可以省時(shí)省力不必為不斷到來(lái)的新設(shè)備做專(zhuān)門(mén)的版本設(shè)計(jì)和開(kāi)發(fā)了。2014年是響應(yīng)式元年，一些大型網(wǎng)站如新浪、搜狐、淘寶等都已經(jīng)實(shí)現(xiàn)了響應(yīng)式，響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)與制作將會(huì)成為未來(lái)網(wǎng)頁(yè)的必然選擇。 2 需求分析越來(lái)越多的公司開(kāi)始建立自己的網(wǎng)站，網(wǎng)站除了具有傳播信息的功能外，還往往代表著該公司的形象；隨著移動(dòng)終端的興起，響應(yīng)式網(wǎng)頁(yè)越來(lái)越迫切；同時(shí)網(wǎng)站建設(shè)逐漸趨向商業(yè)化和廣告化，這些都對(duì)網(wǎng)頁(yè)設(shè)計(jì)的藝術(shù)性提出了更高的要求。因此，在進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)時(shí)必須滿足一定的需求。第一、 移動(dòng)終端逐漸發(fā)展壯大并趨向主流，客戶在移動(dòng)端瀏覽的網(wǎng)頁(yè)必須要適合移動(dòng)端的尺寸，網(wǎng)頁(yè)需要在不同的設(shè)備上響應(yīng)，因此網(wǎng)頁(yè)需要設(shè)計(jì)成響應(yīng)式網(wǎng)頁(yè)，并盡可能優(yōu)化用戶體驗(yàn)。第二、網(wǎng)頁(yè)設(shè)計(jì)的時(shí)候要考慮文字、圖片布局的藝術(shù)性；網(wǎng)頁(yè)需要實(shí)現(xiàn)前端客戶系統(tǒng)的功能，主要功能如下。用戶可以通過(guò)網(wǎng)頁(yè)瀏覽公司的一些基本信息；用戶可以通過(guò)網(wǎng)頁(yè)查看公司新聞；用戶可以通過(guò)網(wǎng)頁(yè)查看公司的聯(lián)系方式；用戶可以在網(wǎng)頁(yè)上隨時(shí)發(fā)表自己的言論。3 系統(tǒng)分析 3.1 網(wǎng)頁(yè)功能分析網(wǎng)頁(yè)需要實(shí)現(xiàn)的功能：用戶使用不同的設(shè)備都能得到最佳的瀏覽效果2。在PC端，設(shè)備尺寸相對(duì)較寬，網(wǎng)頁(yè)顯示的信息就相對(duì)比較健全。ipad瀏覽網(wǎng)頁(yè)信息也比較健全，但因尺寸比PC窄，一些用于裝飾網(wǎng)頁(yè)的修飾內(nèi)容會(huì)被隱藏。手機(jī)瀏覽網(wǎng)頁(yè)時(shí)，因手機(jī)尺寸小一些，網(wǎng)頁(yè)的一些功能會(huì)隱藏起來(lái)以適應(yīng)手機(jī)瀏覽，如網(wǎng)頁(yè)的導(dǎo)航條會(huì)隱藏，通過(guò)點(diǎn)擊導(dǎo)航按鈕來(lái)顯示導(dǎo)航條；“我們”內(nèi)頁(yè)的管理團(tuán)隊(duì)為點(diǎn)擊滑動(dòng)的圖片，在手機(jī)上也不再顯示；“聯(lián)系”內(nèi)頁(yè)的在線留言在手機(jī)上取消，只顯示公司總部的聯(lián)系方式，網(wǎng)頁(yè)內(nèi)容的排版在手機(jī)上會(huì)發(fā)生一定的變化。網(wǎng)頁(yè)功能如圖3-1所示。圖3-1 網(wǎng)頁(yè)功能圖3.2 響應(yīng)式分析響應(yīng)式可以兼容不同的屏幕分辨率、清晰度以及屏幕定向方式豎屏、橫屏，那么響應(yīng)式是如何實(shí)現(xiàn)的呢？響應(yīng)式的實(shí)現(xiàn)主要有三步。第一步，使用meta標(biāo)記將視口轉(zhuǎn)換成設(shè)備寬度， ；第二步，檢測(cè)客戶端的設(shè)備寬度；第三步，媒體查詢，根據(jù)檢測(cè)出來(lái)的寬度調(diào)用不同的樣式。詳細(xì)過(guò)程見(jiàn)圖3-2。圖3-2 響應(yīng)式流程圖4 開(kāi)發(fā)所用語(yǔ)言4.1 HTML HTML為超文本標(biāo)記語(yǔ)言的縮寫(xiě)，它是一種網(wǎng)頁(yè)標(biāo)識(shí)語(yǔ)言，用于網(wǎng)頁(yè)編寫(xiě)。目前的最新版本是HTML5，其主要特點(diǎn)如下。一、HTML5是對(duì)以前版本的升級(jí)和簡(jiǎn)化，在文檔類(lèi)型上，刻意不使用版本聲明，一份文檔可以適應(yīng)所有版本的HTML；二、HTML5引入了許多新的標(biāo)記元素，根據(jù)內(nèi)容類(lèi)型的不同，可以分為內(nèi)嵌、流、標(biāo)題、交互、元數(shù)據(jù)、短語(yǔ)七大類(lèi)；三、HTML5增加和刪除了很多不必要的屬性；四、在HTML5中新增了全局屬性的概念，全局屬性是指對(duì)任何元素都可以使用的屬性3。當(dāng)然，它不止只有這些特點(diǎn)，HTML5的功能和特點(diǎn)，在以后的學(xué)習(xí)中都會(huì)逐漸掌握。4.2 CSS+DIV CSS（層疊樣式表）目前最新版本為CSS3，他是一種網(wǎng)頁(yè)的裝飾類(lèi)，是能夠真正做到網(wǎng)頁(yè)表現(xiàn)與內(nèi)容分離的一種樣式。相對(duì)于傳統(tǒng)HTML的表現(xiàn)而言，CSS能夠?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)的易讀性。4.3 JavaScript JavaScript是一種客戶端瀏覽器解析式腳本語(yǔ)言，用來(lái)給HTML網(wǎng)頁(yè)增加動(dòng)態(tài)功能4，有以下特性： 一、腳本語(yǔ)言：JavaScript是一種解釋型的腳本語(yǔ)言,C、C+等語(yǔ)言先編譯后執(zhí)行,而JavaScript是在程序的運(yùn)行過(guò)程中逐行進(jìn)行解釋?zhuān)?二、基于對(duì)象：JavaScript是一種基于對(duì)象的腳本語(yǔ)言,它不僅可以創(chuàng)建對(duì)象,也能使用現(xiàn)有的對(duì)象； 三、動(dòng)態(tài)性：JavaScript是一種采用事件驅(qū)動(dòng)的腳本語(yǔ)言,它不需要經(jīng)過(guò)Web服務(wù)器就可以對(duì)用戶的輸入做出響應(yīng)。在訪問(wèn)一個(gè)網(wǎng)頁(yè)時(shí),鼠標(biāo)在網(wǎng)頁(yè)中進(jìn)行鼠標(biāo)點(diǎn)擊或上下移、窗口移動(dòng)等操作JavaScript都可直接對(duì)這些事件給出相應(yīng)的響應(yīng)； 四、跨平臺(tái)性：JavaScript腳本語(yǔ)言不依賴于操作系統(tǒng),僅需要瀏覽器的支持。因此一個(gè)JavaScript腳本在編寫(xiě)后可以帶到任意機(jī)器上使用,前提是機(jī)器上的瀏覽器支持JavaScript腳本語(yǔ)言,目前JavaScript已被大多數(shù)的瀏覽器所支持5。4.4 jQueryjQuery是一個(gè)兼容多瀏覽器的javascript庫(kù)，核心理念是寫(xiě)得更少,做得更多。jQuery的語(yǔ)法設(shè)計(jì)可以使開(kāi)發(fā)者更加便捷的完成任務(wù)，例如選擇頁(yè)面元素、動(dòng)態(tài)更改頁(yè)面樣式及內(nèi)容、控制響應(yīng)事件、提供基本網(wǎng)頁(yè)特效、快速實(shí)現(xiàn)通信以及擴(kuò)展javascript內(nèi)核等6。除此以外，jQuery提供API讓開(kāi)發(fā)者可以編寫(xiě)插件。其模塊化的使用方式使開(kāi)發(fā)者可以很輕松的開(kāi)發(fā)出功能強(qiáng)大的靜態(tài)或動(dòng)態(tài)網(wǎng)頁(yè)。5 響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)Responsive Web Design，追求的就是根據(jù)用戶設(shè)備的不同、用戶設(shè)備屏幕大小的不同、用戶設(shè)備朝向方式的不同，展現(xiàn)不同的網(wǎng)頁(yè)效果，提高用戶體驗(yàn)7。5.1 視口首先說(shuō)明一下視口（viewport），視口就是以蘋(píng)果為主導(dǎo)的手機(jī)廠商，為了能讓用戶在手機(jī)上也能看到完整的PC網(wǎng)頁(yè)，大部分設(shè)備會(huì)欺騙瀏覽器返回一個(gè)較大的“視口”，視口和分辨率沒(méi)有關(guān)系，iPhone、三星Note3等手機(jī)的視口都是980px。也就是說(shuō)，一個(gè)width值為980px的盒子，能夠在這樣的手機(jī)中撐滿整個(gè)頁(yè)面，并且恰好不出現(xiàn)橫向滾動(dòng)條。理想中手機(jī)看網(wǎng)頁(yè)尺寸應(yīng)該與設(shè)備的寬度接近。因此，要實(shí)現(xiàn)響應(yīng)式，首先要對(duì)視口進(jìn)行約束，使視口的寬度固定為設(shè)備的寬度,就要使用下面的語(yǔ)句。 。其中，具體的約束內(nèi)容寫(xiě)在content中，每個(gè)約束規(guī)則用逗號(hào)隔開(kāi)。 width=device-width：命令視口的寬度為設(shè)備的寬度； initial-scale=1.0：命令視口默認(rèn)的縮放等級(jí)為1； minimum-scale=1.0：命令視口最小縮放等級(jí)為1； maximum-scale=1.0：命令視口最大縮放等級(jí)為1； user-scalable=no：不許用戶縮放頁(yè)面8。 所有的響應(yīng)式頁(yè)面都要加上視口約束標(biāo)記。5.2 媒體查詢(media query)，實(shí)現(xiàn)樣式更換使用media屬性實(shí)現(xiàn)響應(yīng)式，不需要寫(xiě)JS代碼，瀏覽器直接根據(jù)media設(shè)置的寬度更換CSS樣式。在本網(wǎng)頁(yè)中，所有的樣式都放在style.css文件中，使用時(shí)需要插入到HTML文件中去：。在style.css中，先寫(xiě)了網(wǎng)頁(yè)的整體樣式即PC端的樣式，把PC端樣式當(dāng)作整體樣式是為了適應(yīng)本網(wǎng)頁(yè)的設(shè)計(jì)，樣式在移動(dòng)端變化不是很大，布局相對(duì)變化要多一些，整體樣式后面放置的是響應(yīng)不同尺寸的樣式，詳細(xì)見(jiàn)附錄8 。根據(jù)網(wǎng)頁(yè)設(shè)計(jì)需求來(lái)確定響應(yīng)式的樣式和布局，本網(wǎng)頁(yè)在寬度上設(shè)置了以下幾個(gè)分段：max-width:1200px、max-width:1050px、max-width:705px、max-width:641px、max-width:481px ；因?yàn)橐恍邮皆诔叽绨l(fā)生變化的時(shí)候任然需要保持原樣，所以沒(méi)有設(shè)置最小寬度min-width ，詳細(xì)如下。media (max-width:1200px) 詳細(xì)的樣式 ；media (max-width:1050px) 詳細(xì)的樣式 ；media (max-width:705px) 詳細(xì)的樣式 ；media (max-width:640px) 詳細(xì)的樣式 ；media (max-width:480px) 詳細(xì)的樣式 。在上面的 中放置需要更換的樣式，詳細(xì)代碼見(jiàn)附錄8。media (max-width:1200px) 意思是當(dāng)屏幕尺寸小于等于1200px時(shí)網(wǎng)頁(yè)會(huì)加載該樣式，同時(shí)先前的整體樣式也會(huì)加載，media query加載多個(gè)樣式表時(shí)，如果先前樣式與media (max-width:1200px) 中的樣式?jīng)_突時(shí)，以media (max-width:1200px) 中的樣式為主，先前的樣式自動(dòng)失效。media (max-width:1050px) 及后面的媒體查詢功能和media (max-width:1200px) 功能一樣。其中media (max-width:1200px) 和media (max-width:1050px) 中的樣式是為了適應(yīng)不同尺寸的ipad橫屏顯示時(shí)的效果；media (max-width:750px) 和media (max-width:640px) 是為了適應(yīng)不同尺寸的iPad豎屏顯示時(shí)的效果；同時(shí)media (max-width:640px) 也用在手機(jī)橫屏?xí)r的顯示效果，而media (max-width:480px) 是為了適應(yīng)不同尺寸的手機(jī)瀏覽網(wǎng)頁(yè)時(shí)的顯示效果。目前一般手機(jī)尺寸再300-400px之間，也有超大屏的在400px以上如apple iphone 6 plus就是414px，LG Optimus LTE,Optimus 4X HD屏幕寬度為424px9。為了適應(yīng)尺寸進(jìn)一步加大的手機(jī)，將該網(wǎng)頁(yè)的手機(jī)響應(yīng)尺寸設(shè)置在480px，即media (max-width:480px) ；也就是說(shuō)當(dāng)尺寸在480px以下時(shí)，所有手機(jī)瀏覽效果是一樣的。5.3 流式布局在制作響應(yīng)式時(shí)，用到最多的就是百分比寬度。流式布局，就是用百分比設(shè)置寬度的布局形式10。圖5-1 流式布局示例 在圖5-1中，藍(lán)色區(qū)域?yàn)橐粋€(gè)div,黃色區(qū)域?yàn)橐粋€(gè)div，紅色區(qū)域?yàn)橐粋€(gè)div，具體如下。文字文字 CSS樣式如下。div1 width:90%; height:200px; background:blue; margin:0 auto; div2 width:60%; height:150px; background:yellow; padding-left:10%; float:left; div3 width:20%; padding:0 5%; height:150px; background:red; float: left; 在這個(gè)例子中，子元素的width數(shù)值的參考標(biāo)準(zhǔn)是父元素，div1寬度是整個(gè)頁(yè)面的90%，div2的寬度是div1寬度的70%，div3的寬度是div1寬度的30%。像上例這樣，寬度width使用百分比，設(shè)備的尺寸發(fā)生變化時(shí)，div塊的寬度也會(huì)隨之發(fā)生變化。百分比數(shù)值，只能出現(xiàn)在width、padding、margin上，邊框的寬度沒(méi)有百分比。在易揚(yáng)眾和信息技術(shù)有限公司響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)與制作中，80%以上使用的是流式布局，只有一些需要固定寬度的地方使用的是具體的像素寬度。由此可見(jiàn)，流式布局也是響應(yīng)式網(wǎng)頁(yè)不可或缺的一部分11。6 項(xiàng)目實(shí)施6.1 硬件需求開(kāi)發(fā)本設(shè)計(jì)過(guò)程中所需要的計(jì)算機(jī)設(shè)備及其有關(guān)的外部設(shè)備如下。機(jī)型：Lenovo-PC內(nèi)存：4.0GB硬盤(pán)：500G；操作系統(tǒng)：Windows8.1正式版。在硬件方面，只需要一臺(tái)正常運(yùn)轉(zhuǎn)的PC機(jī)即可。6.2 軟件需求 開(kāi)發(fā)此網(wǎng)頁(yè)過(guò)程中的軟件主要包括程序開(kāi)發(fā)軟件、圖形處理軟件、瀏覽器等。其中，瀏覽器主要包括目前各大主流瀏覽器，Internet Explorer、Safari、Opera、Chrome、Firefox，主要軟件需求如表6.1所示。表6.1 軟件需求表軟件名稱軟件版本功能和用途Sublime Text3制作網(wǎng)頁(yè)P(yáng)hotoshopCS6處理圖片Internet Explorer、 Safari、Opera、 Chrome、firefoxIE8.0以上測(cè)試網(wǎng)頁(yè)6.3 Sublime TextSublime Text是一個(gè)代碼編輯器，Sublime Text小巧綠色占用資源少并且速度非?？?，跨平臺(tái)支持Win/Linux，支持32位與64位操作系統(tǒng)，Sublime Text支持各種現(xiàn)在流行編程語(yǔ)言的語(yǔ)法高亮及代碼補(bǔ)全等功能。同時(shí)此軟件具有良好的擴(kuò)展功能，它擁有完全開(kāi)放的用戶自定義配置功能。支持多行選擇、多行編輯。該編輯器在界面上也比較有特色，它支持多種布局和代碼縮略圖，界面右側(cè)的文件縮略圖滑動(dòng)條，可以讓用戶方便的觀察當(dāng)前窗口在文件中的位置。Sublime Text可以很好的恢復(fù)編輯狀態(tài)，即當(dāng)你修改了文件沒(méi)有保存就退出了軟件，無(wú)論是用戶自己點(diǎn)擊退出還是系統(tǒng)崩潰退出，再次啟動(dòng)軟件后，都會(huì)完整的恢復(fù)之前的編輯狀態(tài)，就像軟件關(guān)閉前一樣。對(duì)于Sublime Text，我只是初學(xué)者，還有許多功能在制作網(wǎng)頁(yè)的過(guò)程中暫時(shí)都還沒(méi)有用上，往后會(huì)一一體驗(yàn)。6.4 代碼實(shí)施在程序開(kāi)發(fā)過(guò)程中，功能的實(shí)現(xiàn)也有一定的順序。首選，將靜態(tài)頁(yè)面開(kāi)發(fā)出來(lái)，這其中主要用到的語(yǔ)言有HTML、CSS+DIV，開(kāi)發(fā)順序依次為index.html、about.html 、case.html 、service.html 、news.html 、job.html 、contact.html 。其次，添加網(wǎng)頁(yè)動(dòng)態(tài)效果，這其中主要用到的語(yǔ)言主要是JavaScript和jQuery，主要表現(xiàn)在“主頁(yè)”頁(yè)面的圖片滾動(dòng)區(qū)域、“我們”頁(yè)面的跳躍的公司文化和管理團(tuán)隊(duì)區(qū)域、“聯(lián)系”頁(yè)面的選項(xiàng)卡區(qū)域等。再次，響應(yīng)式設(shè)計(jì)與開(kāi)發(fā)，首先實(shí)現(xiàn)的是整體樣式，然后根據(jù)網(wǎng)頁(yè)具體的布局進(jìn)行不同寬度的樣式設(shè)計(jì)。最后，檢查并修改網(wǎng)頁(yè)樣式與布局，對(duì)網(wǎng)頁(yè)進(jìn)行優(yōu)化，測(cè)試兼容，然后上傳到服務(wù)器進(jìn)行不同設(shè)備上的檢測(cè)。整個(gè)過(guò)程如圖6-2所示。圖6-2 實(shí)施過(guò)程7 網(wǎng)站功能根據(jù)網(wǎng)頁(yè)需求，本網(wǎng)頁(yè)主要有七個(gè)功能塊，分別是主頁(yè)、我們、案例、服務(wù)、新聞、招聘、聯(lián)絡(luò)，各個(gè)塊的詳細(xì)內(nèi)容如圖7-1。圖7-1 網(wǎng)頁(yè)功能塊7.1 網(wǎng)頁(yè)詳細(xì)功能 7.1.1 主頁(yè)主頁(yè)主要以導(dǎo)航為主，頁(yè)面包括了內(nèi)頁(yè)的一些梗概，是整個(gè)網(wǎng)站的門(mén)戶，點(diǎn)擊相關(guān)內(nèi)容可進(jìn)入相應(yīng)的內(nèi)頁(yè)。詳細(xì)代碼見(jiàn)附錄1 ，“主頁(yè)”的頁(yè)面效果如圖7-2。PC端效果 ipad效果 手機(jī)效果 圖7-2 “主頁(yè)”在不同設(shè)備的展示效果 畢業(yè)設(shè)計(jì)的網(wǎng)站是響應(yīng)式網(wǎng)站，從上面的三張圖可以看出在不同的設(shè)備上看到的效果有所不同PC端的內(nèi)容要豐富很多，而手機(jī)端因受尺寸限制，一些內(nèi)容就會(huì)被簡(jiǎn)化，盡量讓用戶看到最重要的信息，并且手機(jī)端的導(dǎo)航條需要點(diǎn)擊右上角的圖標(biāo)才能顯示出來(lái)。7.1.2 我們 此頁(yè)面是對(duì)公司的一個(gè)詳細(xì)介紹，主要包括企業(yè)文化、企業(yè)簡(jiǎn)介、管理團(tuán)隊(duì)、各地分公司四個(gè)模塊，詳細(xì)代碼見(jiàn)附錄2 ，“我們”的頁(yè)面效果如圖7-3。 PC端效果 ipad效果 手機(jī)效果圖7-3 “我們”在不同設(shè)備的展示效果7.1.3 案例案例頁(yè)面主要是公司的客戶網(wǎng)站案例，本網(wǎng)站并未全部收錄客戶的網(wǎng)站，目前只整理了一部分。詳細(xì)代碼見(jiàn)附錄3 。7.1.4 服務(wù)服務(wù)頁(yè)面主要介紹公司業(yè)務(wù)以及公司主要的合作伙伴，主要業(yè)務(wù)及產(chǎn)品包括以下幾個(gè)方面：易商中國(guó)、微信網(wǎng)站、電商策劃運(yùn)營(yíng)、智能網(wǎng)站魔方、移動(dòng)端應(yīng)用定制、代理產(chǎn)品。詳細(xì)代碼見(jiàn)附錄4 。7.1.5 新聞這個(gè)頁(yè)面主要是公司的新聞活動(dòng)，主要包括公司動(dòng)態(tài)和媒體聚焦兩部分，但因媒體聚焦部分暫時(shí)沒(méi)有內(nèi)容，就暫時(shí)把模塊開(kāi)發(fā)出來(lái)，等以后有了內(nèi)容再加上。詳細(xì)代碼見(jiàn)附錄5。7.1.6 招聘這個(gè)頁(yè)面主要為公司的人才招聘頁(yè)面，里面有公司的人才聘用方向和人數(shù)。詳細(xì)代碼見(jiàn)附錄6 ，頁(yè)面效果如圖7-4。 PC端效果 Ipad效果 手機(jī)效果圖7-4 “招聘”在不同設(shè)備的展示效果7.1.7 聯(lián)系 這個(gè)頁(yè)面主要為公司主要地區(qū)的聯(lián)系方式以及留言的前端效果，因?yàn)楫厴I(yè)設(shè)計(jì)只涉及前端，不涉及后臺(tái)，所以留言部分也只有一個(gè)前端的效果，無(wú)法提交給有效的接收文件，且留言也只有在PC端才能看到，ipad和手機(jī)上不顯示。詳細(xì)代碼見(jiàn)附錄7 。8 兼容性與網(wǎng)站測(cè)試兼容性測(cè)試是在程序開(kāi)發(fā)的過(guò)程中就開(kāi)始了，主要是檢測(cè)網(wǎng)頁(yè)能否在不同的瀏覽器上正常顯示，瀏覽器的兼容性不一樣，顯示的效果不同，測(cè)試中需使網(wǎng)頁(yè)在不同的瀏覽器中達(dá)到相同的效果。IE瀏覽器版本較多且IE6、IE7基本已被淘汰，所以本人的畢業(yè)設(shè)計(jì)中IE只兼容到IE8及以上，其他瀏覽器如Google Chrome、Safari、Opera、Firefox等主流瀏覽器基本可以正常瀏覽。這里需要提醒一下的是，IE8及以下不支持響應(yīng)式media query，想使其兼容需要添加能實(shí)現(xiàn)兼容的庫(kù)，目前實(shí)現(xiàn)media query IE兼容的庫(kù)比較成熟的有respond.js和css3-mediaquery.js,這兩個(gè)都有各自的優(yōu)勢(shì)和缺點(diǎn)，respond.js壓縮后只有1k，但它只實(shí)現(xiàn)了對(duì)media query中最常用的min-width、max-width等的兼容；而css3-mediaquery.js壓縮后有16k，但是實(shí)現(xiàn)了對(duì)所有css3規(guī)范中的media query特性的兼容。本網(wǎng)頁(yè)對(duì)media query特性用到的不是特別多，所以采用respond.js來(lái)實(shí)現(xiàn)兼容。引入respond.min.js，但要把文件引入在css的后面，越早引入越好，這樣在ie下面看到的頁(yè)面出現(xiàn)閃屏的概率就越低，這是因?yàn)樽畛鮟ss會(huì)先渲染出來(lái)，如果 respond.js加載很慢很靠后，重新根據(jù)media query解析出來(lái)的css會(huì)再一次改變頁(yè)面的布局效果，看起來(lái)就像閃屏的現(xiàn)象12。個(gè)人覺(jué)得，不考慮IE6-IE8的響應(yīng)式兼容問(wèn)題對(duì)用戶體驗(yàn)影響不大，主要是因?yàn)樵赑C端效果都是一樣的，不一樣的是移動(dòng)端，而移動(dòng)端的瀏覽器基本上都是webkit核心的，webkit核心瀏覽器都兼容media query，所以影響不大。9 總結(jié)易揚(yáng)眾和信息技術(shù)有限公司是本人實(shí)習(xí)所在的公司，在公司實(shí)習(xí)期間主要負(fù)責(zé)網(wǎng)頁(yè)設(shè)計(jì)與制作，參與美工網(wǎng)頁(yè)設(shè)計(jì)的后期建議與修改，參與前端開(kāi)發(fā)。這一段時(shí)間的實(shí)習(xí)，讓我學(xué)習(xí)了許多：前端開(kāi)發(fā)過(guò)程中代