框架是网页中经常使用的页面设计方式，框架的作用就是把网页在一个浏览器窗口下分割成几个不同的区域，实现在一个浏览器窗口中显示多个HTML页面。使用框架可以非常方便的完成导航工作，让网站的结构更加清晰，而且各个框架之间决不存在干扰问题。利用框架最大的特点就是使网站的风格一致。通常把一个网站中页面相同的部分单独制作成一个页面，作为框架结构的一个子框架的内容给整个网站公用。
一个框架结构有两部分网页文件构成：
框架（Frame）：框架是浏览器窗口中的一个区域，它可以显示与浏览器窗口的其余部分中所显示内容无关的网页文件。
框架集（Frameset）：框架集也是一个网页文件，它将一个窗口通过行和列的方式分割成多个框架，框架的多少根据具体有多少网页来决定，每个框架中要显示的就是不同的网页文件。
一、创建框架
在创建框架集或使用框架前，通过选择“查看/可视化助理/框架边框”命令，使框架边框在文档窗口的设计视图中可见。
1、使用预制框架集
(1)、新建一个HTML文件，在快捷工具栏选择“布局”，单击 “框架”按钮，在弹出的下拉菜单中选择“顶部和嵌套的左侧框架”。
(2)、使用鼠标直接从框架的左侧边缘河上边缘向中间拖动，直至合适的位置，这样顶部和嵌套的左侧框架就完成了。
2、鼠标拖动创建框架
(1)、新建普通网页，命名后将其打开。
(2)、把鼠标放到框架边框上，出现双箭头光标时拖拽框架边框，可以垂直或水平分割网页。
二、保存框架
每一个框架都有一个框架名称，可以用默认的框架名称，也可以在属性面板修改名称，我们采用系统默认的框架名称topFrame（上方）、leftFrame（左侧）、mainFrame（右侧）。
选择菜单栏>文件>保存全部，将框架集保存为index.html，上方框架保存为07.html，左侧框架保存为08.html，右侧框架保存为09.html。
这个步骤虽然简单，但是很关键，只有将总框架集和各个框架保存在本地站点根目录下，才能保证浏览页面时显示正常。
三、编辑框架式网页
虽然框架式网页把屏幕分割成几个窗口，每个框架（窗口）中放置一个普通的网页，但是编辑框架式网页时，要把整个编辑窗口当作一个网页来编辑，插入的网页元素位于哪个框架，就保存在哪个框架的网页中。框架的大小可以随意修改。
1、 改变框架大小
用鼠标拖拽框架边框可随意改变框架大小。
2、 删除框架
用鼠标把框架边框拖拽到父框架的边框上，可删除框架。
3、设置框架属性
设置框架属性时，必须先选中框架。选择框架方法如下：
选择菜单栏>窗口>框架，打开框架面板，单击某个框架，即可选中该框架。
在编辑窗口某个框架内按住Alt键并单击鼠标，即可选择该框架。当一个框架被选择时，它的边框带有点线轮廓
3.1、设置框架属性
选中框架，在属性面板上可以设置框架属性：框架名称、源文件、空白边距、滚动条、重置大小和边框属性等。
需要注意的是：1、框架是不可以合并的。2、在创建链接时要用到框架名称，所以我们要很清楚的知道每个框架对应的框架名。
四、在框架中使用超级链接
在框架式网页中制作超级链接时，一定要设置链接的目标属性，为链接的目标文档指定显示窗口。链接目标较远（其他网站）时，一般放在新窗口，在导航条上创建链接时，一般将目标文档放在另一个框架中显示（当页面较小时）或全屏幕显示（当页面较大时）。
“目标”下拉菜单中的选项：
* _blank 放在新窗口中。
* _parent 放到父框架集或包含该链接的框架窗口中。
* _self 放在相同窗口中（默认窗口无须指定）。
* _top 放到整个浏览器窗口并删除所有框架。
在我们保存有框架名为mainFrame、leftFrame、topFrame的框架后，在目标下拉菜单中，还会出现mainFrame、leftFrame、topFrame选项：
* mainFrame 放到名为mainFrame的框架中。
* leftFrame 放到名为leftFrame的框架中。
* topFrame放到名为topFrame的框架中。
五、制作框架页面
1、选择菜单栏>窗口>框架，打开框架面板，选中整个框架集。
在属性面板中，将行的值设置为100，单位为像素。
2、选择菜单栏>窗口>框架，打开框架面板，选中子框架集。
在属性面板中，将列的值设置为200，单位为像素
这样，我们就完成了对整个框架的布局。下面我们来布局各个框架页面。
3、鼠标在topFrame框架中的空白处点击一下，我们会看见文档窗口上方的文件名变为了07.html。在页面属性中将上、下、左。右边距全部设为0。
插入一个1行2列的表格，宽度为100％，高度为100px，左单元格宽度为382px并插入背景图片img/103.jpg，设置表格的背景颜色为103.jpg图片右边缘的绿色（用吸管吸取）。
4、鼠标在leftFrame框架中的空白处点击一下，我们会看见文档窗口上方的文件名变为了08.html，在页面属性中将上、下、左。右边距全部设为0。
插入一个6行1列 的表格，表格宽度为95％，居中对齐。将第一个单元格的高度设为20px，选中其余单元格将高度设置为50px。分别输入文字设置导航栏目。
分别对各个导航栏目建立链接关系，链接路径指向要链接到的网页，目标选择mainFrame框架。
5、鼠标在mainFrame框架中的空白处点击一下，我们会看见文档窗口上方的文件名变为了09.html，在页面属性中将上、下、左。右边距全部设为0。
自己设置一个欢迎页面。
框架网站的具体布局制作
框架可以生成独立变化和滚动的窗口，从而能将一个窗口分割为若干个字窗口。在每一个字窗口中显示一个HTML文档。我们这回就来看看多文档的基本结构和子窗口之间的交叉链接。
一，基本结构HTML使用<Frameset>,<Frame>和<noFrames>标签来定义框架。下面我们就来了解一下这三个标签的作用和相应的属性。
（一），<Frameset>标签。
该标签是框架设计标签，成对使用。首尾标签之间的内容就是使用到框架的HTML主体部分。在使用框架的HTML文档中不能出现<body>标签，否则会导致浏览器忽略所有的框定义而只显示<body>和</body>之间的内容。
<Frameset>标签作用是将窗口分割为若干个自窗口，子窗口的数目取决于嵌套在该标签中<Frame>标签的书目。<Frameset>标签有两个属性。rows和cols，分别用来确定个子窗口的高度和宽度，格式为<Frameset
rows="值1,值2,……值n">;<Framest cols="值1,值2,……值n">.各参数之间以逗号分割，依次表示各个自窗口的高度（宽度）。这两个属性的参数值可以是数字、百分数或符号“*”。下面我们来分别解释一下：
（1）数字。表示子窗口高度（宽度）所占的像素点数。
（2）百分数。表示子窗口高度（宽度）占整个浏览器窗口高度（宽度）的百分比。
（3）符号“*”。当符号*只出现一次。即其他子窗口的大小都有明确的定义时，表示该子窗口的大小将根据浏览器窗口的大小而自动调整。当符号*出现一次以上时，表示按比例分割浏览器窗口的剩余空间。例如：
<Frameset cols="40%,2*,*">表示将浏览器窗口分割为3列，第一个子窗口在第一列，窗口宽度为整个浏览器窗口宽度的40%；第二个子窗口在第二列，占浏览器窗口剩余空间的2/3，即其宽度为整个浏览器窗口宽度的40%，第三个子窗口占剩余空间的1/3，宽度为整个浏览浏览器窗口宽度的20%。
（二），<frame>标签。HTML用<frame>标签来标识子窗口。<frame>标签是嵌套在框架设置标签<Frameset>标签中来使用的单独标签。在<Frameset>中定义了多少个子窗口就要有多少个<frame>标签与之匹配，依次定义各个窗口的性质。<frame>标签有7个属性，除SRC属性是不可缺省的外，其他属性都是可选的。
（1）SRC属性。用以定义子窗口的名称。
（2）.name属性。用于定义子窗口的名称。
（3）frameboder属性。该属性的参数值为1或0。当参数值为1时，表示该子窗口有边框，为0时没有边框。该属性缺省值为1。
（4）bordercolor属性。用以规定子窗口的边框颜色。如果在一个以上的<frame>标签中定义了子窗口的边框颜色，则以第一次指定的颜色为标准。在指定边框颜色时，可以使用颜色的RBG代码或直接使用与该颜色想对应的英文单词。bordercolor属性的参数值可以是16种颜色中的任意一种。
（5）sclling属性。属性的参数值为yes,no或auto之一。参数值为yes时表示该子窗口始终有滚动条。为no时是始终没有滚动条。为auto时表示当文档的内容超出窗口范围时，浏览器自动为该子窗口添加滚动条。scolling属性的缺省值为auto.
（6）maginwidth和marginwidht属性。这两个属性是用来指定显示内容与窗口边界之间的空白距离大小的。其中maginwidth属性用于确定显示内容与左右边界之间的距离；maginwidht用来确定显示内容与上下边界之间的距离。这两个属性的参数值都是数字。分别表示左右边距所占的像素点数。
（三），<noframes>标签。使用该标签可以在用户浏览器不支持框架显示时告之用户一些相关信息，以免浏览者对空白窗口画面感觉莫名其妙。<noframes>标签是成对使用的。首尾标签之间的内容就上告之浏览者的信息。如“如您看到空白的画面说明您的浏览不支持框架显示”。虽然常用的两中浏览器IE和NC都是支持框架显示的。但为了加强文档的适用性，我们最好还是养成使用这个标签的习惯。
（四），基本结构。
我们举例说明HTML中框架文档的基本结构：
<html>
<head>
<title>文档标题</title>
</head>
<Frameset
Cols="值1,值2,……,值n>将浏览器窗口分割为n个窗口。
<Frame SRC="1.html">
<frame SRC="2.html">
.
.
.
<frame
SRC="n.html">
</Frameset>
<noframes>如果您看到空白的画面，说明您的浏览器是不支持框架机构的</noframes>
</html>
其中，<frameset>标签是可以嵌套使用的，也就是说，可以将其中某一个或几个子窗口划分为若干个更小的窗口。例如：
<html>
<Frameset cols="30%,90,*">
<frame
SRC="1.html"name=cont>
<frame SRC="caipage.gif">
<frame
SRC="2.html">
</frameset>
<frame SRC="f2.html"name=another
marginheight=120>
</frameset>
<noframes>您使用的浏览器不支持框架</noframes>
</html>
二，目标窗口的交叉链接。
为了方便用户进行搜索和浏览，我们经常用到一系列锚标组成的索引目录显示在一个子窗口中，而将锚标所指向的内容放在另一个子窗口中。显示锚标的子窗口通常被成为”源窗口“，显示目标文档的窗口则称之为“目标窗口”。
在进行交叉连接时，我们必须先用<frame>标签的name属性定义目标窗口的名称，然后再修改显示在源窗口中的文档。在所有的<A>标签中添加语句target="目标窗口名称"来指定目标文档的显示位置。例如：
<html>
<head>
<title>目标窗口测试页</title>
</head>
<frameset cols="30%,90,*">
<frame
src='f1.html"marginheight=60>
<frameset rows="120,*">
<frame src="caipage.gif">
<frame src="2.html">
</frameset>
<frame src="f2.html"name=another marginheight=60>
</frameset>
<noframes>您的浏览器不支持框架结构</noframes>
其中，第一个子窗口是源窗口。我们在源窗口的对应文档f1.html中定义了一系列锚标，该文档的内容如下：
<html>
<body>
<<center>（说明：文档主体内容举重显示
<P><A href="田园风光.jpg"target="another">田园风光</A><P>
<A href="qiu.jpg"target="another">金色秋天</A><P>
<A href="tong.html"target="another">渔哥唱晚</A><P>
<A
href="pig.gif"target="another">夕阳无限</A><P>
</body>
</html>
当用户点击锚标“田园风光”后，浏览器将在目标文档显示锚标的连接对象