第九章 使用框架结构
9.1 框架的基本概念
框架是浏览器窗口中的一个区域，它可以显示与浏览器窗口的其余部分中所显示的内容无关的HTML文档
框架集是HTML文件，它定义一组框架的布局和属性，包括框架的数目、框架的大小和位置，以及在每个框架中初始显示的页面的URL。框架集文件本身不包含要在浏览器中显示的HTML内容，但noframes部分除外。框架集文件只是向浏览器提供应如何显示一组框架以及这些框架中应显示哪些文档的有关信息。
框架结构是将两个或两个以上的网页组合起来，在同一个窗口中打开的网页结构。框架把一个网页分成几个单独的区域，每个区域为一个单独的HTML文件。显示时每个区域像一个单独的网页，可以有自己的滚动条、背景、标题等。
框架最常用的用途就是导航。一组框架通常包括一个含有导航条的框架和另一个显示主要内容的框架。
9.2 设置框架集的属性 frameset
框架页面的结构是在框架集中设置的，可以根据框架的分割方式分为水平分割窗口、垂直分割窗口和嵌套分割窗口
9.2.1 水平分割窗口 rows
水平分割窗口是将页面沿水平方向切割，也就是将页面分成上下排列的多个窗口。
语法：
<frameset rows="框架窗口的高度,框架窗口的高度,......">
<frame>
<frame>
......
</frameset>说明：rows中可以取多个值，它由逗号分割的像素值或百分比组成.
该标签位于head和body中间
框架窗口高度写了几个值，就从上到下，分为几个部分
eg:
<html>
<head>
<meta charset="UTF-8">
<title>水平分割窗口 rows</title>
</head>
<frameset rows="40%,40%" frameborder="yes" border="1" framespacing="1"> <!--一系列属性后面讲解-->
<frame src="top.html" name="mainFrame" id="mainFrame" />
<frame src="foot.html" name="bottomFrame" scrolling="no" noresize="noresize" id="bottomFrame" />
</frameset>
<noframes>
<body>
</body>
</noframes>
</html>
运行结果：
9.2.2 垂直分割窗口 cols
cols属性指定了垂直框架的布局方法，将页面沿垂直方向分割成多个窗口，由一组由逗号分隔的像素值、百分比或相对度量值组成列表。
语法：
<frameset cols="框架窗口的宽度,框架窗口的宽度,......">
<frame>
<frame>
......
</frameset>说明：cols垂直分割，每个值代表框架窗口水平宽度,单位可以是像素，也可以是占浏览器的百分比
写几个宽度值，窗口被垂直划分为几部分
eg：
<html>
<head>
<meta charset="UTF-8">
<title>水平分割窗口 rows</title>
</head>
<frameset cols="391,165,214" frameborder="yes" border="5" framespacing="0">
<frame src="left.html" name="leftFrame" id="leftFrame" />
<frame src="left1.html">
<frame src="right.html" name="mainFrame" id="mainFrame" />
</frameset>
<noframes>
<body>
</body>
</noframes>
</html>
<html><!--left.html left1和right也一样 除了输出汉字不同-->
<head>
<meta charset="UTF-8">
<title>left</title>
</head>
<body>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<p align="center">
<font face="宋体" size="20" color="green"><b>框架窗口左</b></font>
</p>
</body>
</html>
运行结果：
9.2.3 嵌套分割窗口
在一个页面中既有水平分割框架，又有垂直分割框架
语法：
<frameset rows="框架窗口高度,框架窗口高度,......" cols="框架窗口宽度,框架窗口宽度,......"><!--等等类似结构-->
<frame>
<frameset cols="框架窗口宽度,框架窗口宽度,......">
<frame>
<frame>
......
</frameset>
</frameset>eg:
<html>
<head>
<meta charset="UTF-8">
<title>嵌套分割 rows</title>
</head>
<frameset rows="80,*" cols="*">
<frame src="3.1top.html" name="topFrame" scrolling="no" id="topFrame" noresize=“noresize”/>
<frameset cols="80,*">
<frame src="3.2left.html" name="leftFrame" scrolling="no" id="leftFrame" noresize=“noresize”/>
<frame src="3.3right.html" name="mainframe" id="mainframe" />
</frameset>
</frameset>
<noframes>
<body>
</body>
</noframes>
</html>
运行结果：
9.2.4 框架的边框 frameborder
默认情况下，浏览器总是给每一个框架结构加上一条有明显宽度的边框，通过frameborder可以控制边框的显示或隐藏
语法：<frameset frameborder="是否显示">
说明：frameborder的取值只能为0、1 ，或者yes、no。0或no隐藏边框；1或yes，显示边框。
在frameset中设置对整个框架有效，在frame中设置则只对当前框架有效
eg:
<html>
<head>
<meta charset="UTF-8">
<title>框架边框 rows</title>
</head>
<frameset rows="20%,*,20%" frameborder="1" border="10" framespacing="0" > <!--框架窗口宽度都设为10了-->
<frame src="4.1top.html" name="topFrame" id="topFrame"/>
<frame src="4.1top.html" name="topFrame" id="topFrame"/>
<frame src="4.2foot.html" name="bottomFrame" id="bottomFrame"/>
</frameset>
<noframes>
<body>
</body>
</noframes>
</html>运行结果：
设置好的框架窗口大小是可以用鼠标调节的
9.2.5 框架的边框宽度 border（framespacing）
默认情况下框架边框宽度是1，通过framespacing或者border可以调整边框宽度
语法：<frameset border="边框宽度" framespacing="边框宽度">
说明：
边框宽度指页面中各个边框之间的线条宽度，以像素为单位。边框宽度只能对框架集使用，对单个框架无效。border和framespacing都是用来设置边框宽度的，不过google浏览器中似乎只有border属性有效，
建议使用属性border 或者两个一起使用
eg:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<frameset rows="80,*" cols="*" frameborder="yes" border="10">
<frame src="top.html" name="topFrame" scrolling="no" noresize="noresize" id="topframe" />
<frameset cols="80,*" frameborder="yes" border="5">
<frame src="left.html" name="leftframe" scrolling="no" noresize="noresize" id="leftframe" />
<frame src="right.html" name="mainframe" id="mainframe" />
</frameset>
</frameset>
<noframes>
<body>
</body>
</noframes>
</html>
<top.html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p align="center">
<font face="华文行楷" size="5">框架top</font>
</p>
</body>
</html>
运行结果：
（临时有事来了下windows，HBuilder实在太强大了，且windows下google浏览器什么字体都能显示出来，刚转ubuntu环境，还不是很熟悉呀）
9.2.6 框架的边框颜色 bordercolor
语法：<frame bordercolor="边框颜色">
eg:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<frameset rows="80,*" cols="*" frameborder="yes" border="10" bordercolor="red">
<frame src="top.html" name="topFrame" scrolling="no" noresize="noresize" id="topframe" />
<frameset cols="80,*" frameborder="yes" border="5" bordercolor="black">
<frame src="left.html" name="leftframe" scrolling="no" noresize="noresize" id="leftframe" />
<frame src="right.html" name="mainframe" id="mainframe" />
</frameset>
</frameset>
<noframes>
<body>
</body>
</noframes>
</html>
运行结果：
9.3 设置窗口属性 frame
<frame>用来定义每一个单独的框架页面，框架页面的属性设置都在<frame>标签里进行
9.3.1 页面源文件 src
框架结构中每一个页面都是一个单独的文件，这些文件都是通过src来指定一个初始文件地址
语法：<frame src="页面源文件地址">
说明:页面源文件可以是一个网页文件，也可以是一张图片，地址类型可以是相对地址，绝对地址或带有锚点链接的地址
eg:网页文件前面用过不知多少遍了，试试普通文件
eg:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<frameset rows="80,*" cols="*" frameborder="yes" border="10" bordercolor="red">
<frame src="pal4.bmp" name="topFrame" scrolling="no" noresize="noresize" id="topframe" />
<frameset cols="80,*" frameborder="yes" border="5" bordercolor="black">
<frame src="小红帽.swf" name="leftframe" scrolling="no" noresize="noresize" id="leftframe" />
<frame src="lxy.mp3" name="mainframe" id="mainframe" />
</frameset>
</frameset>
<noframes>
<body>
</body>
</noframes>
</html>
运行结果：
mp3音乐自动播放，bmp图和swf动画自动下载
9.3.2 页面名称name
页面名称是为了便于页面的查找和链接所提供的一个属性。例如一个左右框架结构，左侧为链接，右侧为正文，当单击左侧链接以后要在右侧框架中打开正文，此时就需要用到<frame>的name属性。
语法：<frame src="页面文件地址" name="页面名称">
说明:框架的页面名称中不允许包含特殊字符、连字符、空格等，必须是单个的单词或者字母组合。
前面基本上网页都写了name
9.3.3 禁止调整窗口的尺寸 noresize
每个框架都有其固定的宽度和高度，可以通过拖动边框进行调整。（前面9.2.4）noresize属性可以禁止改变框架尺寸。
语法:<frame src="页面源文件地址" noresize>
说明：noresize没有属性值，添加该属性后就不能拖动边框，反之无需指定此属性
eg:
<html>
<head>
<meta charset="UTF-8">
<title>水平分割窗口 rows</title>
</head>
<frameset cols="391,165,214" frameborder="yes" border="5" framespacing="0" noresize>
<frame src="2.1left.html" name="leftFrame" id="leftFrame" />
<frame src="2.2left1.html">
<frame src="2.3right.html" name="mainFrame" id="mainFrame" />
</frameset>
<noframes>
<body>
</body>
</noframes>
</html>
运行结果：
已无法拖动而改变框架大小
9.3.4 边框与页面内容的水平边距 marginwidth
设置框架边框与页面内容的水平边距
语法：<frame src="页面源文件地址" marginwidth="水平边距">
说明：水平边距用于设置页面左右边缘与框架边框的距离
eg:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<frameset rows="*" cols="209,*" frameborder="yes" border="1">
<frame src="left1.html" name="leftframe" noresize />
<frame src="right1.html" name="manframe" marginwidth="50" />
</frameset>
<body>
</body>
</html>
<!--left1.html-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<table width="500" border="0" align="center" cellpadding="5" cellspacing="1">
<tr>
<td><a href="right1.html#1">商品名称</a></td>
</tr>
<tr>
<td><a href="right1.html#2">产品特点</a></td>
</tr>
<tr>
<td><a href="right1.html#3">产品规格</a></td>
</tr>
</table>
</body>
</html>
<!--right1.html-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<table width="500" border="0">
<tr>
<td colspan="3">
<!--锚点1-->
<p><a name="1"></a><font color="red">商品名称:</font></p>
<P>彩音盒</P>
<!--锚点2-->
<p><a name="2"></a><font color="red">产品特点:</font></p>
<p> 65536色全彩色OLED显示<br>
容量 128MB/256MB/512/MB/1GB(内置)<br>
<!--锚点3-->
<p><a name="3"></a><font color="red">产品规格:</font></p>
<p>
Type-C高速数据端口、读卡器<br>
支持1G、2G、4G独立显卡<br>
支持动作回馈式VR（虚拟现实）应用（8G 独显）<br>
</p>
</td>
</tr>
</table>
</body>
</html>
运行结果：
9.3.5 边框与页面内容的垂直边距 marginheight
设置边框与页面内容的垂直边距
语法：<frame src=页面源文件地址" marginheight="垂直边距">
说明：垂直边距用来设置页面上、下边缘与框架边框的距离
eg:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<frameset rows="*" cols="209,*" frameborder="yes" border="1">
<frame src="left1.html" name="leftframe" noresize />
<frame src="right1.html" name="manframe" marginheight="50" />
</frameset>
<body>
</body>
</html>
同上marginwidth 只是把marginwidth改成了marginheight
运行结果：
左边距没有了，上边距50出现了
9.3.6 控制框架滚动条显示scrolling
一个框架的页面内容常常会超出整个框架的尺寸范围，在默认情况下，浏览器会在右侧或者下方显示滚动条，以便浏览者拖动查看全部内容。但有时希望不显示滚动条，可以通过scrolling属性自由控制滚动条的显示。
语法：<frame src="页面源文件地址" scrolling="是否显示滚动条">
说明：scrolling的取值包含yes,no或auto。yes指一直显示滚动条，no表示无论如何也不显示滚动条，auto就是默认情况，内容太长时显示滚动条
eg:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<frameset rows="*" cols="209,*" frameborder="yes" border="1">
<frame src="left1.html" name="leftframe" scrolling="no" noresize/>
<frame src="right1.html" name="manframe" marginheight="50" />
</frameset>
<body>
</body>
</html>
运行结果：
左边滚动条消失
9.3.7 不支持框架标签 noframes
如果遇到不支持框架结构的浏览器，或者用户关闭了浏览器的框架显示功能，此时就需要用<noframes>来设置替换内容，告诉浏览者其浏览器无法打开框架页面
语法：<noframes>替换显示内容</noframes>
eg:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<frameset rows="*" cols="209,*" frameborder="yes" border="1">
<frame src="left1.html" name="leftframe" scrolling="no" noresize/>
<frame src="right1.html" name="manframe" marginheight="50" />
</frameset>
<noframes>
<b>对不起，您的浏览器不支持框架效果!</b>
</noframes>
</html>
框架集合定义一组框架的布局和属性，可以没有body,真正的内容在框架源文件里。
<b>对不起，您的浏览器不支持框架效果!</b>便是出错时页面显示的内容9.4 浮动框架 iframe
浮动框架是一种较为特殊的框架，它是在浏览器窗口中嵌套的子窗口，整个页面并不一定是框架页面，但是要包含一个框架窗口。<iframe>框架可以完全由设计者定义宽度和高度，并且可以放置在一个网页的任何位置，这极大地扩展了框架页面的应用范围。
9.4.1 页面源文件 src
浮动框架中最基本属性就是src，它用来指定浮动框架页面的源文件地址
语法：<iframe src="浮动框架源文件"></iframe>
eg：
<html>
<head>
<meta charset="UTF-8">
<title>浮动框架iframe</title>
</head>
<body>
<table height="428" cellspacing="0" cellpadding="0" width="760" align="center" border="0"><!--表格宽度设太大(760) 中间单元格(被合并了 宽度设置也大 单元格宽度由本列最宽单元格决定)-->
<tbody>
<tr>
<td><img height="214" alt="1.jpeg" src="image/1.jpeg" width="64"></td>
<td width="750" background="image/2.jpeg" rowspan="2"><!--中间不是插入的图片 而是(1,2)(2,2)合并后的大单元格 然后加了一个大的背景图-->
<iframe src="image/7.fd.html"></iframe>
</td>
<td>
<img height="214" alt="3.jpeg" src="image/3.jpeg" width="59">
</td>
</tr>
<tr>
<td><img height="214" alt="4.jpeg" src="image/4.jpeg" width="64"></td>
<td><img height="214" alt="5.jpeg" src="image/5.jpeg" width="59"></td>
</tr>
</tbody>
</table>
</body>
</html>
运行结果：
9.4.2 浮动框架宽和高 width height
<frame>生成的框架结构是依赖上级空间尺寸的，它的宽度或者高度必须有一个和上级框架相同。而<iframe>浮动框架可以完全由指定宽度和高度绝对
语法：<iframe src="浮动框架源文件" width="浮动框架宽度" height="浮动框架的高"></iframe>
eg:
<html>
<head>
<meta charset="UTF-8">
<title>浮动框架iframe</title>
</head>
<body>
<table height="428" cellspacing="0" cellpadding="0" width="760" align="center" border="0"><!--表格宽度设太大(760) 中间单元格(被合并了 宽度设置也大 单元格宽度由本列最宽单元格决定)-->
<tbody>
<tr>
<td><img height="214" alt="1.jpeg" src="image/1.jpeg" width="64"></td>
<td width="750" background="image/2.jpeg" rowspan="2"><!--中间不是插入的图片 而是(1,2)(2,2)合并后的大单元格 然后加了一个大的背景图-->
<iframe src="image/7.fd.html" width="620" height="400"></iframe>
</td>
<td>
<img height="214" alt="3.jpeg" src="image/3.jpeg" width="59">
</td>
</tr>
<tr>
<td><img height="214" alt="4.jpeg" src="image/4.jpeg" width="64"></td>
<td><img height="214" alt="5.jpeg" src="image/5.jpeg" width="59"></td>
</tr>
</tbody>
</table>
</body>
</html>
运行结果：
9.4.3 浮动框架对齐方式 align
设置浮动框架页面相对于浏览器窗口的水平位置
语法：<iframe src="浮动框架源文件" align="对齐方式"></iframe>
说明：取值left,right,middle,bottom(底部对齐)
eg:
<html>
<head>
<meta charset="UTF-8">
<title>浮动框架iframe</title>
</head>
<body>
<table height="428" cellspacing="0" cellpadding="0" width="760" align="center" border="0"><!--表格宽度设太大(760) 中间单元格(被合并了 宽度设置也大 单元格宽度由本列最宽单元格决定)-->
<tbody>
<tr>
<td><img height="214" alt="1.jpeg" src="image/1.jpeg" width="64"></td>
<td width="750" background="image/2.jpeg" rowspan="2"><!--中间不是插入的图片 而是(1,2)(2,2)合并后的大单元格 然后加了一个大的背景图-->
<iframe src="image/7.fd.html" width="620" height="400" align="right"></iframe>
</td>
<td>
<img height="214" alt="3.jpeg" src="image/3.jpeg" width="59">
</td>
</tr>
<tr>
<td><img height="214" alt="4.jpeg" src="image/4.jpeg" width="64"></td>
<td><img height="214" alt="5.jpeg" src="image/5.jpeg" width="59"></td>
</tr>
</tbody>
</table>
</body>
</html>
运行结果：
浮动框架右边靠齐
9.4.4 浮动框架边框显示属性 frameborder
语法：<iframe src="页面框架源文件" frameborder="是否显示框架边框"></iframe>
说明：frameborder取值和frameset标签类似
只能为0、1 ，或者yes、no。0或no隐藏边框；1或yes，显示边框。默认显示
eg:
<html>
<head>
<meta charset="UTF-8">
<title>浮动框架iframe</title>
</head>
<body>
<table height="428" cellspacing="0" cellpadding="0" width="760" align="center" border="0"><!--表格宽度设太大(760) 中间单元格(被合并了 宽度设置也大 单元格宽度由本列最宽单元格决定)-->
<tbody>
<tr>
<td><img height="214" alt="1.jpeg" src="image/1.jpeg" width="64"></td>
<td width="750" background="image/2.jpeg" rowspan="2"><!--中间不是插入的图片 而是(1,2)(2,2)合并后的大单元格 然后加了一个大的背景图-->
<iframe src="image/7.fd.html" width="620" height="400" align="right" frameborder="no"></iframe>
</td>
<td>
<img height="214" alt="3.jpeg" src="image/3.jpeg" width="59">
</td>
</tr>
<tr>
<td><img height="214" alt="4.jpeg" src="image/4.jpeg" width="64"></td>
<td><img height="214" alt="5.jpeg" src="image/5.jpeg" width="59"></td>
</tr>
</tbody>
</table>
</body>
</html>
运行结果：
与上一张图片比较，隐藏了边框
默认显示边框的时候，<iframe>尺寸范围会有一种立体边框效果出现
9.4.5 浮动框架滚动条显示属性 scrolling
完全类似frameset对应属性
语法：<iframe src="浮动框架源文件" scrolling="是否显示滚动条"></iframe>
说明:
| 属性值 | 说明 |
| auto | 默认值，在需要的情况下出现滚动条 |
| yes | 总是显示滚动条(即使不需要) |
| no | 从不显示滚动条(即使需要) |
eg：
<html>
<head>
<meta charset="UTF-8">
<title>浮动框架iframe</title>
</head>
<body>
<table height="428" cellspacing="0" cellpadding="0" width="760" align="center" border="0"><!--表格宽度设太大(760) 中间单元格(被合并了 宽度设置也大 单元格宽度由本列最宽单元格决定)-->
<tbody>
<tr>
<td><img height="214" alt="1.jpeg" src="image/1.jpeg" width="64"></td>
<td width="750" background="image/2.jpeg" rowspan="2"><!--中间不是插入的图片 而是(1,2)(2,2)合并后的大单元格 然后加了一个大的背景图-->
<iframe src="image/7.fd.html" width="620" height="400" align="right" frameborder="no" scrolling="no"></iframe>
</td>
<td>
<img height="214" alt="3.jpeg" src="image/3.jpeg" width="59">
</td>
</tr>
<tr>
<td><img height="214" alt="4.jpeg" src="image/4.jpeg" width="64"></td>
<td><img height="214" alt="5.jpeg" src="image/5.jpeg" width="59"></td>
</tr>
</tbody>
</table>
</body>
</html>
运行结果：
| no | 从不显示滚动条(即使需要) |
会导致页面有些地方无法访问到
9.5 创建框架链接
一般情况下，创建框架网页的目的是为了更好地对页面内容进行导航，通过框架进行链接不同内容。对于框架页面来说，设置页面的链接需要使用target
9.5.1 普通框架结构链接
普通框架结构之间通过target互相链接起来。一般情况下，一个页面中会有一个框架窗口作为导航页面，其中添加了对另一个框架内容的链接设置，而这些链接则是通过target来实现的
重点语法:<td ><a href=" new.html" target="mainframe">北京专线</a></td>
说明：mainframe是一个框架，也就是页面一块区域，点击该超链接后，new.html页面覆盖原来mainframe框架初始的
页面,而显示在mainframe区域
eg：
框架集 index.html
<html>
<head>
<meta charset="UTF-8">
<title>create frame link</title>
</head>
<frameset rows="263,*" cols="*" framespacing="0" frameborder="yes" border="0">
<frame src="top.html" name="topframe" scrolling="no" noresize="noresize" id="topframe" />
<frame src="foot.html" name="mainframe" id="mianframe" />
</frameset>
</html>top.html
<html>
<head>
<meta charset="UTF-8">
<title>顶端框架</title>
<!--css代码 第11章开始讲到-->
<style type="text/css">
<!--
body{
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
-->
</style>
</head>
<body>
<table cellspacing="0" cellpadding="0" width="100%" align="center" border="0">
<tbody>
<tr>
<td><img height="118" alt="index_1.jpeg" src="images/index_1.jpeg" width="100%" /></td>
</tr>
<tr>
<td><img height="120" alt="index_2.jpeg" src="images/index_2.jpeg" width="100%"/></td>
</tr>
</tbody>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="4">
<tr>
<!--target=“mainframe” 最终都会显示在mainframe框架中 也即是下方一大块主内容区（取代原来的foot.html） 本节重点就是这个-->
<td align="center" bgcolor="#DEF3FF"><a href="images/beiji.html" target="mainframe">北京专线</a></td>
<td align="center" bgcolor="#DEF3FF"><a href="images/guil.html" target="mainframe">桂林专线</a></td>
<td align="center" bgcolor="#DEF3FF"><a href="images/hainan.html" target="mainframe">海南专线</a></td>
<td align="center" bgcolor="#DEF3FF"><a href="images/huabei.html" target="mainframe">华北专线</a></td>
</tr>
</table>
</body>
</html>
foot.html
<html>
<head>
<meta charset="UTF-8">
<title>普通框架链接</title>
</head>
<body>
<table cellspacing="0" cellpadding="4" width="95%" align="center" border="0">
<tbody>
<tr>
<td bgcolor="#def3ff" colspan="2">
<div align="center">
<font color=""#cc3300 size="3"><b>春节最新路线</b></font>
</div>
</td>
</tr>
<tr>
<td width="25%" bgcolor="#b5e3ff">
<font color=""#cc3300 size="3"><b>北京精彩四日游</b></font>
</td>
<td width="75%" bgcolor="#def3ff"> </td>
</tr>
<tr>
<td valign="top" colspan="2">
1.第一天<br>
6:00-6:30火车站步行420m地铁二号线7站鼓楼大街（G出口）720m鼓韵国际青旅
8:30-9:10 步行360米 鼓楼桥南 站—13站法华寺站 步行230米 护国寺小吃（红桥店）
10:40-12:40 游览天坛 东门进西门出 步行240m天坛西站2路、93、69大栅栏下车520m
- 宏源涮肉城(天坛店)（备选）<br>
2.第二天<br>
8:00-9:00地铁八号线（朱辛庄方向）鼓楼大街3站北土城站—地铁十号线 8站巴沟站—74路柳村-颐和园新建东门
游园路线：
方案一：仁寿殿—文昌阁—德和园—扮戏楼—颐乐殿—宜芸馆—乐寿堂—惠山园—谐趣园—景福阁—智慧海—佛香阁—排云殿—长廊—石舫（坐船到苏州街）北宫门出
方案二：仁寿殿—文昌阁—德和园—扮戏楼—颐乐殿—宜芸馆—乐寿堂—惠山园—谐趣园—景福阁—长廊—石舫—排云殿—佛香阁—智慧海—苏州街—北宫门出<br>
3.第三天<br>
门票：天安门15+故宫80（包含两个馆）
旅游小贴士：
故宫，又称紫禁城，明清两代的皇宫，建议穿运动鞋等平底鞋，故宫地面石路比较不平坦，要好好注意哦~因为故宫里面没有卖饭，所以最好带足早饭、午饭的量的食物哦~
从故宫北门出来，过了马路就是景山公园，可看到紫禁城的全貌。
从景山公园下来后，如果时间充裕，去紫禁城角楼的位置拍落日余晖，那真真儿的是极美的~
晚上任意选择地点吃饭<br>
4.第四天<br>
步行400m地铁八号线鼓楼大街—南锣鼓巷（2站）站内换乘—地铁六号线（海淀五路居方向）北海北（b出口）670m恭王府入口（旅游景点备选：世界公园：浓缩的世界 门票100元）
6点半前往机场
地铁八号线鼓楼大街（朱辛庄方向）3站—北土城下车—地铁十号线（内环）5站 三元桥下车—步行180m三元桥机场线T3航站楼20:55-22:55 北京首都机场T2东方航空 MU5172
<font color="#990000"></font>
</td>
</tr>
<tr bgcolor="#ffffcc">
<td valign="top" colspan="2">
<font color="#990000"><b>
接待标准:<br>
1.空调旅游车 <br>
2.二星或同级标准间 <br>
3.所列景点第一门票 <br>
4.优秀导游服务 <br>
5.三早五正餐
</b></font>
</td>
</tr>
</tbody>
</table>
</body>
</html>
beiji.html
同foot,html
guil.html
<html>
<head>
<meta charset="UTF-8">
<title>普通框架链接</title>
</head>
<body>
<table cellspacing="0" cellpadding="4" width="95%" align="center" border="0">
<tbody>
<tr>
<td bgcolor="#def3ff" colspan="2">
<div align="center">
<font color=""#cc3300 size="3"><b>春节最新路线</b></font>
</div>
</td>
</tr>
<tr>
<td width="25%" bgcolor="#b5e3ff">
<font color=""#cc3300 size="3"><b>桂林惬意四日游</b></font>
</td>
<td width="75%" bgcolor="#def3ff"> </td>
</tr>
<tr>
<td valign="top" colspan="2">
1.第一天<br>
晚上11：30左右客人指定地点集中出发乘车前往阳朔，全程高速车程约7个小时。住：车上 <br>
2.第二天<br>
大约凌晨6：00到达桂林，然后大伙在餐店稍作稍作，自理吃第一口正宗的桂林米粉，然后开始我们桂林的精彩行程。
8：00开始乘坐游船游览桂林市山水和人文景观精华——【市内漓江】（龙船坪—斗鸡山—木龙洞，游览时间约1.5小时）；沿途观赏斗鸡山、穿山、老人山、七星山、訾州烟雨、“桂林城徽”——象鼻山，“半枕漓江”——伏波山，“江山会景处”—叠彩山；感受山青、水秀、洞奇、石美之美景，亦可体会深潭、险潭、流泉、飞瀑之佳境。
10:00游船市内漓江完毕，然后乘车千前往茶坊休息，桂林茶坊免费品桂林特色美食，吃饱吃足还能带走，请不要忘了给家里的亲朋好友带点噢，喝名茶品桂林小吃不失恰意的事情。在这里能了解桂林的当地茶文化。
12:00乘车回酒店。一晚的车程会感觉稍累，回酒店稍作休息后为下午晚上的精彩行程做好准备。有精力的团友可以在酒店周围闲逛，尽量与当地人答话，当地的“哥哥姐姐妹妹弟弟们”是相当的热情。比自己年长的叫阿哥阿姐，年小的叫阿弟阿妹，以示亲切。<br>
3.第三天<br>
早晨8点起床，用早餐。餐后乘车前往阳朔，然后挑选自己喜爱的单车，骑车经阳朔著名的高田风光——【十里画廊】、前往月亮山。经阳朔著名的高田风光——十里画廊前往月亮山。途径漓江最大的支流——【遇龙河】，可沿遇龙河徒步，找找“走在乡间的小路上”的感觉遇龙河的田园风光堪称一绝。河岸两侧，田畴平整开阔，绿意逼人，稻花飘香。置身其间，顿觉心旷神怡，这感觉在山水甲天下的漓江也找不到。遇龙河其河水见底，水流平缓，两岸碧树绿稼，奇峰怀抱，令人心旷神怡；同时还可开心刺激的打一场水战，实在过瘾！
中午12：00前往【月亮山】吃午餐，享受过一顿正宗的农家饭（香喷喷的农家鸡、绿油油的青菜，听着都很诱人呀）。<br>
4.第四天<br>
晚餐后到【西街泡吧】，体验一下西街酒吧的小资情调吧！大家可以到酒吧尽情狂欢乐。玩累的团友，也可以在西街找一家安静的咖啡店，品品咖啡，谈谈三天的旅程感受，谈谈生活，谈谈抱负，谈谈人生。 晚上大约12:00在导游指定的集中乘车返回广州，不要误了归家的时间噢。次日6:00左右回到出发地。 住：车上
阳朔——广州 次日6:00左右回到出发地。 共计408元
<font color="#990000"></font>
</td>
</tr>
<tr bgcolor="#ffffcc">
<td valign="top" colspan="2">
<font color="#990000"><b>
接待标准:<br>
1.空调旅游车 <br>
2.三星或同级标准间 <br>
3.所列景点第二门票 <br>
4.优秀导游服务 <br>
5.三早六正餐
</b></font>
</td>
</tr>
</tbody>
</table>
</body>
</html>
运行结果：
9.5.2 浮动框架的链接
浮动框架同样可以制作页面之间的链接，其方法与普通框架类似
为浮动框架设置一个名称，在设置链接时，将链接的目标设置为浮动框架名称即可
eg:暂时略
第九章总结
9.2 设置框架集属性
<html>
<head>
<meta charset="UTF-8">
<title>总结</title>
</head>
<!--frameset设置框架集-->
<frameset rows="框架窗口高度1,框架窗口高度2,框架窗口高度3,...,框架窗口高度n"><!--最终窗口被水平分成n+1块 rows改成cols="框架窗口宽度" 便是垂直分割-->
<frame>
<frame>
<frame>
<!--frame为单个框架 一个框架集里一大堆单个框架-->
</frameset>
<noframes>
sorry，您的浏览器不支持框架结构的显示
</noframes>
</html>嵌套分割：(很简单，就是frameset里再嵌套一个frameset就可实现)
<frameset rows="框架窗口高度,框架窗口高度,......" cols="框架窗口宽度,框架窗口宽度,......"><!--等等类似结构-->
<frame>
<frameset cols="框架窗口宽度,框架窗口宽度,......">
<frame>
<frame>
......
</frameset>
</frameset>框架frameset其他属性
<html>
<head>
<meta charset="UTF-8">
<title>总结</title>
</head>
<frameset cols="框架窗口宽度1,框架窗口宽度2,框架窗口宽度3,...,框架窗口宽度n" frameborder="是否显示框架边框yes/no/0/1" border="边框宽度" framespacing=“边框宽度(不怎么有效/建议用border)” bordercolor="边框颜色">
<frame >
<frame>
<frame>
</frameset>
<noframes>
sorry，您的浏览器不支持框架结构的显示
</noframes>
</html>
9.3窗口frame属性
<html>
<head>
<meta charset="UTF-8">
<title>总结</title>
</head>
<frameset cols="*" rows="100,*">
<frame src="页面源文件地址" name="页面名称" noresize(禁止调整窗口属性/否则不写) marginwidth="窗口边框与页面内容水平间距" marginheight="窗口边框与页面内容垂直间距" scrolling="是否显示滚动条" >
<frame>
<frame>
</frameset>
<noframes>
sorry，您的浏览器不支持框架结构的显示
</noframes>
</html>
9.4 浮动框架iframe
<html>
<head>
<meta charset="UTF-8">
<title>总结</title>
</head>
<body>
<table>
<tr>
<td></td>
<td></td>
...
<td>
<!--嵌套放置在任何位置 大小等都可以自定义而不受约束-->
<iframe src="页面源文件地址" width="浮动框架宽度" height="浮动框架高度" align="对齐方式(此处指相对此单元格的对齐)" frameborder="是否显示框架(窗口)边框" scrolling="滚动条显示方式"></iframe>
</td>
</tr>
...
</table>
</body>
</html>
9.5 创建框架链接
定义框架时给框架一个name属性赋值，定义超链接时target属性值取框架name值，则点击该超链接时，href属性指定页面的在该框架(窗口)中显示 如此简单
<html>
<head>
<meta charset="UTF-8">
<title>create frame link</title>
</head>
<frameset rows="263,*" cols="*" framespacing="0" frameborder="yes" border="0">
<frame src="top.html" name="topframe" scrolling="no" noresize="noresize" id="topframe" />
<frame src="foot.html" name="mainframe" id="mianframe" />
</frameset>
</html>top.html
<html>
<head>
<meta charset="UTF-8">
<title>顶端框架</title>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="4">
<tr>
<td align="center" bgcolor="#DEF3FF"><a href="images/beiji.html" target="mainframe">北京专线</a></td>
<td align="center" bgcolor="#DEF3FF"><a href="images/guil.html" target="mainframe">桂林专线</a></td>
</tr>
</table>
</body>
</html>