教学项目十四 html 中框架的实现【教学内容】讲解 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 的值有三种表示方式：数字：定的像素值；百分比：相对宽度，以当前的浏览器窗口为参照；* ：将剩下未被分配空间平均分配；例：1. <frameset rows=*,*,*>表示按水平方向分割，每一框架窗口占浏览器窗口的 1/3 ，窗口从上到下排列； 2. <frameset cols=40%,*,*>表示按垂直方向分割，第一个窗口占 40%, 其余两个窗口各占 30% ，窗口从左到右排列

3. <frameset rows=40%,* cols=50%,*,200>表示先水平方向分割，再垂直方向分割，两行三列排列。

40%

60%

50% 200

标志二： <frame>用于定义一个子框架窗口，指定窗口中显示的网页的路径、名称及框架名称。格式： <frame src= 显示网页名称 name= 框架名称 >

例 1 ：设计如下框架网页：

分析：这是一个左右结构的框架，框架左边窗口显示网页为 1.htm, 框架窗口右边显示网页为 2.htm框架结构部分对应网页为 aa.htm ；程序代码如下：1.HTM 代码：<html><body background=21.jpg><center> 特别推荐 </center> <table width=300 border=1 bgcolor=#00ffee align=center><tr><td align=center> 文学芳草</tr><tr><td align=center> 竹林听海</td></tr><tr><td align=center> 梧桐树下</td></tr>

二、框架标志配合使用的属性 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: 框架内网页内容与边缘的空白区的高度

一、框架网页中超级链接的使用例：设计如下框架网页：分析：此例使用了框架嵌套，在下左窗口中设置超级链接，目标窗口分别是 right 、 _self 、 _blank 、 bottom 、 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><center>◇ 爱情究竟是什么？◇ </center> 老妈说：爱情是颗洋葱头，一片片剥下去，总有一片让你泪流满面； 老爸说：爱情是感冒，既瞒不了自己，也瞒不了别人，因为你抑制不住自己的喷嚏和鼻涕；朋友说：爱情是只啁啾的鸟，总想往高处飞，但又总要找个栖息的角落；而嗜饮咖啡的我更愿意说：爱情是一杯香浓的咖啡。 既然是咖啡，光有冲泡还不够味，因为总有些东西会漂在上面，所以还要找把小勺子，轻轻地、慢慢地来搅和，让它们就在这一搅一拌中渐渐融合，你中有我，我中有你，散发出令人神清气爽的醇香。 所以，情窦初开的你，爱如潮水的你，浓情蜜意的你，不论应酬有几多，工作有多忙，时间多紧张，你都要找点时间，找点空闲，带上你的心上人儿找个安静、浪漫的、温馨的地方，散散步聊聊天 -- 因为爱情咖啡需要找把小勺慢慢搅拌。就在这摇拌中，把心摇近，把情摇浓，最后融合在一起再也分不开。关于爱情的点点滴滴，在这轻轻地搅拌中，愈久弥香，飘散在这座城市的角角落落 ....</body></html>

1 ． Htm 代码如下：<html><body background=21.jpg><center> 特别推荐 </center> <table width=300 border=1 bgcolor=#00ffee align=center><tr><td align=center><A href=fp1.html target=right> 文学芳草 </a></tr><tr><td align=center><a href=fp2.html target=_self> 竹林听海 </a></td></tr><tr><td align=center><a href=fp3.html target=_blank> 梧桐树下 </a> </td></tr>

二、浮动框架

基本语法：

<iframe src=file-url height=value width=value name= 名称 align= 对齐方式 </iframe>

案例设计：浮动框架的使用

案例设计：浮动框架中超级链接的实现

案例设计 : 浮动框架在网页设计中的综合应用

【课后小结】框架结构是布局网页的一种常用方式，要掌握框架及其嵌套的实现，浮动框架的使用 , 以及在框架中设置超级链接时目标框架位置的设置。

教学项目十四 html 中框架的实现 【 教学内容 】 讲解 html...

Documents

教学项目十四 html 中框架的实现【教学内容】讲解 html...