基于HTML5的Web婚紗網(wǎng)站設計與實現(xiàn)

侯永廣+任華蕊

摘要：隨著網(wǎng)絡快速發(fā)展，人們可以從互聯(lián)網(wǎng)中快速獲取、發(fā)布、傳遞信息，同時互聯(lián)網(wǎng)也在改變?nèi)藗兊膫鹘y(tǒng)觀念和生活方式，互聯(lián)網(wǎng)在人們的生活中扮演著越來越重要的角色，為適應不斷發(fā)展的 Web 技術(shù)的應用需求，各種基于 HTML5 技術(shù)的移動應用大量涌現(xiàn)。文章分析HTML5的技術(shù)特點，使用javascript Dom等前端WEB技術(shù)進行網(wǎng)站設計與實現(xiàn)，采用VUEJS渲染頁面數(shù)據(jù)。

關(guān)鍵詞：HML5；網(wǎng)頁設計；WebStorm；DIV+CSS技術(shù)

中圖分類號：TP393 文獻標識碼：A 文章編號：1009-3044（2017）25-0196-02

1 概述

婚姻是在我國傳統(tǒng)觀念中歷來是神圣莊嚴的，婚姻制度是一種重要的社會規(guī)范，是中國文化的重要組成部分。結(jié)婚對每個人來說是一輩子一次的重要事情，人們對待這件事情是嚴肅而隆重的。隨之而來的結(jié)婚照是兩人幸福見證的開始，尤其是年輕人，隨著人們生活水平的提高，結(jié)婚照已被越來越多的新人所重視。[1]以前中國人習慣租賃婚紗，不是因為經(jīng)濟條件不夠，而是還沒有認識到婚紗意義和文化?，F(xiàn)在人們會把婚紗作為一生的情感見證，很好的保存、很好地將它傳承后代，這是一種文化。披上漂亮的婚紗，照出高質(zhì)量的結(jié)婚照作為自己一輩子婚姻幸福的開端，是現(xiàn)在人們積極最求做的事情，也非常樂意投入。

隨著科學技術(shù)的不斷創(chuàng)新發(fā)展，尤其是移動互聯(lián)網(wǎng)的發(fā)展給用戶一種全新的業(yè)務體驗，節(jié)省了人們的時間，方便人們購物、交流，目前已成為一個潛力巨大、發(fā)展迅速、競爭異常激烈的信息化技術(shù)領域。對于婚紗影樓來說，面對信息時代的機遇與挑戰(zhàn)，利用先進的技術(shù)手段來提高影樓的管理水平，這無疑是一條行之有效的途徑。[2]現(xiàn)在越來越多的年輕人喜歡網(wǎng)上購物，也喜歡在網(wǎng)上選擇照婚紗照的影樓，節(jié)約時間，提高效率。新技術(shù)的出現(xiàn)為這種方式提供了可能，婚紗網(wǎng)站就是在這種環(huán)境下應運而生。同時，作為個性化需求最突出的服裝領域，其設計系統(tǒng)無論是在開發(fā)上還是在應用上都未得到應有的重視，從根本上阻礙了服裝個性定制模式的發(fā)展。[3]技術(shù)不斷革新，使人們對網(wǎng)站的體驗度要求愈來愈高，HTML5技術(shù)的問世，能夠跨平臺、不受終端產(chǎn)品和操作系統(tǒng)的限制，開發(fā)人員不需要再為相同應用開發(fā)多種版本，減輕了開發(fā)與維護工作量等優(yōu)勢，對已有的婚紗網(wǎng)站提供了強有力的支持?；诖?，采用HTML5及其相關(guān)技術(shù)圍繞婚紗購物網(wǎng)站這一主題進行探討和研究，既實現(xiàn)了電腦版又并實現(xiàn)了移動端，為客戶提供一個企業(yè)活動信息的信息平臺。同時實現(xiàn)企業(yè)與客戶間的信息交互，實現(xiàn)信息的傳遞和客戶服務和客戶關(guān)系的功能。

2 HTML5技術(shù)

HTML5是2014年制定發(fā)布的最新版超文本標記語言，從狹義上講是指HTML5網(wǎng)頁標記語言本身，從廣義上講主要是指HTML5、CSS3、Java Script、Web Application API、Device API等技術(shù)，是最新宣布的Web應用技術(shù)標準。具有以下幾方面的優(yōu)勢：

1） 跨平臺性?？缙脚_性是HTML5的一個非常重要的優(yōu)點，它可以跨平臺使用，實現(xiàn)PC端與移動端的同步上線。應用開發(fā)人員不需要對不同的平臺做專門有針對行的開發(fā)，具有很好的移植性，跨平臺性非常強大。

2） 及時更新。HTML5技術(shù)不同于iOS，Android等開發(fā)技術(shù)，在產(chǎn)品上線或者更新的時候，必然要通過APP store等平臺的審核才能發(fā)布，它可以及時更新，隨時上線，節(jié)省大量的時間。

3） 網(wǎng)頁具有自適應性和多媒體性。利用它實現(xiàn)的網(wǎng)頁，能夠?qū)崿F(xiàn)“一次設計，普遍適用”。設計好的網(wǎng)頁可能根據(jù)顯示屏幕的大小，自動調(diào)整頁面布局。同時，它還支持網(wǎng)頁端的Audio、Video等多媒體功能，為開發(fā)人員提供一套多功能的處理音頻與視頻的 API。

4） 存儲本地化。HTML5實現(xiàn)網(wǎng)頁元素存儲的本地化，能夠讓程序的啟動時間更短，內(nèi)容加載速度更快，為用戶帶來更好的感受體驗效果。

3 系統(tǒng)總體架構(gòu)

網(wǎng)站主要包括網(wǎng)站首頁、作品展示、優(yōu)惠活動、關(guān)于我們、客戶點評、在線預約以及移動端等七個大功能，如圖1 所示。

網(wǎng)站首頁：使用導航展現(xiàn)本網(wǎng)站所有的模塊。首頁是整個網(wǎng)站的連接點。

作品展示：此頁面展現(xiàn)了MUSE紗攝影店所拍的各種婚紗，通過點擊圖片切換大小的方式展示我們的作品。每個頁面采用不同的方式來實現(xiàn)出簡單美觀的網(wǎng)站。

優(yōu)惠活動：不管是節(jié)日還是假期都會有一些優(yōu)惠的制定，也會更具不同的消費采取相應的優(yōu)惠。

關(guān)于MUSE：傳達本網(wǎng)站的有關(guān)信息，增加對MUSE攝影的理解。

客戶點評：讓使用過的客戶對MUSE提出寶貴的意見，讓MUSE加以改進。也能讓其他消費者更好地了解MUSE婚紗。

在線預約：能讓客戶更方便、快捷的預約到時間。

移動端：展現(xiàn)手機的大小，體現(xiàn)與PC端相同的作用。

4 關(guān)鍵模塊設計與實現(xiàn)

4.1 首頁輪播效果

輪播圖可以隨機亂序顯示，頁面每次刷新后顯示的第一張圖可能會不一樣，部分網(wǎng)站的輪播圖會無縫過渡到移動版頁面上，圖的切換時間是可控的，一般是首屏眼睛熱點讀取時間內(nèi)（3秒到4秒）完成切換，在豐富頁面體驗，信息傳播、視覺傳達這三方面追求平衡點。其實現(xiàn)主要采用HTML5+CSS技術(shù)與jQurey相結(jié)合，JQuery技術(shù)的運用使代碼編寫工程量小，看起來更加簡潔。具體實現(xiàn)代碼如圖2所示。

4.2 作品展示

此頁面展現(xiàn)了婚紗攝影店所拍的各種婚紗，頁面中有內(nèi)容導航，類似選項卡，點擊切換不同的內(nèi)容，這些內(nèi)更具不同的時間段劃分。這樣能夠有利于客戶查看。由于數(shù)據(jù)的信息大，采用VUE.JS渲染頁面數(shù)據(jù)。具體實現(xiàn)代碼如圖3所示。

4.3 導航制作

導航中關(guān)于首頁、欄目頁的鏈接是獲得內(nèi)部鏈接最重要的來源。由于內(nèi)頁數(shù)量多，錨文本指向首頁和欄目頁，所傳遞的權(quán)重也就相應越高。使用CSS代替Flash實現(xiàn)美觀的視覺效果。導航所用到的技術(shù)是HTML里的無序列表ul，當鼠標移入通過jQuery、CSS技術(shù)對其顏色等屬性進行更改展現(xiàn)出效果。具體實現(xiàn)代碼如圖4所示。

5 結(jié)束語

移動互聯(lián)網(wǎng)領域正在經(jīng)歷跨越式的更新，新的技術(shù)、新的思想會不斷地更新發(fā)展，事物發(fā)展要順應時代發(fā)展趨勢，充分發(fā)揮新技術(shù)優(yōu)勢，不斷更新已有系統(tǒng)，將最好的效果呈現(xiàn)在用戶的面前。本文介紹了以婚紗為主題，使用HTML5、Javascript等相關(guān)技術(shù)，設計并實現(xiàn)了《MUSE》婚紗網(wǎng)。HTML5技術(shù)以其跨平臺性、及時更新、網(wǎng)頁自適應和多媒體等獨特優(yōu)勢，贏得了應用程序開發(fā)人員的認可。相信隨著HTML5技術(shù)標準的成熟、硬件性能的提高和瀏覽器的優(yōu)化，今后絕大部分Web 應用將直接使用HTML5技術(shù)開發(fā)。

參考文獻：

[1] 黃信樂.基于Web的婚紗攝影商務系統(tǒng)設計與實現(xiàn)[D].廈門：廈門大學，2014.

[2] 曲紹東.基于.NET的婚紗影樓管理系統(tǒng)的設計與實現(xiàn)[D].吉林：吉林大學，2014.

[3] 李丙洋.基于個性定制的婚紗設計系統(tǒng)的研究[D].天津：天津工業(yè)大學，2015.endprint