利用图层技术制作网

《利用图层技术制作网》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。

1、第九章利用图层技术制作网页层是一种HTML页面元素，可以将它放置在页面的任意位置。层可以包含文本、图像或其他可放在HTML文档正文中的任何内容。本章介绍在网页制作中图层技术的应用。通过本章的学习，读者应该掌握以下内容：·认识图层·图层的基本操作·图层与表格的操作·利用图层制作动画9.1认识图层有网页创作经历的人可能都有过这样的经历：在网页中，控制文字和对象的位置实在是太困难了，有限的HTML标记和烦琐的源代码极大限制了用户对网页内容的控制能力，为了实现文本和对象在页面中的定位，人们不得不采用其他

2、一些特殊手段，比如利用表格来摆放文本和对象。当页面元素较多，位置较复杂时，单纯利用表格定位就有些不方便了。在Dreamweaver中，通过图层可以实现对页面元素的精确定位，其友好的可视化特性能够帮助用户在文档中轻松地创建图层、定位文档内容，不仅避免了烦琐的源代码输入，而且创建出的页面内容定位效果也非常简洁、高效。什么是层呢？层是网页中用来放置文本、图像、动画、表单、插件等网页元素的载体。没有层的网页像一个平面，即由x轴和y轴组合成的二维空间，而层所确定的区域是在z轴上，它摆脱了二维平面的束缚，形

3、成了一个三维空间结构，如图9-1所示。同时，层与层之间的关系也由z轴的坐标来决定。一般来说，默认后建立的层的z值大，先建立的层z值小，z值大的层可以覆盖z值小的层，当然也可以通过调整来改变先前层的叠放次序。层不仅可以有特殊的位置，也可以有丰富的内容。层可以包含文字、图像、表单、插件，层中甚至可以包含另一个层。由于层可以具有特殊的位置和内容，因此，在网页制作中也可以用层来进行页面布局，可以实现页面元素的精确定位。把层和时间轴配合使用，可以很方便地设计出动态页面效果，层与行为配合使用还可以很方便地制

4、作出滚动字幕、下拉式菜单等页面效果。9.2图层的基本操作9.2.1创建图层当在文档中放置层时，Dreamweaver将在代码中插入该层的HTML标签。可以选择利用Dreamweaver将div标签或span标签用于层中。默认情况下，Dreamweaver会使用div标签创建层。div和span标签之间的区别在于浏览器不支持层在div标签之前和之后放置额外的换行符。也就是说，div标签是块级别的元素，而span标签则是内联元素。大多数情况下，在不支持层的浏览器中，最好让层内容出现在自己的段落中，因

5、此大多数情况下最好使用div而不是span。若要进一步提高在较早浏览器中的可读性，应注意放置层代码的位置。定义层的代码可以位于HTML文件正文中的任意位置。当在Dreamweaver中绘制一个层时，该层会显示在指定的地方，但Dreamweaver将在页开头且紧接在body标签之后插入该层的代码(如果使用的是“插入层”命令而不是绘制层，层代码将在插入点处插入)。如果创建一个嵌套层，Dreamweaver会在定义父层的标签内插入代码。Dreamweaver可以方便地在页面上创建层并精确地将层定位。D

6、reamweaver提供了几种不同的方法来创建层，下面介绍几种常用的方法。1.利用工具创建图层(1)单击对象面板上的“描绘图层”按钮。(2)将鼠标移动到文档窗口中，鼠标指针会变成“十”字形状。(3)在文档窗口中将要放置图层的位置上按下鼠标左键。(4)拖动鼠标，根据需要绘制图层的大小，释放鼠标，图层就被放置在所希望的位置上，如图9-2所示。图9-2描绘图层2.通过菜单创建图层(1)将插入点放置在文档窗口中。(2)单击“插入”→“层”命令，即可在文档窗口中插入一个预设大小的图层。3.拖动法创建图层将

7、对象面板上的“描绘图层”按钮直接拖动到文档中，即可在文档中放置一个预设大小的图层。9.2.2激活图层要把对象放入图层中，首先要激活图层。未被选中的图层如图9-3所示。把鼠标放至层内任意位置单击，即可激活层。此时，光标在层中闪烁，被激活的层的边界突出显示(由灰色变成黑色)，选择手柄也同时显示出来，如图9-4所示。图9-3未选中的图层图9-4被击活的图层9.2.3选中图层1.选中一个图层要选中一个图层，有如下几种方法。方法一：单击文档中的图层标记，即可选中对应的图层，如果图层标记没有显示，可以打开“

8、查看”菜单，选择“可视化助理”，在其下拉菜单中选择“隐藏元素”命令，显示“不可见元素”命令。选中的图层，在其边框上会出现八个调整手柄，如图9-5所示。通过拖动手柄可以调整图层的大小。方法二：单击图层中的任意位置，首先激活图层，然后单击图层右上角的选择柄口，即可选中该图层。方法三：单击图层边框，即可选中该图层。方法四：在没有图层被激活的情况下，按Shift键，在单击图层中的任意位置，即可选中该图层。方法五：如果选中了多个图层，按住Ctrl+Shift键，再单击要选中的图层，即可选中该图层，而取消对