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

《网页显示隐藏层的步骤方法》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、实验18显示—隐藏层实验要求：通过实验，掌握显示—隐藏层动作的基本使用方法，对显示—隐藏层事件的设置比较清晰的理解。说明“显示—隐藏层”动作可以显示、隐藏或恢复一个或多个层的默认可见性。此动作作用于在用户与页进行交互显示信息。“显示—隐藏层”还可用于创建预先载入层，即一个最初挡住网页内容的较大层，在所有页组件都完成载入后该层即消失。对应知识点：l行为面板的使用l设置行为事件l显示—隐藏层对应《MacromediaDreamweaverMX2004标准教程》第13章的内容。实验课时：2课时实验素材l6张风景图片（可在本书配套光盘exp17-19suca

2、i18文件夹中查找使用）。实验步骤1.启动Dreamweaver软件，选择菜单“文件”→“新建”命令，创建HTML网页。2.在属性面板中单击“页面属性”按钮，在对话框中设置大小为“12像素”，文本颜色为白色(色标值为#FFFFFF)，背景颜色为浅绿色（色标值为#C8F1AF）。如图18—1所示。3.单击“确定”按钮，返回网页编辑窗口。在文档面板“标题”编辑框内输入“风光图片欣赏”。图18-1设置页面属性对话框1.按CTRL+S键保存网页在一新建文件夹中，命名为“page18.htm”。2.从本书配套光盘exp17-19sucai18文件夹中复制6张风

3、光图片文件，粘贴到网页相同文件夹下的“images”文件夹内。3.在网页空白处单击，按两次Enter键，使插入点与顶部空两行。单击插入面板的“表格”按钮，在“表格”对话框中设置行数为2，列数3，表格宽度为500像素，边框粗细，单元格边距和单元格间距均为0，单击“确定”按钮，表格插入网页中，如图18-2所示。4.拖动鼠标，选择第1行的3个单元格，在属性面板中单击“合并所选单元格”按钮，在“垂直”下拉列表中选择“顶端”选项，在“高”编辑框内输入“50”。5.在此单元格内输入文字“风光图片欣赏”。拖动鼠标选中文字，在属性面板中设置字体为“黑体”，大小为“24

4、像素”，颜色为“绿色（色标值为#009900）”，并单击“粗体”按钮和“居中对齐”按钮，效果如图18-3所示。图18-2在网页中插入表格图18-3设置文字样式1.切换插入面板到布局类别，单击“描绘层”按钮，在网页中拖动鼠标绘制一个层。单击层锚记，拖动到第2行第1个单元格内。如图18-4所示。说明如果层锚记没有显示，选择菜单“编辑”→“首选参说”命令，在对话框中选择“不可见元素”分类，勾选“层锚记”复选框即可。2.选中层锚记，在属性面板中删除“左”,“上”编辑框内的数值，设置Z轴为“1”，“可见性”下拉列表中选择“visible”选项。如图18-5所示。

5、图18-4拖动层锚记到单元格内图18-5设置层的属性面板说明删除“左”，“上”编辑框内的数值，可见使层跟随层锚记的位置定位在单元格内。1.在层内插入2行1列，宽度为100%的表格。在第1行单元格内插入图像“hgs-s.jps”，在第2行单元格内内输入文字“黄果树瀑布”，在属性面板中设置单元格背景颜色为绿色(色标值#009900)，高位20像素，并单击“居中对齐”按钮，完成效果如图18-6所示。2.选择菜单“窗口”→“层”命令，打开层面板。单击“Layer1”前面的眼睛使图层layer1隐藏，如图18-7所示。这样方便下一个层的制作。图18-6在层中插入

6、图片及文字图18-7隐藏图层113.再插入一个图层，拖动层锚记到图层layer1的右层。在属性面板中删除“左”，“上”编辑框内的数值，设置“宽”和“高”分别为280px和236px。在图层内插入图像文件“hgs,jpg”，效果如图18-8所示。14.在层面板中设置图层Layer2隐藏。在第2，3个单元格内同样制作类似的图层。图片下面的名称分别为“漓江山水”和“山峡风光”。15.完成后三张小图片的图层名称分别为“Layer1”，“Layer3”和“Layer5”，三张大图片的图层名称分别为“Layer2”，“Layer4”和“Layer6”。16.在层面

7、板中设置6个图层均为隐藏状态。分别设置图层Layer2，Layer4，Layer6的Z轴为4，5，6，层面板显示如图18-9所示。图18-8绘制图层layer2并插入图片图18-9在层面板中设置图层名称和z轴顺序17.选择菜单“窗口”→“行为”命令，打开行为面板。选中图层Layer1的层锚记，单击行为面板上的“+”按钮，在菜单中选择“显示-隐藏层”选项。如图18-10所示。图18-10选择层选择行为面板的“显示-隐藏层”选项说明在给层附加行为时，注意“标签”面板上会显示