一、引言

课程设计是一块“试金石”，是加深对自我能力认识的重要途径。大学的学习基本上都是理论的接受，而缺少能力的熟练与加强，我们缺少的并不是知识的储备，而是能力的积蓄。但由于大学特殊的学习模式和环境，缺少实际情景的见证和实践活动的参与，同学之间缺乏必要的交流和比对，使得我们很多时候很难对自身的能力有明晰的认识，能力缺陷往往被遮蔽起来。而课程设计“前所未有”地考验着我们的知识迁移和运用能力、适应环境的能力、应对突发事件的能力以及如何处理人际关系等各方面的能力，为我们提供了不可多得的见证的机遇和平台。通过这次课设，我们可以新的思考维度有效发现自己能力上的缺陷。综合运用所学理论知识、方法和技能，开展实际工作，巩固专业技能，培养和强化社会沟通能力；树立新的发展起点和目标，通过课设，认识社会的需要，发现自身的差距，培养面对现实的正确态度和独立分析解决问题的基本能力；培养良好的职业精神，适应毕业以后的实际工作需求。

二、课程设计目的

掌握HTML格式语言，能使用网页设计工具，理解动态页面技术的工作原理

三、课程设计任务

（1）用HTML或网页设计工具设计网页

（2）用IE浏览器浏览所设计的网页，要求页面美观，包含常见的HTML格式元素

（3）包含动态页面技术（有脚本代码或后台逻辑代码）

四、设计方案选择：

选择动态页面和静态页面相结合，取长补短。

设计分工：

谷加林：主页、留言板、主页动态效果的代码编写协助所有组员完成代码的编写

杜春吉：主页设计、留言板设计、总体排版、协助所有组员完成设计。

蔡旺：注册网页代码编写和学校风貌网页设计及相关资料收集处理。

姜文粹：登录网页代码编写和学校简介网页设计及协助素材收集整理。

五、具体设计内容

作用：美化网站，提高网页的浏览效率，页面以简单风格为主，背景以白色为主。页面右上角边有网站导航条，背景以半透明白色为主。冲该页面可以看出，该网站主要是宣传学校，所以要简洁大方，不要太花哨。

界面如图所示

主页面部分代码如下：

头部

Flash—js

//首页焦点图特特效

$(function() {

var sWidth = $(".flash").width(); //获取焦点图的宽度（显示面积）

var len = $(".flash ul li").length; //获取焦点图个数

var index = 0;

var picTimer;

//以下代码添加数字按钮和按钮后的半透明长条

var btn = "

"

$(".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);

});

});

};

网站简介

作用：介绍网站概况，用文字介绍网站战略、业务、团队、案例的具体情况。页面设计简约但不简单，浅色背景为主。

界面截图如下：

页面部分代码如下：

会员注册

作用：用户的注册和登录。

界面截图如下：

页面部分代码如下：

用 户 名：

密码：

确认密码：

返回

登陆界面

作用：实现已注册的用户能登录。

页面截图如下：

页面部分代码如下：

用户名：

密 码：

  

注册

客户留言页的实现

作用：将用户的留言提交到数据库（同上），表名为db4.mdb。

界面截图如下：

客户留言页面部分代码如下：