第07章 使用框架布局页面

1、 框架也是网页布局的工具之一，它能够将网框架也是网页布局的工具之一，它能够将网页分割成几个独立的区域，每个区域显示独页分割成几个独立的区域，每个区域显示独立的内容。框架的边框还可以隐藏，从而使立的内容。框架的边框还可以隐藏，从而使其看起来与普通网页没有任何不同。本章将其看起来与普通网页没有任何不同。本章将介绍在介绍在Dreamweaver CS3Dreamweaver CS3中，创建和设置框架中，创建和设置框架的基本方法。的基本方法。第7章使用框架布局页面学习目标了解框架的概念。了解框架的概念。掌握创建和保存框架的方法。掌握创建和保存框架的方法。掌握编辑框架的方法。掌握编辑框架的方法。掌握设置

2、框架和框架集属性的方法。掌握设置框架和框架集属性的方法。掌握设置框架中链接目标窗口的方法。掌握设置框架中链接目标窗口的方法。掌握为不支持框架的浏览器定义内容的方法。掌握为不支持框架的浏览器定义内容的方法。掌握创建嵌入式框架的方法。掌握创建嵌入式框架的方法。7.1认识框架框架是设计网页时经常用到的一种布局技术。利用框架可框架是设计网页时经常用到的一种布局技术。利用框架可以将浏览器窗口分成多个区域，在每个区域显示不同的内以将浏览器窗口分成多个区域，在每个区域显示不同的内容。各个区域之间可以毫无关联，这些区域有各自独立的容。各个区域之间可以毫无关联，这些区域有各自独立的背景、滚动条和标题等。通过在这

3、些不同的区域之间设置背景、滚动条和标题等。通过在这些不同的区域之间设置超级链接，就可以在浏览器窗口中呈现出有动有静的效果。超级链接，就可以在浏览器窗口中呈现出有动有静的效果。7.2 创建和保存框架创建框架创建框架保存框架保存框架在框架中打开网页文档在框架中打开网页文档7.2.1 创建框架Dreamweaver CS3中预先定义了很多种框架集，创建预定义中预先定义了很多种框架集，创建预定义框架集的方法如下。框架集的方法如下。选择【文件】选择【文件】/ /【新建】命令，打开【新建文档】对话框，切换【新建】命令，打开【新建文档】对话框，切换到【示例中的页】选项卡，在【示例文件夹】列表中选择【框到【示

4、例中的页】选项卡，在【示例文件夹】列表中选择【框架集】选项，在右侧的【示例页】列表中选择相应的选项架集】选项，在右侧的【示例页】列表中选择相应的选项在欢迎屏幕中，选择【从模板创建】在欢迎屏幕中，选择【从模板创建】/ /【框架集】命令【框架集】命令在当前网页中，单击【插入】在当前网页中，单击【插入】/ /【布局】工具栏中【布局】工具栏中 （框架）按（框架）按钮的钮的 （向下箭头），在弹出的下拉按钮组中单击相应的按钮（向下箭头），在弹出的下拉按钮组中单击相应的按钮在当前网页中，选择菜单栏中的【插入记录】在当前网页中，选择菜单栏中的【插入记录】/ /【HTMLHTML】/ /【框【框架】中的相应命令

5、架】中的相应命令7.2.1 创建框架7.2.2 保存框架选择【文件】选择【文件】/ /【保存全部】命令将依次保存框架集内的所有文【保存全部】命令将依次保存框架集内的所有文件，包括框架集文件和框架文件件，包括框架集文件和框架文件在需要保存的框架内单击，然后选择【文件】在需要保存的框架内单击，然后选择【文件】/ /【保存框架】命【保存框架】命令可以对单个框架文件进行保存令可以对单个框架文件进行保存选择【文件】选择【文件】/ /【框架另存为】命令可以给框架文件改名；如果【框架另存为】命令可以给框架文件改名；如果要将框架保存为模板，可以选择【文件】要将框架保存为模板，可以选择【文件】/ /【框架另存为

6、模板】【框架另存为模板】命令命令在【框架】面板或【设计】视图窗口中选择框架集，然后选择在【框架】面板或【设计】视图窗口中选择框架集，然后选择【文件】【文件】/ /【保存框架】命令或【文件】【保存框架】命令或【文件】/ /【框架集另存为】命【框架集另存为】命令可以保存框架集文件令可以保存框架集文件7.2.2 保存框架7.2.3 在框架中打开网页文档新创建的每一个框架都是一个空文档，也可以在该框架内直新创建的每一个框架都是一个空文档，也可以在该框架内直接打开已经预先制作好的文档接打开已经预先制作好的文档。将鼠标光标置于框架内，选择。将鼠标光标置于框架内，选择【文件】【文件】/【在框架中打开】命令，

7、打开文档即可。【在框架中打开】命令，打开文档即可。7.3 编辑框架选择框架和框架集选择框架和框架集拆分和删除框架拆分和删除框架7.3.1 选择框架和框架集一、在一、在【框架【框架】面板中选择框架和框架集】面板中选择框架和框架集 选择选择【窗口【窗口】/【框架【框架】命令，打开】命令，打开【框架【框架】面板。】面板。【框架【框架】面板以缩】面板以缩略图的形式列出了框架集及内部的框架，每个框架中间的文字就是框略图的形式列出了框架集及内部的框架，每个框架中间的文字就是框架的名称。在架的名称。在【框架【框架】面板中，直接单击相应的框架即可选择该框架，】面板中，直接单击相应的框架即可选择该框架，单击框架

8、集的边框即可选择该框架集。被选择的框架和框架集，其周单击框架集的边框即可选择该框架集。被选择的框架和框架集，其周围出现黑色细线框。围出现黑色细线框。7.3.1 选择框架和框架集二、在编辑窗口中选择框架和框架集二、在编辑窗口中选择框架和框架集 按住按住Alt键不放，在相应的框架内单击鼠标左健即可选择该框架，被键不放，在相应的框架内单击鼠标左健即可选择该框架，被选择的框架边框将显示为虚线。单击相应的框架集边框即可选择该框选择的框架边框将显示为虚线。单击相应的框架集边框即可选择该框架集，被选择的框架集边框也将显示为虚线。架集，被选择的框架集边框也将显示为虚线。7.3.2 拆分和删除框架一、使用菜单命

9、令拆分框架一、使用菜单命令拆分框架 在菜单栏中选择在菜单栏中选择【修改【修改】/【框架集【框架集】菜单中的】菜单中的【拆分左框架【拆分左框架】、】、【拆【拆分右框架分右框架】、】、【拆分上框架【拆分上框架】或】或【拆分下框架【拆分下框架】命令可以拆分框架。】命令可以拆分框架。也可以在也可以在【插入【插入】/【布局【布局】工具栏中单击相应的】工具栏中单击相应的【框架【框架】按钮来拆】按钮来拆分框架。这些命令可以用来反复对框架进行拆分，直至满意为止。分框架。这些命令可以用来反复对框架进行拆分，直至满意为止。7.3.2 拆分和删除框架二、手动自定义框架集二、手动自定义框架集 在菜单栏中选择在菜单栏中

10、选择【查看【查看】/【可视化助理【可视化助理】/【框架边框【框架边框】命令，显示】命令，显示出当前网页的边框，然后将鼠标光标置于框架最外层边框线上，当鼠出当前网页的边框，然后将鼠标光标置于框架最外层边框线上，当鼠标光标变为标光标变为 时，单击并拖动鼠标到合适的位置即可创建新的框架。时，单击并拖动鼠标到合适的位置即可创建新的框架。7.3.2 拆分和删除框架 如果将鼠标光标置于最外层框架的边角上，当鼠标光标变为如果将鼠标光标置于最外层框架的边角上，当鼠标光标变为 时，时，单击并拖动鼠标到合适的位置，可以一次创建垂直和水平的两条边框，单击并拖动鼠标到合适的位置，可以一次创建垂直和水平的两条边框，将框

11、架分隔为将框架分隔为4个框架。个框架。7.3.2 拆分和删除框架 如果拖动内部框架的边角，可以一次调整周围所有框架的大小，但不如果拖动内部框架的边角，可以一次调整周围所有框架的大小，但不能创建新的框架。能创建新的框架。7.3.2 拆分和删除框架 如要创建新的框架，可以先按住如要创建新的框架，可以先按住Alt键，然后拖动鼠标光标，可以对键，然后拖动鼠标光标，可以对框架进行垂直和水平的分隔框架进行垂直和水平的分隔7.3.2 拆分和删除框架三、删除框架三、删除框架 如果要删除框架集内多余的框架，可以将其边框拖动到父框架边框上如果要删除框架集内多余的框架，可以将其边框拖动到父框架边框上或直接拖离页面。

12、或直接拖离页面。7.4 设置框架属性设置框架集属性设置框架集属性设置框架属性设置框架属性7.4.1 设置框架集属性7.4.2 设置框架属性7.5 在框架中设置超级链接 在没有框架的文档中，按照指向的对象窗口不同，链接目标在没有框架的文档中，按照指向的对象窗口不同，链接目标可以分为可以分为“_blank”、“_parent”、“_self”、“_top”等等4种种形式。而在使用框架的文档中，又增加了与框架有关的目形式。而在使用框架的文档中，又增加了与框架有关的目标，可以在一个框架内使用链接改变另一个框架的内容。标，可以在一个框架内使用链接改变另一个框架的内容。7.6编辑无框架内容 有些浏览器不支

13、持框架技术，有些浏览器不支持框架技术，Dreamweaver CS3提供了解提供了解决这种问题的方法，即编辑决这种问题的方法，即编辑“无框架内容无框架内容”，以使不支持，以使不支持框架的浏览器也可以显示无框架内容。框架的浏览器也可以显示无框架内容。 选择【修改】选择【修改】/【框架集】【框架集】/【编辑无框架内容】命令，内容【编辑无框架内容】命令，内容输入完毕后，再次选择【修改】输入完毕后，再次选择【修改】/【框架集】【框架集】/【编辑无框【编辑无框架内容】命令返回到普通视图。架内容】命令返回到普通视图。7.7 创建浮动框架选择【插入记录】选择【插入记录】/【标签】命令，打开【标签选择器】对话【标签】命令，打开【标签选择器】对话框，然后展开【框，然后展开【HTML标签】分类，在右侧列表中找到标签】分类，在右侧列表中找到“iframe”