第九章框架

9.1 认识框架

框架主要有两大组成部分：框架系（Frameset)和框架(Frame)。框架系是指在文件内定义一套框架的结构组成的HTML页。框架系的定义中包括的信息有：显示在页面上的框架的数目，框架大小，嵌入框架中的页面源代码以及其他可定义的属性。要注意的是，框架系的HTML页是不在浏览器中显示的，它只储存如何显示页面框架的信息。
如果我们在浏览器中看到的含两个的页面的网页，实际上是3个单独的文件：框架系文件和两个包含显示于框架中的内容的文件。

9.2 创建框架

1 创建框架系

现在我们来创建框架系。在我们要创建一个框架系或对框架进行操作前，首先，在菜单项中选中View>Frame Borders（查看>框架边界），这时框架边界变得可见，按Alt键，把鼠标置于框架边框上就可拖出新的框架并能调整它的大小。如图1所示。　

13-1.gif (1755 bytes)

图1　框架边框的拖动

技巧：从框架边界的任一个角上按Alt键拖动鼠标可以把文件分为四个框架；拖曳框架边框至页面外可删除框架。

2 插入预定义框架系

打开对象面板，点右侧的小箭头从下拉菜单选择框架（Frames），预定义框架系图标的蓝色区域代表文件中正被选中的页面和框架，白色区域代表新的框架。如图2所示。

13-2.gif (3727 bytes)
图2　对象面板的框架面板

把光标插入点放置在将用框架系围绕的文件里；在对象调色板上的框架面板中，选择一个预定义框架系，通过单击预定义框架系图标或直接把图标拖曳到文件中，来插入框架系。

3 创建嵌套框架系

Dreamweaver允许创建嵌套框架系来满足复杂的设计。所谓嵌套框架系，就是指一个框架系中包含有另一个框架系，图3是在左侧的框架中嵌入新的框架。

图3 嵌套框架

9.3 框架的选择与保存

1 框架的选择：从菜单栏中选择Window>Frames（窗口>框架）打开的框架指示器，如图4所示。

13-3.gif (2657 bytes)
图4 框架指示器

框架指示器上显示了框架系的层次（图4有两层），而编辑窗口不显现这种层次。每个框架都用一个框架名来标识，只要用鼠标在框架中点击即选中某个框架。要选择框架系，则单击其外框线即可。

2 保存框架文件：必须先把框架系文件和与之相关的框架文件存盘才能在浏览器中预览网页。
存储框架系文件时，从菜单栏中选择File>Save Frameset（文件>存储框架系）,存成另一个新文件，可给文件取个新名，然后选择合适的路径即完成了框架系文件的保存和命名。

存储框架文件时，先在框架内单击选择，然后从菜单栏中选择File>Save（文件>存储），在弹出的对话框中取名、确定存储路径按“保存”即可。

如果从菜单栏中选择File>Save All，就能依次保存框架系中所有文件。

9.4 框架和框架系的属性

框架和框架系都有一个属性指示器。框架属性指示器规定了一个框架系中框架的名称、源文件、页边空白、滚动方式、改变尺寸和个性化框架边框等属性。框架系属性指示器则决定了各框架的尺寸大小以及框架间边界线的宽度颜色等属性。

1 框架的属性设置

设置框架属性的方法是：在框架指示器单击选择一个框架，在属性面板的框架命名区内键入一个名称来命名框架，如图5所示。　

图5 框架属性指示器

选择框架属性面板的相关选项：

Src：指定框架文件的路径；可以输入一个存在的文件名或按后面的文件夹图标通过浏览选择文件。
Scroll：滚动条设置。设定当内容超出框架显示范围时是否启用滚动条。有4个选项：是（Yes）：启用滚动条；否（No）：从不启用；自动（Auto）：超出时启用。
选中固定尺寸（No Resize）则限定当前框架尺寸并限制用户通过拖曳框架边框来改变框架尺寸。前面我们知道，在文件窗口是能改变框架的尺寸大小的，但如果你选中了这一选项，你就不能在其浏览器中改变框架的尺寸了。
边界（Border）：边界选项决定当前框架的边界属性。有3个选项：是（Yes），否（No），默认（Default）。大多数的浏览器的默认值为是（Yes）。这个选项优先于框架系中的边界设置。
边界颜色（Border Color）：设置当前框架的所有边界的颜色。这个设置优先于框架系中的边界颜色设置。
设置页边距。页边距宽度（Margin Width）：指框架中内容与左右框架边界线之间的的宽度。页边距高度（Margin Height）：设置上下页边距的宽度。

2 框架系的属性设置

预定义的框架系有如下的默认属性：当在浏览器中显示时，它是无边界，无滚动条且框架尺寸是不可变的。可以在属性指示器里选择需要的选项来改变默认值。

设置框架系属性的方法是：此时打开了属性指示器，单击框架指示器中框架的边界选中框架系，如图6所示。　

图6 框架系属性指示器

选择框架系属性面板的相关选项：

Border（边框）:在下拉框中选择浏览器显示文件时是否显示框架的边框。

Border Width（边框宽度）：可输入一个宽度值来确定当前框架系的宽度，值为“0”则无边框。

Border Color（边框颜色）：单击输入栏左侧方框内的颜色采集器在弹出的颜色盘中选取颜色。

右侧的选择箱：单击选择区域，然后在左边的Value栏输入所选定区域的尺寸值。

9.5 在特定的框架中打开页面

利用属性指示器的目标（Target）下拉菜单选择一个特定的框架来打开某个文件。下面是个框架结构的网页，有三帧，左边的是导航页面为left帧，顶端是放旗帜的为rtop帧，右边为显示页面内容的rbottom帧，如图7所示。

图7一个由三个框架构成的网页

如果我们希望在left帧的点任意栏目，在rbottom帧就会显示相应的链结，制作过程：在导航页面选择一对象，在属性面板中先选择链接文件，然后在目标（Target）下拉菜单选择该链接的显示界面，如图8所示。

图8链接目标定位

我们命名的三个框架名都出现在目标下拉菜单里，选择rbottom框架就即可满足前面的要求。

9.6 怎样创建无框架页面

老版本的浏览器不支持框架结构，那就要用Dreamweaver定制无框架页面，具体步骤：在菜单栏中选择Modify>Frameset>Edit NoFramesContent（修改>框架系>编辑无框架内容）。此时Dreamweaver清除窗口，并在内容区顶部显示“Noframes Content”，再将你希望访问者看到的内容输入。再次选择Modify>Frameset>Edit NoFramesContent就能回到原框架编辑环境。