毕业论文设计音乐网页

毕业论文 设计音乐网页

音乐是多媒体中非常重要的一种媒体。在网页中插入各种背景音乐等，可以为浏览网页的用户提供美的享受。由于网页技术与网络传输技术的限制，早期的网页往往只能提供Mid音乐的在线收听。

随着互联网的发展，现在的网页往往可以实现多种格式、多种音质的音乐在线播放，为用户提供更专业的在线音乐服务。本节将使用Dreamweaver制作一个古典音乐在线试听网页，并在网页中插入MP3音频，供用户欣赏，如图3-1所示。

图3-1 古典音乐在线试听网页

1.1 设计思路

音乐与文本、图像等媒体内容的区别在于，音乐是依靠人类听觉器官感受的媒体。在设计音乐网页时，需要注重音乐与用户正在观看的文本、图像等相匹配，通过图、文、声的结合为用户提供整体的体验。

1．音乐网页分析

在设计音乐类网页时，首先应该了解网页所播放的音乐风格类型，根据音乐的风格类型，来选择网页所使用的图形与文本，使网站的图像、文本内容与提供的音乐更加贴近，结合地更加紧密。

音乐风格是根据音乐的曲风、演奏或演唱音乐的一些特定特征、音乐的作曲年代和作者等特性划分的音乐分类。音乐分类的方式有许多种，其分类的规则也各有不同。通常被业界公认的音乐风格主要包括以下几种，如表3-3所示。

容，与音乐本身的风格、意境相匹配。而对于欣赏多类音乐的网页，则设计的风格较为自由一些，可以根据时下的最新最流行的网页风格进行设计。

 西方古典音乐网页

在西方古典音乐的网页时，需要在网页的图像方面体现出西方古典文化特色。包括使用一些西方的古乐谱，以及使用西方乐器的图像和西方作曲家的头像等。

例如，一个介绍莫扎特的网站，其主体采用了发黄的纸张书写的音符作为Banner，并使用了莫扎特的头像以体现网页的主题。除此之外，还在网页的左侧添加了一个小提琴的图像，以表明该网页的性质，如图3-50所示。

图3-50 介绍莫扎特的古典音乐网站

 东方民乐网页

东方民乐是体现亚洲一些民族特色的音乐。在设计东方民乐网页时，同样需要在网页中体现出亚洲民族的特色。

比如，设计中国民乐的网站，可在网站的界面中大量使用中国元素，包括福字、龙、汉字、中国风格建筑等。而涉及日本民乐网站，则可在网站中大量应用樱花、富士山、浮世绘等日本传统文化的图像。

例如，中国古曲网是进行中国古典音乐教育和提供古谱下载的网站，其设计就十分具备中国元素，显得美观、大方，如图3-51所示。

图3-51 中国风格的中国古曲网

 现代流行音乐网页

现代流行音乐泛指当代乐坛流行的音乐。在设计现代流行音乐网站时，可根据音乐具体表现得意境来设计网页中的各种图形。

例如，表现摇滚乐的网站，可以黑色作为网站的主色调，配以各种棱角分明而杂乱的图形，以表现音乐的力度。而表现轻音乐和抒情音乐的，则可以浅色为主色调，配以一些优美的风景图画，起到松弛听众神经的作用，为听众创造一个良好的氛围。

摇滚乐音乐网是一个介绍中国摇滚音乐，提供在线摇滚音乐下载的网站。在其网站中就提供了深色的主色调，在首页加入了两个大音箱和耳麦，突出表现网站的性质，如图3-52所示。

图3-52 摇滚乐音乐网首页

 综合音乐欣赏网页

综合音乐欣赏网页是以提供综合性音乐的网站。这类网站中提供的内容往往并不局限于某一个类型的音乐，因此在页面设计中自由度较大，并无统一的风格可言。

但总体而言，综合音乐欣赏网站往往需要给听众一个轻松愉快的氛围，因此在网站的色调上应以浅色调为主。同时，在网站的界面设计上应力求简洁便利，方便听众快速查找需要的歌曲。例如国内比较知名的好听音乐网，其网页的主色调就是浅蓝色，为用户营造了一个轻松的视觉效果，如图3-53所示。

图3-53 好听音乐网

2．本实例分析

在设计本例中的西方古典音乐网站时，主要通过Logo、导航条、左侧Banner、整体背景以及主题内容的花纹来突出古典风格。古典风格是个宽泛的概念，其包括各种古典式的文字、

也十分具有古典风格。其中英文使用的是名为“Old English Text MT”的花体字。而“天籁网”、“古典音乐频道”等则使用的是方正古隶及方正华隶等隶书字体，同样具有古典风格，如图3-54所示。

图3-54 古典风格的Logo

网页的导航条背景采用了手写体的五线谱作为花纹，相比Logo颜色更深一些。在导航条的左侧添加了一个钢琴图标，并引导一行五线谱，巧妙地将导航的文本作为五线谱的标记符号突显出来，如图3-55所示。

图3-55 具有音乐特色的导航条

在设计网页的左侧Banner时，同样突出了网页的古典音乐主题，使用了小提琴演奏的背景，和淡黄色的光晕笼罩的左侧导航条。同时，还以发黄的古典风格图标来作为附属的引导图标，突出怀旧的风格，如图3-56所示。

图3-56 左侧Banner

在网页的主题内容中，使用了钢琴以及耳机等与音乐相关的元素，突出网页的音乐特色，以及当前页面提供的可听内容，如图3-57所示。

图3-57 音乐特色的主题内容

除以上各部分外，在设计网页时，还可以多为网页的各部分使用一些古典的花纹，例如哥特式的规则花纹等，修饰网页，增强网页的表现力，如图3-58所示。

图3-58 点缀网页的花纹

1.2 设计过程

Dreamweaver CS4可以为用户提供可视化的插入各种多媒体文件的方法。在为网页插入音乐时，需要使用到Dreamweaver CS4的多媒体文件插入命令。

（1）执行Dreamweaver CS4，在Dreamweaver CS4中，打开本书配套光盘中的素材网页，如图3-59所示。

图3-59 打开素材网页

（2）在素材网页中，选择网页右下方“唱片试听”附近的层，然后即可执行【插入】|

【媒体】|【插件】命令，如图3-60所示。

图3-60 执行命令

（3）在弹出的【选择文件】对话框中，选择需要插入网页的音乐文件，然后即可单击【确定】按钮，如图3-61所示。

图3-61 选择音乐文档

（4）用鼠标选中插入的控件，然后在【属性】面板中设置其【宽】为216px；高为45px，如图3-62所示。

图3-62 设置音乐控件大小

（5）在【属性】面板中单击【参数】按钮，在弹出的【参数】对话框中单击【添加参数】按钮，然后在【参数】列表中输入“autostart”；在【值】的列表中输入“false”，禁止音乐自动播放，并单击【确定】按钮，完成网页制作，如图3-63所示。

图3-63 设置参数

1.3 知识点总结

1．音频文件格式

音频文件是将自然界的语声、乐声和环境声以数字化的方式和特定的格式存储起来的文件。由于各种音频数据的用途存在差别，所以音频文件也有许多种格式。在网页中，主要支持以下几种。

 midi或mid格式（Musical Instrument Digital Interface，乐器数字接口）

midi格式是一种基于乐谱的数字音乐格式。其将乐谱以文本的方式存储起来。通过计算机再将乐谱翻译为声音，再通过声卡进行播放。midi格式的音质与文件的大小没有关系，只与解析乐谱的声卡和播放设备有关。在很小的midi格式文件中，即可存储相当长的声音。然而，midi格式不支持自然录制，只能通过软件编辑，也不能体现语声。

 wav格式（Wave，波形声音）

wav格式是由微软公司开发的一种接近无损的无压缩音频格式。其特点是音质相当优秀，在任何一种Windows操作系统和网页浏览器中播放都不需要安装额外的插件和软件。同时，wav格式支持从几乎所有声音采集设备中获取并录制声音。但是wav文件的体积也相当大，庞大的体积限制了其在网页中的应用范围。

 mp3格式（Motion Picture Experts Group Layer-3，运动图像专家工作组第3代标准） mp3格式是一种典型的有损压缩声音格式。其特点是在录制的声音基础上进行数学运算，删除人耳不可听或难于听到的声音，同时将声音数据进行压缩，从而实现降低文件体积的作用。在压制mp3格式的声音时，用户可以选择压缩的比率，以及损失音质的级别。正确的设置级别，往往可以既压缩声音文件，又不损失太多的音质。mp3格式是目前网页中最流行的声音格式。

 ra、ram或rpm格式（Real Audio格式）

ra格式是由RealNetworks开发的高压缩比流媒体音频格式。其同样可以根据音频处理的需求进行有损的压缩，获得比MP3更小的体积。在网页中，播放ra格式的音频需要用户安装额外的RealPlayer插件。

除以上介绍的4种音频以外，可在网页中应用的音频还有许多中，例如，aif或aiff格式（Audio Interchange File Format，音频交换格式）和qt或qtm格式（QuickTime）等。在为网页插入音频时，可以根据用户群体的网络传输速度等，选择合适的音频格式，以使用户获得最佳的收听效果。

2．插入背景音乐

网页背景音乐是浏览网页时直接听到的声音，其通常不需要用户专门去控制，直接按照网页设计者的需要进行播放。为网页添加背景音乐，需要用户手动在网页的head标签中，输入一些简单的代码，如下。

在上面的代码中，bgsound标签的作用是位网页嵌入背景音乐，其属性有许多种，如表3-4所示。

窗口状态时，音乐为播放状态。而当网页处于最小化状态时，音乐将处于暂停状态。

bgsound标签不是XHTML语言的标准标签，而是Internet Explorer支持的浏览器标签，通过bgs

ound标签插入的背景音乐只能在Internet Explorer浏览器中播放。

3．嵌入普通音乐

在网页中，用户除了可以插入背景音乐以外，还可以嵌入普通的音乐，使网页的浏览者可以控制音乐的播放、暂停、快进等功能。这就需要使用到embed标签。

embed标签是Internet Explorer和NetScape共同支持的网页嵌入对象标签。使用embed标签，用户既可以嵌入音频，也可以嵌入视频等，甚至可以嵌入图像。为网页嵌入音频，其方法如下所示。

与bgsound标签类似，用户也可以使用embed标签的各种属性，控制嵌入音乐的播放方式等，如表3-5所示。

为embed标签设置hidden属性为true后，同样可以将其作为背景音乐，嵌入到网页中。

embed标签也不是XHTML语言内置的标准标签。因此，该标签只在Internet Explorer和Netscape浏览器中可用。如果网页的浏览者使用的是Opera等浏览器，则embed标签嵌入的音乐将无法 播放。