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

实验18显示—隐藏层实验要求：通过实验，掌握显示—隐藏层动作的基本使用方法，对显示—隐藏层事件的设置比较清晰的理解。说明“显示—隐藏层”动作可以显示、隐藏或恢复一个或多个层的默认可见性。此动作作用于在用户与页进行交互显示信息。“显示—隐藏层”还可用于创建预先载入层，即一个最初挡住网页内容的较大层，在所有页组件都完成载入后该层即消失。对应知识点：行为面板的使用设置行为事件显示—隐藏层对应《Macromedia Dreamweaver MX2004 标准教程》第13章的内容。实验课时：2课时实验素材6张风景图片（可在本书配套光盘exp17- 19\sucai18文件夹中查找使用）。实验步骤启动Dreamweaver 软件，选择菜单“文件”→“新建”命令，创建HTML网页。在属性面板中单击“页面属性”按钮，在对话框中设置大小为“12像素”，文本颜色为白色(色标值为#FFFFFF)，背景颜色为浅绿色（色标值为#C8F1AF）。如图18—1所示。单击“确定”按钮，返回网页编辑窗口。在文档面板“标题”编辑框内输入“风光图片欣赏”。图18-1 设置页面属性对话框按CTRL+S 键保存网页在一新建文件夹中，命名为“page18.htm”。从本书配套光盘exp17-19\sucai18文件夹中复制6张风光图片文件，粘贴到网页相同文件夹下的“images”文件夹内。在网页空白处单击，按两次Enter键，使插入点与顶部空两行。单击插入面板的“表格”按钮，在“表格”对话框中设置行数为2，列数3，表格宽度为500像素，边框粗细，单元格边距和单元格间距均为0 ，单击“确定”按钮，表格插入网页中，如图18-2所示。拖动鼠标，选择第1行的3个单元格，在属性面板中单击“合并所选单元格”按钮，在“垂直”下拉列表中选择“顶端”选项，在“高”编辑框内输入“50”。在此单元格内输入文字“风光图片欣赏”。拖动鼠标选中文字，在属性面板中设置字体为“黑体”，大小为“24像素”，颜色为“绿色（色标值为# 009900）”，并单击“粗体”按钮和“居中对齐”按钮，效果如图18-3所示。图 18-2 在网页中插入表格图 18-3 设置文字样式切换插入面板到布局类别，单击“描绘层”按钮，在网页中拖动鼠标绘制一个层。单击层锚记，拖动到第2行第1个单元格内。如图18-4 所示。说明如果层锚记没有显示，选择菜单“编辑”→“首选参说”命令，在对话框中选择“不可见元素”分类，勾选“层锚记”复选框即可。选中层锚记，在属性面板中删除“左”,“上”编辑框内的数值，设置Z轴为“1”，“可见性”下拉列表中选择“visible”选项。如图18-5所示。图 18-4 拖动层锚记到单元格内图18-5 设置层的属性面板说明删除“左”，“上”编辑框内的数值，可见使层跟随层锚记的位置定位在单元格内。在层内插入2行1列，宽度为100% 的表格。在第1 行单元格内插入图像“hgs-s.jps”，在第2行单元格内内输入文字“黄果树瀑布”，在属性面板中设置单元格背景颜色为绿色(色标值#009900)，高位20像素，并单击“居中对齐”按钮，完成效果如图18-6所示。选择菜单“窗口”→“层”命令，打开层面板。单击“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 选择层选择行为面板的“显示-隐藏层”选项说明在给层附加行为时，注意“标签”面板上会显示div标签。如果在选中层之后，无法附加行为，则可能是因为默认的浏览器设置不支持给层附加行为。用户可先在弹出的菜单中选择“显示事件”，然后选择“IE4.0”或更高版本的浏览器，这