基于响应式布局的学院网站设计与实现

刘倩 缪舒萌

摘要：该文通过对学院网站的建设进行需求分析，采用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.

【通联编辑：王力】