个人音乐网站的设计开发.docx

个人音乐网站的设计开发.docx

《个人音乐网站的设计开发.docx》由会员分享，可在线阅读，更多相关《个人音乐网站的设计开发.docx（21页珍藏版）》请在冰豆网上搜索。

个人音乐网站的设计开发

浙江广播电视大学

毕业设计

题目个人音乐网站的设计开发

姓名

专业KZ10计算机网络

指导教师

毕业论文……………………………………………………………………………………………1

摘要3

第一章网站设计原则及目标4

1.1设计原则4

1.网页内容简单易读4

2.网页的导航清晰4

3.网页风格个性化4

4.页面内容要独一无二4

1.2设计目标5

第二章系统概述6

2.1系统配置需求6

2.2制作特点要求6

2.3框架的结构构思6

2.4制作方式7

第三章系统环境的构建9

3.1JSP运行环境的构建9

3.1.1配置Java运行环境9

3.1.2配置JSP运行环境9

3.1.3配置Tomcat10

3.1.4测试运行环境11

3.2MicrosoftOfficeAccess2003的安装11

3.3MacromediaDreamweaver8的安装11

3.4建立网络站点12

3.4.1定义站点12

3.4.2选择服务器技术13

3.4.3选择存放的本地文件夹13

3.4.4设置本机测试的URL14

第四章设计制作过程16

4.1留言板制作16

4.1.1建立Access数据库16

4.1.2建立数据源16

4.1.3测试JSP和Access连接是否成功17

4.1.4编写留言板代码17

4.2留言板流程图19

4.3静态页面设计20

第五章结束语26

第六章参考文献27

摘要

个人音乐网站的设计开发

本网站设计的主要内容是通过Dreamwerver8网页设计软件来制作网页中的文字、图像、表格、表单、动画和视频等。

Dreamwerver8是一款专业的HTML编辑器，用于对Web站点、Web页和Web应用程序进行设计、编辑和开发。

通过JSP技术和数据库MicrosoftOfficeAccess2003这两种软件相结合可以实现留言板动态，浏览网页者可以在我的留言板里留言，管理员可以删除留言和回复留言。

计算机和计算机网络的飞速发展，人们对计算机网络的依赖是越来越大。

人们在网上聊天交友，在网上请教问题，查阅资料，还在网上玩游戏。

除此之外，人们还会在网上进行商务交易、下载信息，有着众多的使用者。

尤其是电子商务大大的减少了人们对周围环境的依赖，无论是哪里的网友，都可以浏览到世界各地的各类信息，非常的方便，由于以上的优势，各类网站如雨后春笋般的出现，这也就是我的毕业设计的实际意义。

本文首先介绍了当今网络开发语言发展现状，接着介绍了ASP相关知识，然后以《星空音乐网》为例，逐一介绍了建站的系统分析、系统设计和系统实现。

在系统分析中以数据字典和数据流图的形式确定了系统的基本框架，接着在此基础上设计出网站模块功能结构图，然后用E-R图说明了系统的库表结构，最后论文从网页上的风格、色彩、链接、功能、等属性分析了系统中典型的ASP网页文件。

在附录中则给出本系统库表结构的详细说明和本网站运行时的主要页面。

本网站主要实现了对Web数据库的数据录入，修改，删除，查询，相关数据的分析统计等功能。

第一章网站设计原则及目标

1.1设计原则

1.网页内容简单易读

我设计的网页规划合理。

这就意味着,规划文字与背景的搭配很重要。

不能使背景的颜色冲淡了文字的视觉效果,不用色彩对比强烈的色彩组合,因为让人看网页觉得很费劲。

一般来说,浅色背景配合深色文字最佳。

这个要求最好别把文字的字体设地过小,也不能过大。

文字过小看起来难受;文字过大,或者文字视觉效果变化频繁,让人看起来不舒服。

此外,文本内容应左对齐,而不是居中。

按照平时的阅读习惯，文本内容大都居左,标题一般居中,这符合读者地阅读习惯。

2.网页的导航清晰

我设计的所有超链接都清晰无误地标识出来,像图像按钮,都有清晰醒目的标识,让读者一目了然。

链接文本的颜色用默认的:

未访问的为蓝的，点击过的为紫的。

所以,我设计的文本链接文字或图标与页面的其他文字有所区分,导向功能十分清晰。

3.网页风格个性化

页面上所有的图像、文字，背景颜色、字体、标题等我都加入了自己的风格,整体看上去非常简洁又突出了作者的个性。

这样读者看起来顺畅。

4.页面内容要独一无二

我设计的网页内容不落俗套,重点突出“个性”两字,所以我在设计网站内容时结合了自身的实际情况。

网上的许多个人网站,内容杂乱,题材千篇一律,从头到尾找不出一丝个性。

所以,我在设计网页时,十分注重内容的选择。

选择内容要尽量做到"少"而"精"但必须突出"个性",只有充满个性的网站才能吸引更多的读者。

1.2设计目标

用一目了然的链接，让读者可以更好更快地浏览我的内容，设计列表菜单导航，可以从中选择相应的标题，导航简单清晰地向读者显示，在“音乐介绍”中，向读者诠释了音乐的本质。

在首页上列出的文字和内容，读者看完后如果有什么建议或意见，可以在我的首页里登录菜单中的“给我留言”链接中留下留言。

管理员输入密码进入留言板，就可以回复读者发表的留言，也可以删除留言。

读者只要点击首页的推拉门式菜单中的“E-mail”就可以发E-mail给我。

通过以上两种途径就可以实现读者和我的交流，简单方便。

利用Photoshop图像制作软件创造出自己网站的LOGO，处理图片等。

通过Dreamwerver8网页设计软件来制作网页中的文字、图像、表格、表单等。

通过JSP技术和数据库MicrosoftOfficeAccess2003这两种软件相结合可以实现动态留言板功能。

第2章系统概述

2.1系统配置需求

1.硬件需求

CPU：

PentiumIII2.0Ghz以上

内存：

512MB以上

硬盘剩余空间：

2GB以上

2.软件需求

操作系统：

Windows2000Server或WindowsXPProfessionalSP2

Web服务器：

Tomcat5.0以上

数据库：

SQLServer2000，或者MicrosoftOfficeAccess2003

2.2制作特点要求

此个人网站需达到以下软件要求和硬件要求：

1）页面清晰，用户使用方便；

2）系统安全、稳定，硬件需求较低；

3）各项功能完整，注册、登陆、数据库更新等；

4）制作成本低，风险小，效益高。

2.3网站的结构设计

网站的结构设计完全基于网站、内容和功能，后者是结构设计的决定性因素。

此外，页面风格、方便浏览等因素也对网站结构的设计有一定的影响。

目录结构是一个容易忽略的问题，目录结构的好坏对浏览者来说并没有太大的感觉，但是对于站点本身的维护，内容的更新、未来的扩充和移植有着重要的影响；

网站的逻辑链接结构是指页面之间相互的链接的拓扑结构，它建立在目录结构基础之上.

2.4制作方式

图片处理技术

使用AdobePhotoshop图像制作软件对图片进行加工处理，我使用的Photoshop版本是Photoshop8.0.1

制作个人网站的LOGO的步骤：

打开Photoshop，在电脑目录中打开如下JPG图片。

图2.2JPG图片

我要在上面添加几个字，制作个人网站的标志，使用Photoshop左边的工具栏

图2.3工具栏

里的“文字工具”即可在图片上添加文字及设置字体大小和颜色，再使用“移动”工具，将文字移动要自己想要的位子，完成后如下图所示。

图2.4图片添加文字

第3章系统环境的构建

3.1JSP运行环境的构建

本人开发的环境是“WindowsXPProfessionalSP2+Tomcat5.5.25。

JSP运行环境需要JDK的支持，需要安装两个软件：

JDK和Tomcat。

3.1.1配置Java运行环境

安装了JDK以后，就建立好了运行环境，这里安装的是JDK1.6.0_02。

后面的所有步骤均采用系统的默认值，安装完毕以后，Java的运行环境就在计算机上建立好了。

3.1.2配置JSP运行环境

安装完JDK以后，安装Web服务器Tomcat，这里用的版本是Tomcat5.5.25，安装向导的第二步是安装选项。

Service选项是将Tomcat安装成操作系统的一项服务，可以从“控制面板”中的“管理工具”中选择“服务”启动和停止该Web服务。

这里按照Normal选项的默认设置，不选择该服务。

下面一步是选择安装路径，按照系统默认的路径就可以。

接下来选择默认的服务端口8080，在Password框中输入密码，这里输入“system”。

下一步选择JDK的路径，本人选择安装的JDK的主目录“F:

\j2sdk1.4.2”。

按照默认的选项进入下一步，开始拷贝文件。

安装完毕后，在安装目录中选择“Startup”启动Web服务器。

稍等片刻，可以在任务栏看到Tomcat的服务图标。

该图标代表已经开始在8080端口提供Web服务，打开浏览器，在地址栏输入“http:

//localhost:

8080”,可以看见Tomcat的欢迎界面。

只要看到这个界面，就说明安装成功，并且JSP的运行环境就全部配置完毕。

需要注意的是：

在安装Tomcat时，如果系统中已经有其他的应用程序已经占有了8080端口，则在启动Tomcat时会失败，比如：

在安装Tomcat之前已经安装了Oracle数据服务器，它也提供Web服务，占用的也是8080端口。

可以通过修改Tomcat的服务端口来解决这一问题。

3.1.3配置Tomcat

本人Tomcat安装在F盘的ProgramFiles目录下，“F:

\ProgramFiles\Tomcat5.5.25”,其中bin目录存放系统的可执行文件，common目录和shared目录都有存放Tomcat运行的一些Java包和类库。

Temp目录存放Tomcat运行的一些临时文件。

有3个目录是需要经常访问的：

conf目录存放Tomcat服务的配置信息，比如服务端口、虚拟目录等；webapps目录存放JSP程序文件；worl目录存放JSP文件在运行时被编辑译成的二进制文件。

建立个人网站设计时所需要的文件夹：

在“F:

\ProgramFiles\ApacheSoftwareFoundation\Tomcat5.0\shiyinping”中建立“ROOT”和“素材”文件夹，在ROOT文件夹里分别建立data，doc，img，pic，swf，WEB-INF文件夹。

素材文件夹里存放是制作个人网站所需的.jpg和.gif图片文件，ROOT里存放的是.jsp文件，data里存放的是.mdb数据库文件，doc里存放的是.doc文本文件，img存放的是制作留言板页面所需的.jpg和.gif文件，pic存放的是制作个人网站所需的.jpg和.gif文件，swf存放的是.avi视频文件。

安装完Tomcat时，在地址栏输入“http:

//localhost:

8080”,自动打开了某一个文件，该文件是在“webapps”目录下“ROOT”目录中的“index.jsp”文件。

在实际的使用中，一般需要更改两个基本配置：

服务端口和网站的根路径。

修改这两个配置都在conf目录的server.xml文件中。

•修改服务端口

利用记事本或者其他的文本编辑器打开server.xml文件，将port=“8080”修改为port=“8090”

修改完毕后，保存该文件，然后重启Tomcat服务器，这样Tomcat就在8090端口提供服务了，通过“http:

//localhose:

8090”访问Tomcat

•修改网站的根路径

在server.xml中找到第215行，