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

西安邮电大学

电子商务网站设计上机报告书

系部名称：电子商务系

学生姓名：李鹏

专业名称：电子商务

班级：商务1001

时间：2012/9/6

0

西安邮电大学教学实习报告书网站设计——实践者：李鹏

1.系统规划

电子商务网站越来越普遍，电子商务具有众多优势，1、市场全球化。2、交

易的快捷化。3、交易虚拟化。4、成本低廉化。5、交易透明化。6、交易标准化。

7、交易连续化。为了能提高企业利润率，降低企业成本，通过采用建立电子商

务网站的方式，实现该目的。

2.系统分析与设计

内容要求：

本次课程中要求掌握javascript相关内容，主要掌握通过javascript技术开发

电子商务网站。网站页面要求包括：导航栏。网站主要内容包括，用户注册、商

品添加、商品结算。

请按照上述要求，写出网站功能列表。、

3.系统实施

1.工作计划及时间安排

8月27日：对EditPlus3进行安装，初步了解javascript语言。

8月28日——8月31日：

观看后盾网javascript视频，并根据视频讲解进行编程练习，根据老师的

要求，结合css样式制作一个导航条，并能够产生二级导航条。

9月1日——9月3日：

根据老师的要求，制作一个注册页面，要求验证方面要做到用户名输入时

不能为空，输入密码长度要有限制，另外要有验证码。

9月4日——9月5日：

制作一个商品添加表单，要求能够添加删除商品信息，并且能够根据单价

和商品数量得知总价的金额。

9月6日：

制作一个商品结算表单，要求能够实现全选和全不选的勾选框的功能以及

对选中的值能够获取。

9月7日：

完成上机实习报告。

1

西安邮电大学教学实习报告书网站设计——实践者：李鹏

2.具体实施过程

1）导航条

绘制主窗体界面，实现导航条，要求导航条中有用户管理、商品管理，用户管理

包括用户注册，商品管理包括：商品添加和商品查询。

(1)对于导航条的制作，先定义好布局框架，代码：

(2)二级下拉菜单就依葫芦画瓢，在一级的里面嵌套两个标签，利用css样式修饰，

效果如下：

2

西安邮电大学教学实习报告书网站设计——实践者：李鹏

具体过程描述：

第一步：先建立菜单的结构如上。

第二步：隐藏li的默认样式。因为看起来不好看，菜单通常都不需要li默认

的原点，我给ul定义了一个样式来消除这些圆点，为了便于更好的控制整个菜

单，把菜单放在了一个div标签里。

第三步：设置基本的链接效果，通过css来设置链接的样式，分别定义：link

：visited：hover的状态。

第四步：将链接以块级元素显示

为了让菜单链接的背景色填满整个li的宽度，在样式定义中增加了display：block

，使链接以块级元素显示。

3

西安邮电大学教学实习报告书网站设计——实践者：李鹏

2）用户注册页面

绘制用户注册页面，要求用户注册页面中的各个字段用javascript进行校验。

对于注册页面：

第一步：