基於 HTML5 的校園網站移動平臺 web 頁面設計
阿新 • • 發佈：2019-02-19
摘要 ：隨著無線網路技術和智慧移動裝置的發展，人們對 web 應用的需求也在不斷增加。HTML5 的出現，給移動網際網路帶來了 重要的影響。作為重要的 web 開發標準，HTML5 使 web 應用開發更加容易。本文使用 HTML5 簡單論述了一個校園網站 web 也 的開發過程。
關鍵詞 ：HTML5 ；移動網際網路 ；web 應用 ；校園網站
Design of Campus Website Web Page For Mobile Platform Based on HTML5
Chong Yang
（Liaoning Academy of Governance，Liaoning Shenyang，110161）
Abstract ：With the development of wireless Network technology and mobile device，the requirement of web application is increasing.Appearience of HTML5 is a important influence for mobile Internet,As a important Web standard，HTML5 made the design of Web application more easy.
Keywords ：HTML5; mobile Internet;Web application;campus website
1 移動網際網路概述
隨著智慧手機、平板電腦等移動終端及無線網路技術的普及 和發展，人們對 web 移動應用的需求也不斷增加。現如今的 3G、 4G 網路投入使用，使我們的生活已經深深融入到了移動網際網路 之中。不論是瀏覽網站，還是使用各種網際網路應用，不再侷限於 pc 裝置，而是在各種移動終端上就能方便地完成各種操作。目前 較為流行的 web 應用有以下幾種 ：
（1）移動社交 ：使用者可以通過平板電腦、手機等移動裝置進 行社交活動，包括即時通訊和虛擬社交網路等應用。
（2）移動電子商務 ：使用者可以通過移動裝置快速、方便地享 受各種電子商務服務，如線上購物、線上支付等。
（3）移動多媒體 ：使用者可以通過移動裝置，收聽線上音樂，觀 看線上電影等各種視訊資源。
（4）移動遊戲 ：隨著手機等移動裝置效能的不斷提高，web 版線上遊戲已經成為了人們娛樂生活不可或缺的一部分，同時也 給遊戲開發和運營商帶來了巨大的經濟收益。
（5）移動搜尋 ：搜尋引擎的概念和應用價值不言而喻，在移 動裝置上，強大的智慧搜尋引擎，能夠 幫助使用者快速準確地檢索 到需要資訊資源。
2HTML5 簡介
2.1HTML5 概述
HTML5 是繼 HTML4.0 後 W3C 推出的新一代 HTML 標準。和以 前的版本不同，除了作為 HTML、XHTML 的標準， 它還將 web 應用 帶入了一個更加標準化的平臺。強大的功能和標準，使 web 上的 圖片、動畫、音訊及視訊等多媒體能夠以標準化的方式進行設計 和開發。因此，HTML5 不僅僅是技術的發展，更是一個有利於 web 應用開發標準化的平臺。
2.2HTML5 的特點1）HTML5 摒棄了一些原有的元素和屬 性，也新增了很 多功能強大的元素和屬性。其 中包括 <video>、<audio> 以及
<canvas> 元素。這些元素的主要作用是使網頁能夠更好的支援 多媒體功能。除了新的元素外，為了方便網頁佈局，HTML 5 還增 加了一些語義化標籤， 例如 header、footer、 nav 、section 等。
（2）HTML5 還提供了支援本地儲存的檔案系統的 API，在互 聯網環境下，使用者訪問的 url 中相應的資料檔案會被快取到裝置 中，離線時也可以瀏覽網站，回到網路環境後，快取的資料能夠自 動更新。
（3）HTML5 提供了通訊能力。利用 Web Socket API，開發者 可以輕鬆實現資料傳遞及跨文件通訊等功能，使使用者使用基於 HTML5 開發的 web 應用時，享受到類似於 C/S 模式的應用體驗。
（4）HTML5 為開發者提供了各種硬體訪問的 API，例如 GPSwifi、攝像頭等硬體裝置均可通過相應的 API 進行訪問。
3 移動 web 頁面設計
3.1 開發與測試環境
（1）使用 Dreamweaver CS5 作為 HTML 和 CSS 程式碼的編寫工 具。在編輯檢視下，根據網頁結構圖，編寫 HTML 和 CSS 程式碼並進 行重構設計。
（2）使用 Opera Mobile Emulator 模擬手機，作為測試移動 裝置 web 頁面的測試環境。
3.2 web 頁面結構圖
校園網站的首頁內容主要包括 ：網站的 logo 及標題動畫， 導航欄，主體內容、版權資訊及其他內容。頁面的結構採用頁首， 左右側邊欄，主體內容及頁尾的形式,案例:
3.3 頁面程式碼
<header>
<section><img src="/images/logo.jpg "
/><section>
<section><img src="/images/title.jpg "
/><section>
<nav>
<ul>
<li> 首 頁 </li><li> 學 院 概 況 </ li><li> 科研教學 </li>……<li> 學生園地 </li>
</ul>
</nav>
</header>
<aside id="left">
<!-- 限 於 篇 幅，此 處 邊 欄 代 碼 省 略 -->
</aside>
<article>
<section>
<!-- 限於篇幅，此處校園新聞程式碼省略 -->
<section>
<section>
<!-- 限於篇幅，此處公告通知程式碼省略 -->
<section>
</article>
<aside id="right">
<!-- 限 於 篇 幅，此 處 邊 欄 代 碼 省 略 -->
</aside>
<footer>
<ul>
<li> 版權所有…</li><li> 地址 ：瀋陽市……
<li> 電話 ：024…</li>
</ul>
</footer>
3 結束語
本文使用 HTML5 語言和 CSS 樣式表設計了一個校園網站 web 頁並測試成功，在一定程度上體會到了 HTML5 的使用方法和 新特性。HTML5 的新語義和元素，不但使程式碼量減少，簡化了 web 頁的開發過程，新增的多媒體特性使 web 也更加豐富多彩，容易 開發。
關鍵詞 ：HTML5 ；移動網際網路 ；web 應用 ；校園網站
Design of Campus Website Web Page For Mobile Platform Based on HTML5
Chong Yang
（Liaoning Academy of Governance，Liaoning Shenyang，110161）
Abstract ：With the development of wireless Network technology and mobile device，the requirement of web application is increasing.Appearience of HTML5 is a important influence for mobile Internet,As a important Web standard，HTML5 made the design of Web application more easy.
Keywords ：HTML5; mobile Internet;Web application;campus website
1 移動網際網路概述
隨著智慧手機、平板電腦等移動終端及無線網路技術的普及 和發展，人們對 web 移動應用的需求也不斷增加。現如今的 3G、 4G 網路投入使用，使我們的生活已經深深融入到了移動網際網路 之中。不論是瀏覽網站，還是使用各種網際網路應用，不再侷限於 pc 裝置，而是在各種移動終端上就能方便地完成各種操作。目前 較為流行的 web 應用有以下幾種 ：
（1）移動社交 ：使用者可以通過平板電腦、手機等移動裝置進 行社交活動，包括即時通訊和虛擬社交網路等應用。
（2）移動電子商務 ：使用者可以通過移動裝置快速、方便地享 受各種電子商務服務，如線上購物、線上支付等。
（3）移動多媒體 ：使用者可以通過移動裝置，收聽線上音樂，觀 看線上電影等各種視訊資源。
（4）移動遊戲 ：隨著手機等移動裝置效能的不斷提高，web 版線上遊戲已經成為了人們娛樂生活不可或缺的一部分，同時也 給遊戲開發和運營商帶來了巨大的經濟收益。
（5）移動搜尋 ：搜尋引擎的概念和應用價值不言而喻，在移 動裝置上，強大的智慧搜尋引擎，能夠 幫助使用者快速準確地檢索 到需要資訊資源。
2HTML5 簡介
2.1HTML5 概述
HTML5 是繼 HTML4.0 後 W3C 推出的新一代 HTML 標準。和以 前的版本不同，除了作為 HTML、XHTML 的標準， 它還將 web 應用 帶入了一個更加標準化的平臺。強大的功能和標準，使 web 上的 圖片、動畫、音訊及視訊等多媒體能夠以標準化的方式進行設計 和開發。因此，HTML5 不僅僅是技術的發展，更是一個有利於 web 應用開發標準化的平臺。
2.2HTML5 的特點1）HTML5 摒棄了一些原有的元素和屬 性，也新增了很 多功能強大的元素和屬性。其 中包括 <video>、<audio> 以及
<canvas> 元素。這些元素的主要作用是使網頁能夠更好的支援 多媒體功能。除了新的元素外，為了方便網頁佈局，HTML 5 還增 加了一些語義化標籤， 例如 header、footer、 nav 、section 等。
（2）HTML5 還提供了支援本地儲存的檔案系統的 API，在互 聯網環境下，使用者訪問的 url 中相應的資料檔案會被快取到裝置 中，離線時也可以瀏覽網站，回到網路環境後，快取的資料能夠自 動更新。
（3）HTML5 提供了通訊能力。利用 Web Socket API，開發者 可以輕鬆實現資料傳遞及跨文件通訊等功能，使使用者使用基於 HTML5 開發的 web 應用時，享受到類似於 C/S 模式的應用體驗。
（4）HTML5 為開發者提供了各種硬體訪問的 API，例如 GPSwifi、攝像頭等硬體裝置均可通過相應的 API 進行訪問。
3 移動 web 頁面設計
3.1 開發與測試環境
（1）使用 Dreamweaver CS5 作為 HTML 和 CSS 程式碼的編寫工 具。在編輯檢視下，根據網頁結構圖，編寫 HTML 和 CSS 程式碼並進 行重構設計。
（2）使用 Opera Mobile Emulator 模擬手機，作為測試移動 裝置 web 頁面的測試環境。
3.2 web 頁面結構圖
校園網站的首頁內容主要包括 ：網站的 logo 及標題動畫， 導航欄，主體內容、版權資訊及其他內容。頁面的結構採用頁首， 左右側邊欄，主體內容及頁尾的形式,案例:
3.3 頁面程式碼
<header>
<section><img src="/images/logo.jpg "
/><section>
<section><img src="/images/title.jpg "
/><section>
<nav>
<ul>
<li> 首 頁 </li><li> 學 院 概 況 </ li><li> 科研教學 </li>……<li> 學生園地 </li>
</ul>
</nav>
</header>
<aside id="left">
<!-- 限 於 篇 幅，此 處 邊 欄 代 碼 省 略 -->
</aside>
<article>
<section>
<!-- 限於篇幅，此處校園新聞程式碼省略 -->
<section>
<section>
<!-- 限於篇幅，此處公告通知程式碼省略 -->
<section>
</article>
<aside id="right">
<!-- 限 於 篇 幅，此 處 邊 欄 代 碼 省 略 -->
</aside>
<footer>
<ul>
<li> 版權所有…</li><li> 地址 ：瀋陽市……
<li> 電話 ：024…</li>
</ul>
</footer>
3 結束語
本文使用 HTML5 語言和 CSS 樣式表設計了一個校園網站 web 頁並測試成功，在一定程度上體會到了 HTML5 的使用方法和 新特性。HTML5 的新語義和元素，不但使程式碼量減少，簡化了 web 頁的開發過程，新增的多媒體特性使 web 也更加豐富多彩，容易 開發。