资源简介

中小学教育资源及组卷应用平台
信息技术《设置网页的动态效果》教学设计
课题 《设置网页的动态效果》 单元 一单元 学科 信息技术 年级 八年级
教材分析 《设置网页的动态效果》这一课旨在让学生增进对网页动态效果的设置和掌握使用，以及学会使用各种字幕的方法和步骤，教材编排了“学习任务-任务分析-操作指南-任务小结-知识链接-练习与思考”的系列学习活动，引导学生学会设置字体的各种动态效果，背景音乐和视频，促进对网页内容优化的制作。这些学习对于初中学生来说是非常有必要的，不仅可以增加学生知识，同时也能增强学生对信息的感受力、注意力，以及对信息价值的判断力和洞察力，提高学生信息素养。教材编排合理，贴近学生生活实际，符合七年级学生认知特点。
学习目标 1.信息意识：具有将创新理念运用到设置网页动态效果的学习中去的意识；2.计算思维：能够对学习中产生的问题，进行分解、计算，得出解决办法；3.数字化学习与创新：具有创新、创造能力，将这种能力运用到网页动态效果的学习中；4.信息社会责任：规范使用网络技术解决问题，形成良好道德准则。
重点 掌握制作网页动态效果的方法和步骤
难点 增加网页动态效果，吸引浏览者
教学过程
教学环节 教师活动 学生活动 设计意图
导入新课 导入：师：网页的制作完成，为了吸引客户浏览、选择我们制作的网页还需要在网页上增加一点动态效果，可以在一定程度上吸引顾客。 学生初步了解本节课的学习内容 引出今天的学习内容
讲授新课 在网页中适当加入一些动态元素可以增强网页的吸引力和表现力，但原则是不能影响用户浏览，否则会适得其反。学习任务根据内容特点和展示需要，给网页添加适当的动态效果。拓展延伸网页动态效果有哪些：一、导航栏动态效果二、滚动效果三、图像动态效果四、弹窗效果五、动态按钮效果网页动态效果设计的作用：总的来说，动态效果是网站设计的重要组成部分之一，通过合理运用动态效果，可以为用户提供更好的用户体验。在网站建设过程中，设计师需要根据网站定位和目标用户的需求来选择合适的动态效果，并注意合理控制动态效果的使用，以充分展示网站的专业性和创新性，提升用户对网站的好感度和留存度。任务分析首先，明确哪些网页需要添加动态效果。一个页面中的动态效果不宜过多，而且要跟网站主题、网页内容等相配合，起到衬托、加深印象的作用。然后，要知道FrontPage提供了哪些效果及如何添加。FrontPage提供的动态效果有滚动字幕、悬停按钮、横幅广告管理器、动态HTML效果、网页过渡等。这些动态效果的具体形式是：①滚动字幕。一行文字在屏幕上滚动。②悬停按钮。当光标移动到该按钮上时，它的颜色或背景会发生改变，而光标移开时又能恢复原样。③横幅广告管理器。将一系列的图像按照设置好的顺序和时间间隔在屏幕上显示出来。④动态HTML(DHTML)效果。对网页中选定的文本或图片进行各种动画效果的设置。可以让一张图片从网页中飞出去，也可以产生让文本逐字移出网页的效果。⑤网页过渡。具有多种网页过渡效果，如混合、盒状收缩、盒状放射等。操作指南1.插入滚动字幕(以“自然之旅”页面为例)（1）将光标移到设置滚动字幕处，执行“插入”“Web组件”命令，选择“动态效果”类型中的“字幕”效果，单击“完成”按钮后，打开“字幕属性”对话框。（2）在“文本”文本框中输入“大美河北欢迎您！“。（3）在“背景色”的下拉列表框中选择“黄色”。（4)“方向”“表现方式”等选项区域为默认值，如图所示。（5）单击“样式”按钮，打开“修改样式”对话框，如图所示。（6）单击“格式”按钮，在下拉列表中对字体、段落等进行设置。（7）逐级单击“确定”按钮后，插入滚动字幕。（8）预览滚动字幕的效果。2.使用“横幅广告管理器”插入动态横幅(以“自然之旅”页面中的图片呈现为例)（1）执行“工具”→“自定义”命令，在“自定义”对话框中选择“命令”选项卡，在“类别”列表中选择“插入”命令，在右侧“命令”列表中选择“横幅广告管理器”命令。按住鼠标，将其拖动到“插入”菜单中，释放鼠标。此时，插入菜单中包含“广告管理器”命令，如图所示。（2）在网页中指定位置处，执行“插入”→“横幅广告管理器属性”对话框。单击“添加”按钮，如图所示。（3)在“横幅广告管理器属性”对话框中示，打开“添加横幅广告图片”对话框，将预先准备好的图片添加进来，并进行适当的设置，如图所示，单击“确定”按钮。因为图片是从站外添加进来的，所以一定要注意把图片的存储位置更改到本站的“images文件夹中”。（4）预览并观察效果，修改至满意为止。3.设置文字的动态效果(以“自然之旅”页面中的介绍文字为例)（1）选择文字。（2)执行“工具”→“自定义”命令，在“自定义”对话框中选择“命令”选项卡，在“类别”列表中选择“格式”命令，在右侧“命令”列表中选择“动态HTML效果”命令。按住鼠标，将其拖动到“格式”菜单中，释放鼠标，则“格式”菜单中包含了“动态HTML效果”命令。（3）执行“格式”→“动态HTML效果”命令，打开如图所示的“DHTML效果”工具栏。（4）单击“在”下拉按钮，选择“鼠标悬停”选项。（5)单击“应用”下拉按钮，选择“格式”选项。（6）单击“效果”下拉按钮，选择“选择字体”命令，在“字体”对话框中设置字体格式为“加粗”。（7）预览网页，当鼠标悬停到该段文字时，文字变为粗体。任务小结在本节，实现了在网页中插入滚动字幕、横幅广告管理器和设置文字的动态效果。组件是插入网页的一个对象，而动态效果的设置是对网页中原有的文字、图片进行动画效果的设置。所以，插入组件时，要先确定光标的位置；设置动态效果时，要先选定文字或图片。知识链接1.修改组件的属性用鼠标双击组件，打开对应的组件属性对话框，进行重新设置。2.删除动态效果要删除已设置好的动态效果，需在选中动态效果后，打开“DHTML效果”工具栏，单击“删除效果”按钮。3.设置网页过渡效果（1）执行“格式”，“网页过渡”命令，打开如图所示的“网页过渡”对话框。（2）在“事件”下拉列表中选择相应的事件，在“过渡效果”列表中选择相应的过渡效果，单击“确定”按钮。4.添加视频（1）在网页视图模式下，将插入点放置到要插入视频的位置。（2)执行“插入”→“图片”→“视频”命令。（3）浏览到需要插入的视频文件，选定后打开，然后保存到网站文件夹。5.添加网页背景音乐（1)在网页中单击鼠标右键，在快捷菜单中选择“网页属性”命令，打开“网页属性”对话框。（2）在“常规”选项卡的“背景音乐”选项区域，单击“浏览”按钮，选择背景音乐。（3）取消“不限次数”单选框的勾选，在“循环次数”框中输入或通过微调按钮选择一个数字，以便指定该乐曲播放的次数。注：背景音乐文件要保存到网站文件中。最后，我们一起观看视频再次学习一下，设置网页的滚动字幕制作的方法。练习与思考尝试在网页中插入其他动态组件，如“悬停按钮”等。1.首先执行“插入”菜单中的“Web组件”命令，如图所示。2.在弹出对话框左边列表中选择“ 动态效果”，右边列表中选择“悬停按钮”，单击“确定”，如图所示。3.系统弹出“悬停按钮属性”对话框，在链接到框中输入在按钮被点击时显示的页面URL或文件；4.在按钮文本框中输入悬停按钮的文本标签。如果所创建的图形已经包含一个文本标签，则保留该框的空白状态；5.在宽度和高度框中分别输入以像素计的图片宽度和高度，然后单击确定。6.悬停按钮的大小必须与为悬停效果使用的图片相匹配。完成以后单击“自定义”， 如图所示。7.在“自定义图片”的“按钮”输入框中输入初次打开该页面时看到的图片的URL；8.在“悬停时”框中输入的鼠标悬停在该按钮上时显示的图片。然后单击“确定”，如图所示。阅读材料网页中的色彩搭配1.色彩知识自然界中有多种自然色彩，比如玫瑰是红色的，大海是蓝色的，橘子是橙色的……现实生活中的颜色可以分为彩色和非彩色。黑、白、灰属于非彩色，其他的颜色都属于彩色。任何一种彩色都具备三个属性：色相、明度和纯度。其中，非彩色只有明度属性。在光学中，有三种不能再分解的基本颜色，即红、绿、蓝，它们被称为光学三原色。光学三原色按不同的比例混合后，可以得到各种颜色。遵循“总体协调，局部对比”的原则，通常一个网站的颜色取色环中相同色系的2~3种色。如图所示。拓展延伸1.同类色：指色相性质相同，但色度有深浅之分。（是色相环中15°夹角内的颜色）2.近似色：指相性质相同，色度深浅比较明显（是指色相环中夹角50°左右的两种近似色）3.对比色：是人的视觉感官所产生的一种生理现象，是视网膜对色彩的平衡作用。指在24色相环上相距120°-180°之间的两种颜色，称为对比色。4.补色：又称互补色，余色，亦称强度比色，就是两种颜色（等量）混合后呈黑灰色，那么这两种颜色一定互为补色。色环的任何直径两端相对之色都称为互补色。2.颜色对人的心理影响人们对某种颜色会产生某种普遍的情绪反应，所以，在设计中常常使用不同的颜色来表达不同的意义。下表简单介绍了不同颜色可表达的意义及搭配的注意事项。作业布置请同学们回去制作一个“导航栏”的动态效果，在浏览者看到网页的导航栏时就被吸引，下节课，我们一起看看谁的制作最有创意！ 学生了解网页的动态效果种类学生了解动态网页的作用学生明确实践操作的具体内容学生掌握制作网页动态效果的方法和步骤学生掌握“任务小结”跟“知识链接”的学习内容学生完成课堂练习学生认真阅读“阅读材料”内容，了解颜色一些基本的知识学生了解学习一些基础的色彩知识 拓展延伸学生知识技能增加学生知识技能铺垫后续操作学习提高学生动手实践技能增加学生的知识技能同时也是对本节课的知识点进行总结和概括巩固本节课的学习知识拓展延伸学生知识技能拓展延伸学生知识，增加学生课外知识的学习
课堂练习 同学们一起尝试使用三原色混搭出的其他颜色，并说说其中的小规律。 学生完成课堂练习 巩固所学知识
课堂小结 学习制作网页动态效果的方法与步骤；网页动态效果的类型认识；认识色彩知识。 学生总结本节课的学习内容 总结概括本节课的学习内容
板书 网页动态效果制作方法和步骤认识色彩
21世纪教育网 www.21cnjy.com 精品试卷·第 2 页 （共 2 页）
HYPERLINK "http://www.21cnjy.com/" 21世纪教育网(www.21cnjy.com)(共40张PPT)
《设置网页的动态效果》
河北大学版 初中版第二册
内容总览
学习目标
01
学习任务
02
任务分析
03
操作指南
04
任务小结
05
知识链接
06
目录
07
08
课堂练习
课堂总结
09
10
板书设计
课后作业
教学目标
1.信息意识：具有将创新理念运用到设置网页动态效果的学习中去的意识；
2.计算思维：能够对学习中产生的问题，进行分解、计算，得出解决办法；
3.数字化学习与创新：具有创新、创造能力，将这种能力运用到网页动态效果的学习中；
4.信息社会责任：规范使用网络技术解决问题，形成良好道德准则。
新知导入
网页的制作完成，为了吸引客户浏览、选择，我们制作的网页还需要在网页上增加一点动态效果，可以在一定程度上吸引顾客。
新知讲解
在网页中适当加入一些动态元素可以增强网页的吸引力和表现力，但原则是不能影响用户浏览，否则会适得其反。
学习任务
根据内容特点和展示需要，给网页添加适当的动态效果。
新知讲解
拓展延伸
网页动态效果有哪些：
一、导航栏动态效果
二、滚动效果
三、图像动态效果
四、弹窗效果
五、动态按钮效果
新知讲解
网页动态效果设计的作用：
总的来说，动态效果是网站设计的重要组成部分之一，通过合理运用动态效果，可以为用户提供更好的用户体验。在网站建设过程中，设计师需要根据网站定位和目标用户的需求来选择合适的动态效果，并注意合理控制动态效果的使用，以充分展示网站的专业性和创新性，提升用户对网站的好感度和留存度。
拓展延伸
新知讲解
任务分析
首先，明确哪些网页需要添加动态效果。一个页面中的动态效果不宜过多，而且要跟网站主题、网页内容等相配合，起到衬托、加深印象的作用。然后，要知道FrontPage提供了哪些效果及如何添加。FrontPage提供的动态效果有滚动字幕、悬停按钮、横幅广告管理器、动态HTML效果、网页过渡等。这些动态效果的具体形式是：
新知讲解
①滚动字幕。一行文字在屏幕上滚动。
②悬停按钮。当光标移动到该按钮上时，它的颜色或背景会发生改变，而光标移开时又能恢复原样。
③横幅广告管理器。将一系列的图像按照设置好的顺序和时间间隔在屏幕上显示出来。
④动态HTML(DHTML)效果。对网页中选定的文本或图片进行各种动画效果的设置。可以让一张图片从网页中飞出去，也可以产生让文本逐字移出网页的效果。
⑤网页过渡。具有多种网页过渡效果，如混合、盒状收缩、盒状放射等。
新知讲解
操作指南
1.插入滚动字幕(以“自然之旅”页面为例)
（1）将光标移到设置滚动字幕处，执行“插入”“Web组件”命令，选择“动态效果”类型中的“字幕”效果，单击“完成”按钮后，打开“字幕属性”对话框。
（2）在“文本”文本框中输入“大美河北欢迎您！“。
（3）在“背景色”的下拉列表框中选择“黄色”。
新知讲解
（4)“方向”“表现方式”等选项区域为默认值，如图所示。
（5）单击“样式”按钮，打开“修改样式”对话框，如图所示。
（6）单击“格式”按钮，在下拉列表中对字体、段落等进行设置。
新知讲解
（7）逐级单击“确定”按钮后，插入滚动字幕。
（8）预览滚动字幕的效果。
新知讲解
2.使用“横幅广告管理器”插入动态横幅(以“自然之旅”页面中的图片呈现为例)
（1）执行“工具”→“自定义”命令，在“自定义”对话框中选择“命令”选项卡，在“类别”列表中选择“插入”命令，在右侧“命令”列表中选择“横幅广告管理器”命令。按住鼠标，将其拖动到“插入”菜单中，释放鼠标。此时，插入菜单中包含“广告管理器”命令，如图所示。
新知讲解
（2）在网页中指定位置处，执行“插入”→“横幅广告管理器属性”对话框。单击“添加“按钮，如图所示。
（3)在“横幅广告管理器属性”对话框中示，打开“添加横幅广告图片”对话框，将预先准备好的图片添加进来，并进行适当的设置，如图所示，单击“确定”按钮。
设置图片的大小以及图片交替的效果和显示时间
添加和调整图片顺序
新知讲解
因为图片是从站外添加进来的，所以一定要注意把图片的存储位置更改到本站的“images文件夹中“。
（4）预览并观察效果，修改至满意为止。
新知讲解
3.设置文字的动态效果(以“自然之旅”页面中的介绍文字为例)
（1）选择文字。
（2)执行“工具”→“自定义”命令，在“自定义"对话框中选择“命令”选项卡，在“类别”列表中选择“格式”命令，在右侧“命令”列表中选择“动态HTML效果”命令。按住鼠标，将其拖动到“格式”菜单中，释放鼠标，则“格式”菜单中包含了“动态HTML效果”命令。
（3）执行“格式”→“动态HTML效果”命令，打开如图所示的“DHTML效果”工具栏。
新知讲解
（4）单击“在”下拉按钮，选择“鼠标悬停”选项。
（5)单击“应用”下拉按钮，选择“格式”选项。
（6）单击“效果”下拉按钮，选择“选择字体”命令，在“字体”对话框中设置字体格式为“加粗”。
（7）预览网页，当鼠标悬停到该段文字时，文字变为粗体。
新知讲解
任务小结
在本节，实现了在网页中插入滚动字幕、横幅广告管理器和设置文字的动态效果。组件是插入网页的一个对象，而动态效果的设置是对网页中原有的文字、图片进行动画效果的设置。所以，插入组件时，要先确定光标的位置；设置动态效果时，要先选定文字或图片。
新知讲解
知识链接
1.修改组件的属性
用鼠标双击组件，打开对应的组件属性对话框，进行重新设置。
2.删除动态效果
要删除已设置好的动态效果，需在选中动态效果后，打开“DHTML效果”工具栏，单击“删除效果”按钮。
新知讲解
3.设置网页过渡效果
（1）执行“格式”，“网页过渡”命令，打开如图所示的“网页过渡”对话框。
（2）在“事件”下拉列表中选择相应的事件，在“过渡效果”列表中选择相应的过渡效果，单击“确定”按钮。
新知讲解
4.添加视频
（1）在网页视图模式下，将插入点放置到要插入视频的位置。
（2)执行“插入”→“图片”→“视频”命令。
（3）浏览到需要插入的视频文件，选定后打开，然后保存到网站文件夹。
新知讲解
5.添加网页背景音乐
（1)在网页中单击鼠标右键，在快捷菜单中选择“网页属性”命令，打开“网页属性”对话框。
（2）在“常规”选项卡的“背景音乐”选项区域，单击“浏览”按钮，选择背景音乐。
（3）取消“不限次数”单选框的勾选，在“循环次数”框中输入或通过微调按钮选择一个数字，以便指定该乐曲播放的次数。
注：背景音乐文件要保存到网站文件夹中。
新知讲解
最后，我们一起观看视频再次学习一下，设置网页的滚动字幕制作的方法。
新知讲解
练习与思考
尝试在网页中插入其他动态组件，如“悬停按钮”等。
新知讲解
1.首先执行“插入”菜单中的“Web组件”命令，如图所示。
2.在弹出对话框左边列表中选择“ 动态效果”，右边列表中选择“悬停按钮”，单击“确定”，如图所示。
新知讲解
3.系统弹出“悬停按钮属性”对话框，在链接到框中输入在按钮被点击时显示的页面URL或文件；
4.在按钮文本框中输入悬停按钮的文本标签。如果所创建的图形已经包含一个文本标签，则保留该框的空白状态；
5.在宽度和高度框中分别输入以像素计的图片宽度和高度，然后单击确定。
6.悬停按钮的大小必须与为悬停效果使用的图片相匹配。完成以后单击“自定义”， 如图所示。
新知讲解
7.在“自定义图片”的“按钮”输入框中输入初次打开该页面时看到的图片的URL；
8.在“悬停时”框中输入的鼠标悬停在该按钮上时显示的图片。然后单击“确定”，如图所示。
新知讲解
阅读材料
网页中的色彩搭配
1.色彩知识
自然界中有多种自然色彩，比如玫瑰是红色的，大海是蓝色的，橘子是橙色的……现实生活中的颜色可以分为彩色和非彩色。黑、白、灰属于非彩色，其他的颜色都属于彩色。任何一种彩色都具备三个属性：色相、明度和纯度。其中，非彩色只有明度属性。
新知讲解
在光学中，有三种不能再分解的基本颜色，即红、绿、蓝，它们被称为光学三原色。光学三原色按不同的比例混合后，可以得到各种颜色。遵循“总体协调，局部对比”的原则，通常一个网站的颜色取色环中相同色系的2~3种色。如图所示。
新知讲解
拓展延伸
①同类色：指色相性质相同，但色度有深浅之分。（是色相环中15°夹角内的颜色）
②近似色：指相性质相同，色度深浅比较明显（是指色相环中夹角50°左右的两种近似色）
新知讲解
③对比色：是人的视觉感官所产生的一种生理现象，是视网膜对色彩的平衡作用。
指在24色相环上相距120°-180°之间的两种颜色，称为对比色。
拓展延伸
新知讲解
④补色：又称互补色，余色，亦称强度比色，就是两种颜色（等量）混合后呈黑灰色，那么这两种颜色一定互为补色。色环的任何直径两端相对之色都称为互补色。
新知讲解
2.颜色对人的心理影响
人们对某种颜色会产生某种普遍的情绪反应，所以，在设计中常常使用不同的颜色来表达不同的意义。下表简单介绍了不同颜色可表达的意义及搭配的注意事项。
新知讲解
课堂练习
同学们一起尝试使用三原色混搭出的其他颜色，并说说其中的小规律。
课堂总结
1.学习制作网页动态效果的方法与步骤；
2.网页动态效果的类型认识；
3.认识色彩知识。
板书设计
网页动态效果制作方法和步骤
认识色彩
作业布置
请同学们回去制作一个“导航栏”的动态效果，在浏览者看到网页的导航栏时就被吸引，下节课，我们一起看看谁的制作最有创意！
谢谢
21世纪教育网（www.21cnjy.com)
中小学教育资源网站
兼职招聘：
https://www.21cnjy.com/recruitment/home/admin

展开更多......

收起↑