网页设计报告.doc

课程设计报告2017-2018学年度第 二 学期题目： 影视网站 姓名： 班级： 系部： 计算机学院 指导教师： 日期：2018 年 2 月 26 日目录一、 综述：3二、系统设计：31.系统目标32.系统功能结构33.开发环境4三、开发实现41.导航栏42.jQuery滑动门效果63. JavaSceipt实现电影图片不间断滚动74. 总体效果8四、 总结：8五、 参考文献9 . . 摘要 JavaScript是Web页面中的一种脚本编程语言，也是一种通用的、跨平台的、基于对象和事件驱动并具有安全性的脚本语言。它不需要进行编译，而是直接嵌入在HTML页面中，把静态页面转变成支持用户交互并响应事件的动态页面。本次网页设计采用JS和CSS来实现，使得网页样式多样、美观，用户有良好的体验。关键词 JavaScript、样式多样、动态页面1、 综述：对于网站而言，一个好的网页会给人留下深刻的印象，那样才会提高网站的知名度才会增加点击率。并且，网站的内容越接近人群，接近生活，就越能惹人注意。如果通过网站管理系统工作，就可以拓开以前传统的宣传思路，用户可以通过上网就能达到找到所需要材料的目的，并且可以给管理员留言以反馈意见。于此同时，作为网站的开发者，与用户进行沟通也是相当重要的。需求分析活动其实本来就是一个和客户交流，正确引导客户能够将自己的实际需求用较为适当的技术语言进行表达（或者由相关技术人员帮助表达）以明确项目目的的过程。这个过程中也同时包含了对要建立的网站基本功能和模块的确立和策划活动。在整个需求分析的过程中，将按照一定规范的编写需求分析的相关文档不但可以帮助成员将需求分析结果更加明确化，也为以后开发过程中做到了现实文本形式的备忘，并且有助于主管人员的日后的开发项目提供有益的借鉴和模范，成为项目开发中积累的符合自身特点的经验财富。通过市场调研活动，清晰的分析相似网站的性能和运行情况。可以帮助项目负责人更加清楚的构想出自己开发的网站的大体架构和模样，在总结同类网站优势和缺点的同时项目开发人员可以博采众长开发出更加优秀的网站。二、系统设计：1.系统目标结合实际情况及时对用户需求分析，365影视网应该具有以下特点：l 操作简单方便、界面简洁美观。l 能够全面展示影片分类及影片详细信息。l 浏览速度快，避免长时间打不开页面的情况发生。l 影片图片清楚、文字醒目。l 系统运行稳定、安全可靠。l 易维护，并提供二次开发支持。2.系统功能结构365影视网的系统结构3.开发环境在开发365影视网时，该项目使用的软件开发环境：l 操作系统：Windows7。l PHP运行环境：phpStudy20161103。l jQuery版本：jquery-1.6.1.min.js。l 开发工具：Dreamweaver CS6。l 浏览器：IE 8.0。三、开发实现1.导航栏视图具体代码首页爱情片动作片科幻片恐怖片欢迎来到365影视网爱情喜剧古典爱情现代爱情枪战片武侠片魔幻片外星人自然灾害生物变异惊悚片恐怖片悬疑片导航栏效果实现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);2.jQuery滑动门效果var num= 1; var nameArr=new Array(终结者5,飓风营救,我是传奇,一线生机,罗马假日,史密斯夫妇,午夜邂逅);var dnumArr=new Array(施瓦辛格,尼森,威尔,斯坦森,格里高利,布拉德,埃文斯);for(var i=0;inameArr.length;i+)document.write();document.write(+(num+)+/);document.write(+nameArri+);document.write(+dnumArri+);var num=1;var nameArr=new Array(机械师,变形金刚,暮光之城,怦然心动,电话情缘,蜘蛛侠,雷神);var dnumArr=new Array(斯坦森,拉伯夫,克里斯汀,卡罗尔,麦特卡尔菲,加菲尔德,海姆斯沃斯);for(var i=0;inameArr.length;i+)document.write();document.write(+(num+)+/);document.write(+nameArri+);document.write(+dnumArri+); 3. JavaSceipt实现电影图片不间断滚动具体代码速度与激情8速度中的激情对撞战狼忠贞爱国的情怀 鬼吹灯之寻龙诀惊险刺激的盗墓冒险美国队长2共同迎战强大的黑暗劲敌夏洛特烦恼搞笑感动的穿越故事/table4. 总体效果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陈浩容。基于微课比赛网站的