基于bootstrap技術的新媒體公益平臺的建設與運營

胡玉賢 胡云溪 朱靜靜 汪明艷

摘要：本文主要展示了一個基于bootstrap技術的新媒體公益平臺的設計與實現過程。該設計方案包括以網站首頁、志愿組織、志愿社區等為主要模塊的網站前端界面設計，以及對用戶注冊、登錄，個人信息，組織信息，活動信息的發布等進行數據修改和管理的后端管理設計。主要使用HTML5、bootstrap、PHP和mysql等技術對網站進行開發。項目運行表明，平臺在不同的終端設備使用流暢，使用界面簡潔美觀，符合預期設計期望。

關鍵詞：Bootstrap;響應式;公益網站

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

文章編號：1009-3044（2021）16-0206-03

開放科學（資源服務）標識碼（OSID）：

1 引言

隨著大學生公益活動的興起，大學生志愿活動已逐漸成為社會公益活動的一項不可或缺的組成部分，本項目旨在為大學生提供優質的公益網站瀏覽服務，構建上海市大學生專屬公益平臺。為了增強用戶的體驗，使用戶在不同的移動終端上瀏覽本網站時，網站界面的風格保持一致且兼容性優越。本系統利用了bootstrap技術對新媒體公益網站“上海公益在行動”進行開發。

系統的前端采用了bootstrap、HTML5等技術進行設計。Bootstrap框架幫助系統界面實現了響應式布局，能自適應不同屏幕大小和不同分辨率的移動終端;jQuery優越的選擇器以及自配的函數在系統設計開發過程中也發揮著重要作用。PHP技術實現了網站前后端的連接，mysql實現網站數據庫的構建。

2 系統功能設計

本平臺系統功能主要設計如下：

系統前端主要由網站首頁、個人中心、志愿組織、志愿活動、志愿社區、銷售專區這六大板塊組成。網站首頁主要進行近期公益資訊發布，公益活動照片展示，優秀志愿者展示等。個人中心的主要功能有個人相冊、個人資料、個人收藏等。志愿組織涵蓋了個人組織、社區組織、高校組織等各個不同的組織類型。在志愿活動版塊中，所有用戶可以查看活動介紹并決定是否進行報名。志愿社區內還可以對網站志愿活動發表看法并瀏覽回復。

系統后端則是組織管理、網站管理兩大板塊組成。組織管理員擁有組織管理權限，登錄后可以對其所在組織進行信息管理、成員管理、相冊管理等。而網站管理是對整個平臺的整體把控，包括個人管理、活動照片管理、志愿活動管理、組織管理等。

在開發設計的過程中還在平臺內新增了銷售專區，希望可以在平臺內進行二手產品和貧困地區農特產品的銷售，充分利用本平臺為公益事業盡一分力。

3 界面設計

本網站的界面設計由開發人員自我設計，在網頁頭部放置了網站名稱、導航欄、搜索框、用戶注冊及登錄入口。而在網頁頁腳，則放置了網站簡介、網站相關鏈接以及聯系方式等內容，簡約的風格讓用戶使用起來一目了然。

Bootstrap提供了網站界面設計的框架，通過模板+動態內容的方式，使得開發人員可以快速生成網站界面。在開發過程中，我們根據需要設計了網站界面模板，利用PHP代碼載入內容數據，生成統一的網站界面。根據所需動態內容，我們再利用css3即層疊樣式表，對頁面的背景、邊框、字體等進行進一步的美化。

4 網站模塊設計

4.1網頁內容模塊

本網站的內容模塊主要是對公益活動內容進行展示。普通圖文類頁面，主要包括上海公益資訊、公益活動信息、活動報名、活動照片展示等內容頁面。這類內容界面主要是水平或垂直排列，給人以美觀、簡約之感。而用戶點贊、收藏、報名活動等頁面功能與內容顯示模塊緊密聯系，通過按鈕控件加以實現。

4.2 用戶管理模塊

本平臺用戶主要分為三類，個人志愿者、組織管理員及網站管理員，對這三類授以不同權限。用戶主要通過手機號進行注冊，輸入信息后，前端將數據發送到后臺數據庫進行存儲。“用戶注冊”及“修改密碼”等功能都需要進行用戶驗證，故在平臺設計時，加入了以手機驗證碼為維度的用戶驗證。

登錄功能支持手機/用戶名/電子郵箱方式登陸，用戶輸入用戶名和密碼后，選擇用戶類型進行登陸，系統后端進行權限驗證。若是本平臺用戶則跳轉至網站首頁，否則提示用戶信息錯誤。本平臺也設置了游客用戶，此類用戶只能瀏覽網站頁面的活動照片、志愿資訊等。注冊成為平臺用戶后才可以發布個人照片，報名活動，在論壇上參與討論，購買扶貧產品等用戶。用戶登錄后可以在個人中心添加個人信息，后端數據庫會根據傳送的表單完成相應數據的修改。

4.3 活動管理模塊

本網站對于組織用戶和網站管理員，登錄后可以在系統中查看組織的用戶名錄、活動照片名錄，發布公益資訊、志愿者招募等活動信息，對組織信息進行編輯。本模塊主要包括了三個功能，志愿活動的發布、活動信息修改和活動報名。組織管理員登錄后，系統會根據user ID判斷用戶權限。組織管理員可以發布志愿活動資訊。在發布活動資訊時，組織管理員需要輸入一些活動基本信息，比如，活動名、活動日、活動類別、活動地點等，活動詳細信息通過Markdown語法進行填寫，支持部分html語法。

5 響應式布局分析

本公益平臺最大的特點就在于bootstrap的響應式布局框架，這也是整個平臺界面構建的基礎。bootstrap的響應式布局，可以更改頁面的內容樣式表以達到不同的網頁效果。瀏覽器會獲取不同移動設備的分辨率信息以調整界面樣式。而bootstrap自帶的柵格系統可以隨著設備屏幕尺寸的改變，自動重組行與列來構建全新的界面布局，同時頁面內容也會自動調整并放入新的布局中，以此達到快速實現響應式布局的目的。

媒介查詢是響應式布局的關鍵，可以使得網站頁面在不同設備的瀏覽器中呈現出與之適配的樣式，通過一些條件詢問語句聲明和樣式的定義，使瀏覽器能夠應用與當前設備匹配的樣式。Bootstrap中提供了許多媒介查詢樣式表供開發人員使用，在本次系統開發中，我們也根據實際需要進行了其他樣式表的編寫。

6 網站推廣營銷策略

本網站的推廣營銷策略就是最大限度整合校內資源，以較少的投入獲取更多的社會價值。最終目標是創立屬于上海大學生的志愿者平臺，在上海各大高校及學生群體中形成一定的影響力，讓上海的大學生志愿組織能夠得到更多的宣傳推廣，吸引更多的社會公益資源。在未來，網站將結合自身特點與最終目標，順應“互聯網+”和新媒體的發展潮流，在網站推廣和營銷模式上進行創新。在網站的推廣營銷策略上，我們將對平臺進行線上和線下營銷。其中，線上營銷主要有志愿活動推廣、志愿者招聘推廣、網站愛心產品銷售、微信公眾號推廣等。線下營銷包括：與校志愿者部進行合作、進行校內志愿者宣傳、建立公益社團等。

7 結論

此項目是基于bootstrap技術的新媒體公益平臺“上海公益在行動”的設計與實現。通過響應式布局設計，使得網站使用快捷便利，瀏覽體驗良好，為志愿者提供了優質的公益平臺。項目以“上海大學生公益”為宣傳核心，希望提升大學生參與志愿活動的宣傳力度，意在解決大學生參與志愿活動興趣度普遍較低，公益活動發布平臺少，推廣難、宣傳少、參加人數少等問題，并對貧困地區進行農特產品營銷和文化宣傳，獲取更多的社會價值。目前網站已有一百多位學生進行關注使用，今后還將繼續進行推廣完善，吸引更多大學生、高校入駐使用，推動大學生公益活動的進一步發展。

參考文獻：

[1] 陳榮華.基于HTML5技術的網頁廣告動態交互系統設計[J].現代電子技術，2020，43（21）：76-79，84.

[2] 范高智.基于Web技術的旅游智慧管理平臺構建[J].現代電子技術，2018，41（11）：69-72.

[3] 顧俊.基于互聯網+時代對PHP動態網站開發技術的研究[J].信息通信，2020，33（7）：85-87.

[4] 蔣睿.MySQL數據庫安全研究[J].電腦知識與技術，2020，16（9）：3-4，21.

[5] 司勇，陳曦，任澤中.大學生公益創業孵化網絡建設[J].中國高校科技，2019（12）：90-92.

[6]王成，李少元，鄭黎曉，等.Web前端性能優化方案與實踐[J].計算機應用與軟件，2014，31（12）：89-95，147.

[7] 曲夢梅.新傳播環境下互聯網企業公益營銷的實踐與創新[D].上海：上海外國語大學，2019.

[8] 王一斐.互聯網時代個性化公益項目的動員機制研究——以“一校一夢想”為例[D].沈陽：遼寧大學，2019.

[9] 張迦.基于HTML5的響應式新聞門戶網站設計與實現[D].長沙：湖南大學，2018.

【通聯編輯：光文玲】