网页设计框架详解.ppt

框架,框架是网页中常使用的效果。使用框架，可以在同一浏览窗口中显示多个不同的文件。最常见的用法是将窗口的左侧或上侧的区域设置为目录区，用于显示文件的目录或导航条。而将右边一块面积较大的区域设置为页面的主体区域。通过在文件目录和文件内容之间建立的超级链接，用户单击目录区中的文件目录，文件内容将在主体区域内显示，用这种方法便于用户继续浏览其他的网页文件。本章将介绍关于框架的基本知识，并结合具体实例讲解在Dreamweaver CS3中如何创建、使用框架，设置框架属性，利用框架进行布局。,11.1 关于框架,下面的实例显示了一个使用框架的网页，如图11.1所示。这是由三个框架组成的框架布局，一个框架横放在顶部，其中包含 Web 站点的Logo和一些常用按钮；左侧较窄的框架包含导航条；右侧的框架占据了页面的大部分，其中包含主要内容。这些框架中的每一个都显示单独的 HTML 文档。,11.1.1 基本概念,框架实际上是一种特殊的网页，它可以根据需要把浏览器窗口划分为多个区域，每个框架区域都是一个单独的网页。框架（Frames）由框架集（Frameset）和单个框架（Frame）两部分组成。框架集是一个定义框架结构的网页，它包括网页内框架的数量、每个框架的大小、框架内网页的来源和框架的其它属性等。单个框架包含在框架集中，是框架集的一部分，每个框架中都放置一个内容网页，组合起来就是浏览者看到的框架式网页。,11.1.2 框架的优缺点,在网页中使用框架具有以下优点：使网页结构清晰，易于维护和更新。访问者的浏览器不需要为每个页面重新加载与导航相关的图形。每个框架网页都具有独立的滚动条，因此访问者可以独立控制各个页面。然而，在网页中使用框架也具有一些缺点：某些早期的浏览器不支持框架结构的网页。下载框架式网页速度慢。不利于内容较多、结构复杂页面的排版。大多数的搜索引擎都无法识别网页中的框架，或者无法对框架中的内容进行遍历或搜索。,11.2 框架的使用,在11.1节介绍了框架的基本概念以及在网页中使用框架的优缺点，使读者对框架有了一定的了解。下面就来学习如何创建框架和框架集，以及框架的基本操作，属性设置等具体操作步骤。,11.2.1 创建框架和框架集,Dreamweaver CS3提供了15种框架类型，分别是上方固定、上方固定下方固定、上方固定右侧嵌套、上方固定左侧嵌套、下方固定、下方固定右侧嵌套、下方固定左侧嵌套、右侧固定、右侧固定上方嵌套、右侧固定下方嵌套、垂直拆分、左侧固定、左侧固定上方嵌套、左侧固定下方嵌套、水平拆分等，可以使用新建文档的方式创建空白框架网页，也可以将普通网页转变为框架结构。具体操作步骤如下：1创建空白框架网页2将现有文档创建为框架网页,11.2.2 框架的嵌套,框架的嵌套是指一个框架集套在另一个框架集内。“上方固定，左侧嵌套”实际上就是一个嵌套的框架集，是在上下结构的框架集中嵌套一个左右结构的框架集。具体操作步骤如下：（1）将鼠标移至要创建嵌套框架集的框架内，如图11.8所示。（2）单击”插入”|“HTML”|“框架”|“左对齐”命令菜单，新插入一个框架集，如图11.9所示。此时，嵌套框架集制作完成。,11.2.3 框架的基本操作,框架的基本操作主要包括：选取框架和框架集、保存框架和框架集、调整框架大小、拆分框架和删除框架等。1选取框架或框架集2保存框架3调整框架大小4拆分、删除框架,11.2.4 设置框架集属性,使用“属性检查器”可以方便地设置框架集的边框宽度和颜色、设置框架行和列的大小，对于初学者来说这种方法简单易用。下面来学习如何使用“属性检查器”设置框架集属性。,11.2.5 设置框架属性,小节学习了如何设置框架集的属性，此外利用“属性检查器”还可以设置框架的属性，包括框架名称、源文件、滚动条、边框、边界等。具体操作步骤如下：,11.3 嵌入式框架Iframe,嵌入式框架（标签为）也是框架的一种形式。它与普通框架的区别在于，它可以嵌入在网页中的任意部分，比如可以在表格中插入嵌入式框架。正是由于这一特点，使得嵌入式框架使用广泛。本节将结合具体实例，学习如何创建嵌入式框架，以及设置嵌入式框架的属性。应用嵌入式框架的网页效果如图11.27所示，单击左边的导航文字，右边的内容会发生改变，这实际上是由两个页面组成。下面就以该网页为例来学习嵌入式框架的使用。具体操作步骤如下：,11.4 框架布局实例,框架结构是网络课程中经常用到的布局方式。本节就来介绍框架结构网络课程的页面布局。完成后的网页效果如图11.38所示。,