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

锦上添花——用层制作网页特效 1 任务导航 一个普通的网页是一个二维的空间，如果在网页中添加层，那就变成了一个具有立体效果的三维空间。借助层和行为，各种网页待效也就可以粉墨登场了。 本课利用层在“呼救常识”网页上制作网页特效。网页效果如图所示。 2 1.编辑网页 （1）打开网页文件 打开hjcs.html网页文件，修改网页标题为“呼救常识”。执行“修改”→“模板”→“从模板中分离”命令，将网页从模板中分离出来。 （2）制作导航栏 删除“导航栏”区域的表格及内容，将hzzj.html网页中导航栏区域的内容复制粘贴到当前网页的“导航栏”区域的位置。 3 （3）添加网页内容 修改“标题”区域内容，添加“内容”区域的内容，效果如图所示。 4 2.制作层特效 （1）显示/隐藏文本 步骤1：将光标置于网页“内容”区域的第3行表格中，执行“插入”→“布局对象”→AP Div命令，插入层。在层中输入文本内容，如图所示。打开“属性检查器”，修改层的名称为warning，设置层的可见性为hidden。 5 步骤2：选中第2行中的dhbj图像对象，单击“行为”面板中的“添加行为”按钮 ，在弹出的动作菜单中选择“显示-隐藏元素”命令，打开如图所示的“显示-隐藏元素”对话框。在“元素”列表中选择要改变其可见性的层warning，单击“显示”按钮以显示该层。 6 步骤3：单击“确定”按钮后，在“行为”面板上确认激活该行为的事件（onMouseOver）是否正确，如果不正确，单击扩展按钮 ，在弹出的菜单中选择正确的事件。意为当鼠标移动到图片上时，显示该层。 7 （2）替换文本内容 步骤1：在网页“内容”区域的第4～7行的第2列中插入层，并在层中输入文本内容，如图所示。打开“属性检查器”，修改层的名称为text，设置层的背景图像为back2.jpg。 8 步骤2：选中“110报警电话”文本对象，单击“行为”面板中的“添加行为”按钮 ，在弹出的动作菜单中选择“设置文本”→“设置容器的文本”命令，打开“设置容器的文本”对话框。 步骤3：在“容器”下拉列表框中选择要改变内容的层的名称text，在“新建HTML”文本框中输入取代层内容的文本内容，如图所示。设置完毕后，单击