一、引言
课程设计是一块“试金石”，是加深对自我能力认识的重要途径。大学的学习基本上都是理论的接受，而缺少能力的熟练与加强，我们缺少的并不是知识的储备，而是能力的积蓄。但由于大学特殊的学习模式和环境，缺少实际情景的见证和实践活动的参与，同学之间缺乏必要的交流和比对，使得我们很多时候很难对自身的能力有明晰的认识，能力缺陷往往被遮蔽起来。而课程设计“前所未有”地考验着我们的知识迁移和运用能力、适应环境的能力、应对突发事件的能力以及如何处理人际关系等各方面的能力，为我们提供了不可多得的见证的机遇和平台。通过这次课设，我们可以新的思考维度有效发现自己能力上的缺陷。综合运用所学理论知识、方法和技能，开展实际工作，巩固专业技能，培养和强化社会沟通能力；树立新的发展起点和目标，通过课设，认识社会的需要，发现自身的差距，培养面对现实的正确态度和独立分析解决问题的基本能力；培养良好的职业精神，适应毕业以后的实际工作需求。
二、课程设计目的
掌握HTML格式语言，能使用网页设计工具，理解动态页面技术的工作原理
三、课程设计任务
（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>
|html网页设计实验心得
<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);
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论