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

上传人：h*** IP属地：安徽上传时间：2023-09-07 格式：DOC 页数：11 大小：41KB 积分：20 举报 版权申诉

已阅读5页，还剩6页未读，继续免费阅读

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

..引言课程设计是一块"试金石〞，是加深对自我能力认识的重要途径。大学的学习根本上都是理论的承受，而缺少能力的熟练与加强，我们缺少的并不是知识的储藏，而是能力的积蓄。但由于大学特殊的学习模式和环境，缺少实际情景的见证和实践活动的参与，同学之间缺乏必要的交流和比对，使得我们很多时候很难对自身的能力有明晰的认识，能力缺陷往往被遮蔽起来。而课程设计"前所未有〞地考验着我们的知识迁移和运用能力、适应环境的能力、应对突发事件的能力以及如何处理人际关系等各方面的能力，为我们提供了不可多得的见证的机遇和平台。通过这次课设，我们可以新的思考维度有效发现自己能力上的缺陷。综合运用所学理论知识、方法和技能，开展实际工作，稳固专业技能，培养和强化社会沟通能力；树立新的开展起点和目标，通过课设，认识社会的需要，发现自身的差距，培养面对现实的正确态度和独立分析解决问题的根本能力；培养良好的职业精神，适应毕业以后的实际工作需求。课程设计目的掌握HTML格式语言，能使用网页设计工具，理解动态页面技术的工作原理三、课程设计任务用HTML或网页设计工具设计网页用IE浏览器浏览所设计的网页，要求页面美观，包含常见的HTML格式元素包含动态页面技术〔有脚本代码或后台逻辑代码〕四、设计方案选择：选择动态页面和静态页面相结合，取长补短。设计分工：谷加林：主页、留言板、主页动态效果的代码编写协助所有组员完成代码的编写杜春吉：主页设计、留言板设计、总体排版、协助所有组员完成设计。蔡旺：注册网页代码编写和学校风貌网页设计及相关资料收集处理。文粹：登录网页代码编写和学校简介网页设计及协助素材收集整理。具体设计容作用：美化，提高网页的浏览效率，页面以简单风格为主，背景以白色为主。页面右上角边有导航条，背景以半透明白色为主。冲该页面可以看出，该主要是宣传学校，所以要简洁大方，不要太花哨。界面如下图主页面局部代码如下：头部

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""./TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="./1999/xhtml"><head><meta-equiv="Content-Type"content="text/html;charset=utf-8"/><title>工程学院欢送您</title><linktype="text/css"rel="stylesheet"href="css/base.css"/><linktype="text/css"rel="stylesheet"href="css/style.css"/><scripttype="text/javascript"language="javascript"src="js/jquery-1.7.2.min.js"></script><scripttype="text/javascript"language="javascript"src="js/mon.js"></script><scripttype="text/javascript"language="javascript"src="js/flash.js"></script><scripttype="text/javascript"language="javascript"src="js/scroll.js"></script></head><body><divstyle="border-top:6pxsolid#128be9;"></div><divclass="wrap"> <divclass="headerclearfix"> <divclass="header-afl"> <ahref="#"class="clearfix"><imgsrc="images/logo.jpg"alt="#"width="140"height="140"class="fl"/><imgsrc="images/logo22.jpg"alt="#"width="211"height="76"class="fr"style="margin-top:25px;margin-left:25px;"/> </a></div> <divclass="header-bfr"style="margin-top:30px;"> <ulclass="clearfix"> <liclass="fl"><ahref="index.html"class="header-bb">首页<p>home</p></a></li><liclass="fl"><ahref="about.html">学校概况<p>about</p></a></li><liclass="fl"><ahref="news.html">新闻资讯<p>news</p></a></li><liclass="fl"><ahref="views.html">风貌展示<p>views</p></a></li><liclass="fl"><ahref="#">招贤纳士<p>join us</p></a></li><liclass="fl"><ahref="team.html">小组介绍<p>connect</p></a></li></ul></div>//导航菜单</div>  <divclass="indexclearfix"> <divclass="flashtc"> <ul>/div><scripttype="text/javascript"> $(document).ready(function(){ $(".scroll").imgscroll({ speed:40,//图片滚动速度 amount:0,//图片滚动过渡时间 width:1,//图片滚动步数 dir:"left"//"left"或"up"向左或向上滚动 }); }); </script><divstyle="border:4pxsolid#CCC;margin-top:50px;"></div></div></div> <divclass="index-fri"> <ulclass="clearfix"> <liclass="fl"><ahref="#">友情</a></li><liclass="fl"><ahref="#">友情</a></li><liclass="fl"><ahref="#">友情</a></li><divclass="footer"> <ahref="#">首页</a>|<ahref="#">学校概况</a>|<ahref="#">新闻资讯</a>|<ahref="#">风貌展示</a>|<ahref="#">在线留言</a>|<ahref="#">人才招聘</a>|<ahref="#">联系我们</a><p>学校地址：江宁区科技园弘景大道1号</p></div></div></div></body></html>Flash—js//首页焦点图特特效$(function(){ varsWidth=$(".flash").width();//获取焦点图的宽度〔显示面积〕 varlen=$(".flashulli").length;//获取焦点图个数 varindex=0; varpicTimer; //以下代码添加数字按钮和按钮后的半透明长条 varbtn="<divclass='btn'>"; for(vari=0;i<len;i++){ btn+="<span>"+"</span>"; } btn+="</div>" $(".flash").append(btn); $(".flash.btnBg").css("opacity",0.5); //为数字按钮添加鼠标滑入事件，以显示相应的容 $(".flash.btnspan").mouseenter(function(){ index=$(".flash.btnspan").index(this); showPics(index); }).eq(0).trigger("mouseenter"); //本例为左右滚动，即所有li元素都是在同一排向左浮动，所以这里需要计算出外围ul元素的宽度 $(".flashul").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值显示相应的容 functionshowPics(index){ varnowLeft=-index*sWidth;//根据index值计算ul元素的position $(".flashul").stop(true,false).animate({"left":nowLeft},500);//通过animate()调整ul元素滚动到计算出的position $(".flash.btnspan").removeClass("on").eq(index).addClass("on");//为当前的按钮切换显示效果 }});Scroll--js//图片滚动调用方法imgscroll({speed:30,amount:1,dir:"up"});$.fn.imgscroll=function(o){ vardefaults={ speed:40, amount:0, width:1, dir:"left" }; o=$.extend(defaults,o); returnthis.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"});//li if(o.dir=="left")_li.css({float:"left"});//初始大小 var_li_size=0; for(vari=0;i<_li.size();i++) _li_size+=o.dir=="left""_li.eq(i).outerWidth(true):_li.eq(i).outerHeight(true); //循环所需要的元素 if(o.dir=="left")_li.parent().css({width:(_li_size*3)+"px"}); _li.parent().empty().append(_li.clone()).append(_li.clone()).append(_li.clone()); _li=$("li",this); //滚动 var_li_scroll=0; functiongoto(){ _li_scroll+=o.width; if(_li_scroll>_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); } //开场 varmove=setInterval(function(){goto();},o.speed);_li.parent().hover(function(){ clearInterval(move); },function(){ clearInterval(move); move=setInterval(function(){goto();},o.speed); }); });};简介作用：介绍概况，用文字介绍战略、业务、团队、案例的具体情况。页面设计简约但不简单，浅色背景为主。界面截图如下：页面局部代码如下：<divclass="about-us"><h1><center>工程学院概况</center></h1><p>工程学院坐落于历史文化名城，是省属普通高校，是全国应用型本科院校专门委员会主任委员单位，全国效劳特需硕士专业学位研究生培养单位联盟副理事长单位和中国产学研促进会常务理事单位，也是国家"卓越工程师教育培养方案〞首批试点高校和国家"CDIO工程教育模式改革研究与实践〞试点高校之一和省协同创新中心培育建立单位。</p>。</p><p>今后一段时期，学校明确提出了"围绕一个目标、狠抓两个创立、突出三大重点、实施五大战略〞的开展思路，加快提升办学实力、办学水平和品牌特色，为早日把学校建成特色鲜明的高水平应用型工程大学而努力奋斗！</p></div>会员注册作用：用户的注册和登录。界面截图如下：页面局部代码如下：<head><meta-equiv="Content-Type"content="text/html;charset=gb2312"/><title>无标题文档</title><ScriptLanguage="JavaScript">functioncheck(){varvalid=true;varn=document.myform1.uname.value;varp1=document.myform1.psw1.value;varp2=document.myform1.psw2.value;if(n==""){window.alert("您好，用户名不能为空!");valid=false;}elseif(p1.length<6){window.alert("您好，密码不能为空且长度不能少于6个字符!");valid=false;}else { if(p1!=p2){window.alert("您好，密码与确认密码不一致!");valid=false;} }if(valid)returntrue; returnfalse;}</Script></head><bodybackground="67665d70jw1dslia4zpowj.jpg"><formname="myform1"action="chuli.asp"method="post"onsubmit="javascript:returncheck();">用户名：<inputtype="text"name="uname"><br>密码：<inputtype="password"name="psw1"><br>确认密码：<inputtype="password"name="psw2"><br><p><inputtype="submit"value="确认注册"> <ahref="denglu.asp">返回</a></Form></body></html>登陆界面作用：实现已注册的用户能登录。页面截图如下：页面局部代码如下：<head><meta-equiv="Content-Type"content="text/html;charset=gb2312"/><title>无标题文档</title></head><bodybackground="67665d70jw1dslia4zpowj.jpg"><Formaction="yanzheng.asp"method="post"><p>用户名：<inputtype="text"name="uname"><br>密码：<inputtype="password"name="psw1"><br></p><p><inputtype="submit"value="登录"> <ahref="zhuce.asp"target="_self">注册</a></Form></body></html>客户留言页的实现作用：将用户的留言提交到数据库〔同上〕，表名为db4.mdb。界面截图如下：客户留言页面局部代码如下：<html><head><title>简易留言板</title><meta-equiv="Content-Type"content="text/html;charset=gb2312"><styletype="text/css"><%Dimdb,strConn Setdb=Server.CreateObject("ADODB.Connection") strConn="Provider=Microsoft.Jet.OLEDB.4.0;DataSource="&Server.MapPath("db4.mdb") db.OpenstrConnsetrs=server.createobject("adodb.recordset")dimsqlsql="Select*Fromliuyanban"rs.opensql,db,3rs.pagesize=10ifrequest("page")<>""thenepage=cint(request("page"))ifepage<1thenepage=1ifepage>rs.pagecountthenepage=rs.pagecount elseepage=1endifrs.AbsolutePage=epage%></p><palign="center"><spanclass="STYLE3">留言板</span></p><palign="center"> </p><%fori=0tors.pagesize-1ifrs.boforrs.eofthenexitfor%><ul><%=rs(0)%>楼</ul><lh>留言人：<%=rs(1)%></lh><br><lh>留言标题:<%=rs(2)%></lh><br><lh>留言容:<%=rs(3)%></lh><br></p><formaction="chulizai.asp"method="post"><p>昵称<inputtype="text"name="uname"> </p><inputtype="text"name="title"> </p><p> </p><textareamaxlength="1500"name="textarea"cols="50"rows="6"wrap="hard"></textarea>

人人文库> 全部分类> 行业资料 > 信息产业

温馨提示

1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

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

文档简介

温馨提示

最新文档

评论

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

文档简介

温馨提示

最新文档

评论

相关文档