網(wǎng)頁設計在高校網(wǎng)站建設中的應用
前言：想要寫出一篇引人入勝的文章？我們特意為您整理了網(wǎng)頁設計在高校網(wǎng)站建設中的應用范文，希望能給你帶來靈感和參考，敬請閱讀。
摘要：本文以高校網(wǎng)站建設作為研究課題，分析了在當今移動互聯(lián)網(wǎng)時代，高校網(wǎng)站在用戶體驗方面的現(xiàn)狀以及存在的問題，引出了響應式網(wǎng)頁設計的概念，并介紹了使用響應式網(wǎng)頁設計來建設高校網(wǎng)站的優(yōu)勢和方法，旨在推動響應式網(wǎng)頁設計在高校網(wǎng)站建設中的應用。
1引言
當今網(wǎng)站已經(jīng)成為各行各業(yè)，乃至很多人的標配名片，當想了解某些未知信息時，第一時間想到的就是去網(wǎng)上搜索了解信息。然而隨著時代的發(fā)展，我們的使用場景發(fā)生了變化，以前我們上網(wǎng)用的是臺式電腦（PC），而現(xiàn)在我們使用最多的是移動設備。據(jù)著名網(wǎng)站通信流量監(jiān)測機構StatCounter于2019年6月統(tǒng)計數(shù)據(jù)顯示，我國網(wǎng)民使用手機端的市場份額為58.03%，PC端的市場份額為40.26%，平板電腦的市場份額為1.71%?？梢娫谖覈幸话胍陨系木W(wǎng)民使用手機來上網(wǎng)瀏覽信息。傳統(tǒng)的網(wǎng)站在建設時沒有考慮到移動設備的顯示和兼容問題，導致在移動設備上的用戶體驗不友好。因此，設計一個能夠同時適配PC和移動設備，并且具有良好用戶體驗的網(wǎng)站是每個網(wǎng)站主都要考慮的問題。
2響應式網(wǎng)頁設計
在響應式網(wǎng)頁設計的概念提出之前，網(wǎng)站前端開發(fā)者們?yōu)榱耸咕W(wǎng)站能夠適配各種終端設備（PC、手機和平板電腦等），往往會專門針對不同的終端設備開發(fā)出相適配的版本，即一個網(wǎng)站針對不同的終端設備開發(fā)出不同的前端版本，從而達到相同的用戶體驗，但是，如果有幾十種甚至上百種不同型號的終端設備，難道都要為其單獨開發(fā)嗎？顯然這樣的做法并不科學，大大增加了網(wǎng)站的開發(fā)成本以及日后的修改成本。
于是在2010年5月，一位名為伊?！ゑR科特的網(wǎng)頁設計師首次提出了響應式網(wǎng)頁設計（ResponsiveWebDesign）的概念，即為網(wǎng)站開發(fā)一個版本的樣式，便能自動兼容并適配各種終端設備，且能同時達到相同的用戶體驗?？梢哉f響應式網(wǎng)頁設計的出現(xiàn)，不僅降低了網(wǎng)站的開發(fā)成本，還解決了終端設備的兼容問題，同時各大搜索引擎也更喜歡響應式網(wǎng)頁設計的網(wǎng)站，響應式網(wǎng)頁已成為網(wǎng)站前端設計的首選。
3高校網(wǎng)站使用響應式網(wǎng)頁設計的現(xiàn)狀
雖然響應式網(wǎng)頁設計的概念早就提出了，但是在我國直到2015年才開始逐漸流行起來（可能與PC和移動設備的市場份額有關），而高校網(wǎng)站使用的響應式網(wǎng)頁設計技術相對比較落后，筆者對全國10個省份，每個省隨機抽取了10所高校門戶網(wǎng)站以及招生網(wǎng)站統(tǒng)計發(fā)現(xiàn)，其中門戶網(wǎng)站使用響應式網(wǎng)頁設計的高校有43%，招生網(wǎng)站使用響應式網(wǎng)頁設計的高校只有10%。
從數(shù)據(jù)和筆者工作的經(jīng)驗來看，高校網(wǎng)站使用響應式網(wǎng)頁設計相對落后的原因一是管理者不夠重視，沒有意識到網(wǎng)站還需要適配移動設備，二是缺少專門進行學校網(wǎng)站開發(fā)的專職人員，因此對于新技術的應用還需要一定的時間過程。不過近幾年來，越來越多的高校門戶網(wǎng)站已經(jīng)逐漸開始使用響應式網(wǎng)頁設計了。
4響應式網(wǎng)頁設計的方法
4.1響應式網(wǎng)頁設計的技術原理
一個標準的網(wǎng)頁一般由結構（HTML，XML，XHTML）、表現(xiàn)（CSS）和行為（DOM、ECMAScript）三部分組成，其中結構和表現(xiàn)部分則為響應式網(wǎng)頁設計的重要部分，另外CSS3標準的建立也為響應式網(wǎng)頁設計奠定了基礎。響應式網(wǎng)頁設計的核心技術一般由以下三部分組成：
（1）媒體查詢（MediaQueries）媒體查詢又稱為媒介查詢，即通過CSS3的@media聲明來查詢展示媒介（終端設備）的顯示尺寸，根據(jù)不同尺寸的終端設備來選擇不同的CSS樣式，從而達到網(wǎng)頁能自動適配多種終端的效果。@media聲明從CSS3開始才被支持，現(xiàn)在的移動設備中的瀏覽器均支持CSS3，只有PC端的一些老舊瀏覽器不支持，如IE8以前的版本，很多網(wǎng)站已經(jīng)放棄這些老舊的瀏覽器。媒體查詢示例代碼如下：@mediascreenand（min-width:768px）{這里設置您的CSS樣式代碼}
（2）網(wǎng)格布局（FlexibleGrids）這里的網(wǎng)格布局是一個寬泛的概念，即結合了流式布局、彈性布局和柵格布局的特性，把整個網(wǎng)頁劃分成一個個網(wǎng)格，網(wǎng)頁上每個網(wǎng)格可以任意組合，最終表現(xiàn)為一個個內(nèi)容塊。通過與媒體查詢配合，同時運用流式布局中以百分比或混合百分比作為度量單位的方式和彈性布局中Flex技術，從而實現(xiàn)網(wǎng)頁響應式布局的效果。
（3）彈性圖片（FlexibleImages）響應式網(wǎng)頁設計中，處理好圖片也非常重要。因為現(xiàn)在的網(wǎng)站往往會使用大幅圖片來展示內(nèi)容，這就需要根據(jù)終端設備的寬度來自動調(diào)整圖片的寬度，從而達到更好的顯示效果。通常的做法是將圖片寬度以百分比來度量，配合max-width或background-size等CSS屬性來完成。
4.2目前主流響應式網(wǎng)頁設計開發(fā)框架介紹
我們在做網(wǎng)站前端開發(fā)的時候，可以借助一些前端開發(fā)框架來幫助快速開發(fā)網(wǎng)站，這些前端開發(fā)框架的原理其實就是將布局系統(tǒng)、排版樣式、導航樣式、表單樣式、按鈕樣式和表格樣式等封裝好，我們只需要直接拿來引用，而不需要單獨的為每個HTML標簽寫CSS樣式，還能提高界面的美觀性。目前支持響應式網(wǎng)頁設計的開發(fā)框架有很多，甚至自己也可以開發(fā)一套適合的開發(fā)框架，下面介紹幾種主流的響應式網(wǎng)頁設計開發(fā)框架。
（1）Bootstrap。由Twitter的工程師開發(fā)，是一款集合HTML、CSS和JavaScript的框架，用于開發(fā)響應式布局、移動設備優(yōu)先的網(wǎng)站，且免費開源，擁有龐大的社區(qū)支持。
（2）Foundation。由一家專業(yè)的產(chǎn)品設計公司ZURB開發(fā)，是目前在商業(yè)領域使用最為廣泛的一款響應式前端開發(fā)框架，是一個易用、強大而靈活的框架，且免費開源。
（3）GroundworkCSS2。同樣是一款響應式HTML、CSS和Javascript的框架，其官網(wǎng)還提供大量的在線展示示例和開發(fā)文檔，且免費開源。
4.3使用響應式前端開發(fā)框架來開發(fā)高校網(wǎng)站
面對如此繁多的前端開發(fā)框架，高校網(wǎng)站只需要挑選其中一款即可滿足需求。通常高校網(wǎng)站前端開發(fā)步驟如下（這里僅僅提供一種思路，具體設計開發(fā)的細節(jié)不展開）：
第一步設計界面，用網(wǎng)格布局的原理，將高校網(wǎng)站的內(nèi)容設計成一個個區(qū)塊，比如從頁面頂端依次到頁面的底端，一般為網(wǎng)站Logo、導航菜單、大圖輪播、主要欄目列表、底部聯(lián)系方式、備案信息和新媒體二維碼等。
第二步選擇一款主流的前端開發(fā)框架，通過前端開發(fā)框架的實例，找到適合的界面設計實例，直接拿來使用就可以。
第三步開發(fā)調(diào)試您的網(wǎng)站，使用Chrome開發(fā)者工具可以高效調(diào)試您的網(wǎng)站。這里要注意的一點是，為了確保移動終端的適當縮放，需要在HTML代碼的<head>之中添加viewport元數(shù)據(jù)標簽，并設置成<metaname="viewport"content="width=device-width,initial-scale=1">。
5結束語
隨著移動互聯(lián)網(wǎng)的興起，網(wǎng)站前端開發(fā)技術也得到了一次又一次的革新，其中響應式網(wǎng)頁設計解決了當下的用戶痛點，但是也不能盲目地追新技術，我們使用響應式網(wǎng)頁設計的目的是為了讓用戶有更好地體驗，滿足用戶的需求。最后筆者建議高校作為教育機構，在大多數(shù)高校均開設了相應的網(wǎng)站前端開發(fā)課程前提下，對于高校自身的網(wǎng)站建設方面，理應優(yōu)先提供更好的網(wǎng)站用戶體驗，起到示范和教育作用。
作者：薛鵬飛 單位：常州紡織服裝職業(yè)技術學院