音乐网站的设计.docx
《音乐网站的设计.docx》由会员分享，可在线阅读，更多相关《音乐网站的设计.docx（24页珍藏版）》请在冰点文库上搜索。
音乐网站的设计
一设计题目
音乐网站设计
二设计要求
1．可根据歌名或歌手名查询。
2．可实现在线听，下载等功能。
3．网站主题明确，整体设计思路清晰，布局紧凑美观，页面色彩搭配合理。
4．网页上所有链接能够正常使用，链接内容符合要求并与主题相关。
5．内容积极，健康向上，不出现任何违反现行法律，法规和社会道德的内容和链接。
三设计说明书要求
要求书写内容充实，规范。
1．设计任务书
2．目录
3．正文
4．课程设计心得
5．附录
目 录
0摘要
1绪论
课程设计的背景及课程设计的意义
系统主要功能
主要开发工具及语言
Dreamweaver
Access
ASP（ActiveServerPage）
HTML（HyperTextMarkupLanguage）
2系统分析
系统目标
系统可行性论证
技术可行性
经济可行性
操作可行性
业务流程分析
系统功能模块划分
3系统总体设计
系统总体结构
组织结构框架图
数据库设计
网站数据库主要表的设计
音乐下载模块的数据库设计
4网站详细设计
代码设计
登陆模块设计
网站注册模块设计
在线点评版面显示模块设计
界面设计
登陆界面设计
注册模块界面设计
音乐管理界面设计
0摘要：
音乐网站是网络音乐的发展平台，国内各大音乐网站都拥有丰富的音乐资源，并且大部分的资源都可以免费下载，因此吸引了上百万的人成为他们的注册用户。
过去，音乐网站功能较为单一，大多采用VBScript脚本语言作为开发工具来建设网站。
但随着网络技术的发展，用户对音乐网站的要求逐步提高，音乐网站为了吸引更多的用户，必须不断美化界面，提升网站功能。
目前，各大音乐网站除了支持基本的在线试听、歌曲下载等常用功能外，也都建立了独立的在线试听模块。
由于网络音乐的互动性较强，音乐网站需要增加更多新的功能来满足用户之间的交流和互动。
因此，有必要综合各种功能来建立一个全面服务于用户的综合性音乐网站。
关键词：
综合性实用性互动性 吸引性
1绪论
互联网是社会发展的必然趋势，很多人已经意识到网络的强大生命力和它在未来将处于的重要地位。
他们钻研并且努力进入到这一个新的空间，新的领域。
其中包括你和我。
以个人为中心，淡化了传统中心地位，使得我们的世界向多元化加速发展，人人都有话语权，人人都是中心。
互联网是一个互动性极强的平台，它自由、宽容、平等、共享，并使来自民间的声音参与到了构建主流话语的行动中来。
计算机技术的发展，特别是网络技术的飞速发展，给文档的保存和管理提供极大的方便。
本论文中，将软件工程的基本原理和方法应用到整个网站系统，并对其进行需求分析，提出了解决问题的具体方法。
在具体制作中，用ASP技术来实现B/S系统，ASP技术与数据库技术结合，用户在浏览器端可以随意查询自己需要的标本，这样提高了网页的互动性，使整个系统能更好的为用户服务。
Internet飞速发展使得网站不再仅仅为企业或公司等大型结构所拥有，互联网成为人们快速获取、发布和传递信息的重要渠道，它在人们政治、经济、生活等各个方面发挥着重要的作用。
因此网站建设在Internet应用上的地位显而易见，一个家庭甚至个人都可以拥有属于自己的网站，而在这其中，个人网站已经日渐普及，而且发展到今天，创建一个能充分体现自我风格和特色的个人网站已经成为互联网用户的新追求。
1.1课程设计的背景及课程设计的意义
随着社会的发展时代的前进，IT行业的发展也是日新月异，对人类的生存和发展方式产生了很大的影响，网络传播以其特有的快速，高效，便捷的传输方式被人们所接受，越来越多的走进千家万户，并在当今音乐浪潮的影响下，随着音乐事业逐渐走向高峰，音乐已无处不在，音乐与我们以密不可分。
因此音乐网站的设计对于当今社会更是有不言而喻的重要性，通过对音乐网站的设计与分析，阐明了当前音乐发展的形势，简单介绍了音乐网站设计的内容，结构，规划，功能，发展前景等，提出音乐网站的设计实际上是一个发展性的问题，在网站的整体设计过程大致可以分为前期准备，策划，设计，制作，运行维护五个阶段，其中采用多种新兴技术，并重点介绍了ＡＳＰ技术在过程中的应用，ＡＳＰ是一个Ｗｅｂ服务器端的开发环境，利用它可以生产和运行动态的，交互的，高性能的Ｗｅｂ服务应用程序，能够为音乐开发人员提供实现应用程序的编制与自带组件设计网页从逻辑上分离的技术，特别适合建立Ｗｅｂ站点，网上访问数据的开发工具，使网站建立与发展变得较为简单与快捷。
为音乐网站的规划和建设，提出一些建设性的意见，它可以使设计过程尽可能满足音乐爱好者的需求。
系统的主要功能
1）.用户注册登录功能：
只有登录注册后才能使用本网站功能；
2）.在线视听：
会员能在线收听音乐，在线收看电影；
3.）下载功能：
会员能下载音乐；
4.）网站对歌曲进行分类，使会员根据自己喜爱试听或下载歌曲；
5.）网站提供新歌推荐和音乐排行榜项目，使会员能第一时间找到热门歌曲；
6.）搜索功能：
会员能通过输入歌手或者歌曲名找到自己想听的音乐；
7）.论坛：
提供会员交流的平台；
8.）管理员对歌曲的添加，修改，删除；
9.）系统支持多种格式的音乐上传；
10）.管理员账号管理。
１．３主要开发工具及语言
Dreamweaver
Dreamweaver 的界面几乎是做了一次脱胎换骨的改进，从中看到了更多的设计元素，让DW也稍稍带着点苹果的味道。
如果说VISTA和OFFICE2007创造了软件界面设计的新纪元，那么Adobe相当于取代了苹果的设计地位而紧随MS之后。
唯一的区别就是，MS老是抄人家苹果的（汗一个，微软的Fans别砸我），而Adobe却是实实在在的自己创造，设计界的老大地位实至名归……
布局按钮：
这个按钮似乎和下方的代码、分割、设计按钮功能重复，目前还不明白DW的意图，唯一增加的新功能是垂直分割，让代码和设计界面以垂直对比的方式呈现。
Dreamweaver的使用方法。
启动面板：
启动面板主要用来快速启动响应的任务，或显示/隐藏相应的浮动面板。
如果启动面板是竖的，那么，可以点击它又下角的一个小按钮，它就可以变成横向的了，这时，可能会发现，它的状态栏上也有这个面板上的所以选项。
这也就为网页制作者提供了方便。
可以直接从右下角点击相应的栏目进入想要进入的对话框。
对象面板
对象面板主要功能相当于插入菜单，主要是向网页中插入一些对象，如表格，框架，图象，层，Flash动画等，它通过一个下拉菜单，把要插入的选项都包括在了其中.
精简设计：
它提供了更多的可视区域，同时可以把右边的菜单收缩到只剩下图标。
对于习惯了Adobe其他设计软件的朋友来说，这的确是非常贴心的设计。
应用程序开发增强：
左上方是和数据相关的面板，包括数据库面板、数据绑定面板和行为面板；左下方则是文件与资源相关的面板，包括文件面板、相关资源面板、代码收集器等；右边则是设计相关面板，包括插入面板、CSS样式表面板、AP元素面板（用来为浮动层定位）。
应该说这是一个万金油布局，几乎适用所有的开发者，同时，它也把大部分菜单展示在用户面前，其他的七种布局可以说只是在这个基础上进行一些排列和隐藏。
在下方的文档面板上，DW新增加了一个实时预览功能——LiveView。
它的作用是在DW窗口中实时查看代码的效果，包括Javascript特效！
Dreamweaver是唯一提供RoundtripHTML、视觉化编辑与原始码编辑同步的设计工具。
它包含HomeSite和BBEdit等主流文字编辑器。
帧（frames）和表格的制作速度快的令您无法想像。
进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。
甚至可以排序或格式化表格群组，Dreamweaver支援精准定位，利用可轻易转换成表格的图层以拖拉置放的方式进行版面配置。
所见即所得Dreamweaver成功整合动态式出版视觉编辑及电子商务功能，提供超强的支援能力给Third-party厂商，包含ASP，Apache，BroadVision，ColdFusion，iCAT，Tango与自行发展的应用软体。
当您正使用Dreamweaver在设计动态网页时，所见即所得的功能，让您不需要透过浏览器就能预览网页。
梦幻样版和XMLDreamweaver将内容与设计分开，应用于快速网页更新和团队合作网页编辑。
建立网页外观的样版，指定可编辑或不可编辑的部份，内容提供者可直接编辑以样式为主的内容却不会不小心改变既定之样式。
您也可以使用样版正确地输入或输出XML内容。
Access
MicrosoftAccess在很多地方得到广泛使用，例如小型企业，大公司的部门，和喜爱编程的开发人员专门利用它来制作处理数据的桌面系统。
它也常被用来开发简单的WEB应用程序．这些应用程序都利用ASP技术在InternetInformationServices运行．比较复杂的WEB应用程序则使用PHP/MySQL或者ASP/MicrosoftSQLServer．
它的使用方便程度和强大的设计工具为初级程序员提供许多功能。
不过，这种便于使用可能使人误解。
这类开发者都是没有在应用或者数据设计方面训练的办公室从业人员。
因此许多人以为这样的开发者能够创造可用的系统，但也有很多人认为工具本身的局限性产生了这样的误导。
一些专业的应用程序开发人员使用Access用作快速应用开发，特别是给街道上的推销员制作一个初型或独立应用程序的工具。
可是如果是透过网络存取数据的话，Access的可扩放性并不高．因此当程序被较多使用者使用时，他们的选择多会是倾向于一些客户端-服务器为本的方案，例如Oracle、DB2、MicrosoftSQLServer、WindowsSharePointServices、PostgreSQL、MySQL、AlphaFive、MaxDB，或者Filemaker。
无论如何，不少Access的功能（表单，报告，序列和VB代码）可以用作其他数据库的后期应用，包括JET（档案为主的数据库引擎，Access缺省使用）、MicrosoftSQLServer、Oracle和任何其他跟ODBC兼容的产品。
这种方法允许开发者把一个成熟的应用的数据移动到一台更大功率的服务器而没有已经在适当的位置牺牲发展。
很多MicrosoftAccess的开发者使用Leszynski命名约定，虽然这不普遍；它是一次编程大会，并非一个DBMS实施的规章。
ASP（ActiveServerPage）
ASP是一种服务器端脚本编写环境，可以用来创建和运行动态网页或Web应用程序。
ASP网页可以包含HTML标记、普通文本、脚本命令以及COM组件等。
利用ASP可以向网页中添加交互式内容（如在线表单），也可以创建使用HTML网页作为用户界面的web应用程序。
与HTML相比，ASP网页具有以下特点：
asp
（1）利用ASP可以实现突破静态网页的一些功能限制，实现动态网页技术；
（2）ASP文件是包含在HTML代码所组成的文件中的，易于修改和测试； （3）服务器上的ASP解释程序会在服务器端执行ASP程序，并将结果以HTML格式传送到客户端浏览器上，因此使用各种浏览器都可以正常浏览ASP所产生的网页； （4）ASP提供了一些内置对象，使用这些对象可以使服务器端脚本功能更强。
例如可以从web浏览器中获取用户通过HTML表单提交的信息，并在脚本中对这些信息进行处理，然后向web浏览器发送信息； （5）ASP可以使用服务器端ActiveX组件来执行各种各样的任务，例如存取数据库、发送Email或访问文件系统等。
（6）由于服务器是将ASP程序执行的结果以HTML格式传回客户端浏览器，因此使用者不会看到ASP所编写的原始程序代码，可防止ASP程序代码被窃取。
（7）方便连接ACCESS与SQL数据库. （8）开发需要有丰富的经验,否则会留出漏洞,让黑客利用进行注入攻击. ASP也不仅仅局限于与HTML结合制作WEB网站，而且还可以与XHTML和WML语言结合制作WAP手机网站。
但是其原理也是一样的。
ASP-工作原理
当在Web站点中融入ASP功能后，将发生以下事情：
1、用户向浏览器地址栏输入网址，默认页面的扩展名是.asp。
2、浏览器向服务器发出请求。
3、服务器引擎开始运行ASP程序。
4、ASP文件按照从上到下的顺序开始处理，执行脚本命令，执行HTML页面内容。
5、页面信息发送到浏览器。
HTML（HyperTextMarkupLanguage）
HTML（HyperTextMark-upLanguage）即超文本标记语言或超文本链接标示语言，是目前网络上应用最为广泛的语言，也是构成网页文档的主要语言。
HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等。
HTML的结构包括头部（Head）、主体（Body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。
HTML文档制作不是很复杂，且功能强大，支持不同数据格式的文件镶入，这也是WWW盛行的原因之一，其主要特点如下：
1简易性，HTML版本升级采用超集方式，从而更加灵活方便。
2可扩展性，HTML语言的广泛应用带来了加强功能，增加标识符等要求，HTML采取子类元素的方式，为系统扩展带来保证。
3平台无关性。
虽然PC机大行其道，但使用MAC等其他机器的大有人在，HTML可以使用在广泛的平台上，这也是WWW盛行的另一个原因。
系统可行性论证
技术可行性
经济可行性
操作可行性
业务流程框架分析
系统功能模块划分
音乐网站主题确定
本次设计制作的是一个音乐类型的网站，所以一定要给浏览者生动的音乐体验，所以网站需要有丰富的功能来满足浏览者。
其中搜索功能，下载功能，试听功能能使网站表现的更加自由，操作简洁，便利。
3系统总体设计
工具简介：
第一个为插入图象的按钮，点击后，会弹出对话框，标准对话框，选择想要的图象就行了。
第二个（横向走）为插入轮替图象，它弹出的对话框会让选择两副图，以及鼠标点击时的连接等。
作好后，用鼠标移动到图象上面，图象就会变成另外的一副图象，点击它，就会连接到另外一个页面上去。
第三个为表格，点击后，在弹出的对话框中，添入想要的行数和列数以及表格边距颜色等。
第四个为插入表格式数据，可以将以前作成的表格形状的数据表，直接插入到网页中来，而不用做任何的修改。
第五个按钮为插入水平线按钮，插入后，在属性浮动面板上改改它的大小等。
第六个为导航条，和第二个差不多，也可以换图象，不过，比起第二个要复杂的多，但绝对简单。
第七个为插入层，这好象是Dreamweaver特有的特性，其他的网页编辑软件中都没有这项功能。
插入的层可以位于页面的任何位置。
拖动就行。
第八个为插入换行符，有时网页中的文字想让它换行，按回车又太大，用换行符就是一种不错的选择。
第九个为插入Email，将联系用的Email插入网页中，只要填上Email地址就行。
第十个为插入日期，很简单，没有什么好说的。
第十一个为插入Flash按钮，Flash是现在网页中新兴的一种多媒体，有动画，有声音，但文件很小，极适合在网上传播。
第十二个为插入Shockwave按钮，做好了的Shockwave直接就可以插到这儿来。
第十三个为插入制作人，亲自制作的东西不想留名吗？
点它就行。
第十四为插入Firework按钮，Firework是Macromedia公司的又一个产品，具有制作动画图象等动态功能。
也是专门为网页制作设计的。
第十五为插入Java语言编写的Applet小程序按钮。
第十六为插入ActiveX控件用的按钮。
第十七为插入插件用的按钮，这儿可以插入别的插件，上面未包括的。
第十八未插入服务器端接口联系的按钮。
组的按钮：
插入框架：
第一个按钮为插入框架按钮，为插入下面的那些按钮作准备。
这下面的按钮选项包括：
文本框，按钮，多选按钮，单选按钮，列表，文件域，图象域，隐含域，跳转菜单等交互式网页要用到的组件，假如要制作一个交互式的网页像留言薄什么的，用它做，非常的方便快捷。
其他按钮：
它还有几个选项组，但都不是那么常用了，一个就是它Character组它是常用符号组面板，里面为收集了最长用的符号，这些，通过手工直接写，是非常麻烦的事，因为它们是源码了，而这儿，可以给直接的转换成为源码，插入就成。
而Frames组，则是对页面的分页，也就是分窗口，将一个浏览器窗口分成几个窗口，在每个窗口里加入不同网页，来达到不同的效果。
它可以分的总类也如下，可以从图上直接看出来，非常的方便与快捷。
而Head组则是在网页“head”和“/head”之间加入必要的语句，可以是连接，可以是关键字，也可以是描述性的语句，还可以规定网页的刷新频率等。
Invisible组则是插入网页中看不见的元素了，比如说：
换行符，回车符等不可见的符号。
主要由这个控制面板来插入。
使用方法：
网页制作：
新建方法，就不用多说，一般软件中的新建方法在这儿同样使用，点击菜单File中的New就行了，或者按Ctrl+N也行。
在这儿就可以插入文字，图象，层等，反正都随，是不是也是所见既所得。
假如想看一下它的源文件，可以点击右下角的“〈〉”标记，也可以点击启动面板中的最后一个选项。
就会弹出来一个小窗口如图：
也可以打开外部编辑器来编辑它的源代码，比如说记事本。
只要点一下“ExternalEditor”按钮，Wrap选项为换行，当不想横向拉动滚动条，把它选上，文字就自动会换行了，另外一个选项为行号选项，当选上它是，左边将会出项行号，这样特别便于查找，去掉后，就与普通的记事本没有什么区别了。
编辑好后，关了它就可以了。
构建站点：
所有设计好的网页，在放到网上去以前，都需要把它组建好，以便于上传，在本地机上就要组织好，而DreamWeaver也把这想到了，点击启动面板上的Site选项，就会弹出站点管理窗口，和文件浏览器差不多，在这儿，可以增加文件夹，删减文件，文件改名等等，只要是文件浏览器能干的事，它都能干。
并且可以清楚地看到，哪个文件连接到了哪个文件，哪些文件是并列的关系，那些文件是父子关系。
所做的第一步是先建立一个本地站点根目录。
然后选择“NewSite”打开对话框，在“LocalRootFolder”中，输入本地站点根目录的位置。
然后输入HTTPAddress，如果还没有该地址，随便输入一个也行，只要好记。
最后，按“OK”键就可以了。
以后从本地站点中删除文件，拷贝文件时，站点会自动刷新站点文件列表。
其余的管理操作，与文件浏览器一样。
系统总体结构
关于框架和框架集
框架是浏览器窗口中的一个区域，它可以显示与浏览器窗口的其余部分中所显示内容无关的HTML文档。
框架集是HTML文件，它定义一组框架的布局和属性，包括框架的数目、框架的大小和位置以及在每个框架中初始显示的页面的URL。
框架集文件本身不包含要在浏览器中显示的HTML内容，但noframes部分除外；框架集文件只是向浏览器提供应如何显示一组框架以及在这些框架中应显示哪些文档的有关信息。
本节包含以下概念性主题：
了解框架和框架集如何工作
决定是否使用框架
了解嵌套的框架集.3。
了解框架和框架集如何工作
框架是浏览器窗口中的一个区域，它可以显示与浏览器窗口的其余部分中所显示内容无关的HTML文档。
框架集是HTML文件，它定义一组框架的布局和属性。
要在浏览器中查看一组框架，请输入框架集文件的URL；浏览器随后打开要显示在这些框架中的相应文档。
通常将一个站点的框架集文件命名为，以便当访问者未指定文件名时默认显示该名称。
下面的示例显示了一个由三个框架组成的框架布局：
一个较窄的框架位于侧面，其中包含导航条；一个框架横放在顶部，其中包含Web站点的徽标和标题；一个大框架占据了页面的其余部分，其中包含主要内容。
这些框架中的每一个都显示单独的HTML文档。
决定是否使用框架
框架的最常见用途就是导航。
一组框架通常包括一个含有导航条的框架和另一个要显示主要内容页面的框架。
但是，框架的设计可能比较复杂；并且在许多情况下，您可以创建没有框架的Web页，它可以达到使用一组框架所能达到的许多同样效果。
例如，如果您想让导航条显示在页面的左侧，则既可以用一组框架代替您的页面，也可以只是在站点中的每一页上包含该导航条。
（Dreamweaver可以帮助您创建使用相同布局的多个页面；下图显示了具有类似框架布局的页面设计，但在设计中并没有使用框架。
使用框架具有以下优点：
访问者的浏览器不需要为每个页面重新加载与导航相关的图形。
每个框架都具有自己的滚动条（如果内容太大，在窗口中显示不下），因此访问者可以独立滚动这些框架。
例如，当框架中的内容页面较长时，如果导航条位于不同的框架中，那么向下滚动到页面底部的访问者就不需要再滚动回顶部来使用导航条。
使用框架具有以下缺点：
可能难以实现不同框架中各元素的精确图形对齐。
对导航进行测试可能很耗时间。
各个带有框架的页面的URL不显示在浏览器中，因此访问者可能难以将特定页面
嵌套的框架集
在另一个框架集之内的框架集称作嵌套的框架集。
一个框架集文件可以包含多个嵌套的框架集。
大多数使用框架的Web页实际上都使用嵌套的框架，并且在Dreamweaver中大多数预定义的框架集也使用嵌套。
如果在一组框架里，不同行或不同列中有不同数目的框架，则要求使用嵌套的框架集。
组织结框架图
使用预定义的框架集
通过预定义的框架集，您可以很容易地选择您要创建的框架集类型。
如果您想设计自己的框架集。
创建预定义的框架集有两种方法：
通过插入栏，您可以创建框架集并在某一个新的框架中显示当前文档。
“新建文档”对话框创建新的空框架集。
要创建预定义的框架集并在某一框架中显示现有文档，请执行以下操作：
1将插入点放置在文档中。
2执行下列操作之一：
3从“插入”>“HTML”>“框架”子菜单中选择预定义的框架集。
4在“插入”栏的“布局”类别中，单击“框架”按钮上的下拉箭头，然后选择预定义的框架集。
框架集图标提供应用于当前文档的每个框架集的可视化表示形式。
框架集图标的蓝色区域表示当前文档，而白色区域表示将显示其它文档的框架。
选择框架和框架集
在“框架”面板中选择框架和框架集
“框架”面板提供框架集内各框架的可视化表示形式。
它能够显示框架集的层次结构，而这种层次在“文档”窗口中的显示可能不够直观。
在“框架”面板中，环绕每个框架集的边框非常粗；而环绕每个框架的是较细的灰线，并且每个框架由框架名称标识。
要显示“框架”面板，请执行以下操作：
选择“窗口”>“框架”。
要在“框架”面板中选择一个框架，请执行以下操作：
升级会员 