新版网页设计报告课件

1、精选优质文档-倾情为你奉上课程设计报告2017-2018 学年度第 二 学期题目： 影视网站姓名：班级：系部： 计算机学院指导教师：日期： 2018 年 2 月 26 日目录一、 综述： . 3二、系统设计： . 3专心-专注-专业1.系统目标 . 32.系统功能结构 . 33.开发环境 . 4三、开发实现 . 41.导航栏 . 42.jQuery 滑动门效果 . 63. JavaSceipt 实现电影图片不间断滚动 . 74. 总体效果 . 8四、 总结： . 8五、 参考文献 . 9摘要JavaScript 是 Web 页面中的一种脚本编程语言，也是一种通用的、跨平台的、基于对象和事件驱动

2、并具有安全性的脚本语言。 它不需要进行编译， 而是直接嵌入在 HTML 页面中，把静态页面转变成支持用户交互并响应事件的动态页面。 本次网页设计采用 JS 和 CSS 来实现，使得网页样式多样、美观，用户有良好的体验。关键词 JavaScript、样式多样、动态页面一、综述：对于网站而言， 一个好的网页会给人留下深刻的印象， 那样才会提高网站的知名度才会增加点击率。并且，网站的内容越接近人群，接近生活，就越能惹人注意。如果通过网站管理系统工作， 就可以拓开以前传统的宣传思路， 用户可以通过上网就能达到找到所需要材料的目的，并且可以给管理员留言以反馈意见。 于此同时， 作为网站的开发者，与用户进

3、行沟通也是相当重要的。需求分析活动其实本来就是一个和客户交流， 正确引导客户能够将自己的实际需求用较为适当的技术语言进行表达 （或者由相关技术人员帮助表达） 以明确项目目的的过程。 这个过程中也同时包含了对要建立的网站基本功能和模块的确立和策划活动。在整个需求分析的过程中，将按照一定规范的编写需求分析的相关文档不但可以帮助成员将需求分析结果更加明确化， 也为以后开发过程中做到了现实文本形式的备忘， 并且有助于主管人员的日后的开发项目提供有益的借鉴和模范， 成为项目开发中积累的符合自身特点的经验财富。 通过市场调研活动， 清晰的分析相似网站的性能和运行情况。 可以帮助项目负责人更加清楚的构想出自

4、己开发的网站的大体架构和模样， 在总结同类网站优势和缺点的同时项目开发人员可以博采众长开发出更加优秀的网站。二、系统设计：1.系统目标结合实际情况及时对用户需求分析， 365 影视网应该具有以下特点：操作简单方便、界面简洁美观。能够全面展示影片分类及影片详细信息。浏览速度快，避免长时间打不开页面的情况发生。影片图片清楚、文字醒目。系统运行稳定、安全可靠。易维护，并提供二次开发支持。2.系统功能结构365 影视网的系统结构3.开发环境在开发 365 影视网时，该项目使用的软件开发环境：操作系统： Windows7 。PHP 运行环境： phpStudy。jQuery 版本： jquery-1.6

5、.1.min.js 。开发工具： Dreamweaver CS6。浏览器： IE 8.0 。三、开发实现1.导航栏视图具体代码<div id="link"><table cellapacing="0" cellpadding="0" width="100%" border="0"><tr><td><div class="i01w"><table cellspacing="0" cellpad

6、ding="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="

7、;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&quo

8、t;><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"/

9、></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&qu

10、ot;><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 hre

11、f="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"on

12、MouseOver="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

13、></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 影视网

14、 </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">&l

15、t;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&q

16、uot; 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

17、> 武侠片 </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"&g

18、t;<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&q

19、uot; 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> 惊悚片 <

20、;/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.ge

21、tElementById("a0").style.display="none"document.getElementById("a0color").style.color=""document.getElementById("a0bg").style.backgroundImage=""document.getElementById("a1").style.display="none"document.getElementById(&q

22、uot;a1color").style.color=""document.getElementById("a1bg").style.backgroundImage=""document.getElementById("a2").style.display="none"document.getElementById("a2color").style.color=""document.getElementById("a2bg").

23、style.backgroundImage=""document.getElementById("a3").style.display="none"document.getElementById("a3color").style.color=""document.getElementById("a3bg").style.backgroundImage=""document.getElementById("a4").style.displ

24、ay="none"document.getElementById("a4color").style.color=""document.getElementById("a4bg").style.backgroundImage=""document.getElementById(par).style.display=""document.getElementById(par2).style.color="#ffffff"document.getElementB

25、yId(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>va

26、r num= 1; var nameArr=new Array(" 终结者 5"," 飓风营救 "," 我是传奇 "," 一线生机 ","罗马假日"," 史密斯夫妇 "," 午夜邂逅 ");var dnumArr=new Array(" 施瓦辛格 "," 尼森"," 威尔","斯坦森 ","格里高利 ","布拉德 "," 埃文斯

27、 ");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=&quo

28、t;left" class="f_td"><a href="#">'+nameArri+'</td>');document.write('<td width="90" align="right" class="f_td">'+dnumArri+'</td></tr>');</script></table></div><div

29、 id="tab2" class="tab_content"><table align="center" width="300" border="0" cellpadding="0" cellspacing="0"><script>var num=1;var nameArr=new Array(" 机械师 "," 变形金刚 "," 暮光之城 "," 怦然心动

30、 "," 电话情缘 ","蜘蛛侠 ","雷神");var dnumArr=new Array(" 斯坦森 ","拉伯夫 ","克里斯汀 "," 卡罗尔 ","麦特卡尔菲 "," 加菲尔德 ","海姆斯沃斯 ");for(var i=0;i<nameArr.length;i+)document.write('<tr height="43">&#

31、39;);document.write('<td width="26" align="center" class="f_td">'+(num+)+'</<td>');document.write('<td width="75" align="left" class="f_td"><a href="#">'+nameArri+'</td>

32、');document.write('<td width="90" align="right" class="f_td">'+dnumArri+'</td></tr>');</script> </table></div>3. JavaSceipt 实现电影图片不间断滚动具体代码<div id="demo" class="top_box" style="overflow:

33、 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&quo

34、t; style="padding-right:10px"><a target="_blank"><imgsrc="images/01.jpg" width="191" height="200" border="0" /></a><div class="title"><a href="see/see6.html" target="_blank"> 速度

35、与激情 8</a></div><div class="content"> 速度中的激情对撞 </div></td><td width="191" height="200" style="padding-right:10px"><a target="_blank"><imgsrc="images/02.jpg" width="191" height="200&

36、quot; 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="

37、;padding-right:10px"><a target="_blank"><imgsrc="images/03.jpg" width="191" height="200" border="0" /></a><div class="title"><a href="see/see8.html" target="_blank"> 鬼吹灯之寻龙诀 </a&g

38、t;</div><div class="content"> 惊险刺激的盗墓冒险 </div></td><td width="191" height="200" style="padding-right:10px"><a target="_blank"><imgsrc="images/04.jpg" width="191" height="200" border="0" /></a><div class="title"><a href="see/see9.html" target="_blank"&