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

电子商务设计课程设计报告 题 目 个人博客网页设计系统 学生姓名 易帅龙 学 号 201017020107 专业班级 信管 10101 指导老师 易明 设计日期 2013 年 6 月 指导老师评阅意见： 评阅成绩： 签名： 电子商务网页设计课程报告 1 目录 摘 要 3 系统概 述 4 第 1 章 项目需求分 析 5 1.1 需求分 析 5 1.2 所用软 件 5 第 2 章 首页设 计 5 2.1 网站主 题 5 2.2 静态网页制作工 具 5 2.3 系统总框 图 6 2.4 设计网 站 6 第三章 静态分页模块设 计 7 3.1 各个静态子网页的设 计 7 2 3.2 实现网页间的连 接 10 第四章 动态分页模块设 计 11 4.1 留言板设 计 11 4.2 数据层设 计 13 总 结 15 附录：参考文 献 16 摘要 网络发展到今天，建立网站已经成为一个很普遍的问题了，对于一个企业来说，建设 好自己的网站可以抢占新世纪发展的战略要点。建立新的企业形象，直接开拓国际市场， 开展 24 小时网上营销及高效廉价的定向宣传；与客户建立最直接的交流机制，缩短推出新 电子商务网页设计课程报告 3 产品和打开新市场的周期，与富有吸引力的客户群发展客户关系网；与自己的销售人员保 持联系，进一步面向本地市场。 出色的网站吸引人的地方不仅仅在于其内容，鲜明的结构和独特的风格往往能起到画 龙点睛的作用。一个网站即使内容再丰富，如果网站的结构和风格不能吸引人，那也是毫 无价值的。往往整个网站的风格是一个网站吸引浏览者的魅力所在，因此应当根据网站的 主题、内容和浏览者的要求来设计自己独特的网站风格。 概述 这个网站是一个用 Dreamweaver、Photoshop、ASP.NET、Microsoft access 设计编写 的个人博客网站，主要包括 6 个模块：网站首页，个人信息，个人简历，个人兴趣,个人照 片，留言板。 4 首先前 5 个模块是主要功能是用来展示自己，类似于个人简历网页，所以采用了静态 HTML 语言编写，添加了相应的 CSS 样式表文件和 JS 脚本文件用来美化网页并添加 YUI 中 的实用功能，用来介绍自己，便于发布之后被搜索引擎收录。 最后一个留言板模块使用了 ASP.NET 技术编写，可以让用户注册之后登陆并留言给网 站站长，并带有后台管理功能，可以删除和回复游客的留言。 第一章 项目需求分析 1.1 需求分析 随着就业竞争越来越大，很多人开始在简历上奇招频出，纸质文件的个人介绍已经不 能满足电子商务迅速发展的现代社会了，于是个人介绍的个人网站应声而出，可以满足用 电子商务网页设计课程报告 5 户在网上介绍自己，展示个人特长和才华，增加被用人单位录用的机会。 1.2 所用软件 网页编辑排版 Macromedia Dreamweaver 8、网页图像制作软件 PhotoShop CS5、数据 库 Microsoft ACCESS、动态网页编程语言 ASP、静态网页编写语言 HTML、样式表 CSS、网 页脚本语言 JavaScript。 第二章 首页设计 2.1 网站主题 个人介绍网站的主旨就是介绍自己，所以主要的主题就是静态的介绍，采用灵活的 CSS 样式技术对个人网站进行美化，吸引访问者注意，提高访问量。 根据我的性格和喜好，网站主要基调色是蓝色，并加入了大量的动漫人物图片，展示 自己的特点和兴趣。 2.2 静态网页的制作工具 做 HTML 网页时主要使用的是 Deamweaver。另外，为了处理网页中的其他元素，还 使用了 Photoshop、VS2005 等软件。 2.3 系统总框图 首页 个 人 简 介 个 人 信 息 个 人 兴 趣 个 人 照 片 留 言 板 6 2.4 设计网站 首部的 LOGO，这个区域揭示了整个网站的主旨，所以这一部分的图片和内容必须设计得 很精。然后是左下区域的座右铭，座右铭体现了个人的性格和修养以及价值观，这一部分 布局必须清晰明了。最后是右下部分的其他，为了使网页看起来简洁明了，我在这一部分 添加了一个单独的图片作为一个 DIV。 下面是我制作完成的首页，整个页面的主色调是黄色，LOGO 部分是我喜欢的动漫图 片，左下是座右铭区域，其中包含了我的联系方式，右下也是一张动漫图片，为了适应游 客不同时段的访问以及不同人的不同喜好，我还另外使用 JS 技术做了一套夜间模式的换肤。 前 端 页 面 后 台 管 理 电子商务网页设计课程报告 7 默认风格 夜间模式 第三章 静态分页模块设计 3.1 各个静态子网页的建立 在设计并制作好了网站的首页之后，接下来就是设计各个模块的内容，根据我自己的 兴趣和理解，于是每个模块都设计了自己的 CSS 文件，以显示个人网站的特点和个人的的 特色。 3.1.1 个人信息 8 这个部分我使用了方方正正的蓝色方块状作为中央背景，主体背景是主色调黄色， 显得整个页面比较简洁明朗。上面包含了一些个人信息。其中我在左上角区域使用 JS 代码添加了一个可以显示当前时间的控件。 并借鉴了禅意花园 203 号作品的 CSS 风格给个人信息部分做了布局，这套 CSS 风 格比较符合个人信息应该具备的简单明了、内容清晰的风格。 3.1.2 个人简历 这个页面依旧使用了黄色的主色调，顶部是蓝色，与个人信息想呼应。主题是大 海，个人简历就像鱼儿在海中的经历一样，这也和个人简历的风格想呼应。 左上角我添加了一个时钟空间，并添加了一个可以游动的鱼，点击之后可以快速 电子商务网页设计课程报告 9 返回主页，这条小鱼是使用 JS 代码和 GIF 动图完成的，和整个大海的风格比较融合。 另外我在网页底部添加了固定的 BOTTOM 页脚，主要内容也是跟海有关，为的也是 和主题融合。 3.1.3 兴趣爱好 这个子网页采用的是 YUI 中的 Paginator:Getting started with Paginator JS 控件，可 以在网页中插入文字图片，并有翻页效果。 每个人的兴趣爱好可以有很多，如果采用流式布局则会显得很冗杂，于是我采用 了这个 JS 控件，让游客可以对每一个感兴趣的栏目进行浏览，不会产生疲劳。另外我 将图片大小调节同意大小，并添加在每个框架中，这样可以使整个网页布局不会产生 太大波动。 3.1.4 个人照片 10 这个网页依然采用的是黄色基调色，采用了 YUI 中的 Carousel Control:Spotlight example JS 控件。这个 JS 控件我将它设置了三个外循环变量三个内循环变量，一共可 以将 9 张照片分成 3 个大块显示，每一块 3 张照片，比较符合现在照片墙的风格。 另外我还采用了一个背部落雪花的 GIF 动态效果的 JS 控件，并添加了一个比较 轻快的背景音乐，让人在浏览照片的时候感到轻松。 3.2 实现网页间的链接 做好各个子网和首页后，接下来就是通过链接，将整个网站中的网页链接起来，使各 个分页和主页、分页和分页间可以流畅的切换，从而减少人们浏览网页的时间。 我采用的是添加 A 标签，使用 A 标签切换页面浏览，并将每个链接设置成一个 DIV， 使总体效果看起来比较清晰。 分页链接 返回主页 电子商务网页设计课程报告 11 第四章 动态分页模块设计 考虑到游客与站长的互动性，我还设计了一个留言板的模块。这个模块是使用 asp.NET 动态网页技术实现的，主要的逻辑拓扑图如下所示： 4.1 留言板的设计 登陆页面的设计，我对用户名和密码进行了加密，只有拥有用户权限的游客才能进入 留言，如果没有账号的话，必须先申请一个账号才能进入留言板，在留言板中可以填写自 己的昵称和要留言的内容，一旦留言之后就不能再进行更改。 留言板还具有一个后台管理功能，可以让站长进入留言板的后台对留言进行回复和删 除，并且可以修改后台管理员的用户名和秘密，一般来说这个账号是站长独有的，不应泄 露给他人。 4.1.1 登陆页面 登陆页面的设计依然采用了黄色主色调，这部分只有两个 INPUT 框和一个提交按钮， 非常简单明了，功能也很清晰。 登陆页面 12 4.1.2 留言板 前台部分留言的框架部分我采用了浅绿色的类似于 IPAD 的边框，游客留言时就像在 使用 IPAD 一样，游客可以输入自己的昵称和留言内容，当站长上线之后可以进入后台回 复，实现了站长和游客的互动功能。 如果要进入后台部分，则要输入后台管理密码，这个密码是保存在 ACCESS 数据库中 的，只有站长才知道这个密码。 后台部分整体页面效果跟前台部分是差不多的，但是后台部分在每个留言后面添加了 两个控件，当拥有管理权限的人（管理员-站长）进入后台之后才可以执行者两个操作。 电子商务网页设计课程报告 13 4.2 数据层设计 4.2.1 游客账户数据库 E-R 图 数据库表 数据字典： User：每个游客一个 user，主键 Pwd：每个游客一个 pwd（密码） ，非空 14 4.2.2 管理员账户数据库 E-R 图 数据库表 数据字典： Id：每个管理员一个 ID，主键 User：每个管理员一个 user 用户名，非空 Pass：每个管理员一个 pass（密码） ，非空，使用 md5 加密 4.2.3 留言板数据库 E-R 图 电子商务网页设计课程报告 15 数据库表 数据字典： 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 动态网页的不了解，后来经过老师的指导以