基于HTML5的高校門戶網(wǎng)站設(shè)計(jì)研究,網(wǎng)站設(shè)計(jì)論文

基于5的高校門戶網(wǎng)站設(shè)計(jì)研究,網(wǎng)站設(shè)計(jì)論文傳統(tǒng)的采用4技術(shù)設(shè)計(jì)的高校門戶網(wǎng)站頁(yè)面中大量使用到DIV+CSS技術(shù)進(jìn)行頁(yè)面布局。首先使用DIV標(biāo)簽將網(wǎng)頁(yè)元素分成塊，再對(duì)分割后的每一塊使用CSS技術(shù)進(jìn)行精到準(zhǔn)確的格式控制，以實(shí)現(xiàn)為每部分設(shè)置文本格式、段落格式、背景格式、排版、自動(dòng)隱藏、各種特效等。這種DIV標(biāo)簽的太多使用情況通常會(huì)導(dǎo)致在網(wǎng)頁(yè)代碼中嵌套層次太多，進(jìn)而造成網(wǎng)頁(yè)代碼構(gòu)造不清楚明晰，給高校門戶網(wǎng)站的日后維護(hù)帶來(lái)很大費(fèi)事，并于無(wú)形中增加了網(wǎng)站的維護(hù)成本。5是W3C與WHATWG〔WebHypertextApplicationTechnologyWorkingGroup〕在2006年合作開(kāi)創(chuàng)建立的一個(gè)新版本.該版本將成為和X以及DOM技術(shù)的新標(biāo)準(zhǔn)。2020年5月6日，5.1正式草案頒布。5是近年來(lái)網(wǎng)站開(kāi)發(fā)標(biāo)準(zhǔn)的宏大飛躍。與之前的HT-ML版本不同的是5技術(shù)并非僅僅用來(lái)表示網(wǎng)站的頁(yè)面內(nèi)容，而是能夠?qū)eb應(yīng)用帶入一個(gè)愈加成熟的應(yīng)用平臺(tái)，在該平臺(tái)上，文本、音頻、視頻、圖像、動(dòng)畫、以及同電腦的交互活動(dòng)都將得到高質(zhì)量的標(biāo)準(zhǔn)化。根據(jù)W3C〔萬(wàn)維網(wǎng)聯(lián)盟〕的發(fā)言稿稱：5是開(kāi)放的Web網(wǎng)絡(luò)平臺(tái)的奠基石。這種跨平臺(tái)的網(wǎng)頁(yè)程序環(huán)境通常被以為是Web標(biāo)準(zhǔn)的保衛(wèi)傘。5以及JavaScript和CSS相關(guān)技術(shù)的聯(lián)合更使得5技術(shù)漸趨完善，三者的結(jié)合能夠讓開(kāi)發(fā)者在任何設(shè)備上可順利運(yùn)行豐富內(nèi)容的網(wǎng)頁(yè)應(yīng)用?；诖?，采用5技術(shù)設(shè)計(jì)的高校門戶網(wǎng)站頁(yè)面代碼構(gòu)造將會(huì)愈加清楚明晰，并且能夠輕松實(shí)現(xiàn)跨平臺(tái)。能夠預(yù)期，越來(lái)越多的高校門戶網(wǎng)站即將參加到5的大平臺(tái)上來(lái)。1基于5的高校門戶網(wǎng)站設(shè)計(jì)1.1高校門戶網(wǎng)站的系統(tǒng)功能構(gòu)造設(shè)計(jì)從功能上劃分，高校門戶網(wǎng)站系統(tǒng)共分為下面幾個(gè)模塊：首頁(yè)、學(xué)校大概情況、機(jī)構(gòu)設(shè)置、科學(xué)研究、師資隊(duì)伍、人才培養(yǎng)、國(guó)際溝通、學(xué)生工作等功能模塊，如此圖1所示。1.2高校門戶網(wǎng)站首頁(yè)的架構(gòu)設(shè)計(jì)高校門戶網(wǎng)站首頁(yè)的架構(gòu)采用兩欄式網(wǎng)頁(yè)架構(gòu)，如此圖2所示。高校門戶網(wǎng)站首頁(yè)所使用的5構(gòu)造化標(biāo)簽有：header標(biāo)記、nav標(biāo)記、article標(biāo)記、aside標(biāo)記、section標(biāo)記和footer標(biāo)記。這些標(biāo)記的詳細(xì)含義則如表1所示。1.3高校門戶網(wǎng)站首頁(yè)的頁(yè)面實(shí)現(xiàn)采用5技術(shù)的高校門戶網(wǎng)站首頁(yè)效果如此圖3所示。高校門戶網(wǎng)站首頁(yè)主要部分代碼如下：headerid=header//高校門戶網(wǎng)站首頁(yè)頭部hgrouph1歡迎來(lái)到吉林師范大學(xué)/h1h4好學(xué)近知，力行近仁/h4/hgroupnavulliahref=#首頁(yè)/a/liliclass=current-itemahref=#學(xué)校大概情況/a/li//高校門戶網(wǎng)站導(dǎo)航liahref=#機(jī)構(gòu)設(shè)置/a/liliahref=#師資隊(duì)伍/a/li/ul/nav/headerarticleid=travel//高校門戶網(wǎng)站的主內(nèi)容區(qū)section//顯示學(xué)術(shù)活動(dòng)公告h2學(xué)術(shù)活動(dòng)/h2pahref=#07.03大學(xué)外語(yǔ)部老師系列學(xué)術(shù)講座之六/a/p此處省略部分代碼/sectionasidefigureimgsrc=01.jpgwidth=350height=300/figure/aside//高校門戶網(wǎng)站首頁(yè)的側(cè)欄，顯示學(xué)校圖片/articlefooter信息管理：委宣傳部技術(shù)支持：信息網(wǎng)絡(luò)中心吉ICP備05005280/footer//高校門戶網(wǎng)站的頁(yè)腳，標(biāo)注網(wǎng)站的版權(quán)采用5技術(shù)開(kāi)創(chuàng)建立的高校門戶網(wǎng)站首頁(yè)只含有頁(yè)面顯示內(nèi)容。網(wǎng)頁(yè)的美化部分則需要由CSS3來(lái)處理。這種5語(yǔ)法只負(fù)責(zé)顯示網(wǎng)頁(yè)構(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美化后的高校門戶網(wǎng)站首頁(yè)效果圖。高校門戶網(wǎng)站首頁(yè)中所使用的關(guān)鍵CSS3代碼如下：#headernavli{float:left;list-style:none;padding:05px;}//通過(guò)float浮動(dòng)屬性，將導(dǎo)航鏈接由垂直方向更改為水平方向a{color:#996600;text-decoration:none;}//定義導(dǎo)航鏈接文本格式為指定文本顏色，去掉下劃線h1,h2,h4{margin:0;}//定義標(biāo)題文本格式為居中a:hover{color:#cc3300;}//定義導(dǎo)航鏈接文本懸浮狀態(tài)的顏色#travelsection{float:left;width:350px;}//學(xué)術(shù)活動(dòng)側(cè)欄浮動(dòng)靠左對(duì)齊#travelaside{margin-left:400px;}//定義高校門戶網(wǎng)站首頁(yè)圖片側(cè)邊欄與學(xué)術(shù)活動(dòng)側(cè)欄距離為400像素footer{margin:15px010px;text-align:center;}//定義網(wǎng)站版權(quán)聲明頁(yè)腳的文本信息水平居中對(duì)齊此處省略部分CSS代碼2采用5技術(shù)的高校門戶網(wǎng)站優(yōu)勢(shì)。2.1Web標(biāo)準(zhǔn)統(tǒng)一5技術(shù)的推出源于W3C、谷歌、蘋果等幾百家公司討論約定的結(jié)果。5標(biāo)準(zhǔn)的公開(kāi)性，使得訪問(wèn)高校門戶網(wǎng)站的各種閱讀器和平臺(tái)都能夠根據(jù)關(guān)聯(lián)W3C的資料庫(kù)找尋根本源頭，并實(shí)現(xiàn)自個(gè)的應(yīng)用，進(jìn)而實(shí)現(xiàn)了Web標(biāo)準(zhǔn)的統(tǒng)一性。2.2輕松實(shí)現(xiàn)跨平臺(tái)5技術(shù)能夠輕松地實(shí)現(xiàn)跨平臺(tái)使用。采用5技術(shù)的高校門戶網(wǎng)站應(yīng)用，假如需要能夠很輕松地被移植到UC的開(kāi)放平臺(tái)、Facebook應(yīng)用平臺(tái)，甚至能夠通過(guò)軟件封裝的技術(shù)發(fā)放到AppStore上。這種強(qiáng)大的跨平臺(tái)性將使得高校門戶網(wǎng)站具有廣闊的應(yīng)用前景。2.3程序升級(jí)更快速使用5技術(shù)的高校門戶網(wǎng)站由于采用的是B/S〔閱讀器/服務(wù)器〕形式，程序升級(jí)將是即時(shí)更新的，只要服務(wù)器端更新了高校門戶網(wǎng)站的新版本；之后，客戶端閱讀器在打開(kāi)網(wǎng)頁(yè)時(shí)，也將自動(dòng)更新到高校門戶網(wǎng)站各個(gè)網(wǎng)頁(yè)的最新版本。2.4與搜索引擎無(wú)縫結(jié)合通常，對(duì)于一些含有Flash動(dòng)畫的高校門戶網(wǎng)站，搜索引擎在抓取和索引操作時(shí)效率特別低下。而采用5技術(shù)編寫的高校門戶網(wǎng)站，搜索引擎的蜘蛛將能夠抓取高校門戶網(wǎng)站站點(diǎn)和索引內(nèi)容。大部分嵌入高校門戶網(wǎng)站中的Flash動(dòng)畫內(nèi)容能夠方便、高效地被各類搜索引擎成功獲取。3結(jié)束語(yǔ)網(wǎng)站實(shí)際應(yīng)用效果表示清楚，采用5技術(shù)的高校門戶網(wǎng)站設(shè)計(jì)，在實(shí)現(xiàn)網(wǎng)頁(yè)代碼構(gòu)造非常清楚明晰的同時(shí)，大大減少了開(kāi)發(fā)人員代碼編寫量，能夠有效提高開(kāi)發(fā)效率，同時(shí)降低高校門戶網(wǎng)站的日后維護(hù)成本。鑒于5技術(shù)所具有的Web標(biāo)準(zhǔn)統(tǒng)一、輕松實(shí)現(xiàn)跨平臺(tái)、程序升級(jí)更快速、搜索引擎無(wú)縫結(jié)合等這些優(yōu)良特性，由此推斷5技術(shù)必將成為將來(lái)高校門戶網(wǎng)站開(kāi)發(fā)的核心技術(shù)。以下為以下為