基于HTML5技術的跨平臺門戶網站設計與實現

譚衛 常賢發

摘要：闡述了前端采用HTML5、CSS3、Javascript等技術，后臺基于Dedecms開源框架信息管理平臺的門戶網站設計與實現，主要分析和解決設計與實現中的需要分析及實現流程，并對重要的模塊實現進行了圖文解析。

關鍵詞：HTML5;門戶網站;跨平臺

中圖分類號：TP311? ? 文獻標識碼：A

文章編號：1009-3044（2020）23-0236-03

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

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

1需求分析

1.1網站配色及布局分析

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

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

1.2.前端模塊需求分析

門戶網站是一個企業性質的宣傳網站，它所指的就是通向互聯網信息并提供信息服務的一個計算機系統， 是一個綜合性的使用系統。它的綜合性體現在多方面， 包含了大數據資源和互聯網的多資源共享以及其他相關的方面， 是一個綜合性的管理和應用的平臺和展示企業文化的平臺[3]。所以企業前端通用模塊如下圖1所示。

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

（1）首頁模塊

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

（2）新聞模塊

新聞模塊是屬于網站的二級列表頁，主要用來展示公司新聞和公告信息，讓用戶了解企業的各類動態，以把握企業在行業中的影響等，它亦是網站信息的主導模塊，是向用戶傳企業信息的重要模塊。

1.3 后端功能需求分析

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

（1）文章模塊

通過dedecms，后臺已經擁有了發表文章的功能，操作過程為點擊要發表文章的欄目，點擊添加文檔，在對應的位置填寫文章的信息，內容有作者名稱、發表時間、文章摘要、文章縮略圖、文章標題、文章主內容。在發布了文章后，只要點擊更新文檔，就可以在網站對應的前端頁面生成內容。

（2）用戶管理

網站后臺進行用戶管理，能夠給普通的會員升級權限，成為某一模塊的管理員。方便了網站的管理。

（3）管理模塊

管理模塊對網站進行實時的更新。后臺有網站的數據備份和還原。數據的備份能夠很好地保存數據庫表，預防某種不可控因素使網站數據庫崩潰或丟失，有了數據備份就能夠很好地進行數據還原。

2 設計與實現

2.1 前期準備階段

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

2.2 前端重點模塊設計與實現

2.2.1網站元素初始化

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

2.2.2橫幅模塊設計與實現

首頁布局符合客戶瀏覽習慣，大多數企業門戶網站都會在首頁中設計橫幅，即頂部設計一個輪播的橫幅圖片。橫幅中的圖片可以根據企業的當前或未來的活動來設計，企業的趨勢可以更容易地傳達給客戶，同時也符合客戶的視覺瀏覽習慣和互聯網習慣。運用CSS3技術可以實現圖片的輪播，具體樣式代碼截圖如圖4所示。

2.2.3跨平臺響應式設計

實現跨平臺響應式設計要使用得一套樣式適應多個終端，則需要對網站前端頁面中的模塊進行媒體查詢斷點設置，具體實現代碼如圖5所示。

2.3 后端重點模塊設計與實現

2.3.1新聞信息引用

在前端實現靜態樣式布局。然后使用cms標簽進行替換調用，登錄網站后臺，在左側找到內容管理模塊，選擇添加文檔和欄目，填寫對應的內容發表更新即可，我們也可以對新聞列表進行刪除、修改、排序等二次操作。新聞列表代碼圖如圖6所示。

2.3.2聯系我們信息管理

留言表單應進行在后臺進行表單定義，前端運用HTML5標簽和CSS3樣式實現靜態表單，進入cms管理后臺，添加自定義表單，生成代碼，復制修改應用，后臺表單建立頁面如圖7所示。

3 設計總結

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

參考文獻：

[1] 謝建華.基于Bootstrap技術的企業網站設計與實現[J].計算機時代，2017（8）：17-19.

[2] 王玲.分析旅游企業門戶網站計算機設計[J].旅游縱覽（下半月），2016（5）：46.

[3] 譚昊琳.計算機圖像處理技術在網頁設計中的應用[J].數字技術與應用，2020（2）：115-116.

【通聯編輯：聞翔軍】