个人音乐网站的设计与开发.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, 如果看得到表格中的数据，说明连接数据库成功。主要代码如下：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)% （2）管理员进入留言板index.jsp，再进入留言管理login.jsp，登录密码就可以对留言进行添加。图4.4 管理员功能4.2 留言板流程图1.管理员操作流程图图4.5管理员操作流程图4.3 静态页面设计1. 在个人网站首页index.jsp的状态栏里添加时间。制作方法：将以下代码加入到HTML的之间即可function see() window.setTimeout(see(),1000); today = new Date(); self.status = today.toString(); 如图所示：2.添加首页背景音乐添加代码即可，代码如下：3.让网页的背景图片永远居中将以下代码加入HEML的之间：4.动态漂浮特效!-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 0.5)?1:0;if (ns4up) / set layersif (i = 0) document.write(); else document.write(); elseif (ie4up) if (i = 0) document.write(); else document.write();function helpor_net() for (i = 0; i doc_height-50) xpi = 10+ Math.random()*(doc_width-amxi-30);ypi = 0;flagi=(Math.random() Math.PI) ypi+=Math.abs(amyi*dxi);xpi+=amxi*dxi;dxi=0;flagi=!flagi;document.layersdot+i.top = ypi + amyi*(Math.abs(Math.sin(dxi)+dxi);document.layersdot+i.left = xpi + amxi*dxi;setTimeout(helpor_net(), speed);function www_helpor_net() for (i = 0; i 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() Math.PI) ypi+=Math.abs(amyi*dxi);xpi+=amxi*dxi;dxi=0;flagi=!flagi;document.alldot+i.style.pixelTop = ypi + amyi*(Math.abs(Math.sin(dxi)+dxi);document.alldot+i.style.pixelLeft = xpi + amxi*dxi;setTimeout(www_helpor_net(), speed);if (ns4up) helpor_net(); else if (ie4up) www_helpor_net();/- 第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致 谢这次网站设计中，遇到了许多技术问题，以本人现有的水平是无法解决的，通过指导老师的帮助，解决了困难，使我能够顺利的完成该网站设计。在此，我要特别感谢我的指导温老师，并真心地向她说声谢谢。老师，您辛苦了！目 录第一章 总 论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第二节 建议5927