第八讲使用框架布局页面.ppt

第九章 使用框架布局页面 框架是网页中常使用的效果。使用框架，可以在同一浏览窗口中显示多个不同的文件。最常见的用法是将窗口的左侧或上侧的区域设置为目录区，用于显示文件的目录或导航条。而将右边一块面积较大的区域设置为页面的主体区域。通过在文件目录和文件内容之间建立的超级链接，用户单击目录区中的文件目录，文件内容将在主体区域内显示，用这种方法便于用户继续浏览其他的网页文件。 本章将介绍关于框架的基本知识，并结合具体实例讲解在Dreamweaver CS4中如何创建、使用框架，设置框架属性，利用框架进行布局。 9.1 关于框架 下面的实例显示了一个使用框架的网页，如图所示。这是由三个框架组成的框架布局，一个框架横放在顶部，其中包含 Web 站点的Logo和一些常用按钮；左侧较窄的框架包含导航条；右侧的框架占据了页面的大部分，其中包含主要内容。这些框架中的每一个都显示单独的 HTML 文档。 9.1.1 基本概念 框架实际上是一种特殊的网页，它可以根据需要把浏览器窗口划分为多个区域，每个框架区域都是一个单独的网页文档内容。 框架集是定义一组框架结构的HTML文档，它包括网页内框架的数量、每个框架的大小、框架内网页的来源和框架的其它属性等。单个框架包含在框架集中，是框架集的一部分，每个框架中都放置一个内容网页，组合起来就是浏览者看到的框架式网页。 9.1.2 框架的优缺点 在网页中使用框架具有以下优点： 使网页结构清晰，易于维护和更新。 访问者的浏览器不需要为每个页面重新加载与导航相关的图形。 每个框架网页都具有独立的滚动条，因此访问者可以独立控制各个页面。 然而，在网页中使用框架也具有一些缺点： 某些早期的浏览器不支持框架结构的网页。 下载框架式网页速度慢。 不利于内容较多、结构复杂页面的排版。 大多数的搜索引擎都无法识别网页中的框架，或者无法对框架中的内容进行遍历或搜索。 9.2 创建框架及其基本操作 9.2.1 使用预设的框架集 9.2.2 框架的基本操作 1．选取框架或框架集 2．保存框架和框架集 3．调整框架大小 4．拆分、删除框架 1. 选择框架和框架集 在文档窗口中选择框架的方法为，按住【Alt+Shift】键，然后在要选择的框架内单击即可，被选中的框架边线为虚线。 如要选择框架集，则单击该框架集上的任意框架即可，选中的框架集所有边框都呈虚线显示。 利用“框架”面板选择框架时，直接在面板中单击即可。选择框架集时，在面板中单击框架集的边框即可。 2.保存框架和框架集文件 1保存框架：将鼠标光标定位到要保存的框架中，选择“文件”“保存框架”菜单，然后在弹出的对话框中指定保存路径和文件名后，单击“保存”按钮即可。 2保存框架集：保存框架集的方法与保存框架相似，选中所需保存的框架集，选择“文件”“保存框架页”菜单，然后执行与保存框架相同的操作即可 框架的保存应严格按照保存顺序: (1)先保存各个内页; (2)再保存整个框架页; 顺序反过来的话,主框架页不能自动更新重命名后的内页. 9.3 框架属性的设置 利用“属性”面板可以设置框架和框架集的属性，包括框架名称、框架源文件、框架边框等。 1.设置框架属性 命名选取的框架 框架源文件的保存地址 选择是否显示框架的边框 设置框架滚动条的属性 设置是否能改变框架大小 设置框架边框的颜色 设置框架内容距上下左右边框的距离 2．设置框架集属性 该面板中各参数的含义同选中框架时的属性面板基本相同，不同的是在“行”或“列”文本框中可设置框架的行或列的宽度，在“单位”下拉列表框中可选择宽度的单位。 实现框架的内部链接： （1）给主要框架页取名字(注意对应各个页面名称对应)； （2）超链接跳转的目标为框架名字目标 （3）给显示主内容区的框架手动添加name=“框架名称” 9.4 创建嵌套框架集 只采用表格来进行嵌入式框架的设置： (1)插入面板—布局—插入iframe标签 (2)超链接跳转的目标为iframe 的id名称 (3)再给iframe添加name属性为id名称