HTML（四）框架frameset和frame
框架
框架技术可以实现对静态页面的互相引用，提高静态页面的重用性，因为并不是所有的浏览器都能很好的支持，而且对搜索引擎可能也不是很友好，所以一般网页使用并不多，但是对一些管理系统而言，框架还是很实用的，因为管理系统的布局比较简单。每一个页面的效果都差不多，一般使用下面这种布局。
这个布局头部，菜单和尾部的内容都是不会变化的，经常变化的就是中间的操作页面，所有可以把头部，菜单和尾部以及主页分别使用四个页面设计，然后在定义一个框架页面进行引入即可。
1、frame页面
top.html
| <!doctype html> <head> <body bgcolor="#46D0DA"> |
leftmenu.html
| <!doctype html> <body bgcolor="#1D7A17"> |
footer.html
| <!doctype html> <body bgcolor="#940407"> |
main.html
| <!doctype html> <body bgcolor="#1461C8"> |
2、总页面frame.html
| <!doctype html> <html> <head> <meta charset="UTF-8"> <title>frame</title> <base href="<%=basePath%>"> </head> <frameset rows="20%,65%,*" border="1"> <frame src="top.html"> <frameset cols="25%,*"> <frame src="leftmenu.html"> <frame src="main.html" > </frameset> <frame src="footer.html"> </frameset><noframes></noframes> <body> </body> </html> |
效果如下：
3、在main中加载新页面
运行上面代码发现超链接是在新的窗口中打开了，如果需要在主框架中显示，要先给这个主框架定义name的属性，然后在修改leftmenu.html的超链接的target属性值，写上主框架的name的值，下面更改frame.html中的frameset代码如下：
| <frameset rows="20%,65%,*" border="1"> <frame src="top.html"> <frameset cols="25%,*"> <frame src="leftmenu.html"> <frame src="main.html" name="main"> </frameset> <frame src="footer.html"> </frameset> <body> |
补充register.html代码如下：
| <!doctype html> <body> |
然后在frame.html中点击注册效果如下：
投递XMind等公司10个岗位 >
