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