轻松学HTMLCSS之框架.pptx

第9章框架 通过使用框架 用户可以在同一个浏览器窗口中显示不止一个页面 每份HTML文档成为一个框架 并且每个框架都独立于其他的框架 本章就来详细介绍有关框架的内容 9 1框架的概述 框架是指将一个页面分成几个部分 每个部分再使用一个页面 最后组合形成的结构 框架把页面分成几个部分 有利于网站进行编辑 下面给出一个框架的整体示意图 如图9 1所示 9 1 1框架的构成 框架就像表格一样 需要用多个标签来完成基本架构 通过标签和标签进行定义 定义语法规则如下 9 1 1框架的构成 常见的框架有上中下结构 上左右结构等 下面给出几个常见的框架示意图 如图9 2 图9 3所示 9 1 2自定义框架 自定义框架是指设计者根据自己的实际情况 自行定义框架 通过标签中的rows和cols两个属性进行定义 定义语法规则如下所示 9 1 3标签 由于浏览器的不同 对于框架的支持也不同 这时 我们需要添加一个标签 标签是用来定义当浏览器不支持框架时 可以跳转显示标签里的内容 标签中需要嵌套标签 定义语法如下所示 9 2框架集 frameset 框架集是指集合页面的子框架放在一起 通过标签进行定义 并且可以使用标签中的属性 对框架进行布局 修饰框架的总体效果 9 2 1分割左右窗口 分割左右窗口是指在框架集标签里水平方向分割几个子框架 分割出的几个子框架是由cols属性来定义 定义语法形式如下所示 几种常用的定义cols属性的方法与效果图 使用百分数设置cols 使用像素设置cols 使用剩余值 号设置cols 几种常用的定义cols属性的方法与效果图 使用剩余值 号设置cols 将100像素以外的窗口平均分配 将窗口分为150像素 100像素 自由扩展 9 2 2分割上下窗口 分割上下窗口是指在框架集标签里垂直方向分割几个子框架 分割出的几个子框架是由rows属性来定义 定义语法形式如下所示 9 2 3CSS中的框架设置 在CSS中 我们也可以通过各种属性使框架更加的美观 亮丽 下面我们就给出一个具体的示例来演示框架的设置 9 3子框架 frame 子框架是指被嵌套在框架集中的框架 有时我们也这么理解 框架集是一个结构 子框架是结构里的主体 框架网页显示的内容都是子框架的链接页面提供的 9 3 1调节框架 调节是指子框架与子框架之间可以利用边框进行拉大拉小 通过noresize属性可以定义边框的不可调节状态 由于调节的是子框架 所以noresize属性要放在子框架中使用 定义语法形式如下所示 9 3 2窗口嵌套 一个页面不止可以出现一个框架集 在框架集中 还可以再有框架集 窗口的嵌套是指在框架集中嵌套框架集 由于一个框架集只能规定一种分割形式 水平或垂直 所以如果想在网页中同时出现水平分割和垂直分割 需要定义窗口的嵌套 定义语法如下所示 9 3 3窗口的名称和链接 框架页面要进行超链接 就需要对子框架命名 再做链接 下面分别给出name属性和target属性的定义语法 框架集语法形式如下所示 链接页面语法形式如下所示 9 4框架外观 框架的外观也可以通过某些属性进行修改 使框架的外观更加美观 下面我们就来详细介绍如何定义框架的外观 9 4 1边框粗细 border 边框粗细是用来设置标签里子框架与子框架之间的边框 通过border属性设置 放在标签中 定义语法如下所示 9 4 2边框颜色 边框颜色是用来设置标签中子框架与子框架的边框颜色 用过bordercolor属性在标签中 但bordercolor属性要在border属性存在的时候才可以产生效果 定义语法形式如下所示 9 4 3边框的显示 边框的显示设置是指是否显示子框架与子框架之间的边框 通过frameborder属性设置 定义语法形式如下 9 4 4空白距离 空白距离是指子框架与子框架之间的空白距离 通过framespacing属性来设置 定义语法形式如下所示 9 5浮动框架 浮动框架要比普通框架灵活的多 它可以像层一样在网页中放置 本节就来详细介绍有关浮动框架的知识 9 5 1浮动窗口 iframe 浮动窗口是指在页面里嵌入的另一页面窗口 通过标签进行设置 放在标签中 标签最常见的一种用法是网上注册页面插入用户协议 定义语法形式如下所示 9 5 2透明浮动窗口 allowtransparency 透明浮动窗口是用来设置浮动窗口在页面里显示为透明状态 通过allowtransparency属性进行设置 定义语法如下所示 9 5 3滚动条的设置 设置滚动条是指设置浮动窗口是否显示滚动条 通过scrolling属性来设置 定义语法形式如下所示 9 5 4浮动窗口链接 浮动窗口的链接和子框架的链接作用是一样的 通过给标签添加name属性 再将链接内容中的target属性进行绑定即可 由于浮动窗口超级链接涉及到两个不同页面的代码 下面分别给出定义语法 浮动窗口语法形式如下 链接页面语法形式如下 9 6小结 本章学习了框架的使用和设置 虽然框架页面在网站的