网页中使用图层详解.pptVIP

第8章 网页中使用图层 主要内容 8.1 插入图层 插入层 8.1 插入图层 嵌套层 8.2 层中插入对象 插入对象 8.2 层中插入对象 8.2 层中插入对象 层属性设置 8.3 层的定位 相对定位 8.3 层的定位 绝对定位 要点总结 一、层的设置 1、F2打开“层”面板 2、“层”自动溢出实例 （sample\14\overflow\index.htm） 3、层和表格的转换 （修改——转换） 要点总结 二、利用层制作特效 (一)、显示-隐藏层 （sample\14\showhidelayer\index_ori.htm) 1、添加“层”及其中内容，将其属性设置为“隐藏” 2、在调用该层的图片上打开“行为”面板，选择“显示-隐藏层”命令 3、选择“显示”，鼠标事件改为“onmouseover” 4、再次选择“显示-隐藏层”命令，选择“隐藏”，鼠标事件改为“onmouseout” 要点总结 （二）拖动层 1、创建层并添加内容 2、选中“body”标签，添加行为，选择“拖动层”命令 3、设置属性 4、鼠标事件为“onmousedown” （\sample\14\drag\page.htm） 要点总结 （三）设置层文本（sample\14\layertext\index.htm） 1、将“建议”设置为空链接 2、添加行为，选择“设置文本-设置层文本” 3、选择层、添加文本 4、事件设置为“onmouseover” 三、层特效实例 （\sample\14\page\CLOTH.HTM） 本章小结 8.1 插入图层 1 8.2 层中插入对象 8.3 层的定位 2 3 图8.2 选择“插入”→“布局对象”→“层” 打开附带光盘08 \course\1.html文件，先将光标置于文档窗口中要插入层的位置，然后选择【插入】→【布局对象】→【层】，则可插入一个层，如图8.2所示。 图8.3 插入层 嵌套层就是在一层中创建另一层。创建嵌套层方法如下： 在如图8.3所示的设计视图中，单击【插入】面板中的【描绘层】按钮，然后在已有的层中拖动鼠标，即可创建一个嵌套层，并调整到合适大小和位置，如图8.4所示。 图8.4 插入嵌套层 返回 将光标定位到层内，就可以在层中插入文本、图像、Flash或视频，甚至还可以插入表格。总之，一切在网页中插入的对象，在层中同样可以插入。 1．插入图像 在如图8.4所示的设计视图中，单击层面板中名为layer3的层，选择【插入】→【图像】，弹出【选择图像源文件】对话框，如图8.6所示，选择08 \image\gdl.jpg文件，图像将被插入到层中，同时调整图像的大小与层的大小相同。 图8.6 【选择图像源文件】对话框 2.插入文本 在此例中，我们在layer4上插入一新层，命名为layer5，并在该层中添加若干文字，如图8.7所示。 图8.7 插入文本效果 选择下拉菜单中的【窗口】→【属性】命令，打开【属性】面板。选中创建好的层，【属性】面板中会显示出层的常用属性。单击【属性】面板右下角的扩展箭头，可以看到层的所有属性，如图8.12 所示。在【属性】面板中我们可以对层的相关属性进行设置。 图8.12 层【属性】面板 返回 相对定位（position:relative）指的是层的位置相对于某个元素设置，该元素位置改变，则层的位置相应改变。 最简单的设置相对定位层的的方式就是在插入层之前，先创建一个表格，选中某单元格，在其中插入层，即可在该位置创建一个固定大小的层，这个层就是相对于该位置定位的。需要注意，采用这种方式创建的层，你只可以使用鼠标调整它的大小，绝对不可以移动它的位置！也就是说，在属性面板中将层的【左】和【上】属性值设为空，即不可以有数值。 绝对定位（position:absolute）就是层默认的定位方式，绝对于浏览器左上角的边缘开始计算定位数值。绝对定位也有一定的好处，当网页全部使用层来排版，而且页面是使用默认的居左设置，那么使用默认的绝对定位方式可以方便的排版，提高设计的工作效率。 下面我们通过实例来比较一下相对定位与绝对定位的区别，当浏览器在全屏窗口下显示的效果如图8.13所示；而当浏览器窗口的缩小时，显示效果如图8.14所示。 8.3 层的定位 相对定位 绝对定位 看！位置发生变化吧。台 图8.13 全屏窗口效果 图8.14 缩小窗口效果 返回 在本章中我们对层和嵌套层有了一定的认识，并介绍了在层中插入元素的方法，以及对层属性的设置。为了体现出层的优势，我们结合时间轴面板控制层的运动，制作了具有动态效果的网页。当然层也有它的缺点，因为浏览器窗口大小的不同