基于HTML5实现的网页汽车商店

邱丑丑

发布日期: 2019-07-31 09:55:02 浏览量: 99
评分:
star star star star star star star star star star
*转载请注明来自write-bug.com

摘 要

随着人们生活质量的提高,有车的人是越来越多,无论你是有钱人还是没钱人,要么就是去买车,要么就是在买车的路上。而在当前,互联网在人们生活中的应用越来越频繁,死守传统的销售模式而不拥抱互联网的销售手段,将越来越难以打开销量。在移动互联网的时代,将销售模式与互联网结合起来的汽车销售网页的设计,使得人们可以更加方便地了解各类汽车信息和更加方便地购买汽车产品。这次的汽车商店网页设计,是以汽车及其配件的销售为题材,用HTML5及相关手段制作的一个网上汽车销售的网页。文章先介绍了前端技术的起源历史与发展以及未来前景,然后详细介绍了制作过程,最后总结这次的制作心得。

关键字:网页;HTML5;汽车

一、背景

通过网络进行汽车销售,是这个时代发展的必然结果,是随着网络的普及和电子商务概念的兴盛而兴起的。这种全新出现的新型汽车销售形式,与传统通过4s店面进行销售的方式相比优势显著:

  • 降低了汽车销售成本

  • 改变汽车传统的了解和购买方式,使用网络平台了解汽车信息并购买,使得商业活动没有空间和时间的限制

  • 汽车信息的传递更有效率和直观,新车信息上传后,人们可以立即了解咨询,交易可以马上进行,从而大大提高了汽车交易的效率

正是由于这些巨大的优势,汽车商店网页才能得以迅速地开拓市场。汽车商店网页主要是借助网页作为交易平台,将汽车的各项指标,优势劣势,精美图片发布到网络上,人们能够借助网络登录汽车商店网页来查看各种汽车的信息并提交订单或者预定汽车,实现在线交易。

二、前端开发技术的起源及历史

所谓前端是指针对浏览器的开发,代码在浏览器运行。而与之相对的后则是针对服务器的开发,代码在服务器运行。然而在互联网发展的早期,前后端开发是一体的,前端代码是后端代码的一部分。

早在1991年的时候HTML就已经作为前端开发的统一语言,HTML代码部门其实很简单,任何一款浏览器在打开任意网页后检查页面源代码,就可以看到由很多不同的标识表记标帜加上中间的标识表记标帜名构成的标识表记标帜的作用只有一个,就是格式化的内容,例如文字的大小、颜色、位置等,以达到网站制作者想要表达的展示效果。所以网页的早期形态大都完全基于HTML页面,并且所有内容都是静态的。

HTML5中的5代表版本号,可以简单地理解为第五代HTML尺度,实际在此之前有非常多的非主流版本的更新,不过这一代尺度提出了很多重大的功能更新。例如:Canvas标识表记标帜,轻松地实现网页动画与游戏;直接的多媒体支持,不再需要FLASH来提供多媒体内容;WebSocket,使得用户可以不借助任何额外的插件就能够通过网页来制作游戏及其他软件。H5的诞生不是巧合也不是人为炒作,而是历史的一定选择,这是历史的潮流,不能否认当今是互联网飞速发展的年代。

三、HTML5的国内外发展现状与前景

3.1 HTML5存在的意义

HTML5的优点即是“一次性开发,多次分发”,它使得一次设计适应不同终端成为可能。信息流架构应用化都是直接在WEB端抓取数据,而HTML5可以直接使用跨平台数据面不使用后台API,大大降低了研发维护成本而且呈现的效果几乎没有什么区别。HTML5最大的意义在于改变WEB文档的结构方式,借助于header, foot, section, article这些标配、标签我们可以实现更具结构化语义化的WEB文档。这样,搜索引擎更容易索引到WEB站点,我们可以搜索到更快更准备的信息。HTML5的诞生,来自对浏览器和网页开发技术的改进,是一系列Web标准草案的集合。它不仅仅局限于HTML语言本身,还包括了CSS3以及JavaScript语言里新增的函数和功能。HTML5始终坚持不断发展,并很快得到广泛认可,这与其在制定之初就确立的核心理念有很大的关系。这些核心理念就是我们今天在W3C站点上所看到的HTML5设计原理这份文档,概括起来就是——兼容性、实用性、互操作性以及普遍可访问性。

3.2 HTML5的国内外发展现状

酷炫、快速、跨平台,在HTML5出现前,这些词从未这样紧紧与网页相关联在一起。HTML5改变了人们脑海中对传统网页的印象,取而代之的是堪比桌面程序和移动原生应用程序的用户体验。相比HTML4,现在的网页可以做到的显然要更多:音频、视频不再需要插件的支持,避免插件安装失败等可能导致的问题;JavaScript能力大为增强,借助HTML中新增的Canvas元素,更是能在网页中进行2D和3D图形、图像的实时绘制;CSS3的强大和良好的支持度让网页变得更加生动,同时还可以利用浏览器本身的硬件加速完成transition、animation等动画效果以及合成;网页还可以直接通过JavaScript访问摄像头、陀螺仪等等硬件设备。等等这些,所有的目的只有一个——让网页可以做得和原生应用一样强大、一样优秀。美国的HTML5市场经过数十年的长期发展之后,早进入理性的状态,不是炒作概念或者单纯的市场宣讲活动,甚至关注度出现了下降,已经变成了在web技术各个独立领域深度探索和创新。而中国的HTML5市场在2015年的才出现第一次的火热状态,相比于美国市场出现了更进一步的延后。

3.3 HTML5的发展前景

随着HTML5技术的发展,越来越多的商家倾向于基于HTML5的游戏开发。我国拥有世界上较大的游戏市场、最多的游戏用户,然而在游戏的研发以及发行上与国际市场仍有差距。目前很多HTML5游戏发行商在找靠谱的合作伙伴和产品,优质产品是现阶段的稀缺资源,这也算是当下HTML5游戏的一个市场机遇。此外,HTML5是移动互联网前端的主流开发语言,目前还没有任何一个前端的开发语言能取代HTML5的位置,无论做手机网站还是手机app应用,前端的样式都是HTML5开发,通过手机与电脑上网的使用率来看,目前通过手机上网的用户远远高于电脑端,这些数据都足以证明未来的移动互联网的发展前景,而HTML5又作为移动互联网主流前端开发语言,所以HTML5的发展前景一片光明。

四、设计思想

这次的网页汽车商店以汽车及其配件的销售为题材,制作的一个网上汽车销售的网页。

4.1 网页的整体设计

网页的整体设计采用了课堂上学的划分区域的方式,并且采用了div + css 的排版,使得整个页面的样式丰富多彩,形式多种多样。即使同样的素材,也可以通过css不同的设置而变得多彩。同时css还将页面的版式固定,不会因为显示器的大小的变化而变化,而使得页面的兼容性增加。

4.2 “广告”的引入

为了丰富网页的多样性,使得汽车销售网页更加真实化,我还在网页的左右两边、右上脚以及中间适当处添加了广告,当然,仅仅是相应的图片。

4.3 登录注册页面 

登录和注册页面使用了javascript脚本语言,帐户名验证和密码验证,使得网站在运行时的数据交换率减少,也在一定程度上提高了网页的加载速度。同时使用javascript还能做出更多丰富多彩的,页面特效,使得页面更加绚丽。

五、部分实现代码及注释

5.1 网页中汽车外饰用品的罗列

  1. <div id="mymall" class="fl bcolor2">
  2. <ul><h3><a name="B">外饰用品<sup><img src="../images/xinpin.gif" /></sup></a></h3>
  3. <hr width="90%"/>
  4. <li><a href="#" target="_blank"><p>车衣</p></a></li>
  5. <li><a href="#" target="_blank"><p>车贴</p></a></li>
  6. <li><a href="#" target="_blank"><p>防滑链</p></a></li>
  7. <li><a href="#" target="_blank"><p>汽车贴膜</p></a></li>
  8. <li><a href="#" target="_blank"><p>爆闪灯</p></a></li>
  9. <li><a href="#" target="_blank"><p>车牌架</p></a></li>
  10. <li><a href="#" target="_blank"><p>车标</p></a></li>
  11. <li><a href="#" target="_blank"><p>密封条</p></a></li>
  12. <li><a href="#" target="_blank"><p>晴雨挡</p></a></li>
  13. <li><a href="#" target="_blank"><p>保险杠</p></a></li>
  14. <li><a href="#" target="_blank"><p>涡轮</p></a></li>
  15. <li><a href="#" target="_blank"><p>内车轮</p></a></li>
  16. </ul>
  17. </div>

5.2 网页中汽车内饰用品的罗列

  1. <div id="mymall" class="fl bcolor1">
  2. <ul><h3><a name="A">内饰用品<sup><img src="../images/xinpin.gif" /></sup></a></h3>
  3. <hr width="90%"/>
  4. <li><a href="#" target="_blank"><p>汽车坐垫</p></a></li>
  5. <li><a href="#" target="_blank"><p>汽车座套</p></a></li>
  6. <li><a href="#" target="_blank"><p>方向盘套</p></a></li>
  7. <li><a href="#" target="_blank"><p>汽车脚垫</p></a></li>
  8. <li><a href="#" target="_blank"><p>汽车香水</p></a></li>
  9. <li><a href="#" target="_blank"><p>汽车挂件</p></a></li>
  10. <li><a href="#" target="_blank"><p>儿童座椅</p></a></li>
  11. <li><a href="#" target="_blank"><p>汽车摆件</p></a></li>
  12. <li><a href="#" target="_blank"><p>车钥匙扣</p></a></li>
  13. <li><a href="#" target="_blank"><p>车置物箱</p></a></li>
  14. <li><a href="#" target="_blank"><p>后备箱垫</p></a></li>
  15. <li><a href="#" target="_blank"><p>车灭火器</p></a></li>
  16. <li><a href="#" target="_blank"><p>防静电物</p></a></li>
  17. <li><a href="#" target="_blank"><p>小套饰</p></a></li>
  18. </ul>
  19. </div>

5.3 网页中立体滚动球的制作

  1. <div id="qiu" class="bcolor fr">
  2. <a href="#A">内饰用品<sup><img src="../images/rexiao.gif"</sup></sup></a>
  3. <a href="#A">汽车坐垫<sup><img src="../images/rexiao.gif"</sup></sup></a>
  4. <a href="#A">汽车座套</a>
  5. <a href="#A">方向盘套</a>
  6. <a href="#A">汽车挂件<sup><img src="../images/xinpin.gif" /></sup></a>
  7. <a href="#A">车灭火器</a>
  8. <a href="#A">小套饰<sup><img src="../images/xinpin.gif" /></sup></a>
  9. <a href="#A">防静电饰品<sup><img src="../images/xinpin.gif" /></sup></a>
  10. <a href="#A">汽车摆件</a>
  11. <a href="#A">车钥匙扣<sup><img src="../images/xinpin.gif" /></sup></a>
  12. <a href="#B">车衣</a>
  13. <a href="#B">车贴<sup><img src="../images/xinpin.gif" /></sup></a>
  14. <a href="#B">防滑链</a>
  15. <a href="#B">汽车贴膜</a>
  16. <a href="#B">爆闪灯</a>
  17. <a href="#B">车牌架</a>
  18. <a href="#B">车标</a>
  19. <a href="#B">密封条</a>
  20. <a href="#B">晴雨挡</a>
  21. <a href="#B">保险杠</a>
  22. <a href="#B">涡轮<sup><img src="../images/rexiao.gif" /></sup></a>
  23. <a href="#B">内车轮</a>
  24. <a href="#C">涡轮增压</a>
  25. <a href="#C">后视灯<sup><img src="../images/rexiao.gif" /></sup></a>
  26. <a href="#C">雪地胎</a>
  27. <a href="#C">疝气灯<sup><img src="../images/xinpin.gif" /></sup></a>
  28. <a href="#C">日行灯</a>
  29. <a href="#C">挡泥板</a>
  30. <a href="#C">行李架</a>
  31. <a href="#C">车位锁</a>
  32. <a href="#C">鲨鱼鳍</a>
  33. <a href="#C">倒车灯</a>
  34. <a href="#C">尾翼</a>
  35. <a href="#C">发动机护板</a>
  36. </div>

六、制作心得

通过此次网页制作的过程,我学到了很多,首先我学会了HTML网页制作语言,虽然我学到的仅仅只是一部分,但是我明白了作为网页设计语言,HTML5的强大之处,使得我对这门语言的看法发生了根本性的转变,希望可以接触到更多的关于这方面的知识。当然在网页制作的过程中,我也遇到了许许多多的问题,但是通过不懈的努力,以及同学们的互帮互助,使我克服了这些困难。更多的希望在以后的学习和生活中我都会像在这次制作设计中一样,帮助别人,请教别人。希望老师在我学习的过程中多批评、多指教,感谢老师对我的教导。

七、不足之处

这次的网页汽车商店的设计,整体的设计思想是很完善的,但是由于水平有限、经验不足等,制作出来的成品还是存在这样或那样的瑕疵。比如,虽然我在网页的顶端加上了一个搜索栏,但是具体的搜索功能还有待完善;其次,右上角的购物车、我的车库以及联系客服栏目还没具体的实现……不过,这次的网页设计极大的唤起了我对网页设计的热情,从而也使我的个人技术进一步的提升。

八、参考文献

[1] 邢增智,郭龙,杜豪,刘顺林,彭永凤,段兴悦。 基于HTML5与CSS3的工业物联网工程中心网站开发[J]. 物联网技术,2017,(03):92-93+97.

[2] 郭鲁。 基于HTML5的Web App前端开发的前景分析[J]. 南方农机,2017,(02):92.

[3] 盛婷婷。 基于HTML5技术的移动Web前端设计与开发分析[J]. 电子制作,2016,(19):46-47+75.

[4] 王燕妮。 HTML5应用现状分析[J]. 无线互联科技,2016,(13):28-29.

上传的附件 cloud_download HTML课程设计.7z ( 7.35mb, 0次下载 )
error_outline 下载需要9点积分

发送私信

精品资源尽在此

49
文章数
0
评论数
最近文章
eject