第 8 章 框架

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

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

3. 8.1.1 使用内置框架创建网页 • 在Dreamweaver 8中有两种创建框架集的方法：从预定义的框架集中选择；自己设计框架集。选择预定义的框架集将自动设置创建布局所需的所有框架集和框架，它是迅速创建基于框架布局的最简单的方法。创建预定义的框架集的具体操作步骤如下： • （1）选择菜单命令【文件》新建】，弹出【新建文档】对话框，在对话框中选择【常规】选项卡中的【类别】选项区的【框架集】选项，从【框架集】选项区中选择其中一种框架集，如图8-1所示。 • （2）单击【创建】按钮，创建一个“上方固定，左侧嵌套”的框架集，如图8-2所示。

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

5. 8.1.3 保存框架网页 • 当编辑完框架和框架文件后，必须对框架及框架文件进行保存。在Dreamweaver 8中保存框架及框架文件，如果仅像保存普通文件一样保存框架，只会保存鼠标所定位的框架内容，其余的框架内容将丢失，所以选择一个适当的保存方法是非常重要的。具体步骤如下： • （1）选择菜单命令【文件》保存全部】，整个框架边框会出现一个阴影框，同时会弹出“另存为”对话框。因为阴影出现在整个框架集内侧，所以询问的是框架集的文件名。将整个框架集命名为index.html，如图8-5所示。

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

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

8. 8.2.1 设置框架属性 • 使用框架属性面板可以设置框架的属性。在文档窗口中按住Alt键，然后用鼠标单击一个框架，即可选中该框架。选中【窗口】属性】命令，打开框架属性面板，如图8-9所示。 • 框架属性面板中各个选项参数如下： • 框架名称：用来作为链接指向的目标； • 源文件：确定框架的源文档，可以直接输入名字，或单击文本框右侧的按钮查找并选取文件； • 滚动：当框架内的内容显示不下的时候是否出现滚动条； • 不能调整大小：限定框架尺寸，防止用户拖动框架边框； • 边框：用来控制当前框架边框，包含“是”、“否”和“默认”3个选项； • 边框颜色：设置与当前边框相邻的所有边框的边框颜色； • 边界宽度：设置框架边框和内容之间的左右边距，以像素为单位； • 边界高度：设置框架边框和内容之间的上下边距，以像素为单位。

9. 8.2.2 设置框架集属性 • 要显示框架集的属性面板，首先单击框架的边框，选中框架集，此时“属性”面板中将显示框架集的属性，如图8-10所示。 • 框架集属性面板中各个选项参数如下： • 边框：设置是否有边框，包含“是”、“否”、和“默认”3个选项，选择“默认”，将会由浏览器的设置来决定； • 边框宽度：设置整个框架集的边框宽度，以像素为单位； • 边框颜色：设置整个框架集的颜色； • 行或列：“属性”面板中显示的是行或列，由框架集的结构决定； • 单位：行、列尺寸的单位，包含“像素”、“百分比”和“相对”3个选项。

10. 8.2.3 改变框架的背景颜色 • 要改变边框中文档的背景颜色，可以改变其所在框架的背景颜色，具体步骤如下： • （1）将光标置于需要改变背景颜色的框架中，如图8-11所示。 • （2）选择菜单命令【修改》页面属性】，弹出【页面属性】对话框，在“外观”选项区的“背景颜色”文本框中输入说需要的背景颜色，如图8-12所示。 • （3）单击【确定】按钮，改变背景颜色，如图8-13所示。

11. 8.3框架网页的选择 • 8.3.1 选择一个框架 • 在Dreamweaver 8中，用户可以选择单个或整个框架，并对其进行操作。选择菜单命令【窗口》框架】，打开【框架】面板，在框架面板中单击需要选择的框架，该框架的边界就会被虚线包围，如图8-14所示。 • 8.3.2 选择框架集 • 默认情况下，建立框架集时会自动选择整个框架作为操作对象，此时框架集中所有框架的边界都会被虚线所包围。将鼠标指针移动到整个边框位置的同时，按住Alt键，当鼠标指针变成水平或者垂直双向箭头时，单击边框即可选中整个框架集。如图8-15所示。

12. 8.4在框架中设置链接 • 利用框架结构可以把导航条固定在页面的顶部或者右边。在任何时候，用户都可以直接选择顶部或右边的导航内容，切换到自己想要浏览的内容。要在一个框架中使用链接打开另一个框架中的文档，必须设置链接目标。在框架中设置链接的具体步骤如下： • （1）选中需要设置链接的对象，如图8-16所示。 • （2）选择菜单命令【窗口》属性】，打开“属性”面板，在“链接”文本框中选择要链接的对象文件，单击【目标】下拉列表，在弹出的菜单中选择“mainFrame”选项，如图8-17所示。

13. 8.5创建完整的框架网页实例 • 前面已经介绍了制作各种构造的框架文档的方法和有关框架文档的基本功能，下面将利用前面讲的知识来制作一个完整的框架网页。 • （1）选中菜单命令【文件》新建】，弹出“新建文档”对话框，在“常规”选项卡中的“类别”选项区选择“框架集”选项，在右边的选项区中选择“上方固定，左侧嵌套”选项，如图8-18所示。 • （2）单击【创建】按钮，新建一个框架网页，如图8-19所示。 • （3）将光标置于顶部框架中，选择菜单命令【插入>表格】，弹出“表格”对话框，在“行数”和“列数”中分别输入2和1，表格宽度设置为100%。如图8-20所示。

14. 8.5创建完整的框架网页实例 • （4）单击【确定】按钮，插入一个2行1列的表格，如图8-21所示。 • （5）将光标置于第一行单元格中，选择【插入》图像】命令，弹出“选择图像源文件”对话框，在对话框中选择Mysite/top2.jpg，如图8-22所示，单击“确定”即可将图片插入表格。 • （6）将光标置于第二行单元格中，选择【插入》导航条】命令，弹出“插入导航条”对话框，在对话框中填入项目名称及相应的图像，如图8-23所示。 • （7）单击【确定】按钮，即可插入导航条，如图8-24所示。

15. 8.5创建完整的框架网页实例 • （8）将光标置于左侧的框架内，选择菜单命令【插入》表格】，弹出“插入表格”对话框，设置插入行数和列数分别为4与2，宽度设为100%，如图8-25所示，单击“创建”按钮，完成插入表格。 • （9）合并第1行表格，并在此行直接输入“学校论坛登录”，设置对齐方式为居中，并设置单元格的背景颜色。 • （10）在第2、3行的第1列分别输入用户名和密码，并设置为右对齐，然后分别在第2列插入2个文本字段。 • （11）在第4行放置2个表单按钮，分别设置为会员登录和重置，操作完毕后，登录界面如图8-26所示。

16. 8.5创建完整的框架网页实例 • （12）在会员登录框下插入一条水平线。 • （13）继续在水平线下方插入一个2行1列的表格，宽度设为100%，居中对齐。 • （14）在表格第1行输入“图片欣赏”，然后在第2行插入一个图片，并设置相应的宽度和高度，如图8-27所示。 • （15）单击菜单命令【插入】表格】，在右侧边框插入一个4行2列的表格，设置宽度为100%，并在表格的第1列分别插入不同的图片，然后在第2列输入相应的文字，如图8-28所示。 • （16）选择【文件》保存全部】，保存所有的框架和网页，然后按F12键浏览网页，效果如图8-29所示。