响应式设计的武装部网站建设
Keywords:responsive, news management, database 目录
一、引言 1
（一）选题背景 1
（二）选题意义 1
（三）课题内容 1
（四）技术流程 1
二、开发工具介绍 1
（一）Adobe Photoshop CS6 1
（二）Sublime Text 1
（三）visual studio 2013 1
(四) Microsoft SQL Server 2008 2
三、数据库设计 2
四、网站模块分析 3
（一）前台模块分析 3
1.首页页面介绍 3
2. 新闻列表页面介绍 3
（二）后台模块分析 5
（三）响应式模块分析 5
1.PC端页面 5
2. IPAD端页面 7
3. 手机端页面 7
五、网站主体设计 - 10 -
（一）前台页面实现分析 - 10 -
1. 前台页面功能设计 - 10 -
2. 前台示页面布局 - 14 -
（二） 后台功能实现 - 15 -
1. 数据库连接。 - 15 -
2. 登录功能实现 - 16 -
3. 后台新闻的管理功能 - 19 -
总结 - 24 -
致谢 - 25 -
参考文献 - 26 -
一、引言
（一）选题背景
现在越来越多的人选择手机，平板这些终端设备，大大减小了电脑的使用量。越来越多的网站开始追求响应式。学校的网站并不是响应式网站，所以用手机或者平板浏览时并不方便。将学校的网站改成响应式。方便学生使用其他终端访问。同时也改善了学校网站界面和排版方面的一些缺陷。
（二）选题意义
响应式设计“学院保卫处”网站解决了，在手机浏览学校网站时需要不停放大的缺点。无论是手机，平板，PC端，甚至是手机横屏都可以浏览学校保卫处网站，适用于各种尺寸的终端。而且不用手动的去放大，同时还不
*好棒文|www.hbsrm.com +Q: ^3^5`1^9`1^6^0`7^2#
。学校的网站并不是响应式网站，所以用手机或者平板浏览时并不方便。将学校的网站改成响应式。方便学生使用其他终端访问。同时也改善了学校网站界面和排版方面的一些缺陷。
（二）选题意义
响应式设计“学院保卫处”网站解决了，在手机浏览学校网站时需要不停放大的缺点。无论是手机，平板，PC端，甚至是手机横屏都可以浏览学校保卫处网站，适用于各种尺寸的终端。而且不用手动的去放大，同时还不影响美观，本课题的主要目的是为了解决浏览网站时带来的不方便和而已上的一些缺陷。
（三）课题内容
本课题的主要内容分为两大部分。前台重点是响应式页面的实现以及对学校“保卫处”网站页面的重新布局和颜色的调整，前台的页面主要是用来浏览。学校“保卫处”网站，至于网站的后台重点是新闻的管理部分。后台的页面则侧重的是对新闻和通告的管理。通过管理员登录，然后对新闻的添加、删除、修改、查找。
（四）技术流程
使用Adobe Photoshop CS6 软件进行页面的布局和颜色的管理，使用Sublime Text软件编写，运用了Gulp 搭起一个框架在这个框架之上运用了Html+Css 以及JavaScript,JQuery等一些编译语言，以及响应式网页的技术实现了前台的网页页面。通过visual studio 2013和Windows平台通过Microsoft SQL Server 2008和.net组件对数据库进行增、删、改、查。通过EF到数据库到调用数据实现后台页面的流程。
二、开发工具介绍
（一）Adobe Photoshop CS6
Adobe Photoshop CS6是Adobo推出的最新的一款图像处理软件，是一个强大的图形图像处理软件，与之前版本的PS不同的之处是因为它增加了很多的功能，尤其在3D编辑方面。本课题的所有图形图像的处理，以及前台网页的布局都在此软件上实现。
（二）Sublime Text
Sublime Text它是一个网页编辑工具，重点是在前台方面，如：HTML、CSS、JQuery等。Sublime Text支持多个操作系统。是一个绝对功能强大的软件，里面有很多的插件，需要使用后期安装，包括代码检查，代码提示以及代码布局美化等。安装这些东西并不难，网上有很多这些的教程和步骤。本课题的所有前台页面的实现全部依赖于这个软件。
（三）visual studio 2013
VS主要是用来在后台功能编辑方面。大部分软件开发需要的工具都及一身。是目前较为完整的开发软件，包含了代码管控工具，集成开发环境等等一系列。因为VS的完整性比较高所以也是目前最流行的开发环境。本课题的后台软件使用的是Visual Studio 2013,13版本与之前的版本不同的是，增加了代码管理器，还有身份的识别等等。
(四) Microsoft SQL Server 2008
SQL是一个管理数据库的工具。叫做“数据库管理系统”。兼容性很强。方便使用，集成度高等很多优点。每一个动态的网站都离不开数据库。SQL Server是目前较为流行的数据库管理的工具，本课题使用的版本为2008版本，这个版本的可靠性比较高可以对数据库的日志文件和数据库文件都有很好的加密作用，操作也很方便。此课题大部分的内容都依赖于后台的新闻管理，所以数据库的联动和更改多本课题特别重要。
三、数据库设计
响应式设计“学院保卫处”网站主要是依赖SQL Server 2008数据库，下面是数据库的数据表内容介绍。
表3-1 学院保卫处数据库信息表
编号
表名
描述
1
buser
管理员信息表
2
detail_news
新闻详细表
3
news
新闻类型表
表3-2 bu
一、引言 1
（一）选题背景 1
（二）选题意义 1
（三）课题内容 1
（四）技术流程 1
二、开发工具介绍 1
（一）Adobe Photoshop CS6 1
（二）Sublime Text 1
（三）visual studio 2013 1
(四) Microsoft SQL Server 2008 2
三、数据库设计 2
四、网站模块分析 3
（一）前台模块分析 3
1.首页页面介绍 3
2. 新闻列表页面介绍 3
（二）后台模块分析 5
（三）响应式模块分析 5
1.PC端页面 5
2. IPAD端页面 7
3. 手机端页面 7
五、网站主体设计 - 10 -
（一）前台页面实现分析 - 10 -
1. 前台页面功能设计 - 10 -
2. 前台示页面布局 - 14 -
（二） 后台功能实现 - 15 -
1. 数据库连接。 - 15 -
2. 登录功能实现 - 16 -
3. 后台新闻的管理功能 - 19 -
总结 - 24 -
致谢 - 25 -
参考文献 - 26 -
一、引言
（一）选题背景
现在越来越多的人选择手机，平板这些终端设备，大大减小了电脑的使用量。越来越多的网站开始追求响应式。学校的网站并不是响应式网站，所以用手机或者平板浏览时并不方便。将学校的网站改成响应式。方便学生使用其他终端访问。同时也改善了学校网站界面和排版方面的一些缺陷。
（二）选题意义
响应式设计“学院保卫处”网站解决了，在手机浏览学校网站时需要不停放大的缺点。无论是手机，平板，PC端，甚至是手机横屏都可以浏览学校保卫处网站，适用于各种尺寸的终端。而且不用手动的去放大，同时还不
*好棒文|www.hbsrm.com +Q: ^3^5`1^9`1^6^0`7^2#
。学校的网站并不是响应式网站，所以用手机或者平板浏览时并不方便。将学校的网站改成响应式。方便学生使用其他终端访问。同时也改善了学校网站界面和排版方面的一些缺陷。
（二）选题意义
响应式设计“学院保卫处”网站解决了，在手机浏览学校网站时需要不停放大的缺点。无论是手机，平板，PC端，甚至是手机横屏都可以浏览学校保卫处网站，适用于各种尺寸的终端。而且不用手动的去放大，同时还不影响美观，本课题的主要目的是为了解决浏览网站时带来的不方便和而已上的一些缺陷。
（三）课题内容
本课题的主要内容分为两大部分。前台重点是响应式页面的实现以及对学校“保卫处”网站页面的重新布局和颜色的调整，前台的页面主要是用来浏览。学校“保卫处”网站，至于网站的后台重点是新闻的管理部分。后台的页面则侧重的是对新闻和通告的管理。通过管理员登录，然后对新闻的添加、删除、修改、查找。
（四）技术流程
使用Adobe Photoshop CS6 软件进行页面的布局和颜色的管理，使用Sublime Text软件编写，运用了Gulp 搭起一个框架在这个框架之上运用了Html+Css 以及JavaScript,JQuery等一些编译语言，以及响应式网页的技术实现了前台的网页页面。通过visual studio 2013和Windows平台通过Microsoft SQL Server 2008和.net组件对数据库进行增、删、改、查。通过EF到数据库到调用数据实现后台页面的流程。
二、开发工具介绍
（一）Adobe Photoshop CS6
Adobe Photoshop CS6是Adobo推出的最新的一款图像处理软件，是一个强大的图形图像处理软件，与之前版本的PS不同的之处是因为它增加了很多的功能，尤其在3D编辑方面。本课题的所有图形图像的处理，以及前台网页的布局都在此软件上实现。
（二）Sublime Text
Sublime Text它是一个网页编辑工具，重点是在前台方面，如：HTML、CSS、JQuery等。Sublime Text支持多个操作系统。是一个绝对功能强大的软件，里面有很多的插件，需要使用后期安装，包括代码检查，代码提示以及代码布局美化等。安装这些东西并不难，网上有很多这些的教程和步骤。本课题的所有前台页面的实现全部依赖于这个软件。
（三）visual studio 2013
VS主要是用来在后台功能编辑方面。大部分软件开发需要的工具都及一身。是目前较为完整的开发软件，包含了代码管控工具，集成开发环境等等一系列。因为VS的完整性比较高所以也是目前最流行的开发环境。本课题的后台软件使用的是Visual Studio 2013,13版本与之前的版本不同的是，增加了代码管理器，还有身份的识别等等。
(四) Microsoft SQL Server 2008
SQL是一个管理数据库的工具。叫做“数据库管理系统”。兼容性很强。方便使用，集成度高等很多优点。每一个动态的网站都离不开数据库。SQL Server是目前较为流行的数据库管理的工具，本课题使用的版本为2008版本，这个版本的可靠性比较高可以对数据库的日志文件和数据库文件都有很好的加密作用，操作也很方便。此课题大部分的内容都依赖于后台的新闻管理，所以数据库的联动和更改多本课题特别重要。
三、数据库设计
响应式设计“学院保卫处”网站主要是依赖SQL Server 2008数据库，下面是数据库的数据表内容介绍。
表3-1 学院保卫处数据库信息表
编号
表名
描述
1
buser
管理员信息表
2
detail_news
新闻详细表
3
news
新闻类型表
表3-2 bu
版权保护: 本文由 hbsrm.com编辑，转载请保留链接: www.hbsrm.com/jsj/jsjkxyjs/2547.html
