第6章 层及布局应用 实战Dreamweaver8网页制作教程电子教案

学习目标能够对层进行基本操作能够对层的属性进行设置能够灵活使用“层”面板能够将层与表格相互转换能够使用层进行页面布局6.1层的建立、编辑及排版应用6.2层在页面布局中的定位技巧本章内容6.1层的建立、编辑及排版应用6.1.1案例制作：旅行家通过本案例的操作，你将学会如何创建层，如何对层的属性进行简单设置，层的选取、移动、大小调整及层的对齐。6.1.2新知解析1.创建层创建层有多种方法，总结如下：选择“插入”面板中的“布局”选项，单击“标准”按钮，单击“绘制层”按钮，将鼠标移动到编辑窗口，此时，鼠标变成“十”字形，按下鼠标左键拖动，可以绘制一个任意大小的层。将鼠标移到“绘制层”按钮上，按下鼠标左键拖动鼠标到编辑窗口中，释放鼠标，可以绘制一个层。先将光标置于要插入层的位置，选择主菜单“插入”｜“布局对象”｜“层”命令，在编辑窗口中会出现一个默认大小的层。6.1层的建立、编辑及排版应用2.层的删除选中要删除的层，单击Delete键或单击“剪切”按钮，可删除该层，也可以在“层”面板中删除该层。3.层的嵌套有时为了网页布局等的需要可以在一个层中再插入一个层，这称为层的嵌套，被嵌套的层称为子层，包含子层的层称为父层，子层会继承父层的一些属性。方法如下：

先在编辑窗口中插入一个层。将光标定位在该层中，然后再插入一个层，即可在已有的层中嵌套一个层。6.1层的建立、编辑及排版应用4.层的激活与选取一个层只有被激活后，才可以在其中插入图像、文本、表格、表单等网页元素。在层中任意位置单击鼠标都可以激活层，层被激活后，可以看到光标在层中闪动，并且层的左上角出现选择柄。一个层只有被选中后才可以进行移动、复制、删除、属性设置等操作，选取层的方法有多种，介绍如下：

单击编辑窗口中层的图标，可以将层选中。将鼠标移动到层的某一边框上，单击鼠标可以选中层。先将层激活，单击状态栏中的<div>标签也可以选中层。按F2键打开“层”面板，单击要选中层，可以选中。注意：按Shift键，再来选择层，可以选中编辑窗口中的多个层。6.1层的建立、编辑及排版应用5.设置层的属性在创建层之后，可以在层的“属性”面板中对层的具体属性进行精确的设置，如层的编号、大小、背景颜色、溢出时的处理方法、背景图像、可见性等。选中层，可以打开层的“属性”面板。在层的“属性”面板中，各项属性设置如下：

层编号：设置当前选中层的编号。左、上：设置选中的层到网页左边框和上边框的距离。宽、高：分别用于设置选中层的宽度和高度。

Z轴：选中的层在同页面垂直方向的叠放次序。6.1层的建立、编辑及排版应用

可见性：设置层的可见性。背景图像：设置层的背景图像。背景颜色：设置层的背景颜色。溢出：用于设置层的内容超过了层的大小以何种方式显示。剪辑：用于设置层中内容被剪切掉的范围，左、上、右、下分别表示对层内容进行剪切后，剩余可见部分的左边界或右边界到层的左边框、上边界或下边界到层的上边框的相对距离。类：为选中的层应用CSS样式。6.1层的建立、编辑及排版应用6.调整层的大小创建层后，可以通过以下方法来调整层的大小。

选中要调整大小的层，此时在层的周围出现8个黑色节点，用鼠标拖动相应的节点可以调整层大小、宽度、和高度。选中要调整大小的层，在“属性”面板中“宽”和“高”的文本框中分别输入相应的值调整层的大小，这种方法可以精确调整层的大小。6.1层的建立、编辑及排版应用7.层的对齐可以使多个层以某一个层为基准进行对齐操作，方法如下：按Shift键选中多个层，注意对齐时是以最后选中的层为基准进行对齐操作。选择主菜单“修改”｜“排列顺序”菜单中“左对齐”、“右对齐”、“对齐上缘”、“对齐下缘”。命令中的一条，可以进行相应的对齐操作。当然也可以选择“设成宽度相同”、“设成高度相同”命令中的一条使选中的层和基准层具有相同的宽度或高度。6.1层的建立、编辑及排版应用8.层面板为了方便、轻松、直观地使用层，Dreamweaver8.0提供了层面板，可以对层控制和操作。在网页中创建的所有层都在显示在“层”面板中，如图7-14所示。打开“层”面板有如下方法：

选择“窗口”｜“其他”｜“层”命令，可以打开“层”面板。按F2键，也可以打开“层”面板。6.1层的建立、编辑及排版应用

在“层”面板中可以完成层的重命名、选中层、设置层的可见性、改变层的叠放次序、显示或隐藏层等操作，操作方法如下。

1）重命名层在“层”面板中需要重命名层的名称上双击，出现光标，输入新的层名称即可。2）选取层在“层”面板中要选取的层上单击，即可选中该层，若要选取多个层，可以按Shift键单击要选取的层即可。3）改变层的叠放次序在“层”面板中“Z”这一列的值决定层的叠放次序，单击某一层Z的值，输入相应的值，可以改变该层的叠放次序。6.1层的建立、编辑及排版应用4）显示或隐藏层观察“层”面板，可以发现在“名称”左侧有一只睁开的眼，睁开眼睛这一列决定着相应层的显示和隐藏。在睁开的眼睛这一列中某一处单击，若显示睁开的眼睛，则表示右则的层显示，若显示闭上的眼睛，则表示右侧的层隐藏，若层的名称左边没有任何显示，则表示层默认为显示或是继承父层的可见性。在“层”面板中单击“名称”左侧睁开的眼睛，可以一次性将层全部隐藏，再次单击可以全部显示。6.1层的建立、编辑及排版应用5）创建和取消嵌套层在“层”面板中按住Ctrl键，用鼠标将一个层拖动到另一层上，当层上出现边框时释放鼠标，如图7-15所示，可以创建一个嵌套层。此时，子层继承父层的一些属性，如Z轴的值等，移动父层，子层也会跟着移动。若要使子层脱离父层，只需在“层”面板中拖动子层脱离父，便可取消嵌套。

拖动层到另一层上在层面板中显示层的嵌套6.1层的建立、编辑及排版应用9.层与表格的相互转换层转换为表格。操作方法如下：

1)

打开要将层布局转换为表格布局的页面。

2)选择“层”面板中的“防止重叠”复选框。

3)选择主菜单“修改”｜“转换”｜“层到表格”命令，打开“转换层为表格”对话框。6.1层的建立、编辑及排版应用最精确：表示为每个层建立一个表格单元，同时层之间的空隙也建立相应的单元格。最小：表示当层之间的距离小于设定的值时，则层之间的空隙不生成独立的单元格，它们被合并到较近的层生成的单元格中。防止层重叠：表示可以禁止层重叠。显示层面板，表示转换后显示“层”面板。显示网格：表示层转换为表格后，网页编辑窗口中显示网格线。靠齐到网格：表示启用吸附到网格功能。4）设置完成后，单击“确定”按钮可完成转换。6.1层的建立、编辑及排版应用表格转换为层。操作方法如下：

1）在编辑窗口中选择需要转换为层的表格。

2）选择主菜单“修改”｜“转换”｜“表格到层”命令，打开“转换表格为层”对话框。各项设置如下：防止层重叠：表示可以禁止层重叠。显示层面板：表转换后显示层面板。显示网格：表格转换为层后，网页编辑窗口中显示网格线。6.1层的建立、编辑及排版应用6.1.3技巧提示1.嵌套与重叠嵌套：是指一个层位于另一个层的内部，外面的层为父层，里面的层为子层，子层属于父，当父层移动时子层也会一起移动，并且子层继承父层的一些属性。无论子层的大小比父层大还是比父层小，但从关系上来说都是嵌套，即子层隶属于父层，子层的层标记位于父层中。重叠：指的是两个并列关系的层，在编辑窗口中互相交错。不存在任何隶属关系。

图6-19层的嵌套

图6-20层的重叠6.1层的建立、编辑及排版应用2.层的参数设置选择主菜单“编辑”｜“首选参数”命令，打开“首选参数”对话框，在“分类”中选择“层”，右侧显示的“显示”、“宽”、“高”、“背景颜色”、“背景图像”分别表示插入一个层时，默认的显示状态、宽度、高度、背景颜色、背景图像。用户可以根据需要进行设置。6.1层的建立、编辑及排版应用3.连续绘制多个层如果想单击一次“绘制层”按钮就连续绘制多个层，可以在绘制第一个层时按住Ctrl键，可以连续绘制多个层，直至释放Ctrl键。6.1层的建立、编辑及排版应用4、网格

1）显示网格。选择主菜单“查看”｜“网格”｜“显示网格”命令来显示网格。

2）使用网格。选择主菜单“查看”｜“网格”｜“靠齐到网格”命令则启用自动吸附功能。此时在编辑窗口中绘制或拖动层，层会自动吸附到与其距离最近的网格线。

3）设置网格选项。选择主菜单“查看”｜“网格”｜“网格设置”命令，可以打开“网格设置”对话框。如图所示。6.1层的建立、编辑及排版应用网格各项设置如下：

颜色：用来设置网格的颜色。显示网格：在编辑窗口中显示网格。靠齐到网格：当层移动到距网格一定距离时，会自动吸附到网格。间隔：两条网格线之间的距离。显示：网格以线方式显示还是以点的方式显示

。6.1层的建立、编辑及排版应用5.标尺

1）显示与使用标尺选择主菜单“查看”｜“标尺”｜“显示”命令，这时会在编辑窗口的上边和左边显示标尺，此时绘制层的过程中层起点和终点会分别在标尺上显示两条线，表示层的位置。

2）修改原点。“原点”是水平和垂直标尺插入的位置，默认位置是页面的左上角。若要修改原点的位置，可单击垂直和水平标尺交叉部分的方框，把原点向右、向下拖动到适当位置松开鼠标即可。当原点移动到编辑窗口之内时，原点左侧和上方的坐标值就变成负数了。选择主菜单“查看”｜“标尺”｜“重设原点”命令可将原点恢复。6.1层的建立、编辑及排版应用6.1.4实战演练：“搜机城”首页制作通过本案例的操作，你将学会如何使用表格与层混合布局页面的方法、如何使用层对齐、如何设置层的“属性”面板中各项属性。6.1层的建立、编辑及排版应用6.2层在页面布局中的定位技巧6.2.1案例制作：层定位技巧在网页“酒文化”中的应用通过本案例的操作，你将学会：如何使用CSS样式对层相对定位、如何合理使用层的嵌套、用层相对定位技术布局网页。6.2.2新知解析1.显示和隐藏层边框如果需要将层的边框隐藏，可以选择主菜单“查看”｜“可视化助理”｜“隐藏所有”命令将层的边框隐藏，反之，再次执行该命令，则会显示边框。6.2层在页面布局中的定位技巧2.显示和隐藏层标记在使用层来布局的时间，层标记会占用一定的空间，选择主菜单“编辑”｜“首选参数”命令，打开“首选参数”对话框，在“分类”中选择“不可见元素”，取消右侧“层锚记”前的对勾。则编辑窗口中的层不显示层标记。

显示层标记

隐藏层标记6.2层在页面布局中的定位技巧3.构建相对定位的层层的定位方式有两种：绝对定位和相对定位。绝对定位是在绘制层之后，在“属性”面板中对该层定位。相对定位是通过CSS样式对层定位，使层始终在浏览器窗口中居中显示。

6.2层在页面布局中的定位技巧操作方法如下：

1）在编辑窗口中绘制一个层“Layer1”,切换到代码视图，此时会发现产生一部分代码。如下：

#Layer1{ position:absolute; left:125px; top:61px; width:237px; height:209px; z-index:1;

}这是使用绝对位置来定位层的层样式。

2）将这段代码删除。

3）创建“#layer_xiangdui”样式。“选择器类型”设为“高级”，在“选择器”文本框中输入“#layer_xiangdui”，“定义在”选择“新建样式表文件”，输入文件名称为css_file.css，保存文件，打开“CSS规则定义”窗口。

6.2层在页面布局中的定位技巧

4）“分类”中的“方框”选项设置宽为776像素，高为480像素，取消“边界”下方的复选框对勾，“右”、“左”分别设为“自动”。如图7-45所示。图7-45设置#layer_xiangdui样式“方框”项的属性

5）“分类”中的“定位”部分设置“类型”为相对，单击“确定”按钮，设置完成。设置#layer_xiangdui样式“定位”项的