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

劉倩 繆舒萌

摘要：該文通過對學院網站的建設進行需求分析，采用Apache + MySQL + PHP為開發框架，用HTML5和CSS技術相結合實現響應式web布局。學院概況、黨建工作、師資隊伍、學生工作以及網站系統管理等模塊的設計，提供學院新聞與學生系統管理功能于一體的動態交互式平臺。

關鍵詞：php網站;響應式布局;模塊設計

中圖分類號：G434? ? ? ? 文獻標識碼：A

文章編號：1009-3044（2019）18-0062-02

Abstract：This article analyses the needs of the construction of the collegewebsite，usingApache + MySQL + PHP as the development framework，useinghtml5andCSStechnologyto achieve Responsive? Weblayout.The module design of the collegeprofiles，work of party building，teachers，studentsandsitesystemmanagement，providesschool ofjournalismandstudentsystemsmanagementcapabilitiesinonedynamic， interactiveplatforms.

Key words： php website; Responsive Layout; module design

隨著互聯網技術日益發展，網站建設一直是學校信息化建設的重要組成部分。為了及時公布學校的發展動態，大力宣傳各專業的教學特色，建立學校及各級學院的網站是最主要的互聯網宣傳手段之一。對此本文旨在研究和設計基于HTML5標準的網站，使用當前移動互聯網主流技術，為師生提供便捷的交流平臺，同時為社會了解學校及各級學院提供了更好的窗口。

HTML5是W3C（World Wide Web Consortium，萬維網聯盟） 制定的最新應用HTML標準，具有跨平臺、強交互、社交分享性強等傳播優勢，使網頁布局能夠根據不同種設備的屏幕分辨率自我調整，從而達到較合適的布局效果，使移動終端用戶體驗較好，是在移動設備上展示多媒體信息的理想形式，對網站的設計與傳播具有應用價值。

1 開發技術簡介

學院官網主要存儲新聞，公告，動態以及學生信息，規模較小，我們選用了PHP+MySQL+Apache框架來搭建網站，這一組合有很高的工作效率和系統性能，尤其適合中小型規模網站的開發。Apache是一款開源的Web服務器，具有較好的應用性和安全性。MYSQL 履行后臺數據庫之職。PHP是文本預處理器（Hypertext Preprocessor）的縮寫，是一種開源的動態網站開發語言，系統資源占用少，性能穩定快速，代碼執行速度快。不僅有極強的包容性，還極易學習與掌握。PHP 具有很好的跨平臺性、開放性和可擴展性，有很多成熟的框架，有成熟的面向對象體系，作為一個使用較多的網站建設語言，對于網站的發展有著積極的促進作用。

2 網站系統分析與設計

2.1 設計原則和對象

網站的設計原則是應用HTML5的特點——響應式布局來方便學生與老師在各種設備上瀏覽網站、訪問網站的速度快、具有較好的安全性和易于維護和升級。

網站的對象主要是教師和學生， 是加強學院與教師、學院與學生聯系的紐帶， 以能夠即時發布新聞、開展學院活動和學生學習的相關資料為目標。

2.2 功能分析

1）前臺系統功能

在Web應用中用戶直接看到的界面，即Web頁面的結構（logo+導航欄、輪播圖、新聞動態公告、教師寄語、友情鏈接）。主要功能包括：學院概況，教務工作，學生工作，招生就業，黨建工作，合作交流，公共服務，圖書資源。

2）后臺系統功能

考慮的是如何實現數據的存取以及增刪改查的功能、平臺的穩定性與性能等。主要功能包括：信息管理。其中，信息管理又包括學院動態管理、新聞管理、圖庫管理、視頻管理和用戶管理。

2.3 模塊設計

基于模塊化設計的網站適用于響應式框架，具有更好的可擴展性能。采用模塊化設計，可以將復雜的網站拆分為各個具有獨立功能的小網頁，逐一設計實現，從而降低整體的設計難度，整合后也能很好地推廣到整個行業，也有利于網站的后期擴展和升級。模塊化設計可以使網站的數據層、界面層更加清晰，某一模塊的變動不會影響其他模塊，可以大大降低網站的維護成本。

2.3.1 頁面布局模塊化

一個完整的網頁，需要劃分為多個模塊，例如頭部、底部、列表、側邊欄等等，每個獨立為一個模塊，每個模塊均有自己獨立的功能與文件，在開發的每一個子頁面中只需調用這些模塊。部分代碼如下：

2.3.2 后臺管理模塊化

PHP 具有后臺管理模塊設置功能，分為簡介模塊，文章模塊，下載模塊，圖片模塊，留言系統等。后臺管理主要用于網站管理員進行模塊的修改，管理員具有實現添加，刪除，修改內容的權限。修改的模塊內容不會對整體頁面布局產生影響。模塊化設計有效縮短了網站開發周期，同時可視化后臺為后續網站更新和管理提供便利。示例如圖1所示：

2.4 數據庫設計

數據庫用于對存儲的數據進行分類，并建立數據檢索，通過檢索可以實現高速有效地查詢數據。合理設計數據庫能有效節省數據存儲空間。數據庫設計分為概念結構設計，邏輯結構設計和物理結構設計。我們根據功能設計畫出E-R圖，建立用戶表、新聞表等。用戶表管理用戶、密碼、設定角色、設置訪問系統的權限，新聞表用于添加、刪除、修改文章。下面列出部分數據表。

3 網站實現

PC端中的導航欄呈現在頂部，而在移動設備上，則將它隱藏在logo右側，這便是響應式網站針對不同設備的折疊效果。充分運用這個技術能夠很好地將導航欄隱藏，使整體頁面清爽整潔，有效節省屏幕空間，用戶使用起來也極為便利。

4 結束語

在移動互聯網時代，學院的宣傳形式、內容及平臺應積極利用新媒體技術。利用PHP網站可以快速簡單地開發網站，基于HTML5的網頁新標準具備響應式布局的特點，尤其適合移動端用戶。本文研究了php的特點和使用方法，探討了建設網站的過程，具有可行性，通過以上研究，可以為高校宣傳各級學院工作提供思路和參考。

參考文獻：

[1] 主福洋，郭坤.基于PHP技術的網站建設[J].軟件工程師，2013（Z1）：60-61.

[2] 王長利.某學院網站的設計與開發[J].信息與電腦：理論版，2012（5）：46-47.

[3] 祥保玉. 響應式內容管理系統的設計與實現[D]. 哈爾濱：哈爾濱工業大學，2017.

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

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

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

【通聯編輯：王力】