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

1、个人音乐网站的设计开发浙江广播电视大学毕业设计 题 目 个人音乐网站的设计开发 姓 名 专 业 KZ10计算机网络 指导教师 毕业论文1摘要 3第一章 网站设计原则及目标 41.1 设计原则 41.网页内容简单易读 42.网页的导航清晰 43.网页风格个性化 44.页面内容要独一无二 41.2 设计目标 5第二章 系统概述 62.1 系统配置需求 62.2 制作特点要求 62.3 框架的结构构思 62.4 制作方式 7第三章 系统环境的构建 93.1 JSP运行环境的构建 93.1.1 配置Java运行环境 93.1.2 配置JSP运行环境 93.1.3 配置Tomcat 103.1.4 测试

2、运行环境 113.2 Microsoft Office Access 2003的安装 113.3 Macromedia Dreamweaver 8的安装 113.4 建立网络站点 123.4.1 定义站点 123.4.2 选择服务器技术 133.4.3 选择存放的本地文件夹 133.4.4 设置本机测试的URL 14第四章 设计制作过程 164.1 留言板制作 164.1.1 建立Access数据库 164.1.2 建立数据源 164.1.3 测试JSP和Access连接是否成功 174.1.4 编写留言板代码 174.2 留言板流程图 194.3 静态页面设计 20第五章 结束语 26第六章

3、参考文献 27 摘要个人音乐网站的设计开发本网站设计的主要内容是通过Dreamwerver 8网页设计软件来制作网页中的文字、图像、表格、表单、动画和视频等。Dreamwerver 8是一款专业的HTML编辑器，用于对Web站点、Web页和Web应用程序进行设计、编辑和开发。通过JSP技术和数据库Microsoft Office Access 2003这两种软件相结合可以实现留言板动态，浏览网页者可以在我的留言板里留言，管理员可以删除留言和回复留言。计算机和计算机网络的飞速发展，人们对计算机网络的依赖是越来越大。人们在网上聊天交友，在网上请教问题，查阅资料，还在网上玩游戏。除此之外，人们还会在

4、网上进行商务交易、下载信息，有着众多的使用者。尤其是电子商务大大的减少了人们对周围环境的依赖，无论是哪里的网友，都可以浏览到世界各地的各类信息，非常的方便，由于以上的优势，各类网站如雨后春笋般的出现，这也就是我的毕业设计的实际意义。本文首先介绍了当今网络开发语言发展现状，接着介绍了ASP相关知识，然后以星空音乐网为例，逐一介绍了建站的系统分析、系统设计和系统实现。在系统分析中以数据字典和数据流图的形式确定了系统的基本框架，接着在此基础上设计出网站模块功能结构图，然后用E-R图说明了系统的库表结构，最后论文从网页上的风格、色彩、链接、功能、等属性分析了系统中典型的ASP网页文件。在附录中则给出本

5、系统库表结构的详细说明和本网站运行时的主要页面。本网站主要实现了对Web数据库的数据录入，修改，删除，查询，相关数据的分析统计等功能。第一章 网站设计原则及目标1.1 设计原则1.网页内容简单易读我设计的网页规划合理。这就意味着,规划文字与背景的搭配很重要。不能使背景的颜色冲淡了文字的视觉效果,不用色彩对比强烈的色彩组合,因为让人看网页觉得很费劲。一般来说,浅色背景配合深色文字最佳。这个要求最好别把文字的字体设地过小,也不能过大。文字过小看起来难受;文字过大,或者文字视觉效果变化频繁,让人看起来不舒服。此外,文本内容应左对齐,而不是居中。按照平时的阅读习惯，文本内容大都居左,标题一般居中,这符

6、合读者地阅读习惯。2.网页的导航清晰我设计的所有超链接都清晰无误地标识出来,像图像按钮,都有清晰醒目的标识,让读者一目了然。链接文本的颜色用默认的:未访问的为蓝的，点击过的为紫的。所以,我设计的文本链接文字或图标与页面的其他文字有所区分,导向功能十分清晰。3.网页风格个性化页面上所有的图像、文字，背景颜色、字体、标题等我都加入了自己的风格,整体看上去非常简洁又突出了作者的个性。这样读者看起来顺畅。4.页面内容要独一无二我设计的网页内容不落俗套,重点突出“个性”两字,所以我在设计网站内容时结合了自身的实际情况。网上的许多个人网站,内容杂乱,题材千篇一律,从头到尾找不出一丝个性。所以,我在设计网页

7、时,十分注重内容的选择。选择内容要尽量做到少而精但必须突出个性,只有充满个性的网站才能吸引更多的读者。 1.2 设计目标用一目了然的链接，让读者可以更好更快地浏览我的内容，设计列表菜单导航，可以从中选择相应的标题，导航简单清晰地向读者显示，在 “音乐介绍”中，向读者诠释了音乐的本质。在首页上列出的文字和内容，读者看完后如果有什么建议或意见，可以在我的首页里登录菜单中的“给我留言”链接中留下留言。管理员输入密码进入留言板，就可以回复读者发表的留言，也可以删除留言。读者只要点击首页的推拉门式菜单中的“E-mail”就可以发E-mail给我。通过以上两种途径就可以实现读者和我的交流，简单方便。利用P

8、hotoshop图像制作软件创造出自己网站的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，或者Mi

9、crosoft Office Access 20032.2 制作特点要求此个人网站需达到以下软件要求和硬件要求：1) 页面清晰，用户使用方便；2) 系统安全、稳定，硬件需求较低；3) 各项功能完整，注册、登陆、数据库更新等；4) 制作成本低，风险小，效益高。2.3 网站的结构设计 网站的结构设计完全基于网站 、内容和功能，后者是结构设计的决定性因素。此外，页面风格、方便浏览等因素也对网站结构的设计有一定的影响。目录结构是一个容易忽略的问题，目录结构的好坏对浏览者来说并没有太大的感觉，但是对于站点本身的维护，内容的更新、未来的扩充和移植有着重要的影响；网站的逻辑链接结构是指页面之间相互的链接的拓

10、扑结构，它建立在目录结构基础之上.2.4 制作方式图片处理技术使用Adobe Photoshop图像制作软件对图片进行加工处理，我使用的Photoshop版本是Photoshop8.0.1制作个人网站的LOGO的步骤：打开Photoshop，在电脑目录中打开如下JPG图片。图2.2 JPG图片我要在上面添加几个字，制作个人网站的标志，使用Photoshop左边的工具栏图2.3 工具栏里的“文字工具”即可在图片上添加文字及设置字体大小和颜色，再使用“移动”工具，将文字移动要自己想要的位子，完成后如下图所示。图2.4 图片添加文字 第3章 系统环境的构建3.1 JSP运行环境的构建本人开发的环境是

11、“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安装成操作系统的一项服务，可以从“控制面板”中的“管理工具”中选择

12、“服务”启动和停止该Web服务。这里按照Normal选项的默认设置，不选择该服务。下面一步是选择安装路径，按照系统默认的路径就可以。接下来选择默认的服务端口8080，在Password框中输入密码，这里输入“system”。下一步选择JDK的路径，本人选择安装的JDK的主目录“F:j2sdk1.4.2”。按照默认的选项进入下一步，开始拷贝文件。安装完毕后，在安装目录中选择“Startup”启动Web服务器。稍等片刻，可以在任务栏看到Tomcat的服务图标。该图标代表已经开始在8080端口提供Web服务，打开浏览器，在地址栏输入“http:/localhost:8080”,可以看见Tomcat的

13、欢迎界面。只要看到这个界面，就说明安装成功，并且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目录都有存放Tomca

14、t运行的一些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文件夹。素材文件夹里存放是制作个人网站所需的.j

15、pg和.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行，