个人音乐网站的设计与开发本科学位论文.doc

题 目 个人音乐网站的设计与开发系 别 信 息 电 子 系 专 业 软件技术 目 录第1章 开发目标及内容 31.1 设计原则1.2 设计目标第2章 系统概述 52.1 系统配置需求2.2 开发要求2.3 整体框架结构2.4 技术方案第3章 系统环境配置 63.1 JSP运行环境的配置3.2 Microsoft Office Access 2003的安装3.3 Macromedia Dreamweaver 8的安装3.4建立站点第4章 设计过程144.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 SP2Web服务器：Tomcat5.0以上数据库：SQLServer2000，或者Microsoft Office Access 20032.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 FilesApache Software FoundationTomcat 5.0shiyinping”中建立“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”访问Tomcat2. 修改网站的根路径在server.xml中找到第215行，找到根目录的配置信息，其中appbase设置了当前的网站目录对应服务器物理路径的地址修改前备份server.xml文件，将215行的webapps修改成某地址，我的目录是“wangchao”这时利用“http:/local:8090”访问的物理路径是“wangchao”，因此在“F:Program Files Tomcat 5.5.25wangchao”里建立ROOT目录，在ROOT目录下建立WEB-INF目录，重启Tomcat服务器，从浏览器查看该目录的内容。3.1.4 测试运行环境第一个测试程序是Hello World程序，用记事本输入三行，JSP区分大小写，每条语句后面有分号，将该程序放到F:Program Files Tomcat 5.5.25wangchaoROOT文件夹中。在浏览器中输入“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.25wangchaoROOT”文件夹下，所以设置如图所示。单击“下一步”按钮继续。图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 FilesTomcat 5.5.25Webappswangchao文件夹下。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.25Webappswangchao 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.25wangchao文件夹下。（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) dxi = 0; / set coordinate variablesxpi = Math.random()*(doc_width-30)+10;ypi = Math.random()*doc_height;amyi = 12+ Math.random()*20;amxi = 10+ Math.random()*40;stxi = 0.02 + Math.random()/10;styi = 0.7 + Math.random();flagi = (Math.random()>0.5)?1:0;if (ns4up) / set layersif (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>"); elseif (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 (ypi > doc_height-50) xpi = 10+ Math.random()*(doc_width-amxi-30);ypi = 0;flagi=(Math.random()<0.5)?1:0;stxi = 0.02 + Math.random()/10;styi = 0.7 + Math.random();doc_width = self.innerWidth;doc_height = self.innerHeight;if (flagi)dxi += stxi;elsedxi -= stxi;if (Math.abs(dxi) > Math.PI) ypi+=Math.abs(amyi*dxi);xpi+=amxi*dxi;dxi=0;flagi=!flagi;document.layers"dot"+i.top = ypi + amyi*(Math.abs(Math.sin(dxi)+dxi);document.layers"dot"+i.left = xpi + amxi*dxi;setTimeout("helpor_net()", speed);function www_helpor_net() for (i = 0; i < no; + i) if (ypi > doc_height-50) xpi = 10+ Math.random()*(doc_width-amxi-30);ypi = 0;stxi = 0.02 + Math.random()/10;styi = 0.7 + Math.random();flagi=(Math.random()<0.5)?1:0;doc_width = document.body.clientWidth;doc_height = document.body.clientHeight;if (flagi)dxi += stxi;elsedxi -= stxi;if (Math.abs(dxi) > Math.PI) ypi+=Math.abs(amyi*dxi);xpi+=amxi*dxi;dxi=0;flagi=!flagi;document.all"dot"+i.style.pixelTop = ypi + amyi*(Math.abs(Math.sin(dxi)+dxi);document.all"dot"+i.style.pixelLeft = xpi + amxi*dxi;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.72.顾正刚、毕海峰著. 网站规划与建设.机械工业出版社.2003.63.杨继萍、郝军启等编著.Access 2003数据库原理与应用.清华大学出版社.2004.14.肖金秀主编. JSP网络编程技术. 清华大学出版社.2003.55.王利福、张世琨、朱冰编著. 软件工程. 北京大学出版社.2002.36.方春明、马路编著. DreamweaverMX2004中文版. 中国水利水电出版社.2004.5致 谢这次网站设计中，遇到了许多技术问题，以本人现有的水平是无法解决的，通过指导老师的帮助，解决了困难，使我能够顺利的完成该网站设计。在此，我要特别感谢我的指导温老师，并真心地向她说声谢谢。老师，您辛苦了！25