第6章框架布局.ppt

框架布局 第六章-框架布局 提 纲 框架的概念 创建含有框架的HTML文档 框架格式化 浮动框架 6.1? 框架 框架使浏览器能够同时显示多个HTML文档 框架之间可以相互联系，触发一个框架中的事件可以改变另一个框架中的内容和行为。 6.1? 框架 6.2? 创建含有框架的HTML文档 基本框架标记：frameset 不使用body标记 cols属性：垂直框架 指定框架的宽度 rows属性：水平框架 指定框架的高度 frame标记：没有结束标记 定义单个框架中的显示内容及其外观样式 src属性 指定要显示的页面的 URL 单个标记，无需结尾 noframes标记 浏览器无法显示框架时，显示此标记中的内容 6.2? 创建含有框架的HTML文档 6.2? 创建含有框架的HTML文档 6.2? 创建含有框架的HTML文档 6.2? 创建含有框架的HTML文档 课堂练习 6.2? 创建含有框架的HTML文档 6.2? 创建含有框架的HTML文档 6.2? 创建含有框架的HTML文档 6.2? 创建含有框架的HTML文档 6.2? 创建含有框架的HTML文档 课堂练习 6.3? 框架格式化 6.3? 框架格式化 6.3? 框架格式化 6.3? 框架格式化 6.3? 框架格式化 6.4? 浮动框架 6.4? 浮动框架 小 结 课堂练习 在另一个固定部分 显示导航部分 在页面的一个固定部分显示徽标或静态信息 在此处显示主要内容。 站点中只有此部分是变化的。 example.html Frame1.html Frame2.html 多框架示例 html head title更多框架/title /head frameset cols=40%, 20%, 20%, 20% frame src=frame1.html frame src=frame2.html frame src=frame3.html frame src=frame4.html /frameset /html 多框架示例 html head title行框架示例/title /head frameset rows=20%, 40%, 40% frame src=frame1.html frame src=frame2.html frame src=frame3.html /frameset /html 弹性框架示例 html head title弹性框架2/title /head frameset rows=100, *, 2* frame src=frame1.html frame src=frame2.html frame src=frame3.html /frameset /html 框架集嵌套:frameset标记中嵌套使用另外一个frameset标记 框架目标 一个框架内的链接目标在另一个框架中显示 命名框架 frame标记的name属性 设置锚站目标 a中使用target属性设置 例如：a href= target = display 链接将在名为display的窗口中显示href属性指定的网站，如 果不存在该框架，则会打开一个新窗口。 框架目标 框架页面 定位页面 边框设置 框架边框的属性： frameborder:0表不要边框，1表示显示边框 border:设定边框宽度 bordercolor：设置边框颜色 frameset标记和frame标记中都可以使用 页白设置:框架边框到框架内容的空白区域 Marginweidth:控制左右页白 marginheight:控制上下页白 页白设置:框架边框到框架内容的空白区域 Marginweidth:控制左右页白 marginheight:控制上下页白 frameset rows=20%,* frame src=frame1.html frameset cols=*,*,* frame src=frame2.html marginwidth=0 marginheight=0 frame src=frame3.html marginwidth=20 marginheight=20 frame src=frame4.html marginwidth=20 marginheight=60 /frameset /frameset 大小设置 noresize属性:禁止浏览者调整框架的大小 如： frame src=ascent.jpg height=400 width=100% noresize 滚动设置：scrolling属性 yes:不管是否需要都使用滚动条 no:不使用滚动条 auto:根据需要显示滚动条 浮动框架:iframe