《图像处理及网页制作》课件第15章.ppt

1、1 1第15章 网页中层的使用15.1 层的概述层的概述15.2 在网页中插入层在网页中插入层15.3 创建嵌套层创建嵌套层15.4 编辑层编辑层15.5 在层中插入对象在层中插入对象15.6 层与表格的转换层与表格的转换本章小结本章小结2 2层是网页制作的新技术，它给网页设计人员提供了强大的网页控制能力，比表格更加灵活。层技术属动态HTML范畴，通过动态HTML技术可以实现网页的多层化、立体化、动态化，更加丰富了网页的效果。Dreamweaver中对层的操作主要包括:层的插入、创建嵌套层、编辑层、在层中插入对象和层与表格的相互转换。3 3在Photoshop中我们已学过层的应用，在Dream

2、weaver中，层可以被视为一种比较自由和容易控制的容器。在网页制作中利用层的特点，通过分层处理，甚至利用在层中嵌套层的方法，可以将文本、图像、表格、插件定位到页面的任意位置，并且还可实现网页动画和交互技术的应用。15.1 层层 的的 概概 述述4 4层的应用很多，主要包括：对网页中的对象精确定位；实现网页中不同对象的重叠；通过控制层的可见性和多个层的前后覆盖顺序实现特殊效果；以层的应用为基础实现网页动画和交互，如通过分层进行滚动字幕的处理(如图15-1所示)。5 5图15-1 利用“层”制作可交互的滚动字幕的处理6 6在网页中插入层的操作步骤比较简单：将插入点置于要插入新层的位置，执行“插入

3、布局对象层”命令，就在插入点处插入了一个新的层；或者选择“插入”栏中的“布局”标签，单击其中的“描绘层”按钮，并在文档窗口中拖动鼠标也可以绘制出层，如图15-2所示。15.2 在网页中插入层在网页中插入层7 7图15-2 利用“描绘层”按钮插入层8 8嵌套层就是创建在其他层中的层，使用嵌套方法可以将一些层组合在一起。嵌套层随其父层一起移动，并且可以继承父层的可见性。如果要创建嵌套层，只需将插入点置于已经创建的层中，然后执行“插入布局对象层”命令即可。图15-3所示就是创建的嵌套层。15.3 创创建建嵌嵌套套层层9 910 10提示：用户也可以单击“描绘层”按钮，然后按下Alt键不放，在另一个层

4、中拖动并绘制所需的嵌套层。11 11在页面上创建层后，还可以对其进行移动位置、改变大小等编辑操作。15.4 编编 辑辑 层层12 1215.4.1 选定层同所有编辑过程一样，层的编辑也遵循“先选定，后操作”的原则，只有选定一个层后才能对其位置、大小等属性进行修改。要选定一个层，可以使用下列方法之一：单击层内部的任意位置，层矩形的左上角将显示句柄图标；单击句柄图标，即可选定该层。单击状态栏中标签选择器上的源代码标记即可选定层，如图15-4(a)所示。13 13 单击“窗口层”命令，打开如图15-4(b)所示的“层”面板，其中嵌套层以树状结构表示。单击层面板中的层名称(例如Layer1)，即可选定

5、相应的层。14 14 (a)(b)图15-4 层的“源代码标记”和层面板15 15选定多个层：按住Shift键不放，单击要选定的各层内部任意位置。当选定多个层后，最后一个被选定的层的句柄是黑色小方块，其他层的句柄是是空心小方块，如图15-5所示。另外，按下Shift键，然后在“层”面板中单击多个层的名字，也可选定这些层。16 16图15-5 选定多个层17 1715.4.2 移动层选定层，然后将鼠标移至该层左上角的句柄图标处并按住左键，即可拖动该层，如图15-6所示。图15-6(a)表示各层的原始位置和所选定的层，图15-6(b)表示移动后选定层与各层之间的位置关系。18 18 (a)(b)图

6、15-6 移动选定层示意图19 19如果要同时移动多个层，可选定这些层，然后将鼠标移至最后所选层的左上角句柄图标，按住鼠标左键的同时移动所有被选定的层。如图15-7(a)表示选定各层所在的原始位置，图15-7(b)表示移动后各层之间的位置。注意：直接按键盘上的箭头键也可进行层的移动，每按一次箭头键将选定的层沿相应的方向移动一个像素。2020图15-7 移动多个选定层示意图21 2115.4.3 改变层的大小用户可以单独调整一个层的大小，也可以同时调整多个层的大小，使其具有同样的高度和宽度。要改变一个层的大小，先选定该层，然后用鼠标拖曳层周围的任意一个句柄进行缩放处理，如图15-8所示。其中15

7、-8(a)为扩大一个层，15-8(b)为缩小一个层。2222 (a)(b)图15-8 改变一个层的大小2323要改变多个层的大小，可按住Shift键并分别点击选定需改变的层，然后执行“修改对齐设成宽度相同”命令，使选定的层具有相同的宽度；执行“修改对齐设成高度相同”命令，使选定的层具有相同的高度，如图15-9所示。其中，图15-9(b)所示为对多个层进行等宽处理，图15-9(c)所示为对多个层进行等高处理。上面操作中的所谓的相同宽度和相同高度，是指与最后一个被选定层(其句柄为黑色小方决)的宽度和高度相等。2424 图15-9 改变多个层的大小示意图252515.4.4 对齐多个层 使用层的对齐

8、命令，可以对齐两个或者多个层，在对齐多个层时将最后一个被选定的层作为基准。对齐层的操作步骤如下：(1)选定需要对齐的多个层。(2)执行“修改对齐”命令，从其级联菜单中选择一种对齐方式(左对齐、右对齐、顶端对齐、底部对齐)，如图15-10所示。“左对齐”的效果如图15-11所示，图15-11(a)所示为“左对齐”前，图15-11(b)所示为“左对齐”后。2626图15-10 “修改/对齐”菜单2727 (a)(b)图15-11 “左对齐”示意图2828“右对齐”的效果如图15-12所示，图15-12(a)所示为“右对齐”前，图15-12(b)所示为“右对齐”后。(a)(b)图15-12“右对齐”

9、示意图2929“顶端对齐”的效果如图15-13所示，图15-13(a)所示为“顶端对齐”前，图15-13(b)所示为“顶端对齐”后。(a)(b)图15-13 “顶端对齐”示意图3030“底部对齐”的效果如图15-14所示，图15-14(a)所示为“底部对齐”前，图15-14(b)所示为“底部对齐”后。(a)(b)图15-14 “底部对齐”示意图31 3115.4.5 将层靠齐到网格网格作为在文档窗口中移动或调整层大小的一个可视化向导，绘制层时，可以打开网格作为参考，也可以让层自动靠齐到网格。1.显示网格与Photoshop类似，在显示网格的文档窗口中对网页的各种对象进行对齐、定位等操作是非常方

10、便的。单击“编辑网格显示网格”命令，即可显示(打开)网格。网格仅在Dreamweaver中显示，而在浏览器中是看不到的。如果网格已经打开，再次单击“编辑网格显示网格”命令，又可将其隐藏起来(关闭)。3232图15-15 “网格设置”对话框3333如果要设置网格线的颜色和间距，可以单击“编辑网格网格设置”命令，打开“网格设置”对话框；在“网格设置”对话框中，可对“颜色”、“显示网格”、“靠齐到网格”、“间隔”及“显示”等选项进行选择，如图15-15所示。34342.将层靠齐到网格将层靠齐到网格，可以按照下述步骤进行操作：(1)单击“编辑网格靠齐到网格”命令，启动靠齐功能(再次选择该命令，可以关闭

11、靠齐功能)。(2)选定层并拖动它，层将自动靠齐到最近的网格。353515.4.6 通过层面板定义属性层面板不但具有选定层的功能，它还有其他功能，例如，是否允许层相互重叠、指定层的可见性、改变层的叠放次序等。在文档窗口中绘制若干个层后，执行“窗口层”命令即可打开“层”面板，如图15-16所示。3636图15-16“层”面板3737在“层”面板中可以进行如下操作：(1)指定是否允许层重叠。若选中“防止重叠”复选框，可阻止层与层之间的重叠。(2)指定层的可见性。单击列表中的眼睛图标，则列表中的每个层前都会出现该图标(如图15-17所示)。图标中的眼睛呈睁开状时，表示该层是可见的；图标中的眼睛呈闭合状

12、时，表示该层是隐藏的。在图15-17中，Layer3就是隐藏的。3838(3)更改层的名称。双击“名称”列中的层名，使其进入编辑状态，然后输入新的名称。(4)更改层的叠放次序。层的叠放次序是由“Z”列中的数字决定的，数字越小，说明显示的等级越低。在浏览器中预览该网页时，Z数字小的层会被Z数字大的层覆盖。改变层的叠放次序有两种方法：在“层”面板中，用鼠标按住要改变次序的层，将其向上或向下拖到适当的位置，此时移到的位置处会出现一条水平线，释放鼠标即可将该层移到此位置。图15-17所示为将Layer1移到Layer2之上的效果。3939 在“层”面板中，单击“Z”列的数字，此时数字变成可编辑状态，然

13、后修改数字的大小可以改变叠放次序。4040图15-17 改变层的叠放次序41 4115.4.7 通过层“属性”面板定义属性在网页中选定某个层后，可以看到“属性”面板变成如图15-18所示的形式。在层的“属性”面板中各选项的意义如下：“层编号”：指定层的名称。“左”、上”：指定层相对于页面或被嵌套层的左上角的位置。“宽”、“高”：指定层的宽度和高度。如果层中内容超过指定值的大小，这些值将被忽略。“Z-Index”：指定层的叠放次序。编号大的层出现在编号小的层上面。4242图15-18 层“属性”面板4343“显示”：设置可见性参数，包括default(默认)、visible(可见)、hidden

14、(隐藏)和inherit(继承父层的可见性)。“背景图像”：指定层的背景图像。“背景颜色”：指定层的背景颜色。“溢出”：使用SPAN、DIV作为层的标签时，可以在“溢出”选项中指定层的内容超过其大小时的处理方式。若选择“visible”(可见)，则扩展层大小使其所有内容均可见；选择“hidden”(隐藏)，则保持层的大小不变，裁掉所有超出层大小的内容；4444若选择“scroll”(添加滚动条)，不管内容是否超过层的大小都提供滚动条；选择“auto”(自动)，则只有在内容超出层的大小时才出现滚动条。“剪辑”：指定层中的可见区域，输入代表从层的边界到页面距离的数值。4545如前所述，层是一种容器

15、，可以向其中插入任何对象。在层中插入对象的具体操作步骤如下：(1)单击层中的任意位置，将插入点置于层中，使该层处于激活状态。15.5 在层中插入对象在层中插入对象4646(2)在层中输入文本或者插入图像，方法与在空白页面中的操作相同，如图15-19所示。4747图15-19 在层中插入对象4848通过前面的介绍，可以看到层的定位、排列和嵌套功能比表格更方便、更随心所欲。我们可以把原来使用表格的网页转换成层的模式，因为运用层可以很快地制作出复杂的布局。不过，低版本的浏览器是不支持层的，因此使用表格可以兼顾更多的访问者。为此，Dreamweaver提供了层与表格相互转换的功能。15.6 层与表格的

16、转换层与表格的转换494915.6.1 将表格转换为层将表格转换为层，可以按照下述步骤进行操作：(1)打开由表格制作的网页。(2)执行“修改转换表格到层”命令，打开如图15-20所示的“转换表格为层”对话框。5050图15-20 “转换表格为层”对话框51 51(3)在“转换表格为层”对话框中，可以设置如下选项：“防止层重叠”：在创建、移动或调整大小时对层的位置进行控制，使其互相之间不会重叠。“显示层面板”：将显示“层”面板。“显示网格”：在网页上显示网格，可以利用网格来帮助定位层。“靠齐到网格”：使层靠齐到网格。(4)设置选项后，单击“确定”按钮，表格就会转换为层(如图15-21所示)。空白

17、单元格将不会转换为层，除非其中设置了背景颜色。5252图15-21 表格转换为层示意图535315.6.2 将层转换为表格 为了兼容低版本的浏览器，可以将用层制作好的页面转换为表格布局的页面，转换过程中Dreamweaver会自动生成一个结构复杂的表格，同时尽量保持原来层模式下的页面布局不变。将层转换为表格的具体操作步骤如下：(1)打开用层制作的页面。(2)执行“修改转换层到表格”命令，打开如图15-22所示的“转换层为表格”对话框。5454图15-22 “转换层为表格”对话框5555(3)在“转换层为表格”对话框中，可以设置各个选项，其中主要的有：“最精确”：为每个层创建一个单元格，层之间的

18、空间使用空白单元格代替，精确再现页面原有的布局。“最小：合并空白单元”：去掉宽度或高度小于指定像素数目的空单元格，就是说当某些层的位置坐标比较接近时，使它们对齐。这样可以使表格中的空白单元格比较少，但是可能无法精确再现原来的布局。5656“使用透明GIF”：使用透明的GIF图像填充表格的最后一行，这样可以确保表格在所有浏览器中的效果相同。“置于页面中央”：若选中该复选框，转换的表格在页面上居中；如果该选项关闭，则表格将左对齐。“布局工具”栏中的四个选项用于辅助层的页面布局，包括“防止层重叠”、“显示层面板”、“显示网格”、“靠齐到网格”。(4)选项设置完毕后，单击“确定”按钮。5757本章主要介绍了层在网页制作中的应用，利用层和嵌套层可以将文本、图像、表格、插件插入到网页中的任何位置，只要合理利用，就可以使页面看上去灵活、美观。通过本章学习，学习者应掌握如何在页面中插入层、编辑层以及定义层的外观属性等操作；学会在层中插入HTML元素及层与表格之间的转换。本本 章章 小小 结结