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

1、二、设计方案的论证52. 1背景52.2、技术路线5三、设计实现过程63. 1概要设计63.2、详细代码7四、调试运行及结果分析10五、测试及问题探讨13六、课设总结与体会14七、致谢15八、参考文献16一、课程设计的目的在Internet飞速发展的今天，在互联网成为人们快速获取发 布和传递信息的重要渠道，他在人们政治，经济、生活等各方面 发挥着重要的作用。因此网站建设在Internet应用上地位是显而 易见的，它已成为政府、企事业单位信息化剑圣中的重要组成部 分，从而备受人们重视。我们当代大学生更是连月不开网络给我 们带来的好处与便利。本课程设计的目的是通过实践使同学们经 历网页制作的全过程

2、，通过设计达到掌握网页设计、制作的技巧。了解和熟悉网页设计的基础知识和实现技巧，根据题目要求, 给出网页设计方案，科技按要求，里哟更合适图文素材设计制作 符合要求的网页设计作品。熟练掌握Dreamwearver的操作和应用。 增强动手实践能力，进一步加强自身综合素质，逐渐培养做一个 完整项目的能力。二、设计方案的论证2. 1、背景随着计算机技术和通信技术的迅猛发展和日益普及，以 Internet为代表的计算机网络已经从作出的军事、科研和教育专 用网络逐步向全球化网络、商业化网络和大众化网络方向发展， 逐渐成为人们工作、学习和生活的一个重要部分，并深深地改变 着我们的学习、工作和生活方式。时至今

3、日，人们已经很大程度 上离不开网络。也因为网络商业化的原因，电子商务变得备受瞩 目。2014年马云成为世界首富也表明了电子商务的时代已经到 来。2. 2、技术路线本设计运用Dreamweaver软件。主要是由html代码，其中包 括css+div布局,jvascript脚本。此夕卜，修改图片运用了 Photoshop 软件。三、设计实现过程3.1、概要设计我设计的电子商铺分为：首页，宝贝详情页面，关于我们页 面，产品页面，联系我们页面，购物车页面，以及提交支付页面。 在首页中插入了轮播图，列表，并用CSS布局，用JavaScript 脚本实现部分功能和调试。在提交支付页面运用了表单，表格布 局

4、等。图3.1-1整体设计图3.2、详细代码templatemo_header_whtemplatemo_header class=header_homesite_titlea href= rel=nofollowFree CSSTemplates/divtemplatemo_menuddsmoothmenuulliindex.htmlselected首页about.html关于我们products.html产品 首页商品部分代码：div class=product_boxproductdetail.htmlimg src=images/product/01.jpg alt=floral set

5、 1 /h5黄玫瑰花束p class=product_price240 元add_to_cart购买shoppingcart.html加入花篮trtd width=132价格:/td82/trtd种类:strong黄玫瑰数量：input type=text value=1size=6 maxlength=2/table关于我们页面代码：contentul class=sidebar_list#小花篮自由定制h3每周优惠content specialimages/templatemo_image_01.jpgalt=Flowers柑橘爆花束p 价 格 :price normal_price160

6、 元 price special_price100 元购物车页面代码：产品分类我的花篮table width=700 border=0 cellpadding=5 cellspacing=tr bgcolor=#395015th width=168 align=left图片80合计价格64#41581Bflower image1td align=centerinput name=quantity1 type=id= size= br /移除提交支付页面部分代码：核对信息账单明细请仔细核对信息， 以免给您带来不必要的麻烦四、调试运行及结果分析首页的产品按钮，拖动鼠标可以看到一个下拉列表

7、，这个使 用普通列表实现，并且在首页有一个轮播图，轮播图是用函数和 图片的插入进行实现的，实现结果如下图：图4-1轮播图1图4-2轮播图2列表实现结果如下图:图4-3列表图在宝贝详情页面运用了购物车按钮，并利用了表单，表格等标签，实现结果如下图:图4-4宝贝详情图购物车部分运用表单，表格布局，还有确认订单按钮，实现效果如下:图4-5购物车图在提交支付页面，涉及到的主要是表单，并且用表格布局, 还有单选按钮，实现结果如下图:五、测试及问题探讨由于在这次的课程设计中多次运用表格，以至于在调节宽度 跟高度还有边距时一直都不是很合适，调试了很多次，例如在宝 贝详情页的加入购物车按钮，一开始没有放到我最想要的位置， 在多次调整之后，终于放到了我想要的位置，例如这样的问题在 提交页面和购物车页面都有出现。还有这次的首页轮播图，将函数调用之后居然没有反应，点 鼠标也没有反应，结果最初的轮播图函数我没有用，后来的轮播 图函数是借鉴网上的，插入自己的图片就可以用了。六、课设总结与体会通过这段时间的课程设计，我对HTML的应用，web前端的作 用以及html语言的使用都有了更