基于HTML5+Css3+JavaScript 的山西旅游平臺搭建

馮秀玲，張楊娟

（運城職業(yè)技術大學，山西 運城 044000）

1 簡 介

隨著時代的發(fā)展，統(tǒng)一互聯(lián)網(wǎng)的通用標準顯得十分重要，HTML5 就是在這樣的情況下發(fā)展起來的。HTML5 是萬維網(wǎng)的核心語言，2014 年10 月由萬維網(wǎng)聯(lián)盟（W3C）完成標準制定，也就是HTML 的最新修訂版本。它的目標就是將Web 帶入一個成熟的平臺。在這個平臺上有本地存儲、網(wǎng)頁多媒體、三維圖形及特效、Css3 等很多新特性，將視頻、音頻、動畫、圖像以及與電腦的互聯(lián)標準化，可以提供、提高可用性和改進用戶的友好體驗的功能。HTML5 的設計目的是為了在移動設備上支持多媒體，目前很多瀏覽器都具備支持HTML5 的能力。同時HTML5 技術可以進行跨平臺使用，能夠自行適應網(wǎng)頁設計，及時更新。

1.1 HTML5

HTML5 是超文本標記語言（HyperText Markup Language）的第五代修訂版本。它的出現(xiàn)就是要統(tǒng)一各個瀏覽器的標準，給網(wǎng)站開發(fā)人員和瀏覽者提供一個更好的體驗。同時，在原來版本的基礎上新增了很多新的特性，更符合互聯(lián)網(wǎng)新時代人們的使用需求。HTML5 具有不同于以前各種版本的新優(yōu)勢，主要體現(xiàn)在跨瀏覽器瀏覽頁面效果相同，可以實現(xiàn)圖文并茂的多媒體體驗效果，遇到?jīng)_突以用戶為先的原則，將以前煩瑣的操作簡單化。

1.2 Css3

Css3 是Css（層疊樣式表）技術的升級版本，任何一種文本編輯工具都可用來編寫，在不犧牲性能和語義結構的前提下，Css3 中提供了更多的風格和更強的效果，極大地滿足了開發(fā)者的需求。此外，較之以前的Web 排版增加了更多的字體選擇、更方便的演示效果、更絢麗的圖形動畫，提供了更高的靈活性和控制性。

1.3 JavaScript

JavaScript 是適應動態(tài)網(wǎng)頁制作的需要而誕生的一種新的編程語言，廣泛應用于客戶端，用來給網(wǎng)頁增加動態(tài)效果的，它和Css 一樣是一種網(wǎng)頁嵌入技術。使用JavaScript 可以開發(fā)動態(tài)交互式的網(wǎng)頁，實現(xiàn)了網(wǎng)頁與用戶之間的實時互動，使得網(wǎng)頁更加活躍、精彩。

2 界面設計

山西旅游平臺一共包括首頁、山西簡介、特色美食、精美景點、著名人物、高等學府六個頁面，通過首頁可以鏈接到指定頁面進行瀏覽。在子頁面也可以通過鏈接實現(xiàn)頁面之間的相互跳轉(zhuǎn)。每個頁面都使用header、article、footer 元素進行頁面的劃分。

2.1 首頁

在平臺的首頁主要通過超鏈接來實現(xiàn)對其他子頁面的鏈接效果。通過Css3 對導航樣式進行設置，合理運用HTML5 頁面元素對網(wǎng)頁結構進行設置，真正實現(xiàn)頁面結構與表現(xiàn)分離，便于管理與維護。

頁面對應的主要內(nèi)容及關系如圖1 所示。

圖1 頁面內(nèi)容及關系

2.2 其他頁面的設計

其他子頁面的設置，也是通過導航鏈接實現(xiàn)相互轉(zhuǎn)換，頁面底部的版權信息和頁面頂部的導航與首頁的設置大體相同，設計保持一致，風格統(tǒng)一。頁面樣式的設置也是借助Css3 進行布局，網(wǎng)頁上展示的圖片可以使用滾動或放大的形式進行展示。滾動的實現(xiàn)借助于marquee 元素進行設置，同時對圖片的輪播方式、時間進行設置，放大顯示的實現(xiàn)可以借助JavaScript代碼來進行。文字可以借助于p 元素和hn 元素進行設置。

3 功能實現(xiàn)

頁面中部分功能模塊及代碼如圖2 所示。

圖2 主要功能模塊

3.1 導航鏈接

導航鏈接的實現(xiàn)主要通過nav、a、ul、li 元素及其相關屬性結合Css3 樣式來進行。主要代碼如下所示：

3.2 用戶注冊

用戶注冊功能的實現(xiàn)使用表單和JavaScript 相結合的方式進行，要求用戶設置用戶名和密碼等相關信息，流程圖如下圖3 所示。

圖3 用戶注冊流程圖

3.3 圖片輪滾與切換

對于圖片展示較多的地方布局，采用圖片輪滾和切換可以展示更多的圖片，也會使得頁面更加豐富活潑，圖片輪滾與切換可以使用marquee 結合JavaScript 實現(xiàn)，部分JavaScript 代碼如下所示：

3.4 時間顯示

在網(wǎng)頁頁面的固定區(qū)域顯示當前時間，可使用時間函數(shù)來獲取服務器的當前時間，再結合函數(shù)進行計算，將其以需要的方式顯示出來。

3.5 圖片放大

圖片放大功能的實現(xiàn)效果是，當鼠標移到一個圖片上時，圖片放大顯示；當鼠標移開時，圖片恢復原來大小以及位置顯示。該功能的實現(xiàn)也要借助于JavaScript 代碼來進行，通過設置函數(shù)實現(xiàn)對應功能。

4 結語

通過HTML5 與Css3 以及JavaScript 的有機結合實現(xiàn)網(wǎng)頁的動態(tài)顯示與交互，使得網(wǎng)頁內(nèi)容更為豐富，形式更加生動活潑，融合了多種媒體元素，真正實現(xiàn)網(wǎng)頁跨平臺播放，給用戶提供了更好的體驗效果。