教学项目十四HTML中框架的实现课件.ppt
教学项目十四 HTML中框架的实现【教学内容】讲解HTML中框架标志及相应的属性【教学目的】使学生掌握框架标志及属性,学会熟练使用HTML标志设计框架网页。【教学重点】框架的嵌套使用【教学难点】理解属性name、target的意义【教学方式】案例分析式、项目教学【教学参考】1 杨浩著 清华大学出版社2 电脑报社出版3TML网页制作教程 材义语编著 铁道出版社4HTML基础与实例 程耀编著 电子工业出版社,【新课】一、设计框架网页的标志标志一:用于定义框架的分割方式格式:说明:(1)rows,cols中必须选择一个(2)rows,cols的值有三种表示方式:数字:定的像素值;百分比:相对宽度,以当前的浏览器窗口为参照;*:将剩下未被分配空间平均分配;例:1.表示按水平方向分割,每一框架窗口占浏览器窗口的1/3,窗口从上到下排列;2.表示按垂直方向分割,第一个窗口占40%,其余两个窗口各占30%,窗口从左到右排列,3.表示先水平方向分割,再垂直方向分割,两行三列排列。,标志二:用于定义一个子框架窗口,指定窗口中显示的网页的路径、名称及框架名称。格式:,例1:设计如下框架网页:,分析:这是一个左右结构的框架,框架左边窗口显示网页为1.htm,框架窗口右边显示网页为2.htm框架结构部分对应网页为aa.htm;程序代码如下:1.HTM代码:特别推荐文学芳草竹林听海梧桐树下,如烟往事牧歌唱晚2.htm代码如下:aa.htm代码如下:,二、框架标志配合使用的属性 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.,最上窗口是显示的网页12.htm,上下框架网页为index.htm;左右框架网页为aa.htm,左框架显示网页为1.htm,右框架显示网页为2.htm;程序代码如下:INGEX.htm代码:,12.Htm代码:爱情究竟是什么?老妈说:爱情是颗洋葱头,一片片剥下去,总有一片让你泪流满面;老爸说:爱情是感冒,既瞒不了自己,也瞒不了别人,因为你抑制不住自己的喷嚏和鼻涕;朋友说:爱情是只啁啾的鸟,总想往高处飞,但又总要找个栖息的角落;而嗜饮咖啡的我更愿意说:爱情是一杯香浓的咖啡。既然是咖啡,光有冲泡还不够味,因为总有些东西会漂在上面,所以还要找把小勺子,轻轻地、慢慢地来搅和,让它们就在这一搅一拌中渐渐融合,你中有我,我中有你,散发出令人神清气爽的醇香。所以,情窦初开的你,爱如潮水的你,浓情蜜意的你,不论应酬有几多,工作有多忙,时间多紧张,你都要找点时间,找点空闲,带上你的心上人儿找个安静、浪漫的、温馨的地方,散散步聊聊天-因为爱情咖啡需要找把小勺慢慢搅拌。就在这摇拌中,把心摇近,把情摇浓,最后融合在一起再也分不开。关于爱情的点点滴滴,在这轻轻地搅拌中,愈久弥香,飘散在这座城市的角角落落.,1Htm代码如下:特别推荐文学芳草竹林听海梧桐树下,如烟往事 牧歌唱晚,二、浮动框架,基本语法:,标志配合使用的属性:Src:框架中显示的网页文件路径Width:框架宽度;height:框架高度Name:框架名称;align:框架对齐方式;Frameborder:(取值0和1)Framespacing:边框线宽度Scrolling:滚动条属性(yes/no/auto)Noresize:框架调整属性Bordercolor:边框线颜色Marginwidth:框架边缘宽度Marginheight:框架边缘高度,案例设计:浮动框架的使用,案例设计:浮动框架中超级链接的实现,案例设计:浮动框架在网页设计中的综合应用,【课后小结】框架结构是布局网页的一种常用方式,要掌握框架及其嵌套的实现,浮动框架的使用,以及在框架中设置超级链接时目标框架位置的设置。,