江苏省XY中等专业学校2021-2022-2教案 编号:
备课组别 | 计算机 | 上课 日期 | 主备 教师 | 授课 教师 | |||||
明星动态图片大全课题: | 第5章制作网站的首页 5.5使用JavaScript特效 | ||||||||
教学 目标 | |||||||||
重点 | |||||||||
难点 | |||||||||
教法 | 讲练法、演示法、任务驱动法 | ||||||||
教学设备 | 多媒体机房 | ||||||||
教学 环节 | 教学活动内容及组织过程 | 个案补充 | |||||||
教 学 内 容 | 【复习回顾】 “行为”面板 【教学过程及内容】 5.4学习使用”行为”面板 当鼠标在网页的某个图片或文字对象上滑动时,使用Dreamwever的行为可以实现该段文字或图像动态效果显示,比如增大、缩小等。 实例8:如图所示,当鼠标移到左侧第一个图片时,该图片宽度和高度都压缩至50%,当鼠标移开时再动态恢复成原状,所需素材在资料包中提供。 | ||||||||
教 学 内 容 | 1、在练习站点里,先新建如上图所示的网页,即先在网页中插入2行1列900像素宽的表格,再在第二行的单元格中插入2行5列宽度100%的布局表格。 2、将插入点光标移到第二个布局表格第二行左侧第一单元格中,单击“插入”菜单“布局对象”中的“Div标签”命令。 3、打开 “插入Div标签”对话框,在“插入:”列表框中选择“在插入点”,在“ID”列表框中输入“tu1”,单击“确定”按钮,并删掉网页中反相显示的“此处显示 id "tu1" 的内容”,在新插入的图层“tu1”中插入“images/1.jpg”。 4、在任务栏中选中“div#tu1”,打开“行为”面板,单击添加动作钮从如图所示的“动作”菜单中选择“效果”中的“增大/收缩”,打开 “增大/收缩”对话框,并按如图5.26所示进行设置。 | ||||||||
教 学 内 容 教 学 内 容 | 5、单击“确定”按钮,给图层“tu1”添加了一个“收缩”动作,在“行为”面板上将“收缩”效果动作的响应事件修改为“onmouseover”。 6、继续给图层“tu1”添加“增大”动作,并将“增大”效果动作的响应事件修改为“onmouseout”增大效果设置如图5.27所示。因为是将已经缩小以为50%的图片增大为100%,所以这里“增大自:”100%,“增大到:”200% 5.4.5显示和隐藏层 当鼠标在网页的某个图片或文字对象上滑动时,旁边弹出介绍性的图片或文本段,而鼠标移开该对象时,介绍性的图片或文本段自动隐藏,这种网页特效也可以使用Dreamwever的行为实现。 实例9:如图所示,当鼠标移到带有链接的文字“明星开店在这里”时,就显示淘宝网站该子网站的logo图片,当鼠标移开时自动隐藏该图片。 1、单击“插入”工具栏“布局”选项卡中的“绘制AP Div”按钮,拖动鼠标在文字“明星开店在这里”的后面插入一个绝对定位的层,如图所示。 | |
2、在如图 “apDiv1”的属性面板中设置“Z轴”的值为“100”,可见性为“hidden”,即设置该图层在最上方显示,平时不可见。 3、选中要添加行为的链接文字“明星开店在这里”,“shift+F4”打开如图5.31所示的“行为”面板,选择“显示-隐藏元素”命令,打开如图5.32所示的“显示-隐藏元素”对话框,在“元素”框中选择“div ‘apDiv1’”,并单击“显示”按钮。 4、在行为面板中将默认的“onClick”事件修改为当鼠标经过“onMouseOver”。 【课堂小结】 教师引导学生小结本课所学内容。 【作业布置】 总结本课所学操作实用技巧。 | ||
板 书 设 计 | ||
教后札记 | ||
发布评论