Dreamweaver4神童教程之八

2008-02-23 06:17:41来源：互联网阅读 ()

Dreamweaver4神童教程——框架
摘自赛迪网（小雷）

　　我们已学过了表格的网页定位技术，现在来学习另外一种定位技术——框架(Frame)。

一．框架概述：
　　
　　框架技术自从推出以来就成了大家争论不休的话题。一方面，他能够将浏览器显示空间分割成几个部分，每个部分能够单独显示不同的网页，同时对于整个网页设计的整体性的保持也是有利的；但他的缺陷又同样明显，对于不支持框架结构的浏览器，页面信息不能显示。但是，现在大部分朋友使用的都是微软探索者( Internet Explorer )浏览器 4.0 或更高版本，他们都支持框架结构，因此用框架制作的网页愈来愈多，最典型的例子，莫过于各个大型网站的论坛，如图一：

图一

二．建立框架：

　　Window/Frames 命令能够打开框架面板，本面板在整个框架创建中起着决定性的作用。如图二：

图二

　　另外一个很重要的面板是框架集成面板，本面板能够通过 Window/Objects/Frames 打开。如图三：

图三

　　框架集成面板用比较直观的样式显示了基本的框架构成，只需点选合适的图标就能建立相应的框架页面。如我们要建立左右两个窗口的框架，则需点击框架集成面板上用红色勾出的图标。如图四：

图四

　　假如要获得复杂的框架结构（即框架的嵌套），则需配合框架面板的使用。其操作方法是：在框架面板上点选某一个框架，然后按住 ALT 键，再拖动编辑区域相应框架的边框就行了；或在框架面板上选中某一个框架的前提下，点选框架集成面板上指定的框架类型。如图五：

图五

假如要删除大框架中的一个小框架，只需用鼠标拖动该小框架的边框到父框架的边框上就行了。

三．框架设定：

框架设定包括框架集(Frameset)和框架(Frame)的设定，框架是框架集中的一部分，任何的框架"集"成一个框架集。

1.框架集设定：

通过框架集成面板建立的，还没取消选择状态的，就是框架集。（框架集的选择，通过点击框架面板上最外面的边框取得；要选择某一个框架，只需点选框架面板上相应的地方就行了。）框架集的属性面板如图六：

图六

Rows 和 Cols 是框架集的基本信息，代表着行和列的关系。
Borders ：是否显示边框， No 不显示，Yes 则显示边框。
Border Width 和 Border Color ：分别代表边框的宽度和边框的颜色。
Column：每个框架的尺寸。请注意图六面板中右边更有一个缩略图，他的作用正是通过选择他并在 Column 的 Value 中输入数值来确定该框架的比例大小的。

2.框架设定：

框架的设定面板跟框架集设定面板有很大的差异，大家能够从图七中看到这一点：

图七

Frame Name：框架名称，很重要的一个环节，假如您想让某个网页在选定的框架中打开（典型的例子就是，点击左边的链接，链接的网页然后在右边窗口打开，而不是在有点击动作的左边打开），就必须首先为欲作为打开窗口的框架起一个名字，然后在左边的链接后面指定 Target ，并选择刚才您为框架所取的名字。

Src：链接网页文档的位置。前面我们说到，框架的作用在于将多个网页页面分成几个部分独离显示，而这个"多个页面"的位置指定就由 Src 内容指定。同时，也说明一个问题，一个完整的框架页面，除了本身框架页面外，还包括框架中每个单独的页面。单独页面一起组成框架页面，框架页面只是为多个单独页面提供了一个共存的"架子"。因此，在进行框架页面保存时，假如其他单独页面尚未保存，则会弹出多个页面保存窗口，将每个框架中所用到的页面都保存下来后，这个框架页面才能真正保存下来，也才能真正正常显示。

提示：许多网友曾问过，为何每个框架中的页面都单独保存了，当前"架子"页面也已保存了，为何点击这个"架子"页面却不能显示任何页面信息。其实，刚才我们也谈到了，除了分页面，更有一个框架集页面需要保存。是不是有些糊涂了，好，教您一个最简单的办法，凡是遇上用框架制作的页面，要进行保存时，只需点按 File/Save All Frames 就行了，而不是仅仅保存一个页面就行了的哟。

Scroll：是否显示滚动条，Yes 表示显示滚动条，Auto 则是自动显示，也就是当该框架内的内容超过当前屏幕上下或左右边界时，滚动条才会显示，否则不显示。

No Resize：是否允许在浏览时改变框架大小。

Borders 和 Border Color：是否显示边框和边框颜色。

Margin Width：边界宽度，即框架中内容和左右边框的距离。

Margin Height：边界高度，即框架中内容和上下边框的距离。

四．框架示例：

同样以"互动学校"的页面为标准，我们来看一下如何用框架来制作。（具体情况请见 Resource.zip 文档中的互动学校.htm 文档）

1.先根据原版面，我们将页面内容划分为四个区，如图八：

图八