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