中华“古琴”文化专题学习网站的设计和实现

冯建平， 张 森， 范 蕾， 王路明

（海南师范大学 信息科学技术学院，海南 海口571158）

中华“古琴”文化专题学习网站的设计和实现

冯建平， 张 森， 范 蕾， 王路明*

（海南师范大学 信息科学技术学院，海南 海口571158）

通过对中国古典乐器“古琴”的历史、结构、典故和名曲赏析等内容图文声并茂的介绍，呈现出中华古琴中蕴含着的丰富而深刻的文化内涵.网站作品基于ASP技术设计和实现，并运用Photoshop工具和结合Flash动画技术，风格朴素淡雅，宁静与舒缓，体现出中国传统文化博大精深的内涵和中国传统艺术的魅力.

古琴文化；专题学习网站；ASP；Flash

古琴是我国古老的弹拨乐器之一，又称“七弦琴”，位列中国传统文化的“七雅”（琴棋书画诗酒茶）之首.古琴音色清透、典雅、端庄、优美，如诗如画，被世人誉为“天籁之音”.2003年，中国古琴艺术入选世界“人类口头和非物质遗产代表作”名录，有着三千多年悠久历史的古琴艺术再次得到了世界公认［1］.

本文从中华古琴文化的内涵出发，介绍了中华“古琴”文化专题学习网站的设计和实现方法.网站中古琴照片等大部分素材，均由作者实地考察民间古琴协会活动现场拍摄，精心修剪制作而成.网站风格朴素淡雅，体现出古琴的宁静和蕴含的丰富而深刻的文化内涵.选取古琴作为网站的主题，是为了保护古琴文化，通过对古琴文化介绍，让人们能更深入的了解中国的琴文化，提高人们对“古琴”文化的理解和欣赏能力，继承并发扬中华民族五千年流传下来的珍贵文化遗产［2］.本文主要内容曾于2009年7月，在教育部主办的“2009年第二届中国大学生文科计算机设计”大赛中，获得“学习平台设计网站类”作品二等奖.

1 网站总体结构

网站总体结构分为三个部分：开篇设计、前台内容设计和后台管理系统设计.

1.1 开篇设计

网站首页的开篇设计风格历来是网站建设重要的环节之一，不仅因为“第一印象”至关重要，而且直接关系到网站各个栏目首页、内容页的风格和框架布局的协调统一问题.本网站开篇采用“画卷”舒缓展开的形式，以翠竹摇曳、古人抚琴的格调开场，配以“中國龍瑩篆體”的古字体，古琴悠扬的背景音乐，让人们从开头就能充分领略到古琴的风韵意味.网页效果见图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 后台管理系统设计

为了实现网站效果，便于网站内容的更新和修改，制作了网站后台管理系统，设有公告、文章、论坛和新闻管理等功能，实现对网站的维护操作.系统代码编写运用ASP动态语言、Access数据库技术，以及简单的JavaScript脚本语言.网页色调是以蓝色为主，配以淡蓝色水晶按钮实现［3］，网页效果见图3.

图3后台管理系统设计Fig.3 The design of website background management system

（1）用户功能：用户通过注册，可以在论坛进行交流，可以发表相关古琴的知识、新闻和问题等.网页效果见图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 古琴新闻

搜集、记录了各个网站最新的发布信息、有关古琴的新闻，再配以新闻现场真实的照片，展现世界各地关于古琴的最新动态.

2.2 古琴历史

对古琴的相关历史知识做了详细介绍.如古琴概况、中国古琴历史、鼓琴琴派、溪山琴况、冷仙十六法等.将中国部分古书中设计古琴的历史提炼综述出来，揭示中国古琴文化的意义和内涵.

2.3 古琴结构

分别从古琴的“天”、“地”两面结构介绍.在征求和采纳了古琴学者的建议后，在“天”、“地”各面上，依据古琴本身的含义，分部位介绍古琴，并配以古琴各个部位的介绍，辅助以小手提示箭头，让人们能清楚点击的位置.网页效果见图6～8.其中，图7是古琴的“天”面结构、图8是古琴的“地”面结构，它们都分别从古琴的头、腰、尾三处展开动画效果.这里古琴的不同部位代表了不同的含义，把中华文化的精华融入其中.该模块将古琴拟人化，既体现了中华民族古琴文化的博大精深，也体现了琴者对古琴的精神寄托.

2.4 古琴典故

介绍了我国古琴的相关典故.如高山流水觅知音、司马相如“凤求凰”、邹忌说琴谏齐王、文姬寄情“十八拍”、聂政学琴报父仇等典故，该模块让我们从生动的典故中了解古人与古琴的各种历史趣事.

2.5 名曲赏析

收集了流传的古琴名曲，如“高山流水”曲、“平沙落雁”曲、“潇湘水云”曲等，并配以精心设计的相应名曲的Flash动画，可以供浏览者下载欣赏、陶冶情操.这些名曲散发出古琴的宁静与舒缓，感受到沁人心脾的舒畅，找寻一个与世隔绝的世外桃源之意［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 古琴文化论坛

提供喜爱古琴的朋友们的网上交流平台，通过注册，大家可以在论坛进行交流，可以发表相关古琴的知识、新闻和问题等.

3 系统平台设计及关键技术

系统平台设计采用基于B/S结构的三层体系结构.代码编写方面，运用ASP动态服务器技术，VBScript脚本语言及简单的JavaScript脚本语言对网页进行修饰，配以div和css布局制作动态网页.数据库技术方面，用SQL语言对Access数据库执行查找、插入、更新、删除等操作，并将其运用在后台设计中的公告、历史典故、论坛、新闻这四大模块.应用软件有PhotoShop图像处理软件，Dreamweaver网页制作软件，Flash动画制作软件等.

ASP动态技术是系统平台设计的关键技术.ASP（Active Service Page）是微软推出的动态 Web设计技术，是一种用于WWW服务的服务器端脚本环境，在站点的Web服务器上解释脚本，可产生并执行动态、交互式、高效率的站点服务器应用程序.利用它，可以很容易地把HTML标记、文本、脚本命令及ActiveX组件混合在一起构成ASP页，以此来生成动态网页，创建交互式的Web站点，实现对Web数据库的访问［5］.

4 古典风格网页的设计及修饰

4.1 页面设计及修饰

在页面设计上，运用PhotoShop对图片资料进行美化加工处理，运用Dreamweaver工具配以div和css布局制作动态网页，结合Flash动画对相应内容进行填充与修饰，以创建结构合理、色调搭配美观的网页.

具体的设计方法为：

（1）色调搭配：选用灰青色调，注重古风淡雅，展现古典韵味.

（2）布局：运用 PhotoShop 和 Dreamweaver工具，采用div+css实现美观合理的布局.

（3）Flash动画制作特效页面：如在“高山流水”曲、“平沙落雁”曲、“潇湘水云”等名曲赏析中，配以精心设计的相应名曲的Flash动画.运用遮罩层设置、设置热区域等方法，实现页面的舒展百叶窗、幽静淡入淡出、缓缓鼠标热区“翻书”等特殊效果，充分体现古琴文化的宁静与舒缓［6］.

4.2 开篇的“画卷”古韵风格

如图1所示，开篇采用“画卷”舒缓展开的形式，翠竹摇曳的画面、古琴悠扬的背景音乐，配以“中國龍瑩篆體”的古字体，“三合一”营造古典韵味.开篇画轴Flash的另一特色，画卷底部配上附有代表性照片的电影胶片式运动，从整副画卷底部从右向左移动以展示出来，为画卷增添几分协调美感.4.3古琴结构的“天”、“地”风格

如图 6～8所示，分别从古琴的“天”、“地”两面结构来介绍，从琴面、琴弦、琴徽、岳山、绒扣、琴底、龙池凤沼、雁足、轸子九个方面详述古琴的构造.并且通过我们制作的Flash动画对古琴“天”、“地”两面的结构进行专业的介绍，让人们了解古琴的各个部分所代表的中国文化内涵.

4.4 名曲赏析的“宁静与舒缓”曲韵风格

古琴音乐风格是淡静、虚静、幽静、恬静，网站中有代表性的三首古琴名曲的网页设计风格为：

（1）“平沙落雁”曲：选用乾隆间画家刘铨所作八屏条“平沙落雁图”，采用淡入淡出的效果，配以“平沙落雁”古琴音乐合成而出，显出其世外桃源之意（见图 9）.

（2）“潇湘水云”曲：采用翻书的方式，设置了四个热区域，以实现真正意义的用鼠标“翻书”的效果（见图 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 结语

中华古琴音乐，让人静气宁神、修身养性，让人身、心、灵和谐.称为“国琴”的古琴已逐渐被世界所瞩目.利用现代科学技术，弘扬中国传统文化，感受古琴魅力，提高人们对古琴文化的理解和欣赏能力，不仅仅是继承和发扬中华民族的珍贵文化遗产，而且古琴文化中所蕴含的琴道、琴德也是我们社会应提倡的文化内涵.

［1］董蓓蓓.浅论古琴的文化内涵[J].艺海,2007(2):25-31.

［2］胡就,刘莹论.中国古琴艺术的保护与发展[J].怀化学院学报,2009(7):8-12.

［3］潘晓南.动态网页设计基础[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）

*通讯作者

毕和平