毕业论文--设计音乐网页

毕业论文设计音乐网页音乐是多媒体中非常重要的一种媒体。在网页中插入各种背景音乐等，可以为浏览网页的用户提供美的享受。由于网页技术与网络传输技术的限制，早期的网页往往只能提供Mid音乐的在线收听。随着互联网的发展，现在的网页往往可以实现多种格式、多种音质的音乐在线播放，为用户提供更专业的在线音乐服务。本节将使用Dreamweaver制作一个古典音乐在线试听网页，并在网页中插入MP3音频，供用户欣赏，如图3-1所示。图3-1古典音乐在线试听网页1.1设计思路音乐与文本、图像等媒体内容的区别在于，音乐是依靠人类听觉器官感受的媒体。在设计音乐网页时，需要注重音乐与用户正在观看的文本、图像等相匹配，通过图、文、声的结合为用户提供整体的体验。1．音乐网页分析在设计音乐类网页时，首先应该了解网页所播放的音乐风格类型，根据音乐的风格类型，来选择网页所使用的图形与文本，使网站的图像、文本内容与提供的音乐更加贴近，结合地更加紧密。音乐风格是根据音乐的曲风、演奏或演唱音乐的一些特定特征、音乐的作曲年代和作者等特性划分的音乐分类。音乐分类的方式有许多种，其分类的规则也各有不同。通常被业界公认的音乐风格主要包括以下几种，如表3-3所示。表3-3音乐风格的分类与介绍音乐风格类型简介西方古典音乐西方古典音乐（又译作严肃音乐、经典音乐等）的定义主要有两种，即广义的西方古典音乐和狭义的西方古典音乐。广义的古典音乐是西方古代和近代，直至19世纪初之前的专业音乐创作，包括两个主要时期，即古典时期和后古典时期。狭义的古典音乐单指十八世纪下半叶到十九世纪初的维也纳古典乐派，以“交响乐之父”海顿、“音乐天才”莫扎特和“乐圣”贝多芬的诸多不朽曲目合称。其特点是理智和情感的高度统一；深刻的思想内容与完美的艺术形式的高度统一。东方民乐东方民乐是对应西方古典音乐而发展出来的一个概念，是指亚洲、太平洋等地区的各地民族音乐，典型的东方民乐包括中国古代音乐、日本古代音乐、印度民乐、阿拉伯音乐、太平洋岛屿民族音乐等类别。现代流行音乐现代流行音乐是一个并不严谨的定义，其包括二十世纪以来全世界范围内创作的各种流行音乐。在现代流行音乐范畴内，还分为多种音乐风格，例如乡村民谣音乐、爵士乐、摇滚乐、灵魂音乐、电子乐、朋克乐、迷幻乐等许多种流派。现代流行音乐往往可以表达多种思想感情，且各具作曲背景。对于以欣赏某一种风格音乐的网页而言，设计时需要使用于音乐符合的各种图形图像内容，与音乐本身的风格、意境相匹配。而对于欣赏多类音乐的网页，则设计的风格较为自由一些，可以根据时下的最新最流行的网页风格进行设计。西方古典音乐网页在西方古典音乐的网页时，需要在网页的图像方面体现出西方古典文化特色。包括使用一些西方的古乐谱，以及使用西方乐器的图像和西方作曲家的头像等。例如，一个介绍莫扎特的网站，其主体采用了发黄的纸张书写的音符作为Banner，并使用了莫扎特的头像以体现网页的主题。除此之外，还在网页的左侧添加了一个小提琴的图像，以表明该网页的性质，如图3-50所示。图3-50介绍莫扎特的古典音乐网站东方民乐网页东方民乐是体现亚洲一些民族特色的音乐。在设计东方民乐网页时，同样需要在网页中体现出亚洲民族的特色。比如，设计中国民乐的网站，可在网站的界面中大量使用中国元素，包括福字、龙、汉字、中国风格建筑等。而涉及日本民乐网站，则可在网站中大量应用樱花、富士山、浮世绘等日本传统文化的图像。例如，中国古曲网是进行中国古典音乐教育和提供古谱下载的网站，其设计就十分具备中国元素，显得美观、大方，如图3-51所示。图3-51中国风格的中国古曲网现代流行音乐网页现代流行音乐泛指当代乐坛流行的音乐。在设计现代流行音乐网站时，可根据音乐具体表现得意境来设计网页中的各种图形。例如，表现摇滚乐的网站，可以黑色作为网站的主色调，配以各种棱角分明而杂乱的图形，以表现音乐的力度。而表现轻音乐和抒情音乐的，则可以浅色为主色调，配以一些优美的风景图画，起到松弛听众神经的作用，为听众创造一个良好的氛围。摇滚乐音乐网是一个介绍中国摇滚音乐，提供在线摇滚音乐下载的网站。在其网站中就提供了深色的主色调，在首页加入了两个大音箱和耳麦，突出表现网站的性质，如图3-52所示。图3-52摇滚乐音乐网首页综合音乐欣赏网页综合音乐欣赏网页是以提供综合性音乐的网站。这类网站中提供的内容往往并不局限于某一个类型的音乐，因此在页面设计中自由度较大，并无统一的风格可言。但总体而言，综合音乐欣赏网站往往需要给听众一个轻松愉快的氛围，因此在网站的色调上应以浅色调为主。同时，在网站的界面设计上应力求简洁便利，方便听众快速查找需要的歌曲。例如国内比较知名的好听音乐网，其网页的主色调就是浅蓝色，为用户营造了一个轻松的视觉效果，如图3-53所示。图3-53好听音乐网2．本实例分析在设计本例中的西方古典音乐网站时，主要通过Logo、导航条、左侧Banner、整体背景以及主题内容的花纹来突出古典风格。古典风格是个宽泛的概念，其包括各种古典式的文字、古典式的色调以及古典式的花纹等。古典风格的文字主要包括各种字母文字中的花体文字、手写体文字等，以及汉字中的小篆文字、大篆文字、隶书文字等，其在字体样式上与现代的打印机体、宋体字、黑体字有很大的区别。古典式的色调则包括各种深褐色、浅褐色和淡黄色等，以给浏览网页的用户一种陈旧感等。在设计古典风格网页时，需要给网页的用户营造一种古朴而陈旧的气氛，以迎合网页的内容。在设计网站Logo时，使用了留声机的图标，以及飘动的钢琴按键。为Logo添加的字体也十分具有古典风格。其中英文使用的是名为“OldEnglishTextMT”的花体字。而“天籁网”、“古典音乐频道”等则使用的是方正古隶及方正华隶等隶书字体，同样具有古典风格，如图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设计过程DreamweaverCS4可以为用户提供可视化的插入各种多媒体文件的方法。在为网页插入音乐时，需要使用到DreamweaverCS4的多媒体文件插入命令。（1）执行DreamweaverCS4，在DreamweaverCS4中，打开本书配套光盘中的素材网页，如图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格式（MusicalInstrumentDigitalInterface，乐器数字接口）midi格式是一种基于乐谱的数字音乐格式。其将乐谱以文本的方式存储起来。通过计算机再将乐谱翻译为声音，再通过声卡进行播放。midi格式的音质与文件的大小没有关系，只与解析乐谱的声卡和播放设备有关。在很小的midi格式文件中，即可存储相当长的声音。然而，midi格式不支持自然录制，只能通过软件编辑，也不能体现语声。wav格式（Wave，波形声音）wav格式是由微软公司开发的一种接近无损的无压缩音频格式。其特点是音质相当优秀，在任何一种Windows操作系统和网页浏览器中播放都不需要安装额外的插件和软件。同时，wav格式支持从几乎所有声音采集设备中获取并录制声音。但是wav文件的体积也相当大，庞大的体积限制了其在网页中的应用范围。选择设置单击单击输入输入mp3格式（MotionPictureExpertsGroupLayer-3，运动图像专家工作组第3代标准）mp3格式是一种典型的有损压缩声音格式。其特点是在录制的声音基础上进行数学运算，删除人耳不可听或难于听到的声音，同时将声音数据进行压缩，从而实现降低文件体积的作用。在压制mp3格式的声音时，用户可以选择压缩的比率，以及损失音质的级别。正确的设置级别，往往可以既压缩声音文件，又不损失太多的音质。mp3格式是目前网页中最流行的声音格式。ra、ram或rpm格式（RealAudio格式）ra格式是由RealNetworks开发的高压缩比流媒体音频格式。其同样可以根据音频处理的需求进行有损的压缩，获得比MP3更小的体积。在网页中，播放ra格式的音频需要用户安装额外的RealPlayer插件。除以上介绍的4种音频以外，可在网页中应用的音频还有许多中，例如，aif或aiff格式（AudioInterchangeFileFormat，音频交换格式）和qt或qtm格式（QuickTime）等。在为网页插入音频时，可以根据用户群体的网络传输速度等，选择合适的音频格式，以使用户获得最佳的收听效果。2．插入背景音乐网页背景音乐是浏览网页时直接听到的声音，其通常不需要用户专门去控制，直接按照网页设计者的需要进行播放。为网页添加背景音乐，需要用户手动在网页的head标签中，输入一些简单的代码，如下。headbgsoundsrc=music.mp3loop=infinite//head在上面的代码中，bgsound标签的作用是位网页嵌入背景音乐，其属性有许多种，如表3-4所示。表3-4bgsound标签的属性属性功能属性功能id背景音乐的编号。loop背景音乐的循环播放次数，填入-1或infinite则为无限循环。src背景音乐的路径。volume播放背景音乐的音量，0为最大值，-10000为最小值。balance在播放背景音乐时的左右声道平衡性。0为左右平衡，-10000为左，10000为右使用bgsound标签插入的背景音乐，在默认情况下为自动播放。当网页处于最大化或普通窗口状态时，音乐为播放状态。而当网页处于最小化状态时，音乐将处于暂停状态。bgsound标签不是XHTML语言的标准标签，而是InternetExplorer支持的浏览器标签，通过bgsound标签插入的背景音乐只能在InternetExplorer浏览器中播放。3．嵌入普通音乐在网页中，用户除了可以插入背景音乐以外，还可以嵌入普通的音乐，使网页的浏览者可以控制音乐的播放、暂停、快进等功能。这就需要使用到embed标签。embed标签是InternetExplorer和NetScape共同支持的网页嵌入对象标签。使用embed标签，用户既可以嵌入音频，也可以嵌入视频等，甚至可以嵌入图像。为网页嵌入音频，其方法如下所示。bodyem