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

吉林工程技术师范学院信息工程学院web前段开发技术课程设计 课程设计报告题 目： 电子商务网站 专 业： 软件工程 班 级： R1241班 姓 名： 学 号： 03 号 指导教师： 时 间： 摘 要电子商务如今已经深入到人们的生活当中，以前如果说是在网上购物，估计大家是不敢想的，而今，电子商务已然成为了人们生活重要的部分，我的设计就与电子商务有着不可分割的关系。在电子商务的背景下我做了一套花卉店铺的网页，整套网页主色调都是绿色，并包括主页，宝贝详情页等8个页面。整个网页的布局均采用css+div布局，可见代码都是用简单的html标签呈现，其中在宝贝详情页，提交支付页都运用了部分表格，和表单，本设计的主页用到了图片轮播，轮播是由JavaScript函数实现。关键字：电子商务、网页、美工目录一、课程设计的目的4二、设计方案的论证52.1、背景52.2、技术路线5三、设计实现过程63.1、概要设计63.2、详细代码7四、调试运行及结果分析10五、测试及问题探讨13六、课设总结与体会14七、致谢15八、参考文献16一、课程设计的目的在Internet飞速发展的今天，在互联网成为人们快速获取发布和传递信息的重要渠道，他在人们政治，经济、生活等各方面发挥着重要的作用。因此网站建设在Internet应用上地位是显而易见的，它已成为政府、企事业单位信息化剑圣中的重要组成部分，从而备受人们重视。我们当代大学生更是连月不开网络给我们带来的好处与便利。本课程设计的目的是通过实践使同学们经历网页制作的全过程，通过设计达到掌握网页设计、制作的技巧。了解和熟悉网页设计的基础知识和实现技巧，根据题目要求，给出网页设计方案，科技按要求，里哟更合适图文素材设计制作符合要求的网页设计作品。熟练掌握Dreamwearver的操作和应用。增强动手实践能力，进一步加强自身综合素质，逐渐培养做一个完整项目的能力。二、设计方案的论证2.1、背景随着计算机技术和通信技术的迅猛发展和日益普及，以Internet为代表的计算机网络已经从作出的军事、科研和教育专用网络逐步向全球化网络、商业化网络和大众化网络方向发展，逐渐成为人们工作、学习和生活的一个重要部分，并深深地改变着我们的学习、工作和生活方式。时至今日，人们已经很大程度上离不开网络。也因为网络商业化的原因，电子商务变得备受瞩目。2014年马云成为世界首富也表明了电子商务的时代已经到来。2.2、技术路线本设计运用Dreamweaver软件。主要是由html代码，其中包括cssdiv布局，jvascript脚本。此外，修改图片运用了Photoshop软件。三、设计实现过程3.1、概要设计我设计的电子商铺分为：首页，宝贝详情页面，关于我们页面，产品页面，联系我们页面，购物车页面，以及提交支付页面。在首页中插入了轮播图，列表，并用css布局，用JavaScript脚本实现部分功能和调试。在提交支付页面运用了表单，表格布局等。首页关于我们产品帮助联系我们图片宝贝详情加入购物车立即购买结算支付页面图3.1-1整体设计图3.2、详细代码首页列表代码： Free CSS Templates 首页 关于我们 产品 首页商品部分代码：div class=product_box 黄玫瑰花束 240元 购买 加入花篮 宝贝详情页部分代码： 价格: 240元 种类: 黄玫瑰 数量：关于我们页面代码： 小花篮 自由定制 每周优惠 柑橘爆花束 价 格: 160元   100元购物车页面代码： 产品分类 我的花篮 图片 合计价格 黄玫瑰 240元 移除 提交支付页面部分代码：核对信息账单明细 姓名 (必须与购物卡姓名相同)：地址:城市:小区:Email: 电话号码（非常重要):请仔细核对信息，以免给您带来不必要的麻烦 四、调试运行及结果分析首页的产品按钮，拖动鼠标可以看到一个下拉列表，这个使用普通列表实现，并且在首页有一个轮播图，轮播图是用函数和图片的插入进行实现的，实现结果如下图： 图4-1轮播图1图4-2 轮播图2列表实现结果如下图：图4-3 列表图在宝贝详情页面运用了购物车按钮，并利用了表单，表格等标签，实现结果如下图：图4-4 宝贝详情图购物车部分运用表单，表格布局，还有确认订单按钮，实现效果如下：图4-5购物车图在提交支付页面，涉及到的主要是表单，并且用表格布局，还有单选按钮，实现结果如下图：图4-6 提交支付界面图五、测试及问题探讨由于在这次的课程设计中多次运用表格，以至于在调节宽度跟高度还有边距时一直都不是很合适，调试了很多次，例如在宝贝详情页的加入购物车按钮，一开始没有放到我最想要的位置，在多次调整之后，终于放到了我想要的位置，例如这样的问题在提交页面和购物车页面都有出现。还有这次的首页轮播图，将函数调用之后居然没有反应，点鼠标也没有反应，结果最初的轮播图函数我没有用，后来的轮播图函数是借鉴网上的，插入自己的图片就可以用了。六、课设总结与体会通过这段时间的课程设计，我对HTML的应用，web前端的作用以及html语言的使用都有了更深的了解。尤其是html的进步让我深刻的感受到任何所学的知识都需要实践，没有实践就无法真正理解这些知识以及掌握它们，使其成为自己的财富。在理论学习和上机实践的各个环节中，通过自主学习和请教老师，我收获了不少。当然也遇到不少的问题，也正是因为这些问题引发的思考给我带了收获。从当初不喜欢上机做网页到现在能主动做网页，从当初拿着题不知如何下手到现在知道如何分析问题，如何用专业知识解决实际问题的转变，我发现无论是专业知识还是动手能力，自己都有很大程度的提高。在这段时间里，在老师的指导帮助下，同学们课余时间的讨论中，很对问题都一一得到了解决。在程序的调试能力上，无形中得到了许多的提高。七、致谢在这次课程设计中，我要感谢我的课程设计老师帮助我完成了这次的课程设计，在许多技术性的问题上给予我帮助，在设计过程中给了我很多的意见和建议，在调试的时候也帮助我，把一些不晚上的想法完善了。还有，我要感谢我的同学们，在最早的选题时，都是同学们帮助我，给了我很多建议。最后我要感谢我的学校，给我们提供了一个良好的课程设计环境，在这次课设中我