《web前段开发技术课程设计》课程设计报告-电子商务网站Word下载.docx

《web前段开发技术课程设计》课程设计报告-电子商务网站Word下载.docx

《《web前段开发技术课程设计》课程设计报告-电子商务网站Word下载.docx》由会员分享，可在线阅读，更多相关《《web前段开发技术课程设计》课程设计报告-电子商务网站Word下载.docx（16页珍藏版）》请在冰豆网上搜索。

二、 设计方案的论证 5

2.1 背景 5

2.2、 技术路线 5

三、 设计实现过程 6

3.1 概要设计 6

3.2、 详细代码 7

四、 调试运行及结果分析 10

五、 测试及问题探讨 13

六、 课设总结与体会 14

七、 致谢 15

八、 参考文献 16

一、课程设计的目的

在Internet飞速发展的今天，在互联网成为人们快速获取发布和传递信息的重要渠道，他在人们政治，经济、生活等各方面发挥着重要的作用。

因此网站建设在Internet应用上地位是显而易见的，它已成为政府、企事业单位信息化剑圣中的重要组成部分，从而备受人们重视。

我们当代大学生更是连月不开网络给我们带来的好处与便利。

本课程设计的目的是通过实践使同学们经历网页制作的全过程，通过设计达到掌握网页设计、制作的技巧。

了解和熟悉网页设计的基础知识和实现技巧，根据题目要求,给出网页设计方案，科技按要求，里哟更合适图文素材设计制作符合要求的网页设计作品。

熟练掌握Dreamwearver的操作和应用。

增强动手实践能力，进一步加强自身综合素质，逐渐培养做一个完整项目的能力。

二、设计方案的论证

2.1、背景

随着计算机技术和通信技术的迅猛发展和日益普及，以Internet为代表的计算机网络已经从作出的军事、科研和教育专用网络逐步向全球化网络、商业化网络和大众化网络方向发展，逐渐成为人们工作、学习和生活的一个重要部分，并深深地改变着我们的学习、工作和生活方式。

时至今日，人们已经很大程度上离不开网络。

也因为网络商业化的原因，电子商务变得备受瞩目。

2014年马云成为世界首富也表明了电子商务的时代已经到来。

2.2、技术路线

本设计运用Dreamweaver软件。

主要是由html代码，其中包括css+div布局,jvascript脚本。

此夕卜，修改图片运用了Photoshop软件。

三、设计实现过程

3.1、概要设计

我设计的电子商铺分为：

首页，宝贝详情页面，关于我们页面，产品页面，联系我们页面，购物车页面，以及提交支付页面。

在首页中插入了轮播图，列表，并用CSS布局，用JavaScript脚本实现部分功能和调试。

在提交支付页面运用了表单，表格布局等。

图3.1-1整体设计图

3.2、详细代码

<

divid="

templatemo_wrapper_h"

>

templatemo_header_wh"

templatemo_header"

class="

header_home"

site_title"

ahref="

"

rel="

nofollow"

FreeCSS

Templates<

/a>

/div>

templatemo_menu"

ddsmoothmenu"

ul>

li>

index.html"

selected"

首页<

/li>

about.html"

关于我们<

products.html"

产品<

<

/ul>

首页商品部分代码：

divclass="

product_box"

productdetail.html"

imgsrc="

images/product/01.jpg"

alt="

floralset1"

/>

h5>

黄玫瑰花束<

/h5>

pclass="

product_price"

240元<

/p>

add_to_cart"

购买<

shoppingcart.html"

加入花篮<

宝贝详情页部分代码：

content_halfleft"

arel="

lightbox"

href="

images/product/image_01_l.jpg"

images/product/image_01.jpg"

yellowflowers"

首页列表代码：

content_halfright"

table>

tr>

tdwidth="

132"

价格:

/td>

82"

/tr>

td>

种类:

strong>

黄玫瑰<

/strong>

数量：

inputtype="

text"

value="

1"

size="

6"

maxlength="

2"

/table>

关于我们页面代码：

content"

ulclass="

sidebar_list"

#"

小花篮<

…

自由定制<

sidebar_box"

spanclass="

bottom"

/span>

h3>

每周优惠<

/h3>

contentspecial"

images/templatemo_image_01.jpg"

alt="

Flowers"

柑橘爆花束

p>

价格:

pricenormal_price"

160元

&

nbsp;

pricespecial_price"

100元<

购物车页面代码：

产品分类<

right"

h2>

我的花篮<

/h2>

tablewidth="

700"

border="

0"

cellpadding="

5"

cellspacing="

trbgcolor="

#395015"

thwidth="

168"

align="

left"

图片<

/th>

80"

合计价格<

64"

#41581B"

flowerimage1"

tdalign="

center"

inputname="

quantity1"

type="

id="

size="

…<

images/remove.png"

remove"

/>

br/>

移除<

提交支付页面部分代码：

核对信息<

账单明细<

content_halfleftform_field"

姓名（必须与购物卡姓名相同）：

fullname"

id="

40"

地址:

address"

城市:

city"

小区:

country"

content_halfrightform_field"

Email:

inputname="

email"

type="

textid="

maxlength="

电话号码（非常重要）:

phone"

span>

请仔细核对信息，以免给您带来不必要的麻烦<

四、调试运行及结果分析

首页的产品按钮，拖动鼠标可以看到一个下拉列表，这个使用普通列表实现，并且在首页有一个轮播图，轮播图是用函数和图片的插入进行实现的，实现结果如下图：

图4-1轮播图1

图4-2轮播图2

列表实现结果如下图:

图4-3列表图

在宝贝详情页面运用了购物车按钮，并利用了表单，表格等

标签，实现结果如下图:

图4-4宝贝详情图

购物车部分运用表单，表格布局，还有确认订单按钮，实现

效果如下:

图4-5购物车图

在提交支付页面，涉及到的主要是表单，并且用表格布局,还有单选按钮，实现结果如下图:

五、测试及问题探讨

由于在这次的课程设计中多次运用表格，以至于在调节宽度跟高度还有边距时一直都不是很合适，调试了很多次，例如在宝贝详情页的加入购物车按钮，一开始没有放到我最想要的位置，在多次调整之后，终于放到了我想要的位置，例如这样的问题在提交页面和购物车页面都有出现。

还有这次的首页轮播图，将函数调用之后居然没有反应，点鼠标也没有反应，结果最初的轮播图函数我没有用，后来的轮播图函数是借鉴网上的，插入自己的图片就可以用了。

六、课设总结与体会

通过这段时间的课程设计，我对HTML的应用，web前端的作用以及html语言的使用都有了更