网页设计方案报告.doc

课程设计汇报

-第 二 学期

题目： 影视网站
姓名：
班级：
系部： 计算机学院
指导老师：

日期： 年 2 月 26 日

目录
一、 综述： 3
二、系统设计： 3
1.系统目标 3
2.系统功效结构 3
3.开发环境 4
三、开发实现 4
1.导航栏 4
2.jQuery滑动门效果 6
3. JavaSceipt实现电影图片不间断滚动 7
4. 总体效果 8
四、 总结： 8
五、 参考文件 9

[摘要]
JavaScript是Web页面中一个脚本编程语言，也是一个通用、跨平台、基于对象和事件驱动并含有安全性脚本语言。它不需要进行编译，而是直接嵌入在HTML页面中，把静态页面转变成支持用户交互并响应事件动态页面。此次网页设计采取JS和CSS来实现，使得网页样式多样、美观，用户有良好体验。
[关键词]
JavaScript、样式多样、动态页面
一、 综述：
对于网站而言，一个好网页会给人留下深刻印象，那样才会提升网站著名度才会增加点击率。而且，网站内容越靠近人群，靠近生活，就越能惹人注意。假如经过网站管理系统工作，就能够拓开以前传统宣传思绪，用户能够经过上网就能达成找到所需要材料目标，而且能够给管理员留言以反馈意见。于此同时，作为网站开发者，和用户进行沟通也是相当关键。
需求分析活动其实原来就是一个和用户交流，正确引导用户能够将自己实际需求用较为合适技术语言进行表示（或由相关技术人员帮助表示）以明确项目目标过程。这个过程中也同时包含了对要建立网站基础功效和模块确实立和策划活动。
在整个需求分析过程中，将根据一定规范编写需求分析相关文档不仅能够帮助 组员将需求分析结果愈加明确化，也为以后开发过程中做到了现实文本形式备忘，而且有利于主管人员以后开发项目提供有益借鉴和模范，成为项目开发中积累符合本身特点经验财富。经过市场调研活动，清楚分析相同网站性能和运行情况。能够帮助项目责任人愈加清楚构想出自己开发网站大致架构和模样，在总结同类网站优势和缺点同时项目开发人员能够博采众长开发出愈加优异网站。
二、系统设计：
1.系统目标
结合实际情况立即对用户需求分析，365影视网应该含有以下特点：
l 操作简单方便、界面简练美观。
l 能够全方面展示影片分类及影片具体信息。
l 浏览速度快，避免长时间打不开页面情况发生。
l 影片图片清楚、文字醒目。
l 系统运行稳定、安全可靠。
l 易维护，并提供二次开发支持。
2.系统功效结构
365影视网系统结构

3.开发环境
在开发365影视网时，该项目使用软件开发环境：
l 操作系统：Windows7。
l PHP运行环境：phpStudy1103。
l jQuery版本：jquery-1.6.1.min.js。
l 开发工具：Dreamweaver CS6。
l 浏览器：IE 8.0。
三、开发实现
1.导航栏
视图

具体代码
<div id="link">
<table cellapacing="0" cellpadding="0" width="100%" border="0">
<tr>
<td><div class="i01w">
<table cellspacing="0" cellpadding="0" width="100%" border="0">
<tr>
<td width="166" height="42" align="center" id="a0bg"><span id="a0color" onMouseOver="showadv('a0,'a0color','a0bg')" ><a href="1.html">
<font color="#FA4A05">首页</font></a></span></td>
<td width="1"><img src="images/1.gif" width="1" height="25"/></td>
<td id="a1bg" align="center" width="166"><span id="a1color"

onMouseOver="showadv('a1','a1color','a1bg')"><a href="2.html">爱情片</a></span></td>
<td width="1"><img src="images/1.gif" width="1" height="25"/></td>
<td id="a2bg" align="center" width="166"><span id="a2color"
onMouseOver="showadv('a2','a2color','a2bg')"><a href="3.html">动作片</a></span></td>
<td width="1"><img src="images/1.gif" width="1" height="25"/></td>
<td id="a3bg" align="center" width="166"><span id="a3color"
onMouseOver="showadv('a3','a3color','a3bg')"><a href="3333.html">科幻片</a></span></td>
<td width="1"><img src="images/1.gif" width="1" height="25"/></td>
<td id="a4bg" align="center" width="166"><span id="a4color"
onMouseOver="showadv('a4','a4color','a4bg')"><a href="4444.html">恐怖片</a></span></td>
<td width="1"><img src="images/1.gif" width="1" height="25"/></td>
</tr></table></div></td></tr>
<tr>
<td><table width="100%" height="41" cellpadding="0" cellspacing="0" id="a0" border="0">
<tr>
<td align="left" style="padding-left: 12px">欢迎来到365影视网</td></tr></table>
<table id="a1" style="display: none" height="41" cellspacing="0" cellpadding="0" width="100%" border="0">
<tr>
<td style="padding-left: 137px" align="left"><ul class="i02w">
<li><a href="2.html">爱情喜剧</a></li>
<li><a href="3.html">古典爱情</a></li>
<li>现代爱情</li></ul></td></tr></table>
<table id="a2" style="display: none" height="41" cellspacing="0" cellpadding="0" width="100%" border="0">
<tr>
<td style="padding-left: 357px" align="left"><ul class="i02w" >
<li><a>枪战片</a></li>
<li><a>武侠片</a></li>
<li><a>魔幻片</a></li>
</ul></td></tr></table>
<table id="a3" style="DISPLAY: none" height="41" cellspacing="0" cellpadding="0" width="100%" border="0">
<tr>
<td style="padding-left: 540px"><ul class="i02w">
<li><a>外星人</a></li>
<li><a>自然灾难</a></li>
<li><a>生物变异</a></li>
</ul></td></tr></table>
<table id="a4" style="display: none" height="41" cellspacing="0" cellpadding="0" width="100%" border="0">
<tr>
<td style="padding-left: 750px" align="center"><ul class="i02w">

<li><a>惊悚片</a></li>
<li><a>恐怖片</a></li>
<li><a>悬疑片</a></li>
</ul></td></tr></table> </td></tr></table></div>
导航栏效果实现
<script type="text/javascript">
function showadv(par,par2,par3){
document.getElementById("a0").style.display="none";
document.getElementById("a0color").style.color="";
document.getElementById("a0bg").style.backgroundImage="";
document.getElementById("a1").style.display="none";
document.getElementById("a1color").style.color="";
document.getElementById("a1bg").style.backgroundImage="";
document.getElementById("a2").style.display="none";
document.getElementById("a2color").style.color="";
document.getElementById("a2bg").style.backgroundImage="";
document.getElementById("a3").style.display="none";
document.getElementById("a3color").style.color="";
document.getElementById("a3bg").style.backgroundImage="";
document.getElementById("a4").style.display="none";
document.getElementById("a4color").style.color="";
document.getElementById("a4bg").style.backgroundImage="";
document.getElementById(par).style.display="";
document.getElementById(par2).style.color="#ffffff";
document.getElementById(par3).style.backgroundImage="url(images/2.gif)";
}
</script>
2.jQuery滑动门效果
<div id="tab1" class="tab_content">
<table align="center" width="300" border="0" cellpadding="0" cellspacing="0">
<script>
var num= 1; var nameArr=new Array("终止者5","飓风营救","我是传奇","一线生机","罗马假日","史密斯夫妇","午夜邂逅");
var dnumArr=new Array("施瓦辛格","尼森","威尔","斯坦森","格里高利","布拉德","埃文斯");
for(var i=0;i<nameArr.length;i++){
document.write('<tr height="43">');
document.write('<td width="26" align="center" class="f_td">'+(num++)+'</<td>');
document.write('<td width="75" align="left" class="f_td"><a href="#">'+nameArr[i]+'</td>');
document.write('<td width="90" align="right" class="f_td">'+dnumArr[i]+'</td></tr>');
}</script></table></div>
<div id="tab2" class="tab_content">
<table align="center" width="300" border="0" cellpadding="0" cellspacing="0">
<script>

var num=1;
var nameArr=new Array("机械师","变形金刚","暮光之城","怦然心动","电话情缘","蜘蛛侠","雷神");
var dnumArr=new Array("斯坦森","拉伯夫","克里斯汀","卡罗尔","麦特卡尔菲","加菲尔德","海姆斯沃斯");
for(var i=0;i<nameArr.length;i++){
document.write('<tr height="43">');
document.write('<td width="26" align="center" class="f_td">'+(num++)+'</<td>');
document.write('<td width="75" align="left" class="f_td"><a href="#">'+nameArr[i]+'</td>');
document.write('<td width="90" align="right" class="f_td">'+dnumArr[i]+'</td></tr>');
}</script> </table></div>
3. JavaSceipt实现电影图片不间断滚动

具体代码
<div id="demo" class="top_box" style="overflow: hidden; width: 1000px; height: 264px">
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td id="demo1"><table cellpadding="0" cellspacing="0">
<tr>
<td width="191" height="200" style="padding-right:10px"><a target="_blank"><img src="images/01.jpg" width="191" height="200" border="0" /></a>
<div class="title"><a href="see/see6.html" target="_blank">速度和激情8</a></div>
<div class="content">速度中激情对撞</div></td>
<td width="191" height="200" style="padding-right:10px"><a target="_blank"><img src="images/02.jpg" width="191" height="200" border="0" /></a>
<div class="title"><a href="see/see7.html" target="_blank">战狼</a></div>
<div class="content">忠贞爱国情怀</div></td>
<td width="191" height="200" style="padding-right:10px"><a target="_blank"><img src="images/03.jpg" width="191" height="200" border="0" /></a>
<div class="title"><a href="see/see8.html" target="_blank">鬼吹灯之寻龙诀</a></div>
<div class="content">惊险刺激盗墓冒险</div></td>
<td width="191" height="200" style="padding-right:10px"><a target="_blank"><img src="images/04.jpg" width="191" height="200" border="0" /></a>
<div class="title"><a href="see/see9.html" target="_blank">美国队长2</a></div>
<div class="content">共同迎战强大黑暗劲敌</div></td>
<td width="191" height="200" style="padding-right:10px"><a target="_blank"><img src="images/05.jpg" width="191" height="200" border="0" /></a>

<div class="title"><a href="see/see10.html" target="_blank">夏洛特烦恼</a></div>
<div class="content">搞笑感动穿越小说</div></td></tr></table></td>
<td id="demo2"></td></tr></table
</div>
4. 总体效果

四、 总结：
首先，对自己课设，我还认为有很多值得改善地方。其次在专业知识上有了全方面认识，深入增强了我发明能力，经过这一次课设，对平日知识有了更深了解。不仅锻炼了我实际动手能力，还培养了我做事耐心。同时也意识到以前在课堂上了解知识太狭窄，不能把眼光停留在仅学几门专业课上，坚持做好动手操作，方便能愈加好掌握所学全部知识。
五、 参考文件
[1]吝春妮。精品课程网站优化设计策略研究[J].中国信息技术教育，,（23）：110-112.
[2]伍双林。微型网站和微信公众平台相融合移动化学习设计[J].发明和创新（教育信息化），,（11）：42-45.
[3]高长军。《网站设计和制作》教学环境搭建技巧[J].中小学试验和装备，,26（06）：42-44.
[4]高长军。构建“网站设计和制作”教学环境策略[J].试验教学和仪器，,33（11）：41-42.
[5]陈浩容。基于微课比赛网站微课设计和开发觉实状况内容分析[J].教育信息技术，,（Z1）：150-153.
[6]王丽丽，陈雯嫣，戴天。《我网站我设计》微课程教学设计[J].中国信息技术教育，,（Z1）：22-24.
[7]华柏胜。以生为本，创设情境，形散而神不散--《我网站我设计》《让多莉回家》两篇微课程教学设计评析[J].中国信息技术教育，,（Z1）：27-28+69.