教学项目十四HTML中框架的实现 教学内容】 讲解HTM中框架标志及相应的属性 【教学目的 使学生掌握框架标志及属性,学会熟练使用HM标志设计框架网页。 【教学重点】 框架的嵌套使用 【教学难忘】 理解属性name、 target的意义 【教学方式】 案例分析式、项目教学 【教学参考】 1.< JavaScript入门与提高>杨浩著 清华大学出版社 2.< JavaScript从入门到精通>〉 电脑报社出版 3.TML网页制作教程材义语编著铁道出版社 4.HTML基础与实例程耀编著电子工业出版社
教学项目十四 HTML中框架的实现 【教学内容】 讲解HTML中框架标志及相应的属性 【教学目的】 使学生掌握框架标志及属性，学会熟练使用HTML标志设计框架网页。 【教学重点】 框架的嵌套使用 【教学难点】 理解属性name、target的意义 【教学方式】 案例分析式、项目教学 【教学参考】 1．<<JavaScript 入门与提高>> 杨浩著 清华大学出版社 2．<<JavaScript从入门到精通>> 电脑报社出版 3．TML网页制作教程 材义语编著铁道出版社 4．HTML基础与实例 程耀编著电子工业出版社
新课】 设计框架网页的标志 标志一:< frameset></ frameset> 用于定义框架的分割方式 格式: frameset rows=水平分割的行高cols=垂直分割的行宽 说明: 1) rows. cols中必须选择一个 (2) rows. cols的值有三种表示方式: 数字:定的像素值; 百分比:相对宽度,以当前的浏览器窗口为参照; :将剩下未被分配空间平均分配; 例: < frameset rows=*半* 表示按水平方向分割,每一框架窗口占浏览器窗口的1/3,窗口从上到下排 2. <frameset cols=40%.** 表示按垂直方向分割,第一个窗口占40%,其余两个窗口各占30%,窗口从 左到右排列
【新课】 一、设计框架网页的标志 标志一：<frameset></frameset> 用于定义框架的分割方式 格式： <frameset rows=水平分割的行高 cols=垂直分割的行宽> 说明： （1） rows,cols中必须选择一个 （2） rows,cols的值有三种表示方式： 数字： 定的像素值； 百分比：相对宽度，以当前的浏览器窗口为参照； *： 将剩下未被分配空间平均分配； 例： 1. <frameset rows=*,*,*> 表示按水平方向分割，每一框架窗口占浏览器窗口的1/3，窗口从上到下排 列； 2. <frameset cols=40%,*,*> 表示按垂直方向分割，第一个窗口占40%,其余两个窗口各占30%，窗口从 左到右排列
3. <frameset rows=40%* cols=50%.*200> 表示先水平方向分割,再垂直方向分割,两行三列排列。 200 标志二:< frame> 用于定义一个子框架窗口,指定窗口中显示的网页的路径、名称及框架名称 格式:< frame src=显示网页名称name=框架名称>
3. <frameset rows=40%,* cols=50%,*,200> 表示先水平方向分割，再垂直方向分割，两行三列排列。 40% 60% 50% 200 标志二：<frame> 用于定义一个子框架窗口，指定窗口中显示的网页的路径、名称及框架名称。 格式 ： <frame src=显示网页名称 name=框架名称>
例1:设计如下框架网页: le25\aa.htm- icrosoft Internet Expl 巴回区 文件)编辑忑)查着⑩收涨()工具①)帮助Q ·因园搜索收夹的媒体的应,图,口 址①)G: FrontPage\sam125aMtm ˇ转到链接” 特别推荐 文学芳草 竹林听 梧桐树下 如烟往事 牧唱晚 完毕 名始”[]14-M C Microsoft F 生G: FrontPage
例1：设计如下框架网页：
分析: 这是一个左右结构的框架,框架左边窗口显示网页为1htm,框架窗口右边 显示网页为2htm 框架结构部分对应网页为 aa. htm; 程序代码如下: HIM代码 htm> <body background=21. jpg> p>< center>< font size=6>特别推荐</font></ center> <br><br> table width=300 border=l bgcolor#coffee align=center> < td align= center>< font face=隶书size=5>文学芳草 < <td align= center>< font face=隶书se=5>竹林听海 < <td align= center>< font face=隶书size=5>梧桐树下 </td>
分析： 这是一个左右结构的框架，框架左边窗口显示网页为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>