基于響應(yīng)式web設(shè)計的質(zhì)量工程論文范文
本站小編為你精心準(zhǔn)備了基于響應(yīng)式web設(shè)計的質(zhì)量工程論文參考范文，愿這些范文能點燃您思維的火花，激發(fā)您的寫作靈感。歡迎深入閱讀并收藏。
一、系統(tǒng)基于響應(yīng)式web設(shè)計的需求
質(zhì)量工程管理系統(tǒng)是滁州職業(yè)技術(shù)學(xué)院教務(wù)處用于管理審批學(xué)院科研項目的一個web系統(tǒng)。本系統(tǒng)采用響應(yīng)式web設(shè)計技術(shù)，基于B/S模式，在J2EE平臺上開發(fā)和實現(xiàn)。在項目開發(fā)之前，為了構(gòu)建響應(yīng)式web設(shè)計的開發(fā)框架，必須先確定系統(tǒng)整體的需求。由于質(zhì)量工程管理系統(tǒng)的主要用戶是學(xué)院教師，因此，采用調(diào)查問卷的方式對學(xué)院教師進行了需求調(diào)查，以確定用戶使用移動設(shè)備的類型和所關(guān)心的具體的功能需求，便于規(guī)劃出幾種典型的響應(yīng)式布局方式。經(jīng)過對調(diào)查結(jié)果進行分析統(tǒng)計，系統(tǒng)用戶使用的移動設(shè)備類型及分辨率主要有PC機（1024×768或更高）、Android智能終端（480×800）、iPad（640×960）三種類型，使用這三種分辨率大小的用戶占了被調(diào)查用戶的絕大部分。同時，確定了質(zhì)量工程管理系統(tǒng)的主要功能模塊。注冊用戶通過用戶名和密碼在登陸頁面登陸成功后，即可看到主頁面內(nèi)容，主頁面導(dǎo)航欄由“公告欄”、“新申報項目”和“我的項目”三個欄目組成，其中“我的項目”包括“立項建設(shè)”、“材料上報記錄”、“申報記錄”和“已結(jié)項”四個子菜單項。
二、系統(tǒng)基于響應(yīng)式web設(shè)計的實現(xiàn)
1采用彈性布局一個系統(tǒng)如果沒有一個良好的用戶體驗度，那么里面的內(nèi)容就算設(shè)計的再好，也算不上是一個成功的系統(tǒng)。由于質(zhì)量工程管理系統(tǒng)用戶使用的設(shè)備類型各異，訪問設(shè)備屏幕尺寸大小不一。如果采用傳統(tǒng)的兩欄或三欄固定寬度的布局方式，雖然符合PC機用戶的使用習(xí)慣，但必然不適合在移動終端設(shè)備上進行展示，使移動設(shè)備用戶缺乏體驗。因此，系統(tǒng)布局設(shè)計必須相對靈活，能夠針對不同分辨率的設(shè)備自適應(yīng)調(diào)整。為了實現(xiàn)更靈活的布局設(shè)計，能在多種類型設(shè)備的顯示器中完美顯示，我們需要對頁面元素采用彈性布局。所謂彈性布局就是不使用固定寬度限制頁面元素的顯示范圍，這樣才能讓頁面元素根據(jù)所使用設(shè)備的顯示器分辨率大小靈活伸縮顯示。彈性布局是一切響應(yīng)式布局的基礎(chǔ)，只有在彈性布局的基礎(chǔ)上使用其他web設(shè)計技術(shù)才能讓頁面在不同的訪問設(shè)備中很好的呈現(xiàn)。彈性布局要求包含元素的寬度單位全部采用百分比，同時設(shè)定包含元素的最大和最小寬度。根據(jù)前期分析和頁面彈性布局要求，在主頁面中，頁面頭部（Header）、底部（Footer）固定，占滿整個一行，因此寬度設(shè)定為100%，中間部分（Container）分成左側(cè)邊欄區(qū)和右側(cè)正文區(qū)兩部分，寬度分別設(shè)定為25%和75%。采用這種彈性布局方式，元素的寬度會自動隨著瀏覽器窗口寬度的改變而自動調(diào)整，不需要考慮瀏覽器窗口的具體寬度有多大。
2引入媒體查詢媒體查詢是響應(yīng)式web設(shè)計的核心，它可以根據(jù)移動設(shè)備的分辨率大小自動調(diào)整相應(yīng)的樣式。從CSS2開始，就可以在CSS中通過設(shè)置媒體類型獲得媒體支持。為了適應(yīng)屏幕，大多數(shù)移動設(shè)備瀏覽器會把網(wǎng)頁縮放到設(shè)備屏幕的寬度，當(dāng)縮小比例較大時，會導(dǎo)致瀏覽者看不清楚頁面的內(nèi)容，瀏覽內(nèi)容不方便。我們可以首先使用meta標(biāo)簽的viewport屬性來設(shè)置，讓網(wǎng)頁寬度默認等于屏幕寬度。在質(zhì)量工程管理系統(tǒng)頁面的<head>標(biāo)簽中添加這個<meta>標(biāo)簽的內(nèi)容，代碼如下。上面的代碼是強制設(shè)置網(wǎng)頁在移動設(shè)備上的顯示寬度等于設(shè)備寬度，按照原始網(wǎng)頁縮放比例（initial-scale=1.0）1.0顯示網(wǎng)頁。這樣，支持viewport屬性的瀏覽器就會按照原始網(wǎng)頁的實際寬度去顯示網(wǎng)頁內(nèi)容了。接下來，在上述設(shè)置了viewport屬性的基礎(chǔ)上，引入媒體查詢來設(shè)置網(wǎng)頁在不同的分辨率大小的設(shè)備上自動調(diào)用相應(yīng)的CSS樣式進行顯示。媒體查詢被用來檢查對于所有寬度大于1024px分辨率的移動設(shè)備來說，系統(tǒng)頁面內(nèi)容的寬度會被固定為980px。如果viewport小于980px，頁面布局會以彈性布局來顯示。如果viewport小于640px，頁面內(nèi)容將會把左側(cè)邊欄區(qū)和右側(cè)正文區(qū)展開為整體寬度，形成一個單欄布局。頁面具體應(yīng)用的媒體查詢代碼如下所示。
2導(dǎo)航欄設(shè)計由于移動設(shè)備屏幕大小的限制，質(zhì)量工程管理系統(tǒng)在移動設(shè)備上顯示時，導(dǎo)航欄目會重疊顯示，使頁面看起來雜亂不堪。針對此問題，作者特意對導(dǎo)航欄重新設(shè)計，對于小屏幕的移動設(shè)備，利用js技術(shù)在最初時隱藏導(dǎo)航欄目，只為用戶提供一個按鈕，用戶點擊時，就會顯示完整導(dǎo)航欄。這樣做不僅使頁面看起來整潔美觀，節(jié)省了屏幕空間，用戶還可以按需索取想要了解的內(nèi)容。在以后擴展系統(tǒng)功能增加更多導(dǎo)航條目時，也無需考慮屏幕尺寸問題所帶來的影響。
三、系統(tǒng)測試
在系統(tǒng)開發(fā)過程中，每一個階段都應(yīng)該在多種瀏覽器和不同類型移動設(shè)備屏幕中進行測試，以便盡早發(fā)現(xiàn)和解決問題。質(zhì)量工程管理系統(tǒng)在開發(fā)過程中，在多種移動設(shè)備上也經(jīng)過不斷的測試和完善，最終效果如圖1所示。
四、結(jié)語
本文以實際項目為背景，講述了如何使用響應(yīng)式web設(shè)計技術(shù)為移動設(shè)備訪問質(zhì)量工程管理系統(tǒng)提供解決方案。相對于傳統(tǒng)web開發(fā)，響應(yīng)式web設(shè)計技術(shù)可以給移動設(shè)備用戶提供更好的用戶體驗。也很大程度上避免了因訪問設(shè)備的分辨率不同而進行的重復(fù)開發(fā)，節(jié)省了人力物力，提高了開發(fā)效率。
作者：趙衛(wèi)東單位：滁州職業(yè)技術(shù)學(xué)院