Microsoft Word - 第9章使用框架14.doc

Size: px

Start display at page:

Download "Microsoft Word - 第9章使用框架14.doc"

稗贝
5 years ago
Views:

1 110 第 9 章框架网页中框架 (frame) 的主要作用是, 将浏览器窗口分割成几个相对独立的小窗口, 浏览器可以将不同网页文件同时传送到这几个小窗口, 这样就可以同时浏览不同网页文件使用框架, 可以在一个浏览器中显示出多张 HTML 文档, 这种 HTML 文档被称为框架页, 各张框架页都可以不同, 所以各页面之间是独立的通过本章的学习, 可以了解到以下框架知识 : frameset 标签用法 frame 标签用法框架分栏框架重要属性框架链接框架实例 9.1 框架基本语法框架, 就是在一个浏览器中显示多个 HTML 页面, 使用框架后, 在一张网页中可以用来放置多个不同的网页在新闻类的网站可以看到, 有的广告专用一张网页来显示的, 每次更新广告的时候, 只需要对那张网页做修改在本节中主要介绍框架的基本语法, 如 frameset frame 和框架的部分属性等如果一个网页的左边导航菜单是固定的, 而页面中间的信息可以上下移动, 这一般就可以认为是一个框架型网页此外, 一些框架型站点的模板在其页面上方放置了公司的 LOGO 或图片, 不过这一块也是位置固定的而页面的其他部分则可以上下左右移动有的框架型站点模板还会在其固定区域中, 放入链接或导航按钮框架的基本语法是由 <frameset> 标签对表示, 标签对放在标记对下的后面, 即与标记对并列如何来实现框架, 全由 <frameset> 来设置, 其内又包含 <frame></frame>, 用 <frame></frame> 标记对来表示在框架内放入什么文件, 代码 9.1 表示框架的基本语法 <title> 框架基本语法 </title> <! 设置框架 --> 代码 9.1 源代码 \ 第 9 章 \ 框架基本语法.html

111 <frameset cols="25%,50%,25%">> <frame src="http://www.hao123.com/"> <frame src="http://www.sina.com.cn/"> <frame src="http://www.163.

2 111 <frameset cols="25%,50%,25%">> <frame src=" <frame src=" <frame src=" 上面代码在 html 中插入了框架, 框架包括三个网页, 分别表示了网址之家新浪和网易的首页, 在 <frameset> 中的 cols 参数代表列, 代码 9.1 中, 表示在框架集中有三个框架且链接不同的页面, 效果如图 9.1 所示图 9.1 框架基本语法这样三张网页就插入到了这个网页中的框架中, 框架中的每张网页都是独立的设置 <frameset> 时, 必须有行和列的表示, 不能空格注意 :<frameset> 在标签内, 不能与 <body></body> 并列, 所以在网页中先去掉 <body></body>, 再写 <frameset> 标签对, 以免不知道在哪出现错误 <frame> 是在 <frameset> 标签对中的, 且是单标记 9.2 框架分栏在网页中, 有时要插入多张网页到框架中, 那么对网页的分栏也很重要, 如何表现使网页看起来更自然框架分栏有垂直分栏和水平分栏框架分栏是网页插入多个框架的结果, 多个框架放在同一个网页中, 必然会出会分栏状态, 如何使框架分栏在网页中达到更好的视觉效果, 本小节来介绍框架分栏的两种分栏样式

$> <frame src="http://www.sina.com.cn"> 垂直分栏在 <frameset> 中包含两张网页文档, 每张网页占 50%, 第二张网页用 <frame> 来引进网页文档路径, 代码 9.2 表示垂直分栏 <title> 框架垂直分栏 </title> 代码 9.2 源代码 \ 第 9 章 \ 框架垂直分栏.$

3 框架垂直分栏垂直分栏是对框架里的网页文档垂直排列, 每张网页文档占用一列显示垂直分栏是在 <frameset> 中用 cols 表示, 后面接要表示的列宽, 语法形式如下 : <frameset cols="50,50"> <frame src=" <frame src=" 垂直分栏在 <frameset> 中包含两张网页文档, 每张网页占 50%, 第二张网页用 <frame> 来引进网页文档路径, 代码 9.2 表示垂直分栏 <title> 框架垂直分栏 </title> 代码 9.2 源代码 \ 第 9 章 \ 框架垂直分栏.html <frameset cols="50,50"> <frame src=" <frame src=" 上面代码在框架中包括两个垂直的网页文档, 设置了 cols 参数为 50 和 50, 表示各占一半显示, 效果如图 9.2 所示图 9.2 框架垂直分栏框架的垂直分栏把整个网页分成多列, 如 cols 中有两个数字, 表示两个列, 如果想用三列显示网页文档那要怎么样呢? 同时可以在后面加逗号再加一个数字就可以了, 注意三

$3 表示框架水平分栏 <title> 框架水平分栏 </title> 代码 9.3 源代码 \ 第 9 章 \ 框架水平分栏.html <frameset rows="40,60"> <frame src="http://www.sina.com.cn"> <frame src="http://www.163.com"> 代码 9.$

4 113 个数字加起来不超过 100%, 请读者想想为什么注意 : 路径可以是网址, 也可以是同目录下的网页文档框架水平分栏框架可以垂直分栏, 同样也可以水平分栏, 水平分栏就是把网页文档分成多行显示水平分栏的语法用 rows 表示, 与垂直分栏一样, 也放在 <frameset> 上, 一个框架不能同时出现水平和垂直分栏, 即不能同时出现 cols 和 rows, 代码 9.3 表示框架水平分栏 <title> 框架水平分栏 </title> 代码 9.3 源代码 \ 第 9 章 \ 框架水平分栏.html <frameset rows="40,60"> <frame src=" <frame src=" 代码 9.3 中, 一个占用 40% 和另一个占用 60% 的网页文档, 分上下两行显示, 上面显示的是新浪, 而下面显示的是网易, 效果如图 9.3 所示图 9.3 框架的水平分栏在使用框架的时候, 根据网页美观性来选择框架是水平分栏还是垂直分栏再通过其

5 114 他属性的运用, 可以做出很漂亮的页面, 稍后介绍框架常用的属性注意 : 当框架里网页文档超过两个时, 必需出现 cols 或 rows, 或者 cols 和 rows 同时出现, 如果只有一张网页文档, 可以省掉在 <frameset> 中也可以再嵌入 <frameset> 标签对 9.3 框架的常用属性光是用框架基本语法显示网页文档是不够的, 对特殊的环境处理不当, 会影响效果, 而且也不好控制框架在整上网页上的样式常用的有属性有不可调节框架大小网页空白和不支持框架等, 下面对其分别介绍设置不可调节框架大小上面的框架都可以调节大小的, 有时网页制作可能对框架设置成不能调节小大, 这时在该网页文档中用 noresize= noresize 表示, 在网页效果中不会让用户去调节大小的, 代码 9.4 表示 noresize 不能调节框架大小代码 9.4 源代码 \ 第 9 章 \ 用 noresize 表示不能调节框架大小.html <title> 不能调节框架大小 </title> <frameset cols="50,30,20"> <frame noresize="noresize" src=" /> <frame src=" /> <frame src= 代码 9.4 中表示框架的三个网页文档中, 第一个占用 50% 的宽度, 显示网易首页内容, 且不能调节框架大小, 而第二个网页文档和第三个合起来占用 50% 的度宽, 而且是默认的可以调节框架大小, 效果如图 9.4 所示

115 图 9.4 不可调节框架大小上图中在第一个网页文档中的边框外不能调节大小的, 鼠标放上去没有显示出可以拉伸的箭头, 而放在新浪网首页的网页文档右边框处能显示出可以调节大小, 说明 noresize 对第一个即网易所在的网页文档外起作用 9.3.

6 115 图 9.4 不可调节框架大小上图中在第一个网页文档中的边框外不能调节大小的, 鼠标放上去没有显示出可以拉伸的箭头, 而放在新浪网首页的网页文档右边框处能显示出可以调节大小, 说明 noresize 对第一个即网易所在的网页文档外起作用浏览器不支持框架在以前的旧浏览器中不支持框架, 为了给这些不支持框架的浏览器用户友好提醒, 可以用 <noframes></noframes> 标签对显示文字, 说明该浏览器不支持框架, 支持框架的浏览器不再显示 <noframes></noframes> 里的内容, 代码 9.5 表示浏览器不支持框架 <title> 不支持框架 </title> 代码 9.5 源代码 \ 第 9 章 \ 浏览器不支持框架.html <frameset rows="40,60"> <frame src=" <frame src=" <noframes> 对不起, 您的浏览器不支持框架 </noframes> 可以在每个网页的框架里面加上 <noframes></noframes> 标签对, 当用以前的旧浏览器浏览网页中的框架时, 会显示 <noframes></noframes> 的内容, 而忽略 <frameset> 标记对, 所以浏览器显示出 <frameset></framset> 上的内容时, 表明该浏览器支持框架, 如图 9.5 所示

116 图 9.5 noframes 用法技巧 : 为了让不支持框架的浏览器访问带有框架的网页, 建议每次都带上 <noframes></noframes> 标记对 9.3.

7 116 图 9.5 noframes 用法技巧 : 为了让不支持框架的浏览器访问带有框架的网页, 建议每次都带上 <noframes></noframes> 标记对设置框架边框当存在框架时, 很多个网页文档在里面, 如果按默认有边框的话, 看起来很不美观在出现多个网页文档时, 可以设置框架的边框, 在 <frameset> 中用 frameborder 属性表示 <frameset frameborder=#> 通过对 frameborder 的设置, 就可以控制框架的边框, 其中 # 代表设置的值, 有两种表示方法 : 第一种方法用英语表示,yes 表示有边框, 默认时也是有的, 用 no 代表无边框第二种方法是用数字 1 表示有边框,0 表示无边框下面用代码 9.6 表示无边框, 注意只在设置 frameborder 时与有边框不同而已 <meta> <title> 设置框架边框 </title> 代码 9.6 源代码 \ 第 9 章 \ 设置框架边框.html <frameset cols="40%,*" frameborder="no"> <frame src="a.html" /> <frame src="b.html" />

117 代码 9.6 中用一网页面表示两个网页文档, 框架边框设置成无, 效果如图 9.6 所示, 图 9.7 是设置为有边框的效果, 即框架默认的边框图 9.6 框架无边框图 9.7 框架有边框有时为了隐藏框架边框, 通过设置 frameborder 的值可以达到美观效果, 是不是比有边框的网页清秀点?

8 117 代码 9.6 中用一网页面表示两个网页文档, 框架边框设置成无, 效果如图 9.6 所示, 图 9.7 是设置为有边框的效果, 即框架默认的边框图 9.6 框架无边框图 9.7 框架有边框有时为了隐藏框架边框, 通过设置 frameborder 的值可以达到美观效果, 是不是比有边框的网页清秀点? 当有多个框架页面存在时, 更显得重要注意 : 边框与滚动条不同, 如果出现滚动条时比较难判断有没有边框, 请读者仔细观察设置滚动条当网页文档中的高度超过当前浏览器的高度时, 滚动条会自动出现, 滚动条的作用是方便拖拉网页窗口, 以便查看显示不到的网页部分滚动条比较方便查看显示不到的部分, 有时出现滚动条也带来非常的不便, 所以想到设置框架滚动条使其不显示设置滚动条在是 <frame> 里面, 用 scrolling 属性, 后面的值可以选择 :auto yes no, 分别表示滚动条为自动有滚动条和无滚动条, 代码 9.7 设置了框架滚动条 <meta> <title> 设置框架滚动条 </title> 代码 9.7 源代码 \ 第 9 章 \ 设置滚动条.html <frameset cols="40%,*"> <frame src=" scrolling="no" /> <frame src=" /> 代码表示一张网页的两个框架文档, 第一个文档设置了滚动条为无, 第二个文档没设置, 即为默认的 auto, 效果如图 9.8 所示

$8 所示表示网页中的导航框架 <title> 导航框架 </title> <frameset cols="20%,*"> <frame src=" 导航框架链接.html"> 代码 9.8 源代码 \ 第 9 章 \ 导航框架.html <frame src="http://www.163.com" name="myframe"> 代码 9.$

9 118 图 9.8 设置滚动条 9.4 框架链接框架链接有内联框架和导航框架, 导航框架是在 <frameset> 基础上的链接, 而内联框架指在网页内部的框架联接其他网页, 很重要的是内联框架包括在 <body></body> 中的框架导航框架导航框架是在网页框架的 <frame> 中加入 name 属性, 表示该 <frame> 的名称, 然后通过用 <a> 标记的链接, 并用 target 等于 <frame> 的名称, 那所得到的链接地址网页会显示在该 <frame>, 代码 9.8 所示表示网页中的导航框架 <title> 导航框架 </title> <frameset cols="20%,*"> <frame src=" 导航框架链接.html"> 代码 9.8 源代码 \ 第 9 章 \ 导航框架.html <frame src=" name="myframe"> 代码 9.8 说明在网页中的框架中, 第一个网页文档占 20% 的宽度且显示的是导航框架链接.html 页面, 剩下的是第二个网页文档宽度, 显示的是网易首页页面, 代码 9.9 表示导航框架链接网页源代码

$119 <title> 导航框架 </title> 代码 9.9 源代码 \ 第 9 章 \ 导航链接.html <a href ="http://www.sina.com.cn" target ="myframe"> 导航链接 </a> 代码 9.$ 9 导航框架链接前图 9.10 导航框架链接后说明 : 导航框架很有用, 读者观察一下有哪些网站利用了这个技术 9.4.

9 导航框架链接前图 9.10 导航框架链接后说明 : 导航框架很有用, 读者观察一下有哪些网站利用了这个技术 9.4.

10 119 <title> 导航框架 </title> 代码 9.9 源代码 \ 第 9 章 \ 导航链接.html <a href =" target ="myframe"> 导航链接 </a> 代码 9.9 是表示一个导航框架的链接, 与其他链接不同的是,target 后面接的是 <frame> 定义过的名称, 表示内容在该 <frame> 内显示, 图 9.9 所示的是在链接点的效果当单击导航链接后, 在右边的显示中变成新浪的网页文档, 而左边的内容不变, 效果如图 9.10 所示图 9.9 导航框架链接前图 9.10 导航框架链接后说明 : 导航框架很有用, 读者观察一下有哪些网站利用了这个技术内联框架内联框架存在 <body></body> 的单个 HTML 文件中, 可以链接其他网页并显示它, 即在一个页面中嵌入一个框架窗口来显示另一个页面的内容, 叫做浮动框架也称内联框架语法是用 <iframe></iframe> 标签对表示, 或者可以用 <iframe /> 表示, 后面的斜线代码是 iframe 的结果符, 代码 9.10 表示内联框架 <title> 内联框架 </title> <body> <iframe src=" /> </body> 代码 9.10 源代码 \ 第 9 章 \ 内联框架.html

120 图 9. 11 内联框架技巧 :<iframe src="url" width="x" height="x" scrolling="[option]" frameborder="x" allowtransparency style=" background-color: "></iframe>, 可以设置 <iframe> 的属性值, 这与其他设置都一样的 9.

11 120 图内联框架技巧 :<iframe src="url" width="x" height="x" scrolling="[option]" frameborder="x" allowtransparency style=" background-color: "></iframe>, 可以设置 <iframe> 的属性值, 这与其他设置都一样的 9.5 框架实例手把手框架在网页中经常用到, 框架可以给网页带来很大的方便, 如在一张网页中设置不同的部分, 用框架来实现就可以对经常变动的部分用框架表示, 更新页面只对其中的框架进行更新即可所以框架可以将多张网页组成一个网页, 在这张网页中来显示这些网页所显示的信息框架最常用在网页的页头和网脚, 网头指的是网页的头部, 上面部分, 相反, 页脚指的是网页尾部在正常的网站中, 网页的头部和尾部是不需要变化的, 即使要变化也是对整个网站的全部网页统一更新, 这时, 框架的用法就来了, 在这些网页中插入二个框架网页, 分别放在网页头部和尾部, 以后网站更新, 只需要对框架页面更新, 即可更新全部的网页头部和尾部本实例演示框架的用法在框架集中, 列出 6 个框架, 通过这 6 个框架来表示框架的特性, 如设置框架的 noresize 后不能调节框架大小, 还可以设置框架的链接, 同时可以在不同的框架中显示, 以下是框架的用法实例步骤在网页中插入框架在网页中插入二行三列的框架, 分别显示不同的框架文档在网页中建框架, 设置 cols 为 50%,50%, 表示二行各占一半, 而 rows 要设置为显示三列的数字, 所以输入 30%,30%,40%, 即表示二行三列, 如代码 9.12 所示

$121 <title> 框架实例手把手 </title> 代码 9.11 源代码 \ 第 9 章 \ 框架实例手把手.html <frameset rows="50%,50%" cols="30%,30%,40%"> 上面代码表示了二行三列, 显示 6 个框架文档, 所以用 6 个 <frame> 设置每个框架文档的页面, 效果如图 9.12 所示图 9.$

12 121 <title> 框架实例手把手 </title> 代码 9.11 源代码 \ 第 9 章 \ 框架实例手把手.html <frameset rows="50%,50%" cols="30%,30%,40%"> 上面代码表示了二行三列, 显示 6 个框架文档, 所以用 6 个 <frame> 设置每个框架文档的页面, 效果如图 9.12 所示图用 cols 和 rows 划分二行三列设置框架的滚动条和边框左边的框架文档设置成不可调节大小状态, 且设置中间的文档为没有滚动条和框架边框要想在左边的文档设置成不可调节大小状态时, 就对第 1 个和第 4 个 <frame> 的 noresize 设置 ; 在中间的框架文档设置没有滚动条和框架边框, 就对第 2 个和第 5 个 <frame> 的 scrolling 和 framesborder 设置, 代码 9.12 完成上面的设置 <title> 框架实例手把手 </title> 代码 9.12 源代码 \ 第 9 章 \ 设置滚动条和边框.html <frameset rows="50%,50%" cols="30%,30%,40%">

122 <frame src="a.html" noresize="noresize"> <frame src="http://www.sina.com.cn" scrolling="no" frameborder="no"> <frame src="a.html" noresize="noresize"> <frame src="http://www.163.

13 122 <frame src="a.html" noresize="noresize"> <frame src=" scrolling="no" frameborder="no"> <frame src="a.html" noresize="noresize"> <frame src=" scrolling="no" frameborder="0"> 上面代码对第 1 个和第 4 个文档设置了不可调节大小状态, 为了让第 2 个和第 5 个文档显示更多内容, 使在默认条件下出现滚动条, 再设置第 2 个和第 5 个框架为没有滚动条和边框的状态, 其他的文档保存不变, 效果如图 9.13 所示图 9.13 设置滚动条和边框设置不支持框架文字注明如果不支持框架的话, 加上 <noframes></noframes> 标签对在 <frameset> 后面就行, 代码 9.13 在后面输入 <title> 框架实例手把手 </title> 代码 9.13 源代码 \ 第 9 章 \ 设置不支持框架文字.html <frameset rows="50%,50%" cols="30%,30%,40%"> <frame src="a.html" noresize="noresize"> <frame src=" scrolling="no" frameborder="no"> <frame src="a.html" noresize="noresize"> <frame src=" scrolling="no" frameborder="0"> <noframes>

14 123 <body> <p> 对不起, 您的浏览器不支持框架 </p> </body> </noframes> 代码 9.13 对框架设置了标记 <noframes> 标记对, 标记对中有一行文字, 此属性表示当用户的浏览器不支持框架时, 不会显示框架中的内容, 相反, 显示 <noframes></noframes> 标记对中的内容, 说明用户的浏览器不支持框架当然, 用户的浏览器支持框架时不会显示出 <noframes></noframes> 标记对中的内容注意 : 为了兼顾有的浏览器不支持框架, 建议在做框架的网页布局时, 设置好 <noframes></noframes> 标记对设置框架导航链接在第 1 个文档做链接并给第 3 个和第 6 个文档的 <frame> 设置名称, 单击不同链接, 在它们的区域内显示内容, 代码 9.14 表示了导航链接 <title> 框架实例手把手 </title> 代码 9.14 源代码 \ 第 9 章 \ 设置导航链接.html <frameset rows="50%,50%" cols="30%,30%,40%"> <frame src="c.html" noresize="noresize"> <frame src=" scrolling="no" frameborder="no"> <frame src="a.html" name="myframe1"> <frame src="a.html" noresize="noresize"> <frame src=" scrolling="no" frameborder="0"> <frame src="a.html" name="myframe2"> <noframes> <body> <p> 对不起, 您的浏览器不支持框架 </p> </body> </noframes> 上面代码从原来的基础上做了部分修正, 首先在第一个 <frame> 中链接了 c.html 网页, 在 c.html 做了些链接, 并设置 target 为本网页设置好的 <frame> 名称, 图 9.14 所示为单击前的初始状态, 图 9.15 所示为分别单击两个链接后, 显示的最后结果在图 9.14 中, 在第 1 个框架中, 有两个链接, 而第 3 个和第 6 个框架为框架的默认状态如单击第 1 个框架中的第一行文本链接时, 在第 3 个框架中会显示链接后的效果, 同理, 当单击第 1 个框架中的第二行文本链接时, 在第 6 个框架中会显示出链接后的效果,

124 因为在 <frame> 标记中, 设置了 name 参数, 链接后的效果如图 9.15 所示图 9. 14 单击第一个文档的文字链接前状态图 9. 15 单击第一个文档的文字链接后状态技巧 : 现在的系统都用框架, 如邮箱进入后, 保持一个网页不动, 如网易邮箱中的页面进去后, 会自动播放音乐, 如发送邮件或收取邮件时, 就是应用到了框架 9.

15 124 因为在 <frame> 标记中, 设置了 name 参数, 链接后的效果如图 9.15 所示图单击第一个文档的文字链接前状态图单击第一个文档的文字链接后状态技巧 : 现在的系统都用框架, 如邮箱进入后, 保持一个网页不动, 如网易邮箱中的页面进去后, 会自动播放音乐, 如发送邮件或收取邮件时, 就是应用到了框架 9.6 小结本章介绍了框架的用法, 框架在网页中比较重要, 有时可以用来显示多个独立文档, 又要相互不影响, 可以显示多行多列, 通过 cols 和 rows 设置, 用 <frameset> 的属性设置框架的边框, 是否可调节框架的大小滚动条等, 在 <frameset> 中还可以包括 <iframe>, 显示文档还可以嵌入 HTML 文档, 用框架导航链接可以在一张网页中操作不同的网页页面最后通过实例来演示框架的知识点用法

A-2 l 跨裝置網頁設計 A-1 <frameset> <frame> <noframes> (frame) HTML (navigation bar)

A-2 l 跨裝置網頁設計 A-1 <frameset> <frame> <noframes> (frame) HTML (navigation bar) AppendixA HTML A-1 A-2 A-3 A-2 l 跨裝置網頁設計 A-1 (frame) HTML (navigation bar) HTML 框架元素 l A-3 1. 2. 3. 4.

Microsoft Word - 第9章 使用框架14.doc

Microsoft Word - 第9章使用框架14.doc