音乐网站的设计与实现

《音乐网站的设计与实现》由会员分享，可在线阅读，更多相关《音乐网站的设计与实现（23页珍藏版）》请在装配图网上搜索。

1、QTO磁liiJ毕业论文（设计）论文（设计）题目：音乐网站的设计与实现所属系别信息工程系专业班级X级大专计算机网络技术XX班姓 名X X XXXX学 号 XXXXXXXXXXXXXXX指导教师XXXXXXX撰写日期 XXX 年 XX 月本次音乐网站的制作与实现是针对高等教育网站制作的实际情况，开发 的小型网站设计课题1。其目的是在新课改的大环境下，提高学生的音乐素 质，推动学校教学、教育改革以及学生的创新和动手操作能力。本文实际设 计一个专题音乐娱乐网站，该网站内容丰富多彩，包含了音乐名家、音乐常 识、音乐欣赏、视频音乐欣赏，并附有专题音乐网站的简介和链接。在这个音乐网站的系统中我综合应用了

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

3、igher education website production, small 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 ente

4、rtainment website, the website content 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.

5、Structure design of webpage interface 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 layou

6、t design of webpage using frameset rough 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 site1引言12概述12.1课题的来源、目的和意义12.2 网站的建设目标12.2.1网站的定位12.2.2网站的目标22.3本系统开发的环境22.3.1硬件环境22.3.2

7、软件环境23软件开发技术介绍23.1 Dreamveaver技术23.2 Photoshop 技术24总体方案设计34.1功能设计34.1. 1总体结构图34.1.2总体结构的各部分说明34.2 界面设计44.2.1首页界面设计44.2.2音乐休闲娱乐子页面的设计54.2.3音乐名家子页面设计64.2.4视频欣赏74.2.5文章收藏界面图75总结8参考文献9致谢10附录111引言互联网的魅力主要在于可以缩短世界的距离，让互联网具有这种神奇功 能的元素是网站和网页。网站可以被看成信息交流的载体，而网页则是人与 人之间交流的直接窗口。网站除了在互联网中得到广泛应用之外，也可在企 业内部被用来解决内

8、部管理与信息交流等问题。因此，无论对于网站管理专 业人士还是网站建设爱好者，都应掌握一定的网站建设与网页制作技术5。本课题主要讲述音乐网站的制作与实现，网站设计包括：网页设计制作、 网页版面设计、用DreamweaverCS4创建基本网页、超链接、表格、网页行 为语言一一JavaScript、网页表现语言一一CSS、框架、表单、模板与库、多 媒体对象、使用Div布局页面、网站的整合与测试发布。2概述2.1课题的来源、目的和意义人类早已进入计算机世界的时代，我们要通过电脑来武装人脑。我们的 目的是要使目前的教学向真正的数字化和信息化靠近。真正实现教育面向世 界，面向未来，面向现代化。Intern

9、et在我们的生活中扮演着越来越重要的角 色，同时计算机为教学提供了多种多样的辅助手段。从单机使用到多媒体教 学，从学校内部科室间的局域网到整个学校的校园网，最后发展到整个校园 网同Internet互联。从长远来看，学校教育教学网站的建立是十分必要的， 主要目的是利用校园网辅助教学，从互联网上获得大量信息以便加快科研的 速度，同时也丰富了学生的课余生活，简化了教师的工作。利用校园网与 Internet的网络资源，使学生能够通过与外界的交流更加直观的掌握知识，增 加音乐品位和修养6。大大提高了学校的现代化进程，使学校在当今激烈的 竞争中立于不败之地。本课题介绍个人网站的制作及发布过程，本网站是一个

10、以音乐娱乐为主 题的个人网站，本文将介绍网站材料的组织、网页的制作过程。2.2网站的建设目标2.2.1网站的定位建立一个较为实用的小型网站，首先要对网站进行明确的规划设计，规划包括网站的内容，面向的用户群，网站的规模以及网站的目标。本次毕业设计所建立网站的定位内容是一个音乐娱乐网站。面向的 用户群是所有喜欢音乐和对音乐感兴趣的人。网站的目的是在休闲娱乐的大环境下，提高群众的音乐素质，推动音乐事业的发展。2.2.2网站的目标1, 熟练的运用HTML语言对网站的静态页面进行设计7。尽力做到 页面的美观实用。2. 利用Photoshop技术尽力做到页面的美观实用。2.3本系统开发的环境2.3.1硬件

11、环境机型：586微机；CPU： Intel Pentium M 处理处理器；内存：64M；硬盘：60GB。2.3.2软件环境操作系统：Windows 7操作系统；界面开发环境：Dreamveaver。3软件开发技术介绍3.1 Dreamveaver 技术Dreamveaver是个原本由Macromedia公司所开发的著名网站开发工具。 它使用所见即所得的接口，亦有HTML编辑的功能。它现在有Mac和Windows 系统的版本。随Macromedia被Adobe收购后，Adobe也开始计划开发LINUIX 版本的Dreamweaver 了。Dreamweaver自MX版本开始，使用了 Opera

12、的 排版引擎”Presto”作为网页预览。3.2 Photoshop 技术Adobe Photoshop，简称“PS，是一个由Adobe Systems开发和发行的图像处理软件。Photoshop主要处理以像素所构成的数字图像。使用其众多的 编修与绘图工具，可以更有效的进行图片编辑工作。2003年，Adobe将Adobe Photoshop 8 更名为 Adobe Photoshop CS。因此，最新版本 Adobe Photoshop CS6是Adobe Photoshop中的第13个主要版本。4总体方案设计4.1功能设计4.1.1总体结构图图4-1总体结构4.1.2总体结构的各部分说明本网

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

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

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

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

17、 罗大佑、苏芮、等8位流行音乐家的生平介绍和代表作品。除了文本之外，WEB页面上最重要的设计元素莫过于图像了，如果 WWW上没有图像，那么它也不会有今天这样火暴的局面了。图像也是传达 信息的重要方法之一，与文本相比，它显得更加直观、生动、易于理解和接 受。图像可以把那些文字无法表达的信息传达出来。本网站当然也恰当的使 用了图像，文字的精确性和图像的模糊性结合，就会使得信息的传达更加完 美了。如图4-4所示：紫兰音乐欣赏音乐欣股痛i音呆视频欣赏网页广告古涂欧词文章收薰.一半z酒干用4小三6 1%不起1趾腱锄舞S密是M工太军3 hi楠王诺10套马杯宣兰囹推L1淄12春品济年英队：图4-4音乐名家子

18、页面4.2.4视频欣赏视频欣赏主要是为了让音乐爱好者对音乐名家有更深刻的了解和认识而 宣传音乐的一种方式，我所做的本网站主要是通过插入flsh动画起到宣传的 效果。具体的动画页面设计如图4-5所示：图4-5视频欣赏界面4.2.5文章收藏界面图文章收藏页面主要的设计风格根据本音乐网站为设计思想进行编写的，也是为了让广大的音乐爱好者掌握更多的音乐知识，对音乐有更多的了解而设计的本页面。具体的设计如图4-6所示:爱情与人生摘要：大学生弱陞解爱情的木点斧谡套情是一对男女萋于一定的社会墓珊幻共同的生活理恩，在各自内心形成的相互但 并渴里对方成为自己境生洋侣的一伸强烈蝇真专一的窜情，大学生要建手恋爱中的道

19、德和燃范.如菅直人辂平等，言宝承担责任，文明相亲相爱=大学生要改变恋爱不良认知合珪远择恋置或机，学校要正围引导大学生的恋爱斑：大学生匝学会正浦助理学习和恭爰的 关系，以及恋爱中出现的一些问题，如：不能把友情当爱情不能费置爱情的地位，不能片面的或功利化的对特恋爰不 能只注重过程不顾后果。大学生要明辩壹情与学业，学业与人生之间的关系r树立正确的恋景观会促进学业的发展，反之 明会阻瑁学业戋国，学业良并发国会买定大学生鼻后的人生境路，1关键词：爱情本匣 正琦的恋宏观恋爱道嚏要求大学生是社会中一个亘要乾体，是擂可社会进*的一攵重芸方坦*正适理艘唱与A生的关系尤为重妾性耋、理想和贵任是构成丧情的三个基本要

20、素。这三个基本要素构成了竟情的有机折一整体，它们的完茉始合成就了 人世间黄好的爱情住爰的吸引，使爱情打上了情丧的洛印理想的契合，使得爱喑表现着恋人们对生活的希望和对未来 的憧憬=肯任则使得爱情不是自私的占有对方的盛情，而是自觉自厦的为所拳爱的人付出眉情，担当黄任。崽正的爱瑁是生活的有町组成部分r它对我们售个大的意义不碰多说，当我们一遇遍地管宣有人为宏痴情，为黄奉 献r为爰等符，为黄忘我的Et候，舌到有R为黄而神是奕变，为爱而佛罢疵涌，为爱而坚守一生，为爱而胶弃一切的时 候r我们都能悻会大黄清的巨大力量。C这大翔煜为有大会说“生命谴可炭，胃情价更高）人一生的幸福很太一 驾分取M爱节，对爱情的向往

21、和礼雌于撕倔-个瞬妃校园生的爱帼燃美始街头.焯予的白发荏苍的老粽 ill BT ； L Aa. j4Tb 1 辞 B 小 4图4-6文章收藏的子页面5总结在这个音乐网站的系统中我综合应用了 DreamveaveR Photoshop Flsh等知识。网页界面的结构设计以实用性出发，具有易于操作、简介、方便等特 点。在设计中，首先，运用HTML语言对网站的静态页面进行精细的加工并 且在网站的美工方面取得了良好的效果。其次，对于网页的布局设计采用框 架集粗略布局和Div精细布局，在此之前努力学习和大量实践并把这些知识 运用到网站的建设中去。本次音乐网站的制作与实现是针对高等教育网站制作的实际情况，

22、开发 的小型网站设计课题。其目的是在新课改的大环境下，提高学生的音乐素质， 推动学校教学、教育改革以及学生的创新和动手操作能力。本文实际设计 个专题音乐娱乐网站，该网站内容丰富多彩，包含了音乐名家、音乐常识、 音乐欣赏、视频音乐欣赏，并附有专题音乐网站的简介和链接。参考文献1 郑阿奇.Asp实用教程M.电子工业出版社,2003.92 彭兰.网络主页制作课程设计M.中央广播电视大学出版社,2004.23 Thomas Connolly Carolyn Begg. Database Systems M.北 京：电子工业出版社， 2004.74 Roger Bate, Sandy Shrum, CM

23、M Integration FrameworkJ, CMU/SEI Spotlight 1998.95 任新见.ASP动态网站快速开发实务M.电子工业出版社,2004年9月6 阎静.Dream weaver Mx 2004与ASP动态网页基础与范例M.机械工业出版 社,2004.9 月7 孙良军中文版Frontpage2003实用基础教程M.科学出版社,2003.128 前沿电脑图像工作室.巧学巧用Dream weaver、Fireworks、Flash制作网页M. 北京.人民邮电出版社，2003.129 攀孝忠.龚元明.计算机应用基础M.北京理工大学出版社，2008.1210 林信成.王道荣

24、.HTML与ASP实务M.清华大学出版社,2001.1211 李晓黎.张巍ASP+SQL Sever网络应用系统开始与实例M.人民邮电出版 社,2005.12致谢在本次毕业设计中，我通过自己动手设计了一个音乐休闲娱乐网站。在 设计过程中，我通过查阅大量有关资料、与同学交流经验、自学、并向老师 请教等方式使自己学到了不少有关知识，并大大地提高了动手能力。使我充 分体会到了在创造过程中探索的艰辛和成功的喜悦。虽然该网站的功能还不 是很完善，但是在设计过程中所学到的东西是这次毕业设计的最大收获和财 富，使我终身受益。感谢XXX老师给我的精心指导！还要感谢我的家人、同事和同学，是他们给我提供了充足的时

25、间，来完 成毕业设计。附录1. 主要文件列表shouye.html紫兰音乐网站的主页面；index.html音乐欣赏的主显页面/框架集主页面；Untitled-1.html 视频主显页面；Untitled-2.html紫兰文化的主显页面；Untitled-3.html紫兰图片的主显页面；Untitled-4.html链接的主显页面；Untitled-5.html散文的主显页面；Untitled-6.html诗歌的主显页面；Untitled-7.html音乐播放的主显页面；Untitled-8.html视频播放的主显页面。2. 重要代码无标题文档紫兰音乐欣赏table width=0 heigh

26、t=8 border=0 align=center”无标题文档  table width=950 height=30 border=0 align=center” 首页 乐视频 简介 紫兰图片 紫兰文化 链接 centertable width=936 height=996 border=0 align=文化贺卡.jpg”ahref= logo 江山如画 诗中有画，画中有诗     音 乐之 声     古代 山水画   梅花斗寒图   大鹏展翅图 音乐之声：(The Sou

27、nd of Music)是一部改编自玛丽亚冯崔普的著作崔普家庭演唱团 的戏剧作品，最初以音乐剧的形式于百老汇上演，之后被改编成电影，其主 题曲 与电影 同名。 同时， a target=_blank” href= 和& target=_blank href= 广东电台也均有一档节目名为音乐之声。    人文地理 *ahref= 自 然 环 境  *气候变化  *人口、语言 *ahref= 教信仰   民族风情 * ahref= 民间风俗 *月服饰 与 音乐 * 民族节日 * ahref= 生活习惯   相关音乐链接 百度音乐网 a href= 九酷音乐网 a href= 酷狗音乐网  联系我们：更多内容敬请访问我们的网站a href=  : :