HTML框架的基本结构
在一个网页中，并不是所有的内容都需要改变，如网页的导航栏、网页页脚等部分是不需要改变的，如果在每一个网页中都重复添加这些元素，不仅会浪费时间，而且在浏览时也会带来不便、耗费更多的时间，为了解决这种问题，我们可以使用框架来对网页进行布局。
本节单词记忆：标签 1.frameset 2.frame 属性 1.size 4.bordercolor 5.frameborder
网页学习网提示：htmlhtml网页边框代码语言非常简单，不需要逻辑理解，而绝大部分朋友觉得它难以掌握，90%的原因在于英语单词不过关，所以每节记忆几个单词是非常有必要的。
使用框架可以把浏览器窗口划分为多个区域，每个区域可以显示不同的网页，每次浏览者在访问框架页面时，只下载框架页面中变化的区域，对于不变的区域，不用重新下载，从而给浏览者带来方便、节省下载页面所需的时间。
一个框架结构是由以下两部分组成的：
框架(FRAME)：是浏览器窗口中的一个区域，它可以显示与浏览器窗口其余部分中所显示内容无关的网页文件。
框架集( FRAMESET)：是一个网页文件，它将一个窗口通过横向或纵向的方式分割成多个框架，每个框架中要显示的都是不同的网页文件。不同的网页文件可以通过超链接联系起来。
如图1所示就是一个比较经典的框架集页面。此页面一共有3个区域，每个区域分别显示一个HTML文档，由于框架集页面也是一个HTML文档，所以一共有4个HTML文件。为了浏览方便，当浏览者单击左侧导航栏中的服务列表（如“注册&认证”、“买家帮助”等）超链接时，右侧窗口显示相应的详细帮助信息。

图1 框架集页面
一、为何使用框架
一个网页可以有一个或多个框架。框架的一些用法如下：
● 在页面的一个固定部分显示Logo或静态信息。
● 左侧框架显示目录，右侧框架显示内容，用户只需单击左侧窗口的目录，在右侧窗口中就会显示相应内容，如网上在线学习教程、论坛、后台管理、产品介绍等。
● 框架能有机地把多个页面组合在一起，这多个页面之间可互相独立，却又可相互联系。
二、框架的基本结构
框架集( FRAMESET)页面的结构是通过属性rows和cols来设置的，根据框架的分割方式可分为：上下分割窗口（使用rows属性来分割），左右分割窗口（使用cols属性来分割），嵌套分割窗口（同时使用rows和cols属性来分割）。WANGYEXX.COM
语法:
<frameset cols="25%,50%,*" rows ="50%,*" border="5"> 

    <frame src=“the_first.html ">
    ……
</frameset>
 
说明：FRAMESET仅是一个框架的集合。FRAME标签可以提供对单独HTML文档URL引用，其中每个HTML文档占据一个框架。cols将 页面沿垂直方向分割为几个窗口，cols可以取多个值，不同的值用逗号隔开，单位可以是像素，也可以是占浏览器的百分比。rows将页面沿水平方向分割为 几个窗口，也可以取多个值，是由逗号分割的像素值或百分比。src指定框架窗口的源文件。
示例1:
<HTML>
<HEAD>
<TITLE>rows框架</TITLE>
</HEAD>
<FRAMESET bordercolor="red" rows="25%,50%,*" border="5" >
 <!--bordercolor="red"设置框架边框为红-->
 <FRAME name="top" src="the_first.html">
 <FRAME name="middle" src="the_second.html">
 <FRAME name="bottom" src="the_third.html">
</FRAMESET>
</HTML>
示例1在浏览器中预览效果如图2所示。

图2 水平方向分割为上中下3个窗口
示例2:
<HTML>
<HEAD>
<TITLE>cols框架</TITLE>
</HEAD>
<FRAMESET cols="120,*" border="5">
  <FRAME src="the_first.html" name="topFrame">
  <FRAME src="the_second.html" name="mainFrame" scrolling="NO" noresize>
  <!--scrolling="NO"不显示滚动条 noresize禁止改变窗口大小-->
</FRAMESET>
</HTML>
 示例2在浏览器中预览效果为两个窗口左右分割，而左边的窗口固定宽度120px。
三、如何创建多个复杂的窗口
前面的示例1和示例2要么是水平分割，要么是垂直分割，如果要实现如图1所示的框架集页面，那怎么实现？
经分析，首先将页面分割为上下两部分，上部分的高度占浏览器高度的30%左右。然后将下面部分分割成左右两部分，宽度大约分别占窗口的20%和 80%。注意对其中的一个框架窗口再次分割时，需要使用<FRAMESET>标签代替<FRAME>标签。下面我们就一步一步地 实现如图1所示的框架集页面。
第一步：创建或直接提供如图1所示的top窗口中所显示的页面文档top.html。
第二步：创建或直接提供如图1所示的left窗口中所显示的页面文档left.html。
第三步：创建或直接提供如图1所示的right窗口中所显示的页面文档right.html。
第四步：手写如示例3中的代码，然后保存为frame_Sets.html文件。
示例3:
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=gb2312" />
<TITLE>创建多框架页面</TITLE>
</HEAD>
<FRAMESET rows="20%,*"  frameborder="no" border="0" framespacing="0">
  <FRAME src="top.html" name="topFrame" scrolling="No" noresize="noresize" id="topFrame" title="topFrame" />
  <FRAMESET  cols="20%,*" framespacing="0" frameborder="no" border="0">
    <FRAME src="left.html" name="leftFrame" scrolling="No" noresize="noresize"  />
    <FRAME src="main.html" name="rightFrame"  />
  </FRAMESET>
</FRAMESET>
</HTML>
示例4在浏览器中预览效果如图1所示。
本节作业：
制作如图1复杂框架网页。
注意事项：
1.掌握框架的基本结构。
2.注意框架结构的网页不能只有一个网页，一点还要存在<FRAME>标签src属性指定的网页。
网页学习网提示：光看教程是无法让你掌握HTML知识，最好是完成作业后才进入下一次教程，动起手来吧！
点击下载第三章案例及作业资源 返回《HTML入门经典》教程列表
转载请注明本文地址:www.wangyexx/html/jc/505.html

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。