音乐网站的设计与实现

QTO磁liiJ毕业论文（设计）论文（设计）题目：音乐网站的设计与实现所属系别 信息工程系专业班级X级大专计算机网络技术XX班姓名 XXXXXX 学号XXXXXXXXXXXXXXX指导教师 XXXXXXX 撰写日期XXX年XX月本次音乐网站的制作与实现是针对高等教育网站制作的实际情况，开发的小型网站设计课题［1］。其目的是在新课改的大环境下，提高学生的音乐素质，推动学校教学、教育改革以及学生的创新和动手操作能力。本文实际设计一个专题音乐娱乐网站，该网站内容丰富多彩，包含了音乐名家、音乐常识、音乐欣赏、视频音乐欣赏，并附有专题音乐网站的简介和链接。在这个音乐网站的系统中我综合应用了Dreamveaver、Photoshop、Flash等知识。网页界面的结构设计以实用性出发，具有易于操作、简介、方便等特点。在设计中，首先，运用HTML语言对网站的静态页面进行精细的加工并且在网站的美工方面取得了良好的效果⑵。其次，对于网页的布局设计采用框架集粗略布局和div精细布局，在此之前努力学习和大量实践并把这些知识运用到网站的建设中去。关键词：Dreamveaver，框架集，HTML，音乐，专题网站AbstractDesignandaccomplishthismusicwebsiteisaccordingtotheactualsituationofhighereducationwebsiteproduction,smallwebsitedesigntasks.Thepurposeofthenewcurriculumreformoftheenvironment,improvestudents'musicquality,promotetheinnovationofschoolteaching,educationreformandstudentandhands-onability.Inthispaper,thedesignofaspecialmusicentertainmentwebsite,thewebsitecontentrichandcolorful,containsmusicmasters,musicsense,musicappreciation,musicandvideo,accompaniedbyanintroductionandthematicmusicwebsitelink[3].ThesysteminthismusicwebsiteIcomprehensiveapplicationofDreamveaver,Photoshop,Flshknowledge.Structuredesignofwebpageinterfacetopracticality,hasthecharacteristicsofeasyoperation,introduction,convenienceetc..Inthedesign,firstofall,hasobtainedthegoodeffectofartusingthestaticpageHTMLlanguageonthewebsiteofthefineprocessingandinsite.Secondly,thelayoutdesignofwebpageusingframesetroughlayoutanddivfinelayout,beforetryingtolearnandpracticealotandputtheknowledgeintotheconstructionsite[4].Keywords:Dreamveaver,frameset,HTML,music,websiteTOC\o"1-5"\h\z\o"CurrentDocument"1引言 1\o"CurrentDocument"2概述 1\o"CurrentDocument"2.1课题的来源、目的和意义 1\o"CurrentDocument"2.2网站的建设目标 1\o"CurrentDocument"2.2.1网站的定位 1\o"CurrentDocument"2.2.2网站的目标 2\o"CurrentDocument"2.3本系统开发的环境 2\o"CurrentDocument"2.3.1硬件环境 2\o"CurrentDocument"2.3.2软件环境 2\o"CurrentDocument"3软件开发技术介绍 2\o"CurrentDocument"Dreamveaver技术 2\o"CurrentDocument"Photoshop技术 2\o"CurrentDocument"4总体方案设计 3\o"CurrentDocument"4.1功能设计 3\o"CurrentDocument"4.1.1总体结构图 3\o"CurrentDocument"4.1.2总体结构的各部分说明 3界面设计 4\o"CurrentDocument"4.2.1首页界面设计 4\o"CurrentDocument"4.2.2音乐休闲娱乐子页面的设计 5\o"CurrentDocument"4.2.3音乐名家子页面设计 6\o"CurrentDocument"4.2.4视频欣赏 7\o"CurrentDocument"4.2.5文章收藏界面图 7\o"CurrentDocument"5总结 8\o"CurrentDocument"参考文献 9\o"CurrentDocument"致谢 10\o"CurrentDocument"附录 111引言互联网的魅力主要在于可以缩短世界的距离，让互联网具有这种神奇功能的元素是网站和网页。网站可以被看成信息交流的载体，而网页则是人与人之间交流的直接窗口。网站除了在互联网中得到广泛应用之外，也可在企业内部被用来解决内部管理与信息交流等问题。因此，无论对于网站管理专业人士还是网站建设爱好者，都应掌握一定的网站建设与网页制作技术［5］。本课题主要讲述音乐网站的制作与实现，网站设计包括：网页设计制作、网页版面设计、用DreamweaverCS4创建基本网页、超链接、表格、网页行为语言一一JavaScript、网页表现语言一一CSS、框架、表单、模板与库、多媒体对象、使用Div布局页面、网站的整合与测试发布。2概述2.1课题的来源、目的和意义人类早已进入计算机世界的时代，我们要通过电脑来武装人脑。我们的目的是要使目前的教学向真正的数字化和信息化靠近。真正实现教育面向世界，面向未来，面向现代化。Internet在我们的生活中扮演着越来越重要的角色，同时计算机为教学提供了多种多样的辅助手段。从单机使用到多媒体教学，从学校内部科室间的局域网到整个学校的校园网，最后发展到整个校园网同Internet互联。从长远来看，学校教育教学网站的建立是十分必要的，主要目的是利用校园网辅助教学，从互联网上获得大量信息以便加快科研的速度，同时也丰富了学生的课余生活，简化了教师的工作。利用校园网与Internet的网络资源，使学生能够通过与外界的交流更加直观的掌握知识，增加音乐品位和修养［6］。大大提高了学校的现代化进程，使学校在当今激烈的竞争中立于不败之地。本课题介绍个人网站的制作及发布过程，本网站是一个以音乐娱乐为主题的个人网站，本文将介绍网站材料的组织、网页的制作过程。2.2网站的建设目标2.2.1网站的定位建立一个较为实用的小型网站，首先要对网站进行明确的规划设计，规划包括网站的内容，面向的用户群，网站的规模以及网站的目标。本次毕业设计所建立网站的定位内容是一个音乐娱乐网站。面向的用户群是所有喜欢音乐和对音乐感兴趣的人。 网站的目的是在休闲娱乐的大环境下，提高群众的音乐素质，推动音乐事业的发展。2.2.2网站的目标熟练的运用HTML语言对网站的静态页面进行设计［7］。尽力做到页面的美观实用。利用Photoshop技术尽力做到页面的美观实用。2.3本系统开发的环境2.3.1硬件环境机型：586微机；CPU：IntelPentiumM处理处理器；内存：64M；硬盘：60GB。2.3.2软件环境操作系统：Windows7操作系统；界面开发环境：Dreamveaver。3软件开发技术介绍Dreamveaver技术Dreamveaver是个原本由Macromedia公司所开发的著名网站开发工具。它使用所见即所得的接口，亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。随Macromedia被Adobe收购后，Adobe也开始计划开发LINUIX版本的Dreamweaver了⑻。Dreamweaver自MX版本开始，使用了Opera的排版引擎”Presto”作为网页预览。Photoshop技术AdobePhotoshop，简称“PS"，是一个由AdobeSystems开发和发行的

图像处理软件。Photoshop主要处理以像素所构成的数字图像。使用其众多的编修与绘图工具，可以更有效的进行图片编辑工作。2003年，Adobe将AdobePhotoshop8更名为AdobePhotoshopCS。因此，最新版本AdobePhotoshopCS6是AdobePhotoshop中的第13个主要版本。4总体方案设计4.1功能设计4.1.1总体结构图图4-1总体结构4.1.2总体结构的各部分说明本网站的内容表现形式主要以文本、图像为主。虽然网络上可以承载的元素越来越多，但文字一直是很重要的部分。在同一语言环境下，文字的传达是最准确的，所以，文字是任何出版物的核心，网页也不例外，而且就现在的网络环境下，文字的使用仍是首选。所以，本网站使用大量的文字介绍休闲娱乐方面的知识问首页：网站给人的第一印象就是首页，要让人愿意继续欣赏下去。我设计的首页力求简洁明了，色调属于暖色，给人明快、轻松的感觉。页面最醒目处是一朵正在开放的花，象征着祖国的未来生机勃勃。背景隐约可见的五条横线，代表着五线谱，表明了本网站音乐休闲娱乐的主题。其中包括音乐名家、音乐常识、音乐简介、音乐欣赏和主题图片五项。有我的E-mail以便用户和我联系。音乐常识：为了提高多数人的音乐修养及素养，我设计了这一项内容，包括基本知识、乐器常识及戏曲常识三项，乐器常识又分为民族乐器介绍和西洋乐器介绍两部分。音乐欣赏：主要是给人听觉和视觉上的享受。让人真正的在音乐氛围中有个轻松、愉悦的好心情。包括3种形式的音乐欣赏：flash、mp3、文字。4.2界面设计4.2.1首页界面设计网站给人的第一印象就是首页，要让人愿意继续欣赏下去。我设计的首页力求简洁明了，色调属于暖色，给人明快、轻松的感觉。页面最醒目处是一朵正在开放的花，象征着祖国的未来生机勃勃。背景隐约可见的五条横线，代表着五线谱，表明了本网站音乐休闲的主题。首页包括音乐、视频、简介、紫兰图片、紫兰文化和链接六项。有我的E-mail以便用户和我联系［1。］网页的色彩选择和搭配是网页设计的重点之一。用什么色彩才能最好地表达出网站的内涵，吸引浏览者的视线，网页的色调、背景、文字、图标、边框、链接应该采用什么样的色彩，应该如何搭配，都是网页设计一开始就必须考虑的问题。网页的色彩搭配在网页的制作中起到非常重要的作用，因为它将决定浏览者对你的网页的第一印象，好的色彩搭配可以使你的网页独具魅力，相反则提不起浏览者的兴趣。所以一定要把握住色彩的搭配。图4-2为我的首页设计：图4-2首页界面设计4.2.2音乐休闲娱乐子页面的设计这里主要是音乐休闲娱乐的园地。分为音乐、视频和文章三项。在同一语言环境下，文字的传达是最准确的，所以，文字是任何出版物的核心，网页也不例外，而且就现在的网络环境下，文字的使用仍是首选。所以，本网页设计使用了大量的文字介绍[11]文本构成的因素有字体和字号，它们都是由汉字软件自动生成的。字体是一种灵活的媒介，根据对不同字体的选择可以表达感情，语调以及结构。字体也是网页的主要组成部分，是信息的重要载体。正确选择字体不仅关系到网页的美观，还对浏览者的阅读及信息的传达有直接的影响。如图4-3所示：

图4-3音乐欣赏界面设计4.2.3音乐名家子页面设计为了提高多数人的音乐修养及素养，我设计了这一项内容，包括谢霆锋、罗大佑、苏芮、等8位流行音乐家的生平介绍和代表作品。除了文本之外，WEB页面上最重要的设计元素莫过于图像了，如果WWW上没有图像，那么它也不会有今天这样火暴的局面了。图像也是传达信息的重要方法之一，与文本相比，它显得更加直观、生动、易于理解和接受。图像可以把那些文字无法表达的信息传达出来。本网站当然也恰当的使用了图像，文字的精确性和图像的模糊性结合，就会使得信息的传达更加完美了。如图4-4所示：紫兰音乐欣赏音乐欣股痛音乐欣股痛i音呆视频欣赏网页广告古涂欧词文章收薰.一半•z酒干用4小三61%不起1趾腱锄舞S密是M工太军3hi楠王诺10套马杯宣兰囹推L1淄12春品济年英队：图4-4音乐名家子页面4.2.4视频欣赏视频欣赏主要是为了让音乐爱好者对音乐名家有更深刻的了解和认识而宣传音乐的一种方式，我所做的本网站主要是通过插入flsh动画起到宣传的效果。具体的动画页面设计如图4-5所示：图4-5图4-5视频欣赏界面4.2.5文章收藏界面图文章收藏页面主要的设计风格根据本音乐网站为设计思想进行编写的，也是为了让广大的音乐爱好者掌握更多的音乐知识，对音乐有更多的了解而设计的本页面。具体的设计如图4-6所示:爱情与人生摘要：大学生弱陞解爱情的木点斧谡套情是一对男女萋于一定的社会墓珊幻共同的生活理恩，在各自内心形成的相互但并渴里对方成为自己境生洋侣的一伸强烈蝇真专一的窜情，大学生要建手恋爱中的道德和燃范.如菅直人辂平等，言宝承担责任，文明相亲相爱=大学生要改变恋爱不良认知’合珪远择恋置或机，学校要正围引导大学生的恋爱斑：大学生匝学会正浦助理学习和恭爰的关系，以及恋爱中出现的一些问题，如：不能把友情当爱情「不能费置爱情的地位，不能片面的或功利化的对特恋爰「不能只注重过程不顾后果。大学生要明辩壹情与学业，学业与人生之间的关系r树立正确的恋景观会促进学业的发展，反之明会阻瑁学业戋国，学业良并发国会买定大学生鼻后的人生境路，1关键词：爱情本匣正琦的恋宏观 恋爱道嚏要求大学生是社会中一个亘要乾体，是擂可社会进*的一攵重芸方坦*正适理艘唱与A生的关系尤为重妾」性耋、理想和贵任是构成丧情的三个基本要素。这三个基本要素构成了竟情的有机折一整体，它们的完茉始合成就了人世间黄好的爱情‘住爰的吸引，使爱情打上了情丧的洛印‘理想的契合，使得爱喑表现着恋人们对生活的希望和对未来的憧憬=肯任则使得爱情不是自私的占有对方的盛情，而是自觉自厦的为所拳爱的人付出眉情，担当黄任。崽正的爱瑁是生活的有町组成部分r它对我们售个大的意义不碰多说，当我们一遇遍地管宣有人为宏痴情，为黄奉献r为爰等符，为黄忘我的Et候，舌到有R为黄而神是奕变，为爱而佛罢疵涌，为爱而坚守一生，为爱而胶弃一切的时候r我们都能悻会大黄清的巨大力量。C这大翔煜为有大会说“生•命谴可炭，胃情价更高•）人一生的幸福很太一驾分取M爱节，对爱情的向往和礼雌于撕倔-个瞬妃校园生的爱帼燃美始街头.焯予的白发荏苍的老粽illBT；LA a.j4>Tb±1辞B小>4图4-6文章收藏的子页面5总结在这个音乐网站的系统中我综合应用了DreamveaveRPhotoshopFlsh等知识。网页界面的结构设计以实用性出发，具有易于操作、简介、方便等特点。在设计中，首先，运用HTML语言对网站的静态页面进行精细的加工并且在网站的美工方面取得了良好的效果。其次，对于网页的布局设计采用框架集粗略布局和Div精细布局，在此之前努力学习和大量实践并把这些知识运用到网站的建设中去。本次音乐网站的制作与实现是针对高等教育网站制作的实际情况，开发的小型网站设计课题。其目的是在新课改的大环境下，提高学生的音乐素质，推动学校教学、教育改革以及学生的创新和动手操作能力。本文实际设计个专题音乐娱乐网站，该网站内容丰富多彩，包含了音乐名家、音乐常识、音乐欣赏、视频音乐欣赏，并附有专题音乐网站的简介和链接。参考文献郑阿奇.《Asp实用教程》[M].电子工业出版社,2003.9彭兰.《网络主页制作课程设计》[M].中央广播电视大学出版社,2004.2ThomasConnollyCarolynBegg.DatabaseSystems[M].北京：电子工业出版社，2004.7RogerBate,SandyShrum,CMMIntegrationFramework[J],CMU/SEISpotlight1998.9任新见.《ASP动态网站快速开发实务》[M].电子工业出版社,2004年9月阎静.《DreamweaverMx2004与ASP动态网页基础与范例》[M].机械工业出版社,2004.9月孙良军《中文版Frontpage2003实用基础教程》[M].科学出版社,2003.12前沿电脑图像工作室.《巧学巧用Dreamweaver、Fireworks、Flash制作网页》[M].北京.人民邮电出版社，2003.12攀孝忠.龚元明.《计算机应用基础》[M].北京理工大学出版社，2008.12林信成.王道荣.《HTML与ASP实务》[M].清华大学出版社,2001.12李晓黎.张巍《ASP+SQLSever网络应用系统开始与实例》[M].人民邮电出版社,2005.12致谢在本次毕业设计中，我通过自己动手设计了一个音乐休闲娱乐网站。在设计过程中，我通过查阅大量有关资料、与同学交流经验、自学、并向老师请教等方式使自己学到了不少有关知识，并大大地提高了动手能力。使我充分体会到了在创造过程中探索的艰辛和成功的喜悦。虽然该网站的功能还不是很完善，但是在设计过程中所学到的东西是这次毕业设计的最大收获和财富，使我终身受益。感谢XXX老师给我的精心指导！还要感谢我的家人、同事和同学，是他们给我提供了充足的时间，来完成毕业设计。附录主要文件列表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视频播放的主显页面。重要代码<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN〃"/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><title>无标题文档</title><styletype="text/css"><!--.STYLE5(font-size:36px;color:#FFFFFF;}--></style></head><body><table width="350" height="56" border="0" align="center”bgcolor=〃#9900FF〃><tr><tdbgcolor="#9900FF"><divalign="center"><spanclass="STYLE5">紫兰音乐欣赏</span></div></td></tr></table><tablewidth="0"height="8"border="0"align="center”〉<tr><td><divalign="center"><imgsrc="图片/8.jpg"width="1100"height="8"/></div></td></tr></table></body></html><!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><title>无标题文档</title><styletype="text/css"><!--.STYLE1(color:#FF0000).STYLE2(color:#FFFFFF}.STYLE3(font-size:18px;color:#990099;font-family:〃宋体〃；}.STYLE10(font-size:xx-large;color:#663300;}.STYLE12(font-size:xx-large;color:#3300CC;}.STYLE14(color:#000000;font-size:24px;}.STYLE17(font-size:24px}.STYLE18(font-size:36px}.STYLE19(color:#000000;font-size:16px;}.STYLE20(color:#FF00FF;font-size:18px;}.STYLE21(color:#000000}.STYLE22(color:#000000;font-size:14px;}.STYLE23(color:#0000FF;font-size:18px;}--></style></head><body><tablewidth="950"height="200"border="0"align="center”background=〃图片/标题1.jpg">

<tr><td> </td></tr></table><tablewidth="950"height="30"border="0"align="center”〉<trbgcolor="#993300”><td><divalign="center"class="STYLE2”><ahref="shouye.html">首页</a></div></td><td><divalign="center"class="STYLE2”><ahref="index.html">^乐</a></div></td><td><divalign="center"class="STYLE2”><ahref="index.html”>视频</a></div></td><td><divalign="center"class<td><divalign="center"class="STYLE2”><ahref="Untitled-2.html">简介</a></div></td><td><divalign="center"class="STYLE2"><a<td><divalign="center"class="STYLE2"><ahref="Untitled-3.html”>紫兰图片</a></div></td><td><divalign="center"class="STYLE2"><a<td><divalign="center"class="STYLE2"><ahref="Untitled-4.html”>紫兰文化</a></div></td><td><divalign="center"class="STYLE2"><a<td><divalign="center"class="STYLE2"><ahref="Untitled-5.html">链接</a></div></td></tr></table>"center"><tablewidth="936"height="996"border="0"align="center"><tr><tdwidth="173"height="126"align="center"valign="top"bgcolor="#CCCCCC"><divalign="justify">文化贺卡.jpg”<palign="center"><imgsrc="图片/文化贺卡.jpg”width="129"height="92"/></p><palign="center"class="STYLE1"><a<palign="center"class="STYLE1"><ahref="/">紫兰音乐网站的logo</a></p></div></td><tdwidth=〃767〃><tablewidth="777"height="126"border=〃0〃><tr><td><imgsrc="图片/11.jpg"width="194"height="126"/></td><td><imgsrc="图片/13.jpg"width="194"height="126"/></td><td><imgsrc="图片/15.jpg"width="194"height="126"/></td><td><imgsrc="图片/3.jpg"width="194"height="126"/></td></tr></table></td></tr><tr><tdheight="214" align="center" valign="top"bgcolor="#CCCCCC"><pclass="STYLE3">江山如画</p><p><imgsrc="图片/4.jpg"width="113"height="162"/></p></td><tdrowspan="2"valign="top"><tablewidth="793"height="640"border="0"><tr><tdheight="30"colspan="3" bgcolor="#99FF00"><divalign="center"class="STYLE10">诗中有画，画中有诗</div></td></tr><tr><tdwidth="256"height="300"><imgsrc="图片/2.jpg"width="256"height="300"/></td><tdwidth="3"height="300"rowspan="2"> </td><tdwidth="520"height="300"><imgsrc="图片/0.jpg"width="519"height="298"/></td></tr><trbgcolor="#CC00FF"><tdheight="300"align="left" valign="top"><pclass="STYLE12">  <spanclass="STYLE18">音乐之声</span></p><p>    <spanclass="STYLE17”>古代山水画</span></p><pclass=〃STYLE14〃>  梅花斗寒图</p><pclass=〃STYLE14〃>  大鹏展翅图</p></td><tdheight=〃300〃><imgsrc=〃图片/10.jpg"width="519”height="298”/></td></tr></table><tablewidth="796"height="195"border=”0”><trbgcolor="#CC00FF"><tdheight="191”><spanclass="STYLE23”>音乐之声：(TheSoundofMusic)是一部改编自玛丽亚•冯•崔普的著作《崔普家庭演唱团》的戏剧作品，最初以音乐剧的形式于百老汇上演，之后被改编成电影，其主题曲与电影同名。同时，<atarget="_blank”href="/view/27853.htm">中央人民广播电台</a>和<&target="_blank"hre