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

Ajax课程设计报告

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

目录
引言 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 Commerce，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</span></h4>
</div>
<div class="srch">
<span>-50%</span