音乐网站的设计与实现.doc

郑州交通职业学院郑州交通职业学院毕毕业业论论文（设文（设计计）论论文文（设设计计）题题目目：音乐网站的设计与实现摘摘要要本次音乐网站的制作与实现是针对高等教育网站制作的实际情况，开发的小型网站设计课题1。其目的是在新课改的大环境下，提高学生的音乐素质，推动学校教学、教育改革以及学生的创新和动手操作能力。本文实际设计一个专题音乐娱乐网站，该网站内容丰富多彩，包含了音乐名家、音乐常识、音乐欣赏、视频音乐欣赏，并附有专题音乐网站的简介和链接。在这个音乐网站的系统中我综合应用了Dreamveaver、Photoshop、Flash等知识。网页界面的结构设计以实用性出发，具有易于操作、简介、方便等特点。在设计中，首先，运用HTML语言对网站的静态页面进行精细的加工并且在网站的美工方面取得了良好的效果2。其次，对于网页的布局设计采用框架集粗略布局和div精细布局，在此之前努力学习和大量实践并把这些知识运用到网站的建设中去。关键词关键词：Dreamveaver，框架集，HTML，音乐，专题网站AbstractDesignandaccomplishthismusicwebsiteisaccordingtotheactualsituationofhighereducationwebsiteproductionsmallwebsitedesigntasks.Thepurposeofthenewcurriculumreoftheenvironmentimprovestudentsmusicqualitypromotetheinnovationofschoolteachingeducationreandstudentandhands-onability.Inthispaperthedesignofaspecialmusicentertainmentwebsitethewebsitecontentrichandcolorfulcontainsmusicmastersmusicsensemusicappreciationmusicandvideoaccompaniedbyanintroductionandthematicmusicwebsitelink3.ThesysteminthismusicwebsiteIcomprehensiveapplicationofDreamveaverPhotoshopFlshknowledge.Structuredesignofwebpageinterfacetopracticalityhasthecharacteristicsofeasyoperationintroductionconvenienceetc.InthedesignfirstofallhasobtainedthegoodeffectofartusingthestaticpageHTMLlanguageonthewebsiteofthefineprocessingandinsite.Secondlythelayoutdesignofwebpageusingframesetroughlayoutanddivfinelayoutbeforetryingtolearnandpracticealotandputtheknowledgeintotheconstructionsite4.Keywords:DreamveaverframesetHTMLmusicwebsite目目录录1引言.12概述.12.1课题的来源、目的和意义.12.2网站的建设目标.12.2.1网站的定位.12.2.2网站的目标.22.3本系统开发的环境.22.3.1硬件环境.22.3.2软件环境.23软件开发技术介绍.23.1Dreamveaver技术.23.2Photoshop技术.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引引言言互联网的魅力主要在于可以缩短世界的距离，让互联网具有这种神奇功能的元素是网站和网页。网站可以被看成信息交流的载体，而网页则是人与人之间交流的直接窗口。网站除了在互联网中得到广泛应用之外，也可在企业内部被用来解决内部管理与信息交流等问题。因此，无论对于网站管理专业人士还是网站建设爱好者，都应掌握一定的网站建设与网页制作技术5。本课题主要讲述音乐网站的制作与实现，网站设计包括：网页设计制作、网页版面设计、用DreamweaverCS4创建基本网页、超链接、表格、网页行为语言JavaScript、网页表现语言CSS、框架、表单、模板与库、多媒体对象、使用Div布局页面、网站的整合与测试发布。22概述概述2.12.1课题的来源、目的和意义课题的来源、目的和意义人类早已进入计算机世界的时代，我们要通过电脑来武装人脑。我们的目的是要使目前的教学向真正的数字化和信息化靠近。真正实现教育面向世界，面向未来，面向现代化。Internet在我们的生活中扮演着越来越重要的角色，同时计算机为教学提供了多种多样的辅助手段。从单机使用到多媒体教学，从学校内部科室间的局域网到整个学校的校园网，最后发展到整个校园网同Internet互联。从长远来看，学校教育教学网站的建立是十分必要的，主要目的是利用校园网辅助教学，从互联网上获得大量信息以便加快科研的速度，同时也丰富了学生的课余生活，简化了教师的工作。利用校园网与Internet的网络资源，使学生能够通过与外界的交流更加直观的掌握知识，增加音乐品位和修养6。大大提高了学校的现代化进程，使学校在当今激烈的竞争中立于不败之地。本课题介绍个人网站的制作及发布过程，本网站是一个以音乐娱乐为主题的个人网站，本文将介绍网站材料的组织、网页的制作过程。2.22.2网站的建设目标网站的建设目标.1网站的定位网站的定位建立一个较为实用的小型网站，首先要对网站进行明确的规划设计，规划包括网站的内容，面向的用户群，网站的规模以及网站的目标。本次毕业设计所建立网站的定位内容是一个音乐娱乐网站。面向的用户群是所有喜欢音乐和对音乐感兴趣的人。网站的目的是在休闲娱乐的大环境下，提高群众的音乐素质，推动音乐事业的发展。.2网站的目标网站的目标11.熟练的运用HTML语言对网站的静态页面进行设计7。尽力做到页面的美观实用。22.利用Photoshop技术尽力做到页面的美观实用。2.32.3本系统开发的环境本系统开发的环境.1硬件环境硬件环境机型：586微机；CPU：IntelPentiumM处理处理器；内存：64M；硬盘：60GB。.2软件环境软件环境操作系统：Windows7操作系统；界面开发环境：Dreamveaver。33软件开发技术介绍软件开发技术介绍3.13.1DreamveaverDreamveaver技术技术Dreamveaver是个原本由Macromedia公司所开发的著名网站开发工具。它使用所见即所得的接口，亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。随Macromedia被Adobe收购后，Adobe也开始计划开发LINUIX版本的Dreamweaver了8。Dreamweaver自MX版本开始，使用了Opera的排版引擎Presto作为网页预览。3.23.2PhotoshopPhotoshop技术技术AdobePhotoshop，简称“PS”，是一个由AdobeSystems开发和发行的图像处理软件。Photoshop主要处理以像素所构成的数字图像。使用其众多的编修与绘图工具，可以更有效的进行图片编辑工作。2003年，Adobe将AdobePhotoshop8更名为AdobePhotoshopCS。因此，最新版本AdobePhotoshopCS6是AdobePhotoshop中的第13个主要版本。44总体方案设计总体方案设计4.14.1功能设计功能设计.1总体结构图总体结构图图4-1总体结构4.1.2总体结构的各部分说明总体结构的各部分说明本网站的内容表现形式主要以文本、图像为主。虽然网络上可以承载的元素越来越多，但文字一直是很重要的部分。在同一语言环境下，文字的传达是最准确的，所以，文字是任何出版物的核心，网页也不例外，而且就现在的网络环境下，文字的使用仍是首选。所以，本网站使用大量的文字介绍休闲娱乐方面的知识9。首页：网站给人的第一印象就是首页，要让人愿意继续欣赏下去。我设计的首页力求简洁明了，色调属于暖色，给人明快、轻松的感觉。页面最醒目处是一朵正在开放的花，象征着祖国的未来生机勃勃。背景隐约可见的五条横线，代表着五线谱，表明了本网站音乐休闲娱乐的主题。其中包括音乐名家、音乐常识、音乐简介、音乐欣赏和主题图片五项。有我的E-mail以便用户和我联系。音乐常识：为了提高多数人的音乐修养及素养，我设计了这一项内容，包括基本知识、乐器常识及戏曲常识三项，乐器常识又分为民族乐器介绍和西洋乐器介绍两部分。音乐欣赏：主要是给人听觉和视觉上的享受。让人真正的在音乐氛围中有个轻松、愉悦的好心情。包括3种形式的音乐欣赏：flash、mp3、文字。4.24.2界面设计界面设计.1首页界面设计首页界面设计网站给人的第一印象就是首页，要让人愿意继续欣赏下去。我设计的首页力求简洁明了，色调属于暖色，给人明快、轻松的感觉。页面最醒目处是一朵正在开放的花，象征着祖国的未来生机勃勃。背景隐约可见的五条横线，代表着五线谱，表明了本网站音乐休闲的主题。首页包括音乐、视频、简介、紫兰图片、紫兰文化和链接六项。有我的E-mail以便用户和我联系10。网页的色彩选择和搭配是网页设计的重点之一。用什么色彩才能最好地表达出网站的内涵，吸引浏览者的视线，网页的色调、背景、文字、图标、边框、链接应该采用什么样的色彩，应该如何搭配，都是网页设计一开始就必须考虑的问题。网页的色彩搭配在网页的制作中起到非常重要的作用，因为它将决定浏览者对你的网页的第一印象，好的色彩搭配可以使你的网页独具魅力，相反则提不起浏览者的兴趣。所以一定要把握住色彩的搭配。图4-2为我的首页设计：图4-2首页界面设计.2音乐休闲娱乐子页面的设计音乐休闲娱乐子页面的设计这里主要是音乐休闲娱乐的园地。分为音乐、视频和文章三项。在同一语言环境下，文字的传达是最准确的，所以，文字是任何出版物的核心，网页也不例外，而且就现在的网络环境下，文字的使用仍是首选。所以，本网页设计使用了大量的文字介绍11。文本构成的因素有字体和字号，它们都是由汉字软件自动生成的。字体是一种灵活的媒介，根据对不同字体的选择可以表达感情，语调以及结构。字体也是网页的主要组成部分，是信息的重要载体。正确选择字体不仅关系到网页的美观，还对浏览者的阅读及信息的传达有直接的影响。如图4-3所示：图4-3音乐欣赏界面设计.3音乐名家子页面设计音乐名家子页面设计为了提高多数人的音乐修养及素养，我设计了这一项内容，包括谢霆锋、罗大佑、苏芮、等8位流行音乐家的生平介绍和代表作品。除了文本之外，WEB页面上最重要的设计元素莫过于图像了，如果WWW上没有图像，那么它也不会有今天这样火暴的局面了。图像也是传达信息的重要方法之一，与文本相比，它显得更加直观、生动、易于理解和接受。图像可以把那些文字无法表达的信息传达出来。本网站当然也恰当的使用了图像，文字的精确性和图像的模糊性结合，就会使得信息的传达更加完美了。如图4-4所示：图4-4音乐名家子页面.4视频欣赏视频欣赏视频欣赏主要是为了让音乐爱好者对音乐名家有更深刻的了解和认识而宣传音乐的一种方式，我所做的本网站主要是通过插入flsh动画起到宣传的效果。具体的动画页面设计如图4-5所示:图4-5视频欣赏界面.5文章收藏界面图文章收藏界面图文章收藏页面主要的设计风格根据本音乐网站为设计思想进行编写的，也是为了让广大的音乐爱好者掌握更多的音乐知识，对音乐有更多的了解而设计的本页面。具体的设计如图4-6所示：图4-6文章收藏的子页面55总结总结在这个音乐网站的系统中我综合应用了Dreamveaver、Photoshop、Flsh等知识。网页界面的结构设计以实用性出发，具有易于操作、简介、方便等特点。在设计中，首先，运用HTML语言对网站的静态页面进行精细的加工并且在网站的美工方面取得了良好的效果。其次，对于网页的布局设计采用框架集粗略布局和Div精细布局，在此之前努力学习和大量实践并把这些知识运用到网站的建设中去。本次音乐网站的制作与实现是针对高等教育网站制作的实际情况，开发的小型网站设计课题。其目的是在新课改的大环境下，提高学生的音乐素质，推动学校教学、教育改革以及学生的创新和动手操作能力。本文实际设计一个专题音乐娱乐网站，该网站内容丰富多彩，包含了音乐名家、音乐常识、音乐欣赏、视频音乐欣赏，并附有专题音乐网站的简介和链接。参考文献参考文献1郑阿奇.Asp实用教程M.电子工业出版社2003.92彭兰.网络主页制作课程设计M.中央广播电视大学出版社2004.23ThomasConnollyCarolynBegg.DatabaseSystemsM.北京：电子工业出版社，2004.74RogerBateSandyShrumCMMIntegrationFrameworkJCMUSEISpotlight1998.95任新见.ASP动态网站快速开发实务M.电子工业出版社2004年9月6阎静.DreamweaverMx2004与ASP动态网页基础与范例M.机械工业出版社2004.9月7孙良军中文版Frontpage2003实用基础教程M.科学出版社2003.128前沿电脑图像工作室.巧学巧用Dreamweaver、Fireworks、Flash制作网页M.北京.人民邮电出版社2003.129攀孝忠.龚元明.计算机应用基础M.北京理工大学出版社2008.1210林信成.王道荣.HTML与ASP实务M.清华大学出版社2001.1211李晓黎.张巍ASP+SQLSever网络应用系统开始与实例M.人民邮电出版社2005.12致致谢谢在本次毕业设计中，我通过自己动手设计了一个音乐休闲娱乐网站。在设计过程中，我通过查阅大量有关资料、与同学交流经验、自学、并向老师请教等方式使自己学到了不少有关知识，并大大