基于Bootstrap的网页开发

J I A N G S U U N I V E R S I T Y 本科毕业论文

基于bootstrap的网页设计

Bootstrap-based web design

学院名称：计算机科学与通信工程学院

专业班级：软件（嵌入式）1102班

学生姓名：缪江超

指导教师姓名：马汉达

指导教师职称：高级工程师

2015年6月

基于bootstrap的网页设计

计算机科学与通信工程学院软件工程（嵌入式）缪江超

摘要：：当今社会，网络是人们生活中不可或缺的一部分，网页则是传递信息的重要媒介。随着时代的进步，网页设计也随着网络技术的发展而不断发展。计算机学院实验中心信息管理系统，是2004年开发的，因设计开发时间较早，其界面已不适应当前的技术发展，不能满足师生对于网站美观要求。

Bootstrap是当下最受人们欢迎的前端框架，是基于HTML、CSS、JAVASCRIPT 的，它简洁灵活的特性使得 Web 开发更加快捷，Bootstrap提供了优雅的HTML和CSS规范，它由动态CSS语言Less写成。本文针对实验中心网站得主要问题，介绍了网页设计的相关理论，使用Bootstrap框架，对实验中心网站进行了重新布局设计，使得网站界面更为美观，用户体验更好。

关键字：前端开发 Bootstrap 布局架构实验室网站

Bootstrap-based web design

Miao Jiangchao, Computer Science and Communication Engineering, Software

Engineering (embedded) Professional

Abstract: Nowadays, networks are an indispensable part of people's lives, the page is an important medium to transmit information. With the progress of the times,with the development of network technology,web design continue to develop. School of Computer Science Experiment Center Information Management System, developed in 2004, due to the design and development time earlier, the interface has not adapted to current technological developments, and can not meet the aesthetic requirements for teachers or students.

Now Bootstrap is the most popular front frame,which is based on HTML, CSS, JAVASCRIPT, which is a clean and flexible features that make Web development faster. Bootstrap offers elegantly HTML and CSS specification, which is written by the dynamic CSS language Less. In this paper, the main problem is the Experimental Center site, introduces the theory of web design, use Bootstrap framework, the experimental center site re-layout design, making the site more attractive interface, better user experience.

Key Words：Front-end development Bootstrap Layout Architecture Laboratory site

目录

第一章绪论 (1)

1.1 界面设计的背景与研究意义 (1)

1.2 实验室网站界面重新设计的需求 (2)

第二章相关技术与理论 (3)

2.1 HTML相关介绍 (3)

2.1.1 HTML简介 (3)

2.1.2 HTML5优缺点 (3)

2.1.3支持HTML5的相关浏览器 (3)

2.2 CSS3相关介绍 (4)

2.2.1 CSS3简介 (4)

2.2.2 CSS3影响 (4)

2.3 Bootstrap介绍 (4)

2.3.1 Bootstrap概览 (4)

2.3.2 Bootstrap的特点 (4)

2.3.4 Bootstrap的优缺点 (5)

2.3.5 Bootstrap使用的必要性 (6)

2.4 Web storm技术介绍 (6)

2.4.1 Web storm简介 (6)

2.4.2 Web storm特色功能 (6)

2.4.3 Web storm优缺性 (7)

第三章实验室网站布局设计 (8)

3.1 设计立意 (8)

3.2 设计原则 (8)

3.3 网站结构规划 (8)

3.4 布局的步骤 (10)

3.4.1 草图 (10)

3.4.2 粗略布局 (10)

3.4.3 将布局细化 (10)

3.5网页排版原则 (10)

3.6网站设计要素 (11)

3.6.1 网页标题 (11)

3.6.2 网页链接 (11)

3.7网站详细设计 (12)

3.7.1 网站基本结构布局图 (12)

3.7.2首页设计与制作 (14)

3.7.3实验室预约系统界面设计与制作 (15)

3.7.5后台界面布局设计与制作 (17)

3.8 编程与运行环境 (18)

第四章设计总结 (19)

参考文献： (21)

第一章绪论

互联网在21世纪末引入了中国，当时的网站主要依靠内容来吸引人们的关注。但是这也造成其在审美上给人以拥堵的感觉，没有多少美感可言。当网站拥有足够多的内容的时候，如何合理的编排这些内容已是迫在眉睫的问题。网页设计便是为解决这一问题而出现的。过去的网页设计为了突出内容，主要为静态网页。不管是从难度亦或是开发方式上来看，现在的网页制作都更接近传统的网站后台开发，故现在已不再叫网页制作，而是将其称为Web前端开发。Web前端开发在产品开发环节中的作用变得越来越重要，而且需要专业的前端设计师才能做好，这方面的专业人才近两年来倍受青睐。Web前端开发是一项很特殊的工作，不只是单一的美工，它涵盖的知识非常广，既有具体技术，又有抽象的理念。简单地说，它的主要功能是把网站的界面更好的更完美的呈现给用户。

设计网页并不仅仅是把相关的内容放到网页当中去，它还要求网页设计者能够把这些内容进行合理安排，给浏览者以赏心悦目的感觉，这样才能达到内容与形式的完美结合，从而增加网站的吸引力。因此，设计网页不仅仅是一项技术性的工作，更是一项艺术性的工作，这就要求设计者要具有较高的艺术修养和审美情趣，这样才能够设计出高水平的网页。网页的排版布局就是决定你的网站美观与否的一个重要方面，只有通过合理的、有创意的布局，你才可以把文字、图像等内容完美地展现在浏览者面前，而布局的好坏在很大程度上取决于设计者的艺术修养水平和创新能力。然而这并不是说网页布局根本毫无章法可循，完全是灵感之作，它也有自己内在的规律和要求，我们只要按照这些要求去做的同时再加上自己的奇特创意，一个吸引人的独特的网页布局还是会出现的。

1.1 界面设计的背景与研究意义

在漫长的软件行业发展中，界面设计工作一直没有被重视起来，因此做界面设计的人也被贬义的称为“美工”。其实网站的界面设计就好比是工业产品中的工业造型设计一样，是产品的一个重要卖点[1]。一个友好美观的界面会给人带来舒适的视

觉享受，拉近人与电脑的距离，为网站创造卖点。如果把网站当做一个人来看的话，网站的后台编程就好比是人的骨骼与肌肉，而界面就是这个人的外表。众所周知爱美是一个人的天性，同样有着良好的视觉感受的网站界面也是网站拉拢人气的关键所在。网站界面其实就是网站灵魂的外在表现，忽略网站的界面设计最终也会使你的网站输在起跑线上。界面设计不是单纯的美术绘画，它需要综合考虑使用者、使用环境、使用方式并且为最终用户而设计，是一项纯粹的科学性的艺术设计。检验一个界面的标准既不是某个项目开发组领导的意见也不是项目成员投票的结果，而是最终用户的感受。

软件界面作为人机交互的窗口，一定程度上决定着用户的体验和使用效能。界面设计不同于后台，尽管其难度上没有那么大，但是其细节要求就比较高，一些看似细微的操作就能给用户带来不同的体验。如何在保证工作效率的同时给用户带来完美的使用体验，也是这一课题于我而言的主要问题与挑战。

1.2 实验室网站界面重新设计的需求

实验中心的日常教学与管理都离不开实验中心信息管理系统，而一个信息系统的界面是否美观，用户体验是否友好则是系统成功的重要因素。面对众多的使用者，网站界面是人机互动的首要目标。界面设计与用户紧密相关，一个良好的布局界面能大大提升用户的操作体验，同时一个清晰美观的布局更是能够提高人与界面交流的效率。作为一个服务全校18个专业的实验室信息系统，优秀的网站界面是必不可少的。它应具有以下特点：（1）典型的人机互动：即设计与用户是紧密相关的。（2）手段的多样性：随着计算机的发展，信息多样化的应用将创造新的生活。（3）紧密的技术想关性：随着各项技术的发展，界面设计也将不断发展从而完善自身。

信息管理系统原来首页采用川字型布局，两边是几个小窗口，中间为主要内容。这个界面看上去便会给人以一种拥挤凌乱之感，并且所有颜色给人一种灰暗的感觉。随着现如今大屏幕的普及，唯有响应式布局才能为不同终端的用户提供更为舒适的布局。纵观上述内容，过去的界面布局已渐渐不满足当前网站用户对于美的需求，重构一个清晰美观的实验室网站布局是必不可少的。

第二章相关技术与理论

2.1 HTML相关介绍

2.1.1 HTML简介

超文本标记语言即HTML是为网页创建和其他可在浏览器中看到的信息设计的一种标记语言。其在1993年6月发布草案并不断发展完善至今，于2014年制定HTML5标准规范。它是万维网联盟历时8年才完成，是万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言即HTML的第五次重大修改。随着手机上网的普及，在移动设备上支持多媒体是必不可缺的，而HTML5正是为了支持这一点而被引进的。

2.1.2 HTML5优缺点

HTML5定义了新的标签；可以给站点带来更多的多媒体元素(视频和音频)；可以很好的替代FLASH和Silverlight、当涉及到网站的抓取和索引的时候，对于SEO 很友好；将被大量应用于移动应用程序和游戏；可移植性好。该标准并未能很好的被浏览器所支持。因新标签的引入，各浏览器之间将缺少一种统一的数据描述格式，造成用户体验不佳[2]。

2.1.3支持HTML5的相关浏览器

尽管HTML5仍在不断完善改进之中，然而当今大部分的现代浏览器已经能够部分支持HTML5。支持HTML5的浏览器包括Firefox（火狐浏览器），IE9及其更高版本，Chrome（谷歌浏览器），Safari，Opera等；国内的遨游浏览器（Maxthon），以及基于IE或Chromium（Chrome的工程版或称实验版）所推出的360浏览器、搜狗浏览器、QQ浏览器、猎豹浏览器等国产浏览器同样具备支持HTML5的能力。

2.2 CSS3相关介绍

2.2.1 CSS3简介

CSS即层叠样式表（Cascading StyleSheet）。在网页制作时采用层叠样式表技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。CSS3是CSS技术的升级版本，CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂，所以，把它分解为一些小的模块，更多新的模块也被加入进来。这些模块包括：盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等[3]。

2.2.2 CSS3影响

CSS3将完全向后兼容，所以没有必要修改设计来让它继续运作。网络浏览器也还将继续支持CSS2，CSS3主要的影响是可以使用新的可用的选择器和属性，这些特性将会实现新的设计效果（譬如动态和渐变），而且可以更简单的设计出现在已实现的设计效果（比如使用分栏）。

2.3 Bootstrap介绍

2.3.1 Bootstrap概览

Bootstrap是一套前端开源的框架，有别于其他框架之处在于它是基于LESS的。Bootstrap提供了优雅的HTML和CSS规范，它采用常用的960瀑布式的布局方式布局，它简洁灵活，使得 Web 开发更加快捷；它还包含丰富的组件以及一组jQuery 交互插件，这使得其修改十分便捷。Bootstrap将改变我们的合作体式格式与开发过程[4]。

2.3.2 Bootstrap的特点

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

插件。

（2）Bootstrap是一套前端开源的框架。它可以帮助我们加快项目开发的步伐，让我们身处在一个完全的体系中，拥有一套完整一致的设计方案和实现的办法。不须要在外观上花费过多时间和精力，使用bootstrap能将精力集中于更首要的功能上，Bootstrap将改变我们的布局样式与开发过程。

（3）Bootstrap在原有特点是侧重改进了用户的体验和交互性，比如新增加的媒体显现功能，实用于智能手机上多种屏幕规格的响应式布局，同时新增了12款jQuery插件，可以满足Web页面常用的用户体验和交互功能。另外它还具有开源、简洁灵活等特点。

2.3.4 Bootstrap的优缺点

如今的Bootstrap已包含了几十个组件，具有完全的实例文档，定义了真正的组件和模板。无论处在何种技巧程度的开发者，也无论处在哪个工作流程中，都可以应用Bootstrap快速、便利地构建开发自己喜欢的应用。它有以下几个优点：1．规范的命名规则；代码编写规范；

2．应用视觉效果一致性，通过使用bootstrap，你可以让页面上的链接、按钮、提醒都有统一的视觉效果，同时你还可以为不同重要性级别的设置不同的颜色。

3．通过多个浏览器测试，对于市面上主流的浏览器支持都没问题。

4．完整的框架解决方案，这是一个框架，你只需使用它而无需重新制作，这个框架专为Web应用设计，所有的元素都可以非常完美的在一起工作，可快速开发。

5．Bootstrap让我们的应用看起来跟Windows或Gnome下的程序一样，都是一样的按钮，一样的对话框并且运行快速。而且越来越多的Web应用被直接放在桌面上运行，应用的一致性是一个趋势，我们可以把更多的精力放在业务上，而不是UI。

但凡事有利就有弊，Bootstrap也是一样。对于在国内的开发者和UI设计者来说，目前最烦恼的便是IE浏览器的兼容问题。现在Bootstrap对IE6到IE8的支持都不是很好。对IE-8以下（包含IE-8）的兼容性不好的重要原因是Bootstrap采用了HTML5的新的属性，另一个毛病是，采取Bootstrap的模板，网站布局时常会显得痴肥。此外，覆盖一些样式时会造成代码冗余。但与其他前它端框架比拟，感觉Bootstrap的毛病相较于其优势来说还不足为患。

2.3.5 Bootstrap使用的必要性

1.Bootstrap其在速度和项目的进度上有独特的优势。

2．一致性。使用Bootstrap可以让我的整个Web应用的风格完全一致，一致的用户体验，一致的操作习惯。

3．简单而优雅。尽管还有很多不喜欢Bootstrap的人非常抗议这一点。

4.Bootstrap将改变我们的布局体式格式与开发过程，任何人都可以基于Bootstrap建立可扩大的前端对象包，和自己的静态网站项目。

2.4 Web storm技术介绍

2.4.1 Web storm简介

Web Storm是jetbrains公司旗下一款JavaScript开发工具，它被广大中国JS 开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。它与IntelliJIDEA同源并继承了IntelliJIDEA强大的JS部分的功能[5]。

2.4.2 Web storm特色功能

智能的代码补全：支持不同浏览器的提示，还包括所有用户自定义的函数(项目中)，代码补全包含了所有流行的库，比如：JQuery, YUI, Dojo, Prototype, Mootools and Bindows。

代码格式化：代码不仅可以格式化，而且所有规则都可以自己来定全删除等等。

代码检查和快速修复：可以快速找到代码中的错误或者需要优化义。

html提示：大家经常在js代码中编写html代码，一般来说十分痛苦，不过有了智能提示，就爽多了。而且html里面还能有js提示。

联想查询：只需要按着Ctrl键点击函数或者变量等，就能直接跳转到定义；可以全项目查找函数或者变量，还可以查找使用并高亮。

代码重构：这个操作有些像Resharper，熟悉Resharper的用户应该上手很快，支持的有重命名、提取变量/函数、内联变量/函数、移动/复制、安的地方，并给出修改意见，快速修复。

代码调试：支持代码调试，界面和IDEA相似，非常方便。

代码结构浏览：可以快速浏览和定位。

代码折叠：功能虽小，不过胜在方便高效

2.4.3 Web storm优缺性

尽管合适的工具会使我们事半功倍，但我们还是得把握分寸，要不就成了会得越多干的越多的“苦力者”。编辑类软件层出不群，各有所长，各有所短。Web storm 与其它的编辑器有什么不同呢？

1.任何一个编辑器都需要保存(ctrl+s)，这是所有win平台上编辑类软件的特点，但是web storm编辑文件右上角是没有那个熟悉的米号的。换句话说，所有的操作都直接存储，这样带来的坏处就是，没有以前的米号标识，万一键盘误操作也会被立即存储。但省去ctrl+s之后，在结合Firefox的vim，基本不动鼠标就可以看到结果页面了。

2.任何一个编辑器只要文件关闭了就没有历史记录了，但是web storm有，也就是说，只要web storm不关闭，你的文件随时可以返回到之前的操作，web storm 关闭重启后这些历史记录就没有了。这样的坏处也是显然的，由此带来的内存消耗也必然比较大。

3.任何一个编辑器，除了服务器svn之外，没有本地版本，但是web storm提供一个本地文件修改历史记录。

4.独特的与时俱进的眼光。zencoding于2009年出现于it界，在这之后，鲜有工具直接集成到里边。Web storm 2.0之后就集成了。

5.提供的插件也是比较齐全，安装非常方便。然而，web storm只能安装官方插件，不能安装第三方插件。

6.可以导出当前设置：File -> Export setting。

第三章实验室网站布局设计

3.1 设计立意

现代网页设计中其设计思想的主流是使该网页的实用功能充分体现，去除花哨无用的点缀。本次界面设计对象为实验中心信息管理系统，该网站是计算机学院实验室中心综合信息管理系统，为广大师生提供日常的实验教学和实验室管理工作。一个系统的界面设计首先考虑用户群体，要考虑这些用户的信息素养，才能使设计的系统有更好的用户体验。该网站主要用户教师、学生，我们必须充分考虑这部分特定用户的特点，为其量身定做满意度高的网页界面。首先界面必须易使用，易理解，毕竟没有谁会喜欢操作一个繁琐复杂的界面。为此这次布局的重构既要能够鲜明准确的展现其主题，又要确保网页各元素存在的必要性以避免冗余从而提高效率，要以适合主题为条件的同时追求网页的形式美，才能使我们的网页设计简单、立体又智能。作为学院实验室信息管理系统，为了众多师生用户考虑，其对效率的要求必然也不能过低。为此我们要尽量减少用户操作界面的时间从而提高使用效率。3.2 设计原则

互联网与传统媒体最大的不同就在于除了文字和图像以外，还包含声音、视频和动画等新兴多媒体元素，增加了网页界面生动性的同时也使得网页设计者需要考虑更多页面元素合理性运用。针对学院实验室网站，这次界面设计主要考虑文字与图形两大要素。文字作为信息传递的主体，有着其它元素无法取代的作用。网页中的文字主要包括标题，信息，链接等形式。文字的大小，颜色，排布等对页面设计影响颇大。我们需要排布得当，既显清晰又不给人单调的感觉。图形在网页中同样占有重要位置，其形式主要有标题，背景，主图，链接图标等。图形相比文字往往能更加容易引起人们注意，可以生动直观形象的表达设计主题。合理搭配各种图形可以增强文字活力，给人以更好的视觉冲击。

3.3 网站结构规划

计算机学院实验室网站的具体结构设计主要分为以下7个模块，总体结构图如

图3.1所示。

图3.1 网站结构图

(1)网站首页体现的是实验室网站的门面，也显示了学院实验室的相关信息，是网站设计中较为重要的部分，是整个网站的导航，要能够让用户第一时间感受网站特色所在。

(2)规章制度主要介绍实验室管理人员以及实验室使用的各项规定等，主要是文字信息的表达，要注意界面清晰有条理即可。

(3)实验教学模块介绍的是实验室的指导老师队伍以及取得的各项成就等等，其内容形式上与规章制度快相近，要求也相似。

(4)实验预约模块是实验室网站针对使用者们能够合理方便的使用实验室而配置的一项重要功能模块。功能模块不需要华丽的展示，只需要稳定方便的功能实现。该模块仍需保持清晰准确的特色。

(5)仪器设备是实验室各项设备的介绍，充分展示计算机学院实验室的规模以及先进性。同时该模块还有仪器的操作介绍，是使用实验室前必须了解的项目。

(6)社区论坛是实验室管理与用户交互的平台，使用者有任何建议或意见都可以在平台中一一提出，而管理者也可以给出相应的答复，在双方不断的互动中不断推

进实验室向前发展。

(7)后台入口，顾名思义是该网站的管理模块。系统的重要操作修改管理都可以在这实现。同时重要的通知也可以在后台中添加修改。总之后台界面还是离不开简洁易操作的特点。

3.4 布局的步骤

3.4.1 草图

这时我们面对的是一张白纸，要做的就是简单的用画笔在纸上将创意的大致轮廓画在纸上，以便给以后的设计做大致的指导。根据网站的内容整体风格，设计版面布局。我们可以参考其他优秀的网站，调用自己的各种知识储备，特别是艺术方面的，在大脑中不断地酝酿、碰撞，往往在不经意间就有闪光的思想出现。这时你就要抓紧时间把它变成文字的东西，用笔在纸上粗略地勾画出布局的轮廓，不要讲究细节，只要有一个轮廓就行。当然你也可能有多种想法，尽量都把它们画出来，然后再比较，采用一种比较满意的方案。

3.4.2 粗略布局

将纸上的轮廓在电脑上体现出来，对画面进行分割，也可以用色块进行填充，确定好在什么地方布置什么栏目，他们的大小等。这一步就要把一些主要的内容放到网页中，例如网站的标志、广告条、菜单、导航条、计数器等，要注意重点突出，把网站标志、广告条、菜单放在最突出、最醒目的位置，然后再考虑其它元素的放置。

3.4.3 将布局细化

在将各主要元素确定好之后，下面就可以考虑文字、图像、表格等页面元素的排版布局了。在这一步，你可以利用网页编辑工具把草案做成一个简略的网页，当然对每一种元素所占的比例也要有一个详细的数字，以便以后修改。

3.5网页排版原则

在构思和设计的过程中，我们还必须要掌握以下几项原则：

（1）平衡性：一个好的网页布局应该给人一种安定、平稳的感觉，它不仅表现

在文字、图像等要素的空间占用上分布均匀，而且还有色彩的平衡，要给人一种协调的感觉。

（2）对称性：对称是一种美，我们生活中有许多事物都是对称的。但过度的对称就会给人一种呆板、死气沉沉的感觉，因此要适当地打破对称，制造一点变化。

（3）对比性：让不同的形态、色彩等元素相互对比，来形成鲜明的视觉效果。例如黑白对比，圆形与方形对比等，它们往往能够创造出富有变化的效果。

（4）疏密度：网页要做到疏密有度，即平常所说的“密不透风，疏可跑马”。不要整个网页一种样式，要适当进行留白，运用空格，改变行间距、字间距等制造一些变化的效果。

（5）比例：比例适当，这在布局当中非常重要，虽然不一定都要做到黄金分割，但比例一定要协调[6]。

3.6网站设计要素

3.6.1 网页标题

网页标题是网站的指航标，浏览者要在网页间跳转，要了解网站的结构，网站的内容，都必须通过导航或者页面中的一些小标题。所以我们可以使用稍微具有跳跃性的色彩，吸引浏览者的视线，让他们感觉网站清晰、明了，层次分明。想往哪里走都不会迷失方向。我们的网站是学院实验室网站，要符合上述要求我们将以计算机科学与通信工程实验中心为标题。

3.6.2 网页链接

一个网站必然是由许多页面组成的，实现网页间相互跳转的就是网页的链接，所以文字与图片的链接是网站中不可缺少的一部分[7]。这里特别指出文字的链接，因为链接区别于文字，所以链接的颜色不能跟文字的颜色一样。大多数浏览者不会愿意花太多的时间用在寻找网站的链接上，为此我们设置了独特的链接颜色，让人感觉到它的独特性，自然而然的好奇心必然趋使着他移动鼠标，点击链接。

3.6.3 网页文字

文字是讯息传达的主要载体，一般说来网站侧重的是文字，所以背景可以选择纯度或者明度较低的色彩，文字用较为突出的亮色让人一目了然。字体的颜色、大小、种类、排列等都是网页设计中需要考虑的内容，合理的运用方能出色出彩。

3.6.4 网页图像

虽然文字是表达的主题，但图像也是网页中不可或缺的部分。众所周知图像是比文字更易于理解的，而且比文字更容易调动浏览者的情绪也更易于让人记住。无论是信息图还是背景图，好的图像会使网页更生动形象。

3.6.4 网页的留白

自古以来中国的书法就讲究留白，好的留白的运用可以带给浏览者对当前画面产生想象空间，更为重要的一点就是，在网站使用中浏览者通常会划动鼠标来快速浏览页面，如果没有留白，浏览者很可能会误点链接，给浏览带来不便影响客户体验。

3.7网站详细设计

3.7.1 网站基本结构布局图

（1）网站主页结构布局如图3.2所示：

图3.2网站首页布局图

（2）网站相关子页布局图如图3.3所示：

图3.3子页布局图

网站除去预约系统与后台模块与该布局不同，其余的相关页面均与之相似，便不再一一介绍。

（3）网站预约系统页面布局如图3.4所示：

图3.4预约系统布局图

(4)网站后台界面布局如图3.5所示：

图3.5后台界面布局图

3.7.2首页设计与制作

网站首页是一个网站的门面，显示实验室的相关信息，是此次网站设计中较为

重要的部分。首页以网站综合平台的方式展示了整个实验室网站的主要内容，是整个网站的导航，也是整个网站能让浏览者第一时间感受学院实验室特色的所在。实验室简介可以让阅览者初步了解实验室，展示实验室的基本信息。通知栏则是实验室重要的实时消息的公告平台，让人第一时间知道实验室使用的重要讯息。实验室风采栏则是我院实验室实景写照，真实展现学生上机情境。

首页包括logo、导航栏、3个图文信息栏等组件。网站logo是网站标识，由于计算机学院实验室属于江苏大学的一部分，所以我们采用江苏大学的校徽作为网站统一标志。

首页背景方面作为一个学院网站还是突出其简洁、明了的特点，所以统一采用了白色背景。导航栏也采用与背景统一的颜色，同时配上清新的绿色增加一些活力，体现青春气息。具体如图3.7所示：

图3.7导航栏

至于首页的图文信息栏只需清晰展示其供给阅览者查看内容即可，如图3.8：

图3.8图文信息栏

3.7.3实验室预约系统界面设计与制作

实验室预约系统是实验室网站需要实现的一项重要功能。通过预约系统，使用者可以清楚的查询实验室使用情况，在依据现状合理安排自己想要使用实验室的合理日期与时间。准确实现上述功能首先需要各个实验室的查询名单，为此我们可以