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

劉倩 繆舒萌

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

關(guān)鍵詞：php網(wǎng)站;響應(yīng)式布局;模塊設(shè)計

中圖分類號：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

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

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

1 開發(fā)技術(shù)簡介

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

2 網(wǎng)站系統(tǒng)分析與設(shè)計

2.1 設(shè)計原則和對象

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

網(wǎng)站的對象主要是教師和學(xué)生， 是加強學(xué)院與教師、學(xué)院與學(xué)生聯(lián)系的紐帶， 以能夠即時發(fā)布新聞、開展學(xué)院活動和學(xué)生學(xué)習(xí)的相關(guān)資料為目標。

2.2 功能分析

1）前臺系統(tǒng)功能

在Web應(yīng)用中用戶直接看到的界面，即Web頁面的結(jié)構(gòu)（logo+導(dǎo)航欄、輪播圖、新聞動態(tài)公告、教師寄語、友情鏈接）。主要功能包括：學(xué)院概況，教務(wù)工作，學(xué)生工作，招生就業(yè)，黨建工作，合作交流，公共服務(wù)，圖書資源。

2）后臺系統(tǒng)功能

考慮的是如何實現(xiàn)數(shù)據(jù)的存取以及增刪改查的功能、平臺的穩(wěn)定性與性能等。主要功能包括：信息管理。其中，信息管理又包括學(xué)院動態(tài)管理、新聞管理、圖庫管理、視頻管理和用戶管理。

2.3 模塊設(shè)計

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

2.3.1 頁面布局模塊化

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

2.3.2 后臺管理模塊化

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

2.4 數(shù)據(jù)庫設(shè)計

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

3 網(wǎng)站實現(xiàn)

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

4 結(jié)束語

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

參考文獻：

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

[2] 王長利.某學(xué)院網(wǎng)站的設(shè)計與開發(fā)[J].信息與電腦：理論版，2012（5）：46-47.

[3] 祥保玉. 響應(yīng)式內(nèi)容管理系統(tǒng)的設(shè)計與實現(xiàn)[D]. 哈爾濱：哈爾濱工業(yè)大學(xué)，2017.

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

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

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

【通聯(lián)編輯：王力】