中華“古琴”文化專題學習網站的設計和實現

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

（海南師范大學 信息科學技術學院，海南 ?？?71158）

中華“古琴”文化專題學習網站的設計和實現

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

（海南師范大學 信息科學技術學院，海南 海口571158）

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

古琴文化；專題學習網站；ASP；Flash

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

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

1 網站總體結構

網站總體結構分為三個部分：開篇設計、前臺內容設計和后臺管理系統(tǒng)設計.

1.1 開篇設計

網站首頁的開篇設計風格歷來是網站建設重要的環(huán)節(jié)之一，不僅因為“第一印象”至關重要，而且直接關系到網站各個欄目首頁、內容頁的風格和框架布局的協調統(tǒng)一問題.本網站開篇采用“畫卷”舒緩展開的形式，以翠竹搖曳、古人撫琴的格調開場，配以“中國龍瑩篆體”的古字體，古琴悠揚的背景音樂，讓人們從開頭就能充分領略到古琴的風韻意味.網頁效果見圖1.

圖1首頁開篇設計的畫卷展開風格Fig.1 The start-page design style of picture expanding

1.2 前臺內容設計

網站的前臺設計主要是為了向人們介紹古琴文化知識，理解和欣賞古琴文化內涵.網站共分為六個模塊，分別為古琴新聞、古琴歷史、古琴結構、古琴典故、名曲賞析和古琴論壇（見圖2）.

圖2主頁設計Fig.2 The design of home-page

1.3 后臺管理系統(tǒng)設計

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

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

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

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

（2）管理員功能：能夠對網站所有文章進行添加、刪除、修改操作，以實時維護網站，回應用戶，審核注冊人員的文章，刪除不當操作，保證網站言論的安全和合法.

2 前臺模塊具體內容設計

網站前臺內容共分為六個模塊：古琴新聞、古琴歷史、古琴結構、古琴典故、名曲賞析和古琴論壇（見圖 5）.

圖5前臺內容設計的六個模塊Fig.5 The six modules design of website front-ground content

2.1 古琴新聞

搜集、記錄了各個網站最新的發(fā)布信息、有關古琴的新聞，再配以新聞現場真實的照片，展現世界各地關于古琴的最新動態(tài).

2.2 古琴歷史

對古琴的相關歷史知識做了詳細介紹.如古琴概況、中國古琴歷史、鼓琴琴派、溪山琴況、冷仙十六法等.將中國部分古書中設計古琴的歷史提煉綜述出來，揭示中國古琴文化的意義和內涵.

2.3 古琴結構

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

2.4 古琴典故

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

2.5 名曲賞析

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

圖6古琴的整體結構Fig.6 The overall structure of Guqin

圖7古琴的“天”面結構Fig.7 The front structure of Guqin

圖8古琴的“地”面結構Fig.8 The back structure of Guqin

2.6 古琴文化論壇

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

3 系統(tǒng)平臺設計及關鍵技術

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

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

4 古典風格網頁的設計及修飾

4.1 頁面設計及修飾

在頁面設計上，運用PhotoShop對圖片資料進行美化加工處理，運用Dreamweaver工具配以div和css布局制作動態(tài)網頁，結合Flash動畫對相應內容進行填充與修飾，以創(chuàng)建結構合理、色調搭配美觀的網頁.

具體的設計方法為：

（1）色調搭配：選用灰青色調，注重古風淡雅，展現古典韻味.

（2）布局：運用 PhotoShop 和 Dreamweaver工具，采用div+css實現美觀合理的布局.

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

4.2 開篇的“畫卷”古韻風格

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

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

4.4 名曲賞析的“寧靜與舒緩”曲韻風格

古琴音樂風格是淡靜、虛靜、幽靜、恬靜，網站中有代表性的三首古琴名曲的網頁設計風格為：

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

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

（3）“高山流水”曲：通過運用遮罩方法，一層一層地進行設置，實現百葉窗的效果；背景音亦為“高山流水”古琴曲，并配有俞伯牙、鐘子期“高山流水遇知音”的歷史典故（見圖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

下面給出的是名曲賞析中“瀟湘水云”曲，實現用鼠標“翻書”的網頁顯示效果的翻頁代碼［7］.

5 結語

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

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

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

［3］潘曉南.動態(tài)網頁設計基礎[M].北京:中國鐵道出版社,2008.

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

［5］柯清超,黃娟.專題學習網站支撐平臺的設計與應用[EB/OL].[2005-11-05]http://www.jswl.cn/course/kczh/IT/IIS/index1.htm.

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

［7］李青,楊光.Flash MX 2004 ActionScript入門[M].北京:清華大學出版社,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

海南自然科學基金資助項目（807058）

*通訊作者

畢和平