实验室综合门户网站

实验室综合门户网站设计

摘要

实验室综合门户网站是将实验室通过计算机网络连起来，采用科学的管理思想和先进的数据库技术，实现以实验室为核心的整体环境的全方位管理。它集资源管理，事务管理，网络管理，数据管理(发布、编辑、删除、查看、输出)，报表管理等诸多模块为一体，组成一套完整的实验室综合管理体系，既能满足外部的日常管理要求，又能保证实验室分析数据的严格管理和控制。

实验室综合门户网站管理系统主要实现以下功能：实验室介绍管理、实验室新闻管理、实验室设备特色、教学特色、实验队伍等。本系统提供了一个方便快捷的实验室管理平台，方便了指导老师和实验员的交流，提高了工作效率。

实验室综合门户网站管理系统基于bootstarp模式设计,以HTML为框架基础，在bootstarap提供的栅格系统下采用css语言进行编写，以sublime，HBuilder 为开发工具。

关键词：实验室，网站设计，bootstarp，submit，HBuilder

The Design And Implementation Of Laboratory Comprehensive

Portal Website

ABSTRACT

Laboratory comprehensive portal is connected through the laboratory of computer network, the use of scientific management ideas and advanced database technology, realize the comprehensive management of the overall environment in the laboratory as the core. It sets the resource management, transaction management, network management, data management (release, delete, view, edit, output) module, many statements of management as a whole, form a complete set of laboratory management system, which can meet the requirements of the daily management of the external, and can assure the strict management and control of laboratory data analysis.

This system is mainly to achieve the following functions: the management of laboratory, laboratory information management, laboratory project management, program management, membership management (including the members and administrators), log management (login and operation log), site settings, recommendation etc.. Provides a convenient platform for the laboratory management system, to facilitate the guidance of teachers and technicians of communication, improve work efficiency.

This system is based on bootstarp design pattern with HTML framework, by using PHP language in bootstarap environment, using ssublime，HBuilder as a development tool.

KEY WORDS:Laboratory ，Website design，bootstarp，submit，HBuilder

目录

前言 (1)

第1章相关技术 (3)

1.1 开发技术介绍 (3)

1.1.1 html技术 (3)

1.1.2 bootstart (4)

1.1.3 Apache服务器 (4)

1.1.4 css技术 (5)

1.2开发工具和运行环境 (5)

第2章功能需求分析 (7)

2.1 网站后台功能需求 (7)

2.1.1 实验室介绍 (7)

2.1.2 实验室新闻公告管理更新 (7)

2.1.3 实验室教学队伍更新管理 (7)

2.1.4 实验室设备更新管理 (7)

2.1.5 其它 (7)

2.2 网站前台功能需求 (8)

2.2.1 基本信息展示 (8)

2.2.2 中心介绍.................................... 错误！未定义书签。

2.2.3 教学特色介绍 (8)

2.2.4 实验队伍介绍 (8)

第3章框架设计 (8)

3.1 bootstart (8)

3.2 栅格系统介绍 (9)

3.2.1 从堆叠到水平排列 (9)

3.2.2 流式布局容器 (11)

3.2.3 移动设备和桌面屏幕 (11)

3.2.4 手机、平板、桌面 (11)

第4章详细设计 (14)

4.1 html功能设计与实现 (14)

4.1.1 整体设计 (14)

4.1.2 内容充实 (17)

4.2 css、javascript ...................................... 错误！未定义书签。

4.2.1 css网页美化 ............................... 错误！未定义书签。

4.2.2 让网页“动起来” .................... 错误！未定义书签。结论 . (34)

谢辞 (35)

参考文献 (36)

前言

随着社会的发展、信息技术的不断更新、计算机应用的迅猛发展、网络应用不断扩大，Internet已经得到了前所未有的高速发展，网站已经成为了一个单位或者组织宣传自己、了解别人、相互沟通的重要平台，人们迫切要求利用计算机网络技术来进行美工宣传，在线管理。除了可以大幅度提高知名度，人工效率和安全性之外，还可以有效的说明本单位组织的优势与特色。而且，基于html的管理系统还可以自动分配各种设备、信息等资源、同时存档，有效地避免资源的浪费，有利于环保，减少人员，减轻负担，提高效率。

Internet的迅速普及，正是依靠不计其数、丰富多彩的网站。网站是由网页按照一定的链接顺序组成。现在有越来越多的人希望在网络上拥有自己的个人主页或个人网站，来展示个人的个性和特点。同时也有越来越多的企业通过互联网上来展示自身形象，提供服务和产品资讯。以这种廉价的方式获取最大的宣传效果。

网络实验室的建设可以提高教师教学水平。当代社会电子产品淘汰非常快，包括计算机网络试验设备，但理论基础却长期不变。如果没有实验室，教师也只能一再重复教学理论，不了解最新设备特点。知识不能及时更新，教师成长速度慢。有利于提升学校科研能力。计算机网络的科学研究很多都是在理论创新的基础上进行试验验证，没有实验室就无法验证，理论创新就无说服力，科研能力就得不到提高。

由于现在社会对人才的需求越来越高，不但要求学生具备一定的知识，更要求学生具备一定的能力。需要把理论的教学转换为实际的动手能力，这是一个非常漫长的过程，只有在不断的试验重尝试、摸索、更正后才能具备敏锐的观察力和敏捷的判断能力。当在当前学生中普遍存在着实践弱的现象，究其原因并不是学校没有意识到实践的重要性，而是学校缺乏一整套完善的、标准的实验环境。建成网络实验室后这种状况将大为改观。知识转化成能力，从而满足社会的需求，促进学生的就业。

高校实验室的管理已经由过去单一的教学管理，发展成为集教学、科研、

开发等多功能为一体的综合体。实验室也成为规模大型化、结构综合化、系统复杂化、设备高档化的实验群体，由此带来的实验室管理工作也日趋复杂化。

网络实验室建设意义重大，构建网络实验室本身就是一项工程，所以必须严格遵循工程技术标准，周期长，投资大，需要考虑的因素多。所以各高职院校在建立实验室的时候一定要结合学院实际情况和当代市场行情综合考虑，反复讨论，仔细斟酌，最后拿出一个符合实际的、切实可行的方案来建立网络实验室。

第1章相关技术

1.1 开发技术介绍

1.1.1 html技术

HTML英语意思是Hypertext Marked Language，即超文本标记语言,是一种用来制作超文本文档的简单标记语言。HTML是由WEB的发明者Tim Berners-Lee和同事Daniel W.Connolly于1990年创立的一种标记式语言。它是标准通用化标记语言SGML的应用。

用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台（如UNIX，WINDOWS等）。通过HTML，将所需要表达的信息按某种规则写成HTML文件，通过专用的浏览器来识别，并将这些HTML 一种能够被广泛理解的语言，“翻译“成可以识别的信息，即所有的计算机都能够理解的一种用于出版的“母语”。就是我们现在所见到的网页。

自1990年以来HTML就一直被用作ＷＷＷ（是World Wide Web的缩写，也可简写WEB、中文叫做万维网)的信息表示语言，用于描述Homepage 的格式设计和它与WWW上其它Homepage 的连结信息。使用HTML语言描述的文件需要通过WWW浏览器显示出效果。

HTML( 超文件标记语言) 是一种建立网页文件的语言，透过标记式的指令(Tag)，将影像、声音、图片、文字、动画、影视等内容显示出来。因为它可以从一个文件跳转到另一个文件，与世界各地主机的文件连接。超文本传输协议规定了浏览器在运行HTML文档时所遵循的规则和进行的操作.HTTP协议的制定使浏览器在运行超文本时有了统一的规则和标准.

所谓超文本，是因为它可以加入图片、声音、动画、影视等内容，事实上每一个HTML文档都是一种静态的网页文件，这个文件里面包含了HTML指令代码，这些指令代码并不是一种程序语言，它只是一种排版网页中资料显示位置的标记结构语言，易学易懂，非常简单。HTML的普遍应用就是带来了超文本的技术----通过单击鼠标从一个主题跳转到另一个

主题，从一个页面跳转到另一个页面与世界各地主机的文件链接。直接获取相关的主题。

1.1.2 bootstart

Bootstrap，来自Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得Web 开发更加快捷。[1] 它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目。[2] 国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap源码进行性能优化而来Bootstrap是基于HTML5和CSS3开发的，它在jQuery的基础上进行了更为个性化和人性化的完善，形成一套自己独有的网站风格，并兼容大部分jQuery插件。

Bootstrap是基于HTML5和CSS3开发的，它在jQuery的基础上进行了更为个性化和人性化的完善，形成一套自己独有的网站风格，并兼容大部分jQuery插件。

1.1.3 Apache服务器

Apache是世界使用排名第一的Web服务器软件。它可以运行在几乎所有广泛使用的计算机平台上，由于其跨平台和安全性被广泛使用，是最流行的Web服务器端软件之一。它快速、可靠并且可通过简单的API扩充，将Perl/Python等解释器编译到服务器中。Apache HTTP服务器是一个模块化的服务器，源于NCSAhttpd服务器，经过多次修改，成为世界使用排名第一的Web服务器软件。它可以运行在几乎所有广泛使用的计算机平台上。

Apache源于NCSAhttpd服务器，经过多次修改，成为世界上最流行

的Web服务器软件之一。Apache取自“a patchy server”的读音，意思是充满补丁的服务器，因为它是自由软件，所以不断有人来为它开发新的功能、新的特性、修改原来的缺陷。Apache的特点是简单、速度快、性能稳定，并可做代理服务器来使用。本来它只用于小型或试验Internet网络，后来逐步扩充到各种Unix系统中，尤其对Linux的支持相当完美。Apache 有多种产品，可以支持SSL技术，支持多个虚拟主机。Apache是以进程为基础的结构，进程要比线程消耗更多的系统开支，不太适合于多处理器环境，因此，在一个Apache Web站点扩容时，通常是增加服务器或扩充群集节点而不是增加处理器。到目前为止Apache仍然是世界上用的最多的Web服务器，市场占有率达60%左右。世界上很多著名的网站如Amazon、Yahoo!、W3 Consortium、Financial Times等都是Apache的产物，它的成功之处主要在于它的源代码开放、有一支开放的开发队伍、支持跨平台的应用（可以运行在几乎所有的Unix、Windows、Linux系统平台上）以及它的可移植性等方面。

1.1.4 css技术

层叠样式表是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。

CSS目前最新版本为CSS3，是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。CSS能够根据不同使用者的理解能力，简化或者优化写法，针对各类人群，有较强的易读性。

1.2开发工具和运行环境

操作系统：Windows 7；

适配环境：各种浏览器；

开源框架：html；

开发工具：submit，HBuilder；

第2章功能需求分析

2.1 网站后台功能需求

2.1.1 实验室介绍

实验室介绍是对实验室的综合描述，用户可以通过该页面了解各实验室的基础情况以及实验室的最新通知新闻，实验室的设备环境，实验室的教学团队，实验室的教学特色。

2.1.2 实验室新闻公告管理更新

实验室新闻管理是对实验室新闻的集中处理，在该栏目下用户可以了解到实验室的大小事件，以及时间的处理方法。后台提供实验室新闻的添加、修改、删除、下架等功能。

2.1.3 实验室实验队伍管理更新

实验室队伍是实验室实验队伍管理更新，在该栏目下用户可以了解到实验室教学人员大小事件，教学特色，教学实例，学历背景等等。后台提供实验室队伍的退休、教学成果、取得荣耀、学历背景更新等功能。

2.1.4 实验室实验设备管理更新

设备与环境是实验室设备管理更新，在该栏目下用户可以了解到实验室实验设备使用情况，新设备的引进，磨损修复，旧设备的淘汰等等。

2.1.5 其它

除以上功能外还有网站的基本设置，官网链接，人员联系等功能，这些功能是对网站的进一步完善，同事也让网站的管理者跟容易的处理网站相关事务。

2.2 网站前台功能需求

2.2.1 基本信息展示

网站的前台信息展示是用户能直接看到的部分，此部分并不复杂，但是具有良好的交互性。信息展示主要包括信息的分类、信息列表以及详细信息。因项目与新闻有着本质的区别，故在设计时对二者采用了不一样的设计方案。用户可以对关注的新闻公告进行收藏、评论、分享等操作。

而且，此网页对整体实验室都有了一个整体的概括，形象的描述。较为宏观的介绍了整个实验的环境、教学特色、设备环境、实验队伍，让用户大体上了解整个实验室的实力与特色。

2.2.2 中心介绍

此网页主要有较为全面的公告通知、新闻动态、党政指示，需要的用户可以从此页面获取想要的信息

2.2.3 教学特色介绍

此网页主要有较为全面的了解到实验室教学人员大小事件，教学特色，教学实例，学历背景等等。

2.2. 设备环境介绍

此网页主要有较为全面的公告通知、新闻动态、党政指示，需要的用户可以从此页面获取想要的信息。

2.2. 设备环境介绍

此网页主要介绍了设备管理更新，在该栏目下用户可以了解到实验室实验设备使用情况，新设备的引进，磨损修复，旧设备的淘汰等等。

第3章概要设计

3.1 boorstart

Bootstrap 让前端开发更快速、简单。所有开发者都能快速上手、所有设备都可以适配、所有项目都适用。

一、预处理脚本

虽然可以直接使用Bootstrap 提供的CSS 样式表，不要忘记Bootstrap 的源码是基于最流行的CSS 预处理脚本- Less 和Sass 开发的。你可以采用预编译的CSS 文件快速开发，也可以从源码定制自己需要的样式。

二、一个框架、多种设备

你的网站和应用能在Bootstrap 的帮助下通过同一份代码快速、有效适配手机、平板、PC 设备，这一切都是CSS 媒体查询（Media Query）的功劳。

三、特性齐全

Bootstrap 提供了全面、美观的文档。你能在这里找到关于HTML 元素、HTML 和CSS 组件、jQuery 插件方面的所有详细文档。

3.2 功能模块设计

3.2.1 从堆叠到水平排列

使用单一的一组.col-md-* 栅格类，就可以创建一个基本的栅格系统，在手机和平板设备上一开始是堆叠在一起的（超小屏幕到小屏幕这一范围），在桌面（中等）屏幕设备上变为水平排列。所有“列（column）必须放在”.row 内。

根据功能分析大致流程图3-1所示。

图3-1 程序效果图本例部分代码：

3.2.2 流式布局容器

内容主要将最外面的布局元素.container 修改为.container-fluid，就可以将固定宽度的栅格布局转换为100% 宽度的布局。

本例主要代码示例没有意义，但在运用中有很大的作用。

3.2.3 移动设备和桌面屏幕

是否不希望在小屏幕设备上所有列都堆叠在一起？那就使用针对超小屏幕和中等屏幕设备所定义的类吧，即.col-xs-* 和.col-md-*。请看下面的实例，研究一下这些是如何工作的。

图3-2 程序效果图

本例代码如下所示：

desktop -->

3.2.4 手机、平板、桌面

在上面案例的基础上，通过使用针对平板设备的.col-sm-* 类，我们来创建更加动态和强大的布局吧。如图3-7所示。

图3-3 程序效果图

本例代码如下所示：

第4章详细设计

4.1 用户功能设计与实现

4.1.1 整体设计

主页设计是我自己做的，因为初次做网站，整体构架不太美观，但格局清晰，功能明确，基本完成了任务书的要求。

主页要求涵盖整个网站的大体内容，所以内容简略，结构明显，此网页基本完成了这个要求，效果图如下：

图4-1 程序效果图

图4-2 程序效果图

图4-3 程序效果图

其他辅助性的网页主要是补充扩大主页的内容要求，既补充了主页所

欠缺的内容，也更清晰地表达了网站每个项目的内容，各种效果图如下：

图4-4 程序效果图

图4-4 程序效果图

图4-5 程序效果图

图4-6 程序效果图