基于CMS的高職院校微官網的設計與實現

張鵬

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

1引言

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

2相關技術

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

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

3渤海學院校園微官網設計

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

3.1界面設計

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

3.2網站欄目設計

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

4渤海學院校園微官網實現

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

4.1添加圖文展示模塊

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

4.2添加公告模塊

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

4.3添加動態新聞模塊

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

4.4網站的發布

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

5結束語

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