基于CMS的高職院校微官網(wǎng)的設計與實現(xiàn)

張鵬

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

1引言

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

2相關技術

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

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

3渤海學院校園微官網(wǎng)設計

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

3.1界面設計

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

3.2網(wǎng)站欄目設計

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

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

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

4.1添加圖文展示模塊

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

4.2添加公告模塊

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

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

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

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

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

5結(jié)束語

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