《WEB基础综合课程设计》课程设计报告

宁波大红鹰学院信息工程学院宁波大红鹰学院信息工程学院 课课 程程 设设 计计 报报 告告 项目名称 项目名称 电子商务网站设计电子商务网站设计 项目组长 项目组长 项目成员 项目成员 班级名称 班级名称 专业名称 专业名称 完成时间完成时间 20102010 年年 1111 月月 1414 日日 信息工程学院制 一 项目需求和背景一 项目需求和背景 根据 2008 年 6 月的统计 中国的因特网用户已上升至 2 53 亿 居世界第 一 巨大的因特网用户为因特电子商务的发展奠定了重基础 随着 B2C 的不断 推广 上网购物成了一大购物主流 针对现在相当一部分的鞋类网站卖的非常 的便宜 但是又不是正品鞋 这对想上网买品牌鞋 又怕遇到质量不好 信誉 不高的网站 鞋子尺码不对等问题 我们公司创建了一家综合鞋类 B2C 网站 网站主要定位在品牌折扣的在线销售 包括运动鞋 男鞋 女鞋等类目 每双 鞋子都有多角度的图片展示 定期还有特价的优惠活动推出 支持支付宝付款 此外还有很不错的论坛以及顾客留言反馈等信息 更加保障了上网购物时顾客 的权益 二 网站规划设计说明二 网站规划设计说明 1 网站规划 网站名称 中国 KEEN 鞋类网站 网站主题 通过网站宣传 树立企业形象 提高企业知名度 输入法 网站语言 简体中文 网站风格 以 冷色调为主 给人以 清新 的感觉 主题鲜明突出 顾客之上 服务到家 要点明确 以简单明确的语言和画面体现站 点的主题 表现网站的个性和情趣 办出网站的特点 建站内容及特性 KEEN 作为一个宣传性的企业网站主要是突出它的中心标志性形象 运用现代流行理念和元素 体现出今日鞋类网现代不失传统 庄重不失轻松 大众不失前卫的特点 并做好各个栏目的导航 突出网站的重要职能和重要内 容 使得网站能够同今日高科技与服务行业完美结合 建成国内一流的宣传型 商务网站 1 首页设计 页头 准确无误的标识 KEEN 鞋类集团站点和它的企业标志 页面 应是各大栏目导航 最新产品展示 最新供应 求购 代理 合作 信息 最新加入会员企业 最新行业资讯 最新展会信息 2 导航设计 导航系统是有效连接网站各处的工具 它有效的分类网站内容并指向它所 代表的内容 是通过超文本链接或图片链接 使浏览者能够在网站上自由前进 或后退 而不会让浏览者使用浏览器上的前进或后退 KEEN 网站导航项目 首页 商品推荐 作为一个潮流导向 为顾客介绍新一季的潮流趋势 商品分类 对网站的鞋子做一个划分 方便顾客找到自己心仪的鞋子 最新热卖 热卖商品 为顾客提供更多的选择 联系我们 公司的联系方式 2 结构设计 网页布局图 1 首页 图 1 首页布局图 2 最新搜索页 图 2 最新搜索页布局图 3 联系页 图 3 联系页布局图 网站结构图 图 4 网站结构图 3 CI 形象设计 使用 photoshop 技术 4 网站色彩 1 网站主色调 该网站的主色彩是绿色和白色 配以黄绿色和少量的橙色 文字为黑 如 下图所示 图 5 配色采集 绿色是一种非常具有亲和力的颜色 它代表的是自然 生命 活力与健康 是使用比较广泛的颜色之一 黄绿色和橙色的使用 则使整个网站显示朝气蓬 勃 2 网页链接色 表 1 普通文字链接配色表 5 技术方案 表 2 技术方案表 序号序号网站组成网站组成使用技术使用技术效果说明效果说明 1 1 网站所有文 字页面 2 静态图片 3 表格 HTML 1 出版在线的文档 其中包含了标题 文本 表 格 等内容 2 通过超链接检索在线的信息 3 为获取远程服务而设计表单 用于检索信息 定购产品等 4 在文档中直接包含电子表格 视频剪辑 声音 剪辑以及其他的一些应用 2 1 网站动态菜 单 2 动态图标 JavaScript 1 实现在一个 Web 页面中链接多个对象 2 与 Web 客户交互作用 而可以开发客户端的 应用程序等 3 1 轻常更新的 网页 2 动态数据 如新品展示 最新动态 ASP 1 是一种在 WEB 服务器端运行的脚本语言 程序 代码安全保密 2 此可以使用 ActiveX 控件继续扩充其功能 3 可以轻松的存取各种数据库 适用与各种浏览器 4 网站内的动态 按钮 CSS 使用 CSS 的技术 网页便会给人一种赏心悦 目 工工整整的感觉 同时字体的色彩变化 也使主页变得更加生动活泼 5 1 产品资料 2 产品查询 数据库 1 完善的客户数据资料处理 2 快速的资料查询能力 3 未来电子商务的基础 6 1 主要动画 2 动态图标 Flash 1 以极富吸引力的动画吸引浏览者停留 2 增强网站感染力 三 三 HTMLHTML 页面结构图页面结构图 图 6 HTML 页面结构图 图 7 客户留言 html 四 页面 DIV 结构代码 包括主页和各内容页 注意三与四是一一对应的关系 首页首页 客户留言页客户留言页 五 代码及注释五 代码及注释 首页首页 BODY MARGIN 0px style1 FONT WEIGHT bold FONT SIZE 11px COLOR ff7800 FONT FAMILY tahoma style2 FONT WEIGHT bold FONT SIZE 10px COLOR 51588c FONT FAMILY tahoma style3 FONT SIZE 11px COLOR ffffff FONT FAMILY tahoma style4 FONT WEIGHT bold FONT SIZE 11px COLOR 51588c FONT FAMILY tahoma style5 FONT SIZE 11px COLOR ff7800 FONT FAMILY tahoma style6 FONT WEIGHT bold FONT SIZE 10px style7 COLOR 767676 style8 FONT WEIGHT bold FONT SIZE 11px COLOR ff6600 FONT FAMILY tahoma style10 FONT SIZE 11px COLOR 767676 FONT FAMILY tahoma style11 COLOR 51588c style12 FONT WEIGHT bold style13 FONT SIZE 11px COLOR 51588c FONT FAMILY tahoma style14 FONT SIZE 10px COLOR ffffff FONT FAMILY tahoma style16 FONT SIZE 10px COLOR 767676 FONT FAMILY tahoma 客户留言页客户留言页 body margin left 0px margin top 0px margin right 0px margin bottom 0px style1 color ff7800 font size 11px font family tahoma font weight bold style2 color 51588c font size 10px font family tahoma font weight bold style3 font family tahoma font size 11px color FFFFFF style4 color 51588c font size 11px font family tahoma font weight bold style5 font family tahoma font size 11px color ff7800 style7 color 767676 style8 color ff6600 font size 11px font family tahoma font weight bold style10 color 767676 font size 11px font family tahoma style11 color 51588c style12 font weight bold style14 font family tahoma font size 10px color FFFFFF style16 color 767676 font size 10px font family tahoma style17 font family tahoma font weight bold color 767676 font size 11px p font size 14px margin top 30px margin bottom 20px margin left 10px tijiao float right margin top 10px margin right 40px tijiao tj width 50px border 1px solid CCCCCC style141 FONT SIZE 10px COLOR ffffff FONT FAMILY tahoma 六 网站测试结果六 网站测试结果 1 360 下测试结果 图 7 360 测试结果 2 FF 下测试结果 图 9 ff 测试结果 七 项目计划及分工七 项目计划及分工 1 项目计划表 电子商务网站设计 项目计划表 项目组长 班级 08 计科 2 班 日期 11 14 进程 第 1 次课 10 11 第 2 次课 10 13 第 3 次课 10 19 第 4 次课 10 19 第 5 次课 10 19 第 6 次课 10 19 负责人 项目计划 总体方案 效果图 设计报告 系统测试 答辩 2 分工完成情况 X1 X2 X3 八 总结八 总结 通过这次电子商务网站的设计 我基本掌握了制作电子商务网站的基本步 骤 同时也有不少的心得体会 工欲善其事 必先利其器嘛 前期的工作准备 好之后 就该琢磨你网站的内容了 网站的内容上一定要求新 求奇 求变 这谁都知道 但是这却是一个不可能完成的任务 想做一个内容与其它网站内 容不同网站你觉得有可能吗 所以内容的选择上尽量做别人做的少的 而且有 潜在市场的 有些细枝末节的问题也请大家注意下就是内容的编排 文字的大 小 粗细要根据内容的等级来区分 大标题可使用大号字 小标题可加粗显示 公道的编排才有利于浏览者阅读 内容千万要健康哦 一个健康绿色的网站一 定会让绝大多数用户留下好口碑 想法谁都有 但是实现还是需要技术的 扪 心自问 对 WEB 这门课的了解我们差不多还是个门外汉 所以技术方面我们遇 到了很多的困难 比如说有时候在 DW 上明明显示可以的 但是保存在 IE 上显 示的时候却不行了 还有各个页面之间的衔接 登录以及注册表单的制作 种 种很多人都觉得很简单的事情 对我们来说真的很是头痛 不过确实以前也没 有很好的专研过这门课 也知道有这样的结果 通过这次试验是是基本掌握了 制作网站所需要的几项基本步骤 我们相信掌握了基本流程也是一项很不错的 收获 至少也是学了一样东西 相信在第二次实验的时候 我们组能够更快的 进入到实验中去 做的更好 也更有去学习好 WEB 这门课的愿望 附页 源代码附加注释 附页 源代码附加注释 main BODY MARGIN 0px style1 FONT WEIGHT bold FONT SIZE 11px COLOR ff7800 FONT FAMILY tahoma style2 FONT WEIGHT bold FONT SIZE 10px COLOR 51588c FONT FAMILY tahoma style3 FONT SIZE 11px COLOR ffffff FONT FAMILY tahoma style4 FONT WEIGHT bold FONT SIZE 11px COLOR 51588c FONT FAMILY tahoma style5 FONT SIZE 11px COLOR ff7800 FONT FAMILY tahoma style6 FONT WEIGHT bold FONT SIZE 10px style7 COLOR 767676 style8 FONT WEIGHT bold FONT SIZE 11px COLOR ff6600 FONT FAMILY tahoma style10 FONT SIZE 11px COLOR 767676 FONT FAMILY tahoma style11 COLOR 51588c style12 FONT WEIGHT bold style13 FONT SIZE 11px COLOR 51588c FONT FAMILY tahoma style14 FONT SIZE 10px COLOR ffffff FONT FAMILY tahoma style16 FONT SIZE 10px COLOR 767676 FONT FAMILY tahoma 首页 商品推荐 商品分类 最新热卖 联系我们 最热 价格 商品 介绍 在线支付 在线咨询 评价 会员中心 最新公告 23 n