趙建兵

校園網(wǎng)站是學校信息化建設(shè)的重要內(nèi)容之一,是學校形象展示、信息發(fā)布、業(yè)務(wù)交流、師生溝通的重要陣地。但網(wǎng)站開發(fā)和維護工作量大,也存在一定的技術(shù)難度,尋求一套簡單可行的網(wǎng)站建設(shè)方法對于中小學校來說具有重要的意義。

CMS(內(nèi)容管理系統(tǒng))是現(xiàn)在比較流行的一種網(wǎng)站建設(shè)模式。它通過在線網(wǎng)頁編輯器和數(shù)據(jù)庫來組織網(wǎng)頁信息,配以相應(yīng)的支撐頁面來讀取顯示信息。在中小學校園網(wǎng)站建設(shè)中,可以使用CMS降低網(wǎng)站建設(shè)難度,簡化網(wǎng)站開發(fā)。

在線網(wǎng)頁編輯器是CMS不可缺少的組件,通常運行在網(wǎng)站后臺,用于添加新的網(wǎng)頁內(nèi)容。本文介紹使用FCKeditor進行校園網(wǎng)站開發(fā)的方法,配合ASP編制一套簡單的內(nèi)容管理系統(tǒng)。FCKeditor是一款優(yōu)秀的在線網(wǎng)頁編輯器,支持多種網(wǎng)絡(luò)編程語言,并支持多種瀏覽器。

一、系統(tǒng)設(shè)計

系統(tǒng)分前臺頁面和后臺管理兩部分。前臺面頁包括網(wǎng)站首頁、分類目錄頁和內(nèi)容顯示頁。后臺管理包括內(nèi)容添加頁和網(wǎng)頁數(shù)據(jù)庫,以及用戶身份驗證。用戶身份驗證是后臺管理的關(guān)鍵步驟,一般的方法是收集用戶輸入的用戶名和密碼,然后和數(shù)據(jù)庫中存儲的用戶信息比較,如果是合法用戶就將用戶身份存到一個Session變量中,然后在有權(quán)限限制的網(wǎng)頁中驗證這個變量,否則就退出系統(tǒng)。本文將重點說明FCKeditor和相關(guān)網(wǎng)頁以及數(shù)據(jù)庫的配合使用。

核心方法如下:在內(nèi)容添加頁中使用FCKe ditor創(chuàng)建網(wǎng)頁內(nèi)容,網(wǎng)頁對應(yīng)的HTML代碼存放到數(shù)據(jù)庫表的備注字段中。將引用的圖片、Flash動畫、視頻等媒體文件存放到網(wǎng)站的素材文件夾中。瀏覽網(wǎng)頁時,從數(shù)據(jù)庫表的備注字段讀取HTML代碼并傳遞給瀏覽器進行顯示。數(shù)據(jù)庫表設(shè)計如圖:

實際工作中,可以根據(jù)需要添加其他網(wǎng)頁屬性。例如:學校工作類別眾多,可以按照信息來源不同將網(wǎng)頁分類,如教研信息、教學信息、教務(wù)信息等,由此可以添加一個A_type字段。在IIS中創(chuàng)建一個站點,將包含此表的數(shù)據(jù)庫放在站點的根目錄下,本例中存放網(wǎng)頁的表名為article。

二、FCKeditor的安裝與配置

1.下載安裝包

到FCKeditor的官方網(wǎng)站www.FCKeditor.net下載最新版本。本文以FCKeditor 2.6.4為例進行介紹。

2.安裝

將文件解壓后得到FCKeditor文件夾,把它放到站點根目錄下。

3.基本配置

編輯FCKeditor/fckconfig.js文件,找到下列選項并作相應(yīng)設(shè)置。在FCKConfig.FontNames里增加中文字體宋體、楷體等。在FCKConfig.FontSizes里增加字體大小9pt、10pt等。

4.文件上傳配置

使用FCKeditor可以實現(xiàn)在編輯網(wǎng)頁時隨時上傳素材文件,但上傳功能默認是關(guān)閉的,需要手工打開,按以下步驟進行。

(1)打開FCKeditor/editor/filemanager/connectors/asp文件夾,編輯config.asp文件,找到下列選項并作相應(yīng)設(shè)置:

ConfigIsEnabled = True //設(shè)置上傳功能打開

ConfigUserFilesPath = "/userfiles/"http://設(shè)置上傳目錄為網(wǎng)站根目錄下的userfiles目錄,即素材文件夾

上傳的素材文件一般包括鏈接到的文件(如RAR)、圖片、Flash、視頻等。我們可以將這些文件存放到以當前日期為名稱的子文件夾中,以便查找。找到下面的語句:

ConfigQuickUploadPath.Add"File", ConfigUserFilesPath

在語句的末尾加上這個字符串"&"file/"& date"。其中file表示類型文件夾,date表示當前日期。這樣就完成了鏈接文件的存放設(shè)置。以同樣的方法找到"Image"、"Flash"、"Media"對應(yīng)的語句并添加相應(yīng)的字符串。

(2)編輯FCKeditor/fckconfig.js文件,找到下列選項并作相應(yīng)設(shè)置:

var _FileBrowserLanguage=asp;//將內(nèi)置文件瀏覽器的網(wǎng)絡(luò)語言設(shè)為ASP;

var _QuickUploadLanguage=asp;//將快速上傳的網(wǎng)絡(luò)語言設(shè)為ASP;

(3)快速上傳中文文件名亂碼處理

使用FCKeditor上傳中文名稱的文件,對話框中的文件名會出現(xiàn)亂碼,可以通過下面的方法解決:

打開FCKeditor/editor/filemanager/connectors/asp文件夾,編輯io.asp文件,找到SendUploadResults函數(shù),在Response.Clear后增加兩行:

Response.CodePage=65001

Response.Charset="UTF-8"

我們在做網(wǎng)站時要盡量避免使用中文作為文件和文件夾的名稱。

5.添加插入視頻功能

FCKeditor沒有提供在網(wǎng)頁中插入視頻的功能,可以使用一個插件來解決這個問題。

(1)首先下載插件(hljy.zjkedu.cn/media.rar),解壓后得到Media文件夾。將其移動到FCKeditor/editor/plugins文件中。注意文件夾名“Media”的首字母M要大寫,否則,將來在FCKeditor中調(diào)用時會出現(xiàn)“未知名工具欄項目”錯誤。

(2)編輯 FCKeditor/fckconfig.js文件,找到這一句:

FCKConfig.PluginsPath = FCKConfig.BasePath+plugins/;

在它的下面添加這條語句:

FCKConfig.Plugins.Add(Media,zh-cn );

再找到FCKConfig.ToolbarSets["Default"] =[……];這個代碼段,在其中的元素Flash的后面,添加Media。

在文件后部找到下面的代碼:

FCKConfig.FlashBrowser = true ;

從這一句開始的下面四句作用是啟用插入Flash媒體對話中瀏覽服務(wù)器的功能。復制這四行語句,并在后面的空行上粘貼,然后把粘貼內(nèi)容中所有的“Flash”字符替換為“Media”,這樣就啟動了插入Media對話框中瀏覽服務(wù)器的功能了。

再找到FCKConfig.FlashUpload = true ; 從這一句開始的下面四句作用是啟用Flash文件的上傳功能。復制這四行語句,并在后面的空行上粘貼,然后把粘貼內(nèi)容中所有的“Flash”字符替換為“Media”,這樣就啟動了Media文件的上傳功能了。修改第三行中的允許上傳文件類型擴展名,去掉swf,添加wmv、rm、rmvb、mp3等格式。

(3)打開FCKeditor/editor/plugins/Media/js文件夾,編輯fck_media_inc.asp文件,找到字符串clsid:6BF52A52-394A-11D3-B153-00C04F79FAA6,替換為clsid:22d6f312-b0f6-11d0-94ab-0080c74c7e95。

這樣,插入的Media插件就可以在FCKeditor中正常調(diào)用了。在網(wǎng)頁中插入視頻時,建議使用wmv格式,其他格式的視頻需要在客戶端瀏覽器安裝相應(yīng)播放插件才能正常觀看。

三、創(chuàng)建ASP頁面

FCKeditor配置完成以后,需要在后臺添加的內(nèi)容頁中調(diào)用,才能實現(xiàn)網(wǎng)頁在線編輯。編輯完成后,網(wǎng)頁要保存到數(shù)據(jù)庫中。瀏覽網(wǎng)頁時,再從數(shù)據(jù)庫中讀取出來。下面簡述各頁面的設(shè)計。

1.后臺管理頁面

(1)集成FCKeditor編輯器到后臺內(nèi)容添加頁面

在網(wǎng)站根目錄下利用Dreamweaver新建一個名稱為Admin.asp的網(wǎng)頁,進入代碼模式,在＜head＞標記前添加下面的語句:

＜!--#include file="FCKeditor/fckeditor.asp" --＞

在網(wǎng)頁中插入一個表單,再放置一個名稱為title的文本框,用于填寫網(wǎng)頁標題。在表單域代碼中插入以下代碼:

＜%

Dim oFCKeditor

Set oFCKeditor = New FCKeditor

oFCKeditor.BasePath ="/fckeditor/"

oFCKeditor.height=800

oFCKeditor.Value= ""

oFCKeditor.Create "details"

%＞

以上代碼在Admin網(wǎng)頁中創(chuàng)建一個名為details的FCKeditor編輯器,它在網(wǎng)頁中以表單元素的形式存在。編輯器中的工具按鈕包含了網(wǎng)頁編輯的各個功能,可以編輯所需要的各種網(wǎng)頁,發(fā)布信息。例如,從Word粘貼的功能可以把教師用Word編輯的優(yōu)秀教案直接粘貼到網(wǎng)頁中發(fā)布。

最后,在表單中插入一個提交按鈕,命名為保存,并設(shè)置表單通過post方法提交到網(wǎng)頁Add.asp。

(2)將編輯的網(wǎng)頁添加到數(shù)據(jù)庫

新建網(wǎng)頁Add.asp,添加以下代碼:

＜%

創(chuàng)建數(shù)據(jù)庫連接conn并打開,代碼略

使用addnew方法將表單數(shù)據(jù)存入數(shù)據(jù)庫

set rs=server.CreateObject("adodb.recordset")

rs.open "article",conn,1,3

rs.addnew()

rs("A_title")=Server.HTMLEncode(request.form("title"))

rs("A_details")= request.form("details")

rs.update

關(guān)閉記錄集和數(shù)據(jù)庫連接,代碼略

%＞

2.前臺瀏覽頁面

(1)網(wǎng)站首頁顯示網(wǎng)頁標題并創(chuàng)建鏈接列表

新建網(wǎng)頁Index.asp,添加以下代碼:

＜%

創(chuàng)建數(shù)據(jù)庫連接conn和記錄集rs并打開,代碼略

循環(huán)讀取網(wǎng)頁編號和標題并生成鏈接

while not rs.eof

response.write rs("A_ID") & "."

response.write "＜a href='show.asp?A_id="&rs("A_ID")&"'＞"&rs("A_title") & "＜/a＞＜br＞"

rs.movenext

wend

關(guān)閉數(shù)據(jù)庫記錄集和連接,代碼略

%＞

(2)創(chuàng)建內(nèi)容顯示頁面

新建網(wǎng)頁Show.asp,添加以下代碼:

＜%

創(chuàng)建數(shù)據(jù)庫連接conn并打開,創(chuàng)建記錄集rs,代碼略

讀取網(wǎng)頁內(nèi)容并顯示

sql="select * from article where A_ID=" & request.querystring("A_id")

rs.open sql,conn,1,1

response.write "＜center＞" & rs("A_title") &"＜/center＞＜hr＞"

response.write rs("A_details")

關(guān)閉數(shù)據(jù)庫記錄集和連接,代碼略

%＞

以上為系統(tǒng)實現(xiàn)的關(guān)鍵頁面。在實際的校園網(wǎng)站建設(shè)中,網(wǎng)頁一般要根據(jù)需要分類,并在首頁顯示分類導航條,單擊導航鏈接后進入相應(yīng)類型的網(wǎng)頁目錄。分類網(wǎng)頁目錄的創(chuàng)建和首頁中創(chuàng)建鏈接列表的方法類似,不同的是需要在查詢中加入類型限制。

這樣,我們就利用FCKeditor創(chuàng)建了一個簡單的CMS。如果再把內(nèi)容豐富一下,加上欄目設(shè)置和權(quán)限管理,就構(gòu)成一個完整的校園網(wǎng)站信息發(fā)布平臺了。教學資源庫、教師Blog都可以參照這個方法來創(chuàng)建。

(作者單位:河北懷來縣教研室)