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

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