实战Dreamweaver8网页制作教程 刘天真 第6章 层及布局应用新.pptVIP

6.1.1案例制作：旅行家 6.* 第6章　层及布局应用 在线教务辅导网： 更多课程配套课件资源请访问在线教务辅导网 学习目标 能够对层进行基本操作 能够对层的属性进行设置 能够灵活使用“层”面板 能够将层与表格相互转换 能够使用层进行页面布局 6.1　层的建立、编辑及排版应用 6.2　层在页面布局中的定位技巧 本章内容 6.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. 层面板 　　为了方便、轻松、直观地使用层，Dreamweaver 8.0提供了层面板，可以对层控制和操作。在网页中创建的所有层都在显示在“层”面板中，如图7-14所示。 打开“层”面板有如下方法： 选择“窗口”｜“其他”｜“层”命令，可以打开“层”面板。 按F2键，也可以打开“层”面板。 6.1　层的建立、编辑及排版应用 　　　　　　　 　　在“层”面板中可以完成层的重命名、选中层、设置层的可见性、改变层的叠放次序、显示或隐藏层等操作，操作