2016网页设计与制作DreamWeaver教案：第二十四讲 制作网页特效.docVIP

第二十四讲　制作网页特效 授课日期 班级名称 授课地点 教学课题 第二十四讲制作网页特效 课时 2学时 教学目的 1．学会利用CSS制作特效的操作方法； 2．学会使用行为制作特效的操作方法； 3．学会使用时间轴制作特效的操作方法； 4．学会使用插件制作特效的操作方法。 知识目标 1．利用CSS制作特效； 2．使用行为制作特效； 3．使用时间轴制作特效； 4．使用插件制作特效。 能力目标 在网页灵活使用CSS、行为、时间轴、插件实现网页特效 素质目标 培养学生的创新能力与独立思考能力，并使其具有分析问题、解决问题的能力。 重点 使用行为制作特效的操作方法。 难点 如何获取所需的插件 课型 讲授型＋操作型 教学方法 边讲、边练、讲练结合 教学手段 多媒体教学 教参 中国铁道出版社的《DreamweaverMX2004扩展程序与密技》 教学环节 及 板书设计 时间安排 (分钟) 1．复习提问 JavaScript有哪些常用的内置对象？ 2 2．新课引入 行为是Dreamweaver中最有特色的功能，可以不用编写JavaScrip代码即可实现多种动态网页效果，但Dreamweaver中提供的行为有限，需要进一步拓展行为功能，可以利用第三个提供插件。 3 3．项目展示 先浏览一个带飘浮广告的网页，该网页中的飘浮广告就是应用插件实现的。 5 知识技能目标说明 5 详细讲解各知识点 45 6．问题探讨 （1）如何获取插件 （2）如何利用插件实现网页中的特效 5 课堂实践 15 疑难解析 5 9.课堂小结 本讲介绍了多种网页特效的制作方法，利用行为制作特效比较简便，应该重点掌握，其他几种特效制作方法一般了解。 3 作业布置 2 总计 90 新授内容 1．使用脚本制作特效 （1）利用HTML标记制作特效 （2）利用CSS制作特效 （3）利用JavaScript制作特效 2．使用行为制作特效 3．使用时间轴制作特效 4．使用插件制作特效 （1）插件的安装与管理 （2）插件的应用 案例08 “行为”使网站更智能化_软件下载之家 案例综述： 本例将在原有页面的基础上，添加DW所提供的行为，并通过时间轴在页面中添加动画。当访问者浏览网页时，会同时弹出“欢迎”对话框和另一个通知窗口，并在状态栏中显示文字“欢迎进入本站！”，另外，还利用行为使页面中的图片可以被拖动，单击则转换图片，在页面中有只小鸟在飞舞等，使原本较为呆板的页面更加生动、丰富起来。通过本案例主要使学生了解并掌握行为的使用方法。 操作步骤： 准备页面 从素材ch8中复制全部内容到站点文件夹。 打开站点文件夹下的网页文件index.htm。 设置“弹出信息” 选中body标签。 窗口/行为 单击“添加行为”按钮，选择“弹出信息”。 在“消息”文本框中输入文本“欢迎光临软件下载之家！希望您一直关注我们，谢谢！”。 “行为”面板中出现了“弹出信息”项，单击左侧列表箭头按钮，选择“load”。 打开浏览器窗口 在打开网站首页的同时，弹出一个小型的浏览器窗口，在窗口中显示另外一个页面的内容，如通知或广告，这种效果常用于各大门户网站。 新建一个HTML网页，在HTML文档左上角插入一个层，并输入window.txt通知文字，保存为Window.htm。 进入index.html的编辑窗口。 选中body标签，作为对象。 行为/添加行为/选择“打开浏览器”选项，进行设置：要显示的URL:window.htm，窗口宽度：200，窗口高度：230。 单击“浏览”按钮，选择制作好的弹出窗口的页面window.htm，设置窗口宽度、高度，选择是否在弹出窗口中显示导航工具栏、地址工具栏、状态栏、菜单条。另外，需要时显示滚动条，指定如果内容超出可视区域应该显示滚动条，调整大小手柄使用户能够调整窗口的大小，窗口名称是新窗口的名称。 设置状态栏文本 行为/添加行为/设置文本/设置状态栏文本 “消息”栏中写入“欢迎光临软件下载之家！希望您一直关注我们，谢谢！”。 插入JavaApplet小程序 选中网页的表单中“用户名”后面所对应的“文本域”，行为/添加行为/设置文本/设置文本域文字。 在“文本域”下拉框中选择“文本textfield（用户名后面所对应的‘文本域’名称）在表单form1”，在“新建文本”栏中输入文本“请输入用户名”。 行为事件：onMouseOver。即光标移到该文本域上时，则显示提示文字“请输入用户名”。 创建图像交换功能 选择广告空间中的图像，“属性”面板左边输入图像名称：ggimage1。 行为/添加行为/交换图像。 在“图像”