音乐网站的设计与实现.doc
郑州交通职业学院毕 业 论 文（设 计）论文（设计）题目：音乐网站的设计与实现摘 要本次音乐网站的制作与实现是针对高等教育网站制作的实际情况，开发的小型网站设计课题1。其目的是在新课改的大环境下，提高学生的音乐素质，推动学校教学、教育改革以及学生的创新和动手操作能力。本文实际设计一个专题音乐娱乐网站，该网站内容丰富多彩，包含了音乐名家、音乐常识、音乐欣赏、视频音乐欣赏，并附有专题音乐网站的简介和链接。在这个音乐网站的系统中我综合应用了Dreamveaver、Photoshop、Flash 等知识。网页界面的结构设计以实用性出发，具有易于操作、简介、方便等特点。在设计中，首先，运用HTML语言对网站的静态页面进行精细的加工并且在网站的美工方面取得了良好的效果2。其次，对于网页的布局设计采用框架集粗略布局和div精细布局，在此之前努力学习和大量实践并把这些知识运用到网站的建设中去。关键词：Dreamveaver，框架集，HTML，音乐，专题网站AbstractDesign and accomplish this music website is according to the actual situation of higher 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 entertainment 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. 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 layout 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 site目 录1 引 言12 概述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软件环境23 软件开发技术介绍2 3.1 Dreamveaver技术2 3.2 Photoshop 技术24 总体方案设计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 文章收藏界面图75 总结8参考文献9致 谢10附录111 引 言互联网的魅力主要在于可以缩短世界的距离，让互联网具有这种神奇功能的元素是网站和网页。网站可以被看成信息交流的载体，而网页则是人与人之间交流的直接窗口。网站除了在互联网中得到广泛应用之外，也可在企业内部被用来解决内部管理与信息交流等问题。因此，无论对于网站管理专业人士还是网站建设爱好者，都应掌握一定的网站建设与网页制作技术5。本课题主要讲述音乐网站的制作与实现，网站设计包括：网页设计制作、网页版面设计、用DreamweaverCS4创建基本网页、超链接、表格、网页行为语言JavaScript、网页表现语言CSS、框架、表单、模板与库、多媒体对象、使用Div布局页面、网站的整合与测试发布。2 概述2.1 课题的来源、目的和意义人类早已进入计算机世界的时代，我们要通过电脑来武装人脑。我们的目的是要使目前的教学向真正的数字化和信息化靠近。真正实现教育面向世界，面向未来，面向现代化。Internet在我们的生活中扮演着越来越重要的角色，同时计算机为教学提供了多种多样的辅助手段。从单机使用到多媒体教学，从学校内部科室间的局域网到整个学校的校园网，最后发展到整个校园网同Internet互联。从长远来看，学校教育教学网站的建立是十分必要的，主要目的是利用校园网辅助教学，从互联网上获得大量信息以便加快科研的速度，同时也丰富了学生的课余生活，简化了教师的工作。利用校园网与Internet的网络资源，使学生能够通过与外界的交流更加直观的掌握知识，增加音乐品位和修养6。大大提高了学校的现代化进程，使学校在当今激烈的竞争中立于不败之地。本课题介绍个人网站的制作及发布过程，本网站是一个以音乐娱乐为主题的个人网站，本文将介绍网站材料的组织、网页的制作过程。2.2 网站的建设目标2.2.1 网站的定位建立一个较为实用的小型网站，首先要对网站进行明确的规划设计，规划包括网站的内容，面向的用户群，网站的规模以及网站的目标。本次毕业设计所建立网站的定位内容是一个音乐娱乐网站。面向的用户群是所有喜欢音乐和对音乐感兴趣的人。网站的目的是在休闲娱乐的大环境下，提高群众的音乐素质，推动音乐事业的发展。2.2.2 网站的目标1.熟练的运用HTML语言对网站的静态页面进行设计7。尽力做到页面的美观实用。2.利用Photoshop技术尽力做到页面的美观实用。2.3 本系统开发的环境2.3.1 硬件环境机型：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了8。 Dreamweaver自MX版本开始，使用了Opera的排版引擎 "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 总体结构的各部分说明本网站的内容表现形式主要以文本、图像为主。虽然网络上可以承载的元素越来越多，但文字一直是很重要的部分。在同一语言环境下，文字的传达是最准确的，所以，文字是任何出版物的核心，网页也不例外，而且就现在的网络环境下，文字的使用仍是首选。所以，本网站使用大量的文字介绍休闲娱乐方面的知识9。首页：网站给人的第一印象就是首页，要让人愿意继续欣赏下去。我设计的首页力求简洁明了，色调属于暖色，给人明快、轻松的感觉。页面最醒目处是一朵正在开放的花，象征着祖国的未来生机勃勃。背景隐约可见的五条横线，代表着五线谱，表明了本网站音乐休闲娱乐的主题。其中包括音乐名家、音乐常识、音乐简介、音乐欣赏和主题图片五项。有我的E-mail 以便用户和我联系。音乐常识：为了提高多数人的音乐修养及素养，我设计了这一项内容，包括基本知识、乐器常识及戏曲常识三项，乐器常识又分为民族乐器介绍和西洋乐器介绍两部分。音乐欣赏：主要是给人听觉和视觉上的享受。让人真正的在音乐氛围中有个轻松、愉悦的好心情。包括3种形式的音乐欣赏：flash、mp3、文字。4.2 界面设计4.2.1 首页界面设计网站给人的第一印象就是首页，要让人愿意继续欣赏下去。我设计的首页力求简洁明了，色调属于暖色，给人明快、轻松的感觉。页面最醒目处是一朵正在开放的花，象征着祖国的未来生机勃勃。背景隐约可见的五条横线，代表着五线谱，表明了本网站音乐休闲的主题。首页包括音乐、视频、简介、紫兰图片、紫兰文化和链接六项。有我的E-mail 以便用户和我联系10。网页的色彩选择和搭配是网页设计的重点之一。用什么色彩才能最好地表达出网站的内涵，吸引浏览者的视线，网页的色调、背景、文字、图标、边框、链接应该采用什么样的色彩，应该如何搭配，都是网页设计一开始就必须考虑的问题。网页的色彩搭配在网页的制作中起到非常重要的作用，因为它将决定浏览者对你的网页的第一印象，好的色彩搭配可以使你的网页独具魅力，相反则提不起浏览者的兴趣。所以一定要把握住色彩的搭配。图4-2为我的首页设计：图4-2 首页界面设计4.2.2 音乐休闲娱乐子页面的设计这里主要是音乐休闲娱乐的园地。分为音乐、视频和文章三项。在同一语言环境下，文字的传达是最准确的，所以，文字是任何出版物的核心，网页也不例外，而且就现在的网络环境下，文字的使用仍是首选。所以，本网页设计使用了大量的文字介绍11。文本构成的因素有字体和字号，它们都是由汉字软件自动生成的。字体是一种灵活的媒介，根据对不同字体的选择可以表达感情，语调以及结构。字体也是网页的主要组成部分，是信息的重要载体。正确选择字体不仅关系到网页的美观，还对浏览者的阅读及信息的传达有直接的影响。如图4-3所示：图4-3 音乐欣赏界面设计4.2.3 音乐名家子页面设计为了提高多数人的音乐修养及素养，我设计了这一项内容，包括谢霆锋、罗大佑、苏芮、等8位流行音乐家的生平介绍和代表作品。除了文本之外，WEB页面上最重要的设计元素莫过于图像了，如果WWW上没有图像，那么它也不会有今天这样火暴的局面了。图像也是传达信息的重要方法之一，与文本相比，它显得更加直观、生动、易于理解和接受。图像可以把那些文字无法表达的信息传达出来。本网站当然也恰当的使用了图像，文字的精确性和图像的模糊性结合，就会使得信息的传达更加完美了。如图4-4所示：图4-4 音乐名家子页面4.2.4 视频欣赏视频欣赏主要是为了让音乐爱好者对音乐名家有更深刻的了解和认识而宣传音乐的一种方式，我所做的本网站主要是通过插入flsh动画起到宣传的效果。具体的动画页面设计如图4-5所示:图4-5 视频欣赏界面4.2.5 文章收藏界面图文章收藏页面主要的设计风格根据本音乐网站为设计思想进行编写的，也是为了让广大的音乐爱好者掌握更多的音乐知识，对音乐有更多的了解而设计的本页面。具体的设计如图4-6所示：图4-6 文章收藏的子页面5 总结在这个音乐网站的系统中我综合应用了Dreamveaver、Photoshop、Flsh 等知识。网页界面的结构设计以实用性出发，具有易于操作、简介、方便等特点。在设计中，首先，运用HTML语言对网站的静态页面进行精细的加工并且在网站的美工方面取得了良好的效果。其次，对于网页的布局设计采用框架集粗略布局和Div精细布局，在此之前努力学习和大量实践并把这些知识运用到网站的建设中去。本次音乐网站的制作与实现是针对高等教育网站制作的实际情况，开发的小型网站设计课题。其目的是在新课改的大环境下，提高学生的音乐素质，推动学校教学、教育改革以及学生的创新和动手操作能力。本文实际设计一个专题音乐娱乐网站，该网站内容丰富多彩，包含了音乐名家、音乐常识、音乐欣赏、视频音乐欣赏，并附有专题音乐网站的简介和链接。参考文献1 郑阿奇.Asp实用教程M.电子工业出版社,2003.92 彭兰.网络主页制作课程设计M.中央广播电视大学出版社,2004.23 Thomas Connolly Carolyn Begg. Database Systems M.北京：电子工业出版社，2004.74 Roger Bate, Sandy Shrum, CMM 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 林信成.王道荣.HTML与ASP实务M.清华大学出版社,2001.1211李晓黎.张巍ASP+SQL Sever网络应用系统开始与实例M.人民邮电出版社,2005.12 致 谢在本次毕业设计中，我通过自己动手设计了一个音乐休闲娱乐网站。在设计过程中，我通过查阅大量有关资料、与同学交流经验、自学、并向老师请教等方式使自己学到了不少有关知识，并大大地提高了动手能力。使我充分体会到了在创造过程中探索的艰辛和成功的喜悦。虽然该网站的功能还不是很完善，但是在设计过程中所学到的东西是这次毕业设计的最大收获和财富，使我终身受益。感谢XXX老师给我的精心指导！还要感谢我的家人、同事和同学，是他们给我提供了充足的时间，来完成毕业设计。附录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.重要代码<!DOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Transitional/EN" "http:/www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http:/www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>无标题文档</title><style type="text/css"><!-.STYLE5 font-size: 36px;color: #FFFFFF;-></style></head><body><table width="350" height="56" border="0" align="center" bgcolor="#9900FF"> <tr> <td bgcolor="#9900FF"><div align="center"><span class="STYLE5">紫兰音乐欣赏</span></div></td> </tr></table><table width="0" height="8" border="0" align="center"> <tr> <td><div align="center"><img src="图片/8.jpg" width="1100" height="8" /></div></td> </tr></table></body></html><!DOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Transitional/EN" "http:/www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http:/www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>无标题文档</title><style type="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><table width="950" height="200" border="0" align="center" background="图片/标题1.jpg"> <tr> <td> </td> </tr></table><table width="950" height="30" border="0" align="center"> <tr bgcolor="#993300"> <td> <div align="center" class="STYLE2"><a href="shouye.html">首页</a></div></td> <td><div align="center" class="STYLE2"><a href="index.html">音乐</a></div></td> <td><div align="center" class="STYLE2"><a href="index.html">视频</a></div></td> <td><div align="center" class="STYLE2"><a href="Untitled-2.html">简介</a></div></td> <td><div align="center" class="STYLE2"><a href="Untitled-3.html">紫兰图片</a></div></td> <td><div align="center" class="STYLE2"><a href="Untitled-4.html">紫兰文化</a></div></td> <td><div align="center" class="STYLE2"><a href="Untitled-5.html">链接</a></div></td> </tr></table><table width="936" height="996" border="0" align="center"> <tr> <td width="173" height="126" align="center" valign="top" bgcolor="#CCCCCC"><div align="justify"> <p align="center"><img src="图片/紫兰文化贺卡.jpg" width="129" height="92" /></p> <p align="center" class="STYLE1"> <a href=" </div> </td> <td width="767"><table width="777" height="126" border="0"> <tr> <td><img src="图片/11.jpg" width="194" height="126" /></td> <td><img src="图片/13.jpg" width="194" height="126" /></td> <td><img src="图片/15.jpg" width="194" height="126" /></td> <td><img src="图片/3.jpg" width="194" height="126" /></td> </tr> </table></td> </tr> <tr> <td height="214" align="center" valign="top" bgcolor="#CCCCCC"><p class="STYLE3">江山如画</p> <p><img src="图片/4.jpg" width="113" height="162" /></p></td> <td rowspan="2" valign="top"><table width="793" height="640" border="0"> <tr> <td height="30" colspan="3" bgcolor="#99FF00"><div align="center" class="STYLE10">诗中有画，画中有诗</div></td> </tr> <tr> <td width="256" height="300"><img src="图片/2.jpg" width="256" height="300" /></td> <td width="3" height="300" rowspan="2"> </td> <td width="520" height="300"><img src="图片/0.jpg" width="519" height="298" /></td> </tr> <tr bgcolor="#CC00FF"> <td height="300" align="left" valign="top"><p class="STYLE12"> <span class="STYLE18">音乐之声</span></p> <p> <span class="STYLE17">古代山水画</span></p> <p class="STYLE14"> 梅花斗寒图</p> <p class="STYLE14"> 大鹏展翅图</p></td> <td height="300"><img src="图片/10.jpg" width="519" height="298" /></td> </tr> </table> <table width="796" height="195" border="0"> <tr bgcolor="#CC00FF"> <td height="191"> <span class="STYLE23">音乐之声:（The Sound of Music）是一部改编自玛丽亚·冯·崔普的著作崔普家庭演唱团的戏剧作品，最初以音乐剧的形式于百老汇上演，之后被改编成电影，其主题曲与电影同名。同时，<a target="_blank" href=" target="_blank" href=" </span></td> </tr> </table> <p> </p></td> </tr> <tr bgcolor="#CCCCCC"> <td height="616" align="center" valign="top" bgcolor="#F0F0F0"><p> </p> <p><span class="STYLE20">人文地理</span></p> <p><span class="STYLE21">* <a href=" <p class="STYLE22"> * <a href=" <p class="STYLE22"> * <a href=" <p class="STYLE22"> *<a href=" 教信仰</a></p> <p class="STYLE20"> </p> <p class="STYLE20">民族风情</p> <p class="STYLE19">* <a href=" <p class="STYLE22"> * 服饰与<a href=" <p class="STYLE22">* <a href=" <p class="STYLE22">* <a href=" <p class="STYLE20"> </p> <p class="STYLE20">相关音乐链接</p> <p><a href=" <p><a href=" <p><a href=" <p class="STYLE20"> </p></td> </tr> <tr> <td height="22" colspan="2" align="center" valign="middle" bgcolor="#CCCCCC">联系我们：更多内容敬请访问我们的网站<a href=" </a> </td> </tr></table><p> </p><p> </p></body></html>
