《第11章框架.ppt》由会员分享，可在线阅读，更多相关《第11章框架.ppt（13页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、第11章 框架框架是网页中常使用的效果。使用框架，可以在同一浏览窗口中显示多个不同的文件。最常见的用法是将窗口的左侧或上侧的区域设置为目录区，用于显示文件的目录或导航条。而将右边一块面积较大的区域设置为页面的主体区域。通过在文件目录和文件内容之间建立的超级链接，用户单击目录区中的文件目录，文件内容将在主体区域内显示，用这种方法便于用户继续浏览其他的网页文件。本章将介绍关于框架的基本知识，并结合具体实例讲解在Dreamweaver CS5中如何创建、使用框架，设置框架属性，利用框架进行布局。 11.1 关于框架下面的实例显示了一个使用框架的网页，如图11.1所示。这是由三个框架组成的框架布局，一
2、个框架横放在顶部，其中包含 Web 站点的Logo和一些常用按钮；左侧较窄的框架包含导航条；右侧的框架占据了页面的大部分，其中包含主要内容。这些框架中的每一个都显示单独的 HTML 文档。11.1.1 基本概念框架实际上是一种特殊的网页，它可以根据需要把浏览器窗口划分为多个区域，每个框架区域都是一个单独的网页。框架（Frames）由框架集（Frameset）和单个框架（Frame）两部分组成。框架集是一个定义框架结构的网页，它包括网页内框架的数量、每个框架的大小、框架内网页的来源和框架的其它属性等。单个框架包含在框架集中，是框架集的一部分，每个框架中都放置一个内容网页，组合起来就是浏览者看到的
3、框架式网页。这是一个左右结构的框架。事实上这样的一个结构是由四个网页文件组成的。首先外部的框架集是一个文件，图中我们用Frameset.html命名。框架中顶部命名为Top.html，左边指向的是一个网页Left.htm。右边命名为Main,htmlLeft.htmlMain.htmleTop.htmlFramesetTop.htmlLeft.htmlMain.htmle11.1.2 框架的优缺点在网页中使用框架具有以下优点：使网页结构清晰，易于维护和更新。访问者的浏览器不需要为每个页面重新加载与导航相关的图形。 每个框架网页都具有独立的滚动条，因此访问者可以独立控制各个页面。在网页中使用框架
4、也具有一些缺点：某些早期的浏览器不支持框架结构的网页。下载框架式网页速度慢。不利于内容较多、结构复杂页面的排版。大多数的搜索引擎都无法识别网页中的框架，或者无法对框架中的内容进行遍历或搜索。11.2 框架的使用在11.1节介绍了框架的基本概念以及在网页中使用框架的优缺点，使读者对框架有了一定的了解。下面就来学习如何创建框架和框架集，以及框架的基本操作，属性设置等具体操作步骤。11.2.1 创建框架和框架集Dreamweaver CS5提供了15种框架类型，分别是上方固定、上方固定下方固定、上方固定右侧嵌套、上方固定左侧嵌套、下方固定、下方固定右侧嵌套、下方固定左侧嵌套、右侧固定、右侧固定上方嵌
5、套、右侧固定下方嵌套、垂直拆分、左侧固定、左侧固定上方嵌套、左侧固定下方嵌套、水平拆分等，可以使用新建文档的方式创建空白框架网页，也可以将普通网页转变为框架结构。具体操作步骤如下：建立框架、保存框架、编辑框架一、建立框架 两种方法： A 1、单击菜单“新建”-“文件”，打开“新建文档”对话框，做如下选择，点击“确定”。 2、打开要插入框架的页面。单击“布局”插入栏中的“框架”按钮右侧的按钮，在弹出的菜单中选择需要的框架类型。B 1、新建页-示例的页-框架 二、保存框架和框架集 1、保存框架：鼠标置于要保存的框架，选择“文件/保存框架”命令 2、保存框架集：选择要保存的框架集，选择“文件/保存框
6、架页”或者“文件/框架集另存为”命令。 3、保存全部：这时是保存整个框架结构，保存的时候虚线笼罩的就是你现在保存的框架。 三、编辑框架页 1. 选择框架页，并进行编辑。保存框架11.2.2 框架的嵌套框架的嵌套是指一个框架集套在另一个框架集内。“上方固定，左侧嵌套”实际上就是一个嵌套的框架集，是在上下结构的框架集中嵌套一个左右结构的框架集。具体操作步骤如下：（1）将鼠标移至要创建嵌套框架集的框架内，如图11.8所示。（2）单击”插入”|“HTML”|“框架”|“左对齐”命令菜单，新插入一个框架集，如图11.9所示。此时，嵌套框架集制作完成。11.2.3 框架的基本操作框架的基本操作主要包括：选
7、取框架和框架集、保存框架和框架集、调整框架大小、拆分框架和删除框架等。1选取框架或框架集2调整框架大小3拆分方法： 1拖动编辑窗口的边框：鼠标置于编辑窗口的边框，变成 或者 时拖动。 2拖动窗口中的框架边框：按住【Alt】键，鼠标变成 或者 时拖动。 注意：当指向拖动一小段边框时，先选中当前框架，再拖动。 4.删除框架方法：拖动不需要的边框和别的边框合并，或者拖到编辑窗口外。11.2.4 设置框架集属性使用“属性检查器”可以方便地设置框架集的边框宽度和颜色、设置框架行和列的大小，对于初学者来说这种方法简单易用。下面来学习如何使用“属性检查器”设置框架集属性。11.2.5 设置框架属性11.2.3小节学习了如何设置框架集的属性，此外利用“属性检查器”还可以设置框架的属性，包括框架名称、源文件、滚动条、边框、边界等。 Name 框架的名字 Src 链接的源文件 Frameborder 框架的边框设置 Scrolling 滚动条设置 11.3 框架布局实例框架结构是网络课程中经常用到的布局方式。本节就来介绍框架结构网络课程的页面布局。完成后的网页效果如图11.38所示。