湖北职晚计算机科学与技术理论课教案一《网页设计》 教学项目十四 HTML中框架的实现 【教学内容】 讲解HML中框架标志及相应的属性 【教学目的】 使学生掌握框架标志及属性,学会熟练使用HM标志设计框架网页。 【教学重点】 框架的嵌套使用 【教学难点】 理解属性name、 target的意义 【教学方式】 案例分析式、项目教学 【教学参考】 1.<< JavaScript入门与提高〉杨浩著 清华大学出版社 2.< JavaScript从入门到精通>〉 电脑报社出版 3.TML网页制作教程材义语编著铁道出版社 4.HIML基础与实例程耀编著电子工业出版社 【新课】 、设计框架网页的标志 标志一:< frameset></ frameset> 用于定义框架的分割方式 格式 < frameset rows=水平分割的行高col=垂直分割的行宽> 说明: (1) rows. cols中必须选择一个 (2) rows, cols的值有三种表示方式 数字:定的像素值 百分比:相对宽度,以当前的浏览器窗口为参照; *:将剩下未被分配空间平均分配 例:
湖北职院计算机科学与技术系理论课教案—《网页设计》 教学项目十四 HTML 中框架的实现 【教学内容】 讲解 HTML 中框架标志及相应的属性 【教学目的】 使学生掌握框架标志及属性，学会熟练使用 HTML 标志设计框架网页。 【教学重点】 框架的嵌套使用 【教学难点】 理解属性 name、target 的意义 【教学方式】 案例分析式、项目教学 【教学参考】 1．<<JavaScript 入门与提高>> 杨浩著 清华大学出版社 2．<<JavaScript 从入门到精通>> 电脑报社出版 3．TML 网页制作教程 材义语编著 铁道出版社 4．HTML 基础与实例 程耀编著 电子工业出版社 【新课】 一、设计框架网页的标志 标志一：<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> 表示先水平方向分割,再垂直方向分割,两行三列排列。 40% 标志二:< frame> 用于定义一个子框架窗口,指定窗口中显示的网页的路径、名称及框架名称。 格式:< frame src=显示网页名称name=框架名称> 例1:设计如下框架网页
湖北职院计算机科学与技术系理论课教案—《网页设计》 表示按水平方向分割，每一框架窗口占浏览器窗口的 1/3，窗口从上到下排列； 2. <frameset cols=40%,*,*> 表示按垂直方向分割，第一个窗口占 40%,其余两个窗口各占 30%，窗口从左到右排列 3. <frameset rows=40%,* cols=50%,*,200> 表示先水平方向分割，再垂直方向分割，两行三列排列。 标志二：<frame> 用于定义一个子框架窗口，指定窗口中显示的网页的路径、名称及框架名称。 格式 ： <frame src=显示网页名称 name=框架名称> 例 1：设计如下框架网页： 40% 60% 50% 200
湖北职晚计算机科学与技术亲理论课教案一《网页设计》 2G\ frontPage多12aht一 microsoft Internet Expl】orer 件)编佞)查看①收0)工具①帮助00 后份冈回的搜索收夹的媒体的,孕8·回 地址①)e)G:1 FrontPage\samp15lbtm 转到链” 特别推荐 文学芳草 竹林听海 梧桐下 如烟往事 牧歌唱晚 我的电脑 分析 这是一个左右结构的框架,框架左边窗口显示网页为1htm,框架窗口右边显示网页为2htm 框架结构部分对应网页为ahtm 程序代码如下: 1HIM代码 <html> <body background=21. jpg> p>< center>< font size=6>特别推荐</font>< /center> <br><br> <table width=300 border=l bgcolor=#coffee align=cent < td align= center>< font face=隶书size=5>文学芳草 < <td align= center>< font face=隶书size=5>竹林听海 </tr> < <td align= center>< font face=隶书size=5>梧桐树下
湖北职院计算机科学与技术系理论课教案—《网页设计》 分析： 这是一个左右结构的框架，框架左边窗口显示网页为 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 align= center>< font face=隶书size=5>牧歌唱晚</font> </body> <h/htmI> 2htm代码如下: <html> <body bgcolor=#ooffee <center><img src="0244. jpg" border=l width=280"height=400"></center> <h/htmI> ahm代码如下: <html> <frameset cols=50% <frame src=l. htm name=top> <frame src=2 htm name=bottom /frameset> 二、框架标志配合使用的属性 < frameset标志中的配合使用属性 (1) namespacing设定框架边框线的宽度 (2) frameborder:设定是否显示框线 frameborder=0不显示框线; frameborder=1时显示框线 (3) bordercolor:设定框线颜色 2.<fame标志中配合使用的属性 (1) scrolling:设定是否显示滚动条 scrolling=auto需要自动出现 olling=yes始终出现 scrolling=no从不出现
湖北职院计算机科学与技术系理论课教案—《网页设计》 <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时显示框线； (3) bordercolor: 设定框线颜色 2．<frame>标志中配合使用的属性 （1）scrolling: 设定是否显示滚动条 scrolling=auto 需要自动出现 scrolling=yes 始终出现 scrolling=no 从不出现
湖北职院计算机科学与技术糸理论课教案一《网页设计》 (2) noresize:设定是否允许调整窗口大小 (3) marginwidth:框架内网页内容与边缘的空白区宽度 (4) marginheight:框架内网页内容与边缘的空白区的高度 三、框架网页中超级链接的使用 例:设计如下框架网页: 地①)1G:F心BtFN1心5%4H种 爱情究党是什么?心 老妈说,情是聊洋煎头,一片片下去,总有一片让你就满面 端票”露程满学面如甲器高本品具您鉴爱需杂器浓高品 特列值 分析:此例使用了框架嵌套,在下左窗口中设置超级链接,目标窗口分别是 right、self、 爱情完氧是什立 说,情最颗惠共,一片片下新,总有一片让你泪流滴面 品薇置下石壁量如学命中部都具你签是需油森器需品 特’辛 它变新1对 webl月顶义 板来创建,也可不 行设i 使新贝的 老丸说,情甲洋共,一片片到下去,总有一片 于开1对 如1果想要打开前 Web站点的一个页,进 文件”菜单的“扌 ”命令,或单,常月1 具栏的“打开”钮
湖北职院计算机科学与技术系理论课教案—《网页设计》 (2) noresize: 设定是否允许调整窗口大小 (3) marginwidth: 框架内网页内容与边缘的空白区宽度 (4) marginheight: 框架内网页内容与边缘的空白区的高度 三、框架网页中超级链接的使用 例：设计如下框架网页： 分析：此例使用了框架嵌套，在下左窗口中设置超级链接，目标窗口分别是 right、_self、 _blank、bottom、target=top