張鵬
“互聯網+”時代背景下,隨著新媒體技術的迅速發展,微信已在各個領域得到應用。特別是高職校園中微信的傳播運用,更是搶抓宣傳陣地的重要途徑之一,建立微官網可更好發揮微信公眾號平臺作用,加大學院對外交流與宣傳力度。本文介紹了基于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技術為核心的動態建站系統,為微網站的開發提供了快捷方便的開發環境,管理員可以非常方便地對其進行更新維護和管理工作,豐富網站內容、更新信息和開發新的欄目,對管理員要求條件寬松,不需要計算機專業人員,這樣方便了管理員使用。校園微官網的建設加大了學院的宣傳力度,推進了學院宣傳工作的信息化,提高了學院知名度和影響力。