教学项目十四HTML中框架的实现 教学内容】 讲解HTM中框架标志及相应的属性 【教学目的 使学生掌握框架标志及属性,学会熟练使用HM标志设计框架网页。 【教学重点】 框架的嵌套使用 【教学难忘】 理解属性name、 target的意义 【教学方式】 案例分析式、项目教学 【教学参考】 1.杨浩著 清华大学出版社 2.〉 电脑报社出版 3.TML网页制作教程材义语编著铁道出版社 4.HTML基础与实例程耀编著电子工业出版社
教学项目十四 HTML中框架的实现 【教学内容】 讲解HTML中框架标志及相应的属性 【教学目的】 使学生掌握框架标志及属性，学会熟练使用HTML标志设计框架网页。 【教学重点】 框架的嵌套使用 【教学难点】 理解属性name、target的意义 【教学方式】 案例分析式、项目教学 【教学参考】 1．> 杨浩著 清华大学出版社 2．> 电脑报社出版 3．TML网页制作教程 材义语编著铁道出版社 4．HTML基础与实例 程耀编著电子工业出版社
新课】 设计框架网页的标志 标志一: 用于定义框架的分割方式 格式: frameset rows=水平分割的行高cols=垂直分割的行宽 说明: 1) rows. cols中必须选择一个 (2) rows. cols的值有三种表示方式: 数字:定的像素值; 百分比:相对宽度,以当前的浏览器窗口为参照; :将剩下未被分配空间平均分配; 例: < frameset rows=*半* 表示按水平方向分割,每一框架窗口占浏览器窗口的1/3,窗口从上到下排 2. <frameset cols=40%.** 表示按垂直方向分割,第一个窗口占40%,其余两个窗口各占30%,窗口从 左到右排列
【新课】 一、设计框架网页的标志 标志一： 用于定义框架的分割方式 格式： 说明： （1） rows,cols中必须选择一个 （2） rows,cols的值有三种表示方式： 数字： 定的像素值； 百分比：相对宽度，以当前的浏览器窗口为参照； *： 将剩下未被分配空间平均分配； 例： 1. 表示按水平方向分割，每一框架窗口占浏览器窗口的1/3，窗口从上到下排 列； 2. 表示按垂直方向分割，第一个窗口占40%,其余两个窗口各占30%，窗口从 左到右排列
3. 表示先水平方向分割,再垂直方向分割,两行三列排列。 200 标志二: 用于定义一个子框架窗口,指定窗口中显示的网页的路径、名称及框架名称 格式:
3. 表示先水平方向分割，再垂直方向分割，两行三列排列。 40% 60% 50% 200 标志二： 用于定义一个子框架窗口，指定窗口中显示的网页的路径、名称及框架名称。 格式 ：
例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> p>特别推荐 table width=300 border=l bgcolor#coffee align=center> 文学芳草 竹林听海 梧桐树下
分析： 这是一个左右结构的框架，框架左边窗口显示网页为1.htm,框架窗口右边 显示网页为2.htm 框架结构部分对应网页为aa.htm； 程序代码如下： 1.HTM代码： 特别推荐 文学芳草 竹林听海 梧桐树下
如烟往事 牧歌唱晚 2htm代码如下
如烟往事 牧歌唱晚 2.htm代码如下： aa.htm代码如下：
框架标志配合使用的属性 1.标志中的配合使用属性: (1) namespacing设定框架边框线的宽度 (2) frameborder:设定是否显示框线 frameborder=0不显示框线; frameborder=1时显示框线; (3) bordercolor:设定框线颜色 2.标志中配合使用的属性 (1) scrolling设定是否显示滚动条 scrolling=auto需要自动出现 scrolling=yes始终出现 scrolling=no从不出现 (2) noresize:设定是否允许调整窗口大小 (3) marginwidth:框架内网页内容与边缘的空白区宽度 (4) marginheight框架内网页内容与边缘的空白区的高度
二、框架标志配合使用的属性 1．标志中的配合使用属性： （1）framespacing: 设定框架边框线的宽度 （2）frameborder: 设定是否显示框线 frameborder=0 不显示框线；frameborder=1时显示框线； (3） bordercolor: 设定框线颜色 2．标志中配合使用的属性 （1） scrolling: 设定是否显示滚动条 scrolling=auto 需要自动出现 scrolling=yes 始终出现 scrolling=no 从不出现 (2) noresize: 设定是否允许调整窗口大小 (3) marginwidth: 框架内网页内容与边缘的空白区宽度 （4） marginheight: 框架内网页内容与边缘的空白区的高度
框架网页中超级链接的使用 例:设计如下框架网页: 分析:此例使用了框架嵌套,在下左窗口中设置超级链接,目标窗口分 别是 right、_self、 blank、 bottom、top 3 G: \FrontPage\sample25\index. ht=- icrosoft Internet Explorer 文件)编辑)查看收藏()工具①)帮助0 后 次收夹的媒体必,品 地址①)GFnI46Mmp1251md,htm ∽园转到链接 ◇爱情宄竞是什么?◇ 老妈说:爱情是颗洋葱头,一片片剥下去,总有一片让你泪流满面; 责确联的鹭是墨星高慰不在忌要找的角落因而需年泉是意和爱是朋害 一特别推存 文学芳草 竹林听海 梧桐树下 如事 牧歌唱晚 e file: ///G:/FrontPage/sample25/Epl.html
一、框架网页中超级链接的使用 例：设计如下框架网页： 分析：此例使用了框架嵌套，在下左窗口中设置超级链接，目标窗口分 别是right、_self、_blank、bottom、top
工具①)帮助口0 后退··必魏☆收的媒体必 轴址()中1s: Fronk 班 心爱情究党是什么? 老妈:爱情是颗洋题头,一片片利下去,总有一片让你泪流满面 責ˉ瞅的鸶艦霍不石叟崑侖因斋楔雋裊腺鑾甕和爨n森酱浓箭 特列推 创新网吹 We面可用顶定义 模板来创姓,也时不用 和初“F 模板而在三页上自己进 点飞 行设计。创建新面的步 马下: 的电 3G:\ Front Pse…a卫125xndx,htm一 Hieroxort工 nt rnet Rxr1oxx 文伴正)编辑)查着收6)工且)帮助a 后退·。国回必搬收的媒体必③,≥國 地址①)4)G:FxnF发P125ndx,htm 转到 爱情究究是什么? 老妈说,情是颗洋蔥头,一片片剿下去,总有一片让你泪流满面 青端锅博置是是吧下石要如搜吧硒高器命四高岛需你中要需是存器器提 打开网页 如果想要打开当前 Web站点的一个页面,边 “文件”菜单中的“打 开”命令,或单击常用 具栏的“打开”按钮,贝 2需1 L:23
1格x化立本一黑1 rowoftIntornot Hxp1oxex 件)牺)查看以收藏6)工具)帮助 地址①)中1G1 Frontpage\s器E3,htm 格式化文不 1.输入文本 从总体面 仍是网中的体内容,在 outRage中输入文本与在Woq中输入文本非常类 以 (1).需要加入行換段时才使用Ente1 文本达所定义的有边界时,将自动换行。若录入 疒有错可按 Backspace键清除错误,新录入 ).在文不中任意位置处插入新文本肉,操仵时 上1位然!是!,1L 我的世 厂+ax=14- 厂: Frontpage 「鱼格式化交本 nN曰 a G:\FrontPage\xample2h\index. ht=- icrosoft Internet Explorer 件)编辑)看②收6)工具)w助a 6后退·[x 必搜索收藏的媒体 地址止q)中]G:、 FrontPage\当mp12sNnd,htm B种到接 建立超链接 起链接(Hype1Link)的现使网上浏览变得更加 便捷,只颏用鼠标轻轻点击,使能轻松地从一·个页 选转到男一个贡曲,从一个Web站点跳到易一个Web 烹,从一个国家跳到一个国家。超链接是一些特 特刿推存 竹听 9 773 Eh elassI4-M 心:NF。 tpAe, 格式化文率 EH以 L 112e