您现在的位置是：首页 > 前端学习 > Web前端Web前端

创建框架结构的页面（第十一章）(图文)

第十三双眼睛2020-02-24【Web前端】人已围观

简介框架指的是页面的一种布局，这种布局和之前说的表格布局和之后要学习的div+css布局不一样，那么具体框架是怎样的呢，事实上，框架布局也许缺少了一些灵活性，但是它的特点是可以将浏览器分隔成几个部分，这是其他标签无法做到的，本章的主要知识点如下：
1学习如何创建框架集
2掌握基本的页面布局
3通过一些属性修饰布局
4学习如何在框架内部实现页面连接及锚点连接
5创建浮动框架

创建窗口框架页面
有这样一种页面，导航栏放在左侧，右侧是页面主体，但是当浏览者单击左侧导航栏时，右侧的页面会刷新，但是，左侧导航栏部分仍然保持不变。
使用<frame>标签可以在页面中设置框架。当一个浏览器被分隔成多个框架的时候，这些框架放在一起，即称之为框架集。框架集的HTML标签为<frameset>也称之为框架结构标签，所以，如果要在框架中放入内容，采用的方式是通过引用页面中的路径，来加载对象。它的代码如下：
<frameset>
       <frame src="" />
       <frame src="" />
</frameset>
需要注意的是，部能将<frame>标签和body标签一起使用，原理上，因为框架集分隔的是浏览器，也就是说，框架集最少要有2个页面。所以，不存在只有一个页面的框架集，而且，框架集的作用是将多个页面同时展示在浏览器中，同样，也部存在包含框架的独立页面，正是因为这样，<frameset>标签不能放在body内部，这样做没有意义。
横向分隔窗口
窗口的分隔只能由两个方向，没有斜方向的分隔方法，使用row属性实现横向分隔窗口。代码如下所示；
<frameset rows="框架高度，框架高度...*">
其中，框架高度可以用像素也可以用百分比，*表示最后一个框架的高度，即生下来的最后一个，也就无需用数值来表示
例子：
横向分隔窗口的方法；
<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>横向分隔窗口的方法</title>
   </head>
   <frameset rows="40%,40%,*">
       <frame />
       <frame />
       <frame />
   </frameset>
</html>
纵向分隔窗口
另一种形式是纵向分隔窗口，当纵向分隔窗口的时候，使用的是cols属性。
例子：纵向分隔窗口
<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>纵向分隔窗口</title>
   </head>
   <frameset cols="40%,30%,*">
       <frame />
       <frame />
       <frame />
   </frameset>
</html>
框架的嵌套
框架的嵌套就是同时混合使用横向结构和纵向结构，即在分隔好的框架种进行新的窗口分隔，之后将这个框架替换成一个新的框架集，那么，写法上只要在<frameset>标签种放入<frameset>就可以了
<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>框架的嵌套</title>
   </head>
   <frameset cols="25%,*">
       <frame />
       <frameset rows="40%,*">
           <frame />
           <frame />
       </frameset>
   </frameset>
</html>
将页面放入到窗口框架中
将页面放入到窗口框架种，需要在每一个框架种通过路径的方式来添加页面。
例子：将页面放入到窗口中
<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>将页面放入到窗口种中</title>
   </head>
   <frameset rows="40%,*">
       <frame src="red.html"/>
       <frameset cols="50%,*">
           <frame src="green.html"/>
           <frame src="blue.html"/>
       </frameset>
   </frameset>
</html>
给无法处理框架的浏览器注释说明
<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>给无法支持框架的浏览器注释说明</title>
   </head>
   <body>
       <frameset cols="20%,40%,*">
           <frame />
           <frame />
           <frame />
           <noframes>
               <body>
                   抱歉，您的浏览器部支持框架
               </body>
           </noframes>
       </frameset>
   </body>
</html>
固定框架的位置
在frameset标签的框架集中，虽然框架的位置是按照实现设定好的出现在浏览器中，但是框架的边框并非是固定的，浏览者还是可以拖拽边框，框架的大小是可以随意改变的，若设计者希望固定框架的尺寸，可以使用<noresize>标签来定位框架的边框
例子：固定框架的边框
<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>固定框架的边框</title>
   </head>
   <frameset cols="40%,20%,*">
       <frame noresize="noresize"/>
       <frame noresize="noresize"/>
       <frame noresize="noresize"/>
   </frameset>
</html>
框架中设置滚动条
窗口框架中有个细节，当页面中的内容超过浏览器的大小时，此时框架中会显示出滚动条，这个滚动条也是可以设置的，通过scrolling来设置
<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>设置滚动条</title>
   </head>
   <frameset rows="40%,*">
       <frame src="red.html" scrolling="auto"/>
       <frameset cols="38.2%,*">
           <frame src="green.html" scrolling="yes"/>
           <frame src="blue.html" scrolling="no" />
       </frameset>
   </frameset>
</html>
atuo:根据页面的内容是否超出框架的范围，而决定是否超出滚动条，
no：不出现滚动条
yes：表示无论页面的内容有多邵，都出现滚动条

判定边框是否显示
框架的边框也是可以修改的，通过一些简单的属性加修饰，可以改变框架边框的表现形式，如边框的粗细，颜色，或者是边框的边距。
在有些情况下，灰色的边框会很麻烦，看上去把页面弄得支离破碎，使用属性frameborder可以决定是否显示边框。它的写法是：
<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title>框架</title>
   </head>
   <frameset cols="50%,*">
       <frame src="" frameborder="0"/>
       <frame src="" frameborder="0"/>
   </frameset>
</html>
改变边框的表现效果
border表示框架的边框，在这个属性上可以扩展出一些新的特性，如bordercolor,表示边框的颜色。
例子：
改变边框的效果
<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>改变边框的效果</title>
   </head>
   <frameset rows="30%,70%" border="40px" bordercolor="#090">
       <frame />
       <frame />
   </frameset>
</html>
边框的边距
边距是指框架页面内容离边框的距离。使用marginwidth属性设置左右两边的边距，使用marginheight属性设置上下两边的边距
例子：设置边框的边距
<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>设置边框的边距</title>
   </head>
   <frameset rows="30%,30%,*">
       <frame src="red.html" marginwidth="50px"/>
       <frame src="green.html" marginwidth="50px"/>
       <frameset cols="40%,*">
           <frame src="blue.html" marginheight="150px"/>
           <frame src="index.html" marginheight="50px" marginwidth="100px"/>
       </frameset>
   </frameset>
</html>
在指定的框架中打开连接
<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>列表页</title>
   </head>
   <body>
       <a href="red.html" target="main">red</a>
       <br />
       <br />
       <a href="green.html" target="main">green</a>
       <br />
       <br />
       <a href="blue.html" target="main">blue</a>
   </body>
</html>
框架内的锚点链接
使用frame属性还可以实现在框架内锚点链接，在框架集中设置页面路径的同时，指定锚点的位置
框架页
<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
   </head>
   <frameset cols="20%,*">
       <frame src="list.html" />
       <frame src="index.html" name="main"/>
   </frameset>
</html>

左侧列表页
<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>列表页</title>
   </head>
   <body>
       <a href="index.html#red" target="main">red</a>
       <br />
       <br />
       <a href="index.html#green" target="main">green</a>
       <br />
       <br />
       <a href="index.html#blue" target="main">blue</a>
   </body>
</html>

右侧主页
<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title>框架</title>
   </head>
   <body>
       <a href="#" name="red">red</a>
       <a href="#" name="green">green</a>
       <a href="#" name="blue">blue</a>
   </body>
</html>

灵活的<iframe>框架
<iframe>标签的用法不同于<frame>，在表现上页有不少差别，<iframe>创建的框架具有更好的灵活性，它可以容易的放在浏览器中任何地方，可以自由控制窗口的大小，这种框架又被成为是嵌入式框架，或者浮动框架。这种框架也是页面中常见的一种。常见的属性如下：
<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>创建浮动框架</title>
   </head>
   <body>
       <a href="http://www.baidu.com" target="three">百度</a>
       <a href="http://www.zhaoybbk.com" target="three">javastudy</a>
       <a href="http://www.51xjava.com" target="three">51xjava</a>
       <p></p>
       <iframe width="800" height="400" scrolling="auto" align="center" name="three">
   </body>
</html>

Tags：HTML 网页框架

很赞哦！ ()

上一篇：利用canvas绘制图形(第十章)(图文)

下一篇：CSS规则（第十二章）(图文)