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

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

《汽车销售网站的设计与实现网页前端与网站功能测试毕业设计论文.docx》由会员分享，可在线阅读，更多相关《汽车销售网站的设计与实现网页前端与网站功能测试毕业设计论文.docx（22页珍藏版）》请在冰豆网上搜索。

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

──网页前端与网站功能测试

摘要：

随着社会的进步，科学技术也进行了飞速的发展，网络已经成为了人们在日常生活中不可缺少的一部分。

网络给人们的生活带来了方便、快捷，人们越来越想在方便的时间购买到自己心仪的商品，逛实体店又会很累，于是，网上购买汽车便成了人们向往的事情。

网页前端页面是在Dreamweaver平台上，用HTML语言编写内容、DIV+CSS实现布局。

在编写代码时把握层级简单清晰、标签使用规范、文件命名规范、注释恰到好处等原则。

用功能测试的方法对本网站整体功能进行了测试，使其能满足用户需求。

关键词：

电子商务；汽车销售网；网页前端；测试

Abstract：

Withthedevelopmentofscience,Scienceandtechnologyhasmaderapiddevelopment,Thenetworkhasalreadybecomeanindispensablepartofpeopleindailylife.The

networkbringsconveniencetopeople'slives,fast,Moreandmorepeoplewanttobuytheirfavoritegoodsataconvenienttime,Aroundthestoreandwillbeverytired,soOnlinepurchaseofcarswillbecomeanalluringthings.

WebsiteisinthefrontpageDreamweaverplatform,WritteninHTMLcontent,DIV+CSSlayout.Whenwritingcodetograspthesimpleclearhierarchy,labels,specifications,suchasfilenamingconventions,commentstherightprinciple.Overallthissiteusingthemethodoffunctionaltestfunctionsweretested,makeitscanmeetuserrequirements.

Keywords:

Electroniccommerce;Carsalesnetwork;Webpagefront;Test

1绪论

1.1课题背景

随着互联网的普及和电子商务的兴起，网上进行汽车销售是互联网电子商务在销售行业发展的必然结果，这种新型的汽车销售形式，与传统利用实体店进行销售的方式相比拥有许多优势：

一是降低了销售成本；二是利用网络作为商家与消费者的交易平台，改变传统的交易方式，使得交易活动不受空间、时间的限制；

第7页（共22页）

三是汽车信息的传递更迅速灵活。

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

2可行性分析

2.1社会可行性

随着计算机技术的发展和网络人口的增加，网络世界也越来越广博，越来越丰富，网上购物已经成为互联网娱乐的的一股潮流。

据一家数据公司的统计，今天的互联网有17亿用户。

而目前的全球人口为67亿，到2020年会有更多的人使用互联网。

网民队伍的迅速扩充，无疑为汽车销售的发展提供了巨大的市场空间。

2.2技术可行性

该网站前端页面主要是利用Dreamweaver平台，采用HTML+CSS技术实现效果，部分特效需要用JavaScript或者jQuery同时实现。

测试时利用功能测试方法，对整个网站的功能进行连贯测试。

HTML+CSS开发方面具有方便快捷、使用灵活的特点，以及目前的广泛实际应用，因此本系统在技术方面可行。

2.3操作可行性

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

2.4系统的技术介绍

2.4.1HTML+CSS

HTML（HyperTextMark-upLanguage）是一种制作万维网页面的标准语言，是万维网浏览器使用的一种语言，它消除了不同计算机之间信息交流的障碍。

HTML文件的结构包括头部（Head）、主体（Body）两大部分，其中头部描述浏

览器所需的信息，而主体则包含所要说明的具体内容。

CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。

CSS能够根据不同使用者的理解能力，简化或者优化写法，针对各类人群，有较强的易读性。

2.4.2Javascript

JavaScript主要有如下特征：

JavaScript被设计用来向HTML页面添加交互行为；JavaScript是一种脚本语言（脚本语言是一种轻量级的编程语言）；

JavaScript由数行可执行计算机代码组成；JavaScript通常被直接嵌入HTML页面；JavaScript是一种解释性语言（就是说，代码执行不进行预编译）；所有的人无需购买许可证均可使用JavaScript。

2.4.3JQuery

JQuery是一个兼容多浏览器的javascript框架，核心理念是writeless,do

more（写得更少,做得更多）。

jQuery是免费、开源的，使用MIT许可协议。

jQuery的语法设计可以使开发者更加便捷，例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能。

除此以外，jQuery提供API让开发者编写插件。

其模块化的使用方式使开发者可以很轻松的开发出功能强大的静态或动态网页。

2.5开发平台及运行环境

2.5.1前端开发平台

本网站的前端开发平台是利用Dreamweaver软件，是检验Web战队和应用程序的专业工具。

他将可视布局工具、应用程序开发和代码编辑支持组合在一起，其功能强大，是的各个层次的开发人员和设计人员都能够开苏创建给予标准的网站和应用程序的优美界面。

Dreamweaver提供了专业人员在一个集成、高效的环境中所需的工具。

2.5.2运行环境

操作系统：

WindowsXP以上版本。

手机系统：

Android系统与iOS系统均可服务器软件：

Tomcat6.0以上版本

浏览器：

IE、FireFox、GoogleChrome等主流浏览器

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；

这里主要是实现顶部导航栏，logo，搜索框的布局。