网页设计javascript-窗口框架.ppt

第8章窗口框架 第8章窗口框架 8 1窗口框架简介8 2窗口框架控制8 3FRAME间的链接8 4浮动窗口 8 1窗口框架简介 窗口框架可用于将窗口画面分割成多个小窗口 且每个小窗口中 可以显示不同的网页 达到在浏览器中同时浏览多个不同网页的效果 8 1 1什么是窗口框架 在介绍窗口框架文档之前 先来看看其应用实例 有一个感性认识 见下图 8 1 2窗口框架的基本结构 包含Frameset结构的HTML文件 文件framePage htm的源代码窗口框架文档你的浏览器不支持带框架的网页 标签用于定义一个窗口框架则用于定义窗口框架中的子窗口窗口框架文档的书写格式与一般的HTML文档的书写格式相同 只是用代替标签 是一个成对标签 有开始和结束标签 在标签内使用了另一个标签 用它来指定每一个窗口的内容 说明 窗口框架的分割方式可分为两种 一种是水平分割 rows属性 另一种是垂直分割 cols属性 8 1 3窗口框架的分割方式 8 2窗口框架控制 是成对标签 首标签和尾标签之间的内容是HTML文档主体部分 使用框架的HTML文档中不能出现标签 否则会导致web浏览器忽略所有的框架定义而只显示和之间的内容 标签主要有rows cols border bordercolor和frameborder五个属性 8 2 1框架设置标签frameset 1 格式 2 说明 rows说明窗口行分隔情况 cols说明列分隔 各参数值之间用逗号分隔 依次表示各个子窗口的高度 宽度 一 水平 垂直分割窗口属性rows cols rows和cols可以用数字 百分比或剩余值以及这三种方式的混合来表示 数字 表示子窗口高度 宽度 所占的像素点数 百分比 表示子窗口高度 宽度 占整个浏览器窗口高度 宽度 的百分比 一 水平 垂直分割窗口属性rows cols 剩余值 表示当前所有窗口设定之后的剩余部分 当符号 只出现一次 即其他子窗口的大小都有明确定义时 表示该子窗口的大小将根据浏览器窗口的大小而自动调整 当符号 出现一次以上时 表示按比例分割浏览器窗口的剩余空间 一 水平 垂直分割窗口属性rows cols 表示将浏览器窗口分割为3列 第一个子窗口在第一列 窗口宽度为整个浏览器窗口宽度的40 第二个子窗口在第二列 占浏览器窗口剩余空间的2 3 即其宽度为整个浏览器窗口宽度的40 第三个子窗口占剩余空间的1 3 宽度为整个浏览器窗口宽度的20 示例 示例 横向与纵向同时分割 SimpleFRAMESET 示例 嵌套分割 在标签中 可运用border属性控制分割窗口的框架的宽度 其语法如下所示 其中的数值代表此窗口框架的宽度 单位为像素 數值為整數 二 设置窗口框架宽度属性border 示例 框架宽度设置 SimpleFRAMESET 在标签中 可运用bordercolor属性设置边框的颜色 其语法如下所示 其中的 代表此边框的颜色 取值可为RGB代码 可以是單詞如 red 或十六進制如 00ff00 三 设置边框颜色属性bordercolor 示例 框架颜色设置 SimpleFRAMESET frameborder属性用于控制窗口框架四周 是否显示框架 此属性可使用在标签与标签中 使用在标签内时 可控制窗口框架的所有子窗口 使用在标签时 则仅能控制该标签所代表的子窗口 其语法为 0代表不显示框线 1代表显示框线 其默认值为1 四 设置框架隐藏属性frameborder 示例 框的设置 SimpleFRAMESET 每个子窗口均由标签定义是单个的标签 使用时 将它写在的开始和结束标签之间 它主要有六个属性 src name marginwidth marginheight scrolling和noresize 8 2 2子窗口设置标签frame src属性是用于指定要导入到该子窗口的HTML文件 其语法如下所示 如果一个标签中没有src属性 则该窗口显示为空 1 src属性 name属性是用来指定窗口的名称 此属性是可选的 当完成定义子窗口的名称后 我们便可在超链接中 指定显示网页的子窗口 其语法如下所示 2 name属性 scrolling属性用于描述该窗口是否有滚动条 该属性是可选的 其设置语法如下 各设置值所代表的意义依序为显示 不显示 自动设置 默认值是auto 3 scrolling属性 noresize属性是一个标志 没有取值 它说明浏览者是否可以自行用鼠标调整窗口的大小 如果设定了noresize属性 则窗口不能调整 如果默认 则可以自行调整窗口的大小 4 noresize属性 marginwidth属性 用来控制窗口内显示的内容与窗口左右边缘的距离 该属性是取一个像素值 默认为1 该属性是可选的 marginaheight属性 用来控制窗口内显示的内容与上下边缘的距离 该属性是取一个像素值 默认为1 该属性是可选的 5 设置边距属性marginwidth marginheight 对于框架网页中的超链接 可用target属性指定该链接的内容在哪个窗口显示 8 3FRAME间的链接 31 如在本章的第一个例子中 放置文件的功能是由下面的代码片段实现的 在文件left html中 放置文件的功能是由下面的代码片段实现的 1 春望2 春晓 分析第一个例子 32 用target属性指定的目标窗口名称 必须使用字母 数字字符 否则窗口名将被忽略 有几个特定的窗口名例外 这几个窗口名有特殊含义 它们是 blank self parent和 top target属性 33 target blank 当将target属性设置为 blank时 若单击超链接后 将打开一个新窗口来显示网页 target self 当将target属性设置为 self时 则将在同一窗口中显示链接的网页 target属性 34 target parent 当将target属性设置为 parent时 若单击超链接后 该链接网页将导入目前子窗口的上一层框架 若没有上层 则导入在同一窗口中 target top 当将target属性设置为 top时 则将脱离目前的窗口框架 在最上层的窗口框架中 显示链接的网页 target属性 示例 AAA html文件 Menu html文件我们的任务我们的成员我们的公司 示例 37 在一个页面中直接引入另一个页面 这种技术称为浮动的窗口 Floatingframe 也叫 内部框架 在HTML中通过iframe标签实现 其语法如下所示 其中 初始页面的URL 8 4浮动窗口 属性说明 src 文件的路径 既可是HTML文件 也可以是文本 ASP 以及GIF JPEG JPG PNG等图片文件 width height 画中画 区域的宽与高 scrolling 当SRC的指定的HTML文件在指定的区域显示不完时 滚动选项 如果设置为NO 则不出现滚动条 如为Auto 则自动出现滚动条 如为Yes 则显示 属性说明 FrameBorder 区域边框的宽度 为了让 画中画 与邻近的内容相融合 常设置为0 Name 子窗口名称Marginheight marginwidth 指定文字与边界的距离 示例 页内框架示例李白静思怨情真可惜 您的浏览器不支持框架 示例 file1 htm file1 htm李白