基于HTML5的Web婚纱网站设计与实现

侯永广+任华蕊

摘要：随着网络快速发展，人们可以从互联网中快速获取、发布、传递信息，同时互联网也在改变人们的传统观念和生活方式，互联网在人们的生活中扮演着越来越重要的角色，为适应不断发展的 Web 技术的应用需求，各种基于 HTML5 技术的移动应用大量涌现。文章分析HTML5的技术特点，使用javascript Dom等前端WEB技术进行网站设计与实现，采用VUEJS渲染页面数据。

关键词：HML5；网页设计；WebStorm；DIV+CSS技术

中图分类号：TP393 文献标识码：A 文章编号：1009-3044（2017）25-0196-02

1 概述

婚姻是在我国传统观念中历来是神圣庄严的，婚姻制度是一种重要的社会规范，是中国文化的重要组成部分。结婚对每个人来说是一辈子一次的重要事情，人们对待这件事情是严肃而隆重的。随之而来的结婚照是两人幸福见证的开始，尤其是年轻人，随着人们生活水平的提高，结婚照已被越来越多的新人所重视。[1]以前中国人习惯租赁婚纱，不是因为经济条件不够，而是还没有认识到婚纱意义和文化。现在人们会把婚纱作为一生的情感见证，很好的保存、很好地将它传承后代，这是一种文化。披上漂亮的婚纱，照出高质量的结婚照作为自己一辈子婚姻幸福的开端，是现在人们积极最求做的事情，也非常乐意投入。

随着科学技术的不断创新发展，尤其是移动互联网的发展给用户一种全新的业务体验，节省了人们的时间，方便人们购物、交流，目前已成为一个潜力巨大、发展迅速、竞争异常激烈的信息化技术领域。对于婚纱影楼来说，面对信息时代的机遇与挑战，利用先进的技术手段来提高影楼的管理水平，这无疑是一条行之有效的途径。[2]现在越来越多的年轻人喜欢网上购物，也喜欢在网上选择照婚纱照的影楼，节约时间，提高效率。新技术的出现为这种方式提供了可能，婚纱网站就是在这种环境下应运而生。同时，作为个性化需求最突出的服装领域，其设计系统无论是在开发上还是在应用上都未得到应有的重视，从根本上阻碍了服装个性定制模式的发展。[3]技术不断革新，使人们对网站的体验度要求愈来愈高，HTML5技术的问世，能够跨平台、不受终端产品和操作系统的限制，开发人员不需要再为相同应用开发多种版本，减轻了开发与维护工作量等优势，对已有的婚纱网站提供了强有力的支持。基于此，采用HTML5及其相关技术围绕婚纱购物网站这一主题进行探讨和研究，既实现了电脑版又并实现了移动端，为客户提供一个企业活动信息的信息平台。同时实现企业与客户间的信息交互，实现信息的传递和客户服务和客户关系的功能。

2 HTML5技术

HTML5是2014年制定发布的最新版超文本标记语言，从狭义上讲是指HTML5网页标记语言本身，从广义上讲主要是指HTML5、CSS3、Java Script、Web Application API、Device API等技术，是最新宣布的Web应用技术标准。具有以下几方面的优势：

1） 跨平台性。跨平台性是HTML5的一个非常重要的优点，它可以跨平台使用，实现PC端与移动端的同步上线。应用开发人员不需要对不同的平台做专门有针对行的开发，具有很好的移植性，跨平台性非常强大。

2） 及时更新。HTML5技術不同于iOS，Android等开发技术，在产品上线或者更新的时候，必然要通过APP store等平台的审核才能发布，它可以及时更新，随时上线，节省大量的时间。

3） 网页具有自适应性和多媒体性。利用它实现的网页，能够实现“一次设计，普遍适用”。设计好的网页可能根据显示屏幕的大小，自动调整页面布局。同时，它还支持网页端的Audio、Video等多媒体功能，为开发人员提供一套多功能的处理音频与视频的 API。

4） 存储本地化。HTML5实现网页元素存储的本地化，能够让程序的启动时间更短，内容加载速度更快，为用户带来更好的感受体验效果。

3 系统总体架构

网站主要包括网站首页、作品展示、优惠活动、关于我们、客户点评、在线预约以及移动端等七个大功能，如图1 所示。

网站首页：使用导航展现本网站所有的模块。首页是整个网站的连接点。

作品展示：此页面展现了MUSE纱摄影店所拍的各种婚纱，通过点击图片切换大小的方式展示我们的作品。每个页面采用不同的方式来实现出简单美观的网站。

优惠活动：不管是节日还是假期都会有一些优惠的制定，也会更具不同的消费采取相应的优惠。

关于MUSE：传达本网站的有关信息，增加对MUSE摄影的理解。

客户点评：让使用过的客户对MUSE提出宝贵的意见，让MUSE加以改进。也能让其他消费者更好地了解MUSE婚纱。

在线预约：能让客户更方便、快捷的预约到时间。

移动端：展现手机的大小，体现与PC端相同的作用。

4 关键模块设计与实现

4.1 首页轮播效果

轮播图可以随机乱序显示，页面每次刷新后显示的第一张图可能会不一样，部分网站的轮播图会无缝过渡到移动版页面上，图的切换时间是可控的，一般是首屏眼睛热点读取时间内（3秒到4秒）完成切换，在丰富页面体验，信息传播、视觉传达这三方面追求平衡点。其实现主要采用HTML5+CSS技术与jQurey相结合，JQuery技术的运用使代码编写工程量小，看起来更加简洁。具体实现代码如图2所示。

4.2 作品展示

此页面展现了婚纱摄影店所拍的各种婚纱，页面中有内容导航，类似选项卡，点击切换不同的内容，这些内更具不同的时间段划分。这样能够有利于客户查看。由于数据的信息大，采用VUE.JS渲染页面数据。具体实现代码如图3所示。

4.3 导航制作

导航中关于首页、栏目页的链接是获得内部链接最重要的来源。由于内页数量多，锚文本指向首页和栏目页，所传递的权重也就相应越高。使用CSS代替Flash实现美观的视觉效果。导航所用到的技术是HTML里的无序列表ul，当鼠标移入通过jQuery、CSS技术对其颜色等属性进行更改展现出效果。具体实现代码如图4所示。

5 结束语

移动互联网领域正在经历跨越式的更新，新的技术、新的思想会不断地更新发展，事物发展要顺应时代发展趋势，充分发挥新技术优势，不断更新已有系统，将最好的效果呈现在用户的面前。本文介绍了以婚纱为主题，使用HTML5、Javascript等相关技术，设计并实现了《MUSE》婚纱网。HTML5技术以其跨平台性、及时更新、网页自适应和多媒体等独特优势，赢得了应用程序开发人员的认可。相信随着HTML5技术标准的成熟、硬件性能的提高和浏览器的优化，今后绝大部分Web 应用将直接使用HTML5技术开发。

参考文献：

[1] 黄信乐.基于Web的婚纱摄影商务系统设计与实现[D].厦门：厦门大学，2014.

[2] 曲绍东.基于.NET的婚纱影楼管理系统的设计与实现[D].吉林：吉林大学，2014.

[3] 李丙洋.基于个性定制的婚纱设计系统的研究[D].天津：天津工业大学，2015.endprint