Download presentation
Presentation is loading. Please wait.
1
网 站 设 计 与 建 设 Website design and developments
2
第三部分 第12章 HTML框架与页面结构
3
12．1 HTML框架与框架组合 <frame>，它是一个单标记。
网页结构的布局手段：表、框架 增加网页的可读性、可用性 在框架中，可以创建彼此独立移动的页面区域，表格实现不了该功能。 框架可以组合静态信息和动态信息 <frame>，它是一个单标记。 <frame>标记定义在每一个链接内显示的内容，它必须存在于<frameset>标记中。 一个<frameset>标记中可以包含多个<frame>标记
4
②<frameset>标记中必须指定rows属性或cols属性，但这两个属性不能同时指定。
①<frameset>标记必须紧跟</head>标记之后，也就是说一个HTML文件中如果包含框架组合的话，其说明的位置必须在HTML文件的头部说明之后，而且必须在<body>标记之前。 ②<frameset>标记中必须指定rows属性或cols属性，但这两个属性不能同时指定。 NOFRAME: 必须使用BODY标记符。
5
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>在HTML中创建“行”框架组合</title> </head> <frameset rows="50%, 50%"> <frame src="sample-1301-a.htm"> <frame src="sample-1301-b.htm"> </frameset> <noframes> <body> 本网页使用框架，但你的浏览器不支持，特告知。 </body> </noframes> </html>
6
创建一个“列”框架组合 <html> <head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>在HTML中创建“列”框架组合</title> </head> <frameset cols="25%, 75%"> <frame src="sample-1301-a.htm"> <frame src="sample-1301-b.htm"> </frameset> <noframes> <body> 本网页使用框架，但你的浏览器不支持，特告知。 </body> </noframes> </html>
7
<frameset cols=”30%,*” border=20>
<frame>中的scrolling属性有三种取值：yes、no和auto
8
①如果是引用的某个确定的URL，那么这个URL必须完整，必须要指定传输协议。
在对src属性进行设置时需要注意两点： ①如果是引用的某个确定的URL，那么这个URL必须完整，必须要指定传输协议。 src= ②如果引用的是本地的某个文件，那么这个文件的存储路径和文件名必须正确。
9
框架属性 FRAMEBORDER：设置边框宽度像素数(HTML4,MS),0无框
BORDER: 设置边框宽度像素数(Netscape)，0无框 NORESIZE: 禁止访问者调整框架的大小 FRAMESPACING: 控制框架间的总间距(IE) SCROLLING: 滚动条设置，YES、NO、AUTO MARGINHEIGHT: 设置框架的上下边界像素数 MARGINWIDTH: 设置框架的左右边界像素数 BORDERCOLOR: 设置边框的颜色
10
框架窗口的互操作 网页文件 13.html <html> <head> <</head>
<frameset cols="25%, 75%"> <frame src="nav.htm"> <frame src="main.htm"> </frameset> <noframes> <body> 本网页使用框架技术，但你的浏览器不支持。 </body> </noframes> </html>
11
nav.html 文件: <title>sample-1305-nav.htm</title> </head> <body> <p> <a href="ruanjian.htm" >计算机软件研究所</a> <br> <a href="yingyong.htm" >计算机应用研究所</a><br> <a href="xitong.htm" >计算机系统结构研究所 </a> </p> </body> </html> ruanjian.htm 文件: aaaaaaaaaaaaaaaaaaaaaaaaaaa
13
创建定位的超级链接 <html> <head> </head>
<frameset cols="25%, 75%"> <frame src="sample-1305-nav.htm" NAME="nav"> <frame src="sample-1305-main.htm" NAME="main"> </frameset> <noframes> <body> 本网页使用框架，但你的浏览器不支持。 </body> </noframes> </html>
14
Return <html> <head> </head> <body> <p>
nav.html 文件: <html> <head> </head> <body> <p> <a href="ruanjian.htm" TARGET="main">计算机软件研究所</a> <br> <a href="yingyong.htm" TARGET="main">计算机应用研究所</a><br> <a href="xitong.htm" TARGET="main">计算机系统结构研究所 </a> </p> </body> </html> Return
15
用<BASE>标记符的Targeting链接
<html> <head> <BASE target="main"> </head> <body> <p> <a href="sample-1303-ruanjian.htm" >计算机软件研究所</a> <br> <a href="sample-1303-yingyong.htm" >计算机应用研究所</a><br> <a href="sample-1303-xitong.htm" >计算机系统结构研究所 </a> </p> </body> </html>
16
<html> <head> <<BASE target="main"> </head> <body> <p> <a href="sample-1303-ruanjian.htm" >计算机软件研究所</a> <br> <a href="sample-1303-yingyong.htm" >计算机应用研究所</a><br> <a href="sample-1303-xitong.htm" >计算机系统结构研究所 </a> <br> <a href=" target="_top">山东大学</a> <!-- 在顶级窗口显示该网页--><br> <a href=" target="_blank"> <IMG SRC="sdu.jpg" border="0"></a><!-- 在一个新窗口显示该网页--> </p> </body> </html>
17
框架嵌套 <html> <head> </head>
<frameset cols="28%,72%"> <frame src="nav.htm" NAME="nav"> <FRAMESET ROWS="30%,70%"> <FRAME SRC="head.htm" NAME="head"> <frame src="main.htm" NAME="main"> </FRAMESET> </frameset> <noframes> <body> 本网页使用框架，但你的浏览器不支持。 </body> </noframes> </html>
18
思考题： 12.1 框架中常用的标记有哪些？它们的作用分别是什么？ 12.2 框架在页面设计中有什么作用？
Similar presentations
