框架实现多窗口页面

第 6章 框架实现多窗 口网页 第 6章 框架实现多窗口网页 第六章 框架实现多窗口网页 内容提要 框架与框架集 框架的基本操作 框架的属性 框架布局网页实例 制作浮动框架 第 6章 框架实现多窗口网页 6.1 框架与框架集 框架集也是一个网页布局工具，使用框架集可以把浏览器 窗口划分成若干区域，分别在不同的区域显示不同的网页 文档。一个框架是一个独立的 HTML页面，就是浏览器窗口 中的一个区域。 框架通过框架集的使用能够很好的在一起运作； 框架集是由多个框架嵌套组合而成的，它包含同一网页上 多个框架的布局、链接和属性信息。 框架集文档本身不包含要在浏览器中显示的 HTML内容，但 noframes部分除外。 要在浏览器中查看一组框架，必须打开框架集文档。 第 6章 框架实现多窗口网页 6.1 框架与框架集 第 6章 框架实现多窗口网页 6.2 框架的基本操作 6.2.1 在 HTML代码中创建框架 1.创建基本框架 基本 HTML中使用 ， 和 标签 来定义框架。 （ 1） 框架集标签 标签用于定义一个框架集，成对出现。框架集的 作用是将一个窗口划分成多个子窗口，即框架，每个框架都是 一个独立的页面，又叫框架页面。 通过 cols属性和 rows属性来将一个窗口划分为多个框架。 （ 2） 框架标签 框架标签用于设定单个框架页面，单个出现。 也可以通过属性设置框架的外观 第 6章 框架实现多窗口网页 6.2 框架的基本操作 （ 3） 标签 使用该标签可以在用户浏览器不支持框架显示时告之用户一些 相关信息，以免浏览者对空白窗口画面感觉莫名其妙。 标签是成对使用的，首尾标签之间的内容就是告之浏览 者的信息。 （ 4）基本结构 标签是可以嵌套使用的，也就是说，可以将其中 某一个或几个子窗口划分为若干个更小的窗口。 第 6章 框架实现多窗口网页 6.2 框架的基本操作 6.2.2 在 Dreamweaver中创建框架 Dreamweaver提供了两种创建框架结构网页的方法，即： 可以从若干预定义的框架集中选择，也可以自己设计框架集。 1.创建预定义的框架集 （ 1）选择预定义框架集 （ 2）为各个框架设置标题 2.自定义框架集 自定义框架集是指由网页设计者根据需要，自己设置框架集中 框架的数量、布局等属性，适合于创建复杂框架结构页面。 第 6章 框架实现多窗口网页 6.2 框架的基本操作 6.2.3 框架页的选择 1在 “框架 ”面板中选择框架和框架集 选择 主菜单的【窗口】 【框架】或者按下 Ctrl+F10， 打开框架 面板 。 在 “框架 ”面板中点击框架则可选取框架，若要在 “框架 ”面板中选 取框架页，则需在 “框架 ”面板 中点击环绕着框架的边框。 2在 “文档 ”窗口中选择框架和框架集 按住 Alt键的同时单击框架内部 ； 要 选择一个框架集，则需单击框架内部的分隔线。 通过 单击窗口左下角的标签选择器来选择相应的框架或框架集。 第 6章 框架实现多窗口网页 6.2 框架的基本操作 6.2.4 框架页的保存 框架网页由框架页（也叫框架集）和（子）框架两部分组成 。 框架 页定义框架的结构、数量、尺寸及装入框架的网页文件 。 框架 页是一种特殊的网页文件。其中，保存描述子框架数量， 以及在各个子窗口中显示网页的文件名（路径）等信息 。 子 框架是子窗口、框架。每个子框架中打开一个独立的网页文 件 。 一 个包含三个框架（子）窗口的网页，由四个网页文件组成。 第 6章 框架实现多窗口网页 6.2 框架的基本操作 6.2.5指定框架网页文件 当完成框架集的创建后，还需要为每个框架指定一个网页文 件，该操作的实质就是把网页文件放到相应的框架中。当这个框 架中被保存后，所指定的文档就成为在浏览器中打开框架页时该 框架显示的默认网页文档。这些被放入框架中的网页可以是空白 网页，也可以是事先编辑好的网页文件。实际上，当创建一个框 架页文件时，就已经创建了框架所对应的空白网页文件。 操作方法是： 1.将插入点放在需要插入网页的框架中； 2.选择【文件】 【在框架中打开】菜单命令，打开 “选择 HTML 文件 ”对话框。 3.在 “选择 HTML文件 ”对话框中选择要打开的网页文件，单击 “确 定 ”，即可完成网页的插入。 第 6章 框架实现多窗口网页 6.2 框架的基本操作 6.2.7设置框架中的链接 在框架中可以使用超链接，并且可以通过一个框架中的超 链接改变另一个框架中的内容，这种方法通常用于创建导航页 面。要在一个框架汇总使用超链接打开另一个框架中的文档， 必须设置链接目标。链接目标用于确定链接内容在哪里打开。 为框架网页设置超链接的操作步骤如下： 1.在网页文件中选择要设置链接的对象（如具体的文字、图片 等）； 2.在属性面板的 “链接 ”选项中设置链接的网页文件。 3.在属性面板的 “目标 ”下拉列表中选择打开链接文件的窗口 第 6章 框架实现多窗口网页 6.3 框架的属性 设置框架集的属性 （ 1）使用框架集属性面板 （ 2）设置框架集标题 首先选中要设置标题的框架集，然后再在 “文档 ”工具栏的 “标 题 ”框中键入框架集文档的名称即可。 第 6章 框架实现多窗口网页 6.3 框架的属性 2.设置框架属性 第 6章 框架实现多窗口网页 6.4 框架布局网页实例 第 6章 框架实现多窗口网页 6.4 框架布局网页实例 第 6章 框架实现多窗口网页 6.5制作浮动框架 1.浮动框架基础 浮动 框架又叫嵌入式框架，就是在 HTML文档中的一个区域 内插入一个 HTML文档，就像在 HTML文档的一部分区域中 显示图像一样 。 浮动框架不需要在单独的网页中创建框架，而是通过 标签建立的，其常用属性 属性 说明 src 嵌入框架内容的源 name 标记框架名 frameborder 设置和隐藏框架边界 scrolling 设置框架滚动条 ， 取值 yes， no或 auto width 设置浮动框架宽度 ， 单位像素 height 设置浮动框架高度 ， 单位像素 第 6章 框架实现多窗口网页 6.5制作浮动框架 2.在记事本中制作浮动框架 嵌入式框架 美好回忆 第 6章 框架实现多窗口网页 6.5制作浮动框架 3.在 Dreamweaver中制作浮动框架 （ 1）插入浮动框架 （ 2）将光标定位在 “代码 ”模式中已插入的 “”标签内 ，然后按回车键，自动打开下拉列表，选择 “src”选项， （ 3）接着显示 “浏览 ”按钮 （ 4）依照前两个步骤或以直接输入的方法，编写代码 “width= 300 height=400”，设置浮动框架的宽度和高度， （ 5）保存该网页，按 F12在浏览器中预览， 第 6章 框架实现多窗口网页 6.5制作浮动框架 第 6章 框架实现多窗口网页