网页设计报告

课程设计报告2017-2018学年度第二学期题目：影视网站姓名：班级：系部：计算机学院指导教师：日期：2018年2月26日目录一、综述：3二、系统设计：31.系统目标32.系统功能结构33.开发环境4三、开发实现41.导航栏42.jQuery滑动门效果63.JavaSceipt实现电影图片不间断滚动74.总体效果8四、 总结 初级经济法重点总结下载党员个人总结TXt高中句型全总结.doc高中句型全总结.doc理论力学知识点总结pdf ：8五、参考文献9[摘要]JavaScript是Web页面中的一种脚本编程语言，也是一种通用的、跨平台的、基于对象和事件驱动并具有安全性的脚本语言。它不需要进行编译，而是直接嵌入在HTML页面中，把静态页面转变成支持用户交互并响应事件的动态页面。本次网页设计采用JS和CSS来实现，使得网页样式多样、美观，用户有良好的体验。[关键词]JavaScript、样式多样、动态页面1、综述：对于网站而言，一个好的网页会给人留下深刻的印象，那样才会提高网站的知名度才会增加点击率。并且，网站的内容越接近人群，接近生活，就越能惹人注意。如果通过网站管理系统工作，就可以拓开以前传统的宣传思路，用户可以通过上网就能达到找到所需要材料的目的，并且可以给管理员留言以反馈意见。于此同时，作为网站的开发者，与用户进行沟通也是相当重要的。需求分析活动其实本来就是一个和客户交流，正确引导客户能够将自己的实际需求用较为适当的技术语言进行表达（或者由相关技术人员帮助表达）以明确项目目的的过程。这个过程中也同时包含了对要建立的网站基本功能和模块的确立和策划活动。在整个需求分析的过程中，将按照一定规范的编写需求分析的相关文档不但可以帮助 成员将需求分析结果更加明确化，也为以后开发过程中做到了现实文本形式的备忘，并且有助于主管人员的日后的开发项目提供有益的借鉴和模范，成为项目开发中积累的符合自身特点的经验财富。通过市场调研活动，清晰的分析相似网站的性能和运行情况。可以帮助项目负责人更加清楚的构想出自己开发的网站的大体架构和模样，在总结同类网站优势和缺点的同时项目开发人员可以博采众长开发出更加优秀的网站。二、系统设计：1.系统目标结合实际情况及时对用户需求分析，365影视网应该具有以下特点：·操作简单方便、界面简洁美观。·能够全面展示影片分类及影片详细信息。·浏览速度快，避免长时间打不开页面的情况发生。·影片图片清楚、文字醒目。·系统运行稳定、安全可靠。·易维护，并提供二次开发支持。2.系统功能结构365影视网的系统结构3.开发环境在开发365影视网时，该项目使用的软件开发环境：·操作系统：Windows7。·PHP运行环境：phpStudy20161103。·jQuery版本：jquery-1.6.1.min.js。·开发工具：DreamweaverCS6。·浏览器：IE8.0。三、开发实现1.导航栏视图具体代码<divid="link"><tablecellapacing="0"cellpadding="0"width="100%"border="0"><tr><td><divclass="i01w"><tablecellspacing="0"cellpadding="0"width="100%"border="0"><tr><tdwidth="166"height="42"align="center"id="a0bg"><spanid="a0color"onMouseOver="showadv('a0,'a0color','a0bg')"><ahref="1.html"><fontcolor="#FA4A05">首页</font></a></span></td><tdwidth="1"><imgsrc="images/1.gif"width="1"height="25"/></td><tdid="a1bg"align="center"width="166"><spanid="a1color"onMouseOver="showadv('a1','a1color','a1bg')"><ahref="2.html">爱情片</a></span></td><tdwidth="1"><imgsrc="images/1.gif"width="1"height="25"/></td><tdid="a2bg"align="center"width="166"><spanid="a2color"onMouseOver="showadv('a2','a2color','a2bg')"><ahref="3.html">动作片</a></span></td><tdwidth="1"><imgsrc="images/1.gif"width="1"height="25"/></td><tdid="a3bg"align="center"width="166"><spanid="a3color"onMouseOver="showadv('a3','a3color','a3bg')"><ahref="3333.html">科幻片</a></span></td><tdwidth="1"><imgsrc="images/1.gif"width="1"height="25"/></td><tdid="a4bg"align="center"width="166"><spanid="a4color"onMouseOver="showadv('a4','a4color','a4bg')"><ahref="4444.html">恐怖片</a></span></td><tdwidth="1"><imgsrc="images/1.gif"width="1"height="25"/></td></tr></table></div></td></tr><tr><td><tablewidth="100%"height="41"cellpadding="0"cellspacing="0"id="a0"border="0"><tr><tdalign="left"style="padding-left:12px">欢迎来到365影视网</td></tr></table><tableid="a1"style="display:none"height="41"cellspacing="0"cellpadding="0"width="100%"border="0"><tr><tdstyle="padding-left:137px"align="left"><ulclass="i02w"><li><ahref="2.html">爱情喜剧</a></li><li><ahref="3.html">古典爱情</a></li><li>现代爱情</li></ul></td></tr></table><tableid="a2"style="display:none"height="41"cellspacing="0"cellpadding="0"width="100%"border="0"><tr><tdstyle="padding-left:357px"align="left"><ulclass="i02w"><li><a>枪战片</a></li><li><a>武侠片</a></li><li><a>魔幻片</a></li></ul></td></tr></table><tableid="a3"style="DISPLAY:none"height="41"cellspacing="0"cellpadding="0"width="100%"border="0"><tr><tdstyle="padding-left:540px"><ulclass="i02w"><li><a>外星人</a></li><li><a>自然灾害</a></li><li><a>生物变异</a></li></ul></td></tr></table><tableid="a4"style="display:none"height="41"cellspacing="0"cellpadding="0"width="100%"border="0"><tr><tdstyle="padding-left:750px"align="center"><ulclass="i02w"><li><a>惊悚片</a></li><li><a>恐怖片</a></li><li><a>悬疑片</a></li></ul></td></tr></table></td></tr></table></div>导航栏效果实现<scripttype="text/javascript">functionshowadv(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滑动门效果<divid="tab1"class="tab_content"><tablealign="center"width="300"border="0"cellpadding="0"cellspacing="0"><script>varnum=1;varnameArr=newArray("终结者5","飓风营救","我是传奇","一线生机","罗马假日","史密斯夫妇","午夜邂逅");vardnumArr=newArray("施瓦辛格","尼森","威尔","斯坦森","格里高利","布拉德","埃文斯");for(vari=0;i<nameArr.length;i++){document.write('<trheight="43">');document.write('<tdwidth="26"align="center"class="f_td">'+(num++)+'</<td>');document.write('<tdwidth="75"align="left"class="f_td"><ahref="#">'+nameArr[i]+'</td>');document.write('<tdwidth="90"align="right"class="f_td">'+dnumArr[i]+'</td></tr>');}</script></table></div><divid="tab2"class="tab_content"><tablealign="center"width="300"border="0"cellpadding="0"cellspacing="0"><script>varnum=1;varnameArr=newArray("机械师","变形金刚","暮光之城","怦然心动","电话情缘","蜘蛛侠","雷神");vardnumArr=newArray("斯坦森","拉伯夫","克里斯汀","卡罗尔","麦特卡尔菲","加菲尔德","海姆斯沃斯");for(vari=0;i<nameArr.length;i++){document.write('<trheight="43">');document.write('<tdwidth="26"align="center"class="f_td">'+(num++)+'</<td>');document.write('<tdwidth="75"align="left"class="f_td"><ahref="#">'+nameArr[i]+'</td>');document.write('<tdwidth="90"align="right"class="f_td">'+dnumArr[i]+'</td></tr>');}</script></table></div>3.JavaSceipt实现电影图片不间断滚动具体代码<divid="demo"class="top_box"style="overflow:hidden;width:1000px;height:264px"><tablewidth="100%"cellpadding="0"cellspacing="0"><tr><tdid="demo1"><tablecellpadding="0"cellspacing="0"><tr><tdwidth="191"height="200"style="padding-right:10px"><atarget="_blank"><imgsrc="images/01.jpg"width="191"height="200"border="0"/></a><divclass="title"><ahref="see/see6.html"target="_blank">速度与激情8</a></div><divclass="content">速度中的激情对撞</div></td><tdwidth="191"height="200"style="padding-right:10px"><atarget="_blank"><imgsrc="images/02.jpg"width="191"height="200"border="0"/></a><divclass="title"><ahref="see/see7.html"target="_blank">战狼</a></div><divclass="content">忠贞爱国的情怀</div></td><tdwidth="191"height="200"style="padding-right:10px"><atarget="_blank"><imgsrc="images/03.jpg"width="191"height="200"border="0"/></a><divclass="title"><ahref="see/see8.html"target="_blank">鬼吹灯之寻龙诀</a></div><divclass="content">惊险刺激的盗墓冒险</div></td><tdwidth="191"height="200"style="padding-right:10px"><atarget="_blank"><imgsrc="images/04.jpg"width="191"height="200"border="0"/></a><divclass="title"><ahref="see/see9.html"target="_blank">美国队长2</a></div><divclass="content">共同迎战强大的黑暗劲敌</div></td><tdwidth="191"height="200"style="padding-right:10px"><atarget="_blank"><imgsrc="images/05.jpg"width="191"height="200"border="0"/></a><divclass="title"><ahref="see/see10.html"target="_blank">夏洛特烦恼</a></div><divclass="content">搞笑感动的穿越故事</div></td></tr></table></td><tdid="demo2"></td></tr></table</div>4.总体效果4、总结：首先，对自己的课设，我还觉得有很多值得改进的地方。其次在专业知识上有了全面的认识，进一步增强了我的创造能力，通过这一次的课设，对平日的知识有了更深的理解。不仅锻炼了我的实际动手能力，还培养了我做事的耐心。同时也意识到以前在课堂上了解的知识太狭窄，不能把目光停留在仅学的几门专业课上，坚持做好动手操作，以便能更好的掌握所学的全部知识。5、参考文献[1]吝春妮。精品课程网站的优化设计策略研究[J].中国信息技术教育，2016,（23）：110-112.[2]伍双林。微型网站与微信公众平台相融合的移动化学习设计[J].发明与创新（教育信息化），2016,（11）：42-45.[3]高长军。《网站设计与制作》教学环境搭建技巧[J].中小学实验与装备，2016,26（06）：42-44.[4]高长军。构建“网站设计与制作”教学环境的策略[J].实验教学与仪器，2016,33（11）：41-42.[5]陈浩容。基于微课比赛网站的微课设计与开发现状的内容分析[J].教育信息技术，2017,（Z1）：150-153.[6]王丽丽，陈雯嫣，戴天。《我的网站我设计》微课程教学设计[J].中国信息技术教育，2017,（Z1）：22-24.[7]华柏胜。以生为本，创设情境，形散而神不散--《我的网站我设计》《让多莉回家》两篇微课程教学设计评析[J].中国信息技术教育，2017,（Z1）：27-28+69.