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

吉林工程技术师范学院 信息工程学院 电子商务如今已经深入到人们的生活当中，以前如果说是在网上购物，估计大家是不敢想的，而今，电子商务已然成为了人们生活重要的部分，我的设计就与电子商务有着不可分割的关系。 在电子商务的背景下我做了一套花卉店铺的网页，整套网页主色调都是绿色，并包括主页，宝贝详情页等8个页面。 整个网页的布局均采用css+div布局，可见代码都是用简单的html标签呈现，其中在宝贝详情页，提交支付页都运用了部分表格，和表单，本设计的主页用到了图片轮播，轮播是由JavaScript函数实现。 关键字：电子商务、网页、美工 目录 一、课程设计的目的 4 二、设计方案的论证 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、详细代码 首页列表代码： div id templatemo_wrapper_h div id templatemo_header_wh div id templatemo_header class header_home div id site_title a href rel nofollow Free CSS Templates div id templatemo_menu class ddsmoothmenu a href index.html class selected 首页 a href about.html 关于我们 a href products.html 产品 首页商品部分代码： div class product_box a href productdetail.html img src images/product/01.jpg alt floral set 1 / 黄玫瑰花束 p class product_price 240元 p class add_to_cart a href productdetail.html 购买 a href shoppingcart.html 加入花篮 div class product_box 宝贝详情页部分代码： div class content_half left a rel lightbox href images/product/image_01_l.jpg img src images/product/image_01.jpg alt yellow flowers / div class content_half right td width 132 价格: td width 82 240元 种类: 黄玫瑰 数量： input type text value 1