网页设计报告.docx
- 文档编号:17324538
- 上传时间:2023-07-24
- 格式:DOCX
- 页数:11
- 大小:697.33KB
网页设计报告.docx
《网页设计报告.docx》由会员分享,可在线阅读,更多相关《网页设计报告.docx(11页珍藏版)》请在冰点文库上搜索。
网页设计报告
课程设计报告
2017-2018学年度第二学期
题目:
影视网站
姓名:
班级:
系部:
计算机学院
指导教师:
日期:
2018年2月26日
[摘要]
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.导航栏
视图
具体代码
onMouseOver="showadv('a1','a1color','a1bg')"> onMouseOver="showadv('a2','a2color','a2bg')"> onMouseOver="showadv('a3','a3color','a3bg')"> onMouseOver="showadv('a4','a4color','a4bg')">
12px">欢迎来到365影视网
none"height="41"cellspacing="0"cellpadding="0"width="100%"border="0"> 137px"align="left">
none"height="41"cellspacing="0"cellpadding="0"width="100%"border="0"> 357px"align="left">
none"height="41"cellspacing="0"cellpadding="0"width="100%"border="0"> 540px">
none"height="41"cellspacing="0"cellpadding="0"width="100%"border="0"> 750px"align="center">
导航栏效果实现
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)";
}
2.jQuery滑动门效果
varnum=1;varnameArr=newArray("终结者5","飓风营救","我是传奇","一线生机","罗马假日","史密斯夫妇","午夜邂逅");
vardnumArr=newArray("施瓦辛格","尼森","威尔","斯坦森","格里高利","布拉德","埃文斯");
for(vari=0;i document.write(' document.write(' document.write(' document.write(' }'); ');
varnum=1;
varnameArr=newArray("机械师","变形金刚","暮光之城","怦然心动","电话情缘","蜘蛛侠","雷神");
vardnumArr=newArray("斯坦森","拉伯夫","克里斯汀","卡罗尔","麦特卡尔菲","加菲尔德","海姆斯沃斯");
for(vari=0;i document.write(' document.write(' document.write(' document.write(' }'); ');
3.JavaSceipt实现电影图片不间断滚动
具体代码
hidden;width: 1000px;height: 264px"> 10px"> 10px"> 10px"> 10px"> 10px">
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.
【下载本文档,可以自由复制内容或自由编辑修改内容,更多精彩文章,期待你的好评和关注,我将一如既往为您服务】