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

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

系 别 信 息 电 子 系
专 业 软件技术
目 录

第1章 开发目标及内容 ………………………………………………3
1.1 设计原则
1.2 设计目标
第2章 系统概述 ………………………………………………………5
2.1 系统配置需求
2.2 开发要求
2.3 整体框架结构
2.4 技术方案
第3章 系统环境配置 …………………………………………………6
3.1 JSP运行环境的配置
3.2 Microsoft Office Access 2003的安装
3.3 Macromedia Dreamweaver 8的安装
3.4建立站点
第4章 设计过程………………………………………………………14
4.1 留言板设计
4.2 留言板流程图
4.3 静态页面设计
第5章 设计心得………………………………………………………24
参考文献 ………………………………………………………………25
附录或相关资料
致谢

个人音乐网站的设计与开发

【摘要】本网站设计的主要内容是通过Dreamwerver 8网页设计软件来制作网页中的文字、图像、表格、表单、动画和视频等。Dreamwerver 8是一款专业的HTML编辑器，用于对Web站点、Web页和Web应用程序进行设计、编辑和开发。通过JSP技术和数据库Microsoft Office Access 2003这两种软件相结合可以实现留言板动态，浏览网页者可以在我的留言板里留言，管理员可以删除留言和回复留言。
【关键词】Dreamweaver；Access；JSP。

第1章 开发目标及内容
1.1 设计原则
1.网页内容简单易读
我设计的网页规划合理。这就意味着,规划文字与背景的搭配很重要。不能使背景的颜色冲淡了文字的视觉效果,不用色彩对比强烈的色彩组合,因为让人看网页觉得很费劲。一般来说,浅色背景配合深色文字最佳。这个要求最好别把文字的字体设地过小,也不能过大。文字过小看起来难受;文字过大,或者文字视觉效果变化频繁,让人看起来不舒服。此外,文本内容应左对齐,而不是居中。按照平时的阅读习惯，文本内容大都居左,标题一般居中,这符合读者地阅读习惯。

2.网页的导航清晰
我设计的所有超链接都清晰无误地标识出来,像图像按钮,都有清晰醒目的标识,让读者一目了然。链接文本的颜色用默认的:未访问的为蓝的，点击过的为紫的。所以,我设计的文本链接文字或图标与页面的其他文字有所区分,导向功能十分清晰。

3.网页风格很个性化
页面上所有的图像、文字，背景颜色、字体、标题等我都加入了自己的风格,整体看上去非常简洁又突出了作者的个性。这样读者看起来顺畅,会对我的网页留下一个"专业"的印象。

4.页面容量不应太大
调查表明,如果一个网站的页面在10秒之内显示不出来,用户会很快失去对该网站的兴趣。如果用户不能够迅速地浏览我的网站,那么这个网站的设计就是不成功的。因此我在设计之前计算好了页面容量的分配及大小。

5.页面内容要独一无二
我设计的网页内容不落俗套,重点突出“个性”两字,所以我在设计网站内容时结合了自身的实际情况。网上的许多个人网站,内容杂乱,题材千篇一律,从头到尾找不出一丝个性。所以,我在设计网页时,十分注重内容的选择。选择内容要尽量做到"少"而"精"但必须突出"个性",只有充满个性的网站才能吸引更多的读者。
1.2 设计目标
用一目了然的链接，让读者可以更好更快地浏览我的内容，设计列表菜单导航，可以从中选择相应的标题，导航简单清晰地向读者显示，在 “音乐介绍”中，向读者诠释了音乐的本质。
在首页上列出的文字和内容，读者看完后如果有什么建议或意见，可以在我的首页里登录菜单中的“给我留言”链接中留下留言，读者不用注册和登录，只要输入昵称和留言即可发表留言。管理员输入密码进入留言板，就可以回复读者发表的留言，也可以删除留言。读者只要点击首页的推拉门式菜单中的“E-mail”就可以发E-mail给我。通过以上两种途径就可以实现读者和我的交流，简单方便。
利用Photoshop图像制作软件创造出自己网站的LOGO，处理图片等。通过Dreamwerver 8网页设计软件来制作网页中的文字、图像、表格、表单等。通过JSP技术和数据库Microsoft Office Access 2003这两种软件相结合可以实现动态留言板功能。
第2章 系统概述
2.1 系统配置需求
1.硬件需求
CPU：PentiumIII 2.0Ghz以上
内存：512MB以上
硬盘剩余空间：2GB以上
2.软件需求
操作系统：Windows 2000 Server或Windows XP Professional SP2
Web服务器：Tomcat5.0以上
数据库：SQLServer2000，或者Microsoft Office Access 2003
2.2 开发要求
此个人网站需达到以下软件要求和硬件要求：
1) 页面清晰，用户使用方便；
2) 系统安全、稳定，硬件需求较低；
3) 各项功能完整，注册、登陆、数据库更新等；
4) 开发成本低，风险小，效益高。
2.3 整体框架结构
网页标题
|
导航-留言板登录
|
内容-返回首页
|
返回首页

2.4 技术方案
图片处理技术方案
使用Adobe Photoshop图像制作软件对图片进行加工处理，我使用的Photoshop版本是Photoshop8.0.1
制作个人网站的LOGO的步骤：
打开Photoshop，在电脑目录中打开如下JPG图片。

图2.2 JPG图片

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

图2.3 工具栏

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

图2.4 图片添加文字
第3章 系统环境的构建
3.1 JSP运行环境的配置
本人开发的环境是“Windows XP Professional SP2+Tomcat 5.5.25。JSP运行环境需要JDK的支持，需要安装两个软件：JDK和Tomcat。
3.1.1 配置Java运行环境
安装了JDK以后，就建立好了运行环境，这里安装的是JDK1.6.0_02。后面的所有步骤均采用系统的默认值，安装完毕以后，Java的运行环境就在计算机上建立好了。
3.1.2 配置JSP运行环境
安装完JDK以后，安装Web服务器Tomcat，这里用的版本是Tomcat 5.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盘的Program Files目录下，“F:\Program Files\ Tomcat 5.5.25”,其中bin目录存放系统的可执行文件，common目录和shared目录都有存放Tomcat运行的一些Java包和类库。Temp目录存放Tomcat运行的一些临时文件。有3个目录是需要经常访问的：conf目录存放Tomcat服务的配置信息，比如服务端口、虚拟目录等；webapps目录存放JSP程序文件；worl目录存放JSP文件在运行时被编辑译成的二进制文件。
建立个人网站设计时所需要的文件夹：在“F:\Program Files\Apache Software Foundation\Tomcat 5.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文件中。
1. 修改服务端口
利用记事本或者其他的文本编辑器打开server.xml文件，将port=“8080”修改为port=“8090”

修改完毕后，保存该文件，然后重启Tomcat服务器，这样Tomcat就在8090端口提供服务了，通过“http://localhose:8090”访问Tomcat
2. 修改网站的根路径
在server.xml中找到第215行，找到根目录的配置信息，其中appbase设置了当前的网站目录对应服务器物理路径的地址

修改前备份server.xml文件，将215行的webapps修改成某地址，我的目录是“wangchao”

这时利用“http://local:8090”访问的物理路径是“wangchao”，因此在“F:\Program Files\ Tomcat 5.5.25\wangchao”里建立ROOT目录，在ROOT目录下建立WEB-INF目录，重启Tomcat服务器，从浏览器查看该目录的内容。
3.1.4 测试运行环境
第一个测试程序是Hello World程序，用记事本输入三行，JSP区分大小写，每条语句后面有分号，将该程序放到F:\Program Files\ Tomcat 5.5.25\wangchao\ROOT文件夹中。
在浏览器中输入“http://local:8090/ceshi1.jsp”，显示结果如图，说明JSP环境运行成功。

图3.1 测试JSP运行环境
3.2 Microsoft Office Access 2003的安装
本人制作个人网站时留言板使用的数据库软件是Microsoft Office 2003版本，安装步骤按照提示即可完成。
3.3 Macromedia Dreamweaver 8的安装
本人制作个人网站时制作网页使用的软件是Macromedia Dreamweaver 8，安装步骤按照提示即可完成。
3.4 建立站点
完成以上3个软件的安装与配置，我们就可以建立站点了。
3.4.1 定义站点
启动Dreamwerver 8，执行“站点”里的“管理站点”命令，打开“管理站点”对话框。单击“新建”按钮，选择“站点”项，打开“站点定义”对话框，这里给站点起名为“tianlaiyinyue”。单击“下一步”按钮继续。

图3.2 建立站点

3.4.2 选择服务器技术
在弹出的窗口中进行服务器脚本技术的有关设置，在下拉列表中选择“JSP”项，完成后单击“下一步”按钮继续。

图3.3 站点定义
3.4.3 选择存放的本地文件夹
接着设置站点文件夹，因为现在是在本地测试，而且站点在“F:\Program Files \Tomcat 5.5.25\wangchao\ROOT\”文件夹下，所以设置如图所示。单击“下一步”按钮继续。

图3.4 选择文件夹
3.4.4 设置本机测试的URL
现在设置测试的URL，由于是在本机测试，因此设置本机测试的根目录如图所示。
单击“下一步”按钮继续进行设置。由于是在本机测试，并不需要远程服务器参与，所以选择“否”项。

图3.5 设置本机测试的URL

单击“下一步”按钮继续。窗口显示了刚才所填写的信息，目的是让我们确认一下。如果发现有错，可以单击“上一步”按钮返回修改设置，确认无误后就可以单击“完成”按钮。这时，站点就定义完成了，现在可以在Dreamweaver 8中进行网页的设计了。
第4章 设计过程
4.1 留言板设计
4.1.1 建立Access数据库
新建数据库取名为users.mdb。新建表1（命名为message）表2（命名为users）如图4.1所示

图4.1 表结构

字段包括id（数字，该字段设为主键）、title（文本）、content（文本）、dt（日期/时间）、username（文本）、password（数字），其中content用来存放留言内容。
建立好数据库后将users.mdb存放到C:\Program Files\Tomcat 5.5.25\Webapps\wangchao文件夹下。
4.1.2 建立数据源
打开“控制面板”→“管理工具”→“数据源 (ODBC)”，选择“系统DNS”选项卡，单击添加，选择“Dirver do Microsoft Access（*.mdb）”单击完成，数据源命名为：login，单击选择按钮，选择新建数据库位置后点确定。如图所示

图4.2 配置ODBC数据源

4.1.3 测试JSP和Access连接是否成功
编写代码ceshi2.jsp, 如果看得到表格中的数据，说明连接数据库成功。主要代码如下：
<%
String url="jdbc:odbc:driver={Microsoft Access Driver (*.mdb)};DBQ=C:\\Program Files \\Tomcat 5.5.25\\Webapps\\wangchao\\ users.mdb";
Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");
Connection con=DriverManager.getConnection(url);
%>
4.1.4 编写留言板代码
本留言板是由8个JSP页面组成，分别是显示留言列表页面（index.jsp即留言板首页）、显示留言页面（list.jsp）、留言页面（lvmsg.jsp）、处理留言页面（addmsg.jsp）、返回留言页面（title.jsp）、登录页面（login.jsp）、处理登录页面（chklogin.jsp）、单条删除处理页面（drop.jsp）。
将以上JSP文件存放到Tomcat 5.5.25\wangchao文件夹下。
（1）用户发表留言程序流程图：
用户进入留言板页面index.jsp就直接可以在里面留言，无须注册。

图4.3 发布留言流程

部分代码：
if(showmas.equals("n")){%>
<a href="send.jsp"><img src="img/send1.jpg" width="77" height="21" border="0" onMouseOut="this.src='img/send1.jpg'" onMouseOver="this.src='img/send2.jpg'"></a> <% } %>
<a href="log.jsp"><img src="img/index01.jpg" width="77" height="21" border="0" onMouseOut="this.src='img/index01.jpg'" onMouseOver="this.src='img/index02.jpg'"></a><% }%>
（2）管理员进入留言板index.jsp，再进入留言管理login.jsp，登录密码就可以对留言进行添加。

图4.4 管理员功能

4.2 留言板流程图
1.管理员操作流程图

图4.5管理员操作流程图

4.3 静态页面设计
1. 在个人网站首页index.jsp的状态栏里添加时间。
制作方法：
将以下代码加入到HTML的<body></body>之间即可
<script>
function see(){
window.setTimeout("see()",1000);
today = new Date();
self.status = today.toString();
}
</script>
<body onload=see()>如图所示：

2.添加首页背景音乐
添加代码即可，代码如下：
<embed src="123.mp3" autostart="true" loop="true" hidden="true"></embed>
3.让网页的背景图片永远居中
将以下代码加入HEML的<body></body>之间：
<STYLE TYPE="text/css">
<!--
BODY {background-image: URL(图片名称.gif);
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;}
-->
</STYLE>
4.动态漂浮特效
<SCRIPT LANGUAGE="JavaScript1.2">
<!--
var no = 12;
var speed = 10;
var heart = "
var flag;
var ns4up = (document.layers) ? 1 : 0;
var ie4up = (document.all) ? 1 : 0;

var dx, xp, yp;
var am, stx, sty;
var i, doc_width = 800, doc_height = 600;
if (ns4up) {
doc_width = self.innerWidth;
doc_height = self.innerHeight;
} else if (ie4up) {
doc_width = document.body.clientWidth;
doc_height = document.body.clientHeight;
}
dx = new Array();
xp = new Array();
yp = new Array();
amx = new Array();
amy = new Array();
stx = new Array();
sty = new Array();
flag = new Array();
for (i = 0; i < no; ++ i) {
dx[i] = 0; // set coordinate variables
xp[i] = Math.random()*(doc_width-30)+10;
yp[i] = Math.random()*doc_height;
amy[i] = 12+ Math.random()*20;
amx[i] = 10+ Math.random()*40;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
flag[i] = (Math.random()>0.5)?1:0;
if (ns4up) { // set layers
if (i == 0) {
document.write("<layer name=\"dot"+ i +"\" left=\"15\" ");
document.write("top=\"15\" visibility=\"show\"><img src=\"");
document.write(heart+ "\" border=\"0\"></layer>");
} else {
document.write("<layer name=\"dot"+ i +"\" left=\"15\" ");
document.write("top=\"15\" visibility=\"show\"><img src=\"");
document.write(heart+ "\" border=\"0\"></layer>");
}
} else
if (ie4up) {
if (i == 0) {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: ");
document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: ");
document.write("visible; TOP: 15px; LEFT: 15px;\"><img src=\"");
document.write(heart+ "\" border=\"0\"></div>");
} else {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: ");
document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: ");
document.write("visible; TOP: 15px; LEFT: 15px;\"><img src=\"");
document.write(heart+ "\" border=\"0\"></div>");
}
}
}

function helpor_net() {
for (i = 0; i < no; ++ i) {
if (yp[i] > doc_height-50) {
xp[i] = 10+ Math.random()*(doc_width-amx[i]-30);
yp[i] = 0;
flag[i]=(Math.random()<0.5)?1:0;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
doc_width = self.innerWidth;
doc_height = self.innerHeight;
}
if (flag[i])
dx[i] += stx[i];
else
dx[i] -= stx[i];
if (Math.abs(dx[i]) > Math.PI) {
yp[i]+=Math.abs(amy[i]*dx[i]);
xp[i]+=amx[i]*dx[i];
dx[i]=0;
flag[i]=!flag[i];
}
document.layers["dot"+i].top = yp[i] + amy[i]*(Math.abs(Math.sin(dx[i])+dx[i]));
document.layers["dot"+i].left = xp[i] + amx[i]*dx[i];

}
setTimeout("helpor_net()", speed);
}

function www_helpor_net() {
for (i = 0; i < no; ++ i) {
if (yp[i] > doc_height-50) {
xp[i] = 10+ Math.random()*(doc_width-amx[i]-30);
yp[i] = 0;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
flag[i]=(Math.random()<0.5)?1:0;
doc_width = document.body.clientWidth;
doc_height = document.body.clientHeight;
}
if (flag[i])
dx[i] += stx[i];
else
dx[i] -= stx[i];
if (Math.abs(dx[i]) > Math.PI) {
yp[i]+=Math.abs(amy[i]*dx[i]);
xp[i]+=amx[i]*dx[i];
dx[i]=0;
flag[i]=!flag[i];
}

document.all["dot"+i].style.pixelTop = yp[i] + amy[i]*(Math.abs(Math.sin(dx[i])+dx[i]));
document.all["dot"+i].style.pixelLeft = xp[i] + amx[i]*dx[i];
}
setTimeout("www_helpor_net()", speed);
}

if (ns4up) {
helpor_net();
} else if (ie4up) {
www_helpor_net();
}
//-->
</script>

第5章 设计心得
历经一个多月，在指导老师的帮助和自己的努力下，我排除了种种困难完成了此次个人音乐网站的设计。过程是艰辛的，但在完成毕业设计的那一刻，回想起这些天的辛苦，那都是值得的，现在最要感谢的是我的毕业设计指导老师温老师，在她细心的指导下我的个人音乐网站设计及毕业论文才得以完善。
在设计的过程中，我借鉴了JSP应用教程和Dreamwerver 8中的参考设计出了个人音乐网站的页面和留言板功能，其中页面的设计花了大量时间，因为要设计出简洁而又不失个性的页面需要构思和创意，因此在收集图片素材上选择了一些图像大小比较适中的图片以及GIF图片，设计遇到问题时通过上网查资料解决，如还是无法解决再通过老师的帮助解决。这次的导航我设计的是网站地图式的样式，只要进入地图导航页面，各页面就会清晰的展现出来。网页内容上我挑选的都是比较经典的关于音乐的内容，因此网站的内容上还是比较好的，访客可以浏览我的内容后进入留言板留言，我输入密码成为管理员，这样就让我实时了解房客的意见与建议，留言板的动态显示也宣告成功。图像处理方面，我使用了Photoshop软件，在我使用的图片上添加文字，制作出了个人网站的LOGO和按钮链接。这样就体现出了自己网站的风格，而不是照搬照抄。
毕业设计完成了，也就意味着我即将走出校园，去面对社会，我相信任何困难也阻挡不了我，因为大学的生活使我变得独立和自信，大学里学到的知识让我很受用，我将会成为一个对社会有用的人。
参考文献
1李咏梅、余元辉编著. JSP应用教程. 机械工业出版社.2003.7
2.顾正刚、毕海峰著. 网站规划与建设.机械工业出版社.2003.6
3.杨继萍、郝军启等编著.Access 2003数据库原理与应用.清华大学出版社.2004.1
4.肖金秀主编. JSP网络编程技术. 清华大学出版社.2003.5
5.王利福、张世琨、朱冰编著. 软件工程. 北京大学出版社.2002.3
6.方春明、马路编著. DreamweaverMX2004中文版. 中国水利水电出版社.2004.5

致 谢
这次网站设计中，遇到了许多技术问题，以本人现有的水平是无法解决的，通过指导老师的帮助，解决了困难，使我能够顺利的完成该网站设计。在此，我要特别感谢我的指导温老师，并真心地向她说声谢谢。老师，您辛苦了！目 录
第一章 总 论 1
第一节 项目背景 1
第二节 项目概况 2
第三节 可研报告编制依据及研究范围 4
第二章 项目建设的必要性 6
第三章 外部和内部环境分析 8
第一节 外部环境分析 8
第二节 xx镇社会经济环境分析 11
第三节 xx镇发展的机遇与挑战分析 14
第四节 xx镇发展的优势与劣势分析 16
第五节 项目风险分析 18
第四章 建设条件 20
第一节 项目选址 20
第二节 场址条件 20
第五章 发展战略和总体规划 22
第一节 发展战略目标 22
第二节 战略实施措施 22
第三节 规划原则 23
第四节 总体规划 24
第六章 基础设施建设内容 30
第七章 环境保护 32
第一节 项目场址现状 32
第二节 项目建设与运营对环境的影响 32
第三节 环境保护措施 33
第四节 环境评价结论 36
第八章 组织机构和项目实施进度 37
第一节 组织机构 37
第二节 人力资源配置 38
第三节 项目实施进度 39
第九章 投资估算及资金筹措 41
第一节 投资估算 41
第二节 投资使用计划与资金筹措 45
第十章 财务评价 47
第一节 财务评价基础数据与参数选取 47
第二节 经营收入估算 47
第三节 成本费用估算 50
第四节 财务评价 51
第五节 财务评价结论 55
第十一章 社会评价 56
第一节 项目对社会的影响分析 56
第二节 项目与所在地互适性分析 57
第三节 社会评价结论 58
第十二章 结论与建议 59
第一节 结论 59
第二节 建议 59

27