搜索
本章将介绍框架和APDiv的基本知识以及使用它们布局页面的基本方法。第08章使用框架和APDiv布局页面学习目标掌握创建框架的方法。掌握设置框架的方法。掌握创建APDiv的方法。掌握设置APDiv的方法。掌握Div标签的使用方法。8.1创建框架创建框架保存框架在框架中打开网页文档拆分框架8.1.1创建框架DreamweaverCS3中预先定义了很多种框架集，创建预定义框架集的方法如下。选择【文件】/【新建】命令，打开【新建文档】对话框，切换到【示例中的页】选项卡，在【示例文件夹】列表中选择【框架集】选项，在右侧的【示例页】列表中选择相应的选项在欢迎屏幕中，选择【从模板创建】/【框架集】命令在当前网页中，单击【插入】/【布局】工具栏中（框架）按钮的（向下箭头），在弹出的下拉按钮组中单击相应的按钮在当前网页中，选择菜单栏中的【插入记录】/【HTML】/【框架】中的相应命令8.1.1创建框架8.1.1创建框架8.1.2保存框架由于一个框架集包含多个框架，每一个框架都包含一个文档，因此一个框架集会包含多个文件。在保存框架网页的时候，不能只简单地保存一个文件，而要将所有的框架网页文档都保存下来。可以分别保存每个框架集页面或框架页面，也可以同时保存所有的框架文件和框架集页面。选择【文件】/【保存全部】命令，整个框架边框的内侧会出现一个阴影框，同时弹出【另存为】对话框。8.1.3在框架中打开网页文档新创建的每一个框架都是一个空文档，也可以在该框架内直接打开已经预先制作好的文档。将鼠标光标置于框架内，选择【文件】/【在框架中打开】命令，打开文档即可。8.2设置框架选择框架和框架集设置框架集属性设置框架属性设置框架中的超级链接8.2.1选择框架和框架集一、在【框架】面板中选择框架和框架集选择【窗口】/【框架】命令，打开【框架】面板。【框架】面板以缩略图的形式列出了框架集及内部的框架，每个框架中间的文字就是框架的名称。在【框架】面板中，直接单击相应的框架即可选择该框架，单击框架集的边框即可选择该框架集。被选择的框架和框架集，其周围出现黑色细线框。8.2.1选择框架和框架集二、在编辑窗口中选择框架和框架集按住Alt键不放，在相应的框架内单击鼠标左健即可选择该框架，被选择的框架边框将显示为虚线。单击相应的框架集边框即可选择该框架集，被选择的框架集边框也将显示为虚线。8.2.2设置框架集属性在【框架】面板中单击框架集边框，将整个框架集选中，然后在【属性】面板中，设置框架集属性。8.2.3设置框架属性在【框架】面板中单击框架将其选中，然后在【属性】面板中设置相关参数。8.2.4设置框架中的超级链接在没有框架的文档中，按照指向的对象窗口不同，链接目标可以分为“_blank”、“_parent”、“_self”、“_top”等4种形式。而在使用框架的文档中，又增加了与框架有关的目标，可以在一个框架内使用链接改变另一个框架的内容。8.3创建APDiv创建APDiv修改APDiv的默认设置8.3.1创建APDiv将鼠标光标置于文档窗口中欲插入APDiv的位置，选择【插入记录】/【布局对象】/【APDiv】命令，插入一个默认的APDiv。将【插入】/【布局】面板上的（绘制APDiv）按钮拖曳到文档窗口中，插入一个默认的APDiv。8.3.1创建APDiv单击【插入】/【布局】面板上的（绘制APDiv）按钮，将鼠标光标移至文档窗口中，当鼠标光标变为+形状时，拖曳鼠标光标，绘制一个自定义大小的APDiv。如果想一次绘制多个APDiv，在单击（绘制APDiv）按钮后，按住Ctrl键不放，连续进行绘制即可。8.3.1创建APDiv制作嵌套的APDiv通常有两种方式：一种是在APDiv内部新建嵌套APDiv；另一种是将已经存在的APDiv添加到另外一个APDiv内，从而使其成为嵌套的APDiv。一、绘制嵌套APDiv首先选择【编辑】/【首选参数】命令，打开【首选参数】对话框，选择【分类】列表中的【AP元素】分类，勾选右侧面板中的【在APdiv中创建以后嵌套】复选框，然后在【插入】/【布局】工具栏上单击（绘制APDiv）按钮，在现有APDiv中拖曳，则绘制的APDiv就嵌套在现有APDiv中了。8.3.1创建APDiv二、插入嵌套APDiv将鼠标光标置于所要嵌套的APDiv中，确定插入点，然后选择【插入记录】/【布局对象】/【APDiv】命令，插入一个嵌套的APDiv。三、使用【AP元素】面板制作嵌套APDiv在【AP元素】面板中选择一个APDiv，按住Ctrl键，将其拖曳到另一个APDiv上面，形成嵌套APDiv。8.3.2修改APDiv的默认设置选择【编辑】/【首选参数】命令，打开【首选参数】对话框，在其中的【分类】列表框中选择【AP元素】分类。8.4设置APDiv选择APDiv设置APDiv属性缩放APDiv移动APDiv对齐APDiv8.4.1选择APDiv单击文档中的图标来选定APDiv，如果该图标没有显示，请在【首选参数】/【不可见元素】分类中勾选【AP元素的锚点】复选框。8.4.1选择APDiv将鼠标光标置于APDiv内，然后在文档窗口底边的标签条中选择“div#apDiv1”标签。8.4.1选择APDiv单击APDiv的边框线。在【AP元素】面板中单击APDiv的名称。如果要选定两个以上的APDiv，只要按住Shift键，在文档窗口中逐个单击APDiv手柄，或在【AP元素】面板中逐个单击APDiv的名称，就可将APDiv同时选定。8.4.2设置APDiv属性创建APDiv后，在【属性】面板中会显示所创建APDiv的基本属性设置，如左边界、上边界、宽度、高度、z轴顺序、可见性、背景图像、背景颜色等，此时可以进一步修改这些属性设置，使APDiv更完美。8.4.3缩放APDiv缩放单个APDiv有以下几种方法。选定APDiv，然后拖曳缩放手柄（APDiv周围出现的小方块）来改变APDiv的尺寸。拖曳下手柄改变APDiv的高度，拖曳右手柄改变APDiv的宽度，拖曳右下角的缩放点同时改变APDiv的宽度和高度。选定APDiv，然后按住Ctrl键，每按一次方向键，APDiv就被改变一个像素值。选定APDiv，然后同时按住Shift＋Ctrl键，每按一次方向键，APDiv就被改变10个像素值。8.4.3缩放APDiv同时调整多个APDiv的宽度。按住Shift键，将3个APDiv逐一选定，然后选择【窗口】/【属性】命令，打开它们的【属性】面板，在【属性】面板的【宽】文本框内输入数值，按Enter键确认。此时文档窗口中所有APDiv的宽度全部变成了所设置的数值。8.4.4移动APDiv移动APDiv的方法主要有以下几种。选定APDiv后，当鼠标光标靠近缩放手柄出现时，按住鼠标左键拖动鼠标，APDiv将跟着鼠标的移动而发生位移。选定APDiv，然后按4个方向键，向4个方向移动APDiv。每按一次方向键，将使APDiv移动1个像素值的距离。选定APDiv，按住Shift键，然后按4个方向键，向4个方向移动APDiv。每按一次方向键，将使APDiv移动10个像素值的距离。8.4.5对齐APDiv对齐功能可以使两个或两个以上的APDiv按照某一边界对齐。对齐APDiv的方法是，首先将所有APDiv选定，然后选择【修改】/【排列顺序】中的相应命令，如选择【对齐下缘】命令，将使所有被选中的APDiv的底边按照最后选定的APDiv的底边对齐，即所有APDiv的底边都排列在一条水平线上。在【修改】/【排列顺序】菜单中，共有以下4种对齐方式。【左对齐】：以最后选定的APDiv的左边线为标准，对齐排列APDiv。【右对齐】：以最后选定的APDiv的右边线为标准，对齐排列APDiv。【对齐上缘】：以最后选定的APDiv的顶边为标准，对齐排列APDiv。【对齐下缘】：以最后选定的APDiv的底边为标准，对齐排列APDiv。8.4.5APDiv的可见性单击【AP元素】面板的图标列，可以改变可见性。8.5Div标签APDiv与Div标签使用的是同一个标签──“div”，只是APDiv被赋予了CSS样式，而Div标签只有一个【ID】属性参数。在源代码中，它们使用的都是“div”标签。APDiv在绘制时，同时被赋予了CSS样式，而插入Div标签时，需要再单独创建CSS样式对它进行控制。实际上，APDiv与Div标签是同一个网页元素的不同表现形态，通过CSS样式可使两者间相互转换。例如，在CSS规则定义对话框的【定位】分类中，将【类型】选项设置为“绝对”，即表示APDiv，否则即为Div标签，这是APDiv与Div标签相互转换的关键因素。在【插入】/【布局】面板中单击（插入Div标签）按钮，在弹出的对话框中进行设置。8.6实例──布局“世界风景图片导航”网页通过前面各节的学习，读者应该对框架和APDiv的基本知识有了一定的了解。本节将以“天搜”网页为例，介绍使用APDiv和Div标签布局网页的基本方法，让读者进一步巩固所学内容。