基于響應式布局的學院網站設計與實現

丁健 周雙

摘 要：學院網站是學校信息化建設中的重要組成部分，它能展現一個學院的一些基本信息并為外界查詢學院信息提供一個渠道。在W3C制定的最新標準HTML5背景下，基于HTML5的網站建設具有創新性和可行性。本文中前后臺使用php+mysql+apache框架，實現網站各類功能，并采用響應式布局以適應不同分辨率的設備。

關鍵詞：HTML5;響應式布局;模塊設計

引言

隨著互聯網技術日益發展，網站建設成為學校信息化建設的重要組成部分。同時，隨著 Android 和 IOS 等操作系統的智能手機的流行，移動互聯網技術發展迅猛，移動終端成為信息獲取的重要途徑之一。傳統HTML標準下的網站不能夠較好的適應移動設備的瀏覽要求，建設HTML5新標準下的網站成為各院校及企事業單位信息化建設的新課題。響應式布局的出現解決了不同設備下頁面自適應問題。

一、技術簡介

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

HTML5是最新應用HTML標準，它是構建頁面內容的一種語言描述方式，主要特點是能夠在移動設備上支持高效的多媒體應用，具有跨平臺、強交互、社交性等優點，是在移動設備上展示多媒體信息的理想形式。

Wamp Server是一款集Apach服務器、PHP解釋器和My SQL數據庫的整合軟件包，擁有簡單的圖形界面、菜單安裝和配置環境。Wampserver通過簡單的鼠標點擊就可以完成PHP擴展、Apache模塊、開啟和關閉，非常適合新手使用，簡單易學。

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

二、網站系統分析與設計

（一）設計總體需求分析

制作金審學院信息科學與工程學院的官網，包括前端和后端的設計。

1）Web前端：前端就是在Web應用中用戶直接看到的界面，包括Web頁面的結構、Web的外觀視覺表現以及Web層面的交互實現。 web前端開發通過HTML，CSS及JavaScript以及衍生出來的各種技術、框架、解決方案，來實現互聯網產品的用戶界面交互。主要功能包括：學院概況，教務工作，學生工作，招生就業，黨建工作，合作交流，公共服務。

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

（二）模塊設計

基于模塊化設計的系統具有更好的延展性，采用模塊化設計，可以將復雜的系統拆分為各個具有獨立功能的小塊，依次實現可以降低整體的設計難度，系統可以由這些小塊自由組合，有利于系統的后期強化和升級。模塊化設計可以使系統的數據層、業務層、界面層各自獨立，所以某一模塊的變動不會影響其他模塊，可以降低系統的維護成本。

（1）頁面布局

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

部分代碼以及頁面如下：

（2）后臺管理

后臺采用模塊化管理，分為學院概況，黨建工作，新聞動態，學生工作，IT聯盟，加入我們七個模塊。網站主要目標是發布學院相關資料及新聞、提供互動平臺。后臺管理主要用于網站管理員進行模塊的修改，管理員具有實現增、刪、改文章的權限。修改后不會對前端造成影響，為網站更新管理提供便利，同時縮短網站開發時間周期。

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

新聞表、用戶表如下圖：

（三）數據庫設計

MySql是一種開放源代碼的關系型數據庫管理系統，它使用最常用的結構化查詢語句（SQL）進行數據庫管理。MySQL的速度、可靠性和適應性非常適合開發初學者使用。

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

三、頁面結構設計及數據表展示

四、結束語

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

參考文獻：

[1]張潔. 設計院校響應式網頁設計應用研究[D].內蒙古師范大學，2019.

[2]葉潮流，馬林山.基于HTML 5+CSS3+jQuery的響應式布局網頁設計[J].梧州學院學報，2018，28（03）：22-35.

[3]楊婷. 基于模塊化的前端開發框架的研究與實現[D].北京郵電大學，2017.

[4]陳耀成.基于PHP的示范校建設專題網站開發和設計[J].科技傳播，2018，10（01）：82-83.

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

[6]焦新偉.HTML5在WEB前端開發中的應用研究[J].網絡安全技術與應用，2020（04）：73-75

[7]楊萃潔.Bootstrap響應式設計在服務高校師生信息發布平臺開發中的應用實踐探究[J].教育現代化，2019，6（25）：111-114+124.

作者簡介：

丁健（1999-），漢族，江蘇南京人，南京審計大學金審學院，計算機方向

周雙（1999-），漢族，江蘇連云港人，南京審計大學金審學院，計算機方向

基金項目：本文系南京審計大學金審學院2019年度大學生實踐創新訓練計劃項目，項目編號：201913994002Y