《利用层精确定位网页元素.ppt》由会员分享，可在线阅读，更多相关《利用层精确定位网页元素.ppt（33页珍藏版）》请在三一办公上搜索。
1、第十一章 利用层精确定位网页元素,2011-4-26,学习要点,层的基础知识创建层层的基本操作应用层排版,如果您觉得用表格定位页面元素太难掌握，不妨尝试利用层。层的好处是可以放置在页面上任何位置。层是一种页面元素，可以包含文本、图像或是其他HTML文档，可以使页面上的元素进行重叠或复杂的布局。使用DW 8可以方便地在页面上创建层，并精确地定位层，可以对层进行选择、移动、调整大小和对齐等操作。,11.1 层的基础知识,最初的页面排版是完全平面式的，在HTML 2.0被应用以后，表格得到了广泛的应用，设计者可以精确地布置页面上的元素。,但是随着页面复杂程度的增加，设计者越想精确布局，页面的表格就越
2、复杂，从而给设计者和浏览者都带来了一定的困难，设计者无法随心所欲的放置页面元素，而表格的复杂化带来了浏览器解释时间的增加，使用户等待时间加长。,为了解除这些困扰，W3C在新的CSS中包含了一个绝对定位的特性，它允许设计者将页面上的某个元素定位到任何地方，而且除了平面上的并行定位，还增加了三维空间的定位z-index，因为z-index定义了的顺序，类似于图形设计中使用的图层，所以拥有了z-index属性的元素被的称为层。,层的出现使网页从二维平面拓展到三维。可以使页面上元素进行重叠和复杂的布局。,层的主要功能如下：有了层以后可以将元素置于层中，因为层可以重叠，所以就产生了许多重叠效果。可以利用
3、层来精确定位网页元素。它可以包含文本、图像甚至其他层，凡是HTML文件可包含的元素均可包含在层中。层还有非常特殊的功能，就是通过应用时间轴可以使其移动和变换。这样在层中放置一些图片或文本，就能够实现动画效果。层可以转换为表格，为不支持层的浏览器提供解决方法。层可以显示和隐藏，利用这一功能可以实现网页导航中的下拉菜单,在HTML中，层的描述如下：,层一般放置在标签中，但它也可以是标签，只是在跨浏览器的情况下，标签有更好的兼容性，虽然IE和NC都支持这两个标签。,11.2 创建层,DW 8可以方便的在网页上创建层，并精确的定位层的位置。创建层主要有两种方法：使用插入菜单使用插入栏注意：当在面板中勾
4、选“防止重叠”选项后，可以在现有层前面创建层，在现有层上移动层或调整层大小或将某个层嵌套在现有层中。,11.3 设置层的属性,选把一个层后，就可以设置层的属性了：层编号：层的名称，用于识别不同的层左：层的左边界距离浏览器窗口左边界的距离。上：层的上边界距离浏览器窗口上边界的距离。宽：层的宽高：层的高Z轴：层的Z轴顺序,背景图像：层的背景图可见性：层的显示状态，包括default,inherit,visible和hidden四个选项背景颜色：层的背景颜色剪辑：用来指定层的哪一部分是可见的，输入的数值是距离层4个边界的距离,溢出：如果层里面的文字太多或图像太大，层的大小不足以全部显示的时候，有以下
5、选择：Visible：超出的部分照样显示Hidden:超出的部分隐藏Scrool：不管是否超出，都显示流动条Auto：有超出时，才出现滚动条,11.4 层的基础操作,利用层可以精确的定位网页元素。本节通过一个简单的实例讲述如何选择层、设置层的背景颜色、设置层的可见性等基本操作。步骤1 在网页文档中单击选中层layer1，在属性面板中将“左”、“上”、“宽”、“高”分别设置为191px、82px、78px、156px,提示：选择层有如下方法：单击文档窗口左上角的层标签来选定层将光标置于层内，然后在文档窗口底边标签条中选择标签 单击层的边框线单击层面板上的层名称如果要选定两个以上的层，只要按住sh
6、ift键，然后逐个单击层手柄，就将层同时选定。,步骤2 单击选中层layer2，在属性面板中从“背景颜色”中选择相应的颜色。步骤3 在属性面板中的“可见性”选择hidden选项。步骤4 选择“窗口层”命令，打开“层”面板，在层layer1前面双击，出现图标。,一个页面中可以画出很多的层，这些层都会列在层面板中。层之间也可以相互重叠。层面板可以通过菜单窗口菜单选“层”打开。,这里我们需要对几个概念进行解释。层有隐藏和显示的属性。这是层的一个重要属性和以后说到的行为相结合就变成了重要的参数。单击层面板列表的左边，可以打开关闭眼睛。眼睛睁开和关闭表示层的显示和隐藏。层还有一个概念就是层数，层数决定了
7、重叠时哪个层在上面哪个层在下面。比如层数为的层在层数为的层的上面。改变层数就可以改变层的重叠顺序。层面板上面还有一个参数就是防止层重叠。一旦选中，页面中层就无法重叠了。层还有一种父子关系也就是隶属关系。在层面板中是这样表示的。,图中Layer2挂在Layer1的下面。Layer1为父层，Layer2为子层。在页面中拖动Layer1，Layer2也跟着动起来。因为他们已经链在一起了，并且Layer2隶属于Layer1。父层移动会影响到子层。移动layer2层，Layer1层不动。也就是子层不会影响到父层。要建立这样的一种隶属关系方法很简单。在层面板中按Ctrl键将子层拖拽到父层即可。,11.5
8、应用层排版,虽然通过层定位网页元素比表格方便很多，但是由于受到浏览器版本的限制，不是所有的浏览器都支持层，只有IE 4.0以上的版本才能支持。,11.5.1 将层转换为表格,一般先使用层将元素精确定位，然后再将层转换为表格，具体操作步骤如下：在网页中单击选中层layer1，选择“修改转换层到表格”命令，弹出“转换层为表格”对话框。,“转换层为表格”对话框主要有以下参数：最精确：以精确方式转换，为每一层建立一个单元格，并且创建所有附加单元格以保证各单元格之间的距离。最小：以最小方式转换，去掉宽度和高度小于指定像素数目的空单元格。使用透明GIF：用来定义是否使用透明GIF图像,置于页面中央：选择该
9、选项，转换的表格将在页面中居中对齐，否则将左对齐。防止层重叠：该选项一般要选择，如果有层发生重叠，将无法进行转换工作。显示层面板、显示网格、靠齐到网格这3个选项可根据需要勾选。步骤2：单击确定，层转换为表格后的效果。,11.5.2 表格转换为层,如果要改变网页中各元素的布局，使用表格灵活性受到一定的限制，最灵活的方法就是将元素置于层中，然后通过移动层来灵活改变网页的布局，这可能需要将表格转换为层，具体操作步骤如下：步骤1：在上例的基础上，选中选换后的表格，选择“修改转换表格到层”命令，弹出“转换表格到层”对话框。步骤2：单击确定，将表格转换为层。,11.6 实战演练,本章主要讲述如何创建层、层
10、的基本操作、层和表格的互相转换等。下面通过两个实验讲述层的应用利用层布局网页版面利用层制作网页下拉菜单,补充：时间轴,时间轴实根据时间的流逝移动图层位置的方式显示动画效果的一种动画编辑界面，在时间轴中包含了制作动画时所必须的各种功能。,1、时间轴的各项功能,（1）时间轴弹出菜单：表示当前的时间轴名称。（2）时间轴指针：在界面上显示当前位置的帧。（3）不管时间轴在哪个位置，一直移动到第一帧。（4）表示时间指针的当前位置。（5）表示每秒显示的帧数。默认值时15帧。增加帧数值，则动画播放的速度将加快。,（6）自动不放：选中该项，则网页文档中应用动画后自动运行。（7）LOOP（循环）：选中该项，则继续
11、反复时间轴上的动画。（8）行为通道：在指定帧中选选择要运行的行为。（9）关键帧：可以变化的帧。（10）图层条：意味着插入了“层”等对象。（11）图层通道：它是用于编辑图层的空间。,2、在DW8中显示时间轴,选择菜单栏的窗口/时间轴或按快捷键AltF9，则显示时间轴。,3、创建时间轴动画,时间线只能移动分层对象，如果想移动文本或图像之类的对象，可以将其放在层中。1、打开文件，把光标放到页面左上方的位置，在插入面板选择布局绘制层，创建六个层。分别输入文字“小”、“木”、“web”、“欢”、“迎”、“你”，将图层排列在适当的位置。2、打开时间轴。选择层1后，拖动到时间轴的第一行上。3、用同样的方法，把包含有其它文字的层也根据文字的顺序拖动到时间轴的第26行上。,4、为了减慢文字移动的速度，把时间轴中的15帧全部扩展为25帧。5、在时间轴中选择Layer1的第一帧，在属性面板的顶端坐标值（T）中输入（50），这样，可以把文字放置到上侧。6、用同样的方法选择其余层的第一帧后，把顶端坐标值（T）统一设定为（50）。7、为了每个一段时间下落一个文字，从第二个动画条开始向后移动10帧。勾选“自动播放选项”。8、按F12浏览效果。,
