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

丁健 周雙

摘 要：學(xué)院網(wǎng)站是學(xué)校信息化建設(shè)中的重要組成部分，它能展現(xiàn)一個學(xué)院的一些基本信息并為外界查詢學(xué)院信息提供一個渠道。在W3C制定的最新標(biāo)準(zhǔn)HTML5背景下，基于HTML5的網(wǎng)站建設(shè)具有創(chuàng)新性和可行性。本文中前后臺使用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è)的重要組成部分。同時，隨著 Android 和 IOS 等操作系統(tǒng)的智能手機(jī)的流行，移動互聯(lián)網(wǎng)技術(shù)發(fā)展迅猛，移動終端成為信息獲取的重要途徑之一。傳統(tǒng)HTML標(biāo)準(zhǔn)下的網(wǎng)站不能夠較好的適應(yīng)移動設(shè)備的瀏覽要求，建設(shè)HTML5新標(biāo)準(zhǔn)下的網(wǎng)站成為各院校及企事業(yè)單位信息化建設(shè)的新課題。響應(yīng)式布局的出現(xiàn)解決了不同設(shè)備下頁面自適應(yīng)問題。

一、技術(shù)簡介

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

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

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

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

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

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

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

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

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

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

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

（1）頁面布局

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

部分代碼以及頁面如下：

（2）后臺管理

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

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

新聞表、用戶表如下圖：

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

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

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

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

四、結(jié)束語

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

參考文獻(xiàn)：

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

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

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

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

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

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

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

作者簡介：

丁?。?999-），漢族，江蘇南京人，南京審計(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)目編號：201913994002Y