1、毕 业 设 计 书爱淘电子商城网页设计姓 名： 李健 学 号： 130108117 所 在 系： 计算机信息工程系 班 级： 13 软件技术（2）班 指导教师： 林岚 2015 年 01 月 10 日II目录任 务 书 III评审情况 V答辩记录 .VI中文摘要 VII爱淘电子商城网页设计 11 电子商务概况 11.1 电子商务系统的概述 .11.2 电子商务系统的发展 .11.3 电子商城系统的现状 .11.4 电子商城系统的构建 .22 设计说明 32.1 系统架构 .32.2 功能模块 .32.3 设计思路 .43 系统详细设计 53.1 样式文件 .53.2 注册界面 113.3 登陆
2、界面 143.4 商品界面 173.5 下订单界面 253.6 购物车 253.7 收藏页 253.8 用户个人信息管理 253.9 卖家管理页 253.10 添加商品页 .25致谢 .25参考文献 .25III任 务 书一、毕业设计题目网 上 商 城 网 页 设 计二、主要内容结合 HTML5、JavaScript 和 CSS 技术，用 Dreamweaver 开发设计一个以服饰为主的电子商城静态网站。访客进入该网站就可以浏览到最流行的服饰、鞋靴、运动户外用品等商品信息。电子商务网站是模仿拍拍网设计的，系统包括首页、商品搜索页、商品详细信息页、用户注册、用户基本信息页、购物车页、购买信息页、
3、历史订单查询页、商品收藏页、后台商品信息页十个页面。三、完成功能项目网页主要分为一级页面（即首页） 、二级页面、三级页面这三大主要部分，具体包括以下十个页面：1.商城首页：显示商品快讯、畅销列表、促销列表；2.商品搜索页：对用户提供商品查询；3.用户注册页：会员注册；4.用户基本信息页：显示用户以往的订单记录；5.商品详细信息页：显示详细的商品信息和商品评论，用户可以将该商品加入购物车，并对商品进行评论。6.购物车页：显示商品的购物车列表；7.购买信息页：填写收货人信息，支付及配送方式；8.历史订单查询页：显示用户以往的订单记录；9.收藏夹页：显示收藏夹的宝贝；10.后台商品信息页：显示当前待
4、配送的商品和用户信息的列表，在此页面中可将待配送的信息添加到该配送员正在处理的配送列表中。四、主要使用的开发工具与方法1.开发工具1） DreamweaverIV2） 美图秀秀3） Photoshop2.方法先在 photoshop 中设计好网页大概的界面布局，再在 Dreamweaver 里面编写代码，并存为类型为 html 的文件，然后在浏览器上面运行。五、推荐参考资料1. CSS+DIV 从入门到精通2. JavaScript 基础教程（第 7 版） ，美Tom Negrino、Dori Smith 著，人民邮电出版社3. Dreamweaver CS4 多媒体教学经典教程，清华大学出版
5、社，北京交通大学出版社4. W3school 在线教程，http:/ 第一阶段（1 周2 周）：确定分组，明确设计任务，并进行需求调研和分析，并进行页面布局设计； 第二阶段（3 周4 周）：进行总体设计，并开始设计界面和编码，其中包含 css 编写以及 js 脚本采集和修改； 第三阶段（5 周6 周）：网站整合、调试； 第四阶段（7 周8 周）：撰写论文； 答辩时间：待定。七、注意事项1 按时按质完成每一周的任务；2 离开学校的同学应保持与在校组员及指导老师的联系；3 按时按质上交论文V评审情况指导教师评语成绩评定 指导教师签名 职称 评阅人意见评阅成绩评定 评阅人签名 答辩小组意见 答辩成绩
6、 总评成绩 答辩组长签名 VI答辩记录VII中文摘要伴随着 Internet 的蓬勃发展，电子商城作为电子商务的一种形式正以其高效、低成本的优势，逐步成为新兴的经营模式和理念，人们已经不再满足用途信息的浏览和发布，而是渴望着能够充分享受网络所带来的更多的便利。电子商城正适应了当今社会快节奏地生活，使顾客足不出户便可以方便快捷轻松地选购自己喜欢的商品。 本网站是用 dreamweaver 在网络上架构的一个静态的电子商务网站.其中运用了HTML、CSS、JavaScript 等技术。关键词：电子商务网站；静态网页设计；HTML；CSS；javascript爱淘电子商城网页设计1爱淘电子商城网页设
7、计1 电子商务概况1.1 电子商务系统的概述 电子商务系统是保证以电子商务为基础的网上交易实现的体系。网上交易的信息沟通是通过数字化的信息渠道实现的，交易双方必须拥有相应的信息技术工具。为保证交易双方进行等价交换，必须提供相应的货物配送与支付结算手段。此外，为保证企业、组织与消费者能够利用数字化沟通渠道，保证交易能顺利进行配送与支付，需要由专门提供服务的中间商参与，即需要电子商务服务商。 1.2 电子商务系统的发展 随着 Internet 的迅猛发展，电子商务已逐渐走向千家万户，它已经开始影响人们的日常生活的各个方面，同时我们也开始意识到其中蕴含的巨大商机及商业价值，并开始投身于电子商务活动。
8、电子商务可以通过 IE 浏览器，实现消费者的网上购物，卖家及中介人之间的交易，它是在线网银支付的一种新型商业运营模式。电子商务是网络技术应用的全新发展方向。Internet 本身所具有的开放性、全球性、低成本、高效率的特点，也成为电子商务的内在特征，并使得电子商务大大超越了作为一种新的贸易形式所具有的价值。它不仅会改变企业本身的生产、经营、管理活动，而且将影响到整个社会的经济运行与结构。电子商城的崛起对传统的购物方式体系产生了强烈的冲击，有效地缩短了货物发行环节，将广大消费者和营销商紧密地结合在一起，大大提高了物质流通率。本电子商务系统的设计目标是建立一个类似于京东商城，亚马逊这些自营商品的购
9、物网站。京东商场这种购物方式是未来网购的趋势，全部商品都是自己在卖。用户不会担心有低素质的卖家出现。不会出现卖家素质不齐，假货等现象。客户可以放心地在本系统中浏览和购买心仪的正品商品。1.3 电子商城系统的现状无论在国内还是在国外，电子商务都还处于起步阶段。最近几年电子商务得到了迅速的发展。尽管各个国家具体情况不同，但是基于对国家经济发展的预测，各国政府都很重视电子商务，并且积极地发展电子商务。 爱淘电子商城网页设计2在发达国家，电子商务的发展非常迅速，通过 Internet 进行交易己成为一种潮流。基于电子商务所连带出的商品交易方案、电子结账方案和信息安全方案等，已逐步成为国际信息技术市场竞
10、争的焦点。随着电子商务的日益发展，产生了虚拟银行、网络营销、网上购物、网络广告等新兴信息产业，从侧面反应了电子商务正在对社会和经济产生着深刻的影响。 在电子商务过程中，通过人与电子通讯方式的结合，极大地提高了商务活动的效率，减少了不必要的中间环节。同时，电子商务的发展也将转变政府的行为。在电子商务逐渐变的流行的时代里，当企业应用电子商务进行经营，银行实现金融电子化，以及消费者实现网上消费的同时，也将对政府管理行为提出新的要求，国外在这方面有很好的法律法规加以约束，防止商业欺诈行为。国内在这方面做的就没有国外的好，没有一定的规范加以约束，我们经常可以看到一些消费者在网上购买的东西和实际不一样，发
11、现上当后我们也无能为力。1.4 电子商城系统的构建该电子商城系统是基于 WEB 开发的，以构建网上电脑产品购物网站为目标，由前台购物、后台管理两大部分组成。 电子商城系统主要实现用户注册、用户登录、分类浏览商品、查看商品介绍、购物车、在线购买、浏览新闻公告、商品的投诉以及商品管理、新闻公告管理、投诉管理，会员管理等功能。 根据这些功能要求，将整个系统分为两大部分：一部分是前台管理部分，包括用户登录、分类浏览，购买商品，在线支付等；另一部分是后台管理部分，这部分功能必须通过管理员身份验证才能使用，包括商品管理、新闻管理、商品投诉管理和会员管理，客户也可以通过论坛来提出意见和建议。电子商城系统就是
12、要通过方便快捷的功能、简洁明了的界面、完善的后台管理来满足服客户的需要。 爱淘电子商城网页设计32 设计说明2.1 系统架构首页商品展示页注册页 个人中心商品购买页购物车订单页收藏页 卖家：商品管理添加商品商品详细信息修改与删除商品2.2 功能模块（1） 用户注册提供新用户注册功能。尚未注册的用户只能享受浏览功能，注册后的账户可以成为会员，登陆后新增购买商品等功能。（2） 用户登陆如果用户已经注册为本网站的会员，便可以通过登录来使用购物的相关车功能并通过提交订单完成最后的付款。会员可以通过个人账户来修改自己的信息，可以查看自己购物车中已有的商品。（3） 个人数据设置会员可以进入个人账户修改自己
13、已经注册的信息，包括用户名，密码，电话，身份证号等等所有信息。会员还可以通过此页面查看自己已经添加到购物车中的商品。（4） 商品界面用户可以通过首页或者任何包含商品的购买链接来浏览商品库中的所有商品，如果有意购买可以直接点击加入购物车按钮进入加入购物车的相关页面。商品展示页面显示商品的产品名称、产品类别、产品所在地、产品主要图片、爱淘电子商城网页设计4折扣信息、单价、库存和相关评论。 （5） 下订单界面会员购买商品后会形成订单，里面包含商品的信息，会员可以获得购买商品的凭证。在确认收货以后还可以对商品做出一个评价。购物车用户的购物车页面，用户点击商品页面的加入购物车按钮可以将商品添加至购物车。
14、此页亦为提交订单的页面，倘若用户对其购买的商品确认无误，便可以提交订单付款。若想删除购物车中的商品，只需点击相应商品后的移除购物车按钮便可以实现上述操作。（6） 收藏页会员可以对感兴趣的商品做收藏管理，可以点击商品界面的加入收藏夹，以便于日后购买。（7） 用户个人信息管理会员可以进入个人账户修改自己已经注册的信息，包括用户名，密码，电话，邮箱，所在地等所有信息。（8） 卖家管理页会员可以通过申请网店来成为卖家。卖家可以通过此网页管理自己所出售的商品，可以对商品进行修改，也可以新增自己所出售的商品。（9） 添加商品页卖家可以同过点击卖家管理面的添加商品按钮来添加商品，卖家需要填写商品的详细信息，
15、包括种类，价格，图片，物流等等。2.3 设计思路LOGO 设计来源于本网页是购物网站，便以一个淘字体现出用户在本网站购买商品的动作，再以一个爱字表达出很多游客都喜欢来本网站购物。整个网站以红色为主调，红色代表活力，以提升用户的购买欲望。再以浅灰色，浅蓝色等做副色，形成反差大而不刺眼，可以非常有效的突出商品。爱淘电子商城网页设计53 系统详细设计3.1 样式文件基本样式：* padding: 0;margin: 0;outline: 0;font-style: normal;body background: #fff url(images/body.gif) repeat-x 0 0;font-
16、family: “Trebuchet MS“, Arial, sans-serif;font-size: 12px;line-height: 20px;color: #636363;input, textarea, select font-family: “Trebuchet MS“, Arial, sans-serif; font-size:12px; a img border:0; a color:#8b0000; text-decoration: underline; cursor:pointer; a:hover color:#666; text-decoration: none; h
17、2 font-size:14px; line-height:16px; h3 font-size:12px; line-height:14px; text-transform: uppercase; color:#000; h4 font-size:12px; line-height:14px; text-transform: uppercase; color:#000; h1#logo font-size:0; line-height:0; width:156px; height:64px; float:left; h1#logo a display:block; height:64px;
18、text-indent: -4000px; background:url(images/logo.gif); .left, .alignleft float:left; display:inline; .right, .alignright float:right; display:inline; .field background:#ebebeb; border:solid 1px #dedede; padding:2px;.cl font-size:0; line-height:0; clear:both; display:block; height:0; .al text-align:
19、left; .ar text-align: right; .ac text-align: center; .shell width:960px; margin:0 auto; padding:10px; background:#fff; #slider-big width:720px; height:252px; #slider-big-1width:100%; #slider-big-2width:100%; .cols padding:15px 0;.col float:left; display:inline; width:217px; margin-right:30px;爱淘电子商城网
20、页设计6.col-last margin-right:0;标签 Id 为 header （#header）的为网页导航部分（头部）：#header height:64px; background:url(images/header.gif); position:relative;#navigation float:right; white-space:nowrap; #navigation ul list-style-type: none; height:64px; font-weight: bold; float:left;#navigation ul li float:left; disp
21、lay:inline; #navigation ul li a float:left; height:64px; line-height:64px; text-decoration: none; color:#fff; padding:0 15px;#navigation ul li a.active,#navigation ul li a:hover background:#fff; color:#8b0000; #cart float:right; width:160px; top:0; right:0; height:51px; background:#8b0000; color:#ff
22、f; padding:13px 10px 0 10px; white-space:nowrap; line-height:20px;a.cart-link color:#fff; background:url(images/cart-link.gif) no-repeat 0 0; padding:0 0 0 32px; text-decoration: none;a.cart-link:hover text-decoration: underline;标签 Id 为 footer （# footer）的为网页版权部分（底部）：#footer height:51px; background:#
23、ebebeb; white-space:nowrap; line-height:50px; padding:0 15px; color:#7b7b7b; margin-top:10px;#footer a color:#7b7b7b; text-decoration: none;#footer a:hover color:#000;#footer span padding:0 2px;标签 Id 为 main(#main)为首页样式：#sidebar float:left; width:226px; /* 首页总体左部 */#content float:right; width:724px;
24、/* 首页总体右部 */#main padding:10px 0 0 0; .box padding:1px; border:solid 1px #dedede; margin-bottom:10px;.box h2 background:#7f7f7f; color:#fff; font-weight: normal; padding:0 5px; position:relative; height:27px; line-height:27px; .box h2 span position:absolute; width:10px; height:5px; background:url(im
25、ages/h2-arr.gif); top:27px; right:10px; font-size:0; line-height:0;.box-content padding:5px;a.bul background:url(images/bul.gif) no-repeat 0 center; padding-left:10px;.search min-height:252px;.search label display:block; padding-bottom:3px; .search .field display:block; margin-bottom:10px; .search .
26、inline-field label display:inline; padding:0; .search .inline-field .field display:inline; margin:0; .search input.field width:206px; .search select.field width:212px; .search select.small-field width:50px; 爱淘电子商城网页设计7.search-submit width:70px; background:#8b0000; border:0; color:#fff; height:27px;
27、display:block; line-height:26px; cursor:pointer; margin:12px 0 10px 0;.categories min-height:383px; .categories ul list-style-type: none; font-size:13px;.categories ul li border-bottom:dashed 1px #ccc; padding:5px 0;.categories ul li.last border-bottom:0; padding-bottom:0;.categories ul li a color:#
28、5f5f5f; text-decoration: none; background:url(images/cat.gif) no-repeat 0 4px; padding-left:17px;.categories ul li a:hover color:#8b0000; #slider height:252px; position:relative; overflow:hidden; #slider-holder width:720px; height:252px; position:relative; overflow:hidden; #slider-holder .jcarousel-
29、clip width:720px; height:252px; position:relative; overflow:hidden; #slider-holder ul width:720px; height:252px; position:relative; overflow:hidden; list-style-type: none;#slider-holder ul li width:720px; height:252px; position:relative; overflow:hidden; float:left; #slider-nav position:absolute; to
30、p:231px; left:644px; z-index:2;#slider-nav a font-size:0; line-height:0; text-indent: -4000px; width:10px; height:10px; border:solid 1px #8b0000; background:#8b0000; float:left; margin-right:5px; #slider-nav a:hover,#slider-nav a.active background:#fff;.products .products ul list-style-type: none;.p
31、roducts ul li position:relative; padding:1px; border:solid 1px #dedede; float:left; width:231px; margin-right:9px; height:383px; overflow:hidden; .products ul li.last margin-right:0; .product-info position:absolute; width:153px; top:194px; left:0;.product-info h3 background:#8b0000; color:#fff; padd
32、ing:6px 10px; .product-info h4 font-weight: normal;.product-info p font-size:16px; line-height:18px; text-transform: uppercase; font-weight: bold; color:#000; padding:5px 0 7px 0;.product-info .product-desc padding:10px; background:url(images/info.png); width:133px; .price display:block; font-size:2
33、1px; color:#8b0000; line-height:23px; .more-products border:solid 1px #dedede; position:relative; height:114px; overflow:hidden; .more-products ul list-style-type: none; height:94px; position:relative; overflow:hidden; width:805px;.more-products ul li float:left; width:94px; height:94px; border-righ
34、t:dashed 1px #ccc; padding:0 10px;.more-products ul li.last border-right:0; 爱淘电子商城网页设计8.more-products-holder width:804px; height:94px; position:relative; overflow:hidden; top:10px; left:70px;.more-products-holder .jcarousel-clip width:804px; height:94px; position:relative; overflow:hidden; .more-nav
35、 font-size:0; line-height:0;.more-nav a position:absolute; top:40px; left:0; width:30px; height:32px; text-indent: -4000px; z-index:3;.more-nav a.next background:url(images/next.gif); left:910px;.more-nav a.prev background:url(images/prev.gif); left:20px;样式为 reg（.reg）定义了信息填写的列表（注册、登录、添加商品等都用到）：.reg
36、list-style-type:none;.reg li margin:5px;.reg li label display:inline-block; width:100px; text-align:right;.reg input width:170px; height:25px; margin-right:5px;And#main .reg li .f vertical-align:top;#main .reg li .fx display:inline-block; width:600px; background:#E7E7E7; border:1px solid #CCC;#main
37、.reg li .fx div padding:10px;#main .reg li .fx span padding:10px;标签 Id 为 go_xx（#go_xx）为商品信息：.both display:inline-block; vertical-align:top; min-height:70px;.fon width:200px; margin-right:10px;.gimg img width:70px;#go_xx display:inline-block;#go_xx .left text-align:left;#go_xx .big width:380px; heigh
38、t:350px; border:1px solid #CCC;#go_xx .left ul margin-top:10px;#go_xx .left ul li float:left; margin-left:10px;#go_xx .left li img width:70px;#go_xx .right margin-left:20px;#go_xx .right ul width:500px; list-style:none;#go_xx .right li word-wrap:break-word; word-break:normal; line-height:15px;#go_xx
39、 .right h3 padding:5px;#go_xx .right li clear:both;#go_xx .right li dl height:40px; color:#666;#go_xx .right li dt,dd float:left; padding:5px 0; line-height:30px; margin:0 10px 0 0; width:50px; color:#666;#go_xx .right li dd width:400px; margin:0; #go_xx .mone color:#900; font-size:14px; font-weight
40、:bold; 爱淘电子商城网页设计9#go_xx .right li dd img width:40px; margin-right:5px;#go_xx .right li dd button width:120px; height:30px; margin-right:5px;#go_xx .right .kuang padding:10px 0 10px 0; border-top:1px dashed #CCC; border-bottom:1px dashed #CCC; width:480px;#go_xx .right .kuang span padding:0 52px; bo
41、rder-right:1px dashed #CCC;标签 Id 为 com（# com）为评论信息：#com margin-top:10px;#f padding:10px 0; border:1px solid #999; text-align:center;#com .fdiv display: inline-block; vertical-align: top; padding:0 6px; word-wrap:break-word; word-break:normal;#f .alxf width:900px; text-align:left;#f .xf text-align:ce
42、nter; width:75px; padding:5px 20px;#f .both max-width:700px; border-left:1px dashed #ccc; padding-left:15px;#f .both span padding:2px 10px; display:inline-block; border:1px solid #ccc; box-shadow: 1px 1px 2px #CCC; margin:0 10px 8px 10px;.comu width:100%; padding:10px 0; border-bottom:1px solid #ccc
43、;.comu vertical-align:middle;标签 Id 为 car（# car）为购物车列表：#car margin:5px 0;#car ul list-style-type:none; margin:10px;#car li display:inline-block; vertical-align:top; min-height:20px; min-width:100px;#car #goods border:1px solid #CCC;#car #goods inputtype=number width:50px; text-align:center; #car #goo
44、ds ul:not(:last-child) border-bottom:1px dashed #ccc;#car li .gmes width:393px; margin-left:75px;#car a text-decoration:none; color:#000;#car a:hover text-decoration:underline; color:#933;#car .tex-right text-align:right; margin:10px 0; background:#D8D8D8; padding:10px;#car .tex-right span margin:5p
45、x 20px; overflow:hidden; color:#000;#car .tex-right b color:#900; font-size:14px;标签 Id 为 order（# order ）为订单列表：#order margin:5px 0;#order ul list-style-type:none;min-height:30px;#order ul li display:inline-block; vertical-align:top; min-width:120px; text-align:center; padding:10px 0;#order ul li:firs
46、t-child width:300px;#order #goods .kuang margin-top:5px; border:1px solid #CCC;#order span margin:0 25px;#order a text-decoration:none; color:#666;#order a:hover text-decoration:underline; color:#933;爱淘电子商城网页设计10#order .gme li p:first-child text-decoration:line-through; color:#CCC;标签 Id 为 append（# a
47、ppend）为添加商品的搜索：#append width:95%; margin:5px auto;#append li display:inline-block;#appenddiv margin:10px 0;#append .seach background-color:#099; text-align:center; padding:10px 0; color:#333;#append .box max-height: 100px; padding: 3px; outline: 0; border: 1px solid #a0b3d6; width:200px;font-size: 1
48、2px; word-wrap: break-word; overflow-x: hidden; overflow-y: auto; text-align:left;#append .boxdiv:hover box-shadow:0px 2px 0px #999; cursor:pointer;#append .box i float:right; Js/jquery：$(function()var clos;var clos2;$(“#append ul li:not(:first-child)“).hide();$(“#append .boxdiv“).click(function()$(this).css(box-shadow:0px 2px 0px #930,color:red).siblings().css(box-shadow:,color:#636363
