1、第 1 页 （共 22 页）本科毕业论文（20 届）汽车销售网站的设计与实现网页前端与网站功能测试 所在学院专业班级 信息与计算科学学生姓名指导教师完成日期第 2 页 （共 22 页）汽车销售网站的设计与实现网页前端与网站功能测试 摘 要：随着社会的进步，科学技术也进行了飞速的发展，网络已经成为了人们在日常生活中不可缺少的一部分。网络给人们的生活带来了方便、快捷，人们越来越想在方便的时间购买到自己心仪的商品，逛实体店又会很累，于是，网上购买汽车便成了人们向往的事情。网页前端页面是在 Dreamweaver 平台上，用 HTML 语言编写内容、DIV+CSS 实现布局。在编写代码时把握层级简单清
2、晰、标签使用规范、文件命名规范、注释恰到好处等原则。用功能测试的方法对本网站整体功能进行了测试，使其能满足用户需求。 关键词：电子商务；汽车销售网；网页前端；测试Abstract：With the development of science, Science and technology has made rapid development ,The network has already become an indispensable part of people in daily life. The network brings convenience to peoples lives,
3、 fast, More and more people want to buy their favorite goods at a convenient time, Around the store and will be very tired ,so Online purchase of cars will become an alluring things.Web site is in the front page Dreamweaver platform, Written in HTML content, DIV + CSS layout. When writing code to gr
4、asp the simple clear hierarchy, labels, specifications, such as file naming conventions, comments the right principle. Overall this site using the method of functional test functions were tested, make its can meet user requirements.Key words: Electronic commerce; Car sales network; Webpage front; Te
5、st第 3 页 （共 22 页）1 绪论1.1 课题背景随着互联网的普及和电子商务的兴起，网上进行汽车销售是互联网电子商务在销售行业发展的必然结果，这种新型的汽车销售形式，与传统利用实体店进行销售的方式相比拥有许多优势：一是降低了销售成本；二是利用网络作为商家与消费者的交易平台，改变传统的交易方式，使得交易活动不受空间、时间的限制；三是汽车信息的传递更迅速灵活。汽车销售网站的主要功能是利用网站作为交易平台，将汽车的一些基本信息展示在网页中，客户可以通过登录汽车销售网站来查看汽车销售信息并提交订单订购汽车，实现在线交易。2 可行性分析2.1 社会可行性随着计算机技术的发展和网络人口的增加，网络世
6、界也越来越广博，越来越丰富，网上购物已经成为互联网娱乐的的一股潮流。据一家数据公司的统计，今天的互联网有 17 亿用户。而目前的全球人口为 67 亿，到 2020 年会有更多的人使用互联网。网民队伍的迅速扩充，无疑为汽车销售的发展提供了巨大的市场空间。2.2 技术可行性该网站前端页面主要是利用 Dreamweaver 平台，采用 HTML+CSS 技术实现效果，部分特效需要用 JavaScript 或者 jQuery 同时实现。测试时利用功能测试方法，对整个网站的功能进行连贯测试。HTML+CSS 开发方面具有方便快捷、使用灵活的特点，以及目前的广泛实际应用，因此本系统在技术方面可行。2.3
7、操作可行性大多数计算机都能运行本网站系统，其安装、调试、运行不会改变计算机系统原先的设置和布局，并且网页简单大方，提示信息完整，功能齐全，用户由相关人员简单讲解便能够自主进行方便的操作。第 4 页 （共 22 页）2.4 系统的技术介绍2.4.1 HTML+CSSHTML（HyperText Mark-up Language）是一种制作万维网页面的标准语言，是万维网浏览器使用的一种语言，它消除了不同计算机之间信息交流的障碍。HTML 文件的结构包括头部（Head） 、主体（Body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。CSS 能够对网页中的对象的位置排版进行
8、像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。CSS 能够根据不同使用者的理解能力，简化或者优化写法，针对各类人群，有较强的易读性。2.4.2 JavascriptJavaScript 主要有如下特征：JavaScript 被设计用来向 HTML 页面添加交互行为； JavaScript 是一种脚本语言（脚本语言是一种轻量级的编程语言）；JavaScript 由数行可执行计算机代码组成； JavaScript 通常被直接嵌入 HTML 页面；JavaScript 是一种解释性语言（就是说，代码执
9、行不进行预编译）； 所有的人无需购买许可证均可使用 JavaScript。 2.4.3 JQueryJQuery 是一个兼容多浏览器的 javascript 框架，核心理念是 write less,do more(写得更少,做得更多) 。jQuery 是免费、开源的，使用 MIT 许可协议。jQuery 的语法设计可以使开发者更加便捷，例如操作文档对象、选择 DOM 元素、制作动画效果、事件处理、使用 Ajax 以及其他功能。除此以外，jQuery 提供 API 让开发者编写插件。其模块化的使用方式使开发者可以很轻松的开发出功能强大的静态或动态网页。2.5 开发平台及运行环境第 5 页 （共
10、22 页）2.5.1 前端开发平台本网站的前端开发平台是利用 Dreamweaver 软件，是检验 Web 战队和应用程序的专业工具。他将可视布局工具、应用程序开发和代码编辑支持组合在一起，其功能强大，是的各个层次的开发人员和设计人员都能够开苏创建给予标准的网站和应用程序的优美界面。 Dreamweaver 提供了专业人员在一个集成、高效的环境中所需的工具。2.5.2 运行环境操作系统：Windows XP 以上版本。手机系统：Android 系统与 iOS 系统均可服务器软件：Tomcat 6.0 以上版本浏览器：IE、 Fire Fox、Google Chrome 等主流浏览器3 需求分析
11、3.1 系统功能模块概述根据用户的需求陈述，可以确定本项目分为PC端和手机版，其中 PC端分为：客户端和管理端。客户端主要展示销售车辆信息，最新活动信息。提供汽车销售信息的订单添加功能。为客户提供联系方式。停工销售汽车相关信息的检索功能。方便用户查询汽车的相关信息。管理端主要对车辆信息进行全面管理。通过后台管理各类订单（订购）信息，提供订单提供查询，增加，修改，删除功能。对用户信息进行管理，提供查询，增加，修改，删除功能。对用户预约试驾信息进行管理，提供查询，增加，修改，删除功能等。手机版网页主要是方便用户对本网站的浏览，随时可以了解汽车的各种信息。第 6 页 （共 22 页）3.2 系统功能
12、模块设计完整的汽车销售网站包括多个模块，主要分为前台模块和后台模块，通过整合，它们形成一个完全集成的基于 Web 的方案。汽车销售网站前台模块主要分为车型展示、最新活动、买家指南、售后服务、联系我们、登陆注册等。后台模块主要分为商品类别管理、商品信息管理、订单处理、用户信息管理等。如下图所示：汽车销售网商品管理商城用户管理购物车收藏夹预约试驾最新活动买家指南订单模块添加商品删除商品修改商品搜索商品条件查询全文索引用户注册用户登陆禁用用户提交注册信息邮箱激活添加购物项删除购物项清空购物车添加收藏查看收藏个人中心账户管理购买记录我的收藏修改收货地址修改登陆信息查看收藏删除收藏查询订单在线支付生产订
13、单提交订单新增活动加载活动列表售后服务用户预约预约管理查询预约删除预约删除记录评价商品图 3.2.1 系统功能模块图4 网站前台设计与实现4.1 首页设计网站的首页是必须具备的，也是一个网站形象的象征。所以首页的设计我们把握了简洁大方、信息齐全的要点，在进行前端切图时，把它分成头、中、尾三个部分进行布局。第 7 页 （共 22 页）图 4.1.1 首页设计图1) 网页 head 部分，在任何页面点击 logo 网页都会跳转到首页，导航栏的文字点击都能够进入相应的页面：图 4.1.2 首页头部图分为两个大的 Div，一个 div 的 class=top；这里主要是实现顶部导航栏，logo ，搜索
14、框的布局。另一个 div 的 class=banner；这里主要模块是对车型排行榜的展示，用户可以点击任何一种车型标题进入相应的汽车详情页进行浏览。2) 网页 center 部分，点击购物车、收藏夹图标，页面会跳转到购物车、收藏夹相应页面，客服咨询这块能把你的疑问直接和客服进行交流：第 8 页 （共 22 页）图 4.1.3 首页中间部分图在布局时分为左右两个大的 Div，左边部分主要是新车展示的基本信息，鼠标移到图片上，图片会放大，实现代码为：img.xz-webkit-transition:all 0.4s ease-in-out; -moz-transition:all 0.4s eas
15、e-in-out; transition: all 0.4s ease-in-out;img.xz:hover-webkit-transform:scale(1.2);-moz-transform:scale(1.2);transform:scale(1.2);z-index:3;position:relative;img.xz2:hover-webkit-transform:rotate(20deg);-moz-transform:rotate(20deg);transform:rotate(20deg);width:310px;height:200px;右边部分包含的模块有收藏夹、购物车入
16、口，最新活动，最近浏览的车型，客服入口。3) 网页 foot 部分，展示了我们公司的联系方式，方便用户有需要是和我们进行交流：图 4.1.4 首页底部图4.2 车型展示设计车型展示页面就是对本公司所经营的所有车型，按照品牌、座驾数目、功能等特点进行集中展示，供用户在这个平台上能方便快捷地了解到自己心仪的商品。本页面在进行代码布局时，分为了五个版块：第 9 页 （共 22 页）1) 网页 head 部分：这里和首页的代码一样，但是少了 class=banner 的 div2) 网页 heashow 部分，点击车型分类能够进入相应的所有品牌的这款车型页面，点击字母查询，是跳转到品牌首字母的对应版块
17、：图 4.2.1 车型展示分类图这个版块整体会随着页面的滚动而始终固定在顶部，这个效果用 JS 代码实现：$(window).scroll(function () if (jQuery(this).scrollTop() 176) jQuery(.heashow).addClass(scrolled);jQuery(#center).css(“marginTop“,“120px“); else jQuery(.heashow).removeClass(scrolled);jQuery(#center).css(“marginTop“,“20px“););$(document).ready(fu
18、nction()var $a = $(.showmain h3 a);$a.click(function()var href = $(this).attr(“href“);var pos = $(href).offset().top-105+px;$(“html,body“).animate(scrollTop: pos, 1000);return false;););第 10 页 （共 22 页）3) 网页 center 部分，是以品牌首字母的顺序进行排序展示：图 4.2.2 车型展示中间部分图这个模块主要是用 div+dl、dt、dd 进行嵌套实现效果。4) 网页 fd2 部分：图 4.2.3 车型展示快捷入口图这部分主要是展示自己的收藏夹和购物车的快捷入口，无论页面滚动与否，它都会一直显示在网页的右侧中间位置，方便用户随时进入相应页面。实现其固定的主要代码为：.fd2position:fixed;width:100px;height:200px;top:210px;right:0px;z-index:99;5) 网页 foot 部分与首页实现方法一样。4.3 车型展示内页设计车型展示内页是展示某个品牌下的所有车型，每一辆汽车图片下显示了本车的部分基本信息和用户需求指引按钮。
