張鵬

“互聯(lián)網(wǎng)+”時代背景下，隨著新媒體技術(shù)的迅速發(fā)展，微信已在各個領(lǐng)域得到應(yīng)用。特別是高職校園中微信的傳播運(yùn)用，更是搶抓宣傳陣地的重要途徑之一，建立微官網(wǎng)可更好發(fā)揮微信公眾號平臺作用，加大學(xué)院對外交流與宣傳力度。本文介紹了基于CMS技術(shù)建站系統(tǒng)對渤海學(xué)院微官網(wǎng)的開發(fā)和實(shí)踐。

1引言

天津渤海職業(yè)技術(shù)學(xué)院有著60多年的辦學(xué)歷史，為了加強(qiáng)學(xué)院品牌建設(shè)，通過移動網(wǎng)絡(luò)進(jìn)行校園宣傳是必不可少的手段之一。過去十年是PC網(wǎng)絡(luò)飛速發(fā)展的十年，學(xué)院不斷提高信息化建設(shè)水平，建立了完善的校園官網(wǎng)系統(tǒng)。伴隨著4G普及和5G的上線，未來移動網(wǎng)絡(luò)將飛速發(fā)展，智能手機(jī)客戶端將廣泛普及，通過手機(jī)端移動上網(wǎng)依賴程度越來越高。所以開發(fā)一套更有利于移動手機(jī)端的校園微官網(wǎng)十分必要。

2相關(guān)技術(shù)

內(nèi)容管理系統(tǒng)（Content Management System，CMS）指Web內(nèi)容的管理。CMS具有許多基于模板的優(yōu)秀設(shè)計(jì)，可以加快網(wǎng)站開發(fā)的速度并減少開發(fā)的成本。CMS的功能并不只限于文本處理，它也可以處理圖片、Flash動畫、聲像流、圖像甚至電子郵件。CMS其實(shí)是一個很廣泛的稱呼，從一般的博客程序、新聞發(fā)布程序，到綜合性的網(wǎng)站管理程序都可以被稱為內(nèi)容管理系統(tǒng)。

微官網(wǎng)是為適應(yīng)高速發(fā)展的移動互聯(lián)網(wǎng)市場環(huán)境而誕生的一種基于WebAPP和傳統(tǒng)PC版網(wǎng)站相融合的新型網(wǎng)站。微官網(wǎng)可兼容iOS，android，WP等多種智能手機(jī)操作系統(tǒng)，可便捷的與《微信》、微博等網(wǎng)絡(luò)互動咨詢平臺鏈接，簡言之，微官網(wǎng)就是適應(yīng)移動客戶端瀏覽體驗(yàn)與交互性能要求的新一代網(wǎng)站。微官網(wǎng)的網(wǎng)站頁面完全適合手機(jī)、平板，而且能夠自動識別客戶屏幕大小，網(wǎng)站內(nèi)容精簡、頁面資源小、加載速度快、用戶體驗(yàn)好且匹配iOS，Android，WP等各大操作系統(tǒng)。微官網(wǎng)，不僅是一個手機(jī)網(wǎng)站，更是移動互聯(lián)網(wǎng)時代的應(yīng)用與服務(wù)平臺，創(chuàng)新性地結(jié)合了移動互聯(lián)網(wǎng)技術(shù)與企業(yè)信息化建設(shè)，為廣大師生提供一個全面的智能感知環(huán)境和綜合信息服務(wù)平臺。

3渤海學(xué)院校園微官網(wǎng)設(shè)計(jì)

系統(tǒng)設(shè)計(jì)目標(biāo)：一是建立操作簡單易用、具備良好交互性的微官網(wǎng)；二是動態(tài)顯示校園新聞信息，注重界面設(shè)計(jì)用性；三是為讓廣大校友更加方便的通過手機(jī)了解學(xué)院最新動態(tài)。

3.1界面設(shè)計(jì)

考慮到本網(wǎng)站主要是針對手機(jī)端查閱，所以布局上采用了上中下的綜合布局。結(jié)構(gòu)結(jié)合F1ash動畫和GIF圖片循環(huán)顯示學(xué)院圖文信息。網(wǎng)站頂端設(shè)置首頁、學(xué)生風(fēng)采、新聞動態(tài)和校園文化菜單鏈接按鈕。中部設(shè)置Flash動畫，占據(jù)界面二分之一，是學(xué)院動態(tài)展示區(qū)，主要包括學(xué)院風(fēng)景、大型活動等學(xué)院形象的圖片，可以循環(huán)切換與動態(tài)展示。中間設(shè)置5個矩形按鈕，下部設(shè)計(jì)成動態(tài)新聞，這里動態(tài)顯示學(xué)院的新聞資訊，底部設(shè)置了QQ客服、在線導(dǎo)航、短信咨詢和招生咨詢按鈕，整齊劃一的界面風(fēng)格，界面設(shè)計(jì)簡潔大氣，彰顯學(xué)院辦學(xué)特色，圖文結(jié)合的疏密位置關(guān)系所產(chǎn)生的空間層次富有彈性，給人以簡潔大氣的視覺效果。

3.2網(wǎng)站欄目設(shè)計(jì)

欄目設(shè)置為學(xué)院概況、校園文化、學(xué)生風(fēng)采、新聞動態(tài)、四六級成績查詢、招生咨詢和在線地圖導(dǎo)航等頁面，如圖1所示。欄目設(shè)置要滿足廣大師生閱讀需求，還要把學(xué)院的辦學(xué)特色和教育改革成果展現(xiàn)給大家。宣傳學(xué)院辦學(xué)取得的各項(xiàng)成果。

4渤海學(xué)院校園微官網(wǎng)實(shí)現(xiàn)

微官網(wǎng)以面向微信用戶為核心，實(shí)現(xiàn)服務(wù)和互動，選擇FKWCMS系統(tǒng)作為開發(fā)工具，通過學(xué)院官方微信進(jìn)行發(fā)布。進(jìn)入FKWCMS系統(tǒng)，點(diǎn)擊“創(chuàng)建網(wǎng)站”，設(shè)置網(wǎng)站名稱“渤海學(xué)院微官網(wǎng)”，進(jìn)入微網(wǎng)站，按照頁面設(shè)計(jì)對頁面進(jìn)行布局，進(jìn)入頁面后選擇“頁面”按鈕，在下拉列表中選擇常規(guī)頁面，點(diǎn)擊“添加頁面”設(shè)置頁面名稱，在頁面內(nèi)點(diǎn)擊“添加模塊”，進(jìn)入模塊設(shè)計(jì)模式，可以為頁面添加文字、圖片、魔方導(dǎo)航圖文展示、列表多圖、文章列表、滾動公告和輪播多圖。通過拖動方式進(jìn)行頁面排版。

4.1添加圖文展示模塊

點(diǎn)擊圖文展示按鈕，在模擬手機(jī)界面上出現(xiàn)示例圖片，在右側(cè)控制區(qū)，設(shè)置模塊標(biāo)題為“校園圖片”，點(diǎn)擊添加文本按鈕，為圖片添加說明。點(diǎn)擊“修改圖片”按鈕，在彈出的對話框內(nèi)選擇“我的文件”按鈕，選擇“直接上傳”按鈕，根據(jù)提示找到需要上傳的圖片所在位置，選擇圖片進(jìn)行上傳，上傳后圖片將自動存在網(wǎng)站圖片庫內(nèi)，點(diǎn)擊確定完成圖片上傳。圖片下方有鏈接按鈕，可以設(shè)置圖片鏈接，設(shè)置后頁面可進(jìn)行鏈接跳轉(zhuǎn)。最后設(shè)置模塊樣式，分為上圖下文、左圖右文和右圖左文，根據(jù)需要我們選擇上圖下文。在“高級”按鈕里，可以設(shè)置圖片是否滾動，是否為展示為圓角圖片。

4.2添加公告模塊

模塊可以通過拖動方式進(jìn)行位置調(diào)整，非常方便。選擇“滾動公告”模塊，在右側(cè)功能區(qū)進(jìn)行設(shè)置模塊標(biāo)題“滾動公告”。選擇“添加公告”按鈕，進(jìn)行公告內(nèi)容設(shè)置，點(diǎn)擊“添加鏈接”按鈕，設(shè)置鏈接類型為站內(nèi)鏈接，選擇站內(nèi)鏈接頁面，點(diǎn)擊確定完成設(shè)置。

4.3添加動態(tài)新聞模塊

拖動文章列表模塊移動到頁面下部，在右側(cè)功能區(qū)這是模塊標(biāo)題“新聞動態(tài)”，選擇文章來源，勾選校園資訊，最新公告，那么我們最新上傳的公告和新聞都要在此處進(jìn)行顯示。設(shè)置模塊樣式為左文右圖型，排列方式為單排。這樣要求我們在發(fā)布新聞時候，要配有圖片，文章中的圖片將被自動抓取到圖片區(qū)進(jìn)行顯示。模塊設(shè)置好后還要添加文章，在手機(jī)屏幕模擬區(qū)選擇新聞動態(tài)模塊，在懸浮菜單中選擇“添加文章”按鈕。輸入文章標(biāo)題和內(nèi)容，自帶文字編輯功能，可以設(shè)置字體樣式和排版以及插圖，點(diǎn)擊確定完成文章輸入，在高級選項(xiàng)里設(shè)置文章類型、來源、作者等信息。

4.4網(wǎng)站的發(fā)布

進(jìn)入微信公眾號后臺。進(jìn)入按鈕設(shè)置，添加按鈕“微官網(wǎng)”，將按鈕鏈接設(shè)置成“https：//tjbhzy.m.icoc.in/”，微信用戶在瀏覽微信時點(diǎn)擊按鈕，即可訪問微官網(wǎng)。

5結(jié)束語

本文從基于CMS建站基本流程上對渤海學(xué)院微網(wǎng)站系統(tǒng)的開發(fā)進(jìn)行了梳理，從技術(shù)分析到微官網(wǎng)界面設(shè)計(jì)再到微官網(wǎng)的設(shè)計(jì)和功能設(shè)計(jì)開發(fā)。經(jīng)過實(shí)踐可以看出，以CMS技術(shù)為核心的動態(tài)建站系統(tǒng)，為微網(wǎng)站的開發(fā)提供了快捷方便的開發(fā)環(huán)境，管理員可以非常方便地對其進(jìn)行更新維護(hù)和管理工作，豐富網(wǎng)站內(nèi)容、更新信息和開發(fā)新的欄目，對管理員要求條件寬松，不需要計(jì)算機(jī)專業(yè)人員，這樣方便了管理員使用。校園微官網(wǎng)的建設(shè)加大了學(xué)院的宣傳力度，推進(jìn)了學(xué)院宣傳工作的信息化，提高了學(xué)院知名度和影響力。