青島著名建筑網(wǎng)站設計與實踐研究

籍遠明　徐文舸

摘 要：隨著互聯(lián)網(wǎng)和web技術(shù)的飛速發(fā)展，用于構(gòu)建網(wǎng)頁的主要語言HTML也在不斷完善和進步，HTML5作為下一代互聯(lián)網(wǎng)的標準，是構(gòu)建和呈現(xiàn)互聯(lián)網(wǎng)內(nèi)容的一種語言方式，給web世界帶來了一次全新的變革。本文基于HTML5技術(shù)，設計開發(fā)了一個青島著名建筑網(wǎng)站系統(tǒng)，在實際應用中論證了HTML5可以為網(wǎng)站開發(fā)提供更便利、更豐富、更高效的平臺。

關(guān)鍵詞：HTML5；著名建筑；網(wǎng)頁設計

中圖分類號：TP393 文獻標識碼：A 文章編號：1671-2064（2018）07-0020-01

青島是一座景色優(yōu)美、風光旖旎、享譽國內(nèi)外的海濱旅游城市，青島之美，絕不局限于波瀾壯闊的大海和層巒疊翠的高山，青島的建筑也是中西合璧、各具特色的風景之一，但凡來過青島的人們，都會為哪些極具特色的建筑而津津樂道。本文基于HTML5軟件設計一個具有鮮明特色、功能實用青島著名建筑網(wǎng)站，讓人們行走在青島的特色建筑之間，從另一個角度來欣賞和領(lǐng)略這個城市的文化韻味，感受和體會它的歷史脈絡。

1 網(wǎng)站設計

HTML5是HTML的第5個版本，也是最新版本，被認為是未來互聯(lián)網(wǎng)核心技術(shù)之一，作為當下最為熱門的WEB技術(shù)，已經(jīng)在互聯(lián)網(wǎng)行業(yè)得到了普遍應用，特別是基于HTML5的WEB應用，更是給用戶帶來了感知體驗上的巨大飛躍，并將WEB全面帶入一個嶄新平臺，在這個HTML5應用平臺上，視頻、音頻、圖像、動畫以及同電腦的交互都被標準化，使得互聯(lián)網(wǎng)應用的一次開發(fā)、跨平臺、跨終端運行成為可能。本文利用HTML5設計和開發(fā)一個青島著名建筑網(wǎng)站，該網(wǎng)站的總體設計思路是：以文字、圖片、動畫、視頻等為元素，基于HTML5技術(shù)，構(gòu)建成為一個前端與后臺互動交流的平臺。為實現(xiàn)網(wǎng)站設計思想，考慮將網(wǎng)站分為兩大板塊，主版塊和輔助板塊，主版塊主要包括網(wǎng)站Logo、歡迎頁面、網(wǎng)站首頁和著名建筑導航等，輔助板塊包括有用戶注冊登記、新聞視窗、地圖導航和留言互動等內(nèi)容。

2 網(wǎng)站功能模塊

打開青島著名建筑網(wǎng)站，首先映入眼簾的是網(wǎng)站封面，即該網(wǎng)站的歡迎頁面，在歡迎頁面中創(chuàng)建header標簽作為頁眉，頁眉背景顏色設置為天藍漸變色，左上角設置本網(wǎng)站的Logo圖案，頁眉正中是“歡迎來到美麗青島”的歡迎詞。下方中間設置一個固定寬高的div，設置overflow屬性為hidden，在這個div中設置一個由彩色花邊四周包圍著的，鑲嵌其中一幅反映青島紅瓦綠樹、碧海藍天景色建筑物的鳥瞰圖片，為提高網(wǎng)站的封面藝術(shù)效果，將該圖片制作成從左往右滾動的動畫模式。

在任何一個網(wǎng)站的首頁中，導航欄一定是必不可少的元素，一般網(wǎng)頁的導航欄通常設計在一個頁面的靠上方。本網(wǎng)站設計的導航欄分為首頁、新聞視窗、著名建筑、地圖導航、留言板五個板塊，利用超鏈接，當點擊導航欄的任一部分后，分別跳轉(zhuǎn)到首頁、新聞視窗、著名建筑物列表、地圖導航、留言板等對應的五個頁面。使用偽類選擇器給導航欄添加了當鼠標放在導航欄上的樣式：

header>div：hover {

background： rgba（0， 171， 235， 0.8）；

}

當鼠標停留在導航欄上時，導航欄的背景顏色會變成藍色；當鼠標離開時，導航欄的背景會恢復到黑色，方便實現(xiàn)超鏈接功能。

在網(wǎng)站的第二頁面中，運用了Bootstrap中的輪播圖組件，設置一個div，給它加上id為“myCarousel”，類名為“carousel”和“slide”，在這個div中加上輪播的指針、輪播的內(nèi)容和輪播的導航按鈕，將三張體現(xiàn)青島地標建筑的圖片加入輪播項目當中，對于突出本網(wǎng)站主題，起到了畫龍點睛的效果。

在著名建筑導航板塊，應用了turn.js插件格式，勾勒出一個翻書效果的古典建筑頁面，來展示青島各具特色、風格迥異的著名建筑美景，給人一種賞心悅目的感受。首先引入turn.js的一系列文件，再調(diào)用Ajax請求，請求并動態(tài)生成一個書籍封面以及包括27張圖文并茂的青島著名建筑詳情介紹頁面，緊接著進行初始化，設定書籍頁面的高度與寬度，即可實現(xiàn)具有翻閱書籍效果的青島著名建筑美景詳情風貌效果的畫面。

響應式布局能使一個網(wǎng)站兼容多個不同的終端，而不是在每個終端上做一個特定的版本，響應式布局可以為各種終端的用戶提供更加舒適的界面和最佳的體驗，它的原理是先進行媒體查詢，然后根據(jù)查詢到的不同媒體引入對應的CSS樣式表，實現(xiàn)相應式布局。一般在網(wǎng)站開發(fā)中，設計響應式布局運用查詢?yōu)g覽器窗口的寬度，來判斷網(wǎng)頁在不同類型終端中打開，設計時，一般會根據(jù)瀏覽器窗口寬度設置1170px 以上、970px～1170px、750px～970px、750px以下四個寬度，分別對應大屏端、中屏端、平板電腦端、手機端四種終端，再根據(jù)這四種終端的尺寸引入對應合適的CSS樣式表，即可實現(xiàn)響應式布局。在本網(wǎng)站設計和開發(fā)中，加入了響應式布局功能，可以分別實現(xiàn)以上四種不同終端的使用和展示。

用戶注冊登記模塊中，首先由登陸者輸入用戶名、密碼、再次輸入密碼和驗證碼四個內(nèi)容，它們的類型設為布爾值的全局變量“false”，當進行用戶名、密碼、再次輸入密碼、驗證碼的驗證時，如果格式正確或驗證碼正確，將相應的布爾值變成“true”，如果不正確，將布爾值設置為“false”。只有在四個布爾值同時為“true”時，才能發(fā)送信息到服務器端。

在首頁登陸時，運用ajax向服務器發(fā)送用戶名與密碼，根據(jù)服務器返回的值進行判斷，成功后，將用戶名應用HTML5本地存儲，儲存在瀏覽器中。如果用戶點擊“七天內(nèi)免登陸”項目，則將用戶名存儲在localStorage中，并保存上當前的時間。當客戶再次打開這個頁面時，將先調(diào)出這條本地存儲，查看其中存儲的時間與現(xiàn)在的時間進行對比，如果超過七天，則刪除這條數(shù)據(jù)，需要重新登錄；如果未超過七天，則保留數(shù)據(jù)，顯示用戶名，自動登錄成功。如果用戶沒有選擇“七天內(nèi)免登陸”，則將用戶的用戶名存儲在sessionStorage中，瀏覽器關(guān)閉后則自動刪除。

百度地圖JavaScript API是一套由百度開發(fā)，用JavaScript語言編寫的應用程序接口，使用百度地圖API即可在本網(wǎng)站中實現(xiàn)功能強大的地圖導航，方便著名建筑搜尋功能。

3 結(jié)語

HTML5作為一種專門編寫WEB內(nèi)容的語言，是開放的WEB網(wǎng)絡平臺的奠基石，它通過創(chuàng)建一種標準化、直觀的UI標記語言形式來簡化網(wǎng)頁的設計和構(gòu)建。本文以HTML5技術(shù)標準為基礎(chǔ)，對青島著名建筑網(wǎng)站系統(tǒng)進行設計和研究，應用HTML5的新標簽和CSS3的各種新屬性，以及JavaScript的腳本特性，結(jié)合Bootstrap進行響應式布局開發(fā)，實現(xiàn)了與用戶的交流互動，使青島著名建筑網(wǎng)站設計更加豐富多彩。

參考文獻

[1]陳希.基于HTML5的旅游網(wǎng)站設計[J].電腦知識與技術(shù)，2016，（27）：265-266.

[2]周靈，王莉莉，宋燕燕，等.一種基于HTML5的品牌宣傳網(wǎng)站設計[J].計算機時代，2016，（8）：19-22.

[3]汪梅，湯書昆，陳敬宇.基于HTML5的宣紙文化網(wǎng)站設計研究[J].包裝工程，2016，（8）：143-147.

[4]李春曉.基于HTML5的數(shù)字迎新統(tǒng)計網(wǎng)站設計與實現(xiàn)[J].電腦知識與技術(shù)，2015，（21）：28-29+32.