《框架里的乾坤》word版

《框架里的乾坤》word版本文简介：6、框架里的乾坤（1）什么是框架前面我们介绍了很多网站的页面是用表格制作的，还有一种更方便的工具，就是使用框架。框架的作用就是把浏览器窗口划分为若干个区域，每个区域可以分别显示不同的网页。将文档分割为几个框架后，Dreamweaver会自动产生一个没名字的框架体文件，比如我们看到的一个简单的左右框架

《框架里的乾坤》word版本文内容：

6、框架里的乾坤

（1）什么是框架

前面我们介绍了很多网站的页面是用表格制作的，还有一种更方便的工具，就是使用框架。

框架的作用就是把浏览器窗口划分为若干个区域，每个区域可以分别显示不同的网页。

将文档分割为几个框架后，Dreamweaver会自动产生一个没名字的框架体文件，比如我们看到的一个简单的左右框架页面（图1），实际上包含3个不同的文件，一个是框架体文件，还有两个在框架中显示内容的文件。

图1

左右结构的框架页面

框架体文件中保存页面中框架的数量，框架的尺寸、位置及每个框架的网页源文件和其它可定义的属性。

这是一个典型的利用框架制作的页面（图2），主体结构为上下结构，上面是主导航区，下面该是频道的内容。下部又被分为左右两个子框架，左侧为主要栏目，右侧为具体内容。

图2

典型框架页面的效果（点击浏览）

（2）建立一个简单的框架

下面我们就来一起创建这个框架。新建一个空文档，调出“Object”面板，打开“Common”下拉菜单，选择“Frames”，这里提供了创建框架的快捷方式（图1）。

图1

创建框架的面板

图2

上下结构的框架

单击“Insert

Top

Frame”图标，整个页面被拆分为上下两部分（图2）。

我们选择“Windows”菜单下的

“Frames”命令，调出Frame视窗（快捷键Ctrl+F10），在这里可以清楚地看到框架体的层次结构（图3），框架体边框为立体加粗的立体边界，而框架则是灰色的单线边界，里面显示框架的名字。

图3

Frame视窗中的效果

上面是topFrame，下面是mainframe。单击topFrame，选定这个框架，此时框架外有黑色框，表示我们现在处于此框架内（图4）。

图4

选中上部框架

单击mainframe，下面的框架出现黑色边框，上面框架的黑色边框消失，表示我们处于mainframe框架内。

我们将mainframe进行拆分。单击“Object”面板中的第一个图标，名字为“Insert

Left

Frame”，可以看到下面的框架被拆分为左右两部分，一个简单的框架结构就建好了（图5）。

图5

创建好的框架结构

（3）框架属性的设置

接下来我们向框架中添加网页内容。

我们先制作好四个网页，分别为top.htm，用于显示在上部框架中；left.htm用于显示在下部左框架中；001.htm、002.htm用于显示在下部右侧框架中（图1）。

top.htm

left.htm

001.htm

002.htm

图1

事先做好的四个页面（点击查看网页效果）

单击Frame视窗中的topFrame，将上面的框架选定，此时可以看到编辑页面中此框架边界以虚线包围。

调出属性面板，可以看到此框架的缺省名字为topFrame，如果框架很复杂，这个名字就不适用了。我们可以将其改名，只要在下面的输入框中输入新名字就行了，这里我们将其命名为myframe_top，给框架命名是为了便于区分各个网页中的框架（图2）。

图2

上部框架中引入文件

接下来指定此框架中的源文件。单击“Src”输入框左面的文件图标，选择事先制作好的文件“Top.htm”，看，Top.htm网页显示在上面的框架中了（图3）。

图3

上部框架引入文件后的效果

我们可以调整框架的高度，使其与内容相适应。将鼠标指针放在上下框架的分界线上，当鼠标变为上下双箭头时，按下鼠标左键进行拖动，直接改变框架高度（图4）。

图4

调整框架线高度

这时我们看到框架与里面内容间总有一个间隙，我们可将这个间隙去掉。先选中myframe_top框架，将属性面板中的“Margin

Width”、“Margin

Height”值均设为0（图5），这回再调整框架高度，可以使其刚好容纳里面的内容。

图5

设置margin值为0

按住ALT键，单击左侧的框架，选中leftFrame框架，将框架命名为“myframe_left”，源文件设为left.htm

（图6），并调整框架宽度。

图6

左部框架引入文件

现在网页变成这个样子了（图7）。

图7

左部框架引入文件后的效果

最后我们选中右侧的框架，框架名为“myframe_main”，将其源文件设为001.htm。因为右侧框架内容可能比较多，可以让此框架存在滚动条。在属性面板中，在Scroll列表中选择“Auto”。

这样，如果右侧框架中的内容很多，就会自动出现滚动条（图8）。

图8

右部框架引入文件

别忘了保存文件哟！选择“File”菜单下的“Frameset”命令，将主框架体文件命名为myframe.htm。

myframe.htm文件中保存的是什么信息呢？这个文件相当于一个汇总文件，要让浏览器知道框架的数目、大小比例，预先载入那些网页等信息。保存此文件的另一个好处是框架中调入网页文件时，Src框中会呈现相对目录，而不是本地的目录名称。

按下F12，预览一下我们刚做的网页吧！（图9）

图9

三个框架都引入文件后的效果（点击浏览）

看来框架的使用也并不难！

（4）框架间的链接

现在我们想实现这样一个目标，点击左侧框架中的主题，对应的文章便会呈现在右侧的页框架中。下面来看看如何来完成这样的链接。

选中左侧的第一个条目“集邮天地”，调出属性面板，在Link框中选择相应的文件，这里我们选择001.htm，再单击“target”列表框，从中选择要显示此内容的框架名，这里选择“myframe_main”，表示链接在框架myframe_main中打开（图1）。

图1

选择打开文件的目标框架

接下来我们选择“文学天地”，链接到002.htm文件，

“target”还是设为“myframe_main”（图2）。

图2

框架间的链接

其余的链接也这样建立，这里就不再细说。

进入浏览器，单击左侧条目，右侧框架就显示出页面的内容（图3）。

图3

框架间加入链接后的效果

（5）设置主框架标题

主框架文件（也就是最外面的框架）是所以框架文件的载体，通常是首页或特定主题的进入点，因而有必要设置网页的标题。

当光标在框架内时，按下Ctrl+J调出的“Page

Properties”对话框只能设置对应框架内源文件的页面属性。要想设置主框架文件（myframe.htm）的属性，可以将鼠标移动到最外层框架（在本例中为上下结构的框架）的框线上，当鼠标指针变为双向箭头时单击鼠标左键，使可选定整体框架（图1）。

图1

选中框架的方法

再次调出“Page

Properties”对话框，就可以设置主框架文件的属性了（图2）。

图2

设置主框架标题

我们将Title设为“笨象的家”，对框架集而言，背景图或背景颜色的设定是没有任何意义的（图3）。

图3

设置过标题的框架网页（点击浏览）

单击“OK”，主框架标题设置完了。看看效果吧！

（6）去掉框架的分隔线

有些网站是用框架来设计的，但表面却看不出来，这是因为看不到页框间分隔线和页框滚动条。下面我们就看一下如何设计这样的框架。

先选取整个框架集，在属性面板上，从Borders下拉菜单中选择“No”（图1）。

图1

设置框架分隔线

同样，将下面的框架体的Borders也设为No，再浏览此页面，框线消失了（图2）。

图2

无框线框架网页效果（点击浏览）

好了，框架里的乾坤很大，这里只是用了个简单的例子讲了其基本的使用方法，你可以根据这些内容创建更复杂的框架，充分展示自己的设计才能。