中国茶网前台设计方案.doc

益阳职业技术学院益阳职业技术学院 网站建设与管理网站建设与管理 课程项目验收报告课程项目验收报告 网站项目选题 网站项目选题 中国茶网中国茶网 姓姓 名 名 李静李静 学学 号 号 200800502017 专业班级 专业班级 网络技术网络技术 0802 任课教师 任课教师 孟清孟清 计算机网络技术专业教研室计算机网络技术专业教研室 制制 二二 一一 年六月年六月 目目 录录 1 网站介绍网站介绍 3 1 1 客户需求分析 3 1 2 网站面向的用户群体 3 1 3 网站界面设计 4 1 4 网站开发环境需求 4 1 5 网站前台总体设计 4 1 6 设计目标 5 1 7 网站颜色的搭配 5 2 网站前台的具体实现网站前台的具体实现 5 2 1 首页 6 2 2 茶与文化 7 2 3 茶新闻 8 2 4 茶的种类 9 2 5 茶的美食 10 2 6 茶与健康 11 2 7 茶具 12 3 网站测试网站测试 13 3 1 测试的目的 13 3 2 测试的方法 13 3 3 测试用例 14 3 4 测试总结 14 4 总结总结 15 1 网站介绍网站介绍 本网站定位于计算机网络基础课程网 暂时考虑单机环境下的 实现 操作系统选择目前常用的 Windows xp 和 Windows server2003 系统性质管理信息系统 本网站前台功能包含首页 茶与文化 茶新闻 茶的种类 茶 的美食 茶与健康 茶具 整个网站网页设计简单 是一个能够给 网民提供茶消息的网站 1 1 客户需求分析客户需求分析 该网站是针对那些对茶和中国历史文化有兴趣的网民 随着中 国不断的发展 越来越多的人对中国的文化有兴趣 并且学习中国 的文化 茶不仅对中国有重要的影响对世界的文化业有着重要的 茶曾踏上丝绸之路风光过 在中国史上有着不可替代的作用和举足 轻重的历史地位 学习茶文化 可以帮助中国文化的学习 本网站 就是以推广中国的茶文化为本 帮助网民查找有关茶的信息 并且 为网民提供一个可供交流的平台 供喜欢茶以及中国历史文化的网 民相互交流和学习 网络的发展速度越来越快 所以这个网站还是 很有发展前途的 随着网络的发展 网络已经越来越贴近人民的生活 越来越多 的人通过网络来获得他们所需要的信息 所以 通过网络来推广茶 文化是一个趋势 也势在必行 随着经济的发展 人们的在物质生 活得到满足的同时 人们还希望得到精神生活上的满足 茶不仅是 一种饮品 更是一种文化 可以满足人们在物质和精神上的满足 所以 茶在将来还是有很好的发展前途 本网站提供了将茶的文化 和茶的一些实时消息 帮助网民以最快的速度获得他们想要的信息 1 2 网站面向的用户群体网站面向的用户群体 网站面向那些爱茶 喜欢中国古典文化 以及需要了解茶的最 新动态的网民 网站的功能性需求 表 1 2 功能需求表 功能序号功能名称功能说明 1 首页整个茶信心的提供以及一些文化方面的介绍 2 茶与文化茶的历史习俗以及文化方面的文字和图片的介绍 3 茶新闻一些茶的展会消息以及最新的动态资讯 4 茶的种类茶的分类以及其介绍 5 茶的美食茶美食的介绍和做法 6 茶与健康教人们要怎么健康饮茶 7 茶具茶具的欣赏以及一些茶具的介绍 1 3 网站界面设计网站界面设计 因为本网站是茶文化的网站 所以这个网站中采用了大量的具 有中国文化元素的素材如在制作 Logo 时选用的素材有中国风格的人 物画 棋盘 茶壶 灯笼等 这些素材的运用突出了网站的主题 从整体上来看 这个网站各个页面的分工明确 页面美观 大方 简洁 易懂 标准 具有一定的兼容性 1 4 网站开发环境需求网站开发环境需求 软件环境 兼容当前主流操作系统 Windows XP server2003 等 1 5 网站前台总体设计网站前台总体设计 本网站主要是用来进行茶叶信息的介绍以及其消息的发布 作 为一个网站 应该有一些相关及其相对独立的模块耦合而成 本网 站系统主要包括以下几个主要页面及几个大的模块 每个页面包含 丰富的内容 每个大的模块下又细分为几个的功能模块 本网站主要用来进行教学信息的发布与显示 作为一个网站 应该由一些相关及相对独立的模块耦合而成 本网站系统主要包括 以下几个主要页面及几个大的模块 每个页面包含丰富的内容 每 个大的模块下又细分为几个的功能模块 1 6 设计目标设计目标 制作前台页面模块 包括主页及各个子页面 建立各个页面与 数据库中相关数据链接 实现前台通过调用数据库把后台数据在前 台显示和更新 整体网站遵循精品课程网站设计思路 拥有完善的 功能 风格要求简洁大方不单调 各个子页面都可正常返回主页以 及正确连接到各个子页面 功能要求使用简单全面 容易操作 数 据要求前台正确显示后台要求的数据的更新 及错误处理 能够通 过对后台页面的操作修改数据库 由上面的分析 网站前台的结构设计成 如图 1 6 所示 图 1 6 网站前台结构设计 1 7 网站颜色的搭配网站颜色的搭配 网站个给人的第一印象是来自视觉的冲击 确定网站的色彩搭 配是相当重要的一部 本网在式以灰色 黑等有古典艺术感颜色色 彩搭配使用的 在网页中也使用了一些色彩图片使得整个网站看上 去不会显的很呆板 又不会失去网站的风格 让人的视觉达到最舒 适的效果 2 网站前台的具体实现网站前台的具体实现 网站主要包括 茶与文化 茶新闻 茶的种类 茶的美食 茶 首 页 茶 与 文 化 茶 具 茶 与 健 康 茶 的 美 食 茶 的 种 类 茶 新 闻 与健康 茶具七个子页面 制作过程如下 2 1 首页首页 网站制作过程 首先利用 fireworks 制作了网站的首页效果图 大小问 900 1000 其中网站的整个内容包括网站的 LOGO 正文 网 站的版权 然后再把网站制作所需要的图片通过切片切出图片 再 用 flash 制作工具制作 flash 做出透明的 LOGO 这样就很直观 形象 简单的吧网站所要表现的主题给表达出来 在制作网页的过程中首 先是在 dreameaver 中用布局画出整个网站的大体布局格式 主要是 分了三栏 各个栏目有可以分多个小栏目 并且通过 css 样式来调 表格以及图片 文字的位子 主页包括的内容主要有 网站网站的 域名 导航条 LOGO 版权 导航条又包含茶与文化 茶新闻 茶的种类 茶的美食 茶与健康 茶具 用 asp 制作了 head asp index asp tail asp 三个模块 模块内容 如图 2 1 所示 图 2 1 首页效果图 2 2 茶与文化茶与文化 制作过程以及使用的技术 首先是吧这个网页的框架用布局画 出来 页面的框架构成跟主页的大体上是一样地 这里就不详细的 介绍了 页面的长度不做限定 宽度为 900 像素 网站头调用了 dead asp 模块 尾调用了 tail asp 模块 在正文部分插入可怜一个介 绍中国茶文化的视频 可以让网民以看故事的方式快速了解茶在中 国的发展历程 正文中还插入了一幅茶马古道的地图 是一幅茶的 线路地图 最下面还用一个 flsah 来介绍了其沿途风光 激发人们对 了解茶的历史的欲望 效果图如图 2 2 所示 图 2 2 茶与文化效果图 2 3 茶新闻茶新闻 制作过程以及使用的技术 首先把这个页面的框架画出来 网 页的框架以及页面长度和宽度的设置跟茶与文化大体上时一样的 新闻页是为了给网民提供茶信息 所以我把新闻新闻分成热点关注 茶叶会展 茶业咨询 最新动态 和行情商机 一边网民快速的了 解他们需要的信息 为了提高新闻浏览的速度 我把最新新闻的用 flash 形式显示出来 还做了一个一个网站公告的滚动条 方便网站 发布最新信息 这个页面调用了 head asp 和 tail asp 的模块的内容 效果图如图 2 3 所示 图 2 3 新闻效果图 2 4 茶的种类茶的种类 制作过程以及使用的技术 这个页面的框架 长度 宽度 以 及调用的模块内容跟新闻页面差不多 这里就不过多的说明了 该 页面主要是介绍介绍茶的总类以及推荐一些茶茶的产品给网民 所 以我把茶的种类细分 做成左右两部分上面的部分介绍茶的总类 下面推荐一些厂商的产品以及做广告 厂商产品推荐做成横向的滚 动条以便多推荐一些厂商的产品 效果图如图 2 4 所示 图 2 4 茶种类效果图 2 5 茶的美食茶的美食 制作过程以及使用的技术 这个网页的制作方法和调用的模块 内容跟茶新闻的制作方法差不多 这个网页主要是以介绍和欣赏茶 美食为主 该网页的内容有美食排行榜 美食的保健 推荐美食以 及美食的制作方法的一些相关信息 效果图如图 2 5 所示 图 2 5 茶美食效果图 2 6 茶与健康茶与健康 制作过程以及使用的技术 这个网页的制作方法和调用的模块 内容跟茶新闻的制作方法差不多 这个网页主要是告诉网民应该如 何健康饮茶 网页的内容包括饮茶禁忌 茶叶茶疗 科学饮茶 效 果图如图 2 6 所示 图 6 2 茶健康效果图 2 7 茶具茶具 制作过程以及使用的技术 这个网页的制作方法和调用的模块 内容跟茶新闻的制作方法差不多 这个网页主要是以介绍和欣赏茶 具为主 该网页的内容有茶具历史文化 茶具知识 茶具鉴赏 茶 具典故 网页右边的模块做了一个中国印象的 flash 展示了一些具有 文化气息的图片 效果图如图 2 7 图所示 图 2 7 茶具效果图 3 网站测试网站测试 网站做好后 接下来的工作就是进行测试与发布 这是很关键 的一个步骤 下面就介绍了如何测试网站做了简单介绍 3 1 测试的目的测试的目的 测试的主要目的是保证各个页面之见的连接没有错误 网页中 没有乱码 图片 flash 能够正常显示 3 2 测试的方法测试的方法 我用的测试方法是 把网站所有内容放在本地磁盘 建立一个 文件把内容放进去 设置文件夹的权限为 everyone 不然浏览的时 候因为没有相关权限而不能正确显示 接着打开 Internet 信息服务其 IIS 在默认网站属性里 打开网站的主目录 设置为网站所在的文 件夹 接着设置权限为脚本资源访问 读取 目录浏览 记录访问 索引资源等等 执行权限为脚本和可执行文件 如图 3 2 1 图 3 2 1 文件主目录设置 在打开默认网站的文档 添加一个 index asp 图 3 2 2 所示 图 3 2 1 文档设置 可以再 Internet 信息服务器中浏览 也可以再浏览器中输入网站 的网站进行浏览 3 3 测试用例测试用例 对 index asp news asp jian asp ju asp meishi asp wenhua asp zhonglei asp 这些页面进行测试 3 4 测试总结测试总结 通过网站的系统测试 网站各个页面之间连接都没有发生错误 页面能够调用数据库的的数据 说明该网站能够成功发布 其基本 功能以实现 4 总结总结 通过制作这个网站我学到了很多的东西 这个网站的制作时对 我们专业知识的考察 在制作网站的过程中不仅仅复习了以前所学 还学会了一些新的东西 从开始构思要做什么网站 要做什么风格 的网站 在