电子商务购物网站毕业设计报告书.doc

Ajax课程设计报告

学   院：     数学与计算机科学学院   
班   级：      13级数字媒体技术
学   号：      130705010049      
姓   名：        苏梅    

目录
引言 2
内容摘要 3
一、 系统使用描述 4
1. 选课背景 4
2. 技术支持 5
二、 整体规划 6
1. 系统功能分析 6
2. 网络结构 6
3. 其功能如下： 6
三、 页面代码实现 7
1. 首页头部导航代码 7
2. 首页主要代码 11
3. 首页底部代码 32
4. 联系我们页面主要代码 35
5. 登录页面主要代码 36
6. 注册页面主要代码 39
7. 商品详情页面主要代码 43
8. 购物车代码 54
四、 各页面的最终效果 58
1. 首页： 58
1.1 搜索： 58
1.2 回到顶端： 58
2. 新品上市： 59
3. 分类： 59
3.1 男士： 59
3.2 女士： 60
3.3 儿童： 60
3.4情侣： 61
4. 联系我们： 62
5. 注册： 62
6. 登录： 63
7. 购物车： 63
8. 商品详情： 64
五、 总结 64

引言
本课程设计主要是利用Dreamweaver这种可视化的网页制作工具制作网络购物网站。
内容摘要
随着计算机技术的日益发展，现代社会已经到了真正的信息时代，互联网上的这个虚拟世界正在具体化、现实化，并逐渐与现实生活融为一体。电子商务的迅速发展不仅是因为其将传统商务流程电子化、数字化而提高效率，而且在于其创造了更多的贸易机会。这是一个发展迅速的新市场，将形成一套全新的贸易活动框架。与此同时,商业空间也发展到全球规模, 这更加促进电子商务的(Electronic merce, EC)飞速发展，电子商务网站也就应运而生。建立商业网站，成了企业走近电子商务的第一步，电子商务网站使传统的封闭营销方式转化为利用互联网的方便性，向全世界的消费者宣传自己的产品。
此电子购物网站主要实现了用户浏览页面，查看商品，联系，购物车和用户登录注册功能，用户把商品放入购物车，并且对购物车里的商品进行删除购物车的商品。
关键字：电子购物 购物车

一、 系统使用描述
1. 选课背景
电子商务被看作是一种现代化的商业和行政作业方法，这种方法改善产品和服务质量、提高服务传递速度，实现跨领域商业活动，满足政府组织、厂商和消费者降低成本的需求，通过计算机网络加快信息交流以支持决策。电子商务的内涵和外延也在不断充实和扩展。近年来，世界范围内Internet/Intranet网络环境的基本形成，使得基于Internet环境的系统的设计与开发成为重要方向，特别是B/S结构的应用越来越广泛。
本电子商城网站是建立一个商品销售平台，这个平台是企业发展及走向全球所迫切需要的。为企业单位搭建一个商品发布、交易的平台，企业将销售商品在此平台发布，由网站相关管理人员管理，这样既能提高企业的销售量，扩大销售范围，同时也能节约企业开办更多实体店的费用，从而节约了大量人力物力，于是本电子商务网站就应运而生了。
随着电子商务魅力的日渐显露，虚拟企业、虚拟银行、网络营销、网上购物、网上支付、网络广告等一大批前所未闻的新词汇正在为人们所熟悉和认同，这些词汇同时也从另一个侧面反映了电子商务正在对社会和经济产生的影响。基于ASP.NET技术的文静电子商城系统正是网上购物的一种。随着网络技术的迅速的发展，网上购物已在互联网上十分流行，人们可以不受时间的限制和空间的限制，及不受传统购物的诸多限制，可以随时随地进行购物，同时由于产品的网络成本远低于传统商店中的产品成本，从而商品的买卖方都能得到实惠，为此开发文静电子商城网站十分必要。

2. 技术支持
Dreamweaver是MICROSOFT公司推出的网页制作工具，它功能强大、操作方便，易学易用，是目前最为流行的网页制作与站点管理工具。
Adobe Dreamweaver CS5是一款集网页制作和管理网站于一身的所见即所得网页编辑器，Dreamweaver CS5是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。
Adobe Dreamweaver CS5 软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的 Adobe CS Live 在线服务 Adobe BrowserLab 集成，您可以使用 CSS 检查工具进行设计，使用内容管理系统进行开发并实现快速、精确的浏览器兼容性测试。
二、 整体规划
1. 系统功能分析
本系统是一个中小型的电子商务系统—购物网，可以为各类用户提供方便的在线购物环境，符合目前国内流行的电子商务莫斯。用户可以在系统中实现登录、注册、联系我们、购物车、搜索查询商品、商品详情等功能。
2. 网络结构
网站的内容主要有下面五个：首页、新品上市、分类、登录、注册、联系我们、购物车、搜索查询商品、商品详情。
其结构如下所示：
主页
新品上市
分类
联系我们
登录
注册
首页
购物车
商品详情

3. 其功能如下：
1）首页:能浏览总体信息和为其他页面起到导航。
2）新品上市:能浏览全部新上架的商品。
3）分类:能具体的从各种分类中找到需要的商品。
4）联系我们:能把对网站的建议发到里面。
5）登录:用户登录
6）注册：注册新用户
7）购物车:能把喜欢的商品加入购物车，对已加入购物车的商品进行删除。
8）商品详情:查看商品的具体信息。

三、 页面代码实现
1. 首页头部导航代码
<div class="top-header">
<div class="container">
<div class="top-header-main">
<div class="col-md-6 top-header-left">
<div class="drop">
<div class="box1">
<select tabindex="4" class="dropdown">
<option value="" class="label">美元</option>
<option value="1">美元</option>
<option value="2">欧元</option>
</select>
</div>
<div class="box1">
<select tabindex="4" class="dropdown">
<option value="" class="label">中文:</option>
<option value="1">中文</option>
<option value="2">英文</option>
</select>
</div>
</div>
</div>
<div class="col-md-6 top-header-left">
<div class="cart box_1">
<a href="checkout.html">
<div class="total">
<span class="simpleCart_total"></span></div>
<img src="images/cart-1.png" alt="" />
</a>
<p><a href="checkout.html" href="javascript:;" class="simpleCart_empty">购物车&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>

<a href="registration.html" class="dl">注册</a><span>/<span> &nbsp;<a href="login.html" class="dl">登录</a></p>
</div>
</div>
</div>
</div>
</div>
<!--top-header-->
<!--start-logo-->
<div class="logo">
<a href="index.html" name="#6" id="#6" ><h1>Luxury Watches</h1></a>
</div>
<!--start-logo-->
<!--bottom-header-->
<!--bottom-header-->
<div class="header-bottom">
<div class="container">
<div class="header">
<div class="col-md-9 header-left">
<div class="top-nav">
<ul class="memenu skyblue">
<li class="active"><a href="index.html">首页</a></li>
<li class="grid"><a href="#1">新品上市</a> </li>
<li class="grid"><a href="#">分类</a>
<div class="mepanel">
<div class="row">
<div class="col1 me-one">
<h4>手表种类</h4>
<ul>
<li><a href="#2">男士</a></li>
<li><a href="#3">女士</a></li>
<li><a href="#4">儿童</a></li>
<li><a href="#5">情侣</a></li>
<li><a href="products.html">中性</a></li>
</ul>
</div> <div class="col1 me-one">
<h4>机芯类型</h4>
<ul>
<li><a href="products.html">石英表</a></li>
<li><a href="products.html">自动机械表</a></li>
<li><a href="products.html">电子表</a></li>
<li><a href="products.html">光能表</a></li>
<li><a href="products.html">智能表</a></li>
<li><a href="products.html">手动机械表</a></li>
</ul>
</div
<div class="col1 me-one">
<h4>风格</h4>
<ul>
<li><a href="products.html">时尚潮流</a></li>
<li><a href="products.html">休闲</a></li>
<li><a href="products.html">经典复古</a></li>
<li><a href="products.html">运动</a></li>
<li><a href="products.html">可爱</a></li>
</ul>
</div>

</div>
</div>
</li>
<li class="grid"><a href="contact.html">联系我们</a> </li>
</ul>
</div>
<div class="clearfix"> </div>
</div>
<div class="col-md-3 header-right">
<div class="search-bar">
<input type="text" value="搜索" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = '搜索';}">
<input type="submit" value="">
</div>
</div>
<div class="clearfix"> </div>
</div>
</div>
</div>
2. 首页主要代码
<div class="bnr" id="home">
<div id="top" class="callbacks_container">
<ul class="rslides" id="slider4">
<li>
<div class="banner">
</div>
</li>
<li>
<div class="banner1">
</div>
</li>
<li>
<div class="banner2">
</div>
</li>
</ul>
</div>
<div class="clearfix"> </div>
</div>
<!--banner-ends-->
<!--Slider-Starts-Here-->
<script src="js/responsiveslides.min.js"></script>
<script>
// You can also use "$(window).load(function() {"
$(function () {
// Slideshow 4
$("#slider4").responsiveSlides({
auto: true,
pager: true,
nav: true,
speed: 500,
namespace: "callbacks",
before: function () {
$('.events').append("<li>before event fired.</li>");
},
after: function () {
$('.events').append("<li>after event fired.</li>");
}
});
});
</script>
<!--End-slider-script-->
<!--about-starts-->
<div class="about">
<div align="center" > <a name="#1" id="#1"> <img src="images/ab.jpg" /> </a>
</div>
<br>
<div class="container">
<div class="about-top grid-1">
<div class="col-md-4 about-left">
<figure class="effect-bubba">
<a href="single.html" ><img class="img-responsive" src="images/12.jpg" alt=""/></a>
<figcaption>
<h4>劳力士</h4>
<p>IWC万国</p>
<p>适合中国高薪层身份的经典表</p>
</figcaption>
</figure>
</div>
<div class="col-md-4 about-left">
<figure class="effect-bubba">
<a href="single.html" ><img class="img-responsive" src="images/19.jpg" alt=""/></a>
<figcaption>
<h4>浪琴</h4>
<p>longines</p>
<p>浪琴女表是优雅迷人的都市女郎腕间饰品的最佳选择</p>
</figcaption>
</figure>
</div>
<div class="col-md-4 about-left">
<figure class="effect-bubba">
<a href="single.html" ><img class="img-responsive" src="images/17.jpg" alt=""/></a>
<figcaption>
<h4>百达翡丽</h4>
<p>Patek Philippe</p>
<p>复杂功能计时系列 5146R-001 机械男表 </p>
</figcaption>
</figure>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<!--about-end-->
<!--product-starts-->
<div class="product">
<h3> <a name="#2" id="#2">男士</h3>
<div class="container">
<div class="product-top">
<div class="product-one">
<div class="col-md-3 product-left">
<div class="product-main simpleCart_shelfItem">
<a href="single.html" class="mask"><img class="img-responsive zoom-img" src="images/p-1.png" alt="" /></a>
<div class="product-bottom">
<h3>男士手表</h3>
<p>立刻行动</p>
<h4><a class="item_add" href="#"><i></i></a> <span class=" item_price">$ 329</span></h4>
</div>
<div class="srch">
<span>-50%</span>
</div>
</div>
</div>
<div class="col-md-3 product-left">
<div class="product-main simpleCart_shelfItem">
<a href="single.html" class="mask"><img class="img-responsive zoom-img" src="images/31.jpg" alt="" /></a>
<div class="product-bottom">
<h3>男士手表</h3>
<p>立刻行动</p>
<h4><a class="item_add" href="#"><i></i></a> <span class=" item_price">$ 329</span></h4>
</div>
<div class="srch">
<span>-50%</span>
</div>
</div>
</div>
<div class="col-md-3 product-left">
<div class="product-main simpleCart_shelfItem">
<a href="single.html" class="mask"><img class="img-responsive zoom-img" src="images/32.jpg" alt="" /></a>
<div class="product-bottom">
<h3>男士手表</h3>
<p>立刻行动</p>
<h4><a class="item_add" href="#"><i></i></a> <span class=" item_price">$ 329</span></h4>
</div>
<div class="srch">
<span>-50%</span>
</div>
</div>
</div>
<div class="col-md-3 product-left">
<div class="product-main simpleCart_shelfItem">
<a href="single.html" class="mask"><img class="img-responsive zoom-img" src="images/33.jpg" alt="" /></a>
<div class="product-bottom">
<h3>男士手表</h3>
<p>立刻行动</p>
<h4><a class="item_add" href="#"><i></i></a> <span class=" item_price">$ 329</span></h4>
</div>
<div class="srch">
<span>-50%</span>
</div>
</div>
</div>
<div class="clearfix"></div>
</div>
<div class="product-one">
<div class="col-md-3 product-left">
<div class="product-main simpleCart_shelfItem">
<a href="single.html" class="mask"><img class="img-responsive zoom-img" src="images/34.jpg" alt="" /></a>
<div class="product-bottom">
<h3>男士手表</h3>
<p>立刻行动</p>
<h4><a class="item_add" href="#"><i></i></a> <span class=" item_price">$ 329</span></h4>
</div>
<div class="srch">
<span>-50%</span>
</div>
</div>
</div>
<div class="col-md-3 product-left">
<div class="product-main simpleCart_shelfItem">
<a href="single.html" class="mask"><img class="img-responsive zoom-img" src="images/35.jpg" alt="" /></a>
<div class="product-bottom">
<h3>男士手表</h3>
<p>立刻行动</p>
<h4><a class="item_add" href="#"><i></i></a> <span class=" item_price">$ 329</span></h4>
</div>
<div class="srch">
<span>-50%</span>
</div>
</div>
</div>
<div class="col-md-3 product-left">
<div class="product-main simpleCart_shelfItem">
<a href="single.html" class="mask"><img class="img-responsive zoom-img" src="images/36.jpg" alt="" /></a>
<div class="product-bottom">
<h3>男士手表</h3>
<p>立刻行动</p>
<h4><a class="item_add" href="#"><i></i></a> <span class=" item_price">$ 329</span></h4>
</div>
<div class="srch">
<span>-50%</span>
</div>
</div>
</div>
<div class="col-md-3 product-left">
<div class="product-main simpleCart_shelfItem">
<a href="single.html" class="mask"><img class="img-responsive zoom-img" src="images/37.jpg" alt="" /></a>
<div class="product-bottom">
<h3>男士手表</h3>
<p>立刻行动</p>
<h4><a class="item_add" href="#"><i></i></a> <span class=" item_price">$ 329</span></h4>
</div>
<div class="srch">
<span>-50%</span>
</div>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
<div class="product">
<h3> <a name="#3" id="#3">女士</h3>
<div class="container">
<div class="product-top">
<div class="product-one">
<div class="col-md-3 product-left">
<div class="product-main simpleCart_shelfItem">
<a href="single.html" class="mask"><img class="img-responsive zoom-img" src="images/41.jpg" alt="" /></a>
<div class="product-bottom">
<h3>女士手表</h3>
<p>立刻行动</p>
<h4><a class="item_add" href="#"><i></i></a> <span class=" item_price">$ 329</span></h4>
</div>
<div class="srch">
<span>-50%</span>
</div>
</div>
</div>
<div class="col-md-3 product-left">
<div class="product-main simpleCart_shelfItem">
<a href="single.html" class="mask"><img class="img-responsive zoom-img" src="images/42.jpg" alt="" /></a>
<div class="product-bottom">
<h3>女士手表</h3>
<p>立刻行动</p>
<h4><a class="item_add" href="#"><i></i></a> <span class=" item_price">$ 329</span></h4>
</div>
<div class="srch">
<span>-50%</span>
</div>
</div>
</div>
<div class="col-md-3 product-left">
<div class="product-main simpleCart_shelfItem">
<a href="single.html" class="mask"><img class="img-responsive zoom-img" src="images/43.jpg" alt="" /></a>
<div class="product-bottom">
<h3>女士手表</h3>
<p>立刻行动</p>
<h4><a class="item_add" href="#"><i></i></a> <span class=" item_price">$ 329<