大众汽车”网站设计
[Key words] popular car website; portal website; website design 目录
一、引言 1
（一）课题来源 1
（二）课题开发的意义 1
二、开发技术与工具简介 1
（一）开发工具选择 1
（二）开发技术介绍 1
1、HTML技术 1
2、CSS技术 2
3、javascript技术 2
三、 总体设计 2
（一）主要栏目 2
（二）页面设计风格 3
1、颜色搭配 3
2、字体大小 3
3、导航设计 3
四、页面的设计与实现 3
（一）主要功能模块设计 4
1、 首页设计 4
2、“关于我们”栏目设计 5
3、“发展历史”栏目设计 6
4、“新闻中心”栏目设计 7
5、“社会责任”栏目设计 8
6、“品牌型号”栏目设计 9
7、“联系我们”栏目设计 10
8、“用户登录”栏目设计 11
（二）部分网页特效 11
1、首页banner图片轮播 12
2、注册页面验证码特效 13
3、页面跳转特效 14
4、无缝滚动特效 15
5、登录页面特效 16
五、总结 17
（一）图片的处理 17
（二）DIV+CSS框架应用 17
（三）浏览器的兼容问题 17
六、致谢 18
七、参考文献 18
一、引言
随着大众汽车在中国的快速发展，人们需要对其旗下各个品牌的汽车信息需要详细地了解。而大众汽车网站的建设的目的就是为了让人们了解到这些品牌的所有相关信息，网站的内容包括大众品牌新闻、媒体中心、企业公告、先进科技、品牌与车型、社会责任、在线留言等等，所有的栏目将把大众汽车的企业形象全部展现出来，同时也可以让人们通过浏览这个网站更了解到大众及其旗下所有汽车品牌的信息。而这个网站的建设意义
*好棒文|www.hbsrm.com +Q: ^3^5^1^9^1^6^0^7^2^*
言
随着大众汽车在中国的快速发展，人们需要对其旗下各个品牌的汽车信息需要详细地了解。而大众汽车网站的建设的目的就是为了让人们了解到这些品牌的所有相关信息，网站的内容包括大众品牌新闻、媒体中心、企业公告、先进科技、品牌与车型、社会责任、在线留言等等，所有的栏目将把大众汽车的企业形象全部展现出来，同时也可以让人们通过浏览这个网站更了解到大众及其旗下所有汽车品牌的信息。而这个网站的建设意义在于，人们能够在浏览这个网站之后对自己所选择的品牌有一个更深的了解。
（一）课题来源
随着21世纪的到来，社会经济得到了不断发展，人们对生活水平的质量要求也逐渐提高。买车是现代年轻人的共同心愿，但是怎么样选择一辆称心如意的车成了最主要的问题，大众汽车是汽车行业中的领先品牌，是很多用户的首选，但是由于大众旗下的品牌繁多，因此给客户在了解这些品牌信息上带来了某些不必要的麻烦，所以为大众建立一个完美的门户网站是不可或缺的。
原有的大众汽车网站内容虽然丰富，但更多的仅局限在汽车本身信息的介绍，无法让客户了解到与汽车相关的更多其它方面的信息，因此在本课题所设计大众汽车网站将在原来网站的基础上做一些改善。该网站设计得体、增加了人信息，是个更为实用且有文化气息的网站。
（二）课题开发的意义
随着网络的迅速发展，各种各样的网站也随之出现。人们习惯通过网络来了解相关的时事、新闻，很多用户在想了解一件商品时都会选择在网上浏览，再去实体店去体验一下。选择汽车也是如此，用户一定会先在网上查一下品牌的性能、价格等等信息。因此大众汽车网站开发的目的就是为了让用户更加直观的了解我们品牌旗下汽车的详细信息，方便用户更理性的去选择。当用户浏览我们网站时，一定会更加的心动，购买的欲望更加强烈。
二、开发技术与工具简介
（一）开发工具选择
大众汽车网主要是在Win7系统下完成，开发工具有：Dreamweaver CS6、PhotoShop CS5、Sublime等。
（二）开发技术介绍
1、HTML技术
超文本标记语言HTML是一种语言建立Web文档，通过标签类型指令（标签）、图像、声音、图片、文字、动画、电影和电视等。超文本传输协议指定的规章制度，浏览器应该遵循运行the.http文件，使操作HTML协议的浏览器有统一的规则和标准运行超文本。
2、CSS技术
CSS是层叠样式表，通过CSS可以控制HTML或者XML标签的表现形式，W3C推荐使用CSS的布局方法，使得Web设计更加顺畅，结构更加清晰。
3、javascript技术
JavaScript是Web页面中的一种脚本编程语言，它不需要编译，是直接存放在HTML的页面当中，通过解释执行，把静态页面转化成交互并响应事件的动态页面，可以实现各种动态效果，例如：图片轮播、表单图片、大屏广告等等。
总体设计
（一）主要栏目
大众汽车网站的主要目的就是为了方便客户更加深入的了解企业的信息，最新的新闻。主要设计了7大栏目：首页、关于我们、新闻中心、社会责任、品牌型号、联系我们、用户登录。所有的页面都可以链接到同级的页面，无论在任何一个页面都可以链接到首页。如图3-1所示：
◆ 首页：主要是显示大众汽车的旗下品牌、用户评论、品牌型号、联系方式等等。
◆ 关于我们：设计了长期业务与品牌的相关领导人的信息。
◆ 新闻中心：这个页面主要展示最新的企业新闻与信息，可以让用户更多的了解大众汽车的实时新闻。
◆ 社会责任：主要开展改善中国偏远、贫困地区希望小学硬件教学条件，激发贫困地区小朋友学习的积极性，成为中国有用的人才。
◆ 品牌型号：大众汽车旗下分为很多品牌与车型，并且在此设计了二级菜单让人更加了解大众汽车。
◆ 联系我们：固定的账号与密码，如果输入不对，即显示无法登录。
◆ 用户登录：所有信息填写格式成功以后，设计跳转页面，3秒钟跳转到首页。
图3-1网站栏目效果图
（二）页面设计风格
1、颜色搭配
颜色的设计会给人带来更直接的体验，因此合理的搭配颜色，是整个网站最重要的部分。当人们在看见自己心爱的汽车时，总会想着它给我们带来的炫酷感，汽车网站自然是给人一种炫丽、大气的视觉效果。因此在选择颜色时，以黑、灰、白合
一、引言 1
（一）课题来源 1
（二）课题开发的意义 1
二、开发技术与工具简介 1
（一）开发工具选择 1
（二）开发技术介绍 1
1、HTML技术 1
2、CSS技术 2
3、javascript技术 2
三、 总体设计 2
（一）主要栏目 2
（二）页面设计风格 3
1、颜色搭配 3
2、字体大小 3
3、导航设计 3
四、页面的设计与实现 3
（一）主要功能模块设计 4
1、 首页设计 4
2、“关于我们”栏目设计 5
3、“发展历史”栏目设计 6
4、“新闻中心”栏目设计 7
5、“社会责任”栏目设计 8
6、“品牌型号”栏目设计 9
7、“联系我们”栏目设计 10
8、“用户登录”栏目设计 11
（二）部分网页特效 11
1、首页banner图片轮播 12
2、注册页面验证码特效 13
3、页面跳转特效 14
4、无缝滚动特效 15
5、登录页面特效 16
五、总结 17
（一）图片的处理 17
（二）DIV+CSS框架应用 17
（三）浏览器的兼容问题 17
六、致谢 18
七、参考文献 18
一、引言
随着大众汽车在中国的快速发展，人们需要对其旗下各个品牌的汽车信息需要详细地了解。而大众汽车网站的建设的目的就是为了让人们了解到这些品牌的所有相关信息，网站的内容包括大众品牌新闻、媒体中心、企业公告、先进科技、品牌与车型、社会责任、在线留言等等，所有的栏目将把大众汽车的企业形象全部展现出来，同时也可以让人们通过浏览这个网站更了解到大众及其旗下所有汽车品牌的信息。而这个网站的建设意义
*好棒文|www.hbsrm.com +Q: ^3^5^1^9^1^6^0^7^2^*
言
随着大众汽车在中国的快速发展，人们需要对其旗下各个品牌的汽车信息需要详细地了解。而大众汽车网站的建设的目的就是为了让人们了解到这些品牌的所有相关信息，网站的内容包括大众品牌新闻、媒体中心、企业公告、先进科技、品牌与车型、社会责任、在线留言等等，所有的栏目将把大众汽车的企业形象全部展现出来，同时也可以让人们通过浏览这个网站更了解到大众及其旗下所有汽车品牌的信息。而这个网站的建设意义在于，人们能够在浏览这个网站之后对自己所选择的品牌有一个更深的了解。
（一）课题来源
随着21世纪的到来，社会经济得到了不断发展，人们对生活水平的质量要求也逐渐提高。买车是现代年轻人的共同心愿，但是怎么样选择一辆称心如意的车成了最主要的问题，大众汽车是汽车行业中的领先品牌，是很多用户的首选，但是由于大众旗下的品牌繁多，因此给客户在了解这些品牌信息上带来了某些不必要的麻烦，所以为大众建立一个完美的门户网站是不可或缺的。
原有的大众汽车网站内容虽然丰富，但更多的仅局限在汽车本身信息的介绍，无法让客户了解到与汽车相关的更多其它方面的信息，因此在本课题所设计大众汽车网站将在原来网站的基础上做一些改善。该网站设计得体、增加了人信息，是个更为实用且有文化气息的网站。
（二）课题开发的意义
随着网络的迅速发展，各种各样的网站也随之出现。人们习惯通过网络来了解相关的时事、新闻，很多用户在想了解一件商品时都会选择在网上浏览，再去实体店去体验一下。选择汽车也是如此，用户一定会先在网上查一下品牌的性能、价格等等信息。因此大众汽车网站开发的目的就是为了让用户更加直观的了解我们品牌旗下汽车的详细信息，方便用户更理性的去选择。当用户浏览我们网站时，一定会更加的心动，购买的欲望更加强烈。
二、开发技术与工具简介
（一）开发工具选择
大众汽车网主要是在Win7系统下完成，开发工具有：Dreamweaver CS6、PhotoShop CS5、Sublime等。
（二）开发技术介绍
1、HTML技术
超文本标记语言HTML是一种语言建立Web文档，通过标签类型指令（标签）、图像、声音、图片、文字、动画、电影和电视等。超文本传输协议指定的规章制度，浏览器应该遵循运行the.http文件，使操作HTML协议的浏览器有统一的规则和标准运行超文本。
2、CSS技术
CSS是层叠样式表，通过CSS可以控制HTML或者XML标签的表现形式，W3C推荐使用CSS的布局方法，使得Web设计更加顺畅，结构更加清晰。
3、javascript技术
JavaScript是Web页面中的一种脚本编程语言，它不需要编译，是直接存放在HTML的页面当中，通过解释执行，把静态页面转化成交互并响应事件的动态页面，可以实现各种动态效果，例如：图片轮播、表单图片、大屏广告等等。
总体设计
（一）主要栏目
大众汽车网站的主要目的就是为了方便客户更加深入的了解企业的信息，最新的新闻。主要设计了7大栏目：首页、关于我们、新闻中心、社会责任、品牌型号、联系我们、用户登录。所有的页面都可以链接到同级的页面，无论在任何一个页面都可以链接到首页。如图3-1所示：
◆ 首页：主要是显示大众汽车的旗下品牌、用户评论、品牌型号、联系方式等等。
◆ 关于我们：设计了长期业务与品牌的相关领导人的信息。
◆ 新闻中心：这个页面主要展示最新的企业新闻与信息，可以让用户更多的了解大众汽车的实时新闻。
◆ 社会责任：主要开展改善中国偏远、贫困地区希望小学硬件教学条件，激发贫困地区小朋友学习的积极性，成为中国有用的人才。
◆ 品牌型号：大众汽车旗下分为很多品牌与车型，并且在此设计了二级菜单让人更加了解大众汽车。
◆ 联系我们：固定的账号与密码，如果输入不对，即显示无法登录。
◆ 用户登录：所有信息填写格式成功以后，设计跳转页面，3秒钟跳转到首页。
图3-1网站栏目效果图
（二）页面设计风格
1、颜色搭配
颜色的设计会给人带来更直接的体验，因此合理的搭配颜色，是整个网站最重要的部分。当人们在看见自己心爱的汽车时，总会想着它给我们带来的炫酷感，汽车网站自然是给人一种炫丽、大气的视觉效果。因此在选择颜色时，以黑、灰、白合
版权保护: 本文由 hbsrm.com编辑，转载请保留链接: www.hbsrm.com/jsj/jsjkxyjs/2536.html
