网页设计层布局

第六课层布局技术

课前导读课堂讲解上机实战网页设计层布局全文共84页，当前为第1页。课前导读基础知识重点知识提高知识网页设计层布局全文共84页，当前为第2页。基础知识

层的创建、属性设置方法。网页设计层布局全文共84页，当前为第3页。重点知识

层的显示/隐藏、层名称的改变及层的叠放顺序的改变方法。网页设计层布局全文共84页，当前为第4页。提高知识

层与表格的相互转换方法。网页设计层布局全文共84页，当前为第5页。课堂讲解层的创建层的基本操作重设层的大小层的属性设置层的高级操作层与表格的相互转换网页设计层布局全文共84页，当前为第6页。层的创建层的创建设置层首选参数

嵌套层的创建

网页设计层布局全文共84页，当前为第7页。层的创建

连续绘制一个或多个层，可在“文档”窗口的“设计”视图中执行下列操作之一：

在“插入栏”的“布局”选项卡中单击“绘制层”按钮，拖动鼠标绘制一个层；在“插入栏”的“布局”选项卡中单击“绘制层”按钮，按住【Ctrl】键并拖动即可连续绘制多个层；将插入点放置在“文档”编辑窗口中，然后选择[插入][布局对象][层]菜单命令将自动在插入点插入一个层。

网页设计层布局全文共84页，当前为第8页。设置层首选参数

使用“首选参数”对话框中的“层”选项可指定新建层的默认设置。具体操作如下。（1）选择[编辑][首选参数]菜单命令打开“首选参数”对话框，如图8-1所示。（2）从左侧的“分类”选项列表中选择“层”选项。（3）按需要对各参数进行设置。

网页设计层布局全文共84页，当前为第9页。显示：确定层在默认情况下是否可见（“默认”、“继承”、“可见”或“隐藏”）。

宽和高：指定使用[插入][层]创建的层的默认宽度和高度（以像素为单位）。

背景颜色：指定默认的背景颜色。从颜色选择器中选择需要的颜色即可。

背景图像：指定默认的背景图像。单击按钮可在计算机上查找图像文件。

嵌套：选中复选框可指定从现有层边界内的某点开始绘制的层是否应该是嵌套层。在绘制层时，按住【Alt】键可暂时更改此设置。

网页设计层布局全文共84页，当前为第10页。Netscape4兼容性：选中复选框，将在文档的head内容中插入JavaScript代码以修正Netscape4浏览器中的一个已知问题，该问题使层在访问者调整浏览器窗口大小时失去它们的定位坐标。当调整浏览器窗口大小时，JavaScript会强制页重新加载，从而将层重分配到正确的位置。

（4）单击按钮即可保存设置。

网页设计层布局全文共84页，当前为第11页。图8-1网页设计层布局全文共84页，当前为第12页。嵌套层的创建

层可以像表格一样进行嵌套。通常将位于层内部的层称为嵌套层或子层，而将在嵌套层外部的层，称为父层。父层还可以有父层，可根据需要嵌套多个层。嵌套层是其代码包含在另一个层中的层，在网页中层的嵌套可以把不同的层组合在一起。嵌套层随其父层一起移动，并且可以设置为继承其父级的可见性。子层可以浮动于父层之外的任何位置，子层的大小也可以大于父层。创建嵌套层有以下几种方法：

网页设计层布局全文共84页，当前为第13页。将光标定位到页面上要嵌套的层内，选择[插入][布局对象][层]菜单命令；单击“插入栏”上的“绘制层”按钮，然后通过拖动的方式在现有层中绘制一个嵌套层。如果已经在层参数中选择禁用“嵌套”，则应按住【Alt】键再拖动即可在现有层中绘制一个嵌套层。

创建嵌套层的具体操作如下。（1）将光标置于要作为父层的层中，如图8-2所示。网页设计层布局全文共84页，当前为第14页。

（2）选择[插入][布局对象][层]菜单命令，即可在父层中嵌套一个与父层大小相同的层，在“层”面板中可看到嵌套的层，如图8-3所示。（3）添加子层后，父层的左侧出现“+”或“－”符号，单击该符号可展开或闭合层。将光标定位在一个父层中可以插入多个并列的层，如图8-4所示。

若要逐级添加父层，只需要将光标定位到要添加子层的层中，按创建嵌套层的方法添加即可。网页设计层布局全文共84页，当前为第15页。图8-4图8-3图8-2网页设计层布局全文共84页，当前为第16页。层的基本操作“层”面板的显示层的选择移动层对齐层网页设计层布局全文共84页，当前为第17页。“层”面板的显示

“层”面板用于对层进行管理，对于层的操作是十分有用的，下面就来认识“层”面板。要显示“层”面板，可选择[窗口][层]菜单命令或按【F2】键，如图8-5所示。在“层”面板中，文档中的层都会显示在层列表中，如果存在嵌套层，则以树状结构显示层的嵌套。利用“层”面板可完成如下任务。

网页设计层布局全文共84页，当前为第18页。在选定层的列单击可显示或隐藏该层。如果该列显示了一个睁开的眼睛图标，表示显示该层；如果该列显示了一个闭合的眼睛图标，表示关闭该层；如果此处没有显示任何图标，表示该层的要可见性将继承其父层的显示属性（缺省）。如果未指定可见性，则不会显示眼睛图标。图8-5网页设计层布局全文共84页，当前为第19页。在层名处双击可以修改层的名称。在Z列单击可修改层的层次属性值，数值大的将位于上层。

如果选中复选框，则可以防止层重叠。如果要创建嵌套层必须取消该复选框的选择。

网页设计层布局全文共84页，当前为第20页。层的选择

选择层就是使层成为活动层，层激活后4周会出现控制柄和移动手柄。

选择单个层选择多个层

网页设计层布局全文共84页，当前为第21页。选择单个层

单个层的选择有如下4种方式：在设计窗口中单击层边框；在要激活的层中单击鼠标左键，再单击该层的选择柄；在“层”面板中选中要选取的层名称；在一个层中按住【Ctrl+Shift】键并在该层中单击。

激活层后，在“层”面板中会以粗体显示，如图8-5所示中的“Layer2”即为激活层。网页设计层布局全文共84页，当前为第22页。选择多个层

多层的选取有以下两种方法：

按住【Shift】键，在要选取的层中或层边框上单击，同时“层”面板中选取的层以反白显示，如图8-6所示；按住【Shift】键，在“层”面板中单击要选中的多个层的名称。图8-6网页设计层布局全文共84页，当前为第23页。移动层

移动层的具体操作如下。

（1）在“设计”视图中，选择一个或多个层。（2）执行下列操作之一：若要通过拖动来移动，选取要移动的一个层或多个层，将鼠标移到层边框上，当鼠标变为形状时拖动鼠标到需要的位置释放鼠标即可；若要一次移动一个像素，可使用方向键。按住【Shift】键的同时按键盘上的方向键可按当前网格靠齐增量来移动层。

网页设计层布局全文共84页，当前为第24页。对齐层

在设计网页时常需要将某些层在某个方向上对齐。在进行层的对齐操作时，所有子层的位置都会随其父层进行相应移动。对齐层的具体操作如下。

（1）选取要对齐的所有层。（2）选择[修改]}[排列顺序]菜单命令中的相应选项（“左对齐”、“右对齐”、“对齐上缘”或“对齐下缘”）即可。网页设计层布局全文共84页，当前为第25页。重设层的大小

层大小的设置方法有以下几种。单个层的大小设置

多个层的大小调整

网页设计层布局全文共84页，当前为第26页。单个层的大小设置

调整单个层的大小的具体操作如下。

（1）在“设计”视图中，选择一个层。（2）执行以下操作之一调整层的大小：要通过拖动来调整大小，拖动该层的任一调整柄即可；

要一次调整一个像素的大小，可按住【Ctrl】键的同时再按键盘上的方向键。

网页设计层布局全文共84页，当前为第27页。

方向键可以移动层的右边框和下边框，对于此方法，不能使用上边框和左边框来调整大小。要按网格靠齐增量来调整大小，按住【Shift+Ctrl】键的同时再按键盘上的方向键。在属性面板中输入宽度和高度的值。

调整层的大小会更改该层的宽度和高度。它并不定义该层的多少内容是可见的。

网页设计层布局全文共84页，当前为第28页。多个层的大小调整

同时调整多个层的大小的具体操作如下。

（1）在“设计”视图中，选择两个或更多层。（2）执行下列操作之一：选择[修改][排列顺序][设成宽度相同]菜单命令或[修改][排列顺序][设成高度相同]菜单命令。首先选定的层将自动调整为最后一个选定层（最后选定的层为黑色突出显示）相同的宽度或高度；在属性面板中的“多个层”栏中输入宽度和高度值。这些值将应用于所有选定层。

网页设计层布局全文共84页，当前为第29页。层的属性设置单个层的属性设置多个层的属性设置

网页设计层布局全文共84页，当前为第30页。

层与其他Dreamweaver中的对象一样，许多设置都可在“层”属性面板中进行设置。在“层”属性面板中既可设置单个层的属性，也可设置多个层的属性。网页设计层布局全文共84页，当前为第31页。单个层的属性设置

单个层的属性设置具体操作如下。（1）选择要设置属性的层。（2）在属性面板中单击右下角的扩展箭头（如果它尚未展开），以查看所有属性，如图8-7所示。（3）在“层编号”列表框中可为当前层设置名称。（4）在“左”数值框中设置层左边相对于页面左边或父图层左边的距离。

网页设计层布局全文共84页，当前为第32页。

（5）在“上”数值框中设置层顶端相对于页面顶端或父图层顶端的距离。（6）在“宽”和“高”数值框中分别设置层的宽度和高度。（7）在“Z轴”数值框中设置层在Z方向上的值，即设置嵌套层在文档中的重叠顺序，较高值的子层位于较低值的子层上方。（8）在“可见性”下拉列表中可设置层的可见性，其选项如图8-8所示。网页设计层布局全文共84页，当前为第33页。图8-7图8-8网页设计层布局全文共84页，当前为第34页。

列表中各项的含义如下。

default：该选项为默认值，表示层的可见性由浏览器决定。大多数浏览器会继承该层父层的可见性。inherit：该项表示继承其父层的可见性。visible：该项表示显示层及其内容，而与父层无关。hidden：该项表示隐藏层及其内容，而与父层无关。

（9）在“背景图像”文本框中设置背景图像的路径。（10）在“背景颜色”项中设置层的背景颜色。网页设计层布局全文共84页，当前为第35页。

（11）在“类”下拉列表框中选择层的样式（如在页面中对层进行了CSS样式设置）。（12）在“溢出”下拉列表框中设置当层中的内容超出了层范围后显示内容的方式，下拉列表框中的选项如图8-9所示。图8-9网页设计层布局全文共84页，当前为第36页。

“溢出”下拉列表框中各选项的含义如下。visible：表示当层中的内容超出层范围时，层自动向右或向下扩展，使层能够容纳并显示其中的内容。hidden：表示当层中的内容超出层范围时，层的大小保持不变，也不出现滚动条，超出层范围的内容将不显示。scroll：表示无论层中的内容是否超出层范围，层的右端和下端都会出现滚动条。auto：表示当层中的内容超出层范围时，层的大小保持不变，但是在层的左端或下端会出现滚动条，以便层中超出范围的内容能够通过拖动滚动条来显示。

网页设计层布局全文共84页，当前为第37页。

（13）在“剪辑”栏中设置层的可见区域。其右侧的“左”、“右”、“上”和“下”4个数值框分别设置层在各个方向上的可见区域与层边界的距离，单位为像素。（14）在文本框中输入值后，按【Tab】键或【Enter】键来应用该值。网页设计层布局全文共84页，当前为第38页。多个层的属性设置

设置多个层的属性的具体操作如下。

（1）选取要设置相同属性的多个层，属性面板如图8-10所示。（2）在多层属性面板上部设置所选层的文本和段落格式，设置方法可参考文本格式的设置，这里不再赘述。（3）在“左”数值框中指定所选层的左侧相对于页或嵌套层左侧的位置。（4）在“上”数值框中指定所选层的上方相对于页或嵌套层上方的位置。

网页设计层布局全文共84页，当前为第39页。

（5）在“宽”和“高”数值框中设置所有选取层的宽度或高度相同。（6）在“显示”下拉列表框中各选项的含义与单层属性含义相同。（7）在“标签”下拉列表框中指定用来定义所选层的HTML标签。（8）在“背景图像”文本框中指定用于所选图层的背景图片的路径。（9）在“背景颜色”文本框中输入所选图层要应用的颜色代码，或从色块中选取。（10）在文本框中输入值后，按【Tab】键或【Enter】键来应用该值。网页设计层布局全文共84页，当前为第40页。图8-10网页设计层布局全文共84页，当前为第41页。层的高级操作层的显示/隐藏改变层的名称设置层的堆叠顺序删除层网页设计层布局全文共84页，当前为第42页。

前面学习了层的一些基本操作，下面对层的一些高级操作，如层的显示/隐藏、层的改名、层的叠放顺序等进行讲解。网页设计层布局全文共84页，当前为第43页。层的显示/隐藏

当处理文档时，可以使用“层”面板手动显示和隐藏层，以查看页在不同条件下的显示方式。当前选定层总是可见的，它在被选定时会出现在其他层的前面。更改某个层的可见性多个层的可见性设置

网页设计层布局全文共84页，当前为第44页。更改某个层的可见性

更改某个层的可见性的具体操作如下。（1）选择[窗口][层]菜单命令或按【F2】键打开“层”面板。（2）在层的眼睛图标列内单击可以在各种可见性状态中切换。各图标的含义在“层面板的显示”部分已介绍过，这里不再赘述。网页设计层布局全文共84页，当前为第45页。多个层的可见性设置

更改多个层的可见性可在“层”面板中，单击该列顶部标题的眼形图标，如图8-11所示。此过程可以将所有层设置为“可见”或“隐藏”，但不能设置为“继承”。网页设计层布局全文共84页，当前为第46页。改变层的名称

更改层的名称有以下两种方法。在“层”属性面板的“层编号”文本框中设置层的名称；在“层”面板中设置层的名称。

在“层”面板中更改层的名称的具体操作如下。

（1）在“层”面板中双击要更改名称的层，层名称变为反白显示状态，如图8-12所示。（2）在反白显示处输入新的层名后按【Enter】键即可。网页设计层布局全文共84页，当前为第47页。图8-11图8-12网页设计层布局全文共84页，当前为第48页。设置层的堆叠顺序

使用属性面板或“层”面板可更改层的堆叠顺序。“层”面板列表顶部的层将位于堆叠顺序的顶部，并且会出现在其他层之前。使用“层”面板更改层的堆叠顺序用属性面板更改层的堆叠顺序

使用菜单命令更改层的堆叠顺序

网页设计层布局全文共84页，当前为第49页。使用“层”面板更改层的堆叠顺序

（1）选择[窗口][层]菜单命令或按【F2】键打开“层”面板。（2）执行下列操作之一。选取要改变层顺序的层，将层向上或向下拖至所需的堆叠顺序。当移动层时会出现一条线（如图8-13所示），它指示该层将出现的位置。当放置线出现在堆叠顺序所需的位置时，释放鼠标即可，如图8-14所示。网页设计层布局全文共84页，当前为第50页。在Z列中，单击要更改的层编号，然后输入一个更高的编号，沿着堆叠顺序向上移动该层，或者输入一个更低的编号，沿着堆叠顺序向下移动该层。

图8-13图8-14网页设计层布局全文共84页，当前为第51页。用属性面板更改层的堆叠顺序

（1）在“层”面板或“文档”窗口中选择一个层。（2）在“层”属性面板的“Z轴”文本框中输入一个编号。

输入一个较大的数字可将该层在堆叠顺序中上移。输入一个较小的数字可将该层在堆叠顺序中下移。网页设计层布局全文共84页，当前为第52页。使用菜单命令更改层的堆叠顺序

（1）在“层”面板或“文档”窗口中选择一个层。（2）选择[修改][排列顺序]子菜单中的“移到最上层”或“移到最下层”命令即可。网页设计层布局全文共84页，当前为第53页。删除层

当不需要某层时，需要将该层删除，删除层的具体操作如下。

（1）在“层”面板或“文档”窗口中选择要删除的层。（2）执行下列操作之一：选择[编辑][清除]菜单命令；在所选层上单击鼠标右键，在弹出的快捷菜单中选择“删除标签”命令。如果删除父层，则其下的所有子层将同时被删除。

网页设计层布局全文共84页，当前为第54页。层与表格的相互转换将层转换为表格将表格转换为层网页设计层布局全文共84页，当前为第55页。

层和表格都是对网页进行精确定位的工具，但层适用于较高版本下的浏览器，只有在InternetExplorer4.0或NetscapeNavigator4.0及其更高版本中才能够正确显示，如果要使设计的网页在3.0或更低版本的浏览器中也能被正确地显示，则不能使用层来定位。由于表格对浏览器的版本高低没有要求。因此对于要在低版本的浏览器上浏览的网页，可以将用层设计的网页转换为表格形式。如果确信都使用4.0及更高版本的浏览器，也可以将现有用表格设计的网页转换为用层设计的网页，使网页显得更专业化。网页设计层布局全文共84页，当前为第56页。将层转换为表格

将层转换为表格的具体操作如下。（1）在设计视图中选择[修改][转换][层到表格]菜单命令，打开如图8-15所示的对话框。（2）在“表格布局”栏中设置关于表格的选项，各选项含义如下。网页设计层布局全文共84页，当前为第57页。

位于模板文件和应用模板设计的文档中的层和表格不能转换。有嵌套的层也不能转换为表格。

图8-15网页设计层布局全文共84页，当前为第58页。

：该单选项表示将所有的层都转换为表格。如果层和层间存在间距，则通过插入单元格的方法填充这些间距造成的空间。：该单选项表示如果层之间的距离过近，会将这些层创建为相邻的单元格。选中该单选项所创建的表格具有最小的行和列。在“小于”文本框中可输入允许的最小距离。：表示将转换后的表格的最后一行填充为透明的GIF图像，表格列不能进行拖动操作，以确保在所有的浏览器中表格的显示结果都一致。：表示生成的表格在页面中居中。否则生成的表格在页面中左对齐。

网页设计层布局全文共84页，当前为第59页。

（3）在“布局工具”栏中设置将层转换为表格后层属性的存在情况。各选项的含义如下。

：选中该复选框将在转换后的文档中激活防止层重叠功能。：选中该复选框将在转换后的文档中显示“层”面板。：选中该复选框将在转换后的文档中显示网格线。

：选中该复选框将转换后文档中的层与网格线对齐。

网页设计层布局全文共84页，当前为第60页。

如果希望在转换后的文档中继续使用层，可以设置这些选项；如果不希望在转换后的文档中使用层，则可以忽略这些选项。

（4）设置完后，单击按钮即可将现有层转换为表格。如将图8-16所示的层转换为表格，转换后如图8-17所示。网页设计层布局全文共84页，当前为第61页。

图8-16

图8-17网页设计层布局全文共84页，当前为第62页。将表格转换为层

将表格转换为层的具体操作如下。（1）选择[修改][转换][表格到层]菜单命令，打开如图8-18所示的对话框。（2）在“布局工具”栏中设置表格转换为层后文档中层的属性。（3）设置完后，单击按钮即可将表格转换为层。如将如图8-17所示的表格转换为层，转换后的效果如图8-19所示。网页设计层布局全文共84页，当前为第63页。

图8-18

图8-19网页设计层布局全文共84页，当前为第64页。上机实战

本课上机实战将用层布局一个公司主页，其效果如图8-20所示。本主页主要由导航栏、公司徽标、新书预告、消息简介和版权信息5个部分组成，制作过程中采用从上到下，从左到右的方法制作。具体操作如下。（1）新建一个为“层布局示例站点”的新站点，设置本地文件夹的位置为E:\Layer，并在该文件夹下建立一个名为pic的文件夹用以放置本网页所需的图片。

网页设计层布局全文共84页，当前为第65页。

图8-20网页设计层布局全文共84页，当前为第66页。

（2）新建一页面，命名为index.htm，在“文档”工具栏的“标题”文本框中输入“层布局示例页面”以作为本页页面的标题。（3）在“插入栏”的“布局”选项卡中，单击按钮，在文档编辑窗口中拖动以创建第一个层（属性面板设置如图8-21所示），并在其中插入如图8-22所示的导航条。

图8-21

图8-22网页设计层布局全文共84页，当前为第67页。

（4）单击按钮，在导航条所在层的下面绘制第2个层（属性面板设置如图8-23所示），并在其中插入如图8-24所示的公司LOGO图片。（5）单击按钮，在第2个层下面的左侧绘制第3个层（属性面板设置如图8-25所示），在其中插入如图8-26所示的4行1列表格（表格宽度为100%，边框粗细为0，单元格边距为0，单元格间距为0）。（6）将光标定位到刚插入表格的第1个单元格中，插入如图8-27所示的背景图片，该单元格所对应的属性面板如图8-28所示（单元格高为29px）。

网页设计层布局全文共84页，当前为第68页。

图8-23

图8-24网页设计层布局全文共84页，当前为第69页。图8-25图8-27图8-26网页设计层布局全文共84页，当前为第70页。图8-28图8-30图8-29网页设计层布局全文共84页，当前为第71页。

（7）在“插入”栏的“表单”选项卡中，单击“表单”按钮以在第1个单元格中插入1个表单域。（8）在第1个单元格中再插入一个1行3列的表格（表格宽度为100%，边框粗细为0，单元格边距为0，单元格间距为0）。（9）将光标定位到新嵌套表格的第1个单元格中，插入如图8-29所示的图形。（10）将光标定位到新嵌套表格的第2个单元格中，在“插入栏”的“表单”选项卡中单击“文本字段”按钮以插入一个“文本字段”表单对象，如图8-29所示。网页设计层布局全文共84页，当前为第72页。

（11）将光标定位到第3个单元格中，插入如图8-29所示的按钮图形。（12）将光标定位到外层表格的第2个单元格中，插入如图8-30所示的背景图片，并输入“新书预告”字样，其对应的属性面板如图8-31所示。（13）将光标定位到外层表格的第3个单元格中，设置背景为一种浅灰色（如“#CCCCC