Dreamweaver cs5中文版入门与提高实例教程 第8章

第8章AP元素和框架

本章重点本章将介绍AP元素和框架的基本知识及使用方法，内容包括：AP元素及嵌套AP元素的创建、AP元素的属性设置、AP元素的管理、AP元素的操作、实现AP元素与表格之间的相互转化以及显示与隐藏AP元素；框架的创建、框架的基本操作、框架和框架集的属性设置、设置框架背景、保存框架和框架集文件、使用链接控制框架的内容及框架的实际应用等。学习目的通过本章的学习，您可以掌握：插入AP元素和设置AP元素的属性的方法。选择、移动及删除AP元素和调整AP元素大小的方法。设置AP元素的堆叠顺序及显示与隐藏AP元素的方法。框架集和框架的创建与操作的方法。8.1AP元素的概念DreamweaverCS5中的AP元素有如下优点：1.能够精确定位2．插入自如3．加速浏览4．可叠加（1）单击“插入”面板上的“布局”标签，切换到“布局”面板。（2）单击“布局”面板中的“绘制APDiv”图标，此时鼠标将会变成形状。（3）在文档窗口中需要插入AP元素的位置，按下鼠标左键拖出一个矩形AP元素。技巧：如果需要绘制多个AP元素，在单击“绘制APDiv”图标之后，按住Ctrl键的同时在文档窗口中绘制一个AP元素，只要不释放Ctrl键，就可以连续绘制多个AP元素。8.2创建AP元素（1）单击“插入”面板上的“布局”标签，切换到“布局”面板。（2）单击“布局”面板中的“绘制APDiv”图标，此时鼠标将会变成形状。（3）在文档窗口中需要插入AP元素的位置，按下鼠标左键拖出一个矩形AP元素。技巧：如果需要绘制多个AP元素，在单击“绘制APDiv”图标之后，按住Ctrl键的同时在文档窗口中绘制一个AP元素，只要不释放Ctrl键，就可以连续绘制多个AP元素。执行“窗口”｜“AP元素”命令，可以显示AP元素管理面板。如图所示。绘制嵌套AP元素，有以下三种方法：（1）在“首选参数”对话框中启用AP元素嵌套功能，并确保“AP元素”面板上的“防止重叠”复选框没有选中，然后将光标放置在已绘制的AP元素内部绘制一个AP元素，新绘制的AP元素将自动嵌套在先创建的AP元素中。若在“首选参数”对话框中禁用了AP元素嵌套功能，可以采用接下来的第二种方式。（2）在绘制子AP元素的同时，按下键盘上的Alt键。先创建的AP元素成为父AP元素，在父AP元素内创建的AP元素成为子AP元素。（3）执行“窗口”/“AP元素”菜单命令，调出“AP元素”管理面板。然后在AP元素列表中选中将作为子元素的AP元素，按住Ctrl键将该AP元素拖动到父AP元素上，释放鼠标即可。

8.3AP元素常用操作激活、选择AP元素提示：激活AP元素的操作不等于选择AP元素。移动、对齐、复制AP元素调整AP元素的尺寸设置AP元素的堆叠顺序显示、隐藏AP元素

8.4

AP元素与表格相互转换执行“修改”/“转换”/“将APDiv转换为表格”命令执行“修改”/“转换”/“将表格转换为APDiv”命令注意：在模板文档或基于模板创建的文档中，不能将AP元素和表格进行相互转换。如果确实需要转换，应在将文档存为模板之前进行转换。8.6框架概述

一般情况下，框架网页由边框、滚动条和其中显示的框架文件组成。下面我们简要介绍一下框架网页的这三个组成部分，便于读者更好地理解本章的内容。边框边框是相邻框架间的分隔线。边框线有两个属性：粗细和颜色。用户可以根据需要调整边框的粗细和颜色，以增加视觉效果。滚动条当框架中的内容比较多，不能一屏完全显示时，就需要用滚动条来控制滚动页面，以便显示网页其他部分的内容。框架文件前面提到过，框架是网页上的一个显示区域，每个框架都可以不受页面上其他框架的影响显示一个独立的页面。这个在框架内打开的网页文件即为框架文件。使用框架具有以下优点：访问者的浏览器不需要为每个页面重新加载与导航相关的图形。每个框架都可以具有自己的滚动条（如果内容太大，在窗口中显示不下），因此访问者可以独立滚动这些框架。（例如，当框架中的内容页面较长时，如果导航条位于不同的框架中，那么向下滚动到页面底部的访问者就不需要再滚动回顶部来使用导航条。）使用框架具有以下缺点：可能难以实现不同框架中各元素的精确图形对齐。对导航进行测试可能很耗时间。各个带有框架的页面的URL不显示在浏览器中，因此访问者可能难以将特定页面设为书签。1.使用预置框架

激活“插入”/“布局”面板，单击图标中的向下箭头弹出“框架的类型”下拉菜单，如图所示。预置框架的代表图标都是由两种颜色组成的，其中蓝色的区域表示在创建框架后，原文档内容所在的位置；空白区域则是指新创建的框架文档所在的位置。如果插入框架之后，框架边框不可见，执行“查看”/“可视化助理”/“框架边框”命令，即可使文档窗口中的框架边框可见。8.6.1创建框架

2.自定义框架

一个网页可以包含多个框架，每个新创建的框架都包括它自己的框架集HTML文档和框架文档。框架文档可以是普通的网页，也可以是另外的一个框架网页，如果框架中包含的网页是一个框架网页，则形成了框架的嵌套。例如，上例创建的框架就是一个嵌套框架。简单地说，嵌套框架就是一个框架中的框架。大多数网页使用的框架都是嵌套框架。3.noframe和iframe

由于早期版本的浏览器不支持框架，当页面中含有框架时，浏览器就不能正确显示页面的内容，这时必须编辑一个无框架文档。当不支持框架的浏览器载入框架体文件时，浏览器只会显示出无框架内容。新建一个文档，执行“修改”/“框架集”/“编辑无框架内容”命令。可以在该窗口中输入文本、插入图像、编辑表格、制作表单等内容。但是不能在该窗口中创建框架。

Iframe是个比较新的标识。其实iframe和frame功能一样，也可以调用一个外部文件，不同的是它是个浮动框架，可以放置在网页中的任何位置；而且它引用的HTML文件不是与另外的HTML文件相互独立显示，而是直接嵌入在一个HTML文件中，与这个HTML文件内容相互融合，成为一个整体。此外，利用iframe还可以多次在一个页面内显示同一内容，而不必重复写内容，一个形象的比喻即“画中画”电视。这种极大的自由度可以给网页设计带来很大的灵活性。（1）单击“布局”面板上的插入iframe按钮，文档窗口自动切换为“折分”视图，并在“代码”视图中插入<iframe></iframe>标记。如图所示。（2）在“代码”视图中修改<Iframe></iframe>代码。8.6.3选择框架和框架集选取框架和框架集可以直接在文档窗口中进行，也可以在“框架”面板中进行。

1．将鼠标指针移动到框架的某条边框上，当鼠标指针变为水平双向箭头（左右边框）或垂直双向箭头（上下边框）时，单击边框即可选中整个框架。在文档窗口中，被选取的框架周围有虚线包围。

2．将鼠标指针移动到第一次分割框架的边框位置，当鼠标指针变为水平双向箭头（左右边框）或垂直双向箭头（上下边框）时，单击边框即可选中整个框架组。

3．执行“窗口”/“框架”命令可以打开“框架”面板，用鼠标点击框架的边框即可选取框架。框架面板提供框架集内各个框架的可视化表示形式。它能够显示框架集的层次结构，而这种层次在文档窗口中的显示可能不够直观。8.6.7保存框架集和框架

若要在浏览器中预览框架网页，必须先保存框架网页。由于每一个框架代表一个单独的网页，所以在保存框架结构的文档时，不但要保存整个文档的框架结构，还要保存各个框架文件。否则，框架中输入的内容会丢失。选择“文件”/“保存框架页”菜单命令；或选择“文件”/“框架集另存为”命令，则只保存框架集文件。在最后退出文档时，Dreamweaver会弹出对话框询问是否保存各个框架文件。在框架内单击，然后选择“文件”/“保存框架”命令，则只保存框架文件。执行“文件”/“保存全部”命令，则会弹出一个保存文件窗口，同时会显示整个框架被选中的状态。8.6.8编辑框架设置框架属性设置框架的背景在“页面属性”对话框中设置框架的背景。在框架中打开文档只有在框架集内编辑文档时才显示框架名称。在文档自身的文档窗口中编辑该文档时（在