教学项目十四 HTML中框架的实现 【教学内容】 讲解HTML中框架标志及相应的属性 【教学目的】 使学生掌握框架标志及属性，学会熟练使用HTML标志设计框架网页。 【教学重点】 框架的嵌套使用 【教学难点】 理解属性name、target的意义 【教学方式】 案例分析式、项目教学 【教学参考】 1．<<JavaScript 入门与提高>> 杨浩著 清华大学出版社 2．<<JavaScript从入门到精通>> 电脑报社出版 3．TML网页制作教程 材义语编著 铁道出版社 4．HTML基础与实例 程耀编著 电子工业出版社 【新课】 设计框架网页的标志 标志一：<frameset></frameset> 用于定义框架的分割方式 格式： <frameset rows=水平分割的行高 cols=垂直分割的行宽> 说明： rows,cols中必须选择一个 rows,cols的值有三种表示方式： 数字： 定的像素值； 百分比：相对宽度，以当前的浏览器窗口为参照； *： 将剩下未被分配空间平均分配； 例： 1. <frameset rows=*,*,*> 表示按水平方向分割，每一框架窗口占浏览器窗口的1/3，窗口从上到下排列； 2. <frameset cols=40%,*,*> 表示按垂直方向分割，第一个窗口占40%,其余两个窗口各占30%，窗口从左到右排列 3. <frameset rows=40%,* cols=50%,*,200> 表示先水平方向分割，再垂直方向分割，两行三列排列。         标志二：<frame> 用于定义一个子框架窗口，指定窗口中显示的网页的路径、名称及框架名称。 格式 ： <frame src=显示网页名称 name=框架名称> 例1：设计如下框架网页：  分析： 这是一个左右结构的框架，框架左边窗口显示网页为1.htm,框架窗口右边显示网页为2.htm 框架结构部分对应网页为aa.htm； 程序代码如下： 1.HTM代码： <html> <body background=21.jpg> <p><center><font size=6>特别推荐</font></center> <br><br> <table width=300 border=1 bgcolor=#00ffee align=center> <tr> <td align=center><font face=隶书 size=5>文学芳草 </tr> <tr> <td align=center><font face=隶书 size=5>竹林听海 </td> </tr> <tr> <td align=center><font face=隶书 size=5>梧桐树下 </td> </tr> <tr> <td align=center><font face=隶书 size=5>如烟往事 </td> </tr> <tr> <td align=center><font face=隶书 size=5>牧歌唱晚</font> </td> </tr> </table> </body> </html> 2.htm代码如下： <html> <body bgcolor=#00ffee> <center><img src="0244.jpg" border=1 width="280" height="400"></center> </body> </html> aa.htm代码如下： <html> <frameset cols=50%> <frame src=1.htm name=top> <frame src=2.htm name=bottom> </frameset> </html> 框架标志配合使用的属性 1．<frameset>标志中的配合使用属性： （1）framespacing: 设定框架边框线的宽度 （2）frameborder: 设定是否显示框线 frameborder=0 不显示框线；frameborder=1时显示框线； bordercolor: 设定框线颜色 2．<frame>标志中配合使用的属性 （1）scrolling: 设定是否显示滚动条 scrolling=auto 需要自动出现 scrolling=yes 始终出现 scrolling=no 从不出现 noresize: 设定是否允许调整窗口大小 marginwidth: 框架内网页内容与边缘的空白区宽度 marginheight: 框架内网页内容与边缘的空白区的高度 框架网页中超级链接的使用 例：设计如下框架网页：  分析：此例使用了框架嵌套，在下左窗口中设置超级链接，目标窗口分别是right、_self、 _blank、bottom、target=top.      最上窗口是显示的网页12.htm,上下框架网页为index.htm;左右框架网页为aa.htm,左框架显示网页为1.htm,右框架显示网页为2.htm;程序代码如下： INGEX.htm代码： <html> <frameset rows=40%,* frameborder=0> <frame src=12.htm name=top> <frame src=aa.htm name=bottom> </frameset> </html> 12．Htm代码： <html> <body bgcolor=#00eeff> <p><center><font color="#000000">◇爱情究竟是什么？◇</font></center></p> <p><font color="#000000">&nbsp;&nbsp;&nbsp; <font color="#000000">老妈说：爱情是颗洋葱头，一片片剥下去，总有一片让你泪流满面；</font></p> <p>老爸说：爱情是感冒，既瞒不了自己，也瞒不了别人，因为你抑制不住自己的喷嚏和鼻涕； 朋友说：爱情是只啁啾的鸟，总想往高处飞，但又总要找个栖息的角落；而嗜饮咖啡的我更愿意说：爱情是一杯香浓的咖啡。 <p>既然是咖啡，光有冲泡还不够味，因为总有些东西会漂在上面，所以还要找把小勺子，轻轻地、慢慢地来搅和，让它们就在这一搅一拌中渐渐融合， 你中有我，我中有你，散发出令人神清气爽的醇香。</p> 所以，情窦初开的你，爱如潮水的你，浓情蜜意的你，不论应酬有几多，工作有多忙，时间多紧张，你都要找点时间，找点空闲，带上你的心上人儿找个 安静、浪漫的、温馨的地方，散散步聊聊天--因为爱情咖啡需要找把小勺慢慢搅拌。就在这摇拌中，把心摇近，把情摇浓，最后融合在一起再也分不开。 <p>关于爱情的点点滴滴，在这轻轻地搅拌中，愈久弥香，飘散在这座城市的角角落落.... </body> </html> 1．Htm代码如下： <html> <body background=21.jpg> <p><center><font size=6>特别推荐</font></center> <br><br> <table width=300 border=1 bgcolor=#00ffee align=center> <tr> <td align=center><font face=隶书 size=5> <A href=fp1.html target=right>文学芳草</a> </tr> <tr> <td align=center><font face=隶书 size=5> <a href=fp2.html target=_self>竹林听海</a> </td> </tr> <tr> <td align=center><font face=隶书 size=5> <a href=fp3.html target=_blank>梧桐树下</a> </td> </tr> <tr> <td align=center><font face=隶书 size=5> <A href=fp5.html target=bottom>如烟往事</a> </td> </tr> <tr> <td align=center><font face=隶书 size=5> <a href=fp6.html target=top> 牧歌唱晚</font> </td> </tr> </table> </body> </html> 【课后小结】 框架结构是布局网页的一种常用方式，要掌握框架及其嵌套的实现，以及在框架中设置超级链接时目标框架位置的设置。