汽车销售网站设计与实现前端页面制作毕业设计论文.docx

汽车销售网站设计与实现前端页面制作毕业设计论文.docx

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

汽车销售网站设计与实现前端页面制作毕业设计论文

汽车销售网站设计与实现

──前端页面制作

摘要：

当前，网络技术迅猛发展，网络的方便快捷导致人们对网络的依赖逐渐增大，各类信息都可以通过网站浏览，致使各类网站如雨后春笋般的出现，汽车销售网的出现给想要购车的人群了解汽车信息和购买带来了方便，解决了人们想要购车但因为种类繁杂难以筛选的问题。

本论文所提出的方案采用的是当前比较流行的语言，如html、css和javascript、jQuery，

结合photoshop，fireworks工具等完成该系统的基本功能模块，如汽车详情、个人中心、购物

车、登陆、注册等。

关键词：

前端；电子商务；功能模块

Abstract：

Atpresent，networktechnologydevelopsquickly，networkissoconvenient,that

peoplearemoreandmorerelyonInternet.wecangetinformationeverywherebywebsite,sothatall

kindsofwebsitesprangup,theappearedofcar_saleswebsitebringmoreconvenientforthatpeoplewhowanttogetmorecarinformationandwanttobuy，solvedthepeoplewanttobeacarbecauseofthediversityofdifficulttofilter.

Inthispaper，theproposedschemeUSESthecurrentrelativelypopularinthelanguage,suchas

javascript、jQuery，combinethistoolstofinishedbasicmodulesofthesystem,thistoolsinclude

Photoshop、Firefoxandon,functionmoduleislikeshowCon2、personalcenter、shopCar、log

in、register.

Keywords：

leadingend;e-business;functionmodule;html

1绪论

在网上销售汽车是时代发展的结果，随着网络技术迅猛发展，网络的方便快

捷导致人们对网络的依赖逐渐增大，各类信息都可以通过网站浏览，致使各类网

第1页（共30页）

站如雨后春笋般的出现，汽车销售网的出现给想要购车的人群了解汽车信息和购买带来了方便，解决了人们想要购车但因为种类繁杂难以筛选的问题。

汽车销售实体店比较分散，如果一个汽车店没有找到自己喜欢的车型，转到下一个实体店，花费时间，对人体的消费也比较大，网上销售给人们带来了极大的方便，它将汽车集中在一起，不用出门就可以看到各种车型，所以网上营销是时代进步的产物。

在此篇论文中，我将介绍如何在建立网站，以何种方式在网上进行销售的，通过网页的介绍，使人们对销售模式更加熟悉，我将介绍当前主流浏览器，以及

浏览器对各种语言的支持，如：

jQuery、javascript、css等，我通过网站的结构，组成，技术支持，功能模块的实现，网页测试等方面来描述汽车销售网站，通过

这些我们将对汽车销售网站的架构有一定的了解，功能实现也有一定的认识，各功能模块的实现和测试也有相当的认知，我将详细介绍这些。

2实现环境介绍

2.1当前主流浏览器介绍

2.1.1IE

InternetExplorer，原名为MicrosoftInternetExplorer，又称WindowsInternet

Explorer，简称IE，推出公司是微软公司，推出公司在美国，是一款网页浏览

器，当前主流浏览器之一，IE浏览器是全球使用率最高的浏览器。

2.1.2Firefox

Firefox又称“火狐”或“火狐浏览器”，简称Fx或FF，火狐是一款开源的

网页浏览器，火狐浏览器在全球占率较高，用户在全球各浏览器中排名第三，用

户数在国外使用率更高。

2.1.3chrome

第2页（共30页）

Chrome，又名Google浏览器，是Google公司开发的设计简单、高效的浏览工具，chrome是基于其他开源软件编著的，chrome浏览器开发的目的是提高浏览器的稳定性、安全性和速度。

2.2站点

站点，是一个储存区，将一个网站中的网页文件和素材文件，有条理地存放在站点文件夹里，存放在站点中的文件与文件夹一起构成网站的实质内容。

站点中的文件除了网页文件外还有素材文件，素材文件就是网页中会用到的图片、视频、声音等，这些素材是以文件的形式存放在站点中。

2.3超链接

超链接属于网页的一部分，它让其他网页同站点之间进行的其他元素进行连接，也就是当浏览页面时，鼠标点击某段文字或者图片时，会打开其他网页，也可以跳转到其他网站。

超链接将同一网站的同一页面、同一网站的不同页面、不

同网站串联起来，方便客户的浏览和查找，超链接使web服务生命力广泛、持久。

2.4网页

网页是网站的基本元素，网页是一个文件，是各种网站应用的平台，网页是通过网页浏览器阅读，网页是用文字、图片、视频、声音来展示效果，网页

上主流代码布局之前通常以表格定位，但是现在一般采用div+css布局。

Div是选择区，css是将图片、文字、视频、声音在网页上摆放的样式固定并表现出来。

3网站前台实现需求分析

3.1页面实现需求

根据页面设计的需求和客户的要求，在页面实现是采用html+css布局，通

过javascript、jQuery实现动态效果，在我所实现的页面中，页面布局相对简单，第3页（共30页）

主要实现由javascript、jQuery编写的动态效果，我主要实现的页面是：

登陆

（login），注册（register），汽车详情（showCon2），购物车（shopCar），个人中心。

用户进入汽车销售网后可以浏览车型，看到感兴趣的车型想要加入购物

车时必须登陆，如果在此网站没有账号的点击注册，注册在本网站的账号或使用其他方式登陆，如QQ，微信360，支付宝等，登陆或注册成功后跳转会浏览车

型页面，要了解车详细，点击车图片或文字介绍，进入汽车详情（showCon2）

页，对喜欢的车型加入购物车（shopCar）,确定后跳转回汽车详情，点击用户名进入账户管理，若账户信息有改变，点击编辑进入更改账户信息或点击管理地址进入更改地址簿。

进入账户信息后需要更改密码的点击更改密码复选框出现更改密码更改账户信息或更改地址簿成功后跳转回账户管理页面，要查看之前的购买记录或收藏点击我的购买记录或我的收藏，这些就是我这部分的功能模块实现需求图3-1，图3-2。

3.2功能模块

（1）

图3-1功能结构一图

第4页（共30页）

（2）

图3-2功能结构二图

4技术支持

4.1HTML

HTML英文全名HyperTextMarkupLanguage，HTML主要用来编写Web文

档的语言。

页面元素是通过特定的标签来实现的，根据这些标签指示浏览器怎样

显示这个页面的内容，如文本、图片、视频、声音的样式。

超文本，是一种含有

指向其他文本或页面链接的文本，我们称之为链接。

超文本把放在不同地方，不

同计算机，不同地域的文档链接在一起。

用户不用关心打开文档的链接所指的内

容到底指向那个文件，只需要点击文本，页面马上就会跳转到所指向的文档的内

容中去。

4.2CSS

HTML可以将在网页中表现的形式、结构、内容表现在同一文档中，虽然放

在同一文档中简单，但是在实行中实际上增加了难道，是页面复杂，不便于维

护，更改时费力费时。

所以就出现了CSS。

CSS的英文全称为CascadingStyle

Sheet，中文意思为层叠样式表，主要是控制HTML中网页文本的页面布局的外

观样式，使页面更加美观，是网页文档内容的形式和结构完全分离。

4.3JavaScript

JavaScript一种脚本语言，javascript具有一定的安全性，它是基于事件驱动和对象的脚本语言。

同时javascript也是一种在客户端Web开发广泛应用的脚本语言，通常用来实现HTML网页上的动态效果，比如网页上经常有的图片的定时切换效果，无缝滚动滚动，数字增加效果等其他的动态效果。

第5页（共30页）

Javascript语言的语法与Java语言的语法比较相似，但当你对javascript语言

更加熟悉之后，就会发现他们之间其实是两种不同的语言。

4.4jQuery

jQuery是兼容多种浏览器的javascript框架，jQuery的核心理念是writeless（写得更少）,domore（做得更多），jQuery的出现，是网页上的效果的实现越来越简单，将javascript封装在一个文件中，通过jQuery来调用，jQuery是美国人JohnResig发布的，当前jQuery是是最流行的javascript框架。

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

jQuery

的出现是软件开发者使用更加便捷，如jQuery在处理查找DOM元素、操作过程

等，使开发者轻松地开发出功能强大且方便的静态或动态网页。

5功能模块实现

5.1登陆（login）

登陆界面包括2个主要的部分，位置分别为上、下，上部包含两大部分内容网站logo和注册，点击logo跳转到首页，点击注册跳转到注册页面，注册账号后才能实现收藏、将加入购物车，立即购买，查看订单等用户操作。

下部的实现分为两面，左面放的是汽车的照片代表我们做的是汽车类型的

网站，右部选用table布局实现填写账号和密码，忘记密码，免费注册，记住密

码，下次自动登录，注册，更多等功能实现，实现代码通过table布局，table中tr

控制行，td控制列，具体格式如

第6页（共30页）

（3）

图5-1登陆界面图

5.1.1登陆（login）布局实现

账号登陆

第7页（共30页）

记住账号

下次自动登陆

第8页（共30页）

忘记密码?

登录

还没有账号？

免费注册

5.1.1登陆（login）css样式实现

第9页（共30页）

.log-reg.login-bbletr.tr1{heighr:

20px;}

.log-reg.login-bbletr.tr1em{font-size:

12px;padding-rigth:

20px;

background:

url（../images/title12.jpg）rightcenterno-repeat;

display:

inline-block;width:

100px;height:

20px;line-height:

20px;}

.log-reg.login-bbletr.tr2td{font-size:

12px;}

.log-reg.login-bbletr.tr2tda{color:

#A30505;}

.log-reg.login-bbletr.tr2tdspan{margin-right:

10px;float:

left;}

.log-reg.login-bbletr.tr2tdspaninput{float:

left;margin-top:

2px;margin-right:

5px;}

.log-reg.login-bbletr.tr3a{color:

#A30505;margin-left:

10px;}

.log-reg.login-bbletd,.log-reg.srl-tletd{color:

#666;font-size:

14px;}

5.2注册（register）

在本网站没有账号的客户需要注册账号，点击注册跳转到此页面或在首页直接点击注册，若已经注册的用户一不小心进入到此页面，可以直接点击登陆返回登陆界面，也可以点击logo返回首页，本页面实现邮箱、用户名、创建密码、确认密码所在城市、验证码、同意以下协议并注册功能。

验证码看不清楚是点击换一个，注册成功输入条件①此页面有邮箱验证，若输入的数据不是邮箱组成，否则注册将不会成功；②邮箱，用户名，创建密码，确认密码，验证码都不能为空，否则注册不会成功；③创建密码与确认密码输入的数据必须一致，否则注册不会成功；④输入的验证码要与页面显示出的验证码一致，否则注册不会成功；⑤必须点击同意以下协议并注册，否则注册不会成功。

这是这个页面注册的六个条件，少了其中一条，注册都不成立。

功能实现的布局代码，与登陆界面的布局类似，上部分采用的是div布局，下部分采用table布局，布局代码如下：

效果如图4所示，图5-2：

（4）

图5-2注册界面图

5.3汽车详情（showCon2）

点击一款汽车会显示汽车的详情,汽车详情页有上、中、下三部分组成，头部由logo、搜索框、导航栏组成，点击logo直接放回首页，logo在网页上用图片存放，标签为img，格式为，在搜索框里输入要搜索的文本，点击

搜索下面会出现搜索相应的内容的改变，搜索框左边放的文本框

type=”text”，导/>航栏有车型展示、最新车型、热销车型、最新活动、卖家指

南、售后服务，链接到相应的页面，用ul、li实现效果，当鼠标移到导航栏上的

第11页（共30页）

相应版块时，相应li的背景发生改变，文字颜色变成红色，此效果在css中实

现，有hover实现。

中部主要介绍汽车详情、产品详情、顾客评论、厂家推荐，汽车详情主要实现变速器、车型、报价、定金、库存、月销量、收藏、预约试驾、订购的数量、加入购物车或立即购买等功能，产品详情主要介绍提高驾驶安全性的配备、坡道辅助系统、降噪科技；顾客评论主要是顾客能够与厂商有更直接的方通，也方便增加大家对产品的了解，显示顾客发表的对这款车型的看法；厂家推荐是推荐出大众喜欢的车型，点击车图片显示那款车的详情，客户可以在那款车详情操作。

尾部主要介绍汽车销售商家的详细信息，客户可以联系商家，如商家姓

名，电话号码，地址，备案编号,效果如图5所示，图5-3：

第12页（共30页）

（5）

图5-3汽车详情界面图

5.3.1汽车详情（showCon2）主要布局实现

5.3.1.1搜索框的实现，如图6所示，图5-4：

第13页（共30页）

（6）

图5-4网站logo界面图

5.3.1.2搜索框的实现，图5-5

（7）

图5-5搜索界面图

搜索