汽车销售网站的设计与实现网页前端与网站功能测试毕业设计论文

汽车销售网站的设计与实现

──网页前端与网站功能测试摘要：随着社会的进步，科学技术也进行了飞速的发展，网络已经成为了人们在日常生活中不可缺少的一部分。网络给人们的生活带来了方便、快捷，人们越来越想在方便的时间购买到自己心仪的商品，逛实体店又会很累，于是，网上购买汽车便成了人们向往的事情。

网页前端页面是在Dreamweaver平台上，用HTML语言编写内容、DIV+CSS实现布局。在编写代码时把握层级简单清晰、标签使用规范、文件命名规范、注释恰到好处等原则。用功能测试的方法对本网站整体功能进行了测试，使其能满足用户需求。

关键词：电子商务；汽车销售网；网页前端；测试

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 people's lives, 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 grasp 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; Test

1 绪论

1.1课题背景

随着互联网的普及和电子商务的兴起，网上进行汽车销售是互联网电子商务在销售行业发展的必然结果，这种新型的汽车销售形式，与传统利用实体店进行销售的方式相比拥有许多优势：一是降低了销售成本；二是利用网络作为商家与消费者的交易平台，改变传统的交易方式，使得交易活动不受空间、时间的限制；

三是汽车信息的传递更迅速灵活。汽车销售网站的主要功能是利用网站作为交易平台，将汽车的一些基本信息展示在网页中，客户可以通过登录汽车销售网站来查看汽车销售信息并提交订单订购汽车，实现在线交易。

2 可行性分析

2.1 社会可行性

随着计算机技术的发展和网络人口的增加，网络世界也越来越广博，越来越丰富，网上购物已经成为互联网娱乐的的一股潮流。据一家数据公司的统计，今天的互联网有17亿用户。而目前的全球人口为67亿，到2020年会有更多的人使用互联网。网民队伍的迅速扩充，无疑为汽车销售的发展提供了巨大的市场空间。

2.2 技术可行性

该网站前端页面主要是利用Dreamweaver平台，采用HTML+CSS技术实现效果，部分特效需要用JavaScript或者jQuery同时实现。测试时利用功能测试方法，对整个网站的功能进行连贯测试。HTML+CSS开发方面具有方便快捷、使用灵活的特点，以及目前的广泛实际应用，因此本系统在技术方面可行。

2.3 操作可行性

大多数计算机都能运行本网站系统，其安装、调试、运行不会改变计算机系统原先的设置和布局，并且网页简单大方，提示信息完整，功能齐全，用户由相关人员简单讲解便能够自主进行方便的操作。

2.4 系统的技术介绍

2.4.1 HTML+CSS

HTML（HyperText Mark-up Language）是一种制作万维网页面的标准语言，是万维网浏览器使用的一种语言，它消除了不同计算机之间信息交流的障碍。HTML文件的结构包括头部（Head）、主体（Body）两大部分，其中头部描述浏

览器所需的信息，而主体则包含所要说明的具体内容。CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。CSS能够根据不同使用者的理解能力，简化或者优化写法，针对各类人群，有较强的易读性。

2.4.2 Javascript

JavaScript主要有如下特征：JavaScript 被设计用来向HTML 页面添加交互行为；JavaScript 是一种脚本语言（脚本语言是一种轻量级的编程语言）；JavaScript 由数行可执行计算机代码组成；JavaScript 通常被直接嵌入HTML 页面；JavaScript 是一种解释性语言（就是说，代码执行不进行预编译）；所有的人无需购买许可证均可使用JavaScript。

2.4.3 JQuery

JQuery是一个兼容多浏览器的javascript框架，核心理念是write less,do more(写得更少,做得更多)。jQuery是免费、开源的，使用MIT许可协议。jQuery 的语法设计可以使开发者更加便捷，例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能。除此以外，jQuery提供API让开发者编写插件。其模块化的使用方式使开发者可以很轻松的开发出功能强大的静态或动态网页。

2.5 开发平台及运行环境

2.5.1 前端开发平台

本网站的前端开发平台是利用Dreamweaver软件，是检验Web战队和应用程序的专业工具。他将可视布局工具、应用程序开发和代码编辑支持组合在一起，其功能强大，是的各个层次的开发人员和设计人员都能够开苏创建给予标准的网站和应用程序的优美界面。Dreamweaver提供了专业人员在一个集成、高效的环境中所需的工具。

2.5.2 运行环境

操作系统：Windows XP以上版本。

手机系统：Android系统与iOS系统均可

服务器软件：Tomcat 6.0以上版本

浏览器：IE、Fire Fox、Google Chrome等主流浏览器

3 需求分析

3.1 系统功能模块概述

根据用户的需求陈述，可以确定本项目分为PC端和手机版，其中PC端分为：客户端和管理端。

客户端主要展示销售车辆信息，最新活动信息。提供汽车销售信息的订单添加功能。为客户提供联系方式。停工销售汽车相关信息的检索功能。方便用户查询汽车的相关信息。

管理端主要对车辆信息进行全面管理。通过后台管理各类订单（订购）信息，提供订单提供查询，增加，修改，删除功能。对用户信息进行管理，提供查询，增加，修改，删除功能。对用户预约试驾信息进行管理，提供查询，增加，修改，删除功能等。

手机版网页主要是方便用户对本网站的浏览，随时可以了解汽车的各种信息。

3.2 系统功能模块设计

完整的汽车销售网站包括多个模块，主要分为前台模块和后台模块，通过整合，它们形成一个完全集成的基于Web的方案。汽车销售网站前台模块主要分为车型展示、最新活动、买家指南、售后服务、联系我们、登陆注册等。后台模块主要分为商品类别管理、商品信息管理、订单处理、用户信息管理等。如下图所示：

图 3.2.1 系统功能模块图

4 网站前台设计与实现

4.1首页设计

网站的首页是必须具备的，也是一个网站形象的象征。所以首页的设计我们把握了简洁大方、信息齐全的要点，在进行前端切图时，把它分成头、中、尾三个部分进行布局。

图4.1.1 首页设计图

1)网页head部分，在任何页面点击logo网页都会跳转到首页，导航栏的

文字点击都能够进入相应的页面：

图4.1.2 首页头部图

分为两个大的Div，一个div的class=top；

另一个div的class=banner；

2)网页center部分，点击购物车、收藏夹图标，页面会跳转到购物车、收藏夹相应页

面，客服咨询这块能把你的疑问直接和客服进行交流：

图4.1.3 首页中间部分图

在布局时分为左右两个大的Div，左边部分主要是新车展示的基本信息，鼠标移到图片上，图片会放大，实现代码为：

img.xz{-webkit-transition:all 0.4s ease-in-out; -moz-transition:all 0.4s ease-in-out; transition: all 0.4s ease-in-out;}

img.xz:hover{-webkit-transform:scale(1.2);-moz-transform:scale(1.2);transform:s cale(1.2);z-index:3;position:relative;}

img.xz2:hover{-webkit-transform:rotate(20deg);-moz-transform:rotate(20deg);tra nsform:rotate(20deg);width:310px;height:200px;}

右边部分包含的模块有收藏夹、购物车入口，最新活动，最近浏览的车型，客服入口。

3)网页foot部分，展示了我们公司的联系方式，方便用户有需要是和我们

进行交流：

图4.1.4 首页底部图

4.2车型展示设计

车型展示页面就是对本公司所经营的所有车型，按照品牌、座驾数目、功能等特点进行集中展示，供用户在这个平台上能方便快捷地了解到自己心仪的商品。

本页面在进行代码布局时，分为了五个版块：

1)网页head部分：这里和首页的代码一样，但是少了class=banner的div

2)网页heashow部分，点击车型分类能够进入相应的所有品牌的这款车型

页面，点击字母查询，是跳转到品牌首字母的对应版块：

图4.2.1 车型展示分类图

这个版块整体会随着页面的滚动而始终固定在顶部，这个效果用JS代码实现：

3)网页center部分，是以品牌首字母的顺序进行排序展示：

图4.2.2 车型展示中间部分图

这个模块主要是用div+dl、dt、dd进行嵌套实现效果。

4)网页fd2部分：

图4.2.3 车型展示快捷入口图

这部分主要是展示自己的收藏夹和购物车的快捷入口，无论页面滚动与否，它都会一直显示在网页的右侧中间位置，方便用户随时进入相应页面。

实现其固定的主要代码为：

.fd2{position:fixed;width:100px;height:200px;top:210px;right:0px;z-index:99;}

5)网页foot部分与首页实现方法一样。

4.3车型展示内页设计

车型展示内页是展示某个品牌下的所有车型，每一辆汽车图片下显示了本车的部分基本信息和用户需求指引按钮。

本页面在进行代码布局时，分为以下几个版块：

1)网页heashow部分，这个版块整体会随着页面的滚动而始终固定在顶部，

这个效果用JS代码实现（同车型展示效果相同）：

图4.3.1 车型展示内页设计分类图

2)网页center部分，在这里又把页面分为左右两个部分：

左边是展示某个品牌下的所有车型，在对应汽车下方的基本信息处，然后点击“加入购物车”就可以把图书添加到购物车中，并且会到达购物车列表页面；然后点击“收藏”就可以把图书添加到收藏夹中；然后点击“预约试驾”，页面就会跳转到预约试驾登记信息：

图4.3.2 车型展示内页展示图

右边主要包含了三个板块：客服咨询、最新活动、最近浏览的车型，实现的方法和首页一样。

4.4最新活动设计

最新活动页面主要就是展示本公司正在举行的汽车活动，包含的汽车的部分基本信息，点击汽车图片进入相应汽车的详细信息网页。

本页面在进行代码布局时，分为以下几个版块：

1)网页center部分，在这里又把页面分为左右两个部分：

左边是展示某个品牌正在进行活动的车型，点击汽车图片进入相应汽车

的详细信息网页：

图4.4.1 最新活动展示图

右边主要包含了两个板块：客服咨询、最近浏览的车型，实现的方法和首页一样。

4.5最新活动内页设计

最新活动内页页面主要就是用户在最新活动页面点击了某一款车型后，所跳转的关于该车型的活动详情，主要展示了这款汽车进行活动的详细信息，旁边有用于登记参加活动的用户信息登记表，用户填写好自己的基本信息后，公司会把后续内容告知用户，并进行跟进。

本页面在进行布局时，分为以下几个版块：

1)网页center2部分，在这里又把页面分为左右两个部分：

左边是展示该车型的活动详情：

图4.5.1 最新活动详询图右边是用户进行报名登记的一个表格：

图4.5.2 最新活动报名图实现代码如下：

4.6售后服务设计

本页面主要介绍售后服务包含的内容。

本页面在进行代码布局时，分为以下几个版块：

1)网页center部分，在这里又把页面分为左右两个部分：

左边是关于售后服的介绍，给用户展示我们售后服务的方式、理念，让

用户体会到我们用心的服务：

图4.6.1 售后服务详解图

右边主要包含了三个板块：客服咨询、最新活动、最近浏览的车型，实现的方法和首页一样。

4.7顾客评论设计

顾客评论页面主要是顾客对某一车型进行满意度评价的平台。

本页面在进行代码布局时，分为以下几个版块：

1)网页center部分：

图4.7.1 顾客评论设计图

4.8买家指南设计

本页面主要给用户提供在购买汽车时的流程，使得用户能方便并迅速地购买

汽车，不会再遇到不了解信息而不知道怎么做，这是考虑到用户体验的因素本页面在进行代码布局时，分为以下几个版块：

1)网页center部分，在这里又把页面分为左右两个部分：

左边是关于买家指南流程：

图4.8.1 买家指南流程图

右边主要包含了三个板块：客服咨询、最新活动、最近浏览的车型，实现的方法和首页一样。

4.9试驾设计

试驾页面主要是针对希望对某一车型进行试驾时，在网上填写资料进行预约试驾。

本页面在进行代码布局时，分为以下几个版块：

1)网页center部分：

图4.9.1 试驾报名登记图

4.10结账设计

本页面是用户选择了汽车，点击“购买”按钮下订单后，出现的结账界面。包含了四个流程块：

订单信息确认界面

图4.10.1 订单确认图

提取方式页面

图4.10.2 提取方式展示图

支付信息页面