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

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

<！DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN” "http：//www。w3。org/TR/xhtml1/DTD/xhtml1-transitional.dtd"〉
〈html xmlns="http：//www。w3。org/1999/xhtml”〉
〈head>
〈meta http—equiv=”Content-Type" content="text/html; charset=utf—8" /〉
〈title>南京工程学院欢迎您〈/title〉
<link type="text/css" rel=”stylesheet" href="css/base。css" />
〈link type=”text/css” rel="stylesheet" href=”css/style.css” /〉
<script type=”text/javascript” language=”javascript” src="js/jquery—1。7。2。min.js”〉〈/script>
〈script type="text/javascript” language="javascript" src=”js/common.js”></script〉
〈script type="text/javascript" language="javascript” src="js/flash。js”>〈/script>
<script type="text/javascript” language=”javascript” src="js/scroll.js”>〈/script>
</head〉
〈body>
〈div style="border—top:6px solid ＃128be9;"〉</div〉
〈div class="wrap”>
<!—-header—->
〈div class=”header clearfix”>
<div class=”header—a fl"〉
<a href="＃” class="clearfix”><img src=”images/logo。jpg" alt="#” width="140” height="140” class=”fl" /〉
<img src="images/logo22。jpg” alt="#” width=”211" height="76” class=”fr" style="margin—top：25px；margin-left:25px;"/〉
</a>
</div〉
<div class=”header—b fr" style="margin—top:30px；”>
〈ul class="clearfix"〉
〈li class="fl”>〈a href=”index。html” class="header-bb”>网站首页<p>home〈/p〉〈/a〉</li>
<li class="fl”〉〈a href="about。html"〉学校概况<p〉about〈/p>〈/a〉〈/li〉
〈li class=”fl”〉<a href="news。html">新闻资讯<p>news〈/p〉</a〉〈/li>
<li class="fl”〉<a href="views。html">风貌展示<p〉views</p〉</a〉</li〉
〈li class=”fl”><a href=”＃">招贤纳士〈p〉join＆nbsp;us〈/p〉</a>〈/li>
<li class=”fl"><a href=”team。html”>小组介绍〈p〉connect〈/p〉〈/a></li>
</ul〉
〈/div> //导航菜单
</div>
<!—-index-—〉
<div class=”index clearfix”>
〈div class="flash tc">
<ul>
/div〉
〈script type="text/javascript">
$(document）.ready(function（）｛
$（”。scroll”）。imgscroll({
speed: 40, //图片滚动速度
amount： 0, //图片滚动过渡时间
width： 1， //图片滚动步数
dir： "left” // ”left” 或 ”up" 向左或向上滚动
｝);
});
</script>
〈div style=”border:4px solid ＃CCC;margin-top：50px;"〉〈/div>
〈/div>
</div〉
〈！-—friendlinked——>
〈div class="index—fri”〉
〈ul class=”clearfix”>
<li class=”fl">〈a href="#">友情链接</a></li><li class="fl">〈a href=”＃">友情链接</a>〈/li〉〈li class=”fl”〉<a href=”#"〉友情链接</a〉</li>
〈div class="footer"〉
〈a href=”#”〉网站首页</a>
｜
<a href="＃”>学校概况</a>
｜
〈a href=”#”〉新闻资讯〈/a>
|
〈a href="＃”>风貌展示〈/a>
|
〈a href="＃”>在线留言</a>
｜
<a href="＃">人才招聘</a>
｜
<a href=”#”〉联系我们〈/a>
〈p〉学校地址：＆nbsp；江宁区科技园弘景大道1号〈/p〉
〈/div〉
</div〉
〈/div〉
</body〉
</html>
Flash—js
//首页焦点图特特效
$（function（) ｛
var sWidth = $(”。flash"）.width（）； //获取焦点图的宽度（显示面积）
var len = $（"。flash ul li”).length; //获取焦点图个数
var index = 0；
var picTimer;
//以下代码添加数字按钮和按钮后的半透明长条
var btn = "<div class=’btn’>";
for(var i=0; i < len; i++） ｛
btn += "<span〉" + "〈/span〉"；
｝
btn += ”</div〉"
＄(”.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”｝）； //li
if(o。dir == ”left”） _li。css(｛float： ”left"｝）；
//初始大小
var _li_size = 0；
for(var i=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;
function goto（)｛
_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）；
}
//开始
var move = setInterval(function（)｛ goto(）; }, o。speed）；
_li.parent().hover(function(){
clearInterval(move);
｝,function(）｛
clearInterval(move）；
move = setInterval（function（）{ goto（)； ｝, o.speed）;
})；
});
}；
网站简介
作用：介绍网站概况，用文字介绍网站战略、业务、团队、案例的具体情况.页面设计简约但不简单，浅色背景为主。
界面截图如下：
页面部分代码如下：
<div class="about-us”〉
<h1><center>南京工程学院概况〈/center〉</h1〉
<p>南京工程学院坐落于历史文化名城南京，是江苏省属普通高校，是全国应用型本科院校专门委员会主任委员单位，全国服务特需硕士专业学位研究生培养单位联盟副理事长单位和中国产学研促进会常务理事单位，也是国家“卓越工程师教育培养计划”首批试点高校和国家“CDIO工程教育模式改革研究与实践”试点高校之一和江苏省协同创新中心培育建设单位。〈/p>
。</p〉
.。.。.。.
<p>今后一段时期，学校明确提出了“围绕一个目标、狠抓两个创建、突出三大重点、实施五大战略”的发展思路，加快提升办学实力、办学水平和品牌特色,为早日把学校建成特色鲜明的高水平应用型工程大学而努力奋斗!〈/p〉
〈/div>
会员注册
作用：用户的注册和登录。
界面截图如下:
页面部分代码如下：
<head〉
<meta http—equiv="Content-Type” content="text/html； charset=gb2312” /〉
<title>无标题文档</title>
<Script Language="JavaScript”〉
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.length〈6)
{window.alert（"您好,密码不能为空且长度不能少于6个字符！"）;
valid=false；
}
else
{
if（p1!=p2)
｛window.alert（”您好，密码与确认密码不一致!”);
valid=false;
}
｝
if（valid)
return true;
return false;
}
〈/Script〉
</head〉
<body background="67665d70jw1dslia4zpowj。jpg"〉
〈form name=”myform1" action=”chuli.asp” method="post” onsubmit="javascript:return check();">
用 户 名：〈input type=”text” name=”uname”><br〉
密码：〈input type="password” name=”psw1”〉〈br>
确认密码:〈input type="password" name="psw2"〉〈br>
〈p>
〈input type="submit” value=”确认注册”〉
<a href="denglu。asp">返回</a>
</Form〉
</body>
</html>
登陆界面
作用：实现已注册的用户能登录。
页面截图如下：
页面部分代码如下：
〈head〉
<meta http-equiv=”Content—Type" content="text/html; charset=gb2312" />
〈title〉无标题文档</title〉
〈/head>
〈body background=”67665d70jw1dslia4zpowj.jpg”〉
<Form action="yanzheng。asp” method="post">
<p>用户名：
<input type=”text” name="uname">
〈br〉
密 码：
〈input type="password" name="psw1"〉
<br>
</p>
〈p〉
〈input type=”submit" value=”登录”>&nbsp;&nbsp；
〈a href=”zhuce.asp" target=”_self”>注册〈/a〉
</Form〉
</body>
</html>
客户留言页的实现
作用：将用户的留言提交到数据库（同上），表名为db4。mdb。
界面截图如下:
客户留言页面部分代码如下：
〈html〉
〈head>
<title〉简易留言板〈/title>
<meta http—equiv=”Content—Type” content="text/html; charset=gb2312”〉〈style type=”text/css">
<！—-
body {
background—color: ＃FFFF99；
background—image: url（67665d70jw1dslia4zpowj。jpg）;
｝
。STYLE2 {
font-size： 50px;
font—weight: bold;
｝
.STYLE3 {
font-size: 40px;
color： #99CC99;
}
。STYLE5 ｛
font—size: 23px；
font—weight: bold;
｝
.STYLE6 {
font—size： 20px；
font—weight： bold;
｝
——〉
〈%
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 epage〈1 then epage=1
if epage>rs.pagecount then epage=rs。pagecount
else
epage=1
end if
rs.AbsolutePage=epage
%>
</p>
<p align=”center"> 〈span class=”STYLE3"〉留言板</span></p〉
〈p align=”center”>＆nbsp;〈/p>
<%
for i=0 to rs.pagesize-1
if rs.bof or rs.eof then exit for
％>
〈ul〉<%=rs(0）％>楼</ul〉
〈lh〉留言人：<%=rs（1)%></lh〉〈br〉
<lh〉留言标题：<％=rs（2）%〉</lh><br>
<lh〉留言内容：<%=rs（3）％〉</lh〉〈br〉
</p〉
〈form action="chulizai。asp" method="post">
<p〉昵称
<input type=”text" name=”uname”〉
＆nbsp;＆nbsp；＆nbsp;＆nbsp；＆nbsp；
</p〉
<input type="text" name="title"〉
&nbsp;&nbsp；</p>
〈p〉&nbsp;＆nbsp；＆nbsp；
</p〉
<textarea maxlength="1500” name="textarea" cols=”50” rows="6" wrap=”hard” 〉〈/textarea>
<br>
<input type=”submit” name=”submit” value="提交留言"〉
</p〉
</form>
</body〉
〈/html〉
六、 实验结果
网页页面美观，动态页面无异常，运行稳定,包含常见的HTML常见元素
七、 课程设计总结
首先,对于自己的课设，我觉得还有很多值得改进的地方,这个表格层次分明,工整简洁，游客在浏览的时候不会觉得繁琐。我的网页区域可以在两边加上其他的内容，比如增加一些超链接和铆点，增加一些按钮与游客进行互动,或者可以在页面嵌入几首歌曲,使页面看起来内容更加丰富。
其次，在这次课设中，我体会到了CSS比HTML更强大的功能。CSS文件的就像对象与方法里面的方法,把原本冗长的代码分离开,看起来清晰明了。易于对代码进行修改,只需修改CSS中的属性即可对网页进行改造和维护；还可以在程序上完成一些组件依赖CSS进行安全的保护，使有心得到代码技术的人不那么容易得手。当然这只是为了对程序员的创造性劳动进行一定的保护,不能根本的解决代码易手的可能.
经过一周的课程设计,我对我们网络工程专业领域的知识有了更深，更广的认识。以前在课堂上了解的知识太狭窄，只把目光停留在仅学的几门专业课上，而且仅有的几门专业课学的也不是很精通,我用大把大把的时间来上网，游戏。通过这次课设，我不仅在专业知识上有很大的收获.而且在对待学习以及生活的态度上更有了意想不到的收获。
首先，在专业知识上有了全面的认识，进一步增强是实验创造的能力。作为工科生，我们学习的内容比较抽象，在学校实验的机会不是很多。这一次，我们通过理论联系实际，对平日里的知识有了更深的理解。不仅锻炼了我的实际动手能力，还培养了我做事情的耐心。
其次，增强了同学间的互相帮助及团队合作意识.这次实习环境很开放,我们整个小组在一起分析探讨，自从上了大二，由于大家选课有些不同,平日里很少见面，这几天的课设拉近了我们之间的距离，我们一起讨论专业知识,互相帮助。讨论过程中，我们有一个组长,大家互相合作，遇到分歧时，大家一起商量，听从组长的安排，大家一起努力，最后很快就完成了任务。
最后，强化了我心中的责任感的问题.我是一个喜欢为所欲为的人，随性做事.在机房课设的几天,虽然很累,但我坚持下来了。感觉要是在平时肯定坚持不下来了,那时候,感觉我要是走了，我的工作谁来做呢？这就是责任吧！
最后非常感谢夏老师、毛老师对于我们的帮助,你们辛苦了！没有你们的帮助我们就没有今天的进步。
八、 参考文献
《TCP/IP协议族》 清华大学出版社
《Internet技术》课程设计指导书 毛云贵 编
《Web系统与技术》 南京大学出版社