web网页设计课程设计-个人博客.doc

web网页设计课程设计-个人博客

———————————————————————————————— 作者：
———————————————————————————————— 日期：

2

个人收集整理 勿做商业用途

《电子商务设计》课程设计报告

题 目 个人博客网页设计系统
学生姓名 易帅龙
学 号 201017020107
专业班级 信管10101
指导老师 易明
设计日期 2013年6月

指导老师评阅意见:

评阅成绩：
签名：
目录
摘要··························································3
系统概述······················································4

第一章 项目需求分析····················································5
1.1 需求分析····························································5
1.2 所用软件·····························································5

第二章 首页设计·························································5
2。1 网站主题·····························································5
2。2 静态网页制作工具·····················································5
2。3 系统总框图···························································6
2。4 设计网站·····························································6

第三章 静态分页模块设计·················································7
3。1 各个静态子网页的设计·················································7
3。2 实现网页间的连接·····················································10

第四章 动态分页模块设计·················································11
4。1 留言板设计···························································11
4.2 数据层设计···························································13

总结····································································15
附录：参考文献··························································16

摘要
网络发展到今天，建立网站已经成为一个很普遍的问题了，对于一个企业来说,建设好自己的网站可以抢占新世纪发展的战略要点。建立新的企业形象，直接开拓国际市场，开展24小时网上营销及高效廉价的定向宣传；与客户建立最直接的交流机制，缩短推出新产品和打开新市场的周期，与富有吸引力的客户群发展客户关系网；与自己的销售人员保持联系，进一步面向本地市场。
出色的网站吸引人的地方不仅仅在于其内容，鲜明的结构和独特的风格往往能起到画龙点睛的作用。一个网站即使内容再丰富,如果网站的结构和风格不能吸引人，那也是毫无价值的。往往整个网站的风格是一个网站吸引浏览者的魅力所在，因此应当根据网站的主题、内容和浏览者的要求来设计自己独特的网站风格。

概述
这个网站是一个用Dreamweaver、Photoshop、ASP.NET、Microsoft access设计编写的个人博客网站，主要包括6个模块:网站首页,个人信息，个人简历,个人兴趣，个人照片，留言板.
首先前5个模块是主要功能是用来展示自己,类似于个人简历网页，所以采用了静态HTML语言编写,添加了相应的CSS样式表文件和JS脚本文件用来美化网页并添加YUI中的实用功能,用来介绍自己，便于发布之后被搜索引擎收录。
最后一个留言板模块使用了ASP。NET技术编写，可以让用户注册之后登陆并留言给网站站长，并带有后台管理功能,可以删除和回复游客的留言。

第一章 项目需求分析

1。1需求分析
随着就业竞争越来越大，很多人开始在简历上奇招频出，纸质文件的个人介绍已经不能满足电子商务迅速发展的现代社会了，于是个人介绍的个人网站应声而出,可以满足用户在网上介绍自己,展示个人特长和才华，增加被用人单位录用的机会。
1.2 所用软件
网页编辑排版Macromedia Dreamweaver 8、网页图像制作软件PhotoShop CS5、数据库 Microsoft ACCESS、动态网页编程语言ASP、静态网页编写语言HTML、样式表CSS、网页脚本语言JavaScript.

第二章 首页设计
2.1 网站主题
个人介绍网站的主旨就是介绍自己，所以主要的主题就是静态的介绍，采用灵活的CSS样式技术对个人网站进行美化，吸引访问者注意，提高访问量。
根据我的性格和喜好，网站主要基调色是蓝色，并加入了大量的动漫人物图片，展示自己的特点和兴趣.
2.2 静态网页的制作工具
做HTML网页时主要使用的是Deamweaver。另外，为了处理网页中的其他元素，还使用了Photoshop、VS2005等软件。

2。3 系统总框图
首页

留言板
个人照片
个人兴趣
个人简介
个人信息

后台管理
前端页面

2。4 设计网站
首部的LOGO，这个区域揭示了整个网站的主旨，所以这一部分的图片和内容必须设计得很精。然后是左下区域的座右铭,座右铭体现了个人的性格和修养以及价值观,这一部分布局必须清晰明了。最后是右下部分的其他,为了使网页看起来简洁明了，我在这一部分添加了一个单独的图片作为一个DIV。

下面是我制作完成的首页，整个页面的主色调是黄色，LOGO部分是我喜欢的动漫图片,左下是座右铭区域，其中包含了我的联系方式，右下也是一张动漫图片，为了适应游客不同时段的访问以及不同人的不同喜好,我还另外使用JS技术做了一套夜间模式的换肤。

默认风格

夜间模式

第三章 静态分页模块设计
3.1各个静态子网页的建立
在设计并制作好了网站的首页之后，接下来就是设计各个模块的内容，根据我自己的兴趣和理解，于是每个模块都设计了自己的CSS文件，以显示个人网站的特点和个人的的特色。

3.1.1 个人信息

这个部分我使用了方方正正的蓝色方块状作为中央背景，主体背景是主色调黄色,显得整个页面比较简洁明朗。上面包含了一些个人信息.其中我在左上角区域使用JS代码添加了一个可以显示当前时间的控件。
并借鉴了禅意花园203号作品的CSS风格给个人信息部分做了布局，这套CSS风格比较符合个人信息应该具备的简单明了、内容清晰的风格.

3.1.2个人简历

这个页面依旧使用了黄色的主色调,顶部是蓝色,与个人信息想呼应。主题是大海，个人简历就像鱼儿在海中的经历一样，这也和个人简历的风格想呼应。
左上角我添加了一个时钟空间，并添加了一个可以游动的鱼，点击之后可以快速返回主页,这条小鱼是使用JS代码和GIF动图完成的，和整个大海的风格比较融合.另外我在网页底部添加了固定的BOTTOM页脚，主要内容也是跟海有关，为的也是和主题融合。

3.1。3兴趣爱好

这个子网页采用的是YUI中的Paginator：Getting started with Paginator JS控件，可以在网页中插入文字图片，并有翻页效果.
每个人的兴趣爱好可以有很多，如果采用流式布局则会显得很冗杂，于是我采用了这个JS控件,让游客可以对每一个感兴趣的栏目进行浏览，不会产生疲劳。另外我将图片大小调节同意大小，并添加在每个框架中，这样可以使整个网页布局不会产生太大波动。

3。1.4个人照片

这个网页依然采用的是黄色基调色，采用了YUI中的Carousel Control:Spotlight example JS控件.这个JS控件我将它设置了三个外循环变量三个内循环变量,一共可以将9张照片分成3个大块显示，每一块3张照片,比较符合现在照片墙的风格。
另外我还采用了一个背部落雪花的GIF动态效果的JS控件,并添加了一个比较轻快的背景音乐，让人在浏览照片的时候感到轻松.
3.2实现网页间的链接
做好各个子网和首页后，接下来就是通过链接，将整个网站中的网页链接起来，使各个分页和主页、分页和分页间可以流畅的切换，从而减少人们浏览网页的时间。
我采用的是添加A标签，使用A标签切换页面浏览，并将每个链接设置成一个DIV，使总体效果看起来比较清晰。

分页链接

返回主页

第四章 动态分页模块设计
考虑到游客与站长的互动性，我还设计了一个留言板的模块。这个模块是使用asp.NET动态网页技术实现的，主要的逻辑拓扑图如下所示：
4。1 留言板的设计
登陆页面的设计，我对用户名和密码进行了加密,只有拥有用户权限的游客才能进入留言，如果没有账号的话，必须先申请一个账号才能进入留言板，在留言板中可以填写自己的昵称和要留言的内容,一旦留言之后就不能再进行更改。
留言板还具有一个后台管理功能,可以让站长进入留言板的后台对留言进行回复和删除，并且可以修改后台管理员的用户名和秘密，一般来说这个账号是站长独有的，不应泄露给他人。
4.1.1登陆页面
登陆页面的设计依然采用了黄色主色调，这部分只有两个INPUT框和一个提交按钮,非常简单明了，功能也很清晰.

登陆页面

4。1.2留言板
前台部分留言的框架部分我采用了浅绿色的类似于IPAD的边框，游客留言时就像在使用IPAD一样，游客可以输入自己的昵称和留言内容，当站长上线之后可以进入后台回复，实现了站长和游客的互动功能.

如果要进入后台部分，则要输入后台管理密码，这个密码是保存在ACCESS数据库中的,只有站长才知道这个密码.

后台部分整体页面效果跟前台部分是差不多的，但是后台部分在每个留言后面添加了两个控件，当拥有管理权限的人（管理员-站长)进入后台之后才可以执行者两个操作.

4.2 数据层设计
4.2。1 游客账户数据库

E-R图

数据库表

数据字典：
User：每个游客一个user，主键
Pwd：每个游客一个pwd（密码），非空

4。2。2 管理员账户数据库

E-R图

数据库表
数据字典:
Id：每个管理员一个ID，主键
User：每个管理员一个user用户名，非空
Pass：每个管理员一个pass（密码），非空，使用md5加密

4.2。3 留言板数据库

E-R图

数据库表
数据字典：
Id:每个留言一个id，主键，非空
Title：每个留言一个title,可以为空
Tentent：每个留言一个内容，可以为空
Time：每个留言一个时间，可以为空
Ip：每个留言一个ip,一个ip可以对应多个留言
Huifu:每个留言对应一个管理员回复，可以为空

总结
在这次课程设计中，我再一次巩固了对HTML静态网页和ASP动态网页的设计制作方法，特别是对HTML网页已经较为熟练的掌握了。并且我对CSS样式文件和JS脚本文件的使用也有了更深的了解。

这次课程设计做的这个博客每个网页源文件都是自己一个一个字敲出来的，感触很深的是对HTML网页从略知一二到熟练掌握这一过程，通过这次课程设计我相信自己已经有了独立制作一个静态网页并调整合适CSS布局和样式的能力.
我还学会了YUI的使用，YUI是个非常实用的工具，相当于C++中的STL标准模板库，可以为我们提供很方便的JS控件，这次课程设计中我也使用了大量的JS控件丰富自己的网页。

通过这次课程设计我还学会了ASP.NET网页的制作方法，通过动态网页制作动态交互式效果,比如网页中的留言板，这是HTML静态网页所无法达到的，使用数据库和ASP技术结合可以很好的实现用户和站长的交互功能.

这次课程设计也是很艰难的，首先对CSS的不了解，对JS的不了解，对ASP动态网页的不了解,后来经过老师的指导以及同学间的讨论终于掌握了这些技术，对我自己而言是获益匪浅的。
通过这一周的课程设计，我觉得充实了自己的生活，丰富了自己的知识，使自己的技术方面有了很大的提高,基本上已经具备了独立开发一个小型网站的所需素质和知识。
在此我要特别感谢易明老师的指导以及对我有过帮助的所有同学!

附录：参考文献
《网页经典配色与设计手册》 （韩）高永子 卢坚 中国青年出版社
《网页制作与网站建设课堂实录》 何秀芳 人民邮电出版社
《从入门到精通》 庞娅娟，房大伟 清华大学出版社

16