网页制作课程实践报告

1、精选优质文档-倾情为你奉上北京理工大学珠海学院计算机学院网页设计与网站建设课程实践报告题目： 音乐网 姓 名： 林俊贤 罗晓明 潘文杰 学 院： 计算机学院 专 业： 软件工程 班 级： 五班 学 号： 7 2 1 指导教师： 孙细斌 完成日期：2011年 12 月 20日任务书 2011 2012 学年第一学期学生姓名：林俊贤 罗晓明 潘文杰 专业班级： 软件五班 指导教师： 孙细斌 工作部门： 计算机学院 一、 课程实践题目音乐网二、课程实践内容（含技术指标）设计与实现音乐网站。实现如下栏目及功能：1.曲风 榜单：提供不同曲风，榜单的歌曲。2.导航：提供歌手以及其相关歌曲，可根据名字索引。

2、3.专辑：提供不同专辑的信息，以及相关信息的下载。4.LOGO，导航，页尾：运用Flash、Fireworks、Photoshop等工具进行设计。三、进度安排序号实践内容时间安排1了解实践课程要求，确定选题第14周2首页及各页面的布局设计与制作第15周3数据库及功能实现，网站测试第16周4提交实践报告，进行答辩第17周四、基本要求1明确网站的栏目和功能，并确定各组员的分工；2. 运用Flash、Fireworks、Photoshop等工具进行Logo和导航栏的设计与制作；3. 使用Dreamweaver进行各网页设计制作，学会页面的合理布局及各布局技术的使用；4. 进一步掌握和运用ASP技术进

3、行网站开发的能力；5. 数据库的设计及访问；6. 学会网页调试和测试的基本方法；7. 掌握书写课程实践文档的能力 (撰写课程实践报告)。 课程负责人签名： 年 月 日专心-专注-专业前言音乐可以让人消除工作紧张、减轻生活压力、避免各类慢性疾病等等，其实这些都是有医学根据的。在医学研究中发现，经常的接触音乐节奏、律动会对人体的脑波、心跳、肠胃蠕动、神经感应等等，产生某些作用，进而使身人身心健康。音乐无形的力量远超乎个人想象，所以聆听音乐、鉴赏音乐，是现代人极为普遍的生活调剂。 音乐到底有哪些神奇的功能呢？对健康有多少帮助呢？下列是一些资料报导： 1. 音乐可以让身体放轻松，好的音乐可以纾解压力，

4、避免因自律神经紧张失调而导致慢性疾病的产生。 2. 音乐可以敲开封闭的心灵，纾解忧郁苦闷的心情，甚至音乐还可以做到某些程度的心灵治疗。 3. 音乐可以刺激脑部，活化脑细胞，适当的音乐刺激对脑部的活动有很大的帮助，甚至达到防止老化的功效。 4. 音乐可以提升创造力、企划力以及刺激右脑，尤其是古典乐曲，对右脑的训练与发展是很有帮助的。 5. 音乐可以帮助入眠、提高免疫力、增加神经传导速率、增强记忆力与注意力，让人的身心都得到适度的发展、解放。 6. 音乐的旋律可以使婴儿呼吸平静、心跳减缓，让婴儿不再哭闹不安，也可以刺激婴儿的大脑思维能力，让他更聪明。目录第一章 需求分析1.1设计该网站的意义 随着

5、人民生活水平的不断提高，人民越来越学会了享受生活。音乐已成为人民生活中不可或缺的重要部分。我国著名音乐家洗星海就说过：“音乐是人生中最大的快乐，音乐是生活中的一股清泉，音乐是陶冶性情的熔炉。”音乐在生活中的作用是不可估量的。音乐可以调剂紧张.单调的生活，使人民的神经得到放松，有益于健康。音乐可以给人听觉以愉悦，净化人的灵魂使人的神经得到高度的享受。音乐是一种符号，声音符号，表达人的所思所想。它是社会行为的一种形式，通过音乐人们可以互相交流情感和生活体验。所以，音乐已成为人们生活中一个重要组成部分。1.2分析客户需求 虽然人们的生活水平在不断的提高，但是生活中仍有一部分人觉得有压力。那么，他们该

6、如何去减减压呢？音乐就是一个不错的选择。当你觉得烦恼时，不妨放下手头上的工作，静静的听一会音乐。如今大部分企业都配置有电脑，当企业的员工在工作一段时间后，感觉到身心疲惫时，许多人回选择打开网页去听一听歌。而且，现在的很多学生都喜欢听歌，他们都会经常到一些网站去淘歌。这就促使了一个又一个音乐网站的诞生。第二章总体设计2.1 整体结构的设计页面框架的设计：主页包括LOGO，导航，页尾，专辑区，曲风，榜单等；主页主要运用到了Dreamware软件的CSS+Div和层对其进行排版，而LOGO，导航，页尾的设计就运用到了Filework,Flash等工具。其他每个子页面的LOGO和导航还有页尾都是与主页

7、相同。结构图：登录页面主页注册页面登录失败页面主页歌手曲风榜单专辑今日推荐歌手歌曲各类曲风榜单歌曲各类专辑2.2 栏目设计说明 因为此网站是一个音乐网站，音乐是必须有的，但有音乐时怎样让用户更好的听到自己喜欢的音乐呢？所以栏目的设计就变得很重要了。首先，要有导航，让用户有一个首要想听的歌手是男的还是女的，什么国家的。所以导航就有华语男歌手、华语女歌手、华语组合、欧美男歌手、欧美女歌手。如果对歌手没什么要求的话，另外还有不同曲风、不同榜单的栏目可以选择。更或许用户现在很矛盾不知道听什么歌曲比较好时，这样，这里还有今天推荐的最新歌曲，还有推荐的流行专辑让用户在矛盾的同时也能找到舒适的曲目。音乐网站

8、主旨是为了让用户能放松心情，舒展压力，让用户听后感觉到舒适、幸福吧。栏目的主要有：logo、导航、专辑、曲风、榜单、今日推荐、页脚等组成。第三章详细设计与实现3.1曲风、榜单曲风和榜单还有今日推荐这三部分的做法是类似的，它的子页面都是用到了CSS+Divl来布局整个页面的，然后部分用到层来镶嵌内容。页面的LOGO和页尾与主页相同，以粉红色为背景。点击进去就能看到不同曲风，各种排行榜的歌曲。曲风代码：<div class="STYLE1" id="qufeng"> <p class="STYLE5">曲风<

9、/p> <p>. <a href="流行.asp">流行</a> <a href="钢琴.asp">钢琴</a> <a href="发烧音乐.asp">发烧音乐</a> <a href="经典老歌.asp">经典老歌</a> .| </p> <p>&nbsp; </p> <p>. <a href="古筝.asp">古

10、筝</a> <a href="钢琴.asp">乡村</a> <a href="钢琴.asp">古典音乐</a> <a href="钢琴.asp">佛教音乐</a> .|</p> <p>&nbsp;</p> <p> . <a href="钢琴.asp">爵士</a> <a href="钢琴.asp">二胡</a>

11、 <a href="钢琴.asp">胎教音乐</a> <a href="钢琴.asp">儿童歌曲</a> .| </p> <p>_</p></div>榜单代码：<div class="STYLE2" id="bangdan"> <p>&nbsp;</p> <p class="STYLE5">榜单 </p> <p>.<

12、a href="热门歌曲.asp">热门歌曲</a> <a href="最新歌曲.asp">最新歌曲</a> <a href="榜单经典老歌.asp">金典老歌</a> .|</p> <p>&nbsp;</p> <p>.<a href="经典老歌.asp">热门专辑</a> <a href="经典老歌.asp">最新专辑</a>

13、 <a href="经典老歌.asp">电视剧歌曲</a>.|</p> <p>&nbsp;</p> <p> .<a href="经典老歌.asp">热门歌手</a> <a href="经典老歌.asp">情歌对唱</a> <a href="经典老歌.asp">新媒体流行榜</a>|</p> <p>_ </p></div>

14、;3.2 LOGO，页尾，导航条 采用了Flash、Fireworks、Photoshop等软件对网页的Logo，页尾以及导航条进行设计以及修饰。采用Fireworks设计了一个动态LOGO和页尾。Logo、导航代码：<div id="Layer1"><img src="音乐网logo.gif" width="1035" height="440" /> <div id="Layer2"><img src="导航.jpg" width=

15、"1034" height="127" border="0" usemap="#Map" lowsrc="专辑1.asp" /><map name="Map" id="Map"><area shape="rect" coords="12,36,176,91" href="华语女歌手.asp" target="_parent" /><area

16、shape="rect" coords="175,32,182,37" href="#" /><area shape="rect" coords="225,65,405,114" href="华语男歌手.asp" /><area shape="rect" coords="451,41,580,91" href="华语男歌手.asp" /><area shape="rect

17、" coords="613,65,793,121" href="#" /><area shape="rect" coords="781,119,782,124" href="#" /><area shape="rect" coords="787,121,793,122" href="华语女歌手.asp" /><area shape="rect" coords="

18、830,31,1006,85" href="华语男歌手.asp" /></map></div></div>3.3专辑使用Dreamware运用CSS+Div对页面进行布局，其页面风格与主页相似，点击不同的专辑有对不同专辑的介绍，另外还提供了歌曲的下载。专辑代码：<div class="STYLE7" id="Layer4">推荐专辑 <div id="Layer8"><a href="专辑4.asp"><

19、;img src="4.jpg" width="198" height="160" border="0" /></a><div class="STYLE4" id="Layer14"><a href="专辑4.asp">郭易</a></div> <div id="Layer12"><span class="STYLE4"><

20、;a href="专辑2.asp">五月天</a></span></div> <div id="Layer9"><a href="专辑5.asp"><img src="5.jpg" width="198" height="160" border="0" /></a><div class="STYLE4" id="Layer15&qu

21、ot;><a href="专辑5.asp">任家萱</a></div> </div> </div><div class="STYLE4" id="Layer11"><a href="专辑1.asp">刘力扬</a></div> <div id="Layer13"><span class="STYLE4"><a href="专

22、辑3.asp">任贤齐</a></span></div></div>3.4数据库 数据库里有一个表用来储存用户信息的，在Dreamweaver里的checkregister页面中应用程序下的服务器行为用了“命令”来对数据库进行的链接，还有做了一个login页面、register页面进行登录与注册。会将注册的信息储存在数据库中。命令代码：<%set Command1 = Server.CreateObject("ADODB.Command")Command1.ActiveConnection = MM_lo

23、gin1_STRINGCommand1.CommandText = "INSERT INTO test (userid,password,address,sex,photo) VALUES ('" + Replace(Command1_euserid, "'", "''") + "','" + Replace(Command1_epassword, "'", "''") + "',

24、9;" + Replace(Command1_eaddress, "'", "''") + "','" + Replace(Command1_esex, "'", "''") + "','" + Replace(Command1_ephoto, "'", "''") + "') "Command1

25、.CommandType = 1Command1.CommandTimeout = 0Command1.Prepared = trueCommand1.Execute()%>登录用户代码：<form METHOD="POST" ACTION="<%=MM_LoginAction%>" id="form1" name="form1"> <table width="285" height="106" border="1"&g

26、t; <tr> <td width="82"><div align="center">账号</div></td> <td width="167"><label> <div align="center"> <input name="textid" type="text" class="test1" id="textid" /> &l

27、t;/div> </label></td> </tr> <tr> <td><div align="center">密码</div></td> <td><div align="center"> <input name="textpw" type="password" class="test1" id="textpw" /> <label

28、></label> </div></td> </tr> </table> <p>&nbsp;</p> <p> <input name="Submit" type="submit" class="text" value="登录" /> <a href="register.asp">注册</a> </p> </form>插入记录代码

29、：<form METHOD="POST" ACTION="<%=MM_LoginAction%>" id="form1" name="form1"> <table width="285" height="106" border="1"> <tr> <td width="82"><div align="center">账号</div>&

30、lt;/td> <td width="167"><label> <div align="center"> <input name="textid" type="text" class="test1" id="textid" /> </div> </label></td> </tr> <tr> <td><div align="center

31、">密码</div></td> <td><div align="center"> <input name="textpw" type="password" class="test1" id="textpw" /> <label></label> </div></td> </tr> </table> <p>&nbsp;</p> <p> <input name="Submit" type="submit" class="text" value="登录" /&g