馮建平， 張 森， 范 蕾， 王路明

（海南師范大學(xué) 信息科學(xué)技術(shù)學(xué)院，海南 海口571158）

中華“古琴”文化專題學(xué)習(xí)網(wǎng)站的設(shè)計(jì)和實(shí)現(xiàn)

馮建平， 張 森， 范 蕾， 王路明*

（海南師范大學(xué) 信息科學(xué)技術(shù)學(xué)院，海南 ?？?71158）

通過對中國古典樂器“古琴”的歷史、結(jié)構(gòu)、典故和名曲賞析等內(nèi)容圖文聲并茂的介紹，呈現(xiàn)出中華古琴中蘊(yùn)含著的豐富而深刻的文化內(nèi)涵.網(wǎng)站作品基于ASP技術(shù)設(shè)計(jì)和實(shí)現(xiàn)，并運(yùn)用Photoshop工具和結(jié)合Flash動(dòng)畫技術(shù)，風(fēng)格樸素淡雅，寧靜與舒緩，體現(xiàn)出中國傳統(tǒng)文化博大精深的內(nèi)涵和中國傳統(tǒng)藝術(shù)的魅力.

古琴文化；專題學(xué)習(xí)網(wǎng)站；ASP；Flash

古琴是我國古老的彈撥樂器之一，又稱“七弦琴”，位列中國傳統(tǒng)文化的“七雅”（琴棋書畫詩酒茶）之首.古琴音色清透、典雅、端莊、優(yōu)美，如詩如畫，被世人譽(yù)為“天籟之音”.2003年，中國古琴藝術(shù)入選世界“人類口頭和非物質(zhì)遺產(chǎn)代表作”名錄，有著三千多年悠久歷史的古琴藝術(shù)再次得到了世界公認(rèn)［1］.

本文從中華古琴文化的內(nèi)涵出發(fā)，介紹了中華“古琴”文化專題學(xué)習(xí)網(wǎng)站的設(shè)計(jì)和實(shí)現(xiàn)方法.網(wǎng)站中古琴照片等大部分素材，均由作者實(shí)地考察民間古琴協(xié)會活動(dòng)現(xiàn)場拍攝，精心修剪制作而成.網(wǎng)站風(fēng)格樸素淡雅，體現(xiàn)出古琴的寧靜和蘊(yùn)含的豐富而深刻的文化內(nèi)涵.選取古琴作為網(wǎng)站的主題，是為了保護(hù)古琴文化，通過對古琴文化介紹，讓人們能更深入的了解中國的琴文化，提高人們對“古琴”文化的理解和欣賞能力，繼承并發(fā)揚(yáng)中華民族五千年流傳下來的珍貴文化遺產(chǎn)［2］.本文主要內(nèi)容曾于2009年7月，在教育部主辦的“2009年第二屆中國大學(xué)生文科計(jì)算機(jī)設(shè)計(jì)”大賽中，獲得“學(xué)習(xí)平臺設(shè)計(jì)網(wǎng)站類”作品二等獎(jiǎng).

1 網(wǎng)站總體結(jié)構(gòu)

網(wǎng)站總體結(jié)構(gòu)分為三個(gè)部分：開篇設(shè)計(jì)、前臺內(nèi)容設(shè)計(jì)和后臺管理系統(tǒng)設(shè)計(jì).

1.1 開篇設(shè)計(jì)

網(wǎng)站首頁的開篇設(shè)計(jì)風(fēng)格歷來是網(wǎng)站建設(shè)重要的環(huán)節(jié)之一，不僅因?yàn)椤暗谝挥∠蟆敝陵P(guān)重要，而且直接關(guān)系到網(wǎng)站各個(gè)欄目首頁、內(nèi)容頁的風(fēng)格和框架布局的協(xié)調(diào)統(tǒng)一問題.本網(wǎng)站開篇采用“畫卷”舒緩展開的形式，以翠竹搖曳、古人撫琴的格調(diào)開場，配以“中國龍瑩篆體”的古字體，古琴悠揚(yáng)的背景音樂，讓人們從開頭就能充分領(lǐng)略到古琴的風(fēng)韻意味.網(wǎng)頁效果見圖1.

圖1首頁開篇設(shè)計(jì)的畫卷展開風(fēng)格Fig.1 The start-page design style of picture expanding

1.2 前臺內(nèi)容設(shè)計(jì)

網(wǎng)站的前臺設(shè)計(jì)主要是為了向人們介紹古琴文化知識，理解和欣賞古琴文化內(nèi)涵.網(wǎng)站共分為六個(gè)模塊，分別為古琴新聞、古琴歷史、古琴結(jié)構(gòu)、古琴典故、名曲賞析和古琴論壇（見圖2）.

圖2主頁設(shè)計(jì)Fig.2 The design of home-page

1.3 后臺管理系統(tǒng)設(shè)計(jì)

為了實(shí)現(xiàn)網(wǎng)站效果，便于網(wǎng)站內(nèi)容的更新和修改，制作了網(wǎng)站后臺管理系統(tǒng)，設(shè)有公告、文章、論壇和新聞管理等功能，實(shí)現(xiàn)對網(wǎng)站的維護(hù)操作.系統(tǒng)代碼編寫運(yùn)用ASP動(dòng)態(tài)語言、Access數(shù)據(jù)庫技術(shù)，以及簡單的JavaScript腳本語言.網(wǎng)頁色調(diào)是以藍(lán)色為主，配以淡藍(lán)色水晶按鈕實(shí)現(xiàn)［3］，網(wǎng)頁效果見圖3.

圖3后臺管理系統(tǒng)設(shè)計(jì)Fig.3 The design of website background management system

（1）用戶功能：用戶通過注冊，可以在論壇進(jìn)行交流，可以發(fā)表相關(guān)古琴的知識、新聞和問題等.網(wǎng)頁效果見圖4.

圖4古琴文化討論版模塊Fig.4 Guqin culture discussion boards

（2）管理員功能：能夠?qū)W(wǎng)站所有文章進(jìn)行添加、刪除、修改操作，以實(shí)時(shí)維護(hù)網(wǎng)站，回應(yīng)用戶，審核注冊人員的文章，刪除不當(dāng)操作，保證網(wǎng)站言論的安全和合法.

2 前臺模塊具體內(nèi)容設(shè)計(jì)

網(wǎng)站前臺內(nèi)容共分為六個(gè)模塊：古琴新聞、古琴歷史、古琴結(jié)構(gòu)、古琴典故、名曲賞析和古琴論壇（見圖 5）.

圖5前臺內(nèi)容設(shè)計(jì)的六個(gè)模塊Fig.5 The six modules design of website front-ground content

2.1 古琴新聞

搜集、記錄了各個(gè)網(wǎng)站最新的發(fā)布信息、有關(guān)古琴的新聞，再配以新聞現(xiàn)場真實(shí)的照片，展現(xiàn)世界各地關(guān)于古琴的最新動(dòng)態(tài).

2.2 古琴歷史

對古琴的相關(guān)歷史知識做了詳細(xì)介紹.如古琴概況、中國古琴歷史、鼓琴琴派、溪山琴?zèng)r、冷仙十六法等.將中國部分古書中設(shè)計(jì)古琴的歷史提煉綜述出來，揭示中國古琴文化的意義和內(nèi)涵.

2.3 古琴結(jié)構(gòu)

分別從古琴的“天”、“地”兩面結(jié)構(gòu)介紹.在征求和采納了古琴學(xué)者的建議后，在“天”、“地”各面上，依據(jù)古琴本身的含義，分部位介紹古琴，并配以古琴各個(gè)部位的介紹，輔助以小手提示箭頭，讓人們能清楚點(diǎn)擊的位置.網(wǎng)頁效果見圖6～8.其中，圖7是古琴的“天”面結(jié)構(gòu)、圖8是古琴的“地”面結(jié)構(gòu)，它們都分別從古琴的頭、腰、尾三處展開動(dòng)畫效果.這里古琴的不同部位代表了不同的含義，把中華文化的精華融入其中.該模塊將古琴擬人化，既體現(xiàn)了中華民族古琴文化的博大精深，也體現(xiàn)了琴者對古琴的精神寄托.

2.4 古琴典故

介紹了我國古琴的相關(guān)典故.如高山流水覓知音、司馬相如“鳳求凰”、鄒忌說琴諫齊王、文姬寄情“十八拍”、聶政學(xué)琴報(bào)父仇等典故，該模塊讓我們從生動(dòng)的典故中了解古人與古琴的各種歷史趣事.

2.5 名曲賞析

收集了流傳的古琴名曲，如“高山流水”曲、“平沙落雁”曲、“瀟湘水云”曲等，并配以精心設(shè)計(jì)的相應(yīng)名曲的Flash動(dòng)畫，可以供瀏覽者下載欣賞、陶冶情操.這些名曲散發(fā)出古琴的寧靜與舒緩，感受到沁人心脾的舒暢，找尋一個(gè)與世隔絕的世外桃源之意［4］.

圖6古琴的整體結(jié)構(gòu)Fig.6 The overall structure of Guqin

圖7古琴的“天”面結(jié)構(gòu)Fig.7 The front structure of Guqin

圖8古琴的“地”面結(jié)構(gòu)Fig.8 The back structure of Guqin

2.6 古琴文化論壇

提供喜愛古琴的朋友們的網(wǎng)上交流平臺，通過注冊，大家可以在論壇進(jìn)行交流，可以發(fā)表相關(guān)古琴的知識、新聞和問題等.

3 系統(tǒng)平臺設(shè)計(jì)及關(guān)鍵技術(shù)

系統(tǒng)平臺設(shè)計(jì)采用基于B/S結(jié)構(gòu)的三層體系結(jié)構(gòu).代碼編寫方面，運(yùn)用ASP動(dòng)態(tài)服務(wù)器技術(shù)，VBScript腳本語言及簡單的JavaScript腳本語言對網(wǎng)頁進(jìn)行修飾，配以div和css布局制作動(dòng)態(tài)網(wǎng)頁.數(shù)據(jù)庫技術(shù)方面，用SQL語言對Access數(shù)據(jù)庫執(zhí)行查找、插入、更新、刪除等操作，并將其運(yùn)用在后臺設(shè)計(jì)中的公告、歷史典故、論壇、新聞這四大模塊.應(yīng)用軟件有PhotoShop圖像處理軟件，Dreamweaver網(wǎng)頁制作軟件，F(xiàn)lash動(dòng)畫制作軟件等.

ASP動(dòng)態(tài)技術(shù)是系統(tǒng)平臺設(shè)計(jì)的關(guān)鍵技術(shù).ASP（Active Service Page）是微軟推出的動(dòng)態(tài) Web設(shè)計(jì)技術(shù)，是一種用于WWW服務(wù)的服務(wù)器端腳本環(huán)境，在站點(diǎn)的Web服務(wù)器上解釋腳本，可產(chǎn)生并執(zhí)行動(dòng)態(tài)、交互式、高效率的站點(diǎn)服務(wù)器應(yīng)用程序.利用它，可以很容易地把HTML標(biāo)記、文本、腳本命令及ActiveX組件混合在一起構(gòu)成ASP頁，以此來生成動(dòng)態(tài)網(wǎng)頁，創(chuàng)建交互式的Web站點(diǎn)，實(shí)現(xiàn)對Web數(shù)據(jù)庫的訪問［5］.

4 古典風(fēng)格網(wǎng)頁的設(shè)計(jì)及修飾

4.1 頁面設(shè)計(jì)及修飾

在頁面設(shè)計(jì)上，運(yùn)用PhotoShop對圖片資料進(jìn)行美化加工處理，運(yùn)用Dreamweaver工具配以div和css布局制作動(dòng)態(tài)網(wǎng)頁，結(jié)合Flash動(dòng)畫對相應(yīng)內(nèi)容進(jìn)行填充與修飾，以創(chuàng)建結(jié)構(gòu)合理、色調(diào)搭配美觀的網(wǎng)頁.

具體的設(shè)計(jì)方法為：

（1）色調(diào)搭配：選用灰青色調(diào)，注重古風(fēng)淡雅，展現(xiàn)古典韻味.

（2）布局：運(yùn)用 PhotoShop 和 Dreamweaver工具，采用div+css實(shí)現(xiàn)美觀合理的布局.

（3）Flash動(dòng)畫制作特效頁面：如在“高山流水”曲、“平沙落雁”曲、“瀟湘水云”等名曲賞析中，配以精心設(shè)計(jì)的相應(yīng)名曲的Flash動(dòng)畫.運(yùn)用遮罩層設(shè)置、設(shè)置熱區(qū)域等方法，實(shí)現(xiàn)頁面的舒展百葉窗、幽靜淡入淡出、緩緩鼠標(biāo)熱區(qū)“翻書”等特殊效果，充分體現(xiàn)古琴文化的寧靜與舒緩［6］.

4.2 開篇的“畫卷”古韻風(fēng)格

如圖1所示，開篇采用“畫卷”舒緩展開的形式，翠竹搖曳的畫面、古琴悠揚(yáng)的背景音樂，配以“中國龍瑩篆體”的古字體，“三合一”營造古典韻味.開篇畫軸Flash的另一特色，畫卷底部配上附有代表性照片的電影膠片式運(yùn)動(dòng)，從整副畫卷底部從右向左移動(dòng)以展示出來，為畫卷增添幾分協(xié)調(diào)美感.4.3古琴結(jié)構(gòu)的“天”、“地”風(fēng)格

如圖 6～8所示，分別從古琴的“天”、“地”兩面結(jié)構(gòu)來介紹，從琴面、琴弦、琴徽、岳山、絨扣、琴底、龍池鳳沼、雁足、軫子九個(gè)方面詳述古琴的構(gòu)造.并且通過我們制作的Flash動(dòng)畫對古琴“天”、“地”兩面的結(jié)構(gòu)進(jìn)行專業(yè)的介紹，讓人們了解古琴的各個(gè)部分所代表的中國文化內(nèi)涵.

4.4 名曲賞析的“寧靜與舒緩”曲韻風(fēng)格

古琴音樂風(fēng)格是淡靜、虛靜、幽靜、恬靜，網(wǎng)站中有代表性的三首古琴名曲的網(wǎng)頁設(shè)計(jì)風(fēng)格為：

（1）“平沙落雁”曲：選用乾隆間畫家劉銓所作八屏條“平沙落雁圖”，采用淡入淡出的效果，配以“平沙落雁”古琴音樂合成而出，顯出其世外桃源之意（見圖 9）.

（2）“瀟湘水云”曲：采用翻書的方式，設(shè)置了四個(gè)熱區(qū)域，以實(shí)現(xiàn)真正意義的用鼠標(biāo)“翻書”的效果（見圖 10）.

（3）“高山流水”曲：通過運(yùn)用遮罩方法，一層一層地進(jìn)行設(shè)置，實(shí)現(xiàn)百葉窗的效果；背景音亦為“高山流水”古琴曲，并配有俞伯牙、鐘子期“高山流水遇知音”的歷史典故（見圖11）.

圖9“平沙落雁”曲Fig.9 The music of Pingsha Luoyan

圖10“瀟湘水云”曲Fig.10 The music of Xiaoxiang Shuiyun

圖11“高山流水”曲Fig.11 The music of high mountains and flowing waters

下面給出的是名曲賞析中“瀟湘水云”曲，實(shí)現(xiàn)用鼠標(biāo)“翻書”的網(wǎng)頁顯示效果的翻頁代碼［7］.

5 結(jié)語

中華古琴音樂，讓人靜氣寧神、修身養(yǎng)性，讓人身、心、靈和諧.稱為“國琴”的古琴已逐漸被世界所矚目.利用現(xiàn)代科學(xué)技術(shù)，弘揚(yáng)中國傳統(tǒng)文化，感受古琴魅力，提高人們對古琴文化的理解和欣賞能力，不僅僅是繼承和發(fā)揚(yáng)中華民族的珍貴文化遺產(chǎn)，而且古琴文化中所蘊(yùn)含的琴道、琴德也是我們社會應(yīng)提倡的文化內(nèi)涵.

［1］董蓓蓓.淺論古琴的文化內(nèi)涵[J].藝海,2007(2):25-31.

［2］胡就,劉瑩論.中國古琴藝術(shù)的保護(hù)與發(fā)展[J].懷化學(xué)院學(xué)報(bào),2009(7):8-12.

［3］潘曉南.動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)基礎(chǔ)[M].北京:中國鐵道出版社,2008.

［4］中國古曲網(wǎng).古琴頻道[EB/OL].[2010-03-01]http://www.guqu.net/guqin.htm

［5］柯清超,黃娟.專題學(xué)習(xí)網(wǎng)站支撐平臺的設(shè)計(jì)與應(yīng)用[EB/OL].[2005-11-05]http://www.jswl.cn/course/kczh/IT/IIS/index1.htm.

［6］徐帆,張立浩.Photoshop圖像處理簡明教程(CS中文版)[M].北京:清華大學(xué)出版社,2003.

［7］李青,楊光.Flash MX 2004 ActionScript入門[M].北京:清華大學(xué)出版社,2005.

Design and Implementation of the Topics Learning Website on Guqin Culture

FENG Jianping， ZHANG Sen， FAN Lei， WANG Luming*

（College of Information Science and Technology，Hainan Normal University，Haikou571158，China）

The topics learning website shows a rich and profound cultural connotations in Chinese Guqin through introducing Guqin′s history,the structure,the stories and the songs etc with the method of voice and picture.The site works was designed and implemented based on ASP technology,and by using photoshop tools or combination of flash animation technology.The site style is plain and elegant,tranquil and relaxing,fully reflects the profound connotations of Chinese traditional culture and the charm of Chinese traditional art.

Guqin culture;the topics learning website;ASP;Flash

TP 37；J 632.31

A

1674-4942（2010）01-0016-05

2009-12-29

海南自然科學(xué)基金資助項(xiàng)目（807058）

*通訊作者

畢和平