音乐网站的设计与实现

1、郑州交通职业学院郑州交通职业学院 毕毕 业业 论论 文（设文（设 计计） 论论文文（设设计计）题题目目：音乐网站的设计与实现 摘摘 要要 本次音乐网站的制作与实现是针对高等教育网站制作的实际情况，开发 的小型网站设计课题1。其目的是在新课改的大环境下，提高学生的音乐素 质，推动学校教学、教育改革以及学生的创新和动手操作能力。本文实际设 计一个专题音乐娱乐网站，该网站内容丰富多彩，包含了音乐名家、音乐常 识、音乐欣赏、视频音乐欣赏，并附有专题音乐网站的简介和链接。 在这个音乐网站的系统中我综合应用了 dreamveaver、photoshop、flash 等知识。网页界面的结构设计以实用性出发，

2、具有易于操作、简介、方便等 特点。在设计中，首先，运用 html 语言对网站的静态页面进行精细的加工 并且在网站的美工方面取得了良好的效果2。其次，对于网页的布局设计采 用框架集粗略布局和 div 精细布局，在此之前努力学习和大量实践并把这些 知识运用到网站的建设中去。 关键词关键词：dreamveaver，框架集，html，音乐，专题网站 abstract design and accomplish this music website is according to the actual situation of higher education website production, s

3、mall website design tasks. the purpose of the new curriculum reform of the environment, improve students music quality, promote the innovation of school teaching, education reform and student and hands-on ability. in this paper, the design of a special music entertainment website, the website conten

4、t rich and colorful, contains music masters, music sense, music appreciation, music and video, accompanied by an introduction and thematic music website link3. the system in this music website i comprehensive application of dreamveaver, photoshop, flsh knowledge. structure design of webpage interfac

5、e to practicality, has the characteristics of easy operation, introduction, convenience etc. in the design, first of all, has obtained the good effect of art using the static page html language on the website of the fine processing and in site. secondly, the layout design of webpage using frameset r

6、ough layout and div fine layout, before trying to learn and practice a lot and put the knowledge into the construction site4. keywords: dreamveaver, frame set, html, music, web site 目目 录录 1 引 言.1 2 概述.1 2.1 课题的来源、目的和意义.1 2.2 网站的建设目标.1 2.2.1 网站的定位.1 2.2.2 网站的目标.2 2.3 本系统开发的环境.2 2.3.1 硬件环境.2 2.3.2软件环境

7、.2 3 软件开发技术介绍.2 3.1 dreamveaver 技术.2 3.2 photoshop 技术.2 4 总体方案设计.3 4.1 功能设计.3 4.1.1 总体结构图.3 4.1.2 总体结构的各部分说明.3 4.2 界面设计.4 4.2.1 首页界面设计.4 4.2.2 音乐休闲娱乐子页面的设计.5 4.2.3 音乐名家子页面设计.6 4.2.4 视频欣赏.7 4.2.5 文章收藏界面图.7 5 总结.8 参考文献.9 致 谢.10 附录.11 1 引引 言言 互联网的魅力主要在于可以缩短世界的距离，让互联网具有这种神奇功 能的元素是网站和网页。网站可以被看成信息交流的载体，而网

8、页则是人与 人之间交流的直接窗口。网站除了在互联网中得到广泛应用之外，也可在企 业内部被用来解决内部管理与信息交流等问题。因此，无论对于网站管理专 业人士还是网站建设爱好者，都应掌握一定的网站建设与网页制作技术5。 本课题主要讲述音乐网站的制作与实现，网站设计包括：网页设计制作、 网页版面设计、用 dreamweavercs4 创建基本网页、超链接、表格、网页行 为语言javascript、网页表现语言css、框架、表单、模板与库、多 媒体对象、使用 div 布局页面、网站的整合与测试发布。 2 2 概述概述 2.12.1 课题的来源、目的和意义课题的来源、目的和意义 人类早已进入计算机世界的

9、时代，我们要通过电脑来武装人脑。我们的 目的是要使目前的教学向真正的数字化和信息化靠近。真正实现教育面向世 界，面向未来，面向现代化。internet 在我们的生活中扮演着越来越重要的 角色，同时计算机为教学提供了多种多样的辅助手段。从单机使用到多媒体 教学，从学校内部科室间的局域网到整个学校的校园网，最后发展到整个校 园网同 internet 互联。从长远来看，学校教育教学网站的建立是十分必要的， 主要目的是利用校园网辅助教学，从互联网上获得大量信息以便加快科研的 速度，同时也丰富了学生的课余生活，简化了教师的工作。利用校园网与 internet 的网络资源，使学生能够通过与外界的交流更加直

10、观的掌握知识， 增加音乐品位和修养6。大大提高了学校的现代化进程，使学校在当今激烈 的竞争中立于不败之地。 本课题介绍个人网站的制作及发布过程，本网站是一个以音乐娱乐为 主题的个人网站，本文将介绍网站材料的组织、网页的制作过程。 2.22.2 网站的建设目标网站的建设目标 .1 网站的定位网站的定位 建立一个较为实用的小型网站，首先要对网站进行明确的规划设计， 规划包括网站的内容，面向的用户群，网站的规模以及网站的目标。 本次毕业设计所建立网站的定位内容是 一个音乐娱乐网站。面向的 用户群是所有喜欢音乐和对音乐感兴趣的人。网站的目的是在休闲娱乐 的大环境下，提高群众的音乐素质，

11、推动音乐事业的发展。 .2 网站的目标网站的目标 1 1. .熟练的运用 html 语言对网站的静态页面进行设计 7。尽力做到 页面的美观实用。 2 2. .利用 photoshop 技术尽力做到页面的美观实用。 2.32.3 本系统开发的环境本系统开发的环境 .1 硬件环境硬件环境 机型：586 微机； cpu：intel pentium m 处理处理器； 内存：64m； 硬盘：60gb。 .2 软件环境软件环境 操作系统：windows 7 操作系统； 界面开发环境：dreamveaver。 3 3 软件开发技术介绍软件开发技术介绍 3.13

12、.1 dreamveaverdreamveaver 技术技术 dreamveaver 是个原本由 macromedia 公司所开发的著名网站开发工具。 它使用所见即所得的接口，亦有 html 编辑的功能。它现在有 mac 和 windows 系统的版本。随 macromedia 被 adobe 收购后，adobe 也开始计划 开发 linuix 版本的 dreamweaver 了8。 dreamweaver 自 mx 版本开始，使 用了 opera 的排版引擎 presto 作为网页预览。 3.23.2 photoshopphotoshop 技术技术 adobe photoshop，简称“ps

13、” ，是一个由 adobe systems 开发和发行的 图像处理软件。photoshop 主要处理以像素所构成的数字图像。使用其众多 的编修与绘图工具，可以更有效的进行图片编辑工作。2003 年，adobe 将 adobe photoshop 8 更名为 adobe photoshop cs。因此，最新版本 adobe photoshop cs6 是 adobe photoshop 中的第 13 个主要版本。 4 4 总体方案设计总体方案设计 4.14.1 功能设计功能设计 .1 总体结构图总体结构图 图 4-1 总体结构 4.1.2 总体结构的各部分说明总体结构的各部分说明

14、 本网站的内容表现形式主要以文本、图像为主。 虽然网络上可以承载的元素越来越多，但文字一直是很重要的部分。在 同一语言环境下，文字的传达是最准确的，所以，文字是任何出版物的核心， 网页也不例外，而且就现在的网络环境下，文字的使用仍是首选。所以，本 网站使用大量的文字介绍休闲娱乐方面的知识9。 首页：网站给人的第一印象就是首页，要让人愿意继续欣赏下去。我 设计的首页力求简洁明了，色调属于暖色，给人明快、轻松的感觉。页面最 醒目处是一朵正在开放的花，象征着祖国的未来生机勃勃。背景隐约可见的 五条横线，代表着五线谱，表明了本网站音乐休闲娱乐的主题。其中包括音 乐名家、音乐常识、音乐简介、音乐欣赏和主

15、题图片五项。有我的 e-mail 以便用户和我联系。 音乐常识：为了提高多数人的音乐修养及素养，我设计了这一项内容， 包括基本知识、乐器常识及戏曲常识三项，乐器常识又分为民族乐器介绍和 西洋乐器介绍两部分。 音乐欣赏：主要是给人听觉和视觉上的享受。让人真正的在音乐氛围 中有个轻松、愉悦的好心情。包括 3 种形式的音乐欣赏：flash、mp3、文字。 4.24.2 界面设计界面设计 .1 首页界面设计首页界面设计 网站给人的第一印象就是首页，要让人愿意继续欣赏下去。我设计的首 页力求简洁明了，色调属于暖色，给人明快、轻松的感觉。页面最醒目处是 一朵正在开放的花，象征着祖国的未来生

16、机勃勃。背景隐约可见的五条横线， 代表着五线谱，表明了本网站音乐休闲的主题。首页包括音乐、视频、简介、 紫兰图片、紫兰文化和链接六项。有我的 e-mail 以便用户和我联系10。 网页的色彩选择和搭配是网页设计的重点之一。用什么色彩才能最好地 表达出网站的内涵，吸引浏览者的视线，网页的色调、背景、文字、图标、 边框、链接应该采用什么样的色彩，应该如何搭配，都是网页设计一开始就 必须考虑的问题。网页的色彩搭配在网页的制作中起到非常重要的作用，因 为它将决定浏览者对你的网页的第一印象，好的色彩搭配可以使你的网页独 具魅力，相反则提不起浏览者的兴趣。所以一定要把握住色彩的搭配。 图 4-2 为我的首

17、页设计： 图 4-2 首页界面设计 .2 音乐休闲娱乐子页面的设计音乐休闲娱乐子页面的设计 这里主要是音乐休闲娱乐的园地。分为音乐、视频和文章三项。 在同一语言环境下，文字的传达是最准确的，所以，文字是任何出版物 的核心，网页也不例外，而且就现在的网络环境下，文字的使用仍是首选。 所以，本网页设计使用了大量的文字介绍11。 文本构成的因素有字体和字号，它们都是由汉字软件自动生成的。字体 是一种灵活的媒介，根据对不同字体的选择可以表达感情，语调以及结构。 字体也是网页的主要组成部分，是信息的重要载体。正确选择字体不仅关系 到网页的美观，还对浏览者的阅读及信息的传达有直接的影响。如

18、图 4-3 所 示： 图 4-3 音乐欣赏界面设计 .3 音乐名家子页面设计音乐名家子页面设计 为了提高多数人的音乐修养及素养，我设计了这一项内容，包括谢霆锋、 罗大佑、苏芮、等 8 位流行音乐家的生平介绍和代表作品。 除了文本之外，web 页面上最重要的设计元素莫过于图像了，如果 www 上没有图像，那么它也不会有今天这样火暴的局面了。图像也是传 达信息的重要方法之一，与文本相比，它显得更加直观、生动、易于理解和 接受。图像可以把那些文字无法表达的信息传达出来。本网站当然也恰当的 使用了图像，文字的精确性和图像的模糊性结合，就会使得信息的传达更加 完美了。如图 4-4 所示：

19、 图 4-4 音乐名家子页面 .4 视频欣赏视频欣赏 视频欣赏主要是为了让音乐爱好者对音乐名家有更深刻的了解和认识而 宣传音乐的一种方式，我所做的本网站主要是通过插入 flsh 动画起到宣传的 效果。具体的动画页面设计如图 4-5 所示: 图 4-5 视频欣赏界面 .5 文章收藏界面图文章收藏界面图 文章收藏页面主要的设计风格根据本音乐网站为设计思想进行编写 的，也是为了让广大的音乐爱好者掌握更多的音乐知识，对音乐有更多 的了解而设计的本页面。具体的设计如图 4-6 所示： 图 4-6 文章收藏的子页面 5 5 总结总结 在这个音乐网站的系统中我综合应用了 dr

20、eamveaver、photoshop、flsh 等知识。网页界面的结构设计以实用性出发，具有易于操作、简介、方便等 特点。在设计中，首先，运用 html 语言对网站的静态页面进行精细的加 工并且在网站的美工方面取得了良好的效果。其次，对于网页的布局设计采 用框架集粗略布局和 div 精细布局，在此之前努力学习和大量实践并把这些 知识运用到网站的建设中去。 本次音乐网站的制作与实现是针对高等教育网站制作的实际情况，开发 的小型网站设计课题。其目的是在新课改的大环境下，提高学生的音乐素质， 推动学校教学、教育改革以及学生的创新和动手操作能力。本文实际设计一 个专题音乐娱乐网站，该网站内容丰富多彩

21、，包含了音乐名家、音乐常识、 音乐欣赏、视频音乐欣赏，并附有专题音乐网站的简介和链接。 参考文献参考文献 1 郑阿奇.asp 实用教程m.电子工业出版社,2003.9 2 彭兰.网络主页制作课程设计m.中央广播电视大学出版社,2004.2 3 thomas connolly carolyn begg. database systems m.北京：电子工业出版社， 2004.7 4 roger bate, sandy shrum, cmm integration frameworkj, cmu/sei spotlight 1998.9 5 任新见.asp 动态网站快速开发实务m.电子工业出版社,

22、2004 年 9 月 6 阎静.dream weaver mx 2004 与 asp 动态网页基础与范例m.机械工业出版社, 2004.9 月 7孙良军中文版 frontpage2003 实用基础教程m.科学出版社,2003.12 8 前沿电脑图像工作室.巧学巧用 dream weaver、fireworks、flash 制作网页 m.北京.人民邮电出版社, 2003.12 9 攀孝忠.龚元明.计算机应用基础m.北京理工大学出版社, 2008.12 10 林信成.王道荣.html 与 asp 实务m.清华大学出版社,2001.12 11李晓黎.张巍asp+sql sever 网络应用系统开始与实例m.人民邮电出版社, 2005.12 致致 谢谢 在本次毕业设计中，我通过自己动手设计了一个音乐休闲娱乐网站。在 设计过程中，我通过查阅大量有关资料、与同学交流经验、自学、并向老师 请教等方式使自己学到了不少有关知识，并大大地提高了动手能力。使我充 分体