网页设计.框架.ppt

第8章使用框架创建多页面布局 主要内容 建立水平或垂直的框架分割窗口 用嵌套框架分割窗口 对滚动条进行控制 在框架或浮动框架上进行链接 7 1框架简介 框架技术可以将浏览器分割成多个小窗口 并且在每个小窗口中 可以显示不同的网页 这样我们就可以很方便的在浏览器中浏览不同的网页效果 当浏览器分割成多个窗口后 各窗口就会扮演不同的角色 实现不同的功能 举例来说 有些论坛就是把浏览器分割成两个窗口 一个窗口主要来显示帖子的标题 而另一个窗口会显示具体的内容 这样的设计显然比起一个窗口的网页在浏览时方便得多 而且用户也可以任意的切换题目 框架的基本结构 框架的基本结构主要分为框架和框架集两个部分 它是利用标记与标记来定义 其中标记用于定义框架 而标记则用于定义框架集 框架的基本结构 框架的基本结构 7 2框架的设置 常见的对窗口的分割包括 水平分割 垂直分割和嵌套分割 具体采用哪种分割方式 取决于实际需要 可用标记中的rows 水平分割 或cols 垂直分割 属性来进行分割 窗口的水平分割 rows属性可定义一个水平分割的窗口框架 窗口的水平分割 语法说明rows属性的值代表各子窗口的高度 第一个子窗口高为高度1 第二个子窗口高为高度2 依此类推 而最后一个 则代表最后一个子窗口的高度 值为其他子窗口高度分配后所剩余的高度 设置高度数值的方式有两种 采用整数设置 单位为像素 px 语法如下 用百分比设置 语法如下 采用整数设置窗口的水平分割 窗口的垂直分割 cols属性可定义一个垂直分割的窗口框架 基本语法 一个垂直分割的例子 采用整数设置窗口的水平分割 窗口的嵌套分割 在实际应用中 厂 字型框架使用极为广泛 厂 字型的网页就是窗口中包含水平和垂直分割 如图所示 实现 厂 字型框架需要对窗口进行嵌套分割 窗口的嵌套分割 窗口的嵌套分割 框架的边框 在标记中 可运用border属性控制分割窗口框架的边框 基本语法 语法说明 n为整数 代表此窗口框架的宽度 单位为像素 px 框架的边框 框架的边框控制 框架的边框 框架的隐藏 frameborder属性用于控制窗口框架的周围是否显示框架 此属性可使用在标记与标记中 如果使用在标记内时 可控制窗口框架的所有子窗口 如果用在标记中 则只能控制该标记所代表的子窗口 基本语法 语法说明 0 表示不显示边框 1 表示显示边框 默认值为1 8 3子窗口的设置 指定子窗口显示网页定义子窗口名称控制子窗口滚动条调整子窗口的尺寸设置子窗口的边距 指定子窗口显示网页 src属性是用来指定要导入到某个子窗口的HTML文件的位置 语法如下 基本语法 语法说明 src属性的设置方法和前面介绍的标记的src属性的用法是一样的 下面的标记 将设置子窗口显示名称为frame html的网页 指定子窗口显示网页 指定子窗口显示网页 指定子窗口显示网页 定义子窗口名称 name属性用来指定窗口的名称 当完成子窗口的名称定义后 可指定超链接的链接目标显示到网页的某个子窗口 基本语法 指定子窗口的名称 控制子窗口滚动条 scrolling属性用于控制窗口框架中是否显示滚动条 使用此属性 可以避免HTML文件因内容过多而无法完全显示 此属性用于标记中 基本语法 语法说明 yes表示为显示滚动条 no表示不显示滚动条 auto为自动设置 控制框架滚动条 调整子窗口的尺寸 在前面的学习中 我们学习了如何运用标记的rows和cols属性来水平或垂直分割窗口 但设置后 各窗口框架的大小并非固定无法更改 当我们想更改窗口框架大小时 可以将鼠标指针移到要更改的框架上 待指针呈现双箭头符号时 再用鼠标进行拖拽 就可调整窗口的大小 当然我们不希望用户能随意地改变子窗口的大小 那么这时我们可以在标记中 添加noresize属性 语法如下 设置子窗口的边距 网页的边距可以通过 margin 来设定 那么框架和网页一样也可设置边距 可以利用标记中的marginwidth属性来设置框架左右边缘的宽度 marginheight属性可以设置框架上下边缘的宽度 基本语法 语法说明 在HTML文件中 利用框架标记中的marginwidth和marginheight属性可以设置相应子框架的左右和上下边缘的空白 设置框架边距 8 4浮动框架 在浏览网页的时候会看到在浏览器窗口含有孤立的子窗口 那么这就是浮动框架 插入浮动框架要使用成对的标记 同样 我们会用src属性来设置框架中显示文件的路径 基本语法 语法说明 与框架不同的是 浮动框架可以包含在标记中 8 5小实例 将浏览器画面分割成多个子窗口时 可赋予各子窗口不同的功能 最常见的应用方式 就是以一个子窗口作为网页的主画面 另一个窗口则用于控制该窗口的显示内容 要达到这个目的 我们可以运用标记的target属性 来指定显示链接网页的子窗口 厂字型布局图 小结 本章主要介绍了两种框架方式 一种是分割窗口式 一种是嵌入式 两种框架的介绍主要包括插入方式 大小调整 显示方式 初始页设