微信圖文編輯網(wǎng)站設(shè)計(jì)

遼寧對外經(jīng)貿(mào)學(xué)院 徐雪楠

微信圖文編輯網(wǎng)站設(shè)計(jì)

遼寧對外經(jīng)貿(mào)學(xué)院 徐雪楠

隨著微信公眾號的迅速發(fā)展，簡單圖文已經(jīng)無法滿足大眾的觀賞要求，在此情況下，微信圖文編輯網(wǎng)站應(yīng)運(yùn)而生，公眾平臺運(yùn)營人員可利用此類網(wǎng)站對圖文進(jìn)行編輯、美化等操作。本文闡述了圖文編輯網(wǎng)站的功能，并對數(shù)據(jù)庫設(shè)計(jì)，各個功能模塊的功能要點(diǎn)、設(shè)計(jì)思路進(jìn)行了詳細(xì)的論述。

圖文編輯；網(wǎng)站；SQL Server

1 引言

近年來，新媒體迅速發(fā)展為新一代信息傳遞的媒介，微信公眾平臺作為新媒體的代表熱度高漲，如何在微信中寫出一篇吸引眼球的文章尤為重要。對于設(shè)計(jì)一個可以幫助公眾平臺運(yùn)營人員寫出高質(zhì)量文章的圖文編輯網(wǎng)站，本網(wǎng)站包括個人中心模塊、用戶社區(qū)模塊、管理模塊、圖文編輯模塊、效果預(yù)覽模塊和圖文精選模塊。運(yùn)用了HTML+Java語言進(jìn)行網(wǎng)站設(shè)計(jì)，采用B/S開發(fā)模式，Java EE架構(gòu)，利用SQL Server數(shù)據(jù)庫進(jìn)行站內(nèi)數(shù)據(jù)設(shè)計(jì)與管理。

2 概述

2.1 網(wǎng)站的現(xiàn)狀

根據(jù)對現(xiàn)有的多個微信圖文編輯網(wǎng)站的調(diào)查和對比發(fā)現(xiàn)，各個圖文編輯網(wǎng)站雖然均有各自特色吸引用戶，但網(wǎng)站功能不夠完善，僅僅實(shí)現(xiàn)了微信圖文編輯美化的基礎(chǔ)功能，未能利用先進(jìn)的計(jì)算機(jī)和網(wǎng)絡(luò)技術(shù)處理圖文編輯器的其它功能，公眾平臺運(yùn)營人員有時需要使用多個同類網(wǎng)站才能完成一篇精美圖文的制作，極大的降低了運(yùn)營人員的工作效率，并且站內(nèi)用戶間的互動幾乎為零，降低了用戶活躍度。

2.2 網(wǎng)站的意義

微信圖文編輯網(wǎng)站是一個便于用戶對微信圖文進(jìn)行編輯、排版、美化的在線編輯工具，具有豐富的素材，實(shí)用性強(qiáng)且互動性強(qiáng)的功能模塊和簡單易操作的界面，是“白板”用戶入門圖文排版的“橋梁”，專業(yè)運(yùn)營人員的進(jìn)階工具。

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

3.1 開發(fā)工具及環(huán)境

網(wǎng)站使用HTML+Java語言進(jìn)行程序編寫，開發(fā)工具采用Java語言的開發(fā)平臺MyEclipse。操作系統(tǒng)是64位的Windows 7，開發(fā)環(huán)境為JDK 1.6.0+MyEclipse 8.5+Tomcat 6.0，數(shù)據(jù)庫采用SQL server 2008，瀏覽器使用IE10版本。

3.2 開發(fā)技術(shù)

使用Servlet在其內(nèi)部調(diào)用其他的Java資源并與多種數(shù)據(jù)庫進(jìn)行交互，替代傳統(tǒng)CGI，動態(tài)的生成Web界面。采用JDBC實(shí)現(xiàn)網(wǎng)站與數(shù)據(jù)庫的通信。使用可重復(fù)利用的JavaBean，可視化的JavaBean實(shí)現(xiàn)控制邏輯、業(yè)務(wù)邏輯、表示層之間的分離；非可視化的JavaBean用于后臺數(shù)據(jù)處理和連接數(shù)據(jù)庫。

4 功能需求分析

個人中心：用戶管理個人信息及自定義素材的功能模塊。

用戶社區(qū)：用戶與用戶之間良性互動的交流平臺。

管理模塊：網(wǎng)站管理員對用戶的網(wǎng)絡(luò)行為進(jìn)行管理及審核的功能模塊。

圖文編輯功能：用戶可通過此功能對所需排版的圖文進(jìn)行編輯美化。

效果預(yù)覽功能：在頁面中插入第三方工具，查看正在被編輯的圖文在手機(jī)上的預(yù)覽效果。

圖文精選：為用戶提供優(yōu)秀圖文的實(shí)例作為參考范本。

5 網(wǎng)站規(guī)劃設(shè)計(jì)

5.1 模塊設(shè)計(jì)

整個網(wǎng)站可以劃分為6個模塊：個人中心模塊、用戶社區(qū)模塊、管理模塊、圖文編輯模塊、效果預(yù)覽模塊和圖文精選模塊。網(wǎng)站模塊劃分圖如圖1所示。

5.2 數(shù)據(jù)庫物理結(jié)構(gòu)設(shè)計(jì)

表是數(shù)據(jù)庫核心，表的設(shè)計(jì)至關(guān)重要。根據(jù)前面對網(wǎng)站功能模塊的分析，可以得出網(wǎng)站中所用到的數(shù)據(jù)信息表基本包括：用戶信息表、文件存儲表、默認(rèn)素材表、自定義素材表、精選圖文表和用戶評論表。

用戶信息表（User_info），用于存儲用戶所注冊的個人信息。

文件存儲表（User_file)，用于存儲用戶上傳保存的圖文文件信息。

默認(rèn)素材表（Fodder_default），用于存儲網(wǎng)站所提供的素材信息，如表1所示。

圖1 網(wǎng)站模塊劃分

表1 默認(rèn)素材表

自定義素材表（User_fodder）,用于存儲用戶上傳的自定義素材信息，如表2所示。

表2 自定義素材表

精選圖文表（image-text），用于存儲圖文精選模塊所需顯示的圖文信息。

用戶評論表（User_comment)，用于存儲用戶在用戶社區(qū)內(nèi)提交的評論信息。

5.3 主要功能模塊設(shè)計(jì)

5.3.1 首頁設(shè)計(jì)

為使首頁從視覺角度更加簡潔舒適，首頁采用星空色為主色調(diào)，搭配以紅色（圖文編輯）、深藍(lán)色（個人中心）、橘黃色（用戶向?qū)В楸尘暗墓δ苣K及簡約的輔助信息條，并采用黃金分割比例布局頁面中各個組件位置，由于背景顏色較深，頁面內(nèi)字體顏色大體選用白色，給予用戶最佳的視覺效果。功能模塊通過超鏈接可跳轉(zhuǎn)至相應(yīng)子頁面，并設(shè)置鼠標(biāo)經(jīng)過圖像及點(diǎn)擊音效，使得模塊按鈕跳脫死板，靈動起來。

5.3.2 個人中心

此功能模塊專為網(wǎng)站注冊用戶建立，普通用戶可在注冊頁面填寫用戶個人信息完成注冊，使用所注冊的用戶名及密碼進(jìn)行站內(nèi)登錄。此模塊通過JDBC連接數(shù)據(jù)庫，訪問用戶信息表驗(yàn)證用戶信息。登錄成功后，將用戶名保存到Session中，并在文件存儲表中查詢顯示此用戶已保存的圖文信息（單頁可顯示15條結(jié)果，當(dāng)用戶保存文件多于15條時分頁顯示），用戶可打開文件對其內(nèi)容進(jìn)行編輯，修改等操作，或?qū)⒁驯４娴膱D文上傳至圖文精選模塊。

此模塊中還具備消息通知功能，用戶可通過此功能獲取網(wǎng)站管理員發(fā)布的消息，以及用戶社區(qū)中的互動消息提醒等。此外，用戶可點(diǎn)擊頁面右上角用戶名進(jìn)入個人信息界面，查看或修改個人信息，當(dāng)用戶修改登錄密碼成功后（新密碼與舊密碼不同），需重新登陸后才可繼續(xù)訪問此模塊及站內(nèi)其他內(nèi)容。

此功能模塊新增現(xiàn)有圖文編輯網(wǎng)站所不具備的自定義素材功能，用戶可根據(jù)自身喜好上傳個人素材至自定義素材庫，但所上傳的素材必須符合站內(nèi)規(guī)定，且素材需在網(wǎng)站管理員的審核通過后才可使用，審核時間一般為10-50分鐘，如果用戶上傳的素材不符合要求，不予以審核通過，并以消息形式將審核結(jié)果發(fā)送至用戶個人中心。用戶也可以下載用戶社區(qū)中其他用戶的分享素材，下載完成后即可保存至自定義素材庫。用戶可進(jìn)入自定義素材管理欄目中對已上傳的素材進(jìn)行重命名、刪除操作，用戶已刪除素材不可找回。

5.3.3 用戶社區(qū)

用戶社區(qū)是便于用戶與用戶之間良性互動，交流共享的信息交流平臺，可將資源，用戶和信息流整合到一起，也保證了網(wǎng)站與用戶之間的互動性。采用左側(cè)可隱藏式的框架設(shè)計(jì)，盡量減少對頁面的占用。導(dǎo)航欄中當(dāng)前訪問的欄目突出顯示，給予用戶良好的“位置”感。功能模塊內(nèi)設(shè)置了關(guān)鍵詞搜索、話題推薦、信息發(fā)布及用戶評論四個子模塊。其主要功能如下：

關(guān)鍵詞搜索：用戶可在搜索欄內(nèi)輸入關(guān)鍵詞點(diǎn)擊“搜索”按鈕后查詢閱覽相關(guān)信息。話題推薦：根據(jù)用戶瀏覽習(xí)慣智能篩選出用戶可能感興趣的話題。信息發(fā)布：用戶編寫話題信息，或者將自己已通過審核的個人素材發(fā)布到用戶社區(qū)。

用戶評論：用戶可在搜索或話題推薦功能篩選出的話題中提交個人評論參與話題討論。

5.3.4 管理模塊

此功能模塊僅限網(wǎng)站管理員使用，網(wǎng)站管理員可通過對用戶站內(nèi)行為的監(jiān)聽，及時發(fā)現(xiàn)具有不正當(dāng)網(wǎng)絡(luò)行為嫌疑的用戶，獲取其個人信息，經(jīng)停號審查后，如果發(fā)現(xiàn)用戶確有抄襲、不恰當(dāng)言論、惡意引導(dǎo)等不良行為，情節(jié)較輕者處以警告處理，停號三天后可恢復(fù)使用，如果情節(jié)嚴(yán)重，管理員可對其站內(nèi)賬號進(jìn)行永久封號處理。

網(wǎng)站管理員可對用戶所上傳的自定義素材進(jìn)行審核，如果素材無任何違規(guī)行為，則上傳成功，素材的相對路徑及素材信息保存至自定義素材表中，否則上傳失敗，管理員以消息通知的形式將審核結(jié)果返回到用戶個人中心。用戶所發(fā)布或評論的信息中如果含有敏感詞匯，網(wǎng)站管理員可對此條評論進(jìn)行刪除處理，并發(fā)送警告信息至此用戶的個人中心。

5.3.5 圖文編輯功能

此功能模塊是本網(wǎng)站最核心的功能，分為菜單欄和工具欄、編輯欄三個部分，菜單欄位于頁面左側(cè)，用戶可點(diǎn)擊相應(yīng)欄目名稱，顯示可使用的默認(rèn)素材以及用戶的自定義素材(單頁可顯示15條結(jié)果，如果當(dāng)前素材多于15條時，采用滾動條，用戶可拖動滾動條查看全部素材）。工具欄位于頁面右端偏上位置，工具欄中工具布局及組件參照office2010中word標(biāo)準(zhǔn)工具欄，增添超鏈接按鈕，用戶可點(diǎn)擊此按鈕，在彈出的窗體內(nèi)輸入鏈接網(wǎng)絡(luò)圖片、動畫、音頻或視頻的地址，便可將地址所指向的多媒體文件插入到圖文的當(dāng)前位置。編輯欄是用戶編輯圖文的顯示層，其主要作用為將用戶在站內(nèi)的文章撰寫和排版等可視化，呈現(xiàn)出圖文的初步預(yù)覽效果。

除基礎(chǔ)編輯功能外，在此模塊中增加圖文保存功能，解決現(xiàn)有圖文編輯網(wǎng)站不具備記憶功能的問題，用戶可在圖文編輯中或者編輯完成后對其進(jìn)行保存操作。當(dāng)用戶點(diǎn)擊“保存”按鈕時，后臺獲取編輯欄中的圖文信息將其保存為.doc格式的word文檔，同時獲取用戶登錄信息，并彈出“文件命名”對話框，用戶輸入符合命名要求的文件名后，可點(diǎn)擊“確定”完成文件保存，所保存文件的相對路徑及信息將保存至文件存儲表中，用戶可在個人中心內(nèi)查看文件。

5.3.6 效果預(yù)覽功能

此功能模塊的實(shí)現(xiàn)需要綁定第三方平臺工具。具體功能為獲取用戶正在編輯的圖文內(nèi)容，模擬手機(jī)預(yù)覽效果，解決圖文可能因電腦與手機(jī)屏幕大小及分辨率不同等原因?qū)е碌念A(yù)覽效果不同，出現(xiàn)排版錯亂的問題（注：不同品牌、型號的手機(jī)預(yù)覽效果存在差異，預(yù)覽效果僅供參考使用）。

5.3.7 圖文精選

圖文精選模塊的主要功能是為用戶提供圖文排版的參考范本實(shí)例，網(wǎng)站管理員選取現(xiàn)有公眾號所發(fā)布的優(yōu)秀圖文，經(jīng)原作者授權(quán)后上傳至精選圖文庫，或者網(wǎng)站用戶將自己保存至個人中心的原創(chuàng)圖文上傳，經(jīng)網(wǎng)站管理員審核并且通過后上傳至精選圖文庫。所有精選圖文分頁顯示，用戶可自由選擇每個版面可顯示圖文信息數(shù)量的分頁值，每條信息包括封面圖片、圖文標(biāo)題、圖文作者、圖文摘要以及閱覽次數(shù)，更加清晰直觀的將每一篇圖文的主要內(nèi)容呈現(xiàn)給用戶，便于用戶快速獲取所需信息。模塊內(nèi)設(shè)有用戶評論功能，用戶可在每篇圖文的文末評論區(qū)處，點(diǎn)贊或?qū)懴伦约簩τ谖恼碌目捶ê徒ㄗh。

6 結(jié)語

本文闡述了一個基于Java Web技術(shù)的微信圖文編輯網(wǎng)站設(shè)計(jì)過程，網(wǎng)站適用于微信圖文的編輯和排版。以圖文編輯功能為核心，設(shè)計(jì)了可根據(jù)個人喜好自由上傳素材并共享的自定義素材功能，以及可在網(wǎng)站綁定的第三方工具上查看圖文排版效果的效果預(yù)覽功能，擺脫素材少而單調(diào)和圖文排版錯亂的問題。并且增加了圖文精選和用戶社區(qū)兩大模塊，便于用戶之間的互動交流，提升用戶活躍度。

[1]楊軍.基于JAVA平臺的網(wǎng)站內(nèi)容管理系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)[J].科技創(chuàng)新與應(yīng)用,2016,22:100.

[2]趙鋼.基于java Web技術(shù)的網(wǎng)站系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)[J].信息與電腦(理論版),2013,06:73-74.

[3]鄧麗主編.數(shù)據(jù)庫原理與技術(shù)簡明教程[M].大連:東軟電子出版社,2012:28-29.

圖5 計(jì)數(shù)、譯碼和顯示電路原理圖

2.4 計(jì)數(shù)、譯碼和顯示電路

計(jì)數(shù)由二進(jìn)制可逆計(jì)數(shù)器CD4516芯片完成，譯碼采用四—十六線譯碼器CD4514完成，顯示電路由發(fā)光二極管和電阻組成，原理圖如圖5所示。

譯碼器CD4514的功能表如表2所示，當(dāng)CD4516為加計(jì)數(shù)時，即外接直流電源的方向?yàn)樯险仑?fù)時，譯碼器能夠從左向右依次驅(qū)動發(fā)光二極管發(fā)光。

顯示電路如圖5所示，由發(fā)光二極管和電阻組成。當(dāng)發(fā)光二極管的陽極加高電平時，二極管發(fā)光；相反，發(fā)光二極管的陽極加低電平時，發(fā)光二極管不發(fā)光。

3.結(jié)論

本文介紹的直流電源方向顯示器的設(shè)計(jì)，可以鞏固數(shù)字電路的基礎(chǔ)知識及增強(qiáng)理論知識的應(yīng)用能力，控制發(fā)光二極管依次發(fā)光的速度也可以用非門和電阻組成的閘門電路完成。計(jì)數(shù)和譯碼也可以采用其它的可逆計(jì)數(shù)器和譯碼器實(shí)現(xiàn)。

參考文獻(xiàn)

[1]卿太全,李蕭,郭明瓊.常用數(shù)字集成電路原理與應(yīng)用[M].北京:人民郵電出版社,2006.

[2]秦曾煌.電工學(xué)(第六版)下冊電子技術(shù)[M].北京:高等教育出版社,2004.

[3]劉麗華,劉明輝,方超.電網(wǎng)頻率顯示器的設(shè)計(jì)[J].電子制作,2016(Z1): 5-7.

徐雪楠（1995—）,女，遼寧錦州人，大學(xué)本科，現(xiàn)就讀于遼寧對外經(jīng)貿(mào)學(xué)院，研究方向：網(wǎng)站設(shè)計(jì)。