2013年DLC1_DIV层的应用.pptVIP

指导学习1　 DIV层的应用 任务 完成任务 在网页中插入图层，图片层的轮换播放，功能如下： 1、鼠标控制层的显示/隐藏 2、层随滚动轴移动 3、图片轮换播放 训练的技能点 1、会使用getElementById( ) 2、层的显示隐藏：display:block,none 3、windows.open的应用 4、会使用setTimeout( ) 阶段划分 第一部分 ：阶段小结（50～100分钟） 阶段小结 上机、作业共性问题讲解 阶段小结 本门课程1～4章阶段小结 会使用getElementById( ) 层的显示隐藏：display:block,none windows.open的应用 会使用setTimeout( ) 上机、作业共性问题 学员上机、作业共性问题讲解 学员问题答疑 阶段1 需求说明： 网页左侧带关闭按钮的广告图 阶段5 需求说明： 1. 3张图片循环显示的横幅广告 阶段5 阶段6 总结 Struts+Hibernate+Spring IBM Software Institute AJAX 2008IBM Software Institute 2008 IBM Software Institute 讲解说明 第三部分（20分钟） 总结 第二部分：练习（100分钟） 阶段1（10分钟）网页左侧带关闭按钮的广告图层 阶段2 （15分钟）网页右侧带关闭按钮的广告图层 阶段3 （10分钟）左侧层随滚动条移动 阶段4（15分钟）右侧层随滚动条移动 阶段5（20分钟）3张图片循环显示的横幅广告 阶段6（30分钟）5张图片循环显示的横幅广告 讲解说明 讲解说明 讲解说明 规范代码示例 讲解需求说明 实现思路及关键代码： 1、通过点击关闭层，调用隐藏广告层的函数 2、关闭层调用函数关键代码 阶段1 Function 函数名( ) { document.getElementById(“广告层ID号).style.block=’none’; document.getElementById(关闭层ID号).style.display=none; } 规范代码示例 讲解实现思路和关键代码 完成时间：10分钟 需求说明 1.网页右侧带关闭按钮的广告图 2.弹出广告 阶段2 规范代码示例 弹出广告 完成时间：15分钟 阶段2 教员巡视指导，进行阶段检查 共性问题集中讲解 常见调试问题及解决办法 代码规范问题 需求说明： 层随滚动条移动 阶段3 规范代码示例 讲解需求说明 实现思路及关键代码： 层距窗口上方及左方位置相对固定 阶段3 规范代码示例 function move( ){ document.getElementById(leftdiv).style.pixelTop=document.body.scrollTop+50; document.getElementById(leftdiv).style.pixelLeft=document.body.scrollLeft+5; } 讲解实现思路和关键代码 完成时间：10分钟 需求说明： 网页右侧随滚动条移动的广告图 阶段4 规范代码示例 完成时间：15分钟 阶段4 教员巡视指导，进行阶段检查 共性问题集中讲解 常见调试问题及解决办法 代码规范问题 规范代码示例 讲解需求说明 实现思路及关键代码： 1、先在函数外定义全局变量用于计数：NowFrame 2、判断显示的是否是最后一张图片 3、计数器+1，显示下一张图片 document.getElementById(“显示的图Id”).style.display = block; document.getElementById(“隐藏的图Id”).style.display = none; 规范代码示例 讲解实现思路和关键代码 完成时间：20分钟 阶段6 需求说明 5张图片循环显示的横幅广告 用setTimeout( )函数实现图片循环 规范代码示例 完成时间：30分钟 教员巡视指导，进行阶段检查 共性问题集中讲解 常见调试问题及解决办法 代码规范问题 总结并布置作业 讲解要点： 假定该系统的数据库设计需要两张表：帐户信息表(bank)存放帐户的信息， 交易信息表(transInfo)存放每次的交易信息。 演示：“示例1：为什么需要触发器.sql”，演示时请设置为较大字体， 以便后排的学员能看清演示的结果。 提问学员：上述结果有什么错误？您一定发现了，当张三取钱200元时，虽然交易信息表(transInfo)