青島著名建筑網站設計與實踐研究

籍遠明　徐文舸

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

關鍵詞：HTML5；著名建筑；網頁設計

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

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

1 網站設計

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

2 網站功能模塊

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

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

header>div：hover {

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

}

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

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

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

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

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

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

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

3 結語

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

參考文獻

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

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

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

[4]李春曉.基于HTML5的數字迎新統計網站設計與實現[J].電腦知識與技術，2015，（21）：28-29+32.