网页制作课程设计报告总结.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〉
sheet" href="css/base。css" />
〈link type=”text/css” rel="stylesheet" href=”css/style.css” /〉
</script〉
〈script type="text/javascript</p><p style='padding:5px 0px;'>6、" 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</p><p style='padding:5px 0px;'>7、"〉
<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</p><p style='padding:5px 0px;'>8、—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><p style='padding:5px 0px;'>9、〈/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> </p><p style='padding:5px 0px;'>10、 //导航菜单
</div>
<!—-index-—〉
<div class=”index clearfix”>
〈div class="flash tc">
<ul>
/div〉
〈script type="text/javascript">
$(document）.ready(function（）｛
$（”。scroll”）。imgscroll({
speed: 40, //图片滚动速度</p><p style='padding:5px 0px;'>11、
amount： 0, //图片滚动过渡时间
width： 1， //图片滚动步数
dir： "left” // ”left” 或 ”up" 向左或向上滚动
｝);
});

〈div style=”border:4px solid ＃CCC;margin-top：50px;"〉〈/div>
〈/div>

〈div class="index—fri”〉
〈ul class=”clearfix”>
/html>
Flash—js
//首页焦点图特特效
$（function（) ｛
var sWidth = $(”。flash"）.width（）； //获取焦点图的宽度（显示面积）
var len = $（"。flash ul li”).length; //获取焦点图个数
var index = 0；
var picTimer;
//以下代码添加数字按钮和按钮后的半透明长条
var btn = "
｝
btn += ”要计算出外围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）;
})；
});
}；
网站简介
作用：介绍网站概况，用文字介绍网站战略、业务、团队、案例的具体情况.页面设计简约但不简单，浅色背景为主。
界面截图如下：
页面部分代码如下：
pe” content="text/html； charset=gb2312” /〉
无标题文档
<p style='height:0px;padding:0;overflow:hidden'>26、 ｛window.alert（”您好，用户名不能为空！”）;
valid=false；
｝
else if(p1.length〈6)
{window.alert（"您好,密码不能为空且长度不能少于6个字符！"）;
valid=false；
}
else
{
if（p1!=p2)
｛window.alert（”您好，密码与确认密码不一致!”);
valid=false;
}
｝
if（valid)
</p><p style='height:0px;padding:0;overflow:hidden'>27、 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” </p><p style='height:0px;padding:0;overflow:hidden'>28、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=gb</p><p style='height:0px;padding:0;overflow:hidden'>29、2312" />
〈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〉
</p><p style='height:0px;padding:0;overflow:hidden'>30、 〈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”</p><p style='height:0px;padding:0;overflow:hidden'>31、〉〈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</p><p style='height:0px;padding:0;overflow:hidden'>32、—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 </p><p style='height:0px;padding:0;overflow:hidden'>33、 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 </p><p style='height:0px;padding:0;overflow:hidden'>34、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</p><p style='height:0px;padding:0;overflow:hidden'>35、"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” 〉〈/t</p><p style='height:0px;padding:0;overflow:hidden'>36、extarea>
<br>
<input type=”submit” name=”submit” value="提交留言"〉
</p〉
</form>
</body〉
〈/html〉
六、 实验结果
网页页面美观，动态页面无异常，运行稳定,包含常见的HTML常见元素
七、 课程设计总结
首先,对于自己的课设，我觉得还有很多值得改进的地方,这个表格层次分明,工整简洁，游客在浏览的时候不会觉得繁琐。我的网页区域可以在两边加上其他的内容，比如增加一些超链接和铆点，增加一些按钮与游客进行互动,或者可以在页面嵌入几首歌曲,使页面看起来内容更加丰</p><p style='height:0px;padding:0;overflow:hidden'>37、富。
其次，在这次课设中，我体会到了CSS比HTML更强大的功能。CSS文件的就像对象与方法里面的方法,把原本冗长的代码分离开,看起来清晰明了。易于对代码进行修改,只需修改CSS中的属性即可对网页进行改造和维护；还可以在程序上完成一些组件依赖CSS进行安全的保护，使有心得到代码技术的人不那么容易得手。当然这只是为了对程序员的创造性劳动进行一定的保护,不能根本的解决代码易手的可能.
经过一周的课程设计,我对我们网络工程专业领域的知识有了更深，更广的认识。以前在课堂上了解的知识太狭窄，只把目光停留在仅学的几门专业课上，而且仅有的几门专业课学的也不是很精通,我用大把大把的时间来上网，游戏。通过这</p><p style='height:0px;padding:0;overflow:hidden'>38、次课设，我不仅在专业知识上有很大的收获.而且在对待学习以及生活的态度上更有了意想不到的收获。
首先，在专业知识上有了全面的认识，进一步增强是实验创造的能力。作为工科生，我们学习的内容比较抽象，在学校实验的机会不是很多。这一次，我们通过理论联系实际，对平日里的知识有了更深的理解。不仅锻炼了我的实际动手能力，还培养了我做事情的耐心。
其次，增强了同学间的互相帮助及团队合作意识.这次实习环境很开放,我们整个小组在一起分析探讨，自从上了大二，由于大家选课有些不同,平日里很少见面，这几天的课设拉近了我们之间的距离，我们一起讨论专业知识,互相帮助。讨论过程中，我们有一个组长,大家互相合作，遇到分歧时，大家一起商量，听从组长的安排，大家一起努力，最后很快就完成了任务。
最后，强化了我心中的责任感的问题.我是一个喜欢为所欲为的人，随性做事.在机房课设的几天,虽然很累,但我坚持下来了。感觉要是在平时肯定坚持不下来了,那时候,感觉我要是走了，我的工作谁来做呢？这就是责任吧！
最后非常感谢夏老师、毛老师对于我们的帮助,你们辛苦了！没有你们的帮助我们就没有今天的进步。
八、 参考文献
《TCP/IP协议族》 清华大学出版社
《Internet技术》课程设计指导书 毛云贵 编
《Web系统与技术》 南京大学出版社
</p>
</div>
</div>

<span id="LabelScript"></span>
<script src="https://m.zixin.com.cn/JS/bootstrap-collapse.js">

关于我们      便捷服务       自信AI       AI导航        抽奖活动©2010-2026 宁波自信网络信息技术有限公司  版权所有客服电话：[phone]  投诉电话：[phone]浙公网安备33021202000488号   浙ICP备2021020529号-1  |  浙B2-20240490  关注我们 ：