第 8 章 框架

8.1创建框架网页8.2设置框架和框架集属性8.3框架网页的选择8.4在框架中设置链接8.5创建完整的框架网页实例

8.1 创建框架网页 8.1.1 使用内置框架创建网页 8.1.2 自定义创建框架网页 8.1.3 保存框架网页

8.1.1 使用内置框架创建网页 在 Dreamweaver 8 中有两种创建框架集的方法：从预定义的框架

集中选择；自己设计框架集。选择预定义的框架集将自动设置创建布局所需的所有框架集和框架，它是迅速创建基于框架布局的最简单的方法。创建预定义的框架集的具体操作步骤如下：

（ 1）选择菜单命令【文件》新建】，弹出【新建文档】对话框，在对话框中选择【常规】选项卡中的【类别】选项区的【框架集】选项，从【框架集】选项区中选择其中一种框架集，如图 8-1所示。

（ 2）单击【创建】按钮，创建一个“上方固定，左侧嵌套”的框架集，如图 8-2所示。

8.1.2 自定义创建框架网页 （ 1）选择菜单命令【修改》框架页】，在子菜单中选择拆分框架网页命令，选项有“拆分左框架”、“拆分右框架”、“拆分上框架”、“拆分右框架”四种，如图 8-3所示。

（ 2）选择“拆分上框架”选项后，效果如图 8-4所示。

8.1.3 保存框架网页 当编辑完框架和框架文件后，必须对框架及框架文件

进行保存。在 Dreamweaver 8 中保存框架及框架文件，如果仅像保存普通文件一样保存框架，只会保存鼠标所定位的框架内容，其余的框架内容将丢失，所以选择一个适当的保存方法是非常重要的。具体步骤如下：

（ 1）选择菜单命令【文件》保存全部】，整个框架边框会出现一个阴影框，同时会弹出“另存为”对话框。因为阴影出现在整个框架集内侧，所以询问的是框架集的文件名。将整个框架集命名为 index.html，如图 8-5所示。

8.1.3 保存框架网页 （ 2）单击【保存】按钮，出现第二个“另存为”对话框，因为右边框内侧出现阴影，如图 8-6所示，所以询问的是右边框架的文件名，将文件命名为 right.html。

（ 3）单击【保存】按钮，出现第三个“另存为”对话框，因为左边框内侧出现阴影，如图 8-7所示，所以询问的是左边框的文件名，将文件命名为 left.html。

（ 4）单击【保存】按钮，出现第四个“另存为”对话框，因为顶部框架内侧出现阴影，如图 8-8所示，所以询问的是顶部框架的文件名，将文件命名为 top.html。

8.2 设置框架和框架集属性 8.2.1 设置框架属性 8.2.2 设置框架集属性 8.2.3 改变框架的背景颜色

8.2.1 设置框架属性

使用框架属性面板可以设置框架的属性。在文档窗口中按住 Alt 键，然后用鼠标单击一个框架，即可选中该框架。选中【窗口】属性】命令，打开框架属性面板，如图 8-9 所示。

框架属性面板中各个选项参数如下： 框架名称：用来作为链接指向的目标； 源文件：确定框架的源文档，可以直接输入名字，或单击文本框右侧的按钮查找并选取文件；

滚动：当框架内的内容显示不下的时候是否出现滚动条； 不能调整大小：限定框架尺寸，防止用户拖动框架边框； 边框：用来控制当前框架边框，包含“是”、“否”和“默认” 3个选项； 边框颜色：设置与当前边框相邻的所有边框的边框颜色； 边界宽度：设置框架边框和内容之间的左右边距，以像素为单位； 边界高度：设置框架边框和内容之间的上下边距，以像素为单位。

8.2.2 设置框架集属性

要显示框架集的属性面板，首先单击框架的边框，选中框架集，此时“属性”面板中将显示框架集的属性，如图 8-10 所示。

框架集属性面板中各个选项参数如下： 边框：设置是否有边框，包含“是”、“否”、和“默认” 3个选项，选择“默认”，将会由浏览器的设置来决定；

边框宽度：设置整个框架集的边框宽度，以像素为单位； 边框颜色：设置整个框架集的颜色； 行或列：“属性”面板中显示的是行或列，由框架集的结构决定； 单位：行、列尺寸的单位，包含“像素”、“百分比”和“相对” 3个选项。

8.2.3 改变框架的背景颜色

要改变边框中文档的背景颜色，可以改变其所在框架的背景颜色，具体步骤如下：

（ 1）将光标置于需要改变背景颜色的框架中，如图 8-11所示。 （ 2）选择菜单命令【修改》页面属性】，弹出【页面属性】对话框，在“外观”选项区的“背景颜色”文本框中输入说需要的背景颜色，如图 8-12所示。

（ 3）单击【确定】按钮，改变背景颜色，如图 8-13所示。

8.3 框架网页的选择 8.3.1 选择一个框架 在 Dreamweaver 8中，用户可以选择单个或整个框架，并对其进行操作。选择菜单命令【窗口》框架】，打开【框架】面板，在框架面板中单击需要选择的框架，该框架的边界就会被虚线包围，如图 8-14所示。

8.3.2 选择框架集 默认情况下，建立框架集时会自动选择整个框架作为操作对象，此时框架集中所有框架的边界都会被虚线所包围。将鼠标指针移动到整个边框位置的同时，按住 Alt键，当鼠标指针变成水平或者垂直双向箭头时，单击边框即可选中整个框架集。如图 8-15所示。

8.4 在框架中设置链接 利用框架结构可以把导航条固定在页面的顶部或者右边。在任何时候，用户都可以直接选择顶部或右边的导航内容，切换到自己想要浏览的内容。要在一个框架中使用链接打开另一个框架中的文档，必须设置链接目标。在框架中设置链接的具体步骤如下：

（ 1）选中需要设置链接的对象，如图 8-16所示。 （ 2）选择菜单命令【窗口》属性】，打开“属性”面板，在“链接”文本框中选择要链接的对象文件，单击【目标】下拉列表，在弹出的菜单中选择“mainFrame”选项，如图 8-17所示。

8.5 创建完整的框架网页实例 前面已经介绍了制作各种构造的框架文档的方法和有关框架文档

的基本功能，下面将利用前面讲的知识来制作一个完整的框架网页。

（ 1）选中菜单命令【文件》新建】，弹出“新建文档”对话框，在“常规”选项卡中的“类别”选项区选择“框架集”选项，在右边的选项区中选择“上方固定，左侧嵌套”选项，如图 8-18所示。

（ 2）单击【创建】按钮，新建一个框架网页，如图 8-19所示。 （ 3）将光标置于顶部框架中，选择菜单命令【插入 >表格】，弹出“表格”对话框，在“行数”和“列数”中分别输入 2和 1，表格宽度设置为 100%。如图 8-20所示。

8.5 创建完整的框架网页实例 （ 4）单击【确定】按钮，插入一个 2行 1列的表格，如图 8-21所示。

（ 5）将光标置于第一行单元格中，选择【插入》图像】命令，弹出“选择图像源文件”对话框，在对话框中选择Mysite/top2.jpg，如图 8-22所示，单击“确定”即可将图片插入表格。

（ 6）将光标置于第二行单元格中，选择【插入》导航条】命令，弹出“插入导航条”对话框，在对话框中填入项目名称及相应的图像，如图 8-23所示。

（ 7）单击【确定】按钮，即可插入导航条，如图 8-24所示。

8.5 创建完整的框架网页实例 （ 8）将光标置于左侧的框架内，选择菜单命令【插入》表格】，弹出“插入表格”对话框，设置插入行数和列数分别为 4与 2，宽度设为 100%，如图 8-25所示，单击“创建”按钮，完成插入表格。

（ 9）合并第 1行表格，并在此行直接输入“学校论坛登录”，设置对齐方式为居中，并设置单元格的背景颜色。

（ 10）在第 2、 3行的第 1列分别输入用户名和密码，并设置为右对齐，然后分别在第 2列插入 2个文本字段。

（ 11）在第 4行放置 2个表单按钮，分别设置为会员登录和重置，操作完毕后，登录界面如图 8-26所示。

8.5 创建完整的框架网页实例 （ 12）在会员登录框下插入一条水平线。 （ 13）继续在水平线下方插入一个 2行 1列的表格，宽度设为 1

00%，居中对齐。 （ 14）在表格第 1行输入“图片欣赏”，然后在第 2行插入一个图片，并设置相应的宽度和高度，如图 8-27所示。

（ 15）单击菜单命令【插入】表格】，在右侧边框插入一个 4行2列的表格，设置宽度为 100%，并在表格的第 1列分别插入不同的图片，然后在第 2列输入相应的文字，如图 8-28所示。

（ 16）选择【文件》保存全部】，保存所有的框架和网页，然后按 F12键浏览网页，效果如图 8-29所示。