教案 框架布局网页

dreamweaver 网页编辑教案

第七节 框架网页

一、 教学目的：学习框架网页的制作方法，掌握框架网页的构成。

二、 教学重点：框架网页的制作, 框架网页的属性。

三、 教学时间：2课时

四、 教学步骤：

一）、框架页的基本组成

框架页是一种特殊格式的网页，主要由边框、网页、滚动条组成。在框架页中，每个框架都有一个网页相连接。当打开框架页时，则同时载入每个框架所相连的网页文件。

在框架页中显示的是三个独立的网页组成的（实际下载了四个网页，还包括框架页本身这个网页）。主体框一般用来显示正文内容的。

二）、创建框架页

FrontPage 2000提供了10个框架网页向导帮助我们创建框架页。其操作步骤如下：

（1）打开【文件】菜单，选择【新建】菜单项，在子菜单中选择【网页】菜单项，出现新建对话框。

（2）在对话框中单击【框架网页】选项卡。

（3）在选项卡中选择【目录】，此时在【预览】栏中会显示被选中的框架结构图，并在上方显示说明情况。

（4）单击【确定】按钮后，出现框架结构图。

（5）新创建的框架结构共有2个网页窗口，其中一个在左边，另一个在右边。这时单击【新建网页】按钮后，我们可以在当前框架网页中输入文字、图片等内容了。（如果这时单击【设置初始网页】按钮后，将弹出一个“创建超链接”的对话框，可以为所在的框架超链接到指定的网页上去。）

（6）框架的保存：单击“”工具按钮，出现【另存为】对话框。 保存左边框的网页文件。在对话框右面的框架示意图中，单击左边框后为蓝色，表示左边框中的网页正准备保存。在“URL”中输入文件名“in1”，单击【确定】按钮后，此时左边框的网页文件被保存起来。

保存右边框的网页文件。紧接着，在对话框的框架示意图中，右边框显示为蓝色。在“URL”中输入文件名“in2”，单击【确定】按钮后，右边框的网页文件也被保存起来。

保存框架本身网页。在对话框中整个框架示意图的边框为蓝色，在“URL”中输入文件名“index.htm”，单击【确定】按钮后，此时保存的是整个框架页文件。

1

dreamweaver 网页编辑教案

三）、框架及框架页的属性

1、设置框架的属性

框架有很多属性，例如框架的名称、宽度、高度、边距、滚动条、可调整性、间距等。以框架页为例说明，其具体操作方法如下：

单击要设置属性的框架，然后单击【框架】菜单，再单击【框架属性】菜单项，出现对话框。可以在此对话框中修改框架的属性了。

2、框架页的属性

以上是设置每个框架的属性，而修改整个框架页的属性，其具体操作如下： 在【框架属性】对话框中，单击【框架网页】按钮，会出现“网页属性”对话框。

在这个对话框中的“框架”选项卡中只有两项：

“框架间距”：指框架之间的边框的宽度，默认值为2。

如果框架不要显示出边框时，可单击“显示边框”前面的单选框，取消“√”。

四）、框架页的编辑

在框架页中，当要拆分某一框架时，单击框架→拆分框架→选择并确定。当要删除某一框架时，单击框架→删除框架→选择并确定。

五）、框架页的超链接

在框架页中，当单击左边的超链接时，在右边框中显示该超链接网页的内容。下面我们将以框架页为例，说明怎样实现框架网页之间的超链接。其操作步骤如下：

（1）在左边的框架中选择要设置超链接的“

（2）单击“

对话框的文件列表中选择“jbxx.htm”。

（3）在对话框右下角“目标框架”栏，单击“”按钮，出现一个对话框。

在对话框中，单击框架示意图中不同的区域，也可以单击右边列表框的选项，在对话框的“目标设置”栏中就相应显示所选定的区域名称。其中：

网页默认值(main)：超链接的网页将显示在右边框（即“main主体”）。 相同框架：在左边框单击某个超链接时，其链接网页也将显示在左边框。 整页：单击某个超链接时，只显示所链接的网页，原来框架不再显示。 新建窗口：单击某超链接时，所链接的网页将显示在新打开的浏览器中。 父框架：单击某个超链接时，将返回上一级的框架。

六）、上机操作

练习设计框架网页

2 ”图片（或文字）。 ”超链接工具按钮，出现【编辑超链接】对话框。这时在