广东水利电力职业技术学院毕业设计书
广东水院校园生活指南网
姓名：陈嘉勉
学号： 130112101
所在系：计算机信息工程系
班级： 13计算机信息管理班
指导教师：何燕
2015年12月1日
目录
任务书.................................................................................................................................................................I
1需求说明 (1)
1.1背景 (1)
1.2系统目标 (1)
1.3用户特点 (1)
2设计说明 (2)
2.1网页结构 (2)
2.3首页布局设计 (4)
2.4馋嘴世界板块设计 (6)
2.5温暖蜗居板块设计 (8)
2.6水院通行板块设计 (9)
2.7学富五车块设计 (12)
2.8精彩社团板块设计 (14)
2.9惊喜重重板块设计 (16)
2.10导航栏板块设计 (18)
2.11主要或难点技术实现 (18)
3用户操作说明 (22)
3.1主页面板块用户操作 (22)
3.2馋嘴世界板块用户操作 (23)
3.3温暖蜗居板块用户操作 (24)
3.4水院通行板块用户操作 (26)
3.5学富五车板块用户操作 (28)
3.6精彩社团板块用户操作 (29)
3.7惊喜重重板块用户操作 (30)
任务书
指导教师：何燕职称：副教授
工作单位：本校联系电话：136********
一、题目
1、广东水院校园学富五车网
2、移动商务网站
二、需要实现的功能
围绕广东水利电力职业技术学院校园生活，设计移动web网页，对校园生活的吃、住、行、学习等方面进行介绍。要求：页面主题清晰、内容丰富、页面美观、操作简单。
三、设计报告内容
1.封面
2.目录
3.论文摘要、关键词
4.需求说明；
5.设计说明；
6.用户操作说明；
7.参考文献。
四、主要使用的工具与方法
HTML5/CSS3/JQuery Mobile
Photoshop/dreamwveaver/Notepad
五、参考文献
1、唐骏开著，HTML5移动Web开发指南，电子工业出版社，2012.
2、（美）Terry Felke-Morries著，HTML5与CSS3网页设计基础，清华大学出版社，2013.
3、本书编委会，HTML/CSS/JavaScript标准教程实例版，电子工业出版社，2012.
答辩记录
中文摘要
21世纪是信息高速发达的时代，互联网实现了世界范围的网络间的互联和信息共享，并已全面介入人类生产生活的方方面面，带动着人类社会的飞速发展，发挥着重要的作用。在信息发展的趋势下，使得人们对信息的获取越来越来便捷，本次开发的网站也是顺应这个趋势而为。本网站主要是为了方便想进入本学院或者已经进入学院的学生了解本学院的各项信息而建，本网站在依托官网所有的信息之上，添加了同学们最想要了解的信息，比如：吃、喝、玩、乐等。
通过对网页技术的研究，对HTML技术的调研，以及对CSS+DIV、Photoshop、jQuery、JavaScript等的了解，综合这几项技术，从而产生了整体的网页结构。在整体上运用了CSS技术，这有效地对网页的布局，字体，颜色，背景等做一些方便的改变。只要对相应的代码做一些简单的修改和操作，就可以改变整个工程中的不同部分，或者页数不同的网页的外观和格式。并具有良好的可扩展性和可移植性信息平台。
在制作与排版时，对主页做出了本学院的主色调以及简单介绍了本学院，其次在主页之下开设了六个板块来吸引同学们的眼球。其中包括：嘴馋世界、温暖蜗居、水院通行、学富五车、精彩社团、惊喜重重。
关键词：
移动Web网页设计、HTML5/CSS3/ JavaScript、jQuery Mobile组件、
广东水院校园学富五车网
1 需求说明
1.1 背景
在如今这个信息高速发展的时代，人们获取信息的步骤越来越简单，而我打造的这个网站也是恰好的跟上这个时代的步伐。现在我们不再局限的坐在电脑前获取最新的网络信息了，我们更多的是使用手上的便捷工具获取最新的消息，而本网站也就是基于移动端来开发的，本网站致力打造适合学生日常所需了解的本校资讯平台。本网站的诞生就是为了给我们学院的新生，老生以及想要了解我们学院的同学、家长更加清晰地了解我们学院的各项特色，也能更好地展示本校的魅力。本网站为用户提供了在水院的食住行的参考，除此之外用户还能了解到学院周边的景点信息以及休闲娱乐的信息，同时，本网站还为新生们详细介绍了学院社团的情况。
1.2 系统目标
制作这个网站的目的是为了方便我们学院的新生与老生能快速浏览我们学校的基本情况，了解我们学校所有好玩，有趣的事情。本网站主要面向的用户是学生群体，因此本网站在功能上也与时俱进地添加了学生想要知道的内容。
本网站主要包括六个板块，嘴馋世界、温暖蜗居、水院通行、学富五车、精彩社团、惊喜重重。这六个板块分别介绍学院以及学院周边的不同事物，涵盖了学生们的日常所需，内容设置新颖，基本满足每个用户的应用所需，这六个板块无论哪一个都能吸引用户的眼球。
1.3 用户特点
网站针对水院新生及希望了解水院生活情况的手机上网用户。用户只需会用手机上网即可。
2 设计说明
2.1 网页结构
图1 广东水院校园学富五车网网页结构图
以下是网站各个板块的内容
1.嘴馋世界：这个板块主要功能就是介绍我们学校的饭堂分布和菜式推荐。
2.温暖蜗居：这个板块主要功能就是介绍我们学校的住宿环境和宿舍位置。
3.水院通行：这个板块不仅提供了到校的路线参考，还提供了同学们出行旅游
的路线参考。
4.学富五车：此模块主要是分三个小模块来介绍学校的学习氛围，分别是：教
学设施、图书馆、教学建设做了一个详细的介绍。教学设施方面主要突出学校的教学楼；图书馆模块在开馆时间，进馆准则都做了详细说明；教学建设主要对各系课程做了介绍。
5.精彩社团：此模块分了三个小模块，分别是：社团组织、兴趣协会、以及
其他社团协会。社团组织重点放在了对学院学生会、广播站的重要社团组织进行了详细介绍；兴趣协会重点介绍了学校常获优秀协会的协会组织；其他社团协会简单列出了学校所有社团协会。
6.惊喜重重：此处不仅全面介绍了我们学院的校园风光景色，还为同学们介绍
了学院外的吃住行指南，全力打造出最符合同学们切身生活的指南。这个板块全面概括了学院周边以及从化的著名景点，为学院的同学们提供了一个方便快捷的阅览途径。
2.2系统运行环境
1）服务器系统：
操作系统：移动端的Android、iOS等手机操作系统以及PC端的Windows 操作系统和MAC操作系统
硬件平台：CPU：双核 2.0GHz以上。
2) 软件环境：
软件：各种支持Jquery-mobile、JavaScript等编程语言的移动端浏览器。
各种支持Jquery-mobile、JavaScript等编程语言的PC端浏览器。
2.3 首页布局设计
2.3.1.首页功能结构设计思路
在开发这个网站之前，我就换位思考地想，如果我是新手，我刚来到水院，我需要了解的是什么信息。然后加上我自己的技术程度，我就大概定下来我需要在首页里面添加什么内容。起初我只为此网站预先设计了四大方面的信息，后来考虑到新生只了解这四大方面的内容，也不足以去了解水院这么大的一个地方，所以后来添加了二大方面，也就一共六大板块，分别为嘴馋世界、温暖蜗居、水院通行、学富五车、精彩社团、惊喜重重。整体的结构设计如图2所示。
图 2 水院学富五车首页结构图
2.3.2.首页布局设计思路
确定了在首页需要添加什么板块主题后，我就考虑一下：我将要做的是一个
给大学生看的网站，而我的设计风格也是以简单线条为主的，我所以就在上面添加一点比较有青春活力的色彩线条元素，同时，我也把我们学院的主题色调作为主要色调；在主页上没有大量文字阅读，这样可以让我们的用户阅读起来不那么烦闷，也简化了主页的总体架构。
在主页的导航升级上，也是最让人费神的事。总体设计是以线条和色彩位置，这样使得我在导航条上的设计有了一个难度。后来经过长时间的比对尝试之后，总算让我找到了一种设计方案。把每个导航栏的周边线条以白色1像素勾勒出来，然后里面的背景颜色做了透明处理。最后我又做了个鼠标经过效果，让其在鼠标经过时有个显著效果的变化，这样让人看起来舒服。
在主页总要显示出学校的特征，这样，我仿效了我们学院官网的logo轮播特效，大体就这样，如图3所示。
图3 首页布局图
2.4 馋嘴世界板块设计
2.4.1.嘴馋世界板块功能的设计思路
嘴馋世界，仅在板块上对学院各饭堂的营业时间、菜式做了一个介绍，这样不会出现内容太多而导致画面凌乱的结果，可以提供新生了解水院饮食。
此板块的功能结构图如图4所示。
图4 馋嘴世界板块功能结构图
2.4.2.嘴馋世界板块布局思路
考虑到使用本网站的大部分用户是学生，他们在学院饮食方面比较关注。所以在嘴唇世界这个板块的设计我使用了较为简单易懂的结构来展示此板块的内容。
设计风格以简单为主，顶部放置位置指示栏，指示栏以下用文本和图片突出学院各饭堂的开放时间和饮食推荐。
然后在设计导航子模块的导航上就遇到了难题，由于个人技术能力问题，只能使用简单的跳转模式，也就是地点击跳转网页。
草图如下图5所示。
图5 嘴馋世界板块布局图
2.5 温暖蜗居板块设计
2.5.1.温暖蜗居板块功能的设计思路
这个板块着重点是介绍学院的宿舍环境，因此也就单单一个页面和图片文字就能表示出来了。
2.5.2.温暖蜗居板块布局思路
在设置这个板块时，先运用了表格来制作，但是发现效果离自己的预想相差很大，故此还是自己用div来设计好点。整体的设计风格并未出现大的变动，在存放介绍内容的区域上，我运用了div来控制整个框架体系，令其看起来更像一个大型的凸显玻璃，这样视觉效果有了，在里面内容的设计风格上，主要运用了线条来控制，这样不至于让整个页面过于繁乱。
草图如下图6所示。
图 6 机构设置板块布局图
2.6 水院通行板块设计
2.6.1.水院通行板块功能的设计思路
交通是人们的重要的信息之一，水院通行板块就是为了师生的出行设计的，
里面包含自驾车以及到校公交两种方式，其中到校公交有好几条线路工用户选择。提供水院通行模块的出发点是为了防止网络查询的不稳定，如果有人想要来到水院，当网络有多个重名的地方，访客就会犯迷糊，在这里，我们提供一个官方的路线方案，确保访客师生能准确到达。
经过结构规划，实现了两个展示区域，一个是自驾车一个是公交路线。结构图如下7所示：
图7 水院通行板块功能结构图
2.6.2.水院通行板块布局思路
水院通行板块的信息量相比其他板块少，只有自驾车和公交线路，因此这个板块就沿用主题模式，以简洁大方的方案设计
草图如下图8所示。
图8 水院通行板块布局图
2.7 学富五车块设计
2.7.1.学富五车板块功能的设计思路
学富五车模块便是重中之重，在这里凸显学院的学府之风，我展示了水院的教学设施，图书馆，教学建设三个类型的教学信息，信息量比较大，便用了菜单设计方案，让教学设施，图书馆，教学建设三个功能模块组成三个点击菜单，通过点击事件触发下一级功能展示界面，可以实现用户的浏览信息。
结构图如下9所示：
图9 学富五车板块功能结构图
2.7.2.学富五车板块布局思路
学校的主要宝地一个是自习室一个是图书馆，在这里，学生可以完成自己的学习需求，对自己想要学习或者需要温习的知识进行相应操作，教学设施的多少反应一个学校的大小，因此我把教学设施放到第一个菜单，也满足了游客的第一个浏览需求，既然看了教学设施，图书馆便是接下来的理所当然需要浏览的信息，我把他放到第二，教学建设呢相当于一个学院的业绩，把他放到最后作为压轴信
息展示，等用户看到这些信息后对水院的了解更加的直观立体。
草图如下图10所示。
图10 学富五车板块布局图
2.8 精彩社团板块设计
2.8.1.精彩社团板块功能的设计思路
对于每个大学生进入学校的第一步就是看看有哪些社团可以加入，跟随学哥学姐涨涨见识，增强自己的知识和技能水平，也能认识更多的朋友，在学海中与良师益友进行心连心的沟通与交流，针对社团数量比较多，不可能在首页中展示所有信息，所以依旧采用菜单的方式呈现，每个社团都有自己的一个菜单，点击进去就是相应社团的详细信息，对于小社团或者刚成立不久没有多少信息的社团则在首页的其他菜单中统一展示。
结构图如下11所示：
图11 精彩社团板块功能结构图
2.8.2.精彩社团板块布局思路
精彩社团的布局沿用学富五车的布局，这样能更有条理的展现大量信息，另外还增加了社团其他概览菜单，针对小众社团进行信息归类统一展示，既能展示主要社团信息又不丢弃小众社团，为社团的宣传推广做一些帮助。