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

1、第 1 页 （共 30 页）本科毕业论文（20 届）汽车销售网站设计与实现前端页面制作所在学院专业班级 信息与计算科学学生姓名指导教师完成日期第 2 页 （共 30 页）汽车销售网站设计与实现前端页面制作摘 要：当前，网络技术迅猛发展，网络的方便快捷导致人们对网络的依赖逐渐增大，各类信息都可以通过网站浏览，致使各类网站如雨后春笋般的出现，汽车销售网的出现给想要购车的人群了解汽车信息和购买带来了方便，解决了人们想要购车但因为种类繁杂难以筛选的问题。本论文所提出的方案采用的是当前比较流行的语言，如 html、css 和 javascript、jQuery，结合 photoshop，firework

2、s 工具等完成该系统的基本功能模块，如汽车详情、个人中心、购物车、登陆、注册等。关键词：前端； 电子商务；功能模块Abstract：At present，network technology develops quickly，network is so convenient,that people are more and more rely on Internet.we can get information everywhere by website,so that all kinds of website sprang up,the appeared of car_sales websi

3、te bring more convenient for that people who want to get more car information and want to buy，solved the people want to be a car because of the diversity of difficult to filter.In this paper，the proposed scheme USES the current relatively popular in the language,such as javascript、jQuery，combine thi

4、s tools to finished basic modules of the system,this tools include Photoshop、Firefox and on,function module is like showCon2、personal center、shopCar、log in、register.Key words：leading end; e-business; function module; html第 3 页 （共 30 页）1 绪论在网上销售汽车是时代发展的结果，随着网络技术迅猛发展，网络的方便快捷导致人们对网络的依赖逐渐增大，各类信息都可以通过网站浏

5、览，致使各类网站如雨后春笋般的出现，汽车销售网的出现给想要购车的人群了解汽车信息和购买带来了方便，解决了人们想要购车但因为种类繁杂难以筛选的问题。汽车销售实体店比较分散，如果一个汽车店没有找到自己喜欢的车型，转到下一个实体店，花费时间，对人体的消费也比较大，网上销售给人们带来了极大的方便，它将汽车集中在一起，不用出门就可以看到各种车型，所以网上营销是时代进步的产物。在此篇论文中，我将介绍如何在建立网站，以何种方式在网上进行销售的，通过网页的介绍，使人们对销售模式更加熟悉，我将介绍当前主流浏览器，以及浏览器对各种语言的支持，如：jQuery 、javascript 、css 等，我通过网站的结构

6、，组成，技术支持，功能模块的实现，网页测试等方面来描述汽车销售网站，通过这些我们将对汽车销售网站的架构有一定的了解，功能实现也有一定的认识，各功能模块的实现和测试也有相当的认知，我将详细介绍这些。2 实现环境介绍2.1 当前主流浏览器介绍2.1.1 IEInternet Explorer，原名为 Microsoft Internet Explorer，又称 Windows Internet Explorer，简称 IE，推出公司是微软公司，推出公司在美国，是一款网页浏览器，当前主流浏览器之一，IE 浏览器是全球使用率最高的浏览器。2.1.2 Firefox第 4 页 （共 30 页）Firef

7、ox 又称 “火狐” 或“火狐浏览器”，简称 Fx 或 FF，火狐是一款开源的网页浏览器，火狐浏览器在全球占率较高，用户在全球各浏览器中排名第三，用户数在国外使用率更高。2.1.3 chromeChrome，又名 Google 浏览器，是 Google 公司开发的设计简单、高效的浏览工具，chrome 是基于其他开源软件编著的，chrome 浏览器开发的目的是提高浏览器的稳定性、安全性和速度。2.2 站点站点，是一个储存区，将一个网站中的网页文件和素材文件，有条理地存放在站点文件夹里，存放在站点中的文件与文件夹一起构成网站的实质内容。站点中的文件除了网页文件外还有素材文件，素材文件就是网页中会

8、用到的图片、视频、声音等，这些素材是以文件的形式存放在站点中。2.3 超链接超链接属于网页的一部分，它让其他网页同站点之间进行的其他元素进行连接，也就是当浏览页面时，鼠标点击某段文字或者图片时，会打开其他网页，也可以跳转到其他网站。超链接将同一网站的同一页面、同一网站的不同页面、不同网站串联起来，方便客户的浏览和查找，超链接使 web 服务生命力广泛、持久。2.4 网页网页是网站的基本元素，网页是一个文件，是各种网站应用的平台，网页是通过网页浏览器阅读，网页是用文字、图片、视频、声音来展示效果，网页上主流代码布局之前通常以表格定位，但是现在一般采用 div+css 布局。Div 是选择区，cs

9、s 是将图片、文字、视频、声音在网页上摆放的样式固定并表现出来。3 网站前台实现需求分析第 5 页 （共 30 页）3.1 页面实现需求根据页面设计的需求和客户的要求，在页面实现是采用 html+css 布局，通过 javascript、 jQuery 实现动态效果，在我所实现的页面中，页面布局相对简单，主要实现由 javascript、jQuery 编写的动态效果，我主要实现的页面是：登陆（login），注册（register），汽车详情（showCon2），购物车（shopCar），个人中心。用户进入汽车销售网后可以浏览车型，看到感兴趣的车型想要加入购物车时必须登陆，如果在此网站没有账号的

10、点击注册，注册在本网站的账号或使用其他方式登陆，如 QQ，微信 360，支付宝等，登陆或注册成功后跳转会浏览车型页面，要了解车详细，点击车图片或文字介绍，进入汽车详情（showCon2）页，对喜欢的车型加入购物车（shopCar）,确定后跳转回汽车详情，点击用户名进入账户管理，若账户信息有改变，点击编辑进入更改账户信息或点击管理地址进入更改地址簿。进入账户信息后需要更改密码的点击更改密码复选框出现更改密码更改账户信息或更改地址簿成功后跳转回账户管理页面，要查看之前的购买记录或收藏点击我的购买记录或我的收藏，这些就是我这部分的功能模块实现需求图3-1，图 3-2。3.2 功能模块(1)图 3-1

11、 功能结构一图第 6 页 （共 30 页）(2)图 3-2 功能结构二图4 技术支持4.1 HTMLHTML 英文全名 HyperText Markup Language，HTML 主要用来编写 Web 文档的语言。页面元素是通过特定的标签来实现的，根据这些标签指示浏览器怎样显示这个页面的内容，如文本、图片、视频、声音的样式。超文本，是一种含有指向其他文本或页面链接的文本，我们称之为链接。超文本把放在不同地方，不同计算机，不同地域的文档链接在一起。用户不用关心打开文档的链接所指的内容到底指向那个文件，只需要点击文本，页面马上就会跳转到所指向的文档的内容中去。4.2 CSSHTML 可以将在网页

12、中表现的形式、结构、内容表现在同一文档中，虽然放在同一文档中简单，但是在实行中实际上增加了难道，是页面复杂，不便于维护，更改时费力费时。所以就出现了 CSS。CSS 的英文全称为 Cascading Style Sheet，中文意思为层叠样式表，主要是控制 HTML 中网页文本的页面布局的外观样式，使页面更加美观，是网页文档内容的形式和结构完全分离。4.3 JavaScript第 7 页 （共 30 页）JavaScript 一种脚本语言，javascript 具有一定的安全性，它是基于事件驱动和对象的脚本语言。同时 javascript 也是一种在客户端 Web 开发广泛应用的脚本语言，通常

13、用来实现 HTML 网页上的动态效果，比如网页上经常有的图片的定时切换效果，无缝滚动滚动，数字增加效果等其他的动态效果。Javascript 语言的语法与 Java 语言的语法比较相似，但当你对 javascript 语言更加熟悉之后，就会发现他们之间其实是两种不同的语言。4.4 jQueryjQuery 是兼容多种浏览器的 javascript 框架，jQuery 的核心理念是 write less（写得更少）,do more (做得更多)，jQuery 的出现，是网页上的效果的实现越来越简单，将 javascript 封装在一个文件中，通过 jQuery 来调用，jQuery 是美国人 J

14、ohn Resig 发布的，当前 jQuery 是是最流行的 javascript 框架。jQuery 是使用 MIT 许可协议，同时也是免费的，jQuery 也是开源的。jQuery的出现是软件开发者使用更加便捷，如 jQuery 在处理查找 DOM 元素、操作过程等，使开发者轻松地开发出功能强大且方便的静态或动态网页。5 功能模块实现5.1 登陆（login）登陆界面包括 2 个主要的部分，位置分别为上、下，上部包含两大部分内容网站 logo 和注册，点击 logo 跳转到首页，点击注册跳转到注册页面，注册账号后才能实现收藏、将加入购物车，立即购买，查看订单等用户操作。下部的实现分为两面，

15、左面放的是汽车的照片代表我们做的是汽车类型的网站，右部选用 table 布局实现填写账号和密码，忘记密码，免费注册，记住密码，下次自动登录，注册，更多等功能实现，实现代码通过 table 布局，table 中tr 控制行，td 控制列，具体格式如 . .，第 8 页 （共 30 页）合并行采用 rows 如 rows=num，num 代表数字，合并两行 rows=2，合并列 cols，如 cols=num，网站效果如图 3 所示，图 5-1：(3)图 5-1 登陆界面图5.1.1 登陆（login）布局实现账号登陆第 9 页 （共 30 页）第 10 页 （共 30 页）记住账号下次自动登陆忘记密码?登录还没有账号？免费注册