基于HTML5的高校門(mén)戶(hù)網(wǎng)站設(shè)計(jì)研究發(fā)布者：本站     時(shí)間：2020-05-05 13:05:59

0 引 言

傳統(tǒng)的采用 HTML4 技術(shù)設(shè)計(jì)的高校門(mén)戶(hù)網(wǎng)站頁(yè)面中大量使用到 DIV + CSS 技術(shù)進(jìn)行頁(yè)面布局。首先使用 DIV 標(biāo)簽將網(wǎng)頁(yè)元素分成塊，再對(duì)分割后的每一塊使用 CSS 技術(shù)進(jìn)行精確的格式控制，以實(shí)現(xiàn)為每部分設(shè)置文本格式、段落格式、背景格式、排版、自動(dòng)隱藏、各種特效等。這種 DIV 標(biāo)簽的過(guò)多使用情況通常會(huì)導(dǎo)致在網(wǎng)頁(yè)代碼中嵌套層次過(guò)多，進(jìn)而造成網(wǎng)頁(yè)代碼結(jié)構(gòu)不清晰，給高校門(mén)戶(hù)網(wǎng)站的日后維護(hù)帶來(lái)很大麻煩，并于無(wú)形中增加了網(wǎng)站的維護(hù)成本。

HTML5 是 W3C 與 WHATWG（Web Hypertext ApplicationTechnology Working Group） 在 2006 年合作創(chuàng)建的一個(gè)新版本 HTML.該版本將成為 HTML 和 XHTML 以及 HTML DOM技術(shù)的新標(biāo)準(zhǔn)。2013 年5 月6 日，HTML 5. 1 正式草案公布。

HTML 5 是近年來(lái)網(wǎng)站開(kāi)發(fā)標(biāo)準(zhǔn)的巨大飛躍。與之前的 HT-ML 版本不同的是 HTML 5 技術(shù)并非僅僅用來(lái)表示網(wǎng)站的頁(yè)面內(nèi)容，而是能夠?qū)?Web 應(yīng)用帶入一個(gè)更加成熟的應(yīng)用平臺(tái)，在該平臺(tái)上，文本、音頻、視頻、圖像、動(dòng)畫(huà)、以及同電腦的交互活動(dòng)都將得到高質(zhì)量的標(biāo)準(zhǔn)化。根據(jù) W3C（萬(wàn)維網(wǎng)聯(lián)盟） 的發(fā)言稿稱(chēng)： "HTML5 是開(kāi)放的 Web 網(wǎng)絡(luò)平臺(tái)的奠基石。"這種跨平臺(tái)的網(wǎng)頁(yè)程序環(huán)境通常被認(rèn)為是"Web 標(biāo)準(zhǔn)"的保護(hù)傘。HTML5 以及 JavaScript 和 CSS 相關(guān)技術(shù)的聯(lián)合更使得 HTML5 技術(shù)漸趨完善，三者的結(jié)合能夠讓開(kāi)發(fā)者在任何設(shè)備上可順利運(yùn)行豐富內(nèi)容的網(wǎng)頁(yè)應(yīng)用。基于此，采用 HTML5 技術(shù)設(shè)計(jì)的高校門(mén)戶(hù)網(wǎng)站頁(yè)面代碼結(jié)構(gòu)將會(huì)更加清晰，并且能夠輕松實(shí)現(xiàn)跨平臺(tái)?？梢灶A(yù)期，越來(lái)越多的高校門(mén)戶(hù)網(wǎng)站即將加入到 HTML 5 的大平臺(tái)上來(lái)。

1 基于 HTML5 的高校門(mén)戶(hù)網(wǎng)站設(shè)計(jì)

1. 1 高校門(mén)戶(hù)網(wǎng)站的系統(tǒng)功能結(jié)構(gòu)設(shè)計(jì)

從功能上劃分，高校門(mén)戶(hù)網(wǎng)站系統(tǒng)共分為以下幾個(gè)模塊： 首頁(yè)、學(xué)校概況、機(jī)構(gòu)設(shè)置、科學(xué)研究、師資隊(duì)伍、人才培養(yǎng)、國(guó)際交流、學(xué)生工作等功能模塊，如圖 1 所示。

1. 2 高校門(mén)戶(hù)網(wǎng)站首頁(yè)的架構(gòu)設(shè)計(jì)

高校門(mén)戶(hù)網(wǎng)站首頁(yè)的架構(gòu)采用兩欄式網(wǎng)頁(yè)架構(gòu)，如圖 2所示。

高校門(mén)戶(hù)網(wǎng)站首頁(yè)所使用的 HTML5 結(jié)構(gòu)化標(biāo)簽有： <header > 標(biāo)記、< nav > 標(biāo)記、< article > 標(biāo)記、< aside > 標(biāo)記、< section > 標(biāo)記和 < footer > 標(biāo)記。這些標(biāo)記的具體含義則如表 1 所示。

1. 3 高校門(mén)戶(hù)網(wǎng)站首頁(yè)的頁(yè)面實(shí)現(xiàn)

采用 HTML5 技術(shù)的高校門(mén)戶(hù)網(wǎng)站首頁(yè)效果如圖 3 所示。高校門(mén)戶(hù)網(wǎng)站首頁(yè)主要部分代碼如下：

< header id = " header" > / / 高校門(mén)戶(hù)網(wǎng)站首頁(yè)頭部< hgroup > < h1 > 歡迎來(lái)到吉林師范大學(xué) < / h1 > < h4> 好學(xué)近知，力行近仁 < / h4 > < / hgroup >

< nav > < ul > < li > < a href = " #" > 首頁(yè) < / a > < / li >

< li class = " current - item" > < a href = " #" > 學(xué)校概況 < / a> < / li > / / 高校門(mén)戶(hù)網(wǎng)站導(dǎo)航< li > < a href = " #" > 機(jī)構(gòu)設(shè)置 < / a > < / li > < li > < ahref = " #" > 師資隊(duì)伍 < / a > < / li > < / ul > < / nav >

< / header >

< article id = " travel" > / / 高校門(mén)戶(hù)網(wǎng)站的主內(nèi)容區(qū)< section > / / 顯示學(xué)術(shù)活動(dòng)公告< h2 > 學(xué)術(shù)活動(dòng) < / h2 > < p > < a href = " #" > 07. 03 大學(xué)外語(yǔ)部教師系列學(xué)術(shù)講座之六 < /a > < /p >

……此處省略部分代碼 < /section >

< aside > < figure > < img src = " 01. jpg" width = 350height = 300 > < / figure > < / aside > / / 高校門(mén)戶(hù)網(wǎng)站首頁(yè)的側(cè)欄，顯示學(xué)校圖片< / article >< footer > 信息管理： 黨委宣傳部 技術(shù)支持： 信息網(wǎng)絡(luò)中心 吉 ICP 備 05005280 < /footer > / /高校門(mén)戶(hù)網(wǎng)站的頁(yè)腳，標(biāo)注網(wǎng)站的版權(quán)采用 HTML5 技術(shù)創(chuàng)建的高校門(mén)戶(hù)網(wǎng)站首頁(yè)只含有頁(yè)面顯示內(nèi)容。網(wǎng)頁(yè)的美化部分則需要由 CSS3 來(lái)處理。這種HTML5 語(yǔ)法只負(fù)責(zé)顯示網(wǎng)頁(yè)結(jié)構(gòu)與內(nèi)容，CSS3 負(fù)責(zé)網(wǎng)頁(yè)格式的方式能夠?qū)崿F(xiàn)網(wǎng)頁(yè)內(nèi)容與格式相分離，方便網(wǎng)頁(yè)日后維護(hù)。圖 4 即是在圖 3 的基礎(chǔ)上使用 CSS3 美化后的高校門(mén)戶(hù)網(wǎng)站首頁(yè)效果圖。

高校門(mén)戶(hù)網(wǎng)站首頁(yè)中所使用的關(guān)鍵 CSS3 代碼如下：#header nav li { float: left; list - style: none; padding: 05px; } / / 通過(guò) float 浮動(dòng)屬性，將導(dǎo)航鏈接由垂直方向更改為水平方向a { color: #996600; text - decoration: none; } / / 定義導(dǎo)航鏈接文本格式為指定文本顏色，去掉下劃線(xiàn)h1,h2,h4 { margin: 0; } / / 定義標(biāo)題文本格式為居中a: hover { color: #cc3300; } / / 定義導(dǎo)航鏈接文本懸浮狀態(tài)的顏色#travel section { float: left; width: 350px; } / / 學(xué)術(shù)活動(dòng)側(cè)欄浮動(dòng)靠左對(duì)齊#travel aside { margin - left: 400px; } / / 定義高校門(mén)戶(hù)網(wǎng)站首頁(yè)圖片側(cè)邊欄與學(xué)術(shù)活動(dòng)側(cè)欄距離為 400 像素footer { margin: 15px 0 10px; text - align: center; } / / 定義網(wǎng)站版權(quán)聲明頁(yè)腳的文本信息水平居中對(duì)齊……此處省略部分 CSS 代碼2 采用 HTML5 技術(shù)的高校門(mén)戶(hù)網(wǎng)站優(yōu)勢(shì)。

2. 1 Web 標(biāo)準(zhǔn)統(tǒng)一

HTML5 技術(shù)的推出源于 W3C 、谷歌、蘋(píng)果等幾百家公司探討商定的結(jié)果。HTML5 標(biāo)準(zhǔn)的公開(kāi)性，使得訪(fǎng)問(wèn)高校門(mén)戶(hù)網(wǎng)站的各種瀏覽器和平臺(tái)都可以根據(jù)關(guān)聯(lián) W3C 的資料庫(kù)找尋根源，并實(shí)現(xiàn)自己的應(yīng)用，進(jìn)而實(shí)現(xiàn)了 Web 標(biāo)準(zhǔn)的統(tǒng)一性。

2. 2 輕松實(shí)現(xiàn)跨平臺(tái)

HTML5 技術(shù)可以輕松地實(shí)現(xiàn)跨平臺(tái)使用。采用 HTML5技術(shù)的高校門(mén)戶(hù)網(wǎng)站應(yīng)用，如果需要可以很輕松地被移植到UC 的開(kāi)放平臺(tái)、Facebook 應(yīng)用平臺(tái)，甚至可以通過(guò)軟件封裝的技術(shù)發(fā)放到 App Store 上。這種強(qiáng)大的跨平臺(tái)性將使得高校門(mén)戶(hù)網(wǎng)站具有廣闊的應(yīng)用前景。

2. 3 程序升級(jí)更快捷

使用 HTML5 技術(shù)的高校門(mén)戶(hù)網(wǎng)站由于采用的是 B/S（瀏覽器/服務(wù)器） 模式，程序升級(jí)將是即時(shí)更新的，只要服務(wù)器端更新了高校門(mén)戶(hù)網(wǎng)站的新版本； 之后，客戶(hù)端瀏覽器在打開(kāi)網(wǎng)頁(yè)時(shí)，也將自動(dòng)更新到高校門(mén)戶(hù)網(wǎng)站各個(gè)網(wǎng)頁(yè)的最新版本。

2. 4 與搜索引擎無(wú)縫結(jié)合

通常，對(duì)于一些含有 Flash 動(dòng)畫(huà)的高校門(mén)戶(hù)網(wǎng)站，搜索引擎在抓取和索引操作時(shí)效率十分低下。而采用 HTML5 技術(shù)編寫(xiě)的高校門(mén)戶(hù)網(wǎng)站，搜索引擎的蜘蛛將能夠抓取高校門(mén)戶(hù)網(wǎng)站站點(diǎn)和索引內(nèi)容。大部分嵌入高校門(mén)戶(hù)網(wǎng)站中的 Flash動(dòng)畫(huà)內(nèi)容可以方便、高效地被各類(lèi)搜索引擎成功獲取