基于響應(yīng)式布局的學(xué)院網(wǎng)站設(shè)計(jì)與實(shí)現(xiàn)

丁健 周雙

摘 要：學(xué)院網(wǎng)站是學(xué)校信息化建設(shè)中的重要組成部分，它能展現(xiàn)一個(gè)學(xué)院的一些基本信息并為外界查詢學(xué)院信息提供一個(gè)渠道。在W3C制定的最新標(biāo)準(zhǔn)HTML5背景下，基于HTML5的網(wǎng)站建設(shè)具有創(chuàng)新性和可行性。本文中前后臺(tái)使用php+mysql+apache框架，實(shí)現(xiàn)網(wǎng)站各類功能，并采用響應(yīng)式布局以適應(yīng)不同分辨率的設(shè)備。

關(guān)鍵詞：HTML5;響應(yīng)式布局;模塊設(shè)計(jì)

引言

隨著互聯(lián)網(wǎng)技術(shù)日益發(fā)展，網(wǎng)站建設(shè)成為學(xué)校信息化建設(shè)的重要組成部分。同時(shí)，隨著 Android 和 IOS 等操作系統(tǒng)的智能手機(jī)的流行，移動(dòng)互聯(lián)網(wǎng)技術(shù)發(fā)展迅猛，移動(dòng)終端成為信息獲取的重要途徑之一。傳統(tǒng)HTML標(biāo)準(zhǔn)下的網(wǎng)站不能夠較好的適應(yīng)移動(dòng)設(shè)備的瀏覽要求，建設(shè)HTML5新標(biāo)準(zhǔn)下的網(wǎng)站成為各院校及企事業(yè)單位信息化建設(shè)的新課題。響應(yīng)式布局的出現(xiàn)解決了不同設(shè)備下頁(yè)面自適應(yīng)問(wèn)題。

一、技術(shù)簡(jiǎn)介

隨著科技的快速發(fā)展，移動(dòng)設(shè)備的樣式越來(lái)越多，為了更好地用戶體驗(yàn)，設(shè)備的屏幕趨于擴(kuò)大，而傳統(tǒng)的頁(yè)面布局只能適應(yīng)少部分的屏幕顯示，這就給用戶造成了一些不適感，響應(yīng)式布局可以很好的解決這一問(wèn)題，響應(yīng)式布局是近幾年來(lái)新出來(lái)的一種概念，它能夠隨著打開(kāi)方式的不同，自動(dòng)去適應(yīng)屏幕大小。HTML5是設(shè)計(jì)響應(yīng)式布局頁(yè)面的重要組成，它為頁(yè)面設(shè)計(jì)提供了很大的便利。

HTML5是最新應(yīng)用HTML標(biāo)準(zhǔn)，它是構(gòu)建頁(yè)面內(nèi)容的一種語(yǔ)言描述方式，主要特點(diǎn)是能夠在移動(dòng)設(shè)備上支持高效的多媒體應(yīng)用，具有跨平臺(tái)、強(qiáng)交互、社交性等優(yōu)點(diǎn)，是在移動(dòng)設(shè)備上展示多媒體信息的理想形式。

Wamp Server是一款集Apach服務(wù)器、PHP解釋器和My SQL數(shù)據(jù)庫(kù)的整合軟件包，擁有簡(jiǎn)單的圖形界面、菜單安裝和配置環(huán)境。Wampserver通過(guò)簡(jiǎn)單的鼠標(biāo)點(diǎn)擊就可以完成PHP擴(kuò)展、Apache模塊、開(kāi)啟和關(guān)閉，非常適合新手使用，簡(jiǎn)單易學(xué)。

Spring boot 與MyBatis屬于JavaEE開(kāi)發(fā)框架，特點(diǎn)是簡(jiǎn)潔高效，安全性能高，是目前系統(tǒng)后臺(tái)開(kāi)發(fā)的主流框架之一。Spring boot主要是為了使新Spring應(yīng)用的初始搭建以及開(kāi)發(fā)過(guò)程更簡(jiǎn)單一些，此框架采用了獨(dú)有的方法來(lái)進(jìn)行配置，讓開(kāi)發(fā)人員不用定義模式化的配置。MyBatis是持久層框架，它支持定制化 SQL、存儲(chǔ)過(guò)程以及高級(jí)映射。MyBatis 可以使用簡(jiǎn)單的 XML 或注解來(lái)配置和映射原生信息，將接口和 普通的 Java對(duì)象映射成數(shù)據(jù)庫(kù)中的記錄。

二、網(wǎng)站系統(tǒng)分析與設(shè)計(jì)

（一）設(shè)計(jì)總體需求分析

制作金審學(xué)院信息科學(xué)與工程學(xué)院的官網(wǎng)，包括前端和后端的設(shè)計(jì)。

1）Web前端：前端就是在Web應(yīng)用中用戶直接看到的界面，包括Web頁(yè)面的結(jié)構(gòu)、Web的外觀視覺(jué)表現(xiàn)以及Web層面的交互實(shí)現(xiàn)。 web前端開(kāi)發(fā)通過(guò)HTML，CSS及JavaScript以及衍生出來(lái)的各種技術(shù)、框架、解決方案，來(lái)實(shí)現(xiàn)互聯(lián)網(wǎng)產(chǎn)品的用戶界面交互。主要功能包括：學(xué)院概況，教務(wù)工作，學(xué)生工作，招生就業(yè)，黨建工作，合作交流，公共服務(wù)。

2）Web后端：后端就是我們看不到的部分，通常是與前端工程師進(jìn)行數(shù)據(jù)交互及網(wǎng)站數(shù)據(jù)的保存和讀取，相對(duì)來(lái)說(shuō)后端涉及到的邏輯代碼比前端要多得多，后端更多的是與數(shù)據(jù)庫(kù)進(jìn)行交互以處理相應(yīng)的業(yè)務(wù)邏輯。需要考慮的是如何實(shí)現(xiàn)功能、平臺(tái)的穩(wěn)定性與性能等。主要功能包括：信息管理。其中，信息管理又包括學(xué)院動(dòng)態(tài)管理、新聞管理、圖庫(kù)管理和視頻管理。

（二）模塊設(shè)計(jì)

基于模塊化設(shè)計(jì)的系統(tǒng)具有更好的延展性，采用模塊化設(shè)計(jì)，可以將復(fù)雜的系統(tǒng)拆分為各個(gè)具有獨(dú)立功能的小塊，依次實(shí)現(xiàn)可以降低整體的設(shè)計(jì)難度，系統(tǒng)可以由這些小塊自由組合，有利于系統(tǒng)的后期強(qiáng)化和升級(jí)。模塊化設(shè)計(jì)可以使系統(tǒng)的數(shù)據(jù)層、業(yè)務(wù)層、界面層各自獨(dú)立，所以某一模塊的變動(dòng)不會(huì)影響其他模塊，可以降低系統(tǒng)的維護(hù)成本。

（1）頁(yè)面布局

一個(gè)頁(yè)面由多個(gè)部分組成，例如：頭部、主體部分、底部信息欄，側(cè)邊欄等。先設(shè)計(jì)整體頁(yè)面樣式，然后各部分單獨(dú)去完成，最后進(jìn)行整合。本文設(shè)計(jì)的頁(yè)面為：導(dǎo)航欄包括學(xué)院概況，黨建工作，師資隊(duì)伍，合作交流，公共服務(wù)，學(xué)生工作，學(xué)科建設(shè)。鼠標(biāo)放在字上，會(huì)有下拉菜單。正中南京審計(jì)大學(xué)金審學(xué)院信息科學(xué)與工程學(xué)院幾個(gè)大字十分顯眼，背景為學(xué)校的照片，可以輪播。點(diǎn)擊文字，可以跳轉(zhuǎn)到我們學(xué)校的官網(wǎng)。學(xué)院公告和學(xué)院動(dòng)態(tài)分在兩列，以時(shí)間和標(biāo)題作為導(dǎo)航，簡(jiǎn)潔明了。導(dǎo)航欄置頂，不用回到頂部就可以方便地選擇所需要的內(nèi)容。

部分代碼以及頁(yè)面如下：

（2）后臺(tái)管理

后臺(tái)采用模塊化管理，分為學(xué)院概況，黨建工作，新聞動(dòng)態(tài)，學(xué)生工作，IT聯(lián)盟，加入我們七個(gè)模塊。網(wǎng)站主要目標(biāo)是發(fā)布學(xué)院相關(guān)資料及新聞、提供互動(dòng)平臺(tái)。后臺(tái)管理主要用于網(wǎng)站管理員進(jìn)行模塊的修改，管理員具有實(shí)現(xiàn)增、刪、改文章的權(quán)限。修改后不會(huì)對(duì)前端造成影響，為網(wǎng)站更新管理提供便利，同時(shí)縮短網(wǎng)站開(kāi)發(fā)時(shí)間周期。

后臺(tái)管理模塊滿足以下要求：1） 模塊劃分清晰，對(duì)更新、添加信息、系統(tǒng)設(shè)置等常用功能予以突出顯示;2） 任何操作都要有操作信息回饋，提示操作成功與否，若操作失敗，提示錯(cuò)誤出現(xiàn)的位置。

新聞表、用戶表如下圖：

（三）數(shù)據(jù)庫(kù)設(shè)計(jì)

MySql是一種開(kāi)放源代碼的關(guān)系型數(shù)據(jù)庫(kù)管理系統(tǒng)，它使用最常用的結(jié)構(gòu)化查詢語(yǔ)句（SQL）進(jìn)行數(shù)據(jù)庫(kù)管理。MySQL的速度、可靠性和適應(yīng)性非常適合開(kāi)發(fā)初學(xué)者使用。

在數(shù)據(jù)庫(kù)設(shè)計(jì)階段，我們根據(jù)功能設(shè)計(jì)中對(duì)象類建立用戶表、文章表、文章類型表。用戶表管理使用用戶、設(shè)定角色、設(shè)置訪問(wèn)系統(tǒng)的權(quán)限 ，文章類型表用于添加、刪除、修改文章的類別，文章表用于添加、刪除、修改文章。PHP很好地銜接了數(shù)據(jù)庫(kù)和前端顯示。同時(shí)，PHP也能兼容MYSQL的部分函數(shù)。部分表如下圖：

三、頁(yè)面結(jié)構(gòu)設(shè)計(jì)及數(shù)據(jù)表展示

四、結(jié)束語(yǔ)

在移動(dòng)互聯(lián)網(wǎng)時(shí)代，網(wǎng)上宣傳是宣傳的主要方式之一。一個(gè)好的頁(yè)面樣式讓人賞心悅目，用戶可以通過(guò)簡(jiǎn)單的點(diǎn)擊獲取一些有用的信息，學(xué)院可以通過(guò)網(wǎng)站向外界介紹自己，或者向?qū)W生發(fā)布一些消息、通知。wampserver是一個(gè)集成的環(huán)境，里面包括php+mysql+apache全套做網(wǎng)站的工具，利用wampserver可以簡(jiǎn)單快速地開(kāi)發(fā)一個(gè)網(wǎng)頁(yè)。基于HTML5的網(wǎng)頁(yè)新標(biāo)準(zhǔn)具備響應(yīng)式布局的特點(diǎn)，為使用移動(dòng)設(shè)備的用戶提供了一個(gè)美觀的頁(yè)面，也為宣傳學(xué)院提供了一個(gè)重要途徑。本文研究了php的特點(diǎn)和使用方法，探討了建設(shè)網(wǎng)站的過(guò)程，具有可行性，通過(guò)以上研究，可以為高校宣傳各級(jí)學(xué)院工作提供思路和參考。

參考文獻(xiàn)：

[1]張潔. 設(shè)計(jì)院校響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)應(yīng)用研究[D].內(nèi)蒙古師范大學(xué)，2019.

[2]葉潮流，馬林山.基于HTML 5+CSS3+jQuery的響應(yīng)式布局網(wǎng)頁(yè)設(shè)計(jì)[J].梧州學(xué)院學(xué)報(bào)，2018，28（03）：22-35.

[3]楊婷. 基于模塊化的前端開(kāi)發(fā)框架的研究與實(shí)現(xiàn)[D].北京郵電大學(xué)，2017.

[4]陳耀成.基于PHP的示范校建設(shè)專題網(wǎng)站開(kāi)發(fā)和設(shè)計(jì)[J].科技傳播，2018，10（01）：82-83.

[5]徐卉.基于Bootstrap的垃圾分類宣傳方式研究[J].信息技術(shù)與信息化，2019（02）：172-174.

[6]焦新偉.HTML5在WEB前端開(kāi)發(fā)中的應(yīng)用研究[J].網(wǎng)絡(luò)安全技術(shù)與應(yīng)用，2020（04）：73-75

[7]楊萃潔.Bootstrap響應(yīng)式設(shè)計(jì)在服務(wù)高校師生信息發(fā)布平臺(tái)開(kāi)發(fā)中的應(yīng)用實(shí)踐探究[J].教育現(xiàn)代化，2019，6（25）：111-114+124.

作者簡(jiǎn)介：

丁健（1999-），漢族，江蘇南京人，南京審計(jì)大學(xué)金審學(xué)院，計(jì)算機(jī)方向

周雙（1999-），漢族，江蘇連云港人，南京審計(jì)大學(xué)金審學(xué)院，計(jì)算機(jī)方向

基金項(xiàng)目：本文系南京審計(jì)大學(xué)金審學(xué)院2019年度大學(xué)生實(shí)踐創(chuàng)新訓(xùn)練計(jì)劃項(xiàng)目，項(xiàng)目編號(hào)：201913994002Y