清华大学版信息技术八下 4.14 锦上添花——用层制作网页特效 课件 (共19张PPT)

锦上添花 ———用层制作网页特效 任务导航 一个普通的网页是一个二维的空间，如果在网页中添加层，那就变成了一个具有立体效果的三维空间。借助层和行为，各种网页待效也就可以粉墨登场了。 本课利用层在“呼救常识”网页上制作网页特效。网页效果如图所示。 1.编辑网页 （1）打开网页文件 打开hjcs.html网页文件，修改网页标题为“呼救常识”。执行“修改”→“模板”→“从模板中分离”命令，将网页从模板中分离出来。 （2）制作导航栏 删除“导航栏”区域的表格及内容，将hzzj.html网页中导航栏区域的内容复制粘贴到当前网页的“导航栏”区域的位置。 （3）添加网页内容 修改“标题”区域内容，添加“内容”区域的内容，效果如图所示。 2.制作层特效 （1）显示/隐藏文本 步骤1：将光标置于网页“内容”区域的第3行表格中，执行“插入”→“布局对象”→AP Div命令，插入层。在层中输入文本内容，如图所示。打开“属性检查器”，修改层的名称为warning，设置层的可见性为hidden。 步骤2：选中第2行中的dhbj图像对象，单击“行为”面板中的“添加行为”按钮 ，在弹出的动作菜单中选择“显示-隐藏元素”命令，打开如图所示的“显示-隐藏元素”对话框。在“元素”列表中选择要改变其可见性的层warning，单击“显示”按钮以显示该层。 步骤3：单击“确定”按钮后，在“行为”面板上确认激活该行为的事件（onMouseOver）是否正确，如果不正确，单击扩展按钮 ，在弹出的菜单中选择正确的事件。意为当鼠标移动到图片上时，显示该层。 （2）替换文本内容 步骤1：在网页“内容”区域的第4～7行的第2列中插入层，并在层中输入文本内容，如图所示。打开“属性检查器”，修改层的名称为text，设置层的背景图像为back2.jpg。 步骤2：选中“110报警电话”文本对象，单击“行为”面板中的“添加行为”按钮 ，在弹出的动作菜单中选择“设置文本”→“设置容器的文本”命令，打开“设置容器的文本”对话框。 步骤3：在“容器”下拉列表框中选择要改变内容的层的名称text，在“新建HTML”文本框中输入取代层内容的文本内容，如图所示。设置完毕后，单击“确定”按钮。 步骤4：在“行为”面板上确认激活该行为的事件（onMouseOver）是否正确，如果不正确，单击扩展按钮 ，在弹出的菜单中选择正确的事件。 （3）拖动网页内容 步骤1：在网页右侧插入层，在层中插入call.jpg图像文件，调整层的大小与图像尺寸一致，如图所示。打开“属性检查器”，修改层的名称为phone。 步骤2：选中标签选择器中的标签，单击“行为”面板中的“添加行为”按钮 ，在弹出的动作菜单中选择“拖动AP元素”命令，打开“拖动AP元素”对话框。 步骤3：在“AP元素”下拉列表框中选择div“phone”选项。单击“取得目前位置”按钮，获取phone层当前位置参数，如图所示。设置完毕，单击“确定”按钮。 步骤4：在“行为”面板上确认激活该行为的事件（onload）是否正确，如果不正确，单击扩展按钮 ，在弹出的菜单中选择正确的事件。 3.制作图像晃动效果 步骤1：选中第2行中的dhbj图像对象，单击“行为”面板中的“添加行为”按钮 ，在弹出的动作菜单中选择“效果”→“晃动”命令，打开如图所示的“晃动”对话框，保持默认设置，单击“确定”按钮即可。 步骤2：在“行为”面板上确认激活该行为的事件（onMouseMove）是否正确，如果不正确，单击扩展按钮 ，在弹出的菜单中选择正确的事件。 4.测试网页 保存网页文件，按F12键在浏览器中预览网页，测试网页特效。 知识着陆 1.“层”实际上是来自CSS中的定位技术，层可以在网页上随意改变位置。层不能在基于网页模板创建的网页中创建。 2.利用“层”和“行为”可以在网页中实现显示/隐藏文本、替换文本内容、拖动网页内容等 ... ...