网页制作课程设计报告总结.docx

1、网页制作课程设计报告总结一、引言 课程设计是一块“试金石”，是加深对自我能力认识的重要途径。大学的学习基本上都是理论的接受，而缺少能力的熟练与加强，我们缺少的并不是知识的储备，而是能力的积蓄。但由于大学特殊的学习模式和环境，缺少实际情景的见证和实践活动的参与，同学之间缺乏必要的交流和比对，使得我们很多时候很难对自身的能力有明晰的认识，能力缺陷往往被遮蔽起来。而课程设计“前所未有”地考验着我们的知识迁移和运用能力、适应环境的能力、应对突发事件的能力以及如何处理人际关系等各方面的能力，为我们提供了不可多得的见证的机遇和平台。通过这次课设，我们可以新的思考维度有效发现自己能力上的缺陷。综合运用所学理

2、论知识、方法和技能，开展实际工作，巩固专业技能，培养和强化社会沟通能力；树立新的发展起点和目标，通过课设，认识社会的需要，发现自身的差距，培养面对现实的正确态度和独立分析解决问题的基本能力；培养良好的职业精神，适应毕业以后的实际工作需求。二、课程设计目的掌握HTML格式语言，能使用网页设计工具，理解动态页面技术的工作原理三、课程设计任务（1）用HTML或网页设计工具设计网页（2）用IE浏览器浏览所设计的网页，要求页面美观，包含常见的HTML格式元素（3）包含动态页面技术（有脚本代码或后台逻辑代码）四、设计方案选择：选择动态页面和静态页面相结合，取长补短。设计分工：谷加林：主页、留言板、主页动态

3、效果的代码编写协助所有组员完成代码的编写杜春吉：主页设计、留言板设计、总体排版、协助所有组员完成设计。蔡旺：注册网页代码编写和学校风貌网页设计及相关资料收集处理。姜文粹：登录网页代码编写和学校简介网页设计及协助素材收集整理。五、具体设计内容 作用：美化网站，提高网页的浏览效率，页面以简单风格为主，背景以白色为主。页面右上角边有网站导航条，背景以半透明白色为主。冲该页面可以看出，该网站主要是宣传学校，所以要简洁大方，不要太花哨。界面如图所示主页面部分代码如下：头部南京工程学院欢迎您 网站首页home 学校概况about 新闻资讯news 风貌展示views 招贤纳士join us 小组

4、介绍connect /导航菜单 /div $(document).ready(function() $(.scroll).imgscroll( speed: 40, /图片滚动速度 amount: 0, /图片滚动过渡时间 width: 1, /图片滚动步数 dir: left / left 或 up 向左或向上滚动 ); ); 友情链接友情链接友情链接 网站首页 | 学校概况 | 新闻资讯 | 风貌展示 | 在线留言 | 人才招聘 | 联系我们 学校地址： 江宁区科技园弘景大道1号 Flashjs/首页焦点图特特效$(function() var sWidth = $(.flash

5、).width(); /获取焦点图的宽度（显示面积） var len = $(.flash ul li).length; /获取焦点图个数 var index = 0; var picTimer; /以下代码添加数字按钮和按钮后的半透明长条 var btn = ; for(var i=0; i len; i+) btn += + ; btn += $(.flash).append(btn); $(.flash .btnBg).css(opacity,0.5); /为数字按钮添加鼠标滑入事件，以显示相应的内容 $(.flash .btn span).mouseenter(function() i

6、ndex = $(.flash .btn span).index(this); showPics(index); ).eq(0).trigger(mouseenter); /本例为左右滚动，即所有li元素都是在同一排向左浮动，所以这里需要计算出外围ul元素的宽度 $(.flash ul).css(width,sWidth*len); /鼠标滑上焦点图时停止自动播放，滑出时开始自动播放 $(.flash).hover(function() clearInterval(picTimer); ,function() picTimer = setInterval(function() showPics

7、(index); index+; if(index = len) index = 0; ,3000); /此3000代表自动播放的间隔，单位：毫秒 ).trigger(mouseleave); /显示图片函数，根据接收的index值显示相应的内容 function showPics(index) var nowLeft = -index*sWidth; /根据index值计算ul元素的position $(.flash ul).stop(true,false).animate(left:nowLeft,500); /通过animate()调整ul元素滚动到计算出的position $(.fla

8、sh .btn span).removeClass(on).eq(index).addClass(on); /为当前的按钮切换显示效果 );Scroll-js/图片滚动 调用方法 imgscroll(speed: 30,amount: 1,dir: up);$.fn.imgscroll = function(o) var defaults = speed: 40, amount: 0, width: 1, dir: left ; o = $.extend(defaults, o); return this.each(function() var _li = $(li, this); _li.p

9、arent().parent().css(overflow: hidden, position: relative); /div _li.parent().css(margin: 0, padding: 0, overflow: hidden, position: relative, list-style: none); /ul _li.css(position: relative, overflow: hidden); /li if(o.dir = left) _li.css(float: left); /初始大小 var _li_size = 0; for(var i=0; i _li_s

10、ize) _li_scroll = 0; _li.parent().css(o.dir = left ? left : -_li_scroll : top : -_li_scroll ); _li_scroll += o.width; _li.parent().animate(o.dir = left ? left : -_li_scroll : top : -_li_scroll , o.amount); /开始 var move = setInterval(function() goto(); , o.speed); _li.parent().hover(function() clearI

11、nterval(move); ,function() clearInterval(move); move = setInterval(function() goto(); , o.speed); ); );网站简介作用：介绍网站概况，用文字介绍网站战略、业务、团队、案例的具体情况。页面设计简约但不简单，浅色背景为主。界面截图如下：页面部分代码如下： 南京工程学院概况南京工程学院坐落于历史文化名城南京，是江苏省属普通高校，是全国应用型本科院校专门委员会主任委员单位，全国服务特需硕士专业学位研究生培养单位联盟副理事长单位和中国产学研促进会常务理事单位，也是国家“卓越工程师教育培养计划”首批试点高校

12、和国家“CDIO工程教育模式改革研究与实践”试点高校之一和江苏省协同创新中心培育建设单位。.今后一段时期，学校明确提出了“围绕一个目标、狠抓两个创建、突出三大重点、实施五大战略”的发展思路，加快提升办学实力、办学水平和品牌特色，为早日把学校建成特色鲜明的高水平应用型工程大学而努力奋斗！ 会员注册 作用：用户的注册和登录。 界面截图如下：页面部分代码如下：无标题文档 function check() var valid=true; var n=document.myform1.uname.value; var p1=document.myform1.psw1.value; var p2=docu

13、ment.myform1.psw2.value; if(n=) window.alert(您好，用户名不能为空!); valid=false; else if(p1.length6) window.alert(您好，密码不能为空且长度不能少于6个字符!); valid=false; else if(p1!=p2) window.alert(您好，密码与确认密码不一致!); valid=false; if(valid) return true; return false; 用 户 名： 密码： 确认密码： 返回 登陆界面作用：实现已注册的用户能登录。页面截图如下：页面部分代码如下：无标题文档 用

14、户名： 密 码：    注册客户留言页的实现作用：将用户的留言提交到数据库（同上），表名为db4.mdb。界面截图如下：客户留言页面部分代码如下：简易留言板 % Dim db,strConn Set db=Server.CreateObject(ADODB.Connection) strConn=Provider=Microsoft.Jet.OLEDB.4.0;Data Source= & Server.MapPath(db4.mdb) db.Open strConn set rs=server.createobject(adodb.recordset) dim sql s

15、ql=Select * From liuyanban rs.open sql,db,3 rs.pagesize=10 if request(page) then epage=cint(request(page) if epagers.pagecount then epage=rs.pagecount else epage=1 end if rs.AbsolutePage=epage% 留言板  楼 留言人： 留言标题: 留言内容: 昵称              六、实验结果网页页面美观，动态页面无异常，运行稳定，包含常见的HTML常见元素七、课程设计总结首先，对于自己的课设，我觉得还有很多值得改进的地方，这