html5的个人网站设计(附件)
摘 要过去，没人敢梦想自己拥有报纸、杂志、电视台这样的传播媒体来表达自我，随着互联网在国内外的飞速发展，电脑网络已应用到各个领域，普及到千家万户。现在，网络已经成为人们快速获取信息、发布信息和传输信息的主要途径，成为每个人生活中的一部分，同时网络也提供了一个很好的交换信息的平台。你可以轻松建立属于自己的网站，与朋友共享信息，展示个人风采。本课题报告了国内外对个人网站的研究现状，介绍了eclipse、tomcat等一些主流web开发工具，进行了数据库的结构设计，进行了页面的布局、风格、内容设计，实现了网站常用的注册登录功能。
目 录
第一章 绪论 1
1.1研究背景及意义 1
1.2国内外研究现状 1
1.2.1HTML5 1
1.2.2现状 1
1.3研究内容 2
第二章 软件设计及开发工具介绍 2
2.1 总体设计 2
2.3 开发工具和关键技术介绍 2
2.3.1 MyEclipse和Tomcat介绍 2
2.3.2关键技术分析 3
第三章 系统功能设计 6
3.1 用户注册 6
3.2 用户登录 6
第四章 数据库结构设计 7
4.1数据库设计 7
4.2 数据库物理结构设计 7
第五章 模块开发及编码实现 8
5.1 服务器端的设计搭建java web服务器 8
5.2 连接数据库模块 8
5.3 服务器功能模块 8
5.3.1 登录模块 9
5.3.2 注册模块 9
5.4 前端设计用户访问界面 11
5.5 具体功能模块 12
5.5.1 主页 12
5.5.2 三列简介 12
5.5.3 可切换标签页 13
5.5.4 登录界面 13
5.5.5 注册界面 14
第六章 系统测试 15
6.1用户登录测试 15
6.2用户注册测试 16
结束语 17
*好棒文|www.hbsrm.com +Q: ^351916072*
/> 致 谢 18
参考文献 19
附录A 20
1.前端部分代码 20
（1）主页代码 20
（2）登录页面代码 28
（3）注册页面代码 32
2.服务器端部分代码 36
（1）登录功能代码 36
（2）注册功能代码 38
第一章 绪论
1.1研究背景及意义
我们正身处在互联网时代，享受着互联网给我们的生活带来的改变，互联网在短短的几年内已经渗透到社会生活的方方面面，产生了巨大的影响。所以网站建设在互联网中的地位不言而喻，不论是从事艺术、文学还是软、硬件开发，你都会有许多个个人作品，个人网站恰好提供了这样一个展示的平台，让我们在与他人的分享、交流中不断进步。对我个人来说，自己动手搭建一个网站，可以从中学到许多书本上学不到的知识。
基于上述背景，根据自己在大学所学的知识，构建一个个人网站平台。从建站的实际情况出发，经过对相关网站的一番了解和分析，确立了采用html5、css、js、jsp和mysql数据库技术，以MyEclipse作为开发环境，综合运用其他设计软件，最终实现个人网站的一些主要功能。本网站的导航栏有：主页、个人简介、图片和登录几个模块。其中，个人简介是自我介绍，有与我相关的信息。图片则是用来展示我们平时收集的一些照片。日志是展示一些优美的文章。允许用户注册登录。真正的做到“学以致用”，“把理论与实践相结合”。
1.2国内外研究现状
1.2.1HTML5
HTML5，第五版超文本标记语言，于2014年10月由万维网联盟发布为正式推荐标准。它是HTML自1991年问世以来，最具变革价值的技术规范，历经多年修订与完善才制定完成。过去，Web开发面临两种困境：（1）不少人质疑Flash的安全性等问题，却找不到替代它的合适插件；（2）工程师们抱怨PC端和移动端应用的多次开发，仍旧得为微软、苹果、安卓等系统设计不同方案。而HTML5提供了良好的解决方案。与JavaScript、CSS等紧密结合后，HTML5能使浏览器不需要类似Flash的插件也能实现桌面应用的交互效果，它的跨平台可用性更令应用的一次开发成为可能。从硬件角度来看，国内手机和平板两种移动设备应用最广，PC端次之，紧接着是电视和游戏设备。从软件角度来看，桌面浏览器对HTML5的支持高于移动浏览器，最高可达95%；而从整体上而言，移动浏览器对HTML5的支持却优于桌面浏览器。HTML5具有较好的浏览器向后兼容性，开发者能对浏览器不支持的情形设计各种各样的回退方案。因此，HTML5页面的实际显示性能与开发者、制作平台密切相关。
1.2.2现状
没有人不喜欢钱，很多站长建站的初衷就是为了赚钱。个人网站建站有很多赚钱的方式，推销产品然后获得提成，出售商品，出售广告位，出售链接等等。当然，个人网站想盈利也是需要技巧的，想让网站保持最大化的利润并不是简单的事情。
??另外，私人站长在运营方面,也以快速赚钱为主要目的,不计后果的在网站上添加各种类型的弹窗广告,从来不考虑网站的实际意义,考虑的都是怎么样使用户能够更多的点击网站上的广告。这样看起来挣钱是快了,可却不是长远之计,并且如今的搜索引擎网站人工智能化程度越来越高,这种遍布广告的网站想要赚钱,便会越来越难。
大多数私人站长在网站起步时可能还热情洋溢,天天更新、优化网站,可是长期以后,发现网站仍然一分钱赚不到,还要每天在网站上浪费时间和精力,最后都会不了了之,慢慢的就成为了游戏的心态,三天打鱼两天晒网。
1.3研究内容
本设计前端部分采用了HTML5、css、bootstrap和少量JavaScript，页面简洁，布局清晰，有良好的用户体验，后台采用Servlet实现用户注册登录的功能，
本系统的结构是B/S形式的，使用Servlet进行后台服务器的编写编写，同时还使用了Tomcat进行发布服务，通过JDBC来实现Mysql数据库的调用。
第二章 系统总体设计
基于HTML5的个人网站包括了前端和后端两个部分，结构如图21所示：
图21 系统总体结构图
2.1 前端部分设计思路
前端页面分为四个部分：导航栏、图片轮播、三列布局和可切换标签页。点击导航栏的相应栏目可以链接到相应的内容部分，分为页内链接和跳转的链接。图片轮播是五张按时播放的图片，用户也可以点击左侧或右侧的箭头来手动切换图片。三列布局是简单的信息展示，文字居中。可切换标签页包含图片和文字，通过点击使div隐藏或显示来实现切换的效果。
2.2 后端部分设计思路
目 录
第一章 绪论 1
1.1研究背景及意义 1
1.2国内外研究现状 1
1.2.1HTML5 1
1.2.2现状 1
1.3研究内容 2
第二章 软件设计及开发工具介绍 2
2.1 总体设计 2
2.3 开发工具和关键技术介绍 2
2.3.1 MyEclipse和Tomcat介绍 2
2.3.2关键技术分析 3
第三章 系统功能设计 6
3.1 用户注册 6
3.2 用户登录 6
第四章 数据库结构设计 7
4.1数据库设计 7
4.2 数据库物理结构设计 7
第五章 模块开发及编码实现 8
5.1 服务器端的设计搭建java web服务器 8
5.2 连接数据库模块 8
5.3 服务器功能模块 8
5.3.1 登录模块 9
5.3.2 注册模块 9
5.4 前端设计用户访问界面 11
5.5 具体功能模块 12
5.5.1 主页 12
5.5.2 三列简介 12
5.5.3 可切换标签页 13
5.5.4 登录界面 13
5.5.5 注册界面 14
第六章 系统测试 15
6.1用户登录测试 15
6.2用户注册测试 16
结束语 17
*好棒文|www.hbsrm.com +Q: ^351916072*
/> 致 谢 18
参考文献 19
附录A 20
1.前端部分代码 20
（1）主页代码 20
（2）登录页面代码 28
（3）注册页面代码 32
2.服务器端部分代码 36
（1）登录功能代码 36
（2）注册功能代码 38
第一章 绪论
1.1研究背景及意义
我们正身处在互联网时代，享受着互联网给我们的生活带来的改变，互联网在短短的几年内已经渗透到社会生活的方方面面，产生了巨大的影响。所以网站建设在互联网中的地位不言而喻，不论是从事艺术、文学还是软、硬件开发，你都会有许多个个人作品，个人网站恰好提供了这样一个展示的平台，让我们在与他人的分享、交流中不断进步。对我个人来说，自己动手搭建一个网站，可以从中学到许多书本上学不到的知识。
基于上述背景，根据自己在大学所学的知识，构建一个个人网站平台。从建站的实际情况出发，经过对相关网站的一番了解和分析，确立了采用html5、css、js、jsp和mysql数据库技术，以MyEclipse作为开发环境，综合运用其他设计软件，最终实现个人网站的一些主要功能。本网站的导航栏有：主页、个人简介、图片和登录几个模块。其中，个人简介是自我介绍，有与我相关的信息。图片则是用来展示我们平时收集的一些照片。日志是展示一些优美的文章。允许用户注册登录。真正的做到“学以致用”，“把理论与实践相结合”。
1.2国内外研究现状
1.2.1HTML5
HTML5，第五版超文本标记语言，于2014年10月由万维网联盟发布为正式推荐标准。它是HTML自1991年问世以来，最具变革价值的技术规范，历经多年修订与完善才制定完成。过去，Web开发面临两种困境：（1）不少人质疑Flash的安全性等问题，却找不到替代它的合适插件；（2）工程师们抱怨PC端和移动端应用的多次开发，仍旧得为微软、苹果、安卓等系统设计不同方案。而HTML5提供了良好的解决方案。与JavaScript、CSS等紧密结合后，HTML5能使浏览器不需要类似Flash的插件也能实现桌面应用的交互效果，它的跨平台可用性更令应用的一次开发成为可能。从硬件角度来看，国内手机和平板两种移动设备应用最广，PC端次之，紧接着是电视和游戏设备。从软件角度来看，桌面浏览器对HTML5的支持高于移动浏览器，最高可达95%；而从整体上而言，移动浏览器对HTML5的支持却优于桌面浏览器。HTML5具有较好的浏览器向后兼容性，开发者能对浏览器不支持的情形设计各种各样的回退方案。因此，HTML5页面的实际显示性能与开发者、制作平台密切相关。
1.2.2现状
没有人不喜欢钱，很多站长建站的初衷就是为了赚钱。个人网站建站有很多赚钱的方式，推销产品然后获得提成，出售商品，出售广告位，出售链接等等。当然，个人网站想盈利也是需要技巧的，想让网站保持最大化的利润并不是简单的事情。
??另外，私人站长在运营方面,也以快速赚钱为主要目的,不计后果的在网站上添加各种类型的弹窗广告,从来不考虑网站的实际意义,考虑的都是怎么样使用户能够更多的点击网站上的广告。这样看起来挣钱是快了,可却不是长远之计,并且如今的搜索引擎网站人工智能化程度越来越高,这种遍布广告的网站想要赚钱,便会越来越难。
大多数私人站长在网站起步时可能还热情洋溢,天天更新、优化网站,可是长期以后,发现网站仍然一分钱赚不到,还要每天在网站上浪费时间和精力,最后都会不了了之,慢慢的就成为了游戏的心态,三天打鱼两天晒网。
1.3研究内容
本设计前端部分采用了HTML5、css、bootstrap和少量JavaScript，页面简洁，布局清晰，有良好的用户体验，后台采用Servlet实现用户注册登录的功能，
本系统的结构是B/S形式的，使用Servlet进行后台服务器的编写编写，同时还使用了Tomcat进行发布服务，通过JDBC来实现Mysql数据库的调用。
第二章 系统总体设计
基于HTML5的个人网站包括了前端和后端两个部分，结构如图21所示：
图21 系统总体结构图
2.1 前端部分设计思路
前端页面分为四个部分：导航栏、图片轮播、三列布局和可切换标签页。点击导航栏的相应栏目可以链接到相应的内容部分，分为页内链接和跳转的链接。图片轮播是五张按时播放的图片，用户也可以点击左侧或右侧的箭头来手动切换图片。三列布局是简单的信息展示，文字居中。可切换标签页包含图片和文字，通过点击使div隐藏或显示来实现切换的效果。
2.2 后端部分设计思路
版权保护: 本文由 hbsrm.com编辑，转载请保留链接: www.hbsrm.com/dzxx/dzkxyjs/1585.html
