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