《网页设计与制作》 教学课件 主讲人：湖南铁道职业技术学院陈承欢 HUNAN RAILWAY PROFESSIONAL TECHNOLOGY COLLEGE
Hunan Railway Professional Technology College 主讲人：湖南铁道职业技术学院 陈承欢 《网页设计与制作》 教学课件
教学单元27：制作网页特效 一、课程引导 二、明确知识技能目标 湖南城道顾营政外学院 三、展示网页浏览效果 主要教学环节 四、分析操作任务 五、知识讲解与操作示范 六、课堂模仿实践 七、疑难解析 八、归纳总结 九、布置习题 网页设计与制作
教学单元27：制作网页特效 主 要 教 学 环 节 五、知识讲解与操作示范 一、课程引导 二、明确知识技能目标 三、展示网页浏览效果 四、分析操作任务 六、课堂模仿实践 七、疑难解析 八、归纳总结 九、布置习题
(一)课程引导 湖南线道 在网页中添加一些恰当的特效，使页面具有一定的 交互性、动态效果，能吸引浏览者的眼球，提高页面的 观赏性、趣味性。本章通过几个典型的实例学习制作网 页特效的方法。 网页设计与制作
（一）课程引导 在网页中添加一些恰当的特效，使页面具有一定的 交互性、动态效果，能吸引浏览者的眼球，提高页面的 观赏性、趣味性。本章通过几个典型的实例学习制作网 页特效的方法
(二) 明确知识技能目标 湖南绒道 (1) 学会利用CSS制作特效的操作方法。 (2)学会使用行为制作特效的操作方法。 (3)学会使用时间轴制作特效的操作方法。 (4)学会使用插件制作特效的操作方法。 网页设计与制作
（二）明确知识技能目标 （1）学会利用CSS制作特效的操作方法。 （2）学会使用行为制作特效的操作方法。 （3）学会使用时间轴制作特效的操作方法。 （4）学会使用插件制作特效的操作方法
三) 展示网页浏览效果 包含多种网页特效的网页15.html浏览效果如图所示。 湖南城道属营政饰学院 神秘谷 也极的酒 种秘参欢迎修 迎光临长达世果之窗 图141 包含多种网页特效的网页浏览效果 网页设计与制作
（三）展示网页浏览效果 包含多种网页特效的网页15.html浏览效果如图所示。 图14-1 包含多种网页特效的网页浏览效果
(四)分析操作任务 湖南线道 (1)在站点“长沙世界之窗”下创建文件夹 “15特效制作”，在该文件夹中创建一个命名为 “15.htm1”的网页 (2)在网页15.html中实现以下特效： 滚动图像 紫族 动感文字 状态栏中文字从右往左滚动 漂浮图片 网页标题不停地滚动 网页设计与制作
（四）分析操作任务 （1）在站点“长沙世界之窗”下创建文件夹 “15特效制作”，在该文件夹中创建一个命名为 “15.html”的网页 （2）在网页15.html中实现以下特效： • 滚动图像 • 动感文字 • 状态栏中文字从右往左滚动 • 漂浮图片 • 网页标题不停地滚动
五) 知识讲解与操作示范 南 14.1使用脚本制作特效 14.1.1利用HTML标记制作特效 创建命名为15.html的网页，在该网页中实现滚动图像的特效。 道 在HTML文档中，可以使用标记实现滚动文字、滚动图片、 滚动表格的效果。 14.1.2利用CSS制作特效 薰 在网页15.htm1中创建动感文字的特效，具体操作过程如下： 戏 (1)打开网页“15.htm1”,在第二行中输入文字“神秘谷 欢迎你”。 (2)在Dreamweaver8主窗口中，单击菜单【文本】→ 娄 【CSS样式】→【新建】，弹出“新建CSS规则”对话框，在“选 网设计与制作
（五）知识讲解与操作示范 14.1 使用脚本制作特效 14.1.1 利用HTML标记制作特效 创建命名为15..html的网页，在该网页中实现滚动图像的特效。 在HTML文档中，可以使用标记实现滚动文字、滚动图片、 滚动表格的效果。 14.1.2 利用CSS制作特效 在网页15.html中创建动感文字的特效，具体操作过程如下： （1）打开网页“15.html”，在第二行中输入文字“神秘谷 欢迎你”。 （2）在Dreamweaver 8主窗口中，单击菜单【文本】→ 【CSS样式】→【新建】，弹出“新建CSS规则”对话框，在“选
(五) 知识讲解与操作示范 14.1 使用脚本制作特效 择器类型”中选择“类”单选按钮，在“名称”下拉列表框中输 线 入“.text1”,在“定义在”区域选择“仅对该文档”。 (3)单击【确定】按钮，弹出“.textl的CSS规则定义”对话框， 选择“分类”中的“类型”选项，“字体”设置为“华文新 魏”，“大小”设置为“50”，“颜色”设置为“#FF9900”。 蕙 (4)单击“应用”按钮，再在“分类”中选择“扩展”选项， 戏 “过滤”设置为“Glow(Color-=red,Strength=8)”。 (5)单击【确定】按钮关闭对话框。在文档中选中表格第二行的 文字“神秘谷欢迎你”，然后在属性面板中“样式” 琴 克 网页设计与制作
（五）知识讲解与操作示范 14.1 使用脚本制作特效 择器类型”中选择“类”单选按钮，在“名称”下拉列表框中输 入“.text1”，在“定义在”区域选择“仅对该文档”。 （3）单击【确定】按钮，弹出“.text1的CSS规则定义”对话框， 选择“分类”中的“类型”选项，“字体”设置为“华文新 魏”，“大小”设置为“50”，“颜色”设置为“#FF9900”。 （4）单击“应用”按钮，再在“分类”中选择“扩展”选项， “过滤”设置为“Glow(Color=red, Strength=8)”。 （5）单击【确定】按钮关闭对话框。在文档中选中表格第二行的 文字“神秘谷欢迎你”，然后在属性面板中“样式
(五)知识讲解与操作示范 14.1使用脚本制作特效 湖南鐵道 下拉列表框中选择新建的“text1”样式。 (6)将文字设置成从左往右滚动的效果。 (7)保存网页文档，浏览该网页，观察其效果。 14.1.3利用JavaScript制作特效 在网页l5.html中编写JavaScript脚本，使状态栏中的文字 从右往左滚动。具体操作过程如下： (1)在HTML文档中HEAD部分编写代码： 琴 (2)在添加如下代码： (3)保存网页文档，浏览该网页，观察其效果。 网页设计与制作
（五）知识讲解与操作示范 下拉列表框中选择新建的“text1”样式。 （6）将文字设置成从左往右滚动的效果。 （7）保存网页文档，浏览该网页，观察其效果。 14.1.3 利用JavaScript制作特效 在网页15.html中编写JavaScript脚本，使状态栏中的文字 从右往左滚动。具体操作过程如下： （1）在HTML文档中HEAD部分编写代码： （2）在添加如下代码： （3）保存网页文档，浏览该网页，观察其效果。 14.1 使用脚本制作特效
五)知识讲解与操作示范 (2) 14.2使用行为制作特效 南 应用Dreamweaver8的行为实现以下特效： 1.检查浏览器的类型及版本。 2. 道 页面载入时播入音乐。 3.页面载出（用户离于页面）时弹出信息窗口。 实现过程如下： (1)打开网页“15.htm1”。 或 (2)打开行为面板，在Dreamweaver8主窗口中，单击菜单【窗 口】→【行为】，打开“行为”面板。 3.实现“检查浏览器”的行为 琴 (1)在嵌套表格最后一行输入文字“检查浏览器”，选择“检查 浏览器”，设置其链接为“#”，即空链接。 网页设计与制作
（五）知识讲解与操作示范（2） 14.2 使用行为制作特效 应用Dreamweaver 8的行为实现以下特效： 1．检查浏览器的类型及版本。 2．页面载入时播入音乐。 3．页面载出（用户离于页面）时弹出信息窗口。 实现过程如下： （1）打开网页“15.html”。 （2）打开行为面板，在Dreamweaver 8主窗口中，单击菜单【窗 口】→【行为】，打开“行为”面板。 3．实现“检查浏览器”的行为 （1）在嵌套表格最后一行输入文字“检查浏览器”，选择“检查 浏览器”，设置其链接为“#”，即空链接