Web课程设计报告1221149刘成启.docx
《Web课程设计报告1221149刘成启.docx》由会员分享，可在线阅读，更多相关《Web课程设计报告1221149刘成启.docx（14页珍藏版）》请在冰豆网上搜索。
Web课程设计报告1221149刘成启
WEB课程设计报告
课程名称：
中国好声音网站
姓名：
刘成启
学号：
20101221149
班级：
计算机1008班
指导老师：
赵燕
中国好声音音乐网站
一、网站制作介绍
要说2012年的夏天什么最火，当然是非浙江卫视《中国好声音》莫属了，而对音乐非常喜欢的我在暑假里更是全程关注了好声音学员的震撼演出，回味无穷，百看不厌，由此在整个国内的各个行业引起的旋风，口碑利益双赢的同时，更是给我们这些观众以视觉听觉的盛宴，作为金池粉丝的我，正好借此机会只做了一个简单的网页。
对于我来说，设计的过程是在享受的学习过程中完成的，既是一次很好的锻炼，又让我重新温故了优美的好声音，第一次网页制作让我收获很多，尽管不能十全十美，但是做出了我心目中的个人认为的音乐网站，在html,css,框架，美工等方面的知识我都在这次课程设计中应用了，本着学习的态度而不是交作业的心态认真的完成这次任务。
虽然没有深入学习过美工方面的知识，但我在网站的页面排版和谐性方面还是费了一番功夫的。
整体上以图文结合的方式，四大导师与众学员都是找了一些卡通肖像做了代替连接，是网站整体看起来搞笑诙谐，注重了人机交互等方面的问题，使用户可以简单轻松地操作，享受音乐的快乐才是我所设计的主题。
网站的建设过程中我借鉴了一些别的专题网站的内容，比如一些图片和文章链接，比如四大导师及学院的简介，网站中的数十个页面链接都相互关联，自成一体。
网站中应用了课程设计要求的一些知识，但又根据实际情况以及主题需要没有全部加入，动态方面的知识运用得较少，在图层的学习上还要努力，有很多的知识还没有掌握。
本网站的功能主要是实现了对四大导师的分类和各自所带学员的分组情况，重头戏是学员成名歌曲的点播，鉴于时间、能力、网页页数等限制，不多也不少。
一页简单的表单调查可以把粉丝对于好声音的看法传到网站上，只要连接好数据库即可保存。
网站中主要运用了使用CSS样式表，行为、模板，表单、布局表格、图层。
2、网站结构：
四大导师.html
庾澄庆.html
刘欢.html
那英.html
杨坤.html
提交
四强成员及分组成员介绍
三、网站页面
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
~~
4、网站功能介绍:
1、首页相关代码
--
body{
background-image:
url（中国好声音jpg/131951993.jpg）;
margin-left:
100px;
}
.style1{
color:
#FF00FF;
font-weight:
bold;
font-size:
50px;
}
.style2{
font-size:
50px;
color:
#FF00FF;
}
.style3{color:
#FF00FF}
-->
--
functionMM_swapImgRestore（）{//v3.0
vari,x,a=document.MM_sr;for（i=0;a&&i}
functionMM_preloadImages（）{//v3.0
vard=document;if（d.images）{if（!
d.MM_p）d.MM_p=newArray（）;
vari,j=d.MM_p.length,a=MM_preloadImages.arguments;for（i=0;iif（a[i].indexOf（"#"）!
=0）{d.MM_p[j]=newImage;d.MM_p[j++].src=a[i];}}
}
functionMM_findObj（n,d）{//v4.01
varp,i,x;if（!
d）d=document;if（（p=n.indexOf（"?
"））>0&&parent.frames.length）{
d=parent.frames[n.substring（p+1）].document;n=n.substring（0,p）;}
if（!
（x=d[n]）&&d.all）x=d.all[n];for（i=0;!
x&&ifor（i=0;!
x&&d.layers&&iif（!
x&&d.getElementById）x=d.getElementById（n）;returnx;
}
functionMM_swapImage（）{//v3.0
vari,j=0,x,a=MM_swapImage.arguments;document.MM_sr=newArray;for（i=0;i<（a.length-2）;i+=3）
if（（x=MM_findObj（a[i]））!
=null）{document.MM_sr[j++]=x;if（!
x.oSrc）x.oSrc=x.src;x.src=a[i+2];}
}
//-->
ThevoiceofChina
粉丝报道
2、导师页相关代码
DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http:
//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
//www.w3.org/1999/xhtml">
无标题文档
--
body,td,th{
color:
#000099;
}
body{
background-image:
url（中国好声音jpg/四大导师.jpg）;
background-repeat:
repeat;
}
.STYLE1{
font-size:
50px;
font-weight:
bold;
color:
#FF00FF;
}
.STYLE2{color:
#0033FF}
.style5{color:
#FF00FF}
-->
--
functionMM_swapImgRestore（）{//v3.0
vari,x,a=document.MM_sr;for（i=0;a&&i}
functionMM_preloadImages（）{//v3.0
vard=document;if（d.images）{if（!
d.MM_p）d.MM_p=newArray（）;
vari,j=d.MM_p.length,a=MM_preloadImages.arguments;for（i=0;iif（a[i].indexOf（"#"）!
=0）{d.MM_p[j]=newImage;d.MM_p[j++].src=a[i];}}
}
functionMM_findObj（n,d）{//v4.01
varp,i,x;if（!
d）d=document;if（（p=n.indexOf（"?
"））>0&&parent.frames.length）{
d=parent.frames[n.substring（p+1）].document;n=n.substring（0,p）;}
if（!
（x=d[n]）&&d.all）x=d.all[n];for（i=0;!
x&&ifor（i=0;!
x&&d.layers&&iif（!
x&&d.getElementById）x=d.getElementById（n）;returnx;
}
functionMM_swapImage（）{//v3.0
vari,j=0,x,a=MM_swapImage.arguments;document.MM_sr=newArray;for（i=0;i<（a.length-2）;i+=3）
if（（x=MM_findObj（a[i]））!
=null）{document.MM_sr[j++]=x;if（!
x.oSrc）x.oSrc=x.src;x.src=a[i+2];}
}
//-->
四大导师
刘欢杨坤那英庾澄庆