网页显示隐藏层的步骤方法.doc

实验18 显示隐藏层实验要求： 通过实验，掌握显示隐藏层动作的基本使用方法，对显示隐藏层事件的设置比较清晰的理解。 说明 “显示隐藏层”动作可以显示、隐藏或恢复一个或多个层的默认可见性。此动作作用于在用户与页进行交互显示信息。“显示隐藏层” 还可用于创建预先载入层，即一个最初挡住网页内容的较大层，在所有页组件都完成载入后该层即消失。对应知识点： l 行为面板的使用l 设置行为事件l 显示隐藏层 对应Macromedia Dreamweaver MX2004 标准教程第13章的内容。 实验课时：2课时 实验素材l 6张风景图片（可在本书配套光盘exp17- 19sucai18文件夹中查找使用）。 实验步骤1. 启动Dreamweaver 软件，选择菜单“文件”“新建”命令，创建HTML网页。2. 在属性面板中单击“页面属性”按钮，在对话框中设置大小为“12像素”，文本颜色为白色(色标值为#FFFFFF)，背景颜色为浅绿色（色标值为#C8F1AF）。如图181所示。3. 单击“确定”按钮，返回网页编辑窗口。在文档面板“标题”编辑框内输入“风光图片欣赏”。图18-1 设置页面属性对话框4. 按CTRL+S 键保存网页在一新建文件夹中，命名为“page18.htm”。5. 从本书配套光盘exp17-19sucai18文件夹中复制6张风光图片文件，粘贴到网页相同文件夹下的“images”文件夹内。6. 在网页空白处单击，按两次Enter键，使插入点与顶部空两行。单击插入面板的“表格”按钮，在“表格”对话框中设置行数为2，列数3，表格宽度为500像素，边框粗细，单元格边距和单元格间距均为0 ，单击“确定”按钮，表格插入网页中，如图18-2所示。7. 拖动鼠标，选择第1行的3个单元格，在属性面板中单击“合并所选单元格”按钮，在“垂直”下拉列表中选择“顶端”选项，在“高”编辑框内输入“50”。8. 在此单元格内输入文字“风光图片欣赏”。拖动鼠标选中文字，在属性面板中设置字体为“黑体”，大小为“24像素”，颜色为“绿色（色标值为# 009900）”，并单击“粗体”按钮和“居中对齐”按钮，效果如图18-3所示。 图 18-2 在网页中插入表格 图 18-3 设置文字样式9. 切换插入面板到布局类别，单击“描绘层”按钮 ，在网页中拖动鼠标绘制一个层。单击层锚记，拖动到第2行第1个单元格内。如图18-4 所示。 说明 如果层锚记没有显示，选择菜单“编辑”“首选参说”命令，在对话框中选择“不可见元素”分类，勾选“层锚记”复选框即可。10. 选中层锚记，在属性面板中删除“左”,“上”编辑框内的数值，设置Z轴为“1”，“可见性”下拉列表中选择“visible” 选项。如图18-5所示。 图 18-4 拖动层锚记到单元格内 图18-5 设置层的属性面板说明 删除“左”，“上”编辑框内的数值，可见使层跟随层锚记的位置定位在单元格内。11. 在层内插入2行1列，宽度为100% 的表格。在第1 行单元格内插入图像“hgs-s.jps”，在第2行单元格内内输入文字“黄果树瀑布”，在属性面板中设置单元格背景颜色为绿色(色标值#009900)，高位20像素，并单击“居中对齐”按钮，完成效果如图18-6所示。12. 选择菜单“窗口”“层”命令，打开层面板。单击“Layer1”前面的眼睛使图层layer1隐藏，如图18-7所示。这样方便下一个层的制作。 图 18-6 在层中插入图片及文字 图18-7 隐藏图层113. 再插入一个图层，拖动层锚记到图层layer1的右层。在属性面板中删除“左”，“上”编辑框内的数值，设置“宽”和“高”分别为280px和236px 。在图层内插入图像文件“hgs,jpg”，效果如图18-8所示。14. 在层面板中设置图层Layer2隐藏。在第2，3 个单元格内同样制作类似的图层。图片下面的名称分别为“漓江山水”和“山峡风光”。15. 完成后三张小图片的图层名称分别为“Layer1”，“Layer3”和“Layer5”，三张大图片的图层名称分别为“Layer2”，“Layer4”和“Layer6”。16.在层面板中设置6个图层均为隐藏状态。分别设置图层Layer2，Layer4，Layer6的Z轴为4，5，6，层面板显示如图18-9所示。 图 18-8 绘制图层layer2并插入图片 图18-9 在层面板中设置图层名称和z轴顺序 17.选择菜单“窗口”“行为”命令，打开行为面板。选中图层Layer1的层锚记，单击行为面板上的“+”按钮，在菜单中选择“显示-隐藏层”选项。如图18-10所示。图18-10 选择层选择行为面板的“显示-隐藏层”选项说明 在给层附加行为时，注意“标签”面板上会显示标签。如果在选中层之后，无法附加行为，则可能是因为默认的浏览器设置不支持给层附加行为。用户可先在弹出的菜单中选择“显示事件”，然后选择“IE4.0”或更高版本的浏览器，这样，再次单击“行为”面板上加号按钮打开行为列表时，“显示-隐藏层”命令就可用了。18.打开“显示-隐藏层”对话框，在“命名的层”列表中选择“层Layer2”，单击下面的“显示”按钮 ，如图18-11所示，在列表“层Layer2”后面显示了文字“显示”。 图18-11 设置图层layer2 显示 19.单击“确定”按钮，在行为面板下的列表显示增加的“显示-隐藏层”动作，如图18-12所示。 说明 在行为中添加动作后，通常列表前面的事件都是“onClick”，单击此名称可以在弹出列表中选择更多的事件。20. 单击“onClick ”事件，弹出事件列表，在列表中选择“onMouseOver ”选项，如图18-13所示。 图18-12 行为面板上显示增加的动作 图18-13 选择onMouseover事件 说明 对图层Layer1行为的设置，表示当鼠标经过图层Layer1时，显示图层Layer2。实际显示效果为鼠标经过小图片时，显示图片的放大效果。21.选中图层Layer2的层锚记，在行为面板中选择“显示-隐藏层”命令，打开“显示-隐藏层”对话框。在“命名的层”列表中选择“层Layer2”，单击下面的隐藏按钮 ，如图18-14 所示，在列表“层Layer2”后面出现了文字“隐藏”。22.单击“确定”按钮，在行为面板下的列表上显示增加的“显示-隐藏层”动作。单击“OnClick”事件，在事件列表中选择“onMouseOut”选项。如图18-15所示。说明 对图层Layer2行为的设置，表示当鼠标移出图层Layer2 时，隐藏图层Layer2。实际显示效果为鼠标移出大图片的范围时，图片即隐藏起来 图 18-14 设置图层layer2隐藏 图 18-15 选择onMouseout 事件 23 .使用同样的方法设置图层Layer3 ，Layer4 ，Layer5和Layer6 的显示-隐藏效果，原理相同。24. 设置完成每个层的行为后，在层面板中，使图层Layer1，Layer3 ，Layer5为显示状态，如图18-16所示。 图18-16 设置图片为显示状态25.按CTRL+S 键保存网页，按F12 在浏览器中查看网页效果如图18-17所示。 鼠标不经过任何图像 鼠标经过黄果树瀑布图像时的放大效果 图18-17 网页在浏览器中显示效果 鼠标经过桂林山水图象时的放大效果 鼠标经过山峡风光图象时的放大效果 图 18-17 （续）试验作业n 模仿1. 创建网页，在网页中插入表格。2. 在第1行单元格内制作标题文字，并设置文字效果。3. 在第2行单元格内插入层。4. 在每个层中插入图像，文字，并设置其效果。5. 设置每个层的显示-隐藏行为。6. 设置行为事件选项。7. 在层面板中设置图层的显示或隐藏，以及Z轴的顺序。n 创作1. 参考本书配套光盘exp17-19site18文件夹中的网页图层显示-隐藏效果，设计自定义图层样式。如图18-18图18-20 所示。2. 创建网页，制作网页具体内容。3.