第6章框架布局-news.pptVIP

WS-NE30-3-01 03-* 北京清华万博网络技术股份有限公司版权所有 第6章 框架布局 王富强 2010.7.22 Msn/email:wfuqiang@ 本章目标 在学完本章时同学们应该 掌握框架的概念 掌握创建含有框架的html文档 框架格式化 浮动框架 6.1 框架的概念 框架的概念首先由Netscape公司于1995年提出，后W3C在html4.0 当中引入了框架的概念，当今框架已经成为网页设计的最常见的 布局方式 6.2 框架的使用 标记：frameset 格式：frameset cols=“70%”/frameset 在标记frameset中cols或rows的取值可以是像素、百分比、*号指定所占空间的百分比 作用：用于定义怎样将一个窗口划分为多个框架 Cols：列 Rows：行 frame标记 格式frame src=“url” 作用：标识框架的布局 备注：这是个单标记的标签 6.2 框架的使用 html head title基本框架/title /head frameset cols=20%,80% frame src=left.html frame src=right.html /frameset /html 6.2 框架的使用 标记：noframes/noframes 格式：noframes提示信息：抱歉你的浏览器不支持框架显示单，要查看请单击这里/noframes 作用：当浏览器不支持框架显示的时候，提示用户相应的信息 frameset cols=20%,80% noframes body 提示信息：抱歉你的浏览器不支持框架显示单，要查看请单击这里 /body /noframes frame src=left.html frame src=right.html /frameset 6.2 框架的使用 弹性框架 html head title弹性框架/title /head frameset cols=“100,*,* frame src=left.html frame src=right.html frame src=“center.html /html 6.2 框架的使用 框架嵌套 html head title框架嵌套/title /head frameset rows=20%,*,* frame src=frame1.html frame src=frame2.html frameset cols=30%,30% frame src=frame3.html frame src=frame4.html /frameset /frameset /html 6.2 框架的使用 弹性框架(续) html head title弹性框架/title /head frameset cols=“100,*,2* frame src=left.html frame src=right.html frame src=“center.html /html 备注：Center所占的比例为right的2倍 6.2 框架的使用 框架目标 在一个框架内的链接可以链接到另一个框架 实现框架目标需要注意 确保框架被命名 设置锚站目标 请看锚点演示实例display 6.3 框架格式化 框架边框 在默认情况下，大多数浏览器使用框架边框，控制框架边框 的属性主要有两个： 框架边框（frameborder）：设置框架边框、属性值有0和1 0表示不要边框 1表示要边框 边框（border）：以像素为单位设置边框宽度 设置边框颜色（bordercolor） 6.3 框架格式化 设置页白 属性：marginwidth 表示：框架内容距离左右边框的距离 单位：像素 属性：marginheight 表示：框架内容距离上下边框的距离 单位：像素 注意：这个框架作用在frame中 6.3 框架格式化 设置框架大小： 属性：noresize 注意：这个框架作用在frame中 6.3 框架格式化 滚动设置 属性：scrolling 值： Yes:表示一定有滚动条 No:表示一定不是用滚动条 Auto：表示自动 注意：这个框架作用在frame中 WS-NE30-3-01 03-* 北京清华万博网络技术股份有限公司版权所有