汽车销售网站设计与实现前端页面制作.doc

汽车销售网站设计与实现 前端页面制作摘 要：当前，网络技术迅猛发展，网络的方便快捷导致人们对网络的依赖逐渐增大，各类信息都可以通过网站浏览，致使各类网站如雨后春笋般的出现，汽车销售网的出现给想要购车的人群了解汽车信息和购买带来了方便，解决了人们想要购车但因为种类繁杂难以筛选的问题。本论文所提出的方案采用的是当前比较流行的语言，如html、css和javascript、jQuery，结合photoshop，fireworks工具等完成该系统的基本功能模块，如汽车详情、个人中心、购物车、登陆、注册等。关键词：前端； 电子商务；功能模块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 website 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 this 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; html1 绪论在网上销售汽车是时代发展的结果，随着网络技术迅猛发展，网络的方便快捷导致人们对网络的依赖逐渐增大，各类信息都可以通过网站浏览，致使各类网站如雨后春笋般的出现，汽车销售网的出现给想要购车的人群了解汽车信息和购买带来了方便，解决了人们想要购车但因为种类繁杂难以筛选的问题。汽车销售实体店比较分散，如果一个汽车店没有找到自己喜欢的车型，转到下一个实体店，花费时间，对人体的消费也比较大，网上销售给人们带来了极大的方便，它将汽车集中在一起，不用出门就可以看到各种车型，所以网上营销是时代进步的产物。在此篇论文中，我将介绍如何在建立网站，以何种方式在网上进行销售的，通过网页的介绍，使人们对销售模式更加熟悉，我将介绍当前主流浏览器，以及浏览器对各种语言的支持，如：jQuery、javascript、css等，我通过网站的结构，组成，技术支持，功能模块的实现，网页测试等方面来描述汽车销售网站，通过这些我们将对汽车销售网站的架构有一定的了解，功能实现也有一定的认识，各功能模块的实现和测试也有相当的认知，我将详细介绍这些。2 实现环境介绍2.1 当前主流浏览器介绍2.1.1 IEInternet Explorer，原名为Microsoft Internet Explorer，又称Windows Internet Explorer，简称IE，推出公司是微软公司，推出公司在美国，是一款网页浏览器，当前主流浏览器之一，IE浏览器是全球使用率最高的浏览器。2.1.2 Firefox Firefox又称“火狐”或“火狐浏览器”，简称Fx或FF，火狐是一款开源的网页浏览器，火狐浏览器在全球占率较高，用户在全球各浏览器中排名第三，用户数在国外使用率更高。2.1.3 chrome Chrome，又名Google浏览器，是Google公司开发的设计简单、高效的浏览工具，chrome是基于其他开源软件编著的，chrome浏览器开发的目的是提高浏览器的稳定性、安全性和速度。2.2 站点站点，是一个储存区，将一个网站中的网页文件和素材文件，有条理地存放在站点文件夹里，存放在站点中的文件与文件夹一起构成网站的实质内容。站点中的文件除了网页文件外还有素材文件，素材文件就是网页中会用到的图片、视频、声音等，这些素材是以文件的形式存放在站点中。2.3 超链接超链接属于网页的一部分，它让其他网页同站点之间进行的其他元素进行连接，也就是当浏览页面时，鼠标点击某段文字或者图片时，会打开其他网页，也可以跳转到其他网站。超链接将同一网站的同一页面、同一网站的不同页面、不同网站串联起来，方便客户的浏览和查找，超链接使web服务生命力广泛、持久。2.4 网页 网页是网站的基本元素，网页是一个文件，是各种网站应用的平台，网页是通过网页浏览器阅读，网页是用文字、图片、视频、声音来展示效果，网页上主流代码布局之前通常以表格定位，但是现在一般采用div+css布局。Div是选择区，css是将图片、文字、视频、声音在网页上摆放的样式固定并表现出来。3 网站前台实现需求分析3.1 页面实现需求 根据页面设计的需求和客户的要求，在页面实现是采用html+css布局，通过javascript、jQuery实现动态效果，在我所实现的页面中，页面布局相对简单，主要实现由javascript、jQuery编写的动态效果，我主要实现的页面是：登陆（login），注册（register），汽车详情（showCon2），购物车（shopCar），个人中心。用户进入汽车销售网后可以浏览车型，看到感兴趣的车型想要加入购物车时必须登陆，如果在此网站没有账号的点击注册，注册在本网站的账号或使用其他方式登陆，如QQ，微信360，支付宝等，登陆或注册成功后跳转会浏览车型页面，要了解车详细，点击车图片或文字介绍，进入汽车详情（showCon2）页，对喜欢的车型加入购物车（shopCar）,确定后跳转回汽车详情，点击用户名进入账户管理，若账户信息有改变，点击编辑进入更改账户信息或点击管理地址进入更改地址簿。进入账户信息后需要更改密码的点击更改密码复选框出现更改密码更改账户信息或更改地址簿成功后跳转回账户管理页面，要查看之前的购买记录或收藏点击我的购买记录或我的收藏，这些就是我这部分的功能模块实现需求图3-1，图3-2。3.2 功能模块(1)图3-1 功能结构一图(2)图3-2 功能结构二图4 技术支持4.1 HTML HTML英文全名HyperText Markup Language，HTML主要用来编写Web文档的语言。页面元素是通过特定的标签来实现的，根据这些标签指示浏览器怎样显示这个页面的内容，如文本、图片、视频、声音的样式。超文本，是一种含有指向其他文本或页面链接的文本，我们称之为链接。超文本把放在不同地方，不同计算机，不同地域的文档链接在一起。用户不用关心打开文档的链接所指的内容到底指向那个文件，只需要点击文本，页面马上就会跳转到所指向的文档的内容中去。4.2 CSSHTML可以将在网页中表现的形式、结构、内容表现在同一文档中，虽然放在同一文档中简单，但是在实行中实际上增加了难道，是页面复杂，不便于维护，更改时费力费时。所以就出现了CSS。CSS的英文全称为Cascading Style Sheet，中文意思为层叠样式表，主要是控制HTML中网页文本的页面布局的外观样式，使页面更加美观，是网页文档内容的形式和结构完全分离。4.3 JavaScript JavaScript一种脚本语言，javascript具有一定的安全性，它是基于事件驱动和对象的脚本语言。同时javascript也是一种在客户端Web开发广泛应用的脚本语言，通常用来实现HTML网页上的动态效果，比如网页上经常有的图片的定时切换效果，无缝滚动滚动，数字增加效果等其他的动态效果。Javascript语言的语法与Java语言的语法比较相似，但当你对javascript语言更加熟悉之后，就会发现他们之间其实是两种不同的语言。4.4 jQuery jQuery是兼容多种浏览器的javascript框架，jQuery的核心理念是write less（写得更少）,do more(做得更多)，jQuery的出现，是网页上的效果的实现越来越简单，将javascript封装在一个文件中，通过jQuery来调用，jQuery是美国人John Resig发布的，当前jQuery是是最流行的javascript框架。jQuery是使用MIT许可协议，同时也是免费的，jQuery也是开源的。jQuery的出现是软件开发者使用更加便捷，如jQuery在处理查找DOM元素、操作过程等，使开发者轻松地开发出功能强大且方便的静态或动态网页。5 功能模块实现5.1 登陆（login） 登陆界面包括2个主要的部分，位置分别为上、下，上部包含两大部分内容网站logo和注册，点击logo跳转到首页，点击注册跳转到注册页面，注册账号后才能实现收藏、将加入购物车，立即购买，查看订单等用户操作。 下部的实现分为两面，左面放的是汽车的照片代表我们做的是汽车类型的网站，右部选用table布局实现填写账号和密码，忘记密码，免费注册，记住密码，下次自动登录，注册，更多等功能实现，实现代码通过table布局，table中tr控制行，td控制列，具体格式如 . .，合并行采用rows如rows=num，num代表数字，合并两行rows=2，合并列cols，如cols=num，网站效果如图3所示，图5-1：(3)图5-1 登陆界面图5.1.1 登陆（login）布局实现 账号登陆       记住账号 下次自动登陆 忘记密码?   登录   还没有账号？免费注册   5.1.1 登陆（login）css样式实现.log-reg .login-bble tr.tr1heighr:20px;.log-reg .login-bble tr.tr1 emfont-size:12px;padding-rigth:20px; background:url(./images/title12.jpg) right center no-repeat; display:inline-block;width:100px;height:20px;line-height:20px;.log-reg .login-bble tr.tr2 tdfont-size:12px;.log-reg .login-bble tr.tr2 td acolor:#A30505;.log-reg .login-bble tr.tr2 td spanmargin-right:10px;float:left;.log-reg .login-bble tr.tr2 td span inputfloat:left;margin-top:2px;margin-right:5px;.log-reg .login-bble tr.tr3 acolor:#A30505;margin-left:10px;.log-reg .login-bble td,.log-reg .srl-tle tdcolor: #666;font-size: 14px;5.2 注册（register） 在本网站没有账号的客户需要注册账号，点击注册跳转到此页面或在首页直接点击注册，若已经注册的用户一不小心进入到此页面，可以直接点击登陆返回登陆界面，也可以点击logo返回首页，本页面实现邮箱、用户名、创建密码、确认密码所在城市、验证码、同意以下协议并注册功能。验证码看不清楚是点击换一个，注册成功输入条件此页面有邮箱验证，若输入的数据不是邮箱组成，否则注册将不会成功；邮箱，用户名，创建密码，确认密码，验证码都不能为空，否则注册不会成功；创建密码与确认密码输入的数据必须一致，否则注册不会成功；输入的验证码要与页面显示出的验证码一致，否则注册不会成功；必须点击同意以下协议并注册，否则注册不会成功。这是这个页面注册的六个条件，少了其中一条，注册都不成立。功能实现的布局代码，与登陆界面的布局类似，上部分采用的是div布局，下部分采用table布局，布局代码如下： 邮箱. 效果如图4所示，图5-2：（4）图5-2 注册界面图5.3 汽车详情（showCon2） 点击一款汽车会显示汽车的详情,汽车详情页有上、中、下三部分组成，头部由logo、搜索框、导航栏组成，点击logo直接放回首页，logo在网页上用图片存放，标签为img，格式为，在搜索框里输入要搜索的文本，点击搜索下面会出现搜索相应的内容的改变，搜索框左边放的文本框，导航栏有车型展示、最新车型、热销车型、最新活动、卖家指南、售后服务，链接到相应的页面，用ul、li实现效果，当鼠标移到导航栏上的相应版块时，相应li的背景发生改变，文字颜色变成红色，此效果在css中实现，有hover实现。 中部主要介绍汽车详情、产品详情、顾客评论、厂家推荐，汽车详情主要实现变速器、车型、报价、定金、库存、月销量、收藏、预约试驾、订购的数量、加入购物车或立即购买等功能，产品详情主要介绍提高驾驶安全性的配备、坡道辅助系统、降噪科技；顾客评论主要是顾客能够与厂商有更直接的方通，也方便增加大家对产品的了解，显示顾客发表的对这款车型的看法；厂家推荐是推荐出大众喜欢的车型，点击车图片显示那款车的详情，客户可以在那款车详情操作。 尾部主要介绍汽车销售商家的详细信息，客户可以联系商家，如商家姓名，电话号码，地址，备案编号,效果如图5所示，图5-3：（5）图5-3 汽车详情界面图5.3.1 汽车详情（showCon2）主要布局实现5.3.1.1 搜索框的实现，如图6所示，图5-4：（6）图5-4 网站logo界面图5.3.1.2 搜索框的实现，图5-5（7）图5-5 搜索界面图 搜索 5.3.1.3 导航栏的实现图5-6（8）图5-6 导航栏界面图 车型展示 最新车型 热销车型 最新活动 买家指南 售后服务5.3.1.4 车型的实现图5-7（9）图5-7 车型实现界面图 1.5L尊贵型 1.5L舒适型 1.5L豪华型5.3.1.5 数量的实现，图5-8（10）图5-8 数量实现界面图数量 5.3.1.6 车型选择的实现，图5-9（11）图5-9 车型选择界面图 5.3.1.7 车型的实现，图5-10（12）图5-10 车型评论界面图布局介绍，布局采用dl、dt、dd实现效果，图下面的边线通过css中的border实现，代码如下，布局代码： 金瑶瑶 为了家家的网友能与品牌厂商进行更有效更直接的沟通，家家在近期上线了一个新产品品牌公共主页，相信有一些小伙伴们已经提前体验到了。还不清楚情况的小伙伴们，来先恶补一下吧！ 2014年12月20日 09:12 满意 Css代码如下：.slideTxtBox .bd ul.ul2background:#fff;.slideTxtBox .bd ul imgmargin:0 auto;display:block;margin-bottom:30px;.slideTxtBox .bd ul dlheight:auto;border-bottom:1px solid #ccc;padding:10px 20px;color:#000;5.3.2 汽车详情（showCon2）主要效果实现5.3.2.1 汽车放大效果的实现,如图13，图5-11（13）图5-11 放大效果实现图 $(document).ready(function() $(.jqzoom).imagezoom(); );5.3.2.2 点击小车大车切换效果的实现,如图14效果介绍：当点击下面图片的小图时，上面就会出现相应小图的大图，图5-12（14）图5-12 效果切换图 $(document).ready(function()$(#thumblist li a).click(function()$(this).parents(li).addClass(tb-selected).siblings().removeClass(tb-selected)； $(.jqzoom).attr(src,$(this).find(img).attr(mid); $(.jqzoom).attr(rel,$(this).find(img).attr(big);););5.3.2.3 点击上下按钮数量增减效果的实现，图5-13（15）图5-13 增加数量图 function qtyUpdate(kind)var f = document.form1;var c = f.qty.value;if(kind = up)c+;else if(kind = down)if(c 1) c-;f.qty.value = c; 5.3.2.4 选择车型板块 效果介绍：点击多选中的1.5L舒适型时，框中的文字由1.5L尊贵型变成1.5L舒适型，改变之后下面的报价改为此车型的价格，图5-14（16）图5-14 车型选择图$(document).ready(function() $(#style).change(function() $(#price).text($(this).val()+万);););5.3.2.5 tab切换 效果介绍：鼠标移上顾客评论时，下面内容变成顾客评论的内容，鼠标移回产品详情时，内容变成产品详情介绍的内容，图5-15。（17）图5-15 切换界面效果图jQuery(.slideTxtBox).slide();，引用js插件实现，调用插件来实现效果当页面到达产品详情且页面仍向下滚动且滚轮高度到达800时，上图所实现的效果会固定到页面顶部，实现效果代码如下： $(window).scroll(function () if (jQuery(this).scrollTop() 800) jQuery(.hd).addClass(scroll); jQuery(.bd).css(marginTop,40px); else jQuery(.hd).removeClass(scroll); jQuery(.bd).css(marginTop,0px); );5.4 个人中心 此部分是用户的个人中心，个人中心是记录用户一系列操作和为用户提供的一系列操作，主要操作有账户管理，更改账户信息、更改地址簿、我的购买记录和收藏。 账户管理主要记录账户的信息，主要有联系信息和地址簿，联系信息主要记载用户名、手机号码、邮箱、邮编，地址簿主要记载默认送货地址，点击此页面的编辑链接到更改账户管理，点击左侧的导航时页面会跳转相应界面，图5-16。（18）图5-16 个人中心图更改账户信息主要更改姓名、手机号码、电子邮箱地址，若需要更改密码点击复选框更改密码出现更改密码，再次点击更改密码更改密码会隐藏，点击确定后页面跳转回账户管理页面，图5-17。（19）图5-17 更改密码界面图点击保存跳转回账户管理，点击管理地址出现更改地址簿，图5-18。（20）图5-18 更改地址簿界面图用户购买记录是记录用户之前购买产品的详细情况，图5-19（21）图5-19 订单显示界面图收藏是用户对感兴趣的产品可以收藏显示在此界面，点击删除后收藏的汽车会减少，点击加入购物车后购物车中的数量会增加，图5-20。（22）图5-20 收藏界面图5.4.1 更改密码布局实现，图5-21（23）图5-21 密码更改界面图 账户信息 姓名* 电子邮箱地址 * 更改密码5.4.1 更改密码效果实现，图5-22（24）图5-22 密码更改界面二图 $(document).ready(function() $(#check).click(function() if ($(#check).attr(checked) $(#change).slideDown(); else $(#change).slideUp(); ); );6 网站的测试网站在编写时要测试网站的兼容性，IE、Firefox、Chrome不同的版本对javascript、jQuery、css的支持不同，测试是为了尽可能的减少页面的错误如错位等，对css的支持虽然兼容性问题会相对较少，几乎没有，但还是会有兼容性问题，如对css中opacity（透明度）的支持，IE跟Firefox就不同，I有两种用法分别是filter：alpha（opacity:100）,opacity：1。这些主流的浏览器对javascript、jQuery的支持差别更多，javascript包括ECMAScript、DOM、BOM，这些浏览器对DOM（ document object model）部分兼容，对BOM（browser