电子商务网站设计实验报告书.docVIP

西安邮电大学 电子商务网站设计上机报告书系部名称 ： 电子商务系 学生姓名 ： 李鹏 专业名称 ： 电子商务 班 级 ： 商务1001 时间 ： 2012/9/61.系统规划 电子商务网站越来越普遍，电子商务具有众多优势，1、市场全球化。2、交易的快捷化。3、交易虚拟化。4、成本低廉化。5、交易透明化。6、交易标准化。7、交易连续化。为了能提高企业利润率，降低企业成本，通过采用建立电子商务网站的方式，实现该目的。 2.系统分析与设计 内容要求： 本次课程中要求掌握javascript相关内容，主要掌握通过javascript技术开发电子商务网站。网站页面要求包括：导航栏。网站主要内容包括，用户注册、商品添加、商品结算。 请按照上述要求，写出网站功能列表。、 3.系统实施 工作计划及时间安排 8月27日：对EditPlus 3进行安装，初步了解javascript语言。 8月28日——8月31日： 观看后盾网javascript视频，并根据视频讲解进行编程练习，根据老师的要求，结合css样式制作一个导航条，并能够产生二级导航条。 9月1日——9月3日： 根据老师的要求，制作一个注册页面，要求验证方面要做到用户名输入时不能为空，输入密码长度要有限制，另外要有验证码。 9月4日——9月5日：制作一个商品添加表单，要求能够添加删除商品信息，并且能够根据单价和商品数量得知总价的金额。 9月6日：制作一个商品结算表单，要求能够实现全选和全不选的勾选框的功能以及对选中的值能够获取。 9月7日：完成上机实习报告。 2. 具体实施过程 1）导航条 绘制主窗体界面，实现导航条，要求导航条中有用户管理、商品管理，用户管理包括用户注册，商品管理包括：商品添加和商品查询。 (1)对于导航条的制作，先定义好布局框架，代码： (2)二级下拉菜单就依葫芦画瓢，在一级的里面嵌套两个标签，利用css样式修饰，效果如下：具体过程描述： 第一步：先建立菜单的结构如上。 第二步：隐藏li的默认样式。因为看起来不好看，菜单通常都不需要li默认的原点，我给ul定义了一个样式来消除这些圆点，为了便于更好的控制整个菜单，把菜单放在了一个div标签里。 第三步：设置基本的链接效果，通过css来设置链接的样式，分别定义：link ：visited ：hover的状态。第四步：将链接以块级元素显示 为了让菜单链接的背景色填满整个li的宽度，在样式定义中增加了display：block ，使链接以块级元素显示。2）用户注册页面 绘制用户注册页面，要求用户注册页面中的各个字段用javascript进行校验。 对于注册页面： 第一步：先设计好数据表。 第二步：做好注册页面register.html，可以让用户输入注册信息的表单文件。 第三步：通过javascript校验用户输入的数据。如用户名输入时不能为空，以邮箱的地址格式输入用户名，密码在7~12位之间。代码如下： 页面效果如下：代码： 页面效果： 代码： 页面效果： 3）商品添加页面 完成商品添加页面，在商品添加页面中能实现商品的动态增加与删除。 商品添加页面的制作过程： 第一步：进行框架的构建。 代码： 页面效果： 第二步：对添加删除操作功能进行编写： 代码如下：4）商品结算页面 完成商品结算页面，实现在商品结算页面中能实现商品的全选与全不选，同时，页面要求美观大方。 首先是框架设计： 代码：框架效果如下： 功能展示： 按钮 代码： 效果展示： 5. 实验总结 1）运行及测试结果分析。 运行和测试在实施过程中已经描述，以下为分析阶段：在这次的网页设计实习之中，我们总共完成了四个页面，第一个是制作一个导航条，第二个是一个用于用户注册信息的页面，第三个是一个进行商品添加和删除，并能根据单价和数量得知总价格的页面，第四个是一个商品结算的页面。 经过两周的实习，我明白了老师的意图，贯穿所做的四个页面，整合到一块就是一个简易的购物系统。用户根据导航条选择要进行的操作，选择注册并完成注册后登录进入商品添加页面，然后，添加所需商品，提交后，系统后把用户所提交的商品信息提交到商品结算页面，根据结算结果付账完成购物。为了能让我们能够少走弯路，老师没有给我直接布置任务，而是给我们布置一个个的任务，在不知不觉中做成了一个简易的系统，唯一需要完善的是后台的数据库，因为我们的实习重点放在网站前台页面制作上，就没有做后台数据库部分，所以做成的也只能算是半个系统。实习中所编写的每一个页面都有各自的重点，比如说导航条就需要通过css来设置链接的样式，分别定义：link ：visited ：hover的状态；用户注册页面重点在于用户输