第9章使用层参与排版.ppt

第９章 使用层参与排版 本章要点内容: 层的基本概念和基本操作。 层与表格的互相转换。 层的使用技巧。 本章学习目标 了解层在网页页面排版中的作用。 能够对层进行基本操作并综合实例掌握基本排版技巧。 把握层在使用过程中的八大定律。 本章学前要求 对基本网页操作有所了解，已经学会了文本、图片、超链接以及表格的运用。 Dreamweaver中创建层的HTML标签可以是div、span、layer和ilayer四种标签，在这里创建的标签中前两个是由W3C所认证的，可以被IE4.0以上版本和Netscape4.0以上版本正常显示，layer和ilayer两种标签只能被Netscape4.0识别，而且Netscape新版本已经不再支持它们。div和span的区别是：前者是文档块标记，可以将任意一块文档放置在该标记中；后者是文档行标记，可以将任意一行文档置于该标记中。大多数情况下，在不支持层的浏览器中，最好让层内容出现在自己的段落中，因此最好使用div而不是span，Dreamweaver默认情况下创建的“层”也正是div标签。 Dreamweaver MX 2004中，层按钮在“布局”对象面板中，该　　按钮称为“描绘层”按钮，其作用是在页面中绘制一个“层”，如图9.1所示。使用时先单击“标准”按钮切换到标准布局，接着单击“描绘层”按钮。 9.1.2 层的分类 层可以分成“普通层”和“嵌套层”。 “普通层”是代码中不包含其它“层”的层，它的移动不会引起其它层的同步移动。 “嵌套层”是其代码包含在另一个层中的层。嵌套通常用于将层组织在一起。嵌套层随其父层一起移动，并且可以设置为继承其父级的可见性。 不管是“普通层”还是“嵌套层”都是可能发生重叠，重叠和嵌套不是一回事。重叠和嵌套的区别在于重叠时代码不会包含在其它层中，重叠仅仅是因为“层”在页面上的位置有交集而已，如图9.2所示。嵌套层中，“子层”和“父层”的位置可能并不重叠，如图9.3所示。 图9.2所示的两层重叠代码如下，代码没有出现包含关系。其中“id”是指“层”的名称。 !--下面是名称为“Layer1”的层的代码-- div id=Layer1 style=position:absolute; left:22px; top:26px; width:133px; height:89px; z-index:1重叠层1/div !--下面是名称为“Layer2”的层的代码-- div id=“Layer2” style=“position:absolute; left:60px; top:51px; width:79px; height:51px; z-index:2”重叠层2/div。 图9.3所示的嵌套层代码如下。“子层”（“Layer2”）代码包含在“父层”（“Layer1”）中。 div id=Layer1 style=position:absolute; left:22px; top:26px; width:69px; height:60px; z-index:1 div id=Layer2 style=position:absolute; left:86px; top:4px; width:107px; height:84px; z-index:1子层/div 父层/div。 9.2 创 建 层 使用层对页面进行排版布局时，可以使用跟踪图像作为页面设计的向导。跟踪图像是放在“文档”窗口背景中的JPEG、GIF或PNG图像。根据跟踪图像，创建层，确定层的大小和位置，最后在层中添加内容，完成制作。本章准备的实例将带领读者一起走过这些步骤。图9.4是制作完成后的效果图。该页面是个人站点“同学录”的首页，整个页面相当简洁，仅存在右侧的“相册”、“留言本”和“通讯录”三个图像链接。本实例采用7个层来布局，有2个层发生重叠，还有2个层是“嵌套层”。 下面开始制作该实例。 步骤1：新建一个空白文档，保存为9.html。设置标题为“同学录”。选择“修改”菜单的“页面属性”命令，在“外观”分类中设置背景色为“#FFFFE1”，在“分类”中选择“跟踪图像”，单击“跟踪图像”文本框旁边的“浏览”按钮，选择图片，如图9.5所示，这个图像将作为本章实例参照对象。 步骤2：为了方便层的定位，选择“查看”菜单的“标尺/显示”命令，并且选择“查看”菜单的“标尺/像素”命令，接着选择“查看”菜单的“网格/网格设置”命令，在“网格设置”对话框中，选中“显示网格”和“靠齐到网格”，如下图9.6所示。 设置完成，此时设计视图效果如下图9.7所示。 在跟踪图像设置好以后，下面开始创建层。 9.2.1 创建普通层 创建普通层有3种方法，在下面3个步骤中，我们分别加以介绍。 步骤1：选择