书签 分享 收藏 举报 版权申诉 / 16

类型网页制作课程设计报告总结.docx

  • 文档编号:3761136
  • 上传时间:2022-11-25
  • 格式:DOCX
  • 页数:16
  • 大小:606.33KB

--header-->

30px;">

网站首页

home

学校概况

about

新闻资讯

news

风貌展示

views

招贤纳士

join us

小组介绍

connect

//导航菜单

--index-->

     

    /div>

    $(document).ready(function(){

    $(".scroll").imgscroll({

    speed:

    40,//图片滚动速度

    amount:

    0,//图片滚动过渡时间

    width:

    1,//图片滚动步数

    dir:

    "left"//"left"或"up"向左或向上滚动

    });

    });

    4pxsolid#CCC;margin-top:

    50px;">

--friendlinked-->

友情链接友情链接友情链接

网站首页

|

学校概况

|

新闻资讯

|

风貌展示

|

在线留言

|

人才招聘

|

联系我们

学校地址:

 江宁区科技园弘景大道1号

 

Flash—js

//首页焦点图特特效

$(function(){

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

varlen=$(".flashulli").length;//获取焦点图个数

varindex=0;

varpicTimer;

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

varbtn="";

for(vari=0;i

btn+=""+"";

}

btn+=""

$(".flash").append(btn);

$(".flash.btnBg").css("opacity",0.5);

//为数字按钮添加鼠标滑入事件,以显示相应的内容

$(".flash.btnspan").mouseenter(function(){

index=$(".flash.btnspan").index(this);

showPics(index);

}).eq(0).trigger("mouseenter");

//本例为左右滚动,即所有li元素都是在同一排向左浮动,所以这里需要计算出外围ul元素的宽度

$(".flashul").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值显示相应的内容

functionshowPics(index){

varnowLeft=-index*sWidth;//根据index值计算ul元素的position

$(".flashul").stop(true,false).animate({"left":

nowLeft},500);//通过animate()调整ul元素滚动到计算出的position

$(".flash.btnspan").removeClass("on").eq(index).addClass("on");//为当前的按钮切换显示效果

}

});

Scroll--js

//图片滚动调用方法imgscroll({speed:

30,amount:

1,dir:

"up"});

$.fn.imgscroll=function(o){

vardefaults={

speed:

40,

amount:

0,

width:

1,

dir:

"left"

};

o=$.extend(defaults,o);

returnthis.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(vari=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;

functiongoto(){

_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);

}

//开始

varmove=setInterval(function(){goto();},o.speed);

_li.parent().hover(function(){

clearInterval(move);

},function(){

clearInterval(move);

move=setInterval(function(){goto();},o.speed);

});

});

};

网站简介

作用:

介绍网站概况,用文字介绍网站战略、业务、团队、案例的具体情况。

页面设计简约但不简单,浅色背景为主。

界面截图如下:

 

页面部分代码如下:

南京工程学院概况

南京工程学院坐落于历史文化名城南京,是江苏省属普通高校,是全国应用型本科院校专门委员会主任委员单位,全国服务特需硕士专业学位研究生培养单位联盟副理事长单位和中国产学研促进会常务理事单位,也是国家“卓越工程师教育培养计划”首批试点高校和国家“CDIO工程教育模式改革研究与实践”试点高校之一和江苏省协同创新中心培育建设单位。

.......

今后一段时期,学校明确提出了“围绕一个目标、狠抓两个创建、突出三大重点、实施五大战略”的发展思路,加快提升办学实力、办学水平和品牌特色,为早日把学校建成特色鲜明的高水平应用型工程大学而努力奋斗!

 

会员注册

作用:

用户的注册和登录。

界面截图如下:

页面部分代码如下:

无标题文档

functioncheck()

{

varvalid=true;

varn=document.myform1.uname.value;

varp1=document.myform1.psw1.value;

varp2=document.myform1.psw2.value;

if(n=="")

{window.alert("您好,用户名不能为空!

");

valid=false;

}

elseif(p1.length<6)

{window.alert("您好,密码不能为空且长度不能少于6个字符!

");

valid=false;

}

else

{

if(p1!

=p2)

{window.alert("您好,密码与确认密码不一致!

");

valid=false;

}

}

if(valid)

returntrue;

returnfalse;

}

returncheck();">

用户名:


密码:


确认密码:


返回

登陆界面

作用:

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

页面截图如下:

 

页面部分代码如下:

无标题文档

用户名:


密码:


  

注册

客户留言页的实现

作用:

将用户的留言提交到数据库(同上),表名为db4.mdb。

界面截图如下:

 

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

简易留言板

--

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;

}

-->

<%

Dimdb,strConn

Setdb=Server.CreateObject("ADODB.Connection")

strConn="Provider=Microsoft.Jet.OLEDB.4.0;DataSource="&Server.MapPath("db4.mdb")

db.OpenstrConn

setrs=server.createobject("adodb.recordset")

dimsql

sql="Select*Fromliuyanban"

rs.opensql,db,3

rs.pagesize=10

ifrequest("page")<>""then

epage=cint(request("page"))

ifepage<1thenepage=1

ifepage>rs.pagecountthenepage=rs.pagecount

else

epage=1

endif

rs.AbsolutePage=epage

%>

留言板

 

<%

fori=0tors.pagesize-1

ifrs.boforrs.eofthenexitfor

%>

留言人:

<%=rs

(1)%>

留言标题:

<%=rs

(2)%>

留言内容:

<%=rs(3)%>

昵称

     

  

   


六、实验结果

网页页面美观,动态页面无异常,运行稳定,包含常见的HTML常见元素

七、课程设计总结

首先,对于自己的课设,我觉得还有很多值得改进的地方,这

举报
举报
版权申诉
版权申诉
word格式文档无特别注明外均可编辑修改;预览文档经过压缩,下载后原文更清晰! 立即下载
配套讲稿:

如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。

特殊限制:

部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。

关 键  词:
网页 制作 课程设计 报告 总结
提示  冰豆网所有资源均是用户自行上传分享,仅供网友学习交流,未经上传用户书面授权,请勿作他用。
关于本文
本文标题:网页制作课程设计报告总结.docx
链接地址:https://www.bdocx.com/doc/3761136.html
关于我们 - 网站声明 - 网站地图 - 资源地图 - 友情链接 - 网站客服 - 联系我们

copyright@ 2008-2022 冰点文档网站版权所有

经营许可证编号:鄂ICP备2022015515号-1

收起
展开