《网页设计与制作（第2版）》第10章 使用框架

框架能够将页面分割成几个不同的独立窗口，每个窗口内显示不同的内容。在网页制作中，经常会使用框架技术布局页面。本章将介绍在DreamweaverCS6中创建和设置框架的基本方法。第10章

使用框架学习目标了解框架网页的含义和工作原理。掌握创建和保存框架的方法。掌握调整、拆分和删除框架的方法。掌握在页面中插入浮动框架的方法。掌握设置框架和框架集属性的方法。掌握设置框架中链接目标窗口的方法。10.1.1框架网页的含义10.1.2框架网页的工作原理10.1.3框架集的嵌套10.1.4合理使用框架网页10.1 认识框架10.1.1框架网页的含义框架（frame）是浏览器窗口中的一个区域，它可以显示与其他区域所显示内容无关的网页文档。框架为网页制作者提供了一种将浏览器窗口划分为多个区域，每个区域显示不同网页文档的方法。这些框架可以有各自独立的背景、滚动条和标题等。框架集（frameset）是HTML文件，用来定义一组框架的布局和属性，包括显示在页面中框架的数目、框架的大小和位置、最初在每个框架中显示的页面的URL等。框架集文件本身不包含要在浏览器中显示的网页内容，只是向浏览器提供应如何显示一组框架以及在这些框架中应显示哪些文档的有关信息。当然，如果框架集文件含有“noframes（编辑无框架内容）”部分，在遇到不支持框架技术的浏览器时，其将会显示在浏览器中。10.1.1框架网页的含义10.1.2 框架网页的工作原理可以使用框架来设置网页中内容固定的部分，如一个框架显示含有导航控件的文档，而另一个框架显示超级链接的目标文档。如果一个网页左边的导航菜单是固定的，而另一边的信息可以上下移动来展现所选择的网页内容，一般就可以认为这是一个框架网页。也有一些站点在其页面上方放置了公司的Logo或图像，其位置也是固定的，而页面的其他部分则可以上下左右移动来展现相应的网页内容，这也可以认为是一个框架网页。10.1.3 框架集的嵌套在一个框架集中的另一个框架集称为嵌套框架集。一个框架集可以包含多个嵌套的框架集。大多数使用框架的网页实际上都使用嵌套的框架集，在DreamweaverCS6中大多数预定义的框架集也使用嵌套。如果在一组框架里，不同行或不同列中有不同数目的框架，它使用的就是嵌套的框架集。例如，最常见的框架布局在顶行有一个框架（框架中显示公司的徽标），并且在底行有两个框架（一个导航框架和一个内容框架）。此布局要求嵌套的框架集：一个两行的框架集，在第二行中嵌套了一个两列的框架集。DreamweaverCS6会根据需要自动嵌套框架集；如果在DreamweaverCS6中使用框架拆分工具，则不需要考虑哪些框架将被嵌套、哪些框架不被嵌套这样的细节问题。有两种方法可以嵌套框架集：内部框架集可以与外部框架集在同一文件中定义，也可以在不同的文件中单独定义。这两种类型的嵌套产生的视觉效果是相同的，如果没有查看源代码，很难判断使用的是哪种类型的嵌套。在DreamweaverCS6中使用外部框架集文件最常见的情形是，使用【在框架中打开】命令在框架内打开了一个框架集文件，这种情况这可能导致设置的链接目标会出现问题。通常最简单最常用的方法是在单个文件中定义所有的框架集，DreamweaverCS6中每个预定义的框架集均在同一文件中定义其所有框架集。10.1.4 合理使用框架网页在制作网页时，对于是否使用框架要考虑清楚。因为框架先天存在下面一些不足之处，通常情况下不主张使用框架进行页面布局。• 可能难以实现不同框架中各元素的精确图形对齐。• 对框架中的导航链接进行测试可能会消耗很多时间。• 框架中加载的每个页面的URL不会显示在浏览器地址栏中，导致访问者难以将特定页面设为书签。• 并非所有浏览器都对框架提供良好的支持，并且框架对于残障人士来说导航会有困难。• 大多数的搜索引擎都无法识别网页中的框架，或者无法对框架中的内容进行遍历或搜索，这是由于那些具体内容都被放到“内部网页”中去了。如果确定要使用框架，它最常用于导航。一组框架中通常包含两个框架，一个含有导航栏，另一个显示主要内容页面。按这种方式使用框架，它具有以下优点。• 浏览者的浏览器不需要为每个页面重新加载与导航相关的图形。• 每个框架都具有自己的滚动条，因此浏览者可以独立滚动这些框架。10.1.4 合理使用框架网页通过DreamweaverCS6可以在【文档】窗口中查看和编辑与框架关联的所有文档。具体来说，每一框架会显示一个单独的网页文档。即使文档是空的，也必须将它们全部保存以预览它们，因为只有当框架集包含要在每个框架中显示的文档的URL时，才可以准确预览该框架集。如果要确保框架集在浏览器中正确显示，需要执行以下常规步骤：(1) 创建框架集并指定要在每个框架中显示的文档。(2) 保存将要在框架中显示的每个文档。每个框架都显示单独的网页文档，必须保存每个文档以及该框架集文件。(3) 设置每个框架和每个框架集的属性，包括对每个框架命名、设置滚动和不滚动选项等。(4) 在【属性】面板中为所有链接设置目标窗口，以便所链接的内容显示在正确的区域中。10.2创建框架

10.2.1

教学案例━━早安心语10.2.2创建框架10.2.3

保存框架10.2.4为框架添加内容10.2.5框架中链接的目标窗口10.2.6框架集文档的标题10.2.7调整框架大小10.2.8拆分和删除框架10.2.1

教学案例━━早安心语将素材文档复制到站点文件夹下，然后使用框架技术创建网页，在浏览器中的显示效果如图10-3所示。10.2.2 创建框架在DreamweaverCS6中创建框架网页的方法是，首先新建一个网页，然后选择菜单命令【查看】/【可视化助理】/【框架边框】，使框架的边框可见，接着选择菜单命令【插入】/【HTML】/【框架】/【上方及左侧嵌套】或其他菜单命令来插入框架。10.2.2 创建框架如果在【首选参数】对话框的【辅助功能】分类中选择了【框架】选项，此时将弹出【框架标签辅助功能属性】对话框，在【框架】下拉列表中每选择一个框架，就可以在其下面的【标题】文本框中为其指定一个标题名称。对于使用屏幕阅读器的访问者，屏幕阅读器在遇到页面中的框架时，将读取此名称。10.2.3 保存框架单独保存每个框架集文件和带框架的网页文档的方法是，依次在框架内单击鼠标，然后选择菜单命令【文件】/【保存框架】或【框架另存为】，将各个框架页分别进行保存，最后选择最外层框架集，并选择菜单命令【文件】/【保存框架页】或【框架集另存为】，将整个框架集文件进行保存即可。同时保存框架集文件和框架中出现的所有网页文档的方法是，在每个框架中的页面内容都输入完毕后，选择菜单命令【文件】/【保存全部】将依次保存框架集文件和框架文件。例如，对于选择菜单命令【插入】/【HTML】/【框架】/【上方及左侧嵌套】创建的框架网页，在输入完各个框架页的内容后，选择菜单命令【文件】/【保存全部】，将首先打开【另存为】对话框来保存整个框架集文件，然后依次打开【另存为】对话框来分别保存框架页“mainFrame”、“leftFrame”和“topFrame”。当前正在被保存的框架或框架集的边框内侧将出现一个阴影框。10.2.3 保存框架在源代码中，经常频繁出现的两个词汇是frameset和frame。其中，frameset习惯被称为框架集，frame习惯被称为框架。定义框架集的HTML标签是<frameset>…</frameset>，每个<frameset>…</frameset>定义一系列行（rows）或列（columns）的值，规定每行或每列占据屏幕的面积。其中含有<frame>标签，<frame>标签用来定义框架集中的框架，并为框架设置名称、显示在框架中的网页文档等属性。10.2.4 为框架添加内容在创建了框架网页后，可以依次在各个框架中直接输入网页元素，就像在平常网页中进行页面布局和添加内容一样。当然也可以在框架中打开已经事先准备好的网页。如果在每个框架中要显示的网页都已提前制作好，在保存框架网页时，需要先选择最外层框架集来保存整个框架网页，然后依次在各个框架中打开已经制作好的网页，最后选择菜单命令【文件】/【保存全部】，再次保存文件即可。在框架中打开网页的方法是：将鼠标光标置于框架中，然后选择菜单命令【文件】/【在框架中打开】即可。10.2.5 框架中链接的目标窗口在没有框架的文档中，按照指向的对象窗口不同，链接目标可以分为“_blank”、“_parent”、“_self”、“_top”等4种形式。而在使用框架的文档中，又增加了与框架有关的目标，可以在一个框架内使用链接改变另一个框架的内容。如果要在一个框架中使用超级链接在另一个框架中打开目标文档，必须设置链接目标窗口打开方式。例如，在左侧框架“leftFrame”中选中文本，接着在【属性（HTML）】面板的【链接】文本框中设置链接目标文件，并在【目标】下拉列表中设置要显示链接文档的目标框架，通常为“mainFrame”。10.2.5 框架中链接的目标窗口有一种方法可以单击一次同时改变多个框架中的内容。方法是，先选中一个对象，然后打开【行为】面板，单击+按钮在弹出的下拉菜单中选择【转到URL】命令，打开【转到URL】对话框，设置参数。在【行为】面板中触发事件为“onClick”。在浏览器中，当单击该对象时，所有框架窗口中的内容都将进行改变。10.2.6 框架集文档的标题设置框架集网页文档浏览器标题的方法是，在【文档】窗口的【设计】视图中单击框架集中两个框架之间的边框，或在【框架】面板中单击围绕框架集的边框选择框架集，然后在【文档】工具栏的【标题】文本框中，输入框架集文档的名称。当访问者在浏览器中查看框架集时，此标题将显示在浏览器的标题栏中。10.2.7 调整框架大小如果要设置框架的近似大小，可在【文档】窗口的【设计】视图中拖动框架边框进行调整即可。如果要指定准确大小，并指定当浏览器窗口大小不允许框架以完全大小显示时浏览器分配给框架的行或列的大小，可通过【属性】面板进行设置。10.2.8 拆分和删除框架一、使用菜单命令拆分框架将鼠标光标置于要拆分的页面内，选择菜单命令【修改】/【框架集】下的【拆分左框架】、【拆分右框架】、【拆分上框架】或【拆分下框架】，可以拆分该框架。这些命令可以用来反复对框架进行拆分，直至满意为止。10.2.8 拆分和删除框架二、自定义框架集选择菜单命令【查看】/【可视化助理】/【框架边框】，显示出当前网页的边框，然后将鼠标光标置于框架最外层边框线上，当鼠标光标变为形状时，单击并拖动鼠标光标到合适的位置即可创建新的框架。10.2.8 拆分和删除框架如果将鼠标光标置于最外层框架的边角上，当鼠标光标变为形状时，单击并拖动鼠标光标到合适的位置，可以一次创建垂直和水平的两条边框，将框架分隔为4个。10.2.8 拆分和删除框架如果拖动内部框架的边角，可以一次调整周围所有框架的大小，但不能创建新的框架。如要创建新的框架，可以先按住Alt键，然后拖动鼠标光标，可以对框架进行垂直和水平的分隔。10.2.8 拆分和删除框架三、删除框架如果要删除框架页中多余的框架，可以将其边框拖动到父框架边框上或直接拖离页面。如果要删除的框架中的文档有未保存的内容，则DreamweaverCS6将提示保存该文档。不能通过拖动边框完全删除一个框架集。要删除一个框架集，需要关闭显示它的【文档】窗口。如果该框架集文件已保存，则删除该文件。10.3 设置框架10.3.1

教学案例━━美丽风情10.3.2选定框架10.3.3框架和框架集属性10.3.4

编辑无框架内容10.3.5

插入浮动框架10.3.1教学案例━━美丽风情将素材文档复制到站点文件夹下，然后使用框架设置页面，在浏览器中的显示效果如图10-21所示。10.3.2 选定框架在【框架】面板中选择框架和框架集的方法是，选择菜单命令【窗口】/【框架】，打开【框架】面板，在【框架】面板中单击相应的框架即可选择该框架，单击框架集的边框即可选择该框架集，被选择的框架和框架集，其周围出现黑色细线框。10.3.2 选定框架在【文档】窗口中选择框架或框架集的方法是，在【设计】视图中按住Shift和Alt键的同时单击框架内部可选择该框架，单击框架集的内部框架边框可选择该框架集。10.3.2 选定框架选择不同的框架或框架集的方法是，按住Alt键的同时按下左箭头键或右箭头键，可在当前选定内容的同一层次级别上选择下一框架（框架集）或前一框架（框架集），使用这些键可以按照框架和框架集在框架集文件中定义的顺序依次选择这些框架和框架集；按住Alt键的同时按上箭头键，可选择父框架集（包含当前选定内容的框架集）；按住Alt键的同时按下箭头键，可选择当前选定框架集的第一个子框架或框架集，即按在框架集文件中定义顺序中的第一个。10.3.3 框架和框架集属性一、 设