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