第7章 框架网页和模板网页本章要点内容: 框架与框架集的概念。 框架与框架集的创建、保存、编辑与应用。 模板文件的创建与应用。 通过库项目可以存储各种各样的网页元素。&本章学习目标 了解框架和模板在网页页面排版中的重要作用。 能够对框架和模板进行基本操作并结合实例掌握基本 排版技巧。 掌握框架的预定义框架和自定义框架的使用方法。 熟悉模板的不同功能区域以及库的使用。 本章学前要求 对基本网页结构有所了解，已经学会了表格的运用。7.1 框架与框架集基础 7.1.1 框架网页的概述 在某些网页内容中，比如：小说、杂志、产品介绍等，它们都有一 个相同的特点，即标题不变，目录格式相同，但对应目录的内容 是不一样的。若每次打开一个内容都要打开一个完整的网页，那 么重复的内容会使显示速度受到影响。为此，我们采用框架来进 行这方面的设计和制作。将浏览器窗口分成几个大小不同的区域 ，在各个区域中可以显示不同的内容。如图7.1所示。 图7.1 在网页中使用框架 框架是浏览器窗口中的一个区域，它可以显示与浏览器窗口的 其余部分中所显示内容无关的HTML文档。 框架集是HTML文件，它定义一组框架的布局和属性，包括框 架的数目、框架的大小和位置以及在每个框架中初始显示的 页面的URL。框架集文件只是向浏览器提供应如何显示一组 框架以及在这些框架中应显示哪些文档的有关信息，用户访 问的时候浏览器首先也是按照该框架集文件的组织规则显示 各框架中页面的内容，而框架集文件本身不包含要在浏览器 中显示的HTML内容，但noframes部分除外，因为有的浏览 器可能不支持框架。 提示： 下面的代码是一个简单的框架网页的代码。 您的浏览器不支持框架。这是一个最简单的左右框架集，中间是框架集 部分内容，cols的值表示左右两个框架各多少像素宽，中 的name属性是框架集的名称，src的值是该框架中显示的初始页面 的路径，之间是没有框架的部分，用来 在不支持框架的浏览器上显示提示内容。 框架是一种非常实用的技术，它可以将浏览器窗口分成几个部分， 每个部分各自包含独立的页面文件，当替换或修改某个页面时不 会影响其他页面，如图7.2所示的“天涯社区”、7.3所示的 “TOM邮箱”就是典型的框架网页应用。图7.2 框架网页实例1 图7.3 框架网页实例2 7.1.2 创建和保存框架文件 创建框架，实际上就是创建一个包含几个框架的框架集，可以 通过两种方式来实现：一种方法是新建文件时创建框架集， 另外一种是在一个已创建的网页文件中拆分出框架。下面分 别介绍这两种操作方法。 1. 新建一个框架集 对于一开始就准备创建一个使用框架的网页文件来说，用“新 建一个框架集”的方法最为简便。新建框架集的操作步骤如 下。 步骤1：选择“文件”菜单中的“新建”命令，打开“新建文档” 对话框，在“常规”选项卡中的“类别”列表框中选择“框架 集”，如图7.4所示。在“框架集”列表中列出了多种可供选择 的框架集样式，选中任何一个即可在“预览”窗口中看到效果 。图7.4 “新建文档”对话 框 步骤2：选择一个框架集样式，单击“创建”按钮，创建一个“上方 固定，左侧嵌套”样式框架的网页，如图7.5所示。 图7.5 创建了一个新的框架集 2. 对网页文件拆分框架要创建一个框架集，也可以通过对一个网页文件进行框架拆分来实 现。具体操作步骤如下。 步骤1：新建一个网页文档。 步骤2：选择“修改”菜单中的“框架集”命令，在其子菜单中列出 了几种分割命令，如图7.6所示，选择任意一种即可在相应位置拆 分出框架。选择“拆分左框架”，则可以将一个空白网页拆分成 为左右两部分，再分别制作出各自的页面文件即可。拆分框架后 的效果如图7.7所示。 步骤3：如果要对某个框架继续进行拆分，可以将光标设置在需要拆 分的框架中，再次执行上述操作 图7.6 框架分割命令 图7.7 拆分左框架后的效果 保存框架页面与其它文件不同，因为一个框架集是由多个文档组成 ，各文档都是相对独立的，保存操作要分两个部分：第一是逐一 保存当前激活的各个页面，第二是保存框架集网页。具体操作步 骤如下。 首先，逐一保存当前激活的各个页面。 步骤1：将光标置于要保存的框架集网页内，如左边框架。 步骤2：选择“文件”菜单中的“保存框架”命令或直接按下快捷键 Ctrl+S，打开“另存为”对话框。 步骤3：输入适当的文件名，以便能区分各个不同的框架页面文件， 如当前是左框架则命名为left.html保存，如果是主框架则命名为 mian.html保存。 提示：一般来说，可以命名为“left.html”、“main.html”、 “top.html”等，而不要使用诸如frame1.html、frame2.html的文件 名。下面将要保存的框架集文件如果是作为首页则可以命名为 “index.html”，如果是某个栏目的首页也可以命名为“栏目名称 _index.html”。 步骤4：单击“保存”按钮，即可完成一个框架文件的保存。 步骤5：重复上述操作，将该网页所涉及的全部框架页面文件分别保 存好。 其次，还要将框架集页面单独保存一次。 步骤1：选择“文件”菜单中的“框架集另存为”命令，即可打开“ 另存为”对话框，如图7.8所示。 步骤2：输入文件名，单击“保存”按钮即可。 图7.8 框架集另存为对话框 提示： 1. 框架集文件本身不包含任何的网页显示内容，只是用来描述各 框架成员页面的信息和属性，用户单击框架集文件的地址，则 框架集文件自动将所有框架成员页面调入浏览器。 2. 创建框架网页最好在Dreamweaver中先建立站点，在站点的目录 下创建框架集或者框架文件，即便没有建立Dreamweaver的站点 也最好将所有框架集和框架文件建立在同一个目录下，并且将 框架原文件的地址设置成为相对地址。否则Dreamweaver将自动 引用各框架文件的本地绝对地址，这是我们不愿意看到的。 7.1.3 框架与框架集编辑 框架与框架集的编辑主要有如下几种操作。 1. 选择框架和框架集 在“框架”面板中可以很方便地选取框架或框架集，然后在“属性”面 板中对框架的属性进行设置。“框架”面板中的框架是用灰色的细线 框住的，而框架集就是最外面用立体的灰色粗线框住的，可以容易地 区分。 选择“窗口”菜单中的“框架”命令，即可打开“框架”面板，如图7.9 所示。 图7.9 在“框架”面板中选择框架和框架集 2. 设置框架属性使用框架的“属性”面板即可设置框架的属性。这里所指的框架属 性包括框架的名称、源文件、边框、是否显示滚动条等。 在“框架”面板中选取一个框架，则在文档编辑区下方即可出现框 架属性面板，如图7.10所示。 “框架名称”：是链接的target属性或脚本在引用该框架时所用的 名称。框架名称必须是单个单词；允许使用下划线“_”，但不 允许使用连字符“-”、句点“.”和空格。框架名称必须以字 母起始（而不能以数字起始）。框架名称区分大小写。不要使 用JavaScript中的保留字（例如top或navigator）作为框架名 称。 图7.10 框架“属性”面板 提示：要令链接更改其他框架的内容，必须命名目标框架。要令以 后创建跨框架链接更容易一些，请在创建框架时命名每个框架。 “源文件”：指定在框架中显示的源文档。单击文件夹图标可以 浏览到一个文件并选择一个文件。 “滚动”：指定在框架中是否显示滚动条。将此选项设置为“默 认”将不设置相应属性的值，从而使各个浏览器使用其默认值。 大多数浏览器默认为“自动”，这意味着只有在浏览器窗口中没 有足够空间来显示当前框架的完整内容时才显示滚动条。 “不能调整大小”：令访问者无法通过拖动框架边框在浏览器中 调整框架大小。 “边框”：在浏览器中查看框架时显示或隐藏当前框架的边框。 为框架选择“边框”选项将重写框架集的边框设置。 “边框”：选项为“是”（显示边框）、“否”（隐藏边框）和 “默认值”；大多数浏览器默认为显示边框，除非父框架集已将 “边框”设置为“否”。只有当共享该边框的所有框架都将“边 框”设置为“否”时，或者当父框架集的“边框”属性设置为“ 否”并且共享该边框的框架都将“边框”设置为“默认值”时， 边框才是隐藏的。“边框颜色”为所有框架的边框设置边框颜色 。此颜色应用于和框架接触的所有边框，并且重写框架集的指定 边框颜色。 提示：关于给定边框颜色应用到哪些框架边框有一个基础逻辑，但该逻辑十 分复杂；理解为什么某些边框在指定边框颜色后还会更改颜色可 能十分困难，因为框架的边框是包含内边框和外边框的。有关指 定边框颜色的效果的详细信息，请参见有关框架和框架集的书籍 。 “边界宽度”：以像素为单位设置左边距和右边距的宽度（边框 和内容之间的 空间）。 “边界高度”：以像素为单位设置上边距和下边距的高度（边框 和内容之间的空间）。 3. 调整框架 在文档窗口拖动框架边框，可以近似地确定框架大小，若用属性面板 ，可以精确设置框架大小。 选定框架集，打开其属性面板，如图7.11所示，单击行列选择器，选 中要修改的框架或框架集，在“值”文本框中输入框架或框架集的 行高或列宽值，有三种单位可以选择。 “像素”：以像素为单位设置框架或框架集的绝对值。选择此单位 ，可使其尺寸始终保持同一大小，比如可将导航栏框架尺寸单位设 置成像素。 “百分比”：指定当前框架占框架集中的百分比值。 “相对”：指定当前框架与框架集中其他框架所占用尺寸的比值。 在分配框架空间时，这三种单位的优先顺序为：像素百分比相对。 图7.11 框架集的“属性”面板 4. 删除框架或框架集 要删除框架，可直接将框架分隔线拖出框架集。当所有分隔线都 取消后，也就回到了没有框架集的普通文档窗口了。 7.2 框架与框架集的应用 7.2.1 使用预定义框架集 Dreamweaver预置了多种框架集样式，大大简化了设计者的工作。通 过预定义框架集创建框架有以下几种方法： 1. 使用“插入”菜单或插入栏 操作过程如下。 步骤1：选择菜单“插入”中“HTML”子菜单，选择“HTML”子 菜单中的“框架”命令，打开其子菜单，或者打开布局工具栏， 单击框架按钮右侧下拉箭头，弹出图7.12所示的菜单。 步骤2：在菜单中选择一种框架集即可。 图7.12 框架按钮的下拉菜单 2. 使用新建文档对话框。 操作过程如下。 步骤1：选择“文件”菜单的“新建”命令，弹出“新建文档” 对话框。 步骤2：在“类别”列表中选择“框架集”，在“框架集”列表 中选择要创建的框架集类型，然后单击“创建”按钮即可，如 图7.13所示。 图7.13 使用新建文档对话框创建框架网页 7.2.2 创建自定义框架集 使用预定义框架集既方便又省事，可是有的时候预定义的框架集不能满 足我们设计网页的需要，这时我们可以自己设计框架集，也就是设 置自定义框架集。设置自定义框架集的的操作过程如下。 步骤1：选择“查看”菜单中子菜单“可视化助理”的“框架边框”命 令，在文档窗口中显示框架边框。 步骤2：用户直接用鼠标拖拽文档窗口的左右或上下框架边框来创建框 架集。拖动文档窗口的框架边框，可以水平/垂直分割窗口，若拖动 框架边框的一角，则可以将页面划分成4个框架，如图7.14所示。 图7.14 拖动边框一角将 页面划分为四个框架 步骤3：自定义框架的保存方法同上文所述，若要删除一个框架，可 以用鼠标按住边框将其边框拖至页面或其父框架之外即可。提示：有读者提出，为何自定义框架不可以进行框架的合并或者单个框架 的删除，只能删除某一侧的几个框架。事实上，这是因为同一个 框架集内拆分的框架一定是同方向的，非横即纵，而我们看到的 一个框架页面既有左右拆分又有上下拆分是使用了框架集嵌套的 效果。这就要求设计者事先确定要建立什么样的框架，在设计的 时候可以分步骤实现，如：若要实