基于HTML5技術(shù)的跨平臺(tái)門戶網(wǎng)站設(shè)計(jì)與實(shí)現(xiàn)

譚衛(wèi) 常賢發(fā)

摘要：闡述了前端采用HTML5、CSS3、Javascript等技術(shù)，后臺(tái)基于Dedecms開源框架信息管理平臺(tái)的門戶網(wǎng)站設(shè)計(jì)與實(shí)現(xiàn)，主要分析和解決設(shè)計(jì)與實(shí)現(xiàn)中的需要分析及實(shí)現(xiàn)流程，并對重要的模塊實(shí)現(xiàn)進(jìn)行了圖文解析。

關(guān)鍵詞：HTML5;門戶網(wǎng)站;跨平臺(tái)

中圖分類號(hào)：TP311? ? 文獻(xiàn)標(biāo)識(shí)碼：A

文章編號(hào)：1009-3044（2020）23-0236-03

隨著web網(wǎng)頁技術(shù)的不斷發(fā)展，現(xiàn)在門戶網(wǎng)站也開始逐漸更新?lián)Q代，如今用戶對于門戶網(wǎng)站的功能需求越來越高。近幾年互聯(lián)網(wǎng)發(fā)展十分迅猛，移動(dòng)端也逐漸超越PC端，甚至PC端望塵莫及，移動(dòng)設(shè)備趨向多元化，所以跨平臺(tái)的設(shè)計(jì)是所有門戶網(wǎng)站應(yīng)該考慮的方面。門戶網(wǎng)站是一個(gè)企業(yè)性質(zhì)的宣傳網(wǎng)站，希望通過這個(gè)網(wǎng)站，及時(shí)地宣傳自身品牌產(chǎn)品，同時(shí)讓更多的人了解到公司的精神文化，將自己的產(chǎn)品信息和企業(yè)動(dòng)態(tài)，更方便展示給用戶，并且通過豐富的交互去優(yōu)化與用戶溝通的過程[1]。所以在內(nèi)容上應(yīng)更加多姿多彩，板塊結(jié)構(gòu)完整，而且應(yīng)能夠適應(yīng)不同屏幕大小，在這個(gè)用手機(jī)多過PC的時(shí)代，能更好更快地將第一手信息送到用戶手上。 這些變化促成企業(yè)構(gòu)建更加專業(yè)，更加便于維護(hù)，用戶體驗(yàn)度更高的網(wǎng)站。

基于此，門戶網(wǎng)站設(shè)計(jì)技術(shù)有了更高的技術(shù)要求，本課題研究的實(shí)現(xiàn)技術(shù)為前端采用HTML5、CSS3、Javascript等技術(shù)實(shí)現(xiàn)，后臺(tái)基于dedecms開源框架進(jìn)行后臺(tái)數(shù)據(jù)管理，并進(jìn)行針對性的定制功能，通過CSS3來實(shí)現(xiàn)動(dòng)畫演繹和圖片常見效果變化，提高頁面性能和降低網(wǎng)頁載荷;使用CSS3實(shí)現(xiàn)網(wǎng)頁自適應(yīng)，使得不同瀏覽終端設(shè)備之間更容易實(shí)現(xiàn)無障礙切換，而DIV不會(huì)錯(cuò)亂，很大程度上滿足門戶網(wǎng)站的跨平臺(tái)設(shè)計(jì)需求及交互性的友好體驗(yàn)[2]。

1需求分析

1.1網(wǎng)站配色及布局分析

企業(yè)LOGO是徽標(biāo)或者商標(biāo)的英文說法，起到對徽標(biāo)擁有公司的識(shí)別和推廣的作用，通過形象的LOGO可以讓消費(fèi)者記住公司主體和品牌文化。所以門戶網(wǎng)站應(yīng)以企業(yè)的LOGO中的色彩為主色調(diào)，再輔助以灰、白、黑三種顏色，其中灰色作為一種最經(jīng)典、最耐看的顏色，是很多門戶網(wǎng)站選擇的輔助色。

在頁面布局上，采用當(dāng)下流行的響應(yīng)式布局，即flexbox彈性布局。這種布局能夠按照用戶的屏幕尺寸、瀏覽器窗口大小來調(diào)整頁面排版布局，達(dá)到更好展示內(nèi)容的目的。在網(wǎng)站的各模塊間使用了大量的留白，使網(wǎng)站整體更加簡潔，清新。在網(wǎng)站的布局上，網(wǎng)站統(tǒng)一頂部為導(dǎo)航條，中部為banner和內(nèi)容圖文信息，底部為footer聲明版權(quán)信息。

1.2.前端模塊需求分析

門戶網(wǎng)站是一個(gè)企業(yè)性質(zhì)的宣傳網(wǎng)站，它所指的就是通向互聯(lián)網(wǎng)信息并提供信息服務(wù)的一個(gè)計(jì)算機(jī)系統(tǒng)， 是一個(gè)綜合性的使用系統(tǒng)。它的綜合性體現(xiàn)在多方面， 包含了大數(shù)據(jù)資源和互聯(lián)網(wǎng)的多資源共享以及其他相關(guān)的方面， 是一個(gè)綜合性的管理和應(yīng)用的平臺(tái)和展示企業(yè)文化的平臺(tái)[3]。所以企業(yè)前端通用模塊如下圖1所示。

各重要模塊功能介紹如下。

（1）首頁模塊

一般來說，網(wǎng)頁設(shè)計(jì)的關(guān)鍵在于網(wǎng)站首頁的布局。網(wǎng)站首頁布局主要指主頁的框架和排版。首頁的布局設(shè)計(jì)可以簡單大氣為主，將重要的企業(yè)的內(nèi)容展示給用戶。合理的設(shè)計(jì)可以讓網(wǎng)站根據(jù)屏幕的大小劃分模式，并呈現(xiàn)在屏幕或半屏幕顯示器中，然后根據(jù)重要性從上到下和從左到右進(jìn)行布局，以此來滿足大多數(shù)用戶的瀏覽習(xí)慣。

（2）新聞模塊

新聞模塊是屬于網(wǎng)站的二級(jí)列表頁，主要用來展示公司新聞和公告信息，讓用戶了解企業(yè)的各類動(dòng)態(tài)，以把握企業(yè)在行業(yè)中的影響等，它亦是網(wǎng)站信息的主導(dǎo)模塊，是向用戶傳企業(yè)信息的重要模塊。

1.3 后端功能需求分析

網(wǎng)站的后臺(tái)dedecms開源框架系統(tǒng)，dedecms系統(tǒng)是一個(gè)集內(nèi)容發(fā)布、編輯、管理檢索等于一體的網(wǎng)站信息管理系統(tǒng)，dedecms有一套簡單便捷的自定義標(biāo)簽和自己獨(dú)立開發(fā)的模板引擎技術(shù)，能夠降低后期的維護(hù)成本，網(wǎng)站的前端頁面都是通過dedecms的模板技術(shù)生成的靜態(tài)頁面，靜態(tài)頁面直接獲取數(shù)據(jù)生成頁面，有利于管理和更容易的維護(hù)網(wǎng)站。各主要模塊功能介紹如下。

（1）文章模塊

通過dedecms，后臺(tái)已經(jīng)擁有了發(fā)表文章的功能，操作過程為點(diǎn)擊要發(fā)表文章的欄目，點(diǎn)擊添加文檔，在對應(yīng)的位置填寫文章的信息，內(nèi)容有作者名稱、發(fā)表時(shí)間、文章摘要、文章縮略圖、文章標(biāo)題、文章主內(nèi)容。在發(fā)布了文章后，只要點(diǎn)擊更新文檔，就可以在網(wǎng)站對應(yīng)的前端頁面生成內(nèi)容。

（2）用戶管理

網(wǎng)站后臺(tái)進(jìn)行用戶管理，能夠給普通的會(huì)員升級(jí)權(quán)限，成為某一模塊的管理員。方便了網(wǎng)站的管理。

（3）管理模塊

管理模塊對網(wǎng)站進(jìn)行實(shí)時(shí)的更新。后臺(tái)有網(wǎng)站的數(shù)據(jù)備份和還原。數(shù)據(jù)的備份能夠很好地保存數(shù)據(jù)庫表，預(yù)防某種不可控因素使網(wǎng)站數(shù)據(jù)庫崩潰或丟失，有了數(shù)據(jù)備份就能夠很好地進(jìn)行數(shù)據(jù)還原。

2 設(shè)計(jì)與實(shí)現(xiàn)

2.1 前期準(zhǔn)備階段

網(wǎng)站結(jié)構(gòu)規(guī)劃后就進(jìn)入收集素材階段，可以根據(jù)各結(jié)構(gòu)的設(shè)計(jì)需要，搜集一些素材。例如文本素材，圖片素材、頁面效果案例等。文本素材是在網(wǎng)站頁中展示的文字內(nèi)容，收集渠道比較多，可以在同行業(yè)網(wǎng)站中收集整理，分析總結(jié)文本內(nèi)容的優(yōu)缺點(diǎn)，提取有用的文本內(nèi)容，提取到的文本內(nèi)容為避免侵權(quán)需要再加工。為了保證快速完成網(wǎng)站的設(shè)計(jì)任務(wù)，在搜集圖片素材時(shí)要考慮圖片的風(fēng)格是否和網(wǎng)站風(fēng)格一致，以及圖片是否清晰等。為了讓設(shè)計(jì)出來的門戶網(wǎng)站效果緊跟當(dāng)前的時(shí)尚，應(yīng)該多參考近幾年上線的新網(wǎng)站，瀏覽他們的網(wǎng)址，留意網(wǎng)站模塊效果并做好登記，當(dāng)自己的網(wǎng)站模塊需要進(jìn)行參考時(shí)，就可參考他們的效果，分析效果的實(shí)現(xiàn)思路并進(jìn)行樣式設(shè)置。效果圖設(shè)計(jì)也是網(wǎng)頁設(shè)計(jì)中的重要組成部分[4]。根據(jù)首頁原型圖及收集到的各類素材，運(yùn)用photoshop設(shè)計(jì)網(wǎng)站首頁效果圖，效果圖首先應(yīng)先設(shè)計(jì)pc端的效果圖，再根據(jù)pc端效果圖對模塊進(jìn)行取舍后進(jìn)行移動(dòng)端效果圖設(shè)計(jì)。如圖2和圖3中所示是某學(xué)會(huì)網(wǎng)站的不同終端的效果圖。

2.2 前端重點(diǎn)模塊設(shè)計(jì)與實(shí)現(xiàn)

2.2.1網(wǎng)站元素初始化

由于網(wǎng)頁中塊狀元素默認(rèn)有margin和padding值，在各個(gè)瀏覽器下解析不一樣，為保證各瀏覽器下看到的效果一樣，所以先初始化再統(tǒng)一賦值。所以我們要在網(wǎng)站系統(tǒng)開發(fā)之初就要對已使用的元素進(jìn)行初始化設(shè)置，對所有的網(wǎng)頁都要引用這個(gè)公共樣式表。

2.2.2橫幅模塊設(shè)計(jì)與實(shí)現(xiàn)

首頁布局符合客戶瀏覽習(xí)慣，大多數(shù)企業(yè)門戶網(wǎng)站都會(huì)在首頁中設(shè)計(jì)橫幅，即頂部設(shè)計(jì)一個(gè)輪播的橫幅圖片。橫幅中的圖片可以根據(jù)企業(yè)的當(dāng)前或未來的活動(dòng)來設(shè)計(jì)，企業(yè)的趨勢可以更容易地傳達(dá)給客戶，同時(shí)也符合客戶的視覺瀏覽習(xí)慣和互聯(lián)網(wǎng)習(xí)慣。運(yùn)用CSS3技術(shù)可以實(shí)現(xiàn)圖片的輪播，具體樣式代碼截圖如圖4所示。

2.2.3跨平臺(tái)響應(yīng)式設(shè)計(jì)

實(shí)現(xiàn)跨平臺(tái)響應(yīng)式設(shè)計(jì)要使用得一套樣式適應(yīng)多個(gè)終端，則需要對網(wǎng)站前端頁面中的模塊進(jìn)行媒體查詢斷點(diǎn)設(shè)置，具體實(shí)現(xiàn)代碼如圖5所示。

2.3 后端重點(diǎn)模塊設(shè)計(jì)與實(shí)現(xiàn)

2.3.1新聞信息引用

在前端實(shí)現(xiàn)靜態(tài)樣式布局。然后使用cms標(biāo)簽進(jìn)行替換調(diào)用，登錄網(wǎng)站后臺(tái)，在左側(cè)找到內(nèi)容管理模塊，選擇添加文檔和欄目，填寫對應(yīng)的內(nèi)容發(fā)表更新即可，我們也可以對新聞列表進(jìn)行刪除、修改、排序等二次操作。新聞列表代碼圖如圖6所示。

2.3.2聯(lián)系我們信息管理

留言表單應(yīng)進(jìn)行在后臺(tái)進(jìn)行表單定義，前端運(yùn)用HTML5標(biāo)簽和CSS3樣式實(shí)現(xiàn)靜態(tài)表單，進(jìn)入cms管理后臺(tái)，添加自定義表單，生成代碼，復(fù)制修改應(yīng)用，后臺(tái)表單建立頁面如圖7所示。

3 設(shè)計(jì)總結(jié)

企業(yè)門戶網(wǎng)站采用跨平臺(tái)設(shè)計(jì)是為了匹配不同終端用戶，由于要兼容各種設(shè)備，因此，要重復(fù)編寫大量代碼，使頁面結(jié)構(gòu)雜亂，也影響了網(wǎng)站的訪問速度，要讓用戶有更加舒適的界面和更好的用戶體驗(yàn)，就要使用Javascript進(jìn)行交互性上的改進(jìn)。但其優(yōu)點(diǎn)是面對不同分辨率設(shè)備靈活性強(qiáng)，能夠快捷解決多設(shè)備顯示適應(yīng)問題。缺點(diǎn)為兼容各種設(shè)備工作量大，效率低下，一定程度上會(huì)改變網(wǎng)站原有的布局結(jié)構(gòu)，會(huì)出現(xiàn)用戶糊涂的情況。另外運(yùn)用開源框架進(jìn)行信息管理在一定程度上緩解了開發(fā)的壓力，但也讓網(wǎng)站結(jié)構(gòu)代碼產(chǎn)生了冗余，網(wǎng)站功能實(shí)現(xiàn)上會(huì)有一定的限制。

參考文獻(xiàn)：

[1] 謝建華.基于Bootstrap技術(shù)的企業(yè)網(wǎng)站設(shè)計(jì)與實(shí)現(xiàn)[J].計(jì)算機(jī)時(shí)代，2017（8）：17-19.

[2] 王玲.分析旅游企業(yè)門戶網(wǎng)站計(jì)算機(jī)設(shè)計(jì)[J].旅游縱覽（下半月），2016（5）：46.

[3] 譚昊琳.計(jì)算機(jī)圖像處理技術(shù)在網(wǎng)頁設(shè)計(jì)中的應(yīng)用[J].數(shù)字技術(shù)與應(yīng)用，2020（2）：115-116.

【通聯(lián)編輯：聞翔軍】