网页制作CH9—图层技术.ppt

通过本章学习，应该掌握以下内容： 认识图层 图层的基本操作 图层的管理 图层与表格的相互转换,第9章 利用图层技术制作网页,9.1 认识图层,图层又称层，是Dreamweaver MX中最有价值的对象之一，它是由层叠式表发展过来的，它提供了一种对网页对象进行有效控制的手段，层可以包含文本、图像、表单、插件，甚至层内还可以包含其它层。即在HTML文档的正文部分可以放置的元素都可以放入层内。由于层可以放置在网页的任何位置，从而能有效地控制网页中的对象。,层是在制作网页中经常用到的对象，元素的定位就是一个简单的应用。用表格来对网页进行排版非常方便，但有时需要在文字上放一些图片之类的元素，表格就不能胜任了，这时就可以利用图层来排版。 图层可以重叠地放置，制作出层叠的效果。也可以控制层的显示或隐藏，实现交互技术。配合时间显的使用，还可以同时移动一个或多个图层，轻松制作出动态效果。,9.2 图层的基本操作,9.2.1 创建图层,1插入图层,Dreamweaver MX创建图层，可执行以下操作之一： （1）将光标放置在文档窗口中需要插入层的位置，然后选择“插入”|“层”命令。 （2）打开插入“常用”面板，单击该面板上的插入层图标 ，然后释放鼠标，鼠标会变成十字形状，用鼠标在页面中绘制一个矩形来创建层。 （3）如果需要画多个层，在单击插入层图标 的同时，按住Ctrl键，在文档窗口中画一个层，只要不释放Ctrl键，就可以连续化多个层。,创建完层之后，在页面中会出现一个层的标志，并且有一个矩形的层出现。 单击层标志，其属性面板显示如图所示，在属性面板上可以设定层的属性。,2创建嵌套图层,图层嵌套指的是在一个图层的内部创建另一个图层，可以用嵌套的方法将多个图层组合在一起。使用嵌套层的目的通常是为了将多个图层组成群组，这样一来，只要移动父层，其中的子层也会一起移动，而且子层还会继承父层的显示隐藏状态，其可见性与父层保持一致。这在制作动态网页是十分有用。,创建嵌套层通常有两种方法： （1）直接创建嵌套层 先创建一个层为父层，后在父层内创建的层成为子层，在图层面板中也可以看出层2是层1的子层。 （2）将已有的多个层变为嵌套层 打开图层面板，在层列表中将需要作为子层的层选中，按住Ctrl键将该层拖动到父层上，释放鼠标即可。,9.2.2 选择图层,1选择一个图层,选择图层的目的是便于层的对齐、重定位和缩放，还可以为图层添加背景图像和背景颜色。在Dreamweaver MX中要选择一个层，可使用如下方法之一： （1）用鼠标单击层标志 。 （2）用鼠标单击层的任意边框线。 （3）选择“窗口”|“其它”|“层”命令，打开图层面板，单击该面板中需要选择的层的名称。,2选择多个图层,如果要同时选择多个层，可以按住Shift键，再执行上述操作之一。 注意：当选择了多个图层后，最后选择的图层标记高亮显示，同时调控点显示为黑色，其他图层的调控点显示为白色。,选择层后，层的四周出现8个调控点，且层的标志反色显示 。,9.2.3 激活图层,如果需要在图层中插入对象，必须激活图层。把鼠标指针移动到层内任何地方单击，即可激活该层。此时，插入点位于图层内，被激活图层的边界突出显示，选中手柄也同时显示出来。 注意：激活图层的操作不同于选择图层。,9.2.4 移动图层,在文档中要移动一个图层，可以执行以下操作之一： （1）先选择层，然后在该层的选择手柄上按住鼠标左键并拖动鼠标，则可移动。 （2）将鼠标指针移动到需要移动层的边框位置，当鼠标指针形状为四个箭头时，按住鼠标左键并拖动鼠标，则可移动层。 （3）在属性面板中直接设置“左”、“上”的数值，也可以移动层。 （4）利用键盘，每按一次方向键，则移动一个像素单位；若按Shift键的同时按一次方向键，则移动一个网格单位。,9.2.5 复制图层,在Dreamweaver MX中要复制一个层，可执行以下：（1）按住Ctrl键，将鼠标指针移到需要复制层的标志 上，按住鼠标左键拖动鼠标，移动一定距离后，释放鼠标，则该层被复制。 （2）先选择一个层，执行“编辑”|“复制”命令，取消被选层，执行“编辑”|“粘贴”命令，则该层被复制。,9.2.6 调整图层的大小,要调整一个图层的大小，可执行如下操作之一： （1）拖曳法：选择层，拖曳图层的调控点。上/下调控点只能调整层的高度，左/右调控点只能调整层的宽度，四角的调控点能同时调整层的高度和宽度。 （2）在层属性面板中设置“宽”和“高”的数值。 （3）利用键盘来调整图层的大小：选择要调整的图层，按Ctrl+方向键，每次调整一个像素单位。按Ctrl+Shift+方向键，每次调整一个网格单位。,1调整单个图层的大小,2调整多个图层的大小,在文档中要调整多个图层的大小，可执行如下操作之一： （1）在设计视图中按Shift键选择多个图层，单击“修改”|“对齐”|“设成宽度相同”或“修改”|“对齐”|“设成高度相同” 。 （2）选择要调整的图层，打开其属性面板。在属性面板的多个层“高”和“宽”文本框中修改所有选中的层的宽度值和高度值。,9.2.7 对齐图层,在文档窗口中有多个图层，可以选择这些图层，然后使用图层对齐命令使被选择的多个图层与最后被选择的图层边框对齐。 对齐多个层的方法如下： 在文档窗口中选中需要对齐的图层，执行“修改”|“对齐”命令，选择下列对齐方式中的一种：左对齐、右对齐、对齐上缘、对齐下缘、设成宽度相同、设成高度相同。 注意：在对齐图层时，没有选择的子图层会因为其父图层的移动而移动。,如果启用吸附功能，在移动和调整图层的大小时，该图层被自动定位到最近的网格位置。不论网格是否可见，吸附功能都起作用。,9.2.8 吸附图层到网格,要显示网格线，可选择“查看”|“网格”|“显示网格”菜单命令。,1显示网格,2吸附图层到网格,要吸附图层到网格，可选择“查看”|“网格”|“靠齐到网格”菜单命令。,3改变网格和吸附设置,设置网格和吸附设置的步骤如下： （1）选择“查看”|“网格”|“网格设置”命令，打开“网格设置”对话框。 （2）在对话框中，用户可以根据需要进行选项设置。 （3）单击“确定”按钮完成设置。,9.3 图层的管理,命名图层可以执行以下操作之一： （1）选择图层，在其属性面板的“层编号”文本框中输入图层名称。 （2）选择“窗口”|“其它”|“层”命令，打开图层面板。双击要命名图层的“名称”栏，使之处于可编辑状态，输入图层名称。,9.3.1 图层的命名,若要更改单个层的可见性，可执行以下操作之一： （1）打开图层面板，单击图层面板中一个层的眼睛图标以更改其可见性。眼睛睁开表示该层是可见的。眼睛闭合表示该层是不可见的。 （2）选择图层，在其属性面板的“显示”栏中设置图层的可见性。,9.3.2 改变图层的可见性,1改变单个层的可见性,2改变所有层的可见性,若要同时更改所有层的可见性，单击图层面板标题栏的眼睛图标，所有图层为可见或不可见。 注意：改变所有层的可见性时，可以将所有层设置为“可见”或“隐藏”，但不能设置为“继承”。,9.3.3 改变图层的叠放次序,1利用图层面板来调整图层的叠放次序,利用图层面板来调整图层的叠放次序的操作步骤如下： 打开图层面板。把光标放置到要改变位置的层的名称上，拖动到合适位置释放鼠标。,2利用层属性面板来调整图层的叠放次序,在层属性面板中直接修改层的“Z轴”值，可以改变层的叠放次序。可以在文本框中输入数值，当输入的数值比当前值大时，表示图层的叠放次序提高；当输入的数值比当前值小时，表示图层的叠放次序降低。,图层和表格都可以用来进行页面定位，但图层是可以随意移动的，应用图层来进行页面设计更快捷、方便、灵活。但图层只有在较高版本的浏览器中才能够正确显示，如果要使设计的网页在3.0版本的浏览器中也正确显示，则不能使用图层来控制版面。 为了避免显示错误，可以先用图层来快速创建复杂的页面布局，然后再把图层布局转换为表格布局。需要时，也可以进行图层和表格的相互转换，以调整布局和优化页面设计。,9.4 图层与表格,在Dreamweaver MX中，先用图层来制作一个页面，选择“修改”|“转换”|“层到表格”命令，弹出 “转换层为表格”对话框，根据需要对以上各项进行设置，设置完毕单击“确定”按钮。,9.4.1 将图层转换为表格,注意： 1隐藏的图层不能转换为表格。 2重叠的层不允许转换为表格，因为表格的单元格是不能重叠的。 3在模板文档或已应用模板的文档中，不能将层转换为表格或将表格转换为层。即应该在非模板文档中创建布局，然后再将该文档另存为模板之前进行转换。,将表格转换为图层的