8层布局技术.pptVIP

第八课 层布局技术 课前导读 基础知识 重点知识 提高知识 基础知识 层的创建、属性设置方法。 重点知识 层的显示/隐藏、层名称的改变及层的叠放顺序的改变方法。 提高知识 层与表格的相互转换方法。 课堂讲解 层的创建 层的基本操作 重设层的大小 层的属性设置 层的高级操作 层与表格的相互转换 层的创建 层的创建 设置层首选参数 嵌套层的创建 层在网页的定位中使用非常广泛，也十分方便。但用层设计的网页在不同分辨率的显示器上显示时会出现错位现象，不能准确定位。因此层常作为附属工具配合表格、框架等技术来对网页进行设计。Dreamweaver可以方便地在页面上创建层并精确地将层进行定位，还可以创建嵌套层。 层的创建 连续绘制一个或多个层，可在“文档”窗口的“设计”视图中执行下列操作之一： 在“插入栏”的“布局”选项卡中单击“绘制层”按钮 ，拖动鼠标绘制一个层； 在“插入栏”的“布局”选项卡中单击“绘制层”按钮 ，按住【Ctrl】键并拖动即可连续绘制多个层； 将插入点放置在“文档”编辑窗口中，然后选择[插入]?[布局对象]?[层]菜单命令将自动在插入点插入一个层。 设置层首选参数 使用“首选参数”对话框中的“层”选项可指定新建层的默认设置。具体操作如下。 （1）选择[编辑]?[首选参数]菜单命令打开“首选参数”对话框，如图8-1所示。 （2）从左侧的“分类”选项列表中选择“层”选项。 （3）按需要对各参数进行设置。 显示：确定层在默认情况下是否可见（“默认”、“继承”、“可见”或“隐藏”）。 宽和高：指定使用[插入]?[层]创建的层的默认宽度和高度（以像素为单位）。 背景颜色：指定默认的背景颜色。从颜色选择器中选择需要的颜色即可。 背景图像：指定默认的背景图像。单击 按钮可在计算机上查找图像文件。 嵌套：选中 复选框可指定从现有层边界内的某点开始绘制的层是否应该是嵌套层。在绘制层时，按住【Alt】键可暂时更改此设置。 Netscape 4兼容性：选中 复选框，将在文档的head内容中插入JavaScript代码以修正Netscape 4浏览器中的一个已知问题，该问题使层在访问者调整浏览器窗口大小时失去它们的定位坐标。当调整浏览器窗口大小时，JavaScript会强制页重新加载，从而将层重分配到正确的位置。 （4）单击 按钮即可保存设置。 嵌套层的创建 层可以像表格一样进行嵌套。通常将位于层内部的层称为嵌套层或子层，而将在嵌套层外部的层，称为父层。父层还可以有父层，可根据需要嵌套多个层。 嵌套层是其代码包含在另一个层中的层，在网页中层的嵌套可以把不同的层组合在一起。嵌套层随其父层一起移动，并且可以设置为继承其父级的可见性。子层可以浮动于父层之外的任何位置，子层的大小也可以大于父层。创建嵌套层有以下几种方法： 将光标定位到页面上要嵌套的层内，选择[插入]?[布局对象]?[层]菜单命令； 单击“插入栏”上的“绘制层”按钮 ，然后通过拖动的方式在现有层中绘制一个嵌套层。如果已经在层参数中选择禁用“嵌套”，则应按住【Alt】键再拖动即可在现有层中绘制一个嵌套层。 创建嵌套层的具体操作如下。 （1）将光标置于要作为父层的层中，如图8-2所示。 （2）选择[插入]?[布局对象]?[层]菜单命令，即可在父层中嵌套一个与父层大小相同的层，在“层”面板中可看到嵌套的层，如图8-3所示。 （3）添加子层后，父层的左侧出现“+”或“－”符号，单击该符号可展开或闭合层。将光标定位在一个父层中可以插入多个并列的层，如图8-4所示。 若要逐级添加父层，只需要将光标定位到要添加子层的层中，按创建嵌套层的方法添加即可。 层的基本操作 “层”面板的显示 层的选择 移动层 对齐层 “层”面板的显示 “层”面板用于对层进行管理，对于层的操作是十分有用的，下面就来认识“层”面板。要显示“层”面板，可选择[窗口]?[层]菜单命令或按【F2】键，如图8-5所示。 在“层”面板中，文档中的层都会显示在层列表中，如果存在嵌套层，则以树状结构显示层的嵌套。利用“层”面板可完成如下任务。 在选定层的 列单击可显示或隐藏该层。如果该列显示了一个睁开的眼睛图标 ，表示显示该层；如果该列显示了一个闭合的眼睛图标 ，表示关闭该层；如果此处没有显示任何图标，表示该层的要可见性将继承其父层的显示属性（缺省）。如果未指定可见性，则