： 随着人们生活水平的提高，汽车已经变得越来越普遍，所以人们越来越需要有专业的汽车网站去帮助他们选择适合他们的车型，本网站因此应运而生。本网站的建设初期需要收集材料，完成图片的修改，设计网页布局和版式。使用Sublime Text、CSS、JavaScript等工具设计网页效果图，最终实现网站内容完整、图片色彩搭配、网页版式新颖、主流浏览器兼容的效果。本网站旨在要更多的人去了解雪佛兰品牌汽车，去真正了解它的品牌意义。
目录
一、引言 6
（一）课题背景 6
（二）课题意义 6
二、工具介绍 6
（一）Photoshop 6
（二）Sublime Text 2 6
三、网站内容结构分析 6
（一）总体设计 6
（二）详细设计 7
1.首页布局 7
2.网站logo设计 7
3.导航设计 8
4.DIV+CSS布局 8
四、网站实现 10
（一）首页实现 10
（二）二级子页实现 12
1. “新闻中心”页面 12
2. “品牌与车型”页面 13
3. “品牌故事”页面 13
4. “车主服务”页面 14
5. “联系我们”页面 15
（三）三级页面实现 16
五、网站特效 16
六、总结 18
致谢 19
参考文献 20
一、引言
（一）课题背景
伴随着计算机信息技术的不断发展，未来社会与互联网络处处接轨，随着经济生活水平的发展，人民生活水平、收入的提高，对出行有了更高更好的要求；同时伴随着汽车工业的快速发展，尤其是自主汽车品牌的快速发展，直接拉低了汽车的价格。汽车越来越为人们所接受，所以也迫切需要一个汽车销售平台来给他们提供各类信息，为他们筛选好品牌的汽车。
（二）课题意义
雪佛兰的品牌个性已经凝结成为一种文化情结。这种独特的雪佛兰“情结”，在世界各地都因融入当地文化中而得到张扬，成功地实现了品牌的当地化和国际化的统一。雪佛兰的
 *景先生毕设|www.jxszl.com +Q: %3^5`1^9`1^6^0`7^2# 
传奇，为不同时代的普通人的生活增添了无尽的色彩。为了深刻体现这种独特的“情结”，为了给人们带来更好更加全面的信息，所以我决定做一个以雪佛兰为主题的网站！
二、工具介绍
（一）Photoshop
Adobe Photoshop，简称“PS”，是由Adobe Systems开发和发行的图像处理软件。
Photoshop主要处理以像素所构成的数字图像。使用其众多的编修与绘图工具，可以有效地进行图片编辑工作。ps有很多功能，在图像、图形、文字、视频、出版等各方面都有涉及。
（二）Sublime Text 2
Sublime Text 2 是一款“性感”的程序代码编辑器，能跨平台并且拥有简洁大方的操作界面，最主要能够运用快捷操作界面来快速操作，快速编写代码，是针对程序员对代码编写能力较强的纯代码编辑器，利用它能很容易制作出动态与静态结合的网站。
三、网站内容结构分析
（一）总体设计
在首页左上角是公司的LOGO、右边是六个导航，下方是图片轮转的特效，以转换的方式自动的展示了品牌车型，与首页链接。在图片轮转的上方是导航条，让浏览者对汽车销售网站有个初步了解。图片轮转左下方是雪佛兰的新闻动态，。图片轮转右下方是品牌故事介绍了雪佛兰的发展历史，尾部设计是版权所有。在关于我们的界面里，分别从公司简介、企业文化、公司使命、企业的核心价值观与经营的理念介绍苏州振强人力资源有限公司的形象与背景。比较简洁明了的展示了公司风采。
新闻中心模块中，有公司新闻和媒体动态，详细介绍了公司的各品牌汽车的各样性能，还有一些媒体对公司的介绍，逐条展示公司产品的优势。从导航条直接进入品牌与车型中，品牌与车型是用图片展示公司的各个品牌车型，每个图片下面都是车型的名称，方便人们识别。品牌故事中，又详细的介绍了公司的发展历史以及雪佛兰汽车深受人们喜欢的原因：真实自然、年轻心态、充满自信、乐观向上、富有创意的品牌个性。在招车主服务中，第六个模块中是联系我们，该页面是介绍了建设网站人的联系方式及QQ号，方便与建站人联系。整体的网站布局如图31所示。

图31 网站内容
（二）详细设计
1.首页布局
首页主要是采用上下框架。在公司网站的最上层是网站LOGO和导航条，采用灰色的整体色调，白色的背景，显得网站干净整洁，给人一种赏心悦目的感觉。Logo的右侧是导航条，主要是公司首页、新闻中心、品牌与车型、品牌故事、车主服务、联系我们，包含了该公司网站的大体全部内容。导航条下面是公司最新动态和品牌故事，增加了公司网站的可阅读型。所以首页显得比较简洁一些。首页框架如图32所示。
Logo
导航条
图片轮转
最新动态
品牌故事
尾部设计
图32首页框架
2.网站logo设计
Logo代表着公司的文化精神和精神象征，雪佛莱的"蝶形领结"标志是雪佛兰的创建者杜兰特看报纸时想到设计这个图形,从巴黎酒店的墙纸上获得到一些灵感。1908年,通用汽车创始人威廉姆杜兰特(William Durant) 在一次环球旅行途中,在一家法国旅馆的墙纸上发现了这个图案,他认为这个图案可以作为汽车的标志。后来,这个“金领结”图案真的变成为了畅销全球的雪佛兰汽车的标志.而也正是威廉姆.杜兰特改变了雪佛兰产品的设计,赋予雪佛兰新的定义,使雪佛兰获得了巨大的成功.为了更好的好的展现雪佛兰最具有正能量的一面，用Photoshop完成设计。Logo设计如图34所示。


图34 logo设计
3.导航设计
为了方便浏览者快速的找到网站的导航栏，所以将导航条留在网页的顶部，能快速的继续点击浏览。采用div/ul/li设计，用白色做首页的背景，简洁明了，方便点击浏览。导航栏目分别由首页、新闻中心、品牌与车型、品牌故事、车主服务、联系我们六大模块组成。详细并清晰的展示了网站的整体结构。导航设计如图35所示。


图35 导航条设计
4.DIV+CSS布局
网页div布局如图36所示。
图36网页div布局图
网页的div代码如下：


CSS代码如下：







原文链接：http://www.jxszl.com/jsj/xxaq/48879.html