Dreamweaver80第二十讲 有关层的基础知识.doc

第十二讲 有关层的基础知识 在设计网页时，为使页面布局整齐、美观，需要对网页中元素进行定位。在Dreamweaver中，除了可以使用传统的表格定位方法和框架定位方法对页面元素进行定位之外，还可以使用层定位法和“布局模式”定位法。在这一讲中，我们将学习有关层的基础知识。通过本讲的学习，我们希望达到下面的学习目标： ◆ 了解层的 HTML 代码 ◆ 学会插入div 标签； ◆ 学会更改div内容块的高亮颜色； ◆ 学会使用内容块进行布局； ◆ 掌握创建层的方法； 学会设置层首选参数和属性。 12.1 使用CSS技术对页面进行布局 使用层能以像素为单位精确定位页面元素，并且可以将层放置在页面的任意位置。当把页面元素放入层之中时，还可以控制哪个显示在前面、哪个显示在后面、哪个显示、哪个隐藏，可见，层的优点是很明显的。但是，考虑到兼容性和修改时的方便，一般可在编辑网页时采用层布局或者部分页面采用层布局，而在发布网页时再将其转换为表格布局。 在Macromedia Dreamweaver MX 2004 中可以使用 CSS 在文档中添加内容块来进行布局。可以插入 div标签并对其应用 CSS 定位样式，Dreamweaver 将所有带有绝对或相对位置的 div 标签都当作层。 Dreamweaver层是一种HTML页面元素，用户可以将它定位在页面上的任意位置。层可以包含文本、图像或其它任何可在 HTML 文档正文中放入的内容。用户可以将层前后放置，隐藏某些层而显示其它层，以及在屏幕上移动层。但是，Microsoft Internet Explorer 4.0 和 Netscape Navigator 4.0之前版本的 Web 浏览器无法显示层，而这两种浏览器显示层的方式并不完全一致。若要确保所有人都能够查看用户的 Web 页，可以使用层设计页，然后将层转换为表。但是，如果用户所面对的访问者很可能使用最新的浏览器，则可以完全用层来设计布局，而无需将层转换为表。 12.1.1 层的 HTML 代码 当用户在文档中放置层时，Dreamweaver将在代码中插入该层的 HTML 标签。用户可以选择让 Dreamweaver 将 div标签或 span 标签用于用户的层。默认情况下，Dreamweaver 会使用 div 标签创建层。 用户还可以使用另外两种标签来创建层：layer 和 ilayer。但是，只有 Netscape Navigator 4 支持这些标签；Internet Explorer 不支持这些标签，而 Netscape 在较新的浏览器中也不再支持这些标签。Dreamweaver 可以识别 layer 和 ilayer 标签，但不使用这些标签来创建层。 若要进一步提高在较早浏览器中的可读性，应注意放置层代码的位置。定义层的代码可以位于 HTML 文件正文中的任意位置。当用户在 Dreamweaver 中绘制一个层时，该层会显示在用户绘制它的位置，但 Dreamweaver 将在页开头且紧接在 body 标签之后插入该层的代码。如果用户使用的是“插入层”命令而不是绘制层，层代码将在插入点处插入。如果用户创建一个嵌套层，Dreamweaver 会在定义父层的标签内插入代码。不支持层的浏览器都将显示层的内容但不定位层。层的内容出现在该页上的层代码所在的那一点，例如，如果层的代码位于页的开头，层的内容将出现在页的开头。现在学习嵌套层的 HTML 代码示例。 12.1.2 插入div 标签 可以使用 div 标签定位文档中的内容块。Dreamweaver 使用户能够快速插入 div 标签并对其应用已有样式。如果要插入 div 标签，可以依照下列步骤操作： 1. 在“文档”窗口中，将插入点放置在要显示 div 标签的位置； 2. 选择“插入”“布局”“Div 标签”。或者在“插入”栏的“布局”类别中单击“Div 标签”按钮。出现“插入 Div 标签”对话框； 3. 设置“插入 Div 标签”对话框的选项： ? ◇从“类”弹出菜单中选择一个 Class。如果附加了样式表，则该样式表中定义的类 将出现在列表中。 ? ◇从“ID”弹出菜单中选择一个 ID。 如果附加了样式表，则该样式表中定义的 ID 将出现在列表中。Dreamweaver 不会列出文档中已有块的 ID。如果在文档中 输入与其它标签相同的 ID，Dreamweaver 会提醒更改。 ? ◇从“插入”弹出菜单中选择一个插入点，以指定要显示 div 标签的位置。 ? ◇如果选择“在插入点”和“环绕选定内容”以外