第六章框架.pptVIP

第六章 页面布局设计 —框架 信息工程系 张婷婷 目标 6.1 框架概述 6.2 预设框架集 6.3 自定义框架集 6.4 框架的基本操作 6.5 创建嵌入式框架 6.1 框架概述 框架是网页中常使用的效果。使用框架，可以在同一浏览窗口中显示多个不同的文件。最常见的用法是将窗口的左侧或上侧的区域设置为目录区，用于显示文件的目录或导航条。而将右边一块面积较大的区域设置为页面的主体区域。通过在文件目录和文件内容之间建立的超级链接，用户单击目录区中的文件目录，文件内容将在主体区域内显示，用这种方法便于用户继续浏览其他的网页文件。 在网络带宽十分有限的情况下，如何提高网页的下载速度，是设计网页时必须考虑的问题。如果多个网页拥有相同的导航区，只是内容有所不同，则可以考虑使用框架来设计网页布局。这样浏览者在查看不同内容时，便无需每次都下载整个页面，而可以保持导航部分不变，只下载网页中需要更新的内容部分即可，从而能够极大提高网页的下载速度。这样的网页也称为框架页，其最典型的应用便是当前十分流行的各种论坛(如天涯、搜狐论坛等)。 这是由三个框架组成的框架布局，一个框架横放在顶部，其中包含 Web 站点的Logo和一些常用按钮；左侧较窄的框架包含导航条；右侧的框架占据了页面的大部分，其中包含主要内容。这些框架中的每一个都显示单独的 HTML 文档。 框架实际上是一种特殊的网页，它可以根据需要把浏览器窗口划分为多个区域，每个框架区域都是一个单独的网页。 框架（Frames）由框架集（Frameset）和单个框架（Frame）两部分组成。框架集是一个定义框架结构的网页，它包括网页内框架的数量、每个框架的大小、框架内网页的来源和框架的其它属性等。单个框架包含在框架集中，是框架集的一部分，每个框架中都放置一个内容网页，组合起来就是浏览者看到的框架式网页。 框架的优缺点 在网页中使用框架具有以下优点： 使网页结构清晰，易于维护和更新。 访问者的浏览器不需要为每个页面重新加载与导航相关的图形。 每个框架网页都具有独立的滚动条，因此访问者可以独立控制各个页面。 框架的优缺点 在网页中使用框架也具有一些缺点： 某些早期的浏览器不支持框架结构的网页。 下载框架式网页速度慢。 不利于内容较多、结构复杂页面的排版。 大多数的搜索引擎都无法识别网页中的框架，或者无法对框架中的内容进行遍历或搜索。 6.2 预设框架集 Dreamweaver CS3提供了15种框架类型，分别是上方固定、上方固定下方固定、上方固定右侧嵌套、上方固定左侧嵌套、下方固定、下方固定右侧嵌套、下方固定左侧嵌套、右侧固定、右侧固定上方嵌套、右侧固定下方嵌套、垂直拆分、左侧固定、左侧固定上方嵌套、左侧固定下方嵌套、水平拆分等 创建空预设框架集 文件------新建-----示例中的页 创建嵌套框架集---方法1 使用系统预定义的方法可以快速创建出复杂的框架。但是预定义框架有时并不能完全满足需要，此时需要创建嵌套框架。 “上方固定，左侧嵌套”实际上就是一个嵌套的框架集，是在上下结构的框架集中嵌套一个左右结构的框架集。 （1）将鼠标移至要创建嵌套框架集的框架内。 （2）单击“插入”|“HTML”|“框架”|“左对齐”命令菜单，新插入一个框架集。 框架像表格一样可以多重嵌套。 创建嵌套框架集---方法2 可以再文档窗口中拖动一个框架边框来垂直或水平切割文档。 若分割的是内部框架，可以按住ALT键进行拖曳。 删除一个框架，可以将此框架边框拖离页面或拖至父框架的边框。 6.4 框架的基本操作----选择框架 修改对象属性时首先选中对象。对框架集或框架进行修改时，首先选中框架对象。选中框架集时，其所有框架边框显示出虚线，表示该框架处于选中状态。同样当框架选中时，也会显示虚线，表示选中。 既可以通过文档窗口选择（ALT键+鼠标可以选中子框架），也可以使用”框架”面板选择。 框架的基本操作----保存 设计好框架页面后，要保存框架。因为框架页面包含了多个网页，所以保存时与普通页面不一样。在Dreamweaver CS3中可以保存一个框架集，也可以单独保存一个框架，还可以保存所有的框架集及框架。 最快捷的方式是保存全部。 框架的基本操作----命名框架集页面 网页的名称要在框架集页面中命名，注意不要命名到子框架中。 框架的基本操作----修改框架尺寸 可通过拖动鼠标进行框架的大小修改 框架的基本操作----设置框架集属性 使用“属性检查器”可以方便地设置框架集的边框宽度和颜色、设置框架行和列的大小，对于初学者来说这种方法简单易用。 框架的基本操作----设置框架属性 框架名称、源文件、滚动条、边框、边界等 框架的基本操作----使用无框架内容 当浏览器不支持框架元素时，可以