资源描述
一、 引言 课程设计是一块“试金石,是加深对自我能力认识的重要途径。大学的学习根本上都是理论的承受,而缺少能力的熟练与加强,我们缺少的并不是知识的储藏,而是能力的积蓄。但由于大学特殊的学习模式和环境,缺少实际情景的见证和实践活动的参与,同学之间缺乏必要的交流和比对,使得我们很多时候很难对自身的能力有明晰的认识,能力缺陷往往被遮蔽起来。而课程设计“前所未有地考验着我们的知识迁移和运用能力、适应环境的能力、应对突发事件的能力以及如何处理人际关系等各方面的能力,为我们提供了不可多得的见证的机遇和平台。通过这次课设,我们可以新的思考维度有效发现自己能力上的缺陷。综合运用所学理论知识、方法和技能,开展实际工作,稳固专业技能,培养和强化社会沟通能力;树立新的开展起点和目标,通过课设,认识社会的需要,发现自身的差距,培养面对现实的正确态度和独立分析解决问题的根本能力;培养良好的职业精神,适应毕业以后的实际工作需求。二、 课程设计目的掌握HTML格式语言,能使用网页设计工具,理解动态页面技术的工作原理三、课程设计任务(1) 用HTML或网页设计工具设计网页(2) 用IE浏览器浏览所设计的网页,要求页面美观,包含常见的HTML格式元素(3) 包含动态页面技术有脚本代码或后台逻辑代码四、设计方案选择:选择动态页面和静态页面相结合,取长补短。设计分工:谷加林:主页、留言板、主页动态效果的代码编写协助所有组员完成代码的编写杜春吉:主页设计、留言板设计、总体排版、协助所有组员完成设计。蔡旺:注册网页代码编写和学校风貌网页设计及相关资料收集处理。文粹:登录网页代码编写和学校简介网页设计及协助素材收集整理。五、 具体设计容 作用:美化,提高网页的浏览效率,页面以简单风格为主,背景以白色为主。页面右上角边有导航条,背景以半透明白色为主。冲该页面可以看出,该主要是宣传学校,所以要简洁大方,不要太花哨。界面如下图主页面局部代码如下:头部工程学院欢送您 首页home 学校概况about 新闻资讯news 风貌展示views 招贤纳士join us 小组介绍connect /导航菜单 /div $(document).ready(function()$(.scroll).imgscroll(speed: 40, /图片滚动速度amount: 0, /图片滚动过渡时间width: 1, /图片滚动步数dir: left / left 或 up 向左或向上滚动);); 友情友情友情 首页 | 学校概况 | 新闻资讯 | 风貌展示 | 在线留言 | 人才招聘 | 联系我们 学校地址: 江宁区科技园弘景大道1号 Flashjs/首页焦点图特特效$(function() var sWidth = $(.flash).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() index = $(.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(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$(.flash .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.parent().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); /liif(o.dir = left) _li.css(float: left);/初始大小var _li_size = 0;for(var i=0; i _li_size)_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()clearInterval(move);,function()clearInterval(move);move = setInterval(function() goto(); , o.speed);););简介作用:介绍概况,用文字介绍战略、业务、团队、案例的具体情况。页面设计简约但不简单,浅色背景为主。界面截图如下:页面局部代码如下: 工程学院概况工程学院坐落于历史文化名城,是省属普通高校,是全国应用型本科院校专门委员会主任委员单位,全国效劳特需硕士专业学位研究生培养单位联盟副理事长单位和中国产学研促进会常务理事单位,也是国家“卓越工程师教育培养方案首批试点高校和国家“CDIO工程教育模式改革研究与实践试点高校之一和省协同创新中心培育建立单位。.今后一段时期,学校明确提出了“围绕一个目标、狠抓两个创立、突出三大重点、实施五大战略的开展思路,加快提升办学实力、办学水平和品牌特色,为早日把学校建成特色鲜明的高水平应用型工程大学而努力奋斗! 会员注册作用:用户的注册和登录。 界面截图如下:页面局部代码如下:无标题文档 function check() var valid=true; var n=document.myform1.uname.value; var p1=document.myform1.psw1.value; var p2=document.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; 用 户 名: 密码: 确认密码: 返回 登陆界面作用:实现已注册的用户能登录。页面截图如下:页面局部代码如下:无标题文档 用户名: 密 码: 注册客户留言页的实现作用:将用户的留言提交到数据库同上,表名为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 sql=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.pagecountelse epage=1 end if rs.AbsolutePage=epage% 留言板 楼 留言人: 留言标题: 留言容: 昵称 六、 实验结果网页页面美观,动态页面无异常,运行稳定,包含常见的HTML常见元素七、 课程设计总结首先,对于自己的课设,我觉得还有很多值得改良的地方,这个表格层次清楚,工整简洁,游客在浏览的时候不会觉得繁琐。我的网页区域可以在两边加上其他的容,比方增加一些超和铆点,增加一些按钮与游客进展互动,或者可以在页面嵌入几首歌曲,使页面看起来容更加丰富。其次,在这次课设中,我体会到了CSS比HTML更强大的功能。CSS文件的就像对象与方法里面的方法,把原本冗长的代码别离开,看起来清晰明了。易于对代码进展修改,只需修改CSS中的属性即可对网页进展改造和维护;还可以在程序上完成一些组件依赖CSS进展平安的保护,使有心得到代码技术的人不那么容易得手。当然这只是为了对程序员的创造性劳动进展一定的保护,不能根本的解决代码易手的可能。经过一周的课程设计,我对我们网络工程专业领域的知识有了更深,更广的认识。以前在课堂上了解的知识太狭窄,只把目光停留在仅学的几门专业课上,而且仅有的几门专业课学的也不是很精通,我用大把大把的时间来上网,游戏。通过这次课设,我不仅在专业知识上有很大的收获。而且在对待学习以及生活的态度上更有了意想不到的收获。首先,在专业知识上有了全面的认识,进一步增强是实验创造的能力。作为工科生,我们学习的容比拟抽象,在学校实验的时机不是很多。这一次,我们通过理论联系实际,对平日里的知识有了更深的理解。不仅锻炼了我的实际动手能力,还培养了我做事情的耐心。其次,增强了同学间的互相帮助及团队合作意识。这次实习环境很开放,我们整个小组在一起分析探讨,自从上了大二,由于大家选课有些不同,平日里很少见面,这几天的课设拉近了我们之间的距离,我们一起讨论专业知识,互相帮助。讨论过程中,我们有一个组长,大家互相合作,遇到分歧时,大家一起商量,听从组长的安排,大家一起努力,最后很快就完成了任务。最后,强化了我心中的责任感的问题。我是一个喜欢为所欲为的人,随性做事。在机房课设的几天,虽然很累,但我坚持下来了。感觉要是在平时肯定坚持不下来了,那时候,感觉我要是走了,我的工作谁来做呢?这就是责任吧!最后非常感夏教师、毛教师对于我们的帮助,你们辛苦了!没有你们的帮助我们就没有今天的进步。八、 参考文献?TCP/IP协议族? 清华大学?Internet技术?课程设计指导书 毛云贵 编?Web系统与技术? 大学14 / 14
展开阅读全文