易揚眾和信息技術有限公司響應式網頁制作

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